From 07af2c5e2d9dd0978a401bc4c42ceef2f2938433 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 18 四月 2023 09:24:54 +0800
Subject: [PATCH] 1.质量管理动态列完成

---
 src/views/qualityManager/processCheckItem.vue     |  123 +++++--
 src/views/qualityManager/processCheckStandard.vue |  123 +++++--
 src/views/qualityManager/qualityPlaning.vue       |  272 ++++++++++++----
 src/views/qualityManager/processCheckRecord.vue   |  308 +++++++++++--------
 src/views/qualityManager/defectDefine.vue         |  124 +++++--
 5 files changed, 632 insertions(+), 318 deletions(-)

diff --git a/src/views/qualityManager/defectDefine.vue b/src/views/qualityManager/defectDefine.vue
index 04f7de8..95a4568 100644
--- a/src/views/qualityManager/defectDefine.vue
+++ b/src/views/qualityManager/defectDefine.vue
@@ -36,8 +36,13 @@
         />
       </div>
       <div class="elTableDiv">
+        <TableColumnSettings
+          :list1="tableColumnSettingsArray"
+          @tableColumnUpdate="tableColumnUpdate"
+        />
         <el-table
           ref="tableDataRef"
+          :key="tableTimeStampKey"
           class="tableFixed"
           :data="tableData"
           :height="tableHeight+'px'"
@@ -49,51 +54,25 @@
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
-          <!--          <el-table-column-->
-          <!--            type="selection"-->
-          <!--            width="50"-->
-          <!--          />-->
+
           <el-table-column
-            prop="RowNum"
-            width="50"
-            label="搴忓彿"
-            fixed
-          />
-          <el-table-column
-            prop="code"
-            label="缂洪櫡浠g爜"
+            v-for="item in tableColumnSettingsArray"
+            v-if="item.show"
+            :key="item.id"
+            :sortable="item.sortable"
+            :prop="item.prop"
+            :min-width="item.minWidth"
+            :label="item.label"
+            :width="item.width"
             show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="name"
-            label="缂洪櫡鍚嶇О"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="descr"
-            show-tooltip-when-overflow
-            label="缂洪櫡鎻忚堪"
-            sortable="custom"
+            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
           >
             <template slot-scope="{row}">
-              <div v-if="row.descr">{{ row.descr }}</div>
-              <div v-else>/</div>
+              <div v-if="!row[item.prop]">/</div>
+              <div v-else>{{ row[item.prop] }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="lm_user"
-            label="鍒涘缓浜哄憳"
-            sortable="custom"
-            show-tooltip-when-overflow
-          />
-          <el-table-column
-            prop="lm_date"
-            show-tooltip-when-overflow
-            label="鍒涘缓鏃堕棿"
-            sortable="custom"
-          />
+
           <el-table-column
             label="鎿嶄綔"
             fixed="right"
@@ -173,11 +152,12 @@
 import { validateCode } from '@/utils/global'
 import elDragDialog from '@/directive/el-drag-dialog'
 import waves from '@/directive/waves'
+import TableColumnSettings from '@/components/TableColumnSettings'
 
 export default {
   name: 'QXDY',
   components: {
-    Pagination, ImportPicker
+    Pagination, ImportPicker, TableColumnSettings
   },
   directives: { elDragDialog, waves },
   data() {
@@ -195,6 +175,63 @@
       },
       total: 10,
       tableData: [],
+
+      tableColumnSettingsArray: [
+        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 闅愯棌鍒�  show: false闅愯棌锛宼rue鏄剧ず
+        { minWidth: 25, width: 50, prop: 'RowNum', label: '搴忓彿', id: 2, show: true, fixed: 'left', sortable: false }, // custom
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'code',
+          label: '缂洪櫡浠g爜',
+          id: 3,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'name',
+          label: '缂洪櫡鍚嶇О',
+          id: 4,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 330,
+          width: false,
+          prop: 'descr',
+          label: '缂洪櫡鎻忚堪',
+          id: 5,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_user',
+          label: '鍒涘缓浜哄憳',
+          id: 6,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_date',
+          label: '鍒涘缓鏃堕棿',
+          id: 7,
+          show: true,
+          fixed: false,
+          sortable: true
+        }
+      ],
+      tableTimeStampKey: new Date().getTime(), // 琛ㄦ牸key
+
       dialogVisible: false,
       dialogForm: {
         defectcode: '', // 缂洪櫡浠g爜
@@ -230,6 +267,13 @@
     this.getHeight()
   },
   methods: {
+    tableColumnUpdate(val, isCopyTrue) {
+      if (isCopyTrue) {
+        this.tableColumnSettingsArray = val
+      }
+      this.tableTimeStampKey = new Date().getTime()
+      this.$refs.tableDataRef.doLayout()
+    },
     async getDedectSearch() {
       const res = await DedectSearch(this.form)
       this.tableData = res.data
diff --git a/src/views/qualityManager/processCheckItem.vue b/src/views/qualityManager/processCheckItem.vue
index a0fb0c4..5a53ca5 100644
--- a/src/views/qualityManager/processCheckItem.vue
+++ b/src/views/qualityManager/processCheckItem.vue
@@ -35,8 +35,13 @@
         />
       </div>
       <div class="elTableDiv">
+        <TableColumnSettings
+          :list1="tableColumnSettingsArray"
+          @tableColumnUpdate="tableColumnUpdate"
+        />
         <el-table
           ref="tableDataRef"
+          :key="tableTimeStampKey"
           class="tableFixed"
           :data="tableData"
           :height="tableHeight+'px'"
@@ -48,51 +53,25 @@
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
-          <!--          <el-table-column-->
-          <!--            type="selection"-->
-          <!--            width="50"-->
-          <!--          />-->
+
           <el-table-column
-            prop="RowNum"
-            width="50"
-            label="搴忓彿"
-            fixed
-          />
-          <el-table-column
-            prop="code"
-            label="椤圭洰浠g爜"
-            sortable="custom"
+            v-for="item in tableColumnSettingsArray"
+            v-if="item.show"
+            :key="item.id"
+            :sortable="item.sortable"
+            :prop="item.prop"
+            :min-width="item.minWidth"
+            :label="item.label"
+            :width="item.width"
             show-tooltip-when-overflow
-          />
-          <el-table-column
-            prop="name"
-            label="椤圭洰鍚嶇О"
-            sortable="custom"
-            show-tooltip-when-overflow
-          />
-          <el-table-column
-            prop="descr"
-            label="椤圭洰鎻忚堪"
-            show-tooltip-when-overflow
-            sortable="custom"
+            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
           >
             <template slot-scope="{row}">
-              <div v-if="row.descr">{{ row.descr }}</div>
-              <div v-else>/</div>
+              <div v-if="!row[item.prop]">/</div>
+              <div v-else>{{ row[item.prop] }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            show-tooltip-when-overflow
-            prop="lm_user"
-            label="鍒涘缓浜哄憳"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="lm_date"
-            label="鍒涘缓鏃堕棿"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
+
           <el-table-column
             label="鎿嶄綔"
             fixed="right"
@@ -166,11 +145,12 @@
 import { validateCode } from '@/utils/global'
 import elDragDialog from '@/directive/el-drag-dialog'
 import waves from '@/directive/waves'
+import TableColumnSettings from '@/components/TableColumnSettings'
 
 export default {
   name: 'Xxxx',
   components: {
-    Pagination
+    Pagination, TableColumnSettings
   },
   directives: { elDragDialog, waves },
   data() {
@@ -188,6 +168,62 @@
       },
       total: 10,
       tableData: [],
+      tableColumnSettingsArray: [
+        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 闅愯棌鍒�  show: false闅愯棌锛宼rue鏄剧ず
+        { minWidth: 25, width: 50, prop: 'RowNum', label: '搴忓彿', id: 2, show: true, fixed: 'left', sortable: false }, // custom
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'code',
+          label: '鏍囧噯浠g爜',
+          id: 3,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'name',
+          label: '鏍囧噯鍚嶇О',
+          id: 4,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 330,
+          width: false,
+          prop: 'descr',
+          label: '鏍囧噯鎻忚堪',
+          id: 5,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_user',
+          label: '鍒涘缓浜哄憳',
+          id: 6,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_date',
+          label: '鍒涘缓鏃堕棿',
+          id: 7,
+          show: true,
+          fixed: false,
+          sortable: true
+        }
+      ],
+      tableTimeStampKey: new Date().getTime(), // 琛ㄦ牸key
+
       dialogVisible: false,
       dialogForm: {
         checkitemcode: '', // 宸ュ簭妫�楠岄」鐩紪鐮�
@@ -213,6 +249,13 @@
     this.getHeight()
   },
   methods: {
+    tableColumnUpdate(val, isCopyTrue) {
+      if (isCopyTrue) {
+        this.tableColumnSettingsArray = val
+      }
+      this.tableTimeStampKey = new Date().getTime()
+      this.$refs.tableDataRef.doLayout()
+    },
     async getStepCheckItemSearch() {
       const res = await StepCheckItemSearch(this.form)
       this.tableData = res.data
diff --git a/src/views/qualityManager/processCheckRecord.vue b/src/views/qualityManager/processCheckRecord.vue
index 0ba88d9..5a437c8 100644
--- a/src/views/qualityManager/processCheckRecord.vue
+++ b/src/views/qualityManager/processCheckRecord.vue
@@ -81,7 +81,12 @@
       </div>
 
       <div class="elTableDiv">
+        <TableColumnSettings
+          :list1="tableColumnSettingsArray"
+          @tableColumnUpdate="tableColumnUpdate"
+        />
         <el-table
+          :key="tableTimeStampKey"
           ref="tableDataRef"
           class="tableFixed"
           :data="tableData"
@@ -94,145 +99,42 @@
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
-          <!--          <el-table-column-->
-          <!--            type="selection"-->
-          <!--            width="50"-->
-          <!--            fixed-->
-          <!--          />-->
+
           <el-table-column
-            prop="RowNum"
-            width="50"
-            label="搴忓彿"
-            fixed
-          />
-          <el-table-column
-            prop="wo_code"
-            label="宸ュ崟缂栫爜"
+            v-for="item in tableColumnSettingsArray"
+            v-if="item.show"
+            :key="item.id"
+            :sortable="item.sortable"
+            :prop="item.prop"
+            :min-width="item.minWidth"
+            :label="item.label"
+            :width="item.width"
             show-tooltip-when-overflow
-            width="160"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="partcode"
-            show-tooltip-when-overflow
-            width="160"
-            label="浜у搧缂栫爜"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="partname"
-            label="浜у搧鍚嶇О"
-            width="160"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="partspec"
-            label="浜у搧瑙勬牸"
-            show-tooltip-when-overflow
-            width="160"
-            sortable="custom"
+            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
           >
             <template slot-scope="{row}">
-              <div v-if="row.partspec">{{ row.partspec }} </div>
-              <div v-else>/</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="step_code"
-            label="宸ュ簭缂栫爜"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="stepname"
-            label="宸ュ簭鍚嶇О"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="checkstaned_code"
-            label="鏍囧噯缂栫爜"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="checkstaned_name"
-            label="鏍囧噯鍚嶇О"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="check_type"
-            label="妫�楠岀被鍨�"
-            show-tooltip-when-overflow
-            sortable="custom"
-            width="120"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.check_type==='FirstCheck'">棣栨</div>
-              <div v-if="row.check_type==='PatroCheck'">宸℃</div>
-              <div v-if="row.check_type==='EndCheck'">瀹屽伐妫�</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="check_result"
-            label="妫�楠岀粨鏋�"
-            sortable="custom"
-            show-tooltip-when-overflow
-            width="120"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.check_result==='NG'">
-                <i class="el-icon-info" style="margin-right: 2px" />
-                涓嶈壇
+              <div v-if="!row[item.prop]">/</div>
+              <div v-else-if="item.prop==='check_type'">
+                {{ checktypeArr.find(i=>i.code===row[item.prop]).name }}
               </div>
-              <div v-if="row.check_result==='OK'">
-                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
-                鍚堟牸</div>
+              <div v-else-if="item.prop==='check_result'">
+                <div v-if="row.check_result==='NG'">
+                  <i class="el-icon-info" style="margin-right: 2px" />
+                  涓嶈壇
+                </div>
+                <div v-if="row.check_result==='OK'">
+                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
+                  鍚堟牸
+                </div>
+              </div>
+              <div v-else>{{ row[item.prop] }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="check_descr"
-            label="妫�楠屽娉�"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.check_descr">{{ row.check_descr }} </div>
-              <div v-else>/</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="check_qty"
-            label="妫�楠屾暟閲�"
-            width="120"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="lm_user"
-            label="妫�楠屼汉鍛�"
-            show-tooltip-when-overflow
-            sortable="custom"
-            width="120"
-          />
-          <el-table-column
-            prop="lm_date"
-            label="妫�楠屾椂闂�"
-            show-tooltip-when-overflow
-            width="160"
-            sortable="custom"
-          />
+
           <el-table-column
             label="鎿嶄綔"
             fixed="right"
-            width="80"
+            width="120"
           >
             <template slot-scope="{row}">
               <div class="operationClass">
@@ -386,12 +288,13 @@
 import { StepCheckTableOutExcel, StepCheckTableSearch, StepCheckTableSubSearch } from '@/api/qualityManager'
 import elDragDialog from '@/directive/el-drag-dialog'
 import waves from '@/directive/waves'
+import TableColumnSettings from '@/components/TableColumnSettings'
 
 const SER_HZ = /^[\u4e00-\u9fa5]+$/
 export default {
   name: 'Zzjg',
   components: {
-    Pagination, ImportPicker
+    Pagination, ImportPicker, TableColumnSettings
   },
   directives: { elDragDialog, waves },
   data() {
@@ -415,6 +318,8 @@
         rows: 20 // 姣忛〉澶氬皯鏉�
       },
       checktypeArr: [
+        { code: 'InCheck', name: '鍏ュ巶妫�楠�' },
+        { code: 'OutCheck', name: '鍑哄巶妫�楠�' },
         { code: 'FirstCheck', name: '棣栨' },
         { code: 'PatroCheck', name: '宸℃' },
         { code: 'EndCheck', name: '瀹屽伐妫�' }
@@ -426,6 +331,142 @@
 
       total: 10,
       tableData: [],
+      tableColumnSettingsArray: [
+        { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 闅愯棌鍒�  show: false闅愯棌锛宼rue鏄剧ず
+        { minWidth: 25, width: 50, prop: 'RowNum', label: '搴忓彿', id: 2, show: true, fixed: 'left', sortable: false }, // custom
+        {
+          minWidth: 160,
+          width: false,
+          prop: 'wo_code',
+          label: '宸ュ崟缂栧彿',
+          id: 3,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'partcode',
+          label: '浜у搧缂栫爜',
+          id: 4,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'partname',
+          label: '浜у搧鍚嶇О',
+          id: 5,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'partspec',
+          label: '浜у搧瑙勬牸',
+          id: 6,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'step_code',
+          label: '宸ュ簭缂栫爜',
+          id: 7,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'stepname',
+          label: '宸ュ簭鍚嶇О',
+          id: 8,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'checkstaned_code',
+          label: '鏍囧噯缂栫爜',
+          id: 9,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'checkstaned_name',
+          label: '鏍囧噯鍚嶇О',
+          id: 10,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'check_type',
+          label: '妫�楠岀被鍨�',
+          id: 11,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'check_result',
+          label: '妫�楠岀粨鏋�',
+          id: 12,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'check_descr',
+          label: '妫�楠屽娉�',
+          id: 13,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'check_qty',
+          label: '妫�楠屾暟閲�',
+          id: 14,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_user',
+          label: '妫�楠屼汉鍛�',
+          id: 15,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 160,
+          width: false,
+          prop: 'lm_date',
+          label: '妫�楠屾椂闂�',
+          id: 16,
+          show: true,
+          fixed: false,
+          sortable: true
+        }
+      ],
+      tableTimeStampKey: new Date().getTime(), // 琛ㄦ牸key
       dialogVisible: false,
       tableDataDialog: [],
       title_value: '鏁版嵁瀵煎叆 / 鐐规閮ㄤ綅',
@@ -449,6 +490,13 @@
     this.getHeight()
   },
   methods: {
+    tableColumnUpdate(val, isCopyTrue) {
+      if (isCopyTrue) {
+        this.tableColumnSettingsArray = val
+      }
+      this.tableTimeStampKey = new Date().getTime()
+      this.$refs.tableDataRef.doLayout()
+    },
     async getStepCheckTableSearch() {
       const res = await StepCheckTableSearch(this.form)
       this.tableData = res.data
diff --git a/src/views/qualityManager/processCheckStandard.vue b/src/views/qualityManager/processCheckStandard.vue
index 54cbba3..abf3791 100644
--- a/src/views/qualityManager/processCheckStandard.vue
+++ b/src/views/qualityManager/processCheckStandard.vue
@@ -35,8 +35,13 @@
         />
       </div>
       <div class="elTableDiv">
+        <TableColumnSettings
+          :list1="tableColumnSettingsArray"
+          @tableColumnUpdate="tableColumnUpdate"
+        />
         <el-table
           ref="tableDataRef"
+          :key="tableTimeStampKey"
           class="tableFixed"
           :data="tableData"
           :height="tableHeight+'px'"
@@ -48,51 +53,25 @@
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
-          <!--          <el-table-column-->
-          <!--            type="selection"-->
-          <!--            width="50"-->
-          <!--          />-->
+
           <el-table-column
-            prop="RowNum"
-            width="50"
-            label="搴忓彿"
-            fixed
-          />
-          <el-table-column
-            prop="code"
+            v-for="item in tableColumnSettingsArray"
+            v-if="item.show"
+            :key="item.id"
+            :sortable="item.sortable"
+            :prop="item.prop"
+            :min-width="item.minWidth"
+            :label="item.label"
+            :width="item.width"
             show-tooltip-when-overflow
-            label="鏍囧噯浠g爜"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="name"
-            label="鏍囧噯鍚嶇О"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="descr"
-            show-tooltip-when-overflow
-            label="鏍囧噯鎻忚堪"
-            sortable="custom"
+            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
           >
             <template slot-scope="{row}">
-              <div v-if="row.descr">{{ row.descr }}</div>
-              <div v-else>/</div>
+              <div v-if="!row[item.prop]">/</div>
+              <div v-else>{{ row[item.prop] }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="lm_user"
-            label="鍒涘缓浜哄憳"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
-          <el-table-column
-            prop="lm_date"
-            label="鍒涘缓鏃堕棿"
-            show-tooltip-when-overflow
-            sortable="custom"
-          />
+
           <el-table-column
             label="鎿嶄綔"
             fixed="right"
@@ -293,11 +272,12 @@
 import { validateCode } from '@/utils/global'
 import elDragDialog from '@/directive/el-drag-dialog'
 import waves from '@/directive/waves'
+import TableColumnSettings from '@/components/TableColumnSettings'
 
 export default {
   name: 'ZJBZ',
   components: {
-    Pagination
+    Pagination, TableColumnSettings
   },
   directives: { elDragDialog, waves },
   data() {
@@ -316,6 +296,62 @@
       },
       total: 10,
       tableData: [],
+      tableColumnSettingsArray: [
+        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 闅愯棌鍒�  show: false闅愯棌锛宼rue鏄剧ず
+        { minWidth: 25, width: 50, prop: 'RowNum', label: '搴忓彿', id: 2, show: true, fixed: 'left', sortable: false }, // custom
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'code',
+          label: '鏍囧噯浠g爜',
+          id: 3,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'name',
+          label: '鏍囧噯鍚嶇О',
+          id: 4,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 330,
+          width: false,
+          prop: 'descr',
+          label: '鏍囧噯鎻忚堪',
+          id: 5,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_user',
+          label: '鍒涘缓浜哄憳',
+          id: 6,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_date',
+          label: '鍒涘缓鏃堕棿',
+          id: 7,
+          show: true,
+          fixed: false,
+          sortable: true
+        }
+      ],
+      tableTimeStampKey: new Date().getTime(), // 琛ㄦ牸key
+
       dialogVisible: false,
       dialogForm: {
         code: '', // 宸ュ簭妫�楠屾爣鍑嗙紪鐮�
@@ -345,6 +381,13 @@
     this.getHeight()
   },
   methods: {
+    tableColumnUpdate(val, isCopyTrue) {
+      if (isCopyTrue) {
+        this.tableColumnSettingsArray = val
+      }
+      this.tableTimeStampKey = new Date().getTime()
+      this.$refs.tableDataRef.doLayout()
+    },
     tableRowClassName({ row, rowIndex }) {
       return 'custom-row'
     },
diff --git a/src/views/qualityManager/qualityPlaning.vue b/src/views/qualityManager/qualityPlaning.vue
index 3c4c773..fd9ece9 100644
--- a/src/views/qualityManager/qualityPlaning.vue
+++ b/src/views/qualityManager/qualityPlaning.vue
@@ -89,7 +89,12 @@
       </div>
 
       <div class="elTableDiv">
+        <TableColumnSettings
+          :list1="tableColumnSettingsArray"
+          @tableColumnUpdate="tableColumnUpdate"
+        />
         <el-table
+          :key="tableTimeStampKey"
           ref="tableDataRef"
           class="tableFixed"
           :data="tableData"
@@ -102,80 +107,119 @@
           :cell-style="this.$cellStyle"
           @sort-change="sortChange"
         >
+          <!--          <el-table-column-->
+          <!--            prop="RowNum"-->
+          <!--            width="50"-->
+          <!--            fixed-->
+          <!--            label="搴忓彿"-->
+          <!--          />-->
+          <!--          <el-table-column-->
+          <!--            prop="code"-->
+          <!--            label="璐ㄦ鏂规缂栫爜"-->
+          <!--            sortable="custom"-->
+          <!--          />-->
+          <!--          <el-table-column-->
+          <!--            prop="name"-->
+          <!--            label="璐ㄦ鏂规鍚嶇О"-->
+          <!--            sortable="custom"-->
+          <!--          />-->
+          <!--          <el-table-column-->
+          <!--            prop="status"-->
+          <!--            label="鏈夋晥鐘舵��"-->
+          <!--            sortable="custom"-->
+          <!--          >-->
+          <!--            <template slot-scope="{row}">-->
+          <!--              <div v-if="row.status==='Y'"><i-->
+          <!--                class="el-icon-success"-->
+          <!--                :style="{color:$store.state.settings.theme}"-->
+          <!--                style="margin-right:5px"-->
+          <!--              />鏄�-->
+          <!--              </div>-->
+          <!--              <div v-else-if="row.status==='N'"><i class="el-icon-info" style="margin-right: 5px" />鍚�</div>-->
+          <!--              <div v-else>/</div>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <!--          <el-table-column-->
+          <!--            prop="checktype"-->
+          <!--            label="璐ㄦ绫诲瀷"-->
+          <!--            sortable="custom"-->
+          <!--          >-->
+          <!--            <template slot-scope="{row}">-->
+          <!--              <div v-if="row.checktype">{{ checktypeArr.find(i => i.code === row.checktype).name }}</div>-->
+          <!--              <div v-else>/</div>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <!--          <el-table-column-->
+          <!--            prop="sampmethod"-->
+          <!--            label="鎶芥牱鏂瑰紡"-->
+          <!--            sortable="custom"-->
+          <!--          >-->
+          <!--            <template slot-scope="{row}">-->
+          <!--              <div v-if="row.sampmethod">{{ sampltypeArr.find(i => i.code === row.sampmethod).name }}</div>-->
+          <!--              <div v-else>/</div>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <!--          <el-table-column-->
+          <!--            prop="suitobject"-->
+          <!--            label="閫傜敤瀵硅薄"-->
+          <!--            sortable="custom"-->
+          <!--          >-->
+          <!--            <template slot-scope="{row}">-->
+          <!--              <div v-if="row.suitobject">{{ suitobjectArr.find(i => i.code === row.suitobject).name }}</div>-->
+          <!--              <div v-else>/</div>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+
+          <!--          <el-table-column-->
+          <!--            prop="username"-->
+          <!--            label="鍒涘缓浜哄憳"-->
+          <!--            sortable="custom"-->
+          <!--          />-->
+          <!--          <el-table-column-->
+          <!--            prop="lm_date"-->
+          <!--            label="鍒涘缓鏃堕棿"-->
+          <!--            width="160"-->
+          <!--            sortable="custom"-->
+          <!--          />-->
+
           <el-table-column
-            prop="RowNum"
-            width="50"
-            fixed
-            label="搴忓彿"
-          />
-          <el-table-column
-            prop="code"
-            label="璐ㄦ鏂规缂栫爜"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="name"
-            label="璐ㄦ鏂规鍚嶇О"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="status"
-            label="鏈夋晥鐘舵��"
-            sortable="custom"
+            v-for="item in tableColumnSettingsArray"
+            v-if="item.show"
+            :key="item.id"
+            :sortable="item.sortable"
+            :prop="item.prop"
+            :min-width="item.minWidth"
+            :label="item.label"
+            :width="item.width"
+            show-tooltip-when-overflow
+            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
           >
             <template slot-scope="{row}">
-              <div v-if="row.status==='Y'"><i
-                class="el-icon-success"
-                :style="{color:$store.state.settings.theme}"
-                style="margin-right:5px"
-              />鏄�
+              <div v-if="!row[item.prop]">/</div>
+              <div v-else-if="item.prop==='checktype'">
+                {{ checktypeArr.find(i=>i.code===row[item.prop]).name }}
               </div>
-              <div v-else-if="row.status==='N'"><i class="el-icon-info" style="margin-right: 5px" />鍚�</div>
-              <div v-else>/</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="checktype"
-            label="璐ㄦ绫诲瀷"
-            sortable="custom"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.checktype">{{ checktypeArr.find(i => i.code === row.checktype).name }}</div>
-              <div v-else>/</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="sampmethod"
-            label="鎶芥牱鏂瑰紡"
-            sortable="custom"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.sampmethod">{{ sampltypeArr.find(i => i.code === row.sampmethod).name }}</div>
-              <div v-else>/</div>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="suitobject"
-            label="閫傜敤瀵硅薄"
-            sortable="custom"
-          >
-            <template slot-scope="{row}">
-              <div v-if="row.suitobject">{{ suitobjectArr.find(i => i.code === row.suitobject).name }}</div>
-              <div v-else>/</div>
+              <div v-else-if="item.prop==='sampmethod'">
+                {{ sampltypeArr.find(i=>i.code===row[item.prop]).name }}
+              </div>
+              <!--              閫傜敤瀵硅薄-->
+              <div v-else-if="item.prop==='suitobject'">
+                {{ suitobjectArr.find(i => i.code === row.suitobject).name }}
+              </div>
+              <div v-else-if="item.prop==='status'">
+                <div v-if="row.status==='Y'"><i
+                  class="el-icon-success"
+                  :style="{color:$store.state.settings.theme}"
+                  style="margin-right:5px"
+                />鏄�
+                </div>
+                <div v-else-if="row.status==='N'"><i class="el-icon-info" style="margin-right: 5px" />鍚�</div>
+                <div v-else>/</div>
+              </div>
+              <div v-else>{{ row[item.prop] }}</div>
             </template>
           </el-table-column>
 
-          <el-table-column
-            prop="username"
-            label="鍒涘缓浜哄憳"
-            sortable="custom"
-          />
-          <el-table-column
-            prop="lm_date"
-            label="鍒涘缓鏃堕棿"
-            width="160"
-            sortable="custom"
-          />
           <el-table-column
             label="鎿嶄綔"
             width="120"
@@ -646,11 +690,12 @@
   QualityInspectionSearch, QualityInspectionSeeEdit,
   StepCheckItemSelect
 } from '@/api/qualityManager'
+import TableColumnSettings from '@/components/TableColumnSettings'
 
 export default {
   name: 'Zzjg',
   components: {
-    Pagination
+    Pagination, TableColumnSettings
   },
   directives: { elDragDialog, waves },
   data() {
@@ -688,6 +733,90 @@
       ],
       total: 10,
       tableData: [],
+      tableColumnSettingsArray: [
+        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 闅愯棌鍒�  show: false闅愯棌锛宼rue鏄剧ず
+        { minWidth: 25, width: 50, prop: 'RowNum', label: '搴忓彿', id: 2, show: true, fixed: 'left', sortable: false }, // custom
+        {
+          minWidth: 130,
+          width: false,
+          prop: 'code',
+          label: '璐ㄦ鏂规缂栫爜',
+          id: 3,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 130,
+          width: false,
+          prop: 'name',
+          label: '璐ㄦ鏂规鍚嶇О',
+          id: 4,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'status',
+          label: '鏈夋晥鐘舵��',
+          id: 5,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'checktype',
+          label: '璐ㄦ绫诲瀷',
+          id: 6,
+          show: true,
+          fixed: false,
+          sortable: true
+        }, {
+          minWidth: 110,
+          width: false,
+          prop: 'sampmethod',
+          label: '鎶芥牱鏂瑰紡',
+          id: 7,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'suitobject',
+          label: '閫傜敤瀵硅薄',
+          id: 8,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 110,
+          width: false,
+          prop: 'lm_user',
+          label: '鍒涘缓浜哄憳',
+          id: 9,
+          show: true,
+          fixed: false,
+          sortable: true
+        },
+        {
+          minWidth: 160,
+          width: false,
+          prop: 'lm_date',
+          label: '鍒涘缓鏃堕棿',
+          id: 10,
+          show: true,
+          fixed: false,
+          sortable: true
+        }
+      ],
+      tableTimeStampKey: new Date().getTime(), // 琛ㄦ牸key
       dialogVisible: false,
       dialogForm: {
         qualityinsptcode: '', // 璐ㄦ鏂规缂栫爜
@@ -757,6 +886,13 @@
     this.getHeight()
   },
   methods: {
+    tableColumnUpdate(val, isCopyTrue) {
+      if (isCopyTrue) {
+        this.tableColumnSettingsArray = val
+      }
+      this.tableTimeStampKey = new Date().getTime()
+      this.$refs.tableDataRef.doLayout()
+    },
     handleRequest() {
       this.getQualityInspectionSearch().then(res => {
         if (res.code === '200') {

--
Gitblit v1.9.3