【营销目标】详情页面，模板表格操作以及高度适配

src/views/business/spd/target/targetMk/item.vue

@@ -4,84 +4,146 @@
       <div class="btn_add">
         <!-- <el-button type="primary" size="mini" @click="useTemplateDownload" v-if="this.pageStu != 'see'">下载模板</el-button>
         <el-button type="primary" size="mini" @click="useAdd" v-if="this.pageStu != 'see'">导入</el-button> -->
-        <el-button type="primary" size="mini" @click="useAdd" v-if="this.pageStu != 'see'">增行</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="useAdd"
+          v-if="this.pageStu != 'see'"
+          >增行</el-button
+        >
       </div>
     </el-row>
     <!-- 渲染表头 -->
-    <el-table :data="items" height="500px" v-horizontal-scroll>
-      <el-table-column label="序号" type="index" width="50" align="center" fixed>
+    <el-table :data="items" :height="height" v-horizontal-scroll>
+      <el-table-column
+        label="序号"
+        type="index"
+        width="50"
+        align="center"
+        fixed
+      >
       </el-table-column>
-      <el-table-column show-overflow-tooltip v-for="head in headers" :prop="head.prop" :label="head.modelName" width="200" align="center">
+      <el-table-column
+        show-overflow-tooltip
+        v-for="head in headers"
+        :prop="head.prop"
+        :label="head.modelName"
+        width="200"
+        align="center"
+      >
         <template slot-scope="scope">
           <div v-if="pageStu == 'add' || pageStu == 'edit'">
             <div v-if="scope.row[head.prop].type == 'D'">
-              <dr-popover-select 
-                size="mini" 
-                v-if="scope.row[head.prop].model == 'MK_TARGET_CYCLE_PARAM' || scope.row[head.prop].model == 'MK_TARGET_INDEX_PARAM'" 
-                v-model="scope.row[head.prop].valueName" 
-                title="参照选择" 
-                :type="scope.row[head.prop].model" 
+              <dr-popover-select
+                size="mini"
+                v-if="
+                  scope.row[head.prop].model == 'MK_TARGET_CYCLE_PARAM' ||
+                  scope.row[head.prop].model == 'MK_TARGET_INDEX_PARAM'
+                "
+                v-model="scope.row[head.prop].valueName"
+                title="参照选择"
+                :type="scope.row[head.prop].model"
                 :dataMapping="{
                   value: 'id',
                   valueName: 'name',
-                }" 
+                }"
                 :source.sync="scope.row[head.prop]"
                 :queryParams="additionalCondition"
               />
-              <el-popover-tree-select 
-                size="mini" 
-                v-else-if="scope.row[head.prop].model == 'MATERIALCLASSIFY_PARAM' || scope.row[head.prop].model == 'PROFITCENTER' || scope.row[head.prop].model == 'PRODUCTLINE'"
-                v-model="scope.row[head.prop].valueName" 
-                valueKey='name'
-                title="参照选择" 
-                :referName="scope.row[head.prop].model" 
+              <el-popover-tree-select
+                size="mini"
+                v-else-if="
+                  scope.row[head.prop].model == 'MATERIALCLASSIFY_PARAM' ||
+                  scope.row[head.prop].model == 'PROFITCENTER' ||
+                  scope.row[head.prop].model == 'PRODUCTLINE'
+                "
+                v-model="scope.row[head.prop].valueName"
+                valueKey="name"
+                title="参照选择"
+                :referName="scope.row[head.prop].model"
                 :dataMapping="{
                   value: 'id',
                   valueName: 'name',
-                }" 
-                :source.sync="scope.row[head.prop]">
+                }"
+                :source.sync="scope.row[head.prop]"
+              >
               </el-popover-tree-select>
-              <dr-popover-select 
-                size="mini" 
-                v-else 
-                v-model="scope.row[head.prop].valueName" 
-                title="参照选择" 
-                :type="scope.row[head.prop].model" 
+              <dr-popover-select
+                size="mini"
+                v-else
+                v-model="scope.row[head.prop].valueName"
+                title="参照选择"
+                :type="scope.row[head.prop].model"
                 :dataMapping="{
                   value: 'id',
                   valueName: 'name',
-                }" 
-                :source.sync="scope.row[head.prop]">
+                }"
+                :source.sync="scope.row[head.prop]"
+              >
               </dr-popover-select>
             </div>
-            <div v-if="scope.row[head.prop].type == 'C' || scope.row[head.prop].type == 'I'">
-              <el-input size="mini"  v-model="scope.row[head.prop].value" class="input-view" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>
+            <div
+              v-if="
+                scope.row[head.prop].type == 'C' ||
+                scope.row[head.prop].type == 'I'
+              "
+            >
+              <el-input
+                size="mini"
+                v-model="scope.row[head.prop].value"
+                class="input-view"
+                oninput="value=value.replace(/[^0-9]/g,'')"
+              ></el-input>
             </div>
           </div>
           <div v-else-if="pageStu == 'see'">
             <div v-if="scope.row[head.prop].type == 'D'">
-              {{scope.row[head.prop].valueName}}
+              {{ scope.row[head.prop].valueName }}
             </div>
             <div v-else>
-              {{scope.row[head.prop].value}}
+              {{ scope.row[head.prop].value }}
             </div>
           </div>
         </template>
-        <el-table-column show-overflow-tooltip v-if="head.children" v-for="headChi in head.children" :prop="headChi.prop" :label="headChi.modelName" width="150" align="center">
+        <el-table-column
+          show-overflow-tooltip
+          v-if="head.children"
+          v-for="headChi in head.children"
+          :prop="headChi.prop"
+          :label="headChi.modelName"
+          width="150"
+          align="center"
+        >
           <template slot-scope="scope">
             <div v-if="pageStu == 'add' || pageStu == 'edit'">
               <!-- <el-input size="mini" v-model="scope.row[headChi.prop].value" class="input-view" oninput="value=value.replace(/[^0-9]/g,'')"></el-input> -->
-              <el-input-number size="mini" v-model="scope.row[headChi.prop].value" :precision="2" class="input-view" oninput="value=value.replace(/[^0-9]/g,'')"></el-input-number>
+              <el-input-number
+                size="mini"
+                v-model="scope.row[headChi.prop].value"
+                :precision="2"
+                class="input-view"
+                oninput="value=value.replace(/[^0-9]/g,'')"
+              ></el-input-number>
             </div>
             <div v-else-if="pageStu == 'see'">
-              {{scope.row[headChi.prop].value}}
+              {{ scope.row[headChi.prop].value }}
             </div>
           </template>
         </el-table-column>
       </el-table-column>
-      <el-table-column fixed="right" label="操作" align="center" width="100" v-if="this.pageStu != 'see'">
+      <el-table-column
+        fixed="right"
+        label="操作"
+        align="center"
+        v-if="this.pageStu != 'see'"
+      >
         <template slot-scope="scope">
-          <el-button type="text" size="mini" @click="useDel(scope.$index, scope.row)">删除</el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="useDel(scope.$index, scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -92,151 +154,181 @@
 import { getTargetItem } from "@/api/business/spd/starget/target";
 
 export default {
-  name: 'item',
-  props: ['pageStu','template','form','columns','latestTemplate'],  
-  dicts: ['sys_yes_no','mk_periodic_unit','mk_dimensionality','mk_index_type','mk_expansion_mode'],
+  name: "item",
+  props: ["pageStu", "template", "form", "columns", "latestTemplate"],
+  dicts: [
+    "sys_yes_no",
+    "mk_periodic_unit",
+    "mk_dimensionality",
+    "mk_index_type",
+    "mk_expansion_mode",
+  ],
   components: {
     ElPopoverTreeSelect: () =>
       import("@/components/popover-tree-select/index.vue"),
   },
   data() {
     return {
-      items:[],
-      delItems:[],
-      headers:[],
-      itemTemplate:{},
-    }
+      items: [],
+      delItems: [],
+      headers: [],
+      itemTemplate: {},
+    };
+  },
+  computed: {
+    height: {
+      get() {
+        return window.innerHeight - 410;
+      },
+      set() {},
+    },
   },
   async created() {
-    this.processHeadersData(this.template.unfold,this.columns);
+    this.processHeadersData(this.template.unfold, this.columns);
     this.itemTemplate = this.formatItem(this.columns);
-    if(this.pageStu == 'edit' || this.pageStu == 'see'){
-      if(this.latestTemplate){
+    if (this.pageStu == "edit" || this.pageStu == "see") {
+      if (this.latestTemplate) {
         await this.fetchTargetItem(this.form.id);
       }
     }
   },
   methods: {
     //增行
-    useAdd(){
-      let obj = JSON.parse(JSON.stringify(this.itemTemplate))
+    useAdd() {
+      let obj = JSON.parse(JSON.stringify(this.itemTemplate));
       this.items.push(obj);
-      console.log('this.items',this.items);
+      console.log("this.items", this.items);
     },
     //删行
-    useDel(index){
-      this.items[index].delFlag = '2';
-      if(this.items[index].id){
-        let delList = this.items.filter(item => {
-          return item.delFlag == '2'
-        })
+    useDel(index) {
+      this.items[index].delFlag = "2";
+      if (this.items[index].id) {
+        let delList = this.items.filter((item) => {
+          return item.delFlag == "2";
+        });
         this.delItems.push(...delList);
       }
       this.items.splice(index, 1);
     },
     //下载模板
-    useTemplateDownload(){
+    useTemplateDownload() {
       try {
-        this.download('/mk/target/targetTemplate/download/' + this.template.id, {}, `营销目标_${new Date().getTime()}.xlsx`)
+        this.download(
+          "/mk/target/targetTemplate/download/" + this.template.id,
+          {},
+          `营销目标_${new Date().getTime()}.xlsx`
+        );
       } catch (err) {
         console.error(err);
       } finally {
       }
     },
     //表头数据处理
-    processHeadersData(unfold,columns){
+    processHeadersData(unfold, columns) {
       const array = [];
-      if("cycle/unfold" == unfold){
-        for(let i in columns){
-          if(columns[i].type == 'D'){
-            columns[i].prop = columns[i].model
+      if ("cycle/unfold" == unfold) {
+        for (let i in columns) {
+          if (columns[i].type == "D") {
+            columns[i].prop = columns[i].model;
             array.push(columns[i]);
-          }else{
-            const arr = array.filter(element => element.model == columns[i].superiors);
-            if(arr.length > 0){
-              columns[i].prop = array[array.length - 1].model + '-' + columns[i].model;
+          } else {
+            const arr = array.filter(
+              (element) => element.model == columns[i].superiors
+            );
+            if (arr.length > 0) {
+              columns[i].prop =
+                array[array.length - 1].model + "-" + columns[i].model;
               array[array.length - 1].children.push(columns[i]);
-            }else{
-              columns[i].prop = columns[i].superiors + '-' + columns[i].model;
+            } else {
+              columns[i].prop = columns[i].superiors + "-" + columns[i].model;
               let c = {
-                type:'C',
-                model:columns[i].superiors,
-                modelName:columns[i].superiorsName,
-                children:[columns[i]]
-              }
+                type: "C",
+                model: columns[i].superiors,
+                modelName: columns[i].superiorsName,
+                children: [columns[i]],
+              };
               array.push(c);
             }
           }
         }
         this.headers = array;
-      }else if("cycle" == unfold){
-        for(let i in columns){
-          columns[i].prop = columns[i].model
-          if(columns[i].model == 'MK_TARGET_CYCLE_PARAM' || columns[i].model == 'MK_TARGET_INDEX_PARAM'){
-            columns[i].templateId = this.template.id
+      } else if ("cycle" == unfold) {
+        for (let i in columns) {
+          columns[i].prop = columns[i].model;
+          if (
+            columns[i].model == "MK_TARGET_CYCLE_PARAM" ||
+            columns[i].model == "MK_TARGET_INDEX_PARAM"
+          ) {
+            columns[i].templateId = this.template.id;
           }
           array.push(columns[i]);
         }
         this.headers = array;
-      }else if("unfold" == unfold){
-        for(let i in columns){
-          columns[i].prop = columns[i].model
-          if(columns[i].model == 'MK_TARGET_CYCLE_PARAM' || columns[i].model == 'MK_TARGET_INDEX_PARAM'){
-            columns[i].templateId = this.template.id
+      } else if ("unfold" == unfold) {
+        for (let i in columns) {
+          columns[i].prop = columns[i].model;
+          if (
+            columns[i].model == "MK_TARGET_CYCLE_PARAM" ||
+            columns[i].model == "MK_TARGET_INDEX_PARAM"
+          ) {
+            columns[i].templateId = this.template.id;
           }
           array.push(columns[i]);
         }
         this.headers = array;
-      }else if("" == unfold){
-        for(let i in columns){
-          columns[i].prop = columns[i].model
-          if(columns[i].model == 'MK_TARGET_CYCLE_PARAM' || columns[i].model == 'MK_TARGET_INDEX_PARAM'){
-            columns[i].templateId = this.template.id
+      } else if ("" == unfold) {
+        for (let i in columns) {
+          columns[i].prop = columns[i].model;
+          if (
+            columns[i].model == "MK_TARGET_CYCLE_PARAM" ||
+            columns[i].model == "MK_TARGET_INDEX_PARAM"
+          ) {
+            columns[i].templateId = this.template.id;
           }
           array.push(columns[i]);
         }
         this.headers = array;
       }
-      console.log('this.headers',this.headers);
+      console.log("this.headers", this.headers);
     },
     //获取明细数据
-    async fetchTargetItem(id){
-      await getTargetItem(id).then(res => {
+    async fetchTargetItem(id) {
+      await getTargetItem(id).then((res) => {
         if (res.code === 200) {
-          this.items = res.rows
+          this.items = res.rows;
         }
-      })
+      });
     },
     //格式化数据
-    formatItem(item){
+    formatItem(item) {
       let obj = {};
-      for(let i in item){
+      for (let i in item) {
         obj[item[i].prop] = item[i];
       }
       return obj;
     },
     //合并已存在和删除的数据
-    merge(){
-      console.log('this.items',this.items);
+    merge() {
+      console.log("this.items", this.items);
       this.items.push(...this.delItems);
       return this.items;
     },
     //附加查询条件
-    additionalCondition(prop){
-      console.log("prop",prop);
+    additionalCondition(prop) {
+      console.log("prop", prop);
       return {
-        parame:{
-          templateId: prop.templateId
-        }
-      }
-    }
-  }
-}
+        parame: {
+          templateId: prop.templateId,
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.btn_add{
-    margin-bottom: 10px;
+.btn_add {
+  margin-bottom: 10px;
   display: flex;
   justify-content: flex-end;
 }
@@ -245,5 +337,5 @@ export default {
   margin: 20px 0;
   display: flex;
   justify-content: center;
-} 
-</style>
+}
+</style>