From 7f0ec738a0af4d9d334ce85012f864f2519ebb3f Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期六, 23 九月 2023 13:32:24 +0800
Subject: [PATCH] feat: 表格组件新增表头配置组件, 各列表页适配此组件

---
 src/views/supplierManage/supplier/index.vue  |   79 ++++++--
 src/components/makepager/TableCommonView.vue |  230 +++++++++++++++++--------
 src/views/productManage/product/index.vue    |   51 ++++-
 src/views/purchaseManage/purchase/index.vue  |   40 +++-
 src/views/purchaseManage/returned/index.vue  |   42 +++-
 src/views/purchaseManage/quality/index.vue   |   40 +++-
 6 files changed, 342 insertions(+), 140 deletions(-)

diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index ca6a5e6..d037c30 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -21,82 +21,99 @@
     >
       <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
       <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column>
-      <el-table-column align="center"
-        v-for="(item, i) in tableList.tableColumn"
-        :key="i"
-        :prop="item.prop"
-        :label="item.label"
-        :width="item.width"
-        :min-width="item.min"
-        show-overflow-tooltip
-        :sortable="item.sortable"
-      >
-        <template slot-scope="scope">
-          <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
-          <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
-          <span v-else-if="item.isTime">{{
-            dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
-              ? "--"
-              : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
-          }}</span>
-          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{
-            scope.row[item.prop]
-          }}</span>
-          <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span>
-          <span
-            v-else-if="item.isCommonClick && scope.row[item.prop]"
-            class="sel-name"
-            @click="selCommonClick(scope.row)"
+      <template v-for="(item, i) in tableList.tableColumn">
+        <el-table-column
+          align="center"
+          :key="i"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :min-width="item.min"
+          show-overflow-tooltip
+          :sortable="item.sortable"
+          v-if="item.isShowColumn"
+        >
+          <template slot-scope="scope">
+            <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
+            <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
+            <span v-else-if="item.isTime">{{
+                dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 00:06:26"
+                    ? "--"
+                    : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
+              }}</span>
+            <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selCommonClick(scope.row)">{{
+                scope.row[item.prop]
+              }}</span>
+            <span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "鏄�" : "鍚�" }}</span>
+            <span
+                v-else-if="item.isCommonClick && scope.row[item.prop]"
+                class="sel-name"
+                @click="selCommonClick(scope.row)"
             >{{ scope.row[item.prop] }}</span
-          >
-          <div v-else-if="item.isProductName" class="product-view">
-            <ul v-if="scope.row.products && scope.row.products.length > 0">
-              <li v-for="(item, index) in scope.row.products" :key="index">
-                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
-                  {{ item.name }}
-                </div>
-              </li>
-            </ul>
-            <div v-else class="no-product">{{ "--" }}</div>
-          </div>
-          <div v-else-if="item.isProductAmount" class="product-view">
-            <ul v-if="scope.row.products && scope.row.products.length > 0">
-              <li v-for="(item, index) in scope.row.products" :key="index">
-                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
-                  {{ item.amount }}
-                </div>
-              </li>
-            </ul>
-            <div v-else class="no-product">{{ "--" }}</div>
-          </div>
-          <div v-else-if="item.isProductPrice" class="product-view">
-            <ul v-if="scope.row.products && scope.row.products.length > 0">
-              <li v-for="(item, index) in scope.row.products" :key="index">
-                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
-                  {{ item.price }}
-                </div>
-              </li>
-            </ul>
-            <div v-else class="no-product">{{ "--" }}</div>
-          </div>
-          <div v-else-if="item.isProductTotal" class="product-view">
-            <ul v-if="scope.row.products && scope.row.products.length > 0">
-              <li v-for="(item, index) in scope.row.products" :key="index">
-                <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
-                  {{ item.total }}
-                </div>
-              </li>
-            </ul>
-            <div v-else class="no-product">{{ "--" }}</div>
-          </div>
-          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
-        </template>
-      </el-table-column>
+            >
+            <div v-else-if="item.isProductName" class="product-view">
+              <ul v-if="scope.row.products && scope.row.products.length > 0">
+                <li v-for="(item, index) in scope.row.products" :key="index">
+                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
+                    {{ item.name }}
+                  </div>
+                </li>
+              </ul>
+              <div v-else class="no-product">{{ "--" }}</div>
+            </div>
+            <div v-else-if="item.isProductAmount" class="product-view">
+              <ul v-if="scope.row.products && scope.row.products.length > 0">
+                <li v-for="(item, index) in scope.row.products" :key="index">
+                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
+                    {{ item.amount }}
+                  </div>
+                </li>
+              </ul>
+              <div v-else class="no-product">{{ "--" }}</div>
+            </div>
+            <div v-else-if="item.isProductPrice" class="product-view">
+              <ul v-if="scope.row.products && scope.row.products.length > 0">
+                <li v-for="(item, index) in scope.row.products" :key="index">
+                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
+                    {{ item.price }}
+                  </div>
+                </li>
+              </ul>
+              <div v-else class="no-product">{{ "--" }}</div>
+            </div>
+            <div v-else-if="item.isProductTotal" class="product-view">
+              <ul v-if="scope.row.products && scope.row.products.length > 0">
+                <li v-for="(item, index) in scope.row.products" :key="index">
+                  <div :class="scope.row.products.length === 1 ? 'name-view no-bottom' : 'name-view'">
+                    {{ item.total }}
+                  </div>
+                </li>
+              </ul>
+              <div v-else class="no-product">{{ "--" }}</div>
+            </div>
+            <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
+          </template>
+        </el-table-column>
+      </template>
       <slot name="tableButton" />
       <div slot="empty">
         <el-empty description="鏆傛棤鏁版嵁"></el-empty>
       </div>
     </el-table>
+    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
+    <div class="styleBtn">
+      <i @click="checkCol()" class="label">...</i>
+      <el-checkbox-group
+          v-model="showcol"
+          v-show="iscolopen"
+          class="checkbox-group"
+          @change="selectCheckBoxList"
+      >
+        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
+        >{{ item }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
   </div>
 </template>
 
@@ -111,6 +128,9 @@
           selectBox: false,
           selectIndex: false,
           tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁
+          showcol: [],
+          allcol: [],
+          highlight: false,
           tableColumn: [
             // table琛ㄥ崟
             { label: "", prop: "", min: 200, tooltip: true }
@@ -138,11 +158,30 @@
     }
   },
   data() {
-    return {}
+    return {
+      iscolopen: false,
+      showcol:[]
+    }
+  },
+  watch: {
+    'tableList.showcol':{
+      handler(newVal){
+        this.showcol=newVal
+      },
+      immediate:true
+    }
   },
   computed: {},
-  mounted() {},
   methods: {
+    onMaskClick() {
+      this.iscolopen = false;
+    },
+    checkCol() {
+      this.iscolopen = !this.iscolopen;
+    },
+    selectCheckBoxList(val) {
+      this.$emit("selTableCol", val);
+    },
     handleReserve(row) {
       return row._id ? row._id : row.id
     },
@@ -299,6 +338,7 @@
   // margin-top: 20px;
   // margin-right: 10px;
   // margin-bottom: 40px;
+  position: relative;
   height: 100%;
   .blue {
     width: 70px;
@@ -363,4 +403,50 @@
     padding: 4px 0;
   }
 }
+
+.overSpread1 {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0);
+  z-index: 10;
+}
+
+.styleBtn {
+  position: absolute;
+  width: 30px;
+  height: 36px;
+  // line-height: 26px;
+  // background: #06c062;
+  top: 0;
+  right: 2px;
+  z-index: 9999;
+  .label {
+    position: absolute;
+    top: 6px;
+    font-size: 20px;
+    // line-height: 5px;
+    cursor: pointer;
+    color: #000;
+    transform: rotate(-90deg);
+  }
+  .checkbox-group {
+    width: 160px;
+    height: 330px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    line-height: 25px;
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 12px;
+    position: absolute;
+    right: 0;
+    top: 30px;
+    z-index: 99;
+    box-shadow: 0 0 2px 2px #f8f8f8;
+  }
+}
 </style>
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index ac53129..7ea3200 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -26,7 +26,12 @@
     <div class="body">
       <div class="body-card">
         <div class="list-view">
-          <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
+          <TableCommonView
+            ref="tableListRef"
+            :table-list="tableList"
+            @selCommonClick="selCommonClick"
+            @selTableCol="selTableCol"
+          >
             <!-- <template slot="tableButton">
             <el-table-column label="鎿嶄綔" width="120">
               <template slot-scope="scope">
@@ -76,7 +81,20 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
-      }
+      },
+      tableColumn: [
+        { label: "浜у搧缂栫爜", prop: "number", min: 190, isCommonClick: true },
+        { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
+        { label: "渚涘簲鍟�", prop: "supplierName", min: 130 },
+        { label: "浜у搧绫诲埆", prop: "productType", min: 130 },
+        { label: "瑙勬牸", prop: "specifications", min: 130 },
+        { label: "鍨嬪彿", prop: "modelNumber", min: 130 },
+        { label: "鍗曚綅", prop: "unit", min: 60 },
+        { label: "浠锋牸", prop: "purchasePrice", min: 130 },
+        { label: "鏈�浣庡簱瀛�", prop: "minimumStock", min: 80 },
+        { label: "鏈�楂樺簱瀛�", prop: "maximumStock", min: 80 }
+      ],
+      showCol: ['浜у搧缂栫爜', '浜у搧鍚嶇О', '渚涘簲鍟�', '浜у搧绫诲埆', '瑙勬牸', '鍨嬪彿', '鍗曚綅', '浠锋牸', '鏈�浣庡簱瀛�', '鏈�楂樺簱瀛�']
     }
   },
   created() {
@@ -84,23 +102,24 @@
     this.getData()
   },
   methods: {
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
     setTable() {
       this.tableList = {
         tableInfomation: [],
         selectIndex: true,
-        tableColumn: [
-          { label: "浜у搧缂栫爜", prop: "number", min: 190, isCommonClick: true },
-          { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
-          { label: "渚涘簲鍟�", prop: "supplierName", min: 130 },
-          { label: "浜у搧绫诲埆", prop: "productType", min: 130 },
-          { label: "瑙勬牸", prop: "specifications", min: 130 },
-          { label: "鍨嬪彿", prop: "modelNumber", min: 130 },
-          { label: "鍗曚綅", prop: "unit", min: 60 },
-          { label: "浠锋牸", prop: "purchasePrice", min: 130 },
-          { label: "鏈�浣庡簱瀛�", prop: "minimumStock", min: 80 },
-          { label: "鏈�楂樺簱瀛�", prop: "maximumStock", min: 80 }
-        ]
+        showcol: this.showCol,
+        allcol: [],
+        tableColumn:this.setColumnVisible(this.showCol)
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+
       this.searchOptions = []
       for (let i = 0; i < this.tableList.tableColumn.length; i++) {
         const label = this.tableList.tableColumn[i].label
@@ -108,6 +127,10 @@
         this.searchOptions.push({ value: value, label: label })
       }
     },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
+    },
     // 璇锋眰鏁版嵁
     async getData() {
       await getProductList({
diff --git a/src/views/purchaseManage/purchase/index.vue b/src/views/purchaseManage/purchase/index.vue
index eafe06f..93e3d2b 100644
--- a/src/views/purchaseManage/purchase/index.vue
+++ b/src/views/purchaseManage/purchase/index.vue
@@ -22,6 +22,7 @@
               ref="tableListRef"
               :table-list="tableList"
               @selCommonClick="selCommonClick"
+              @selTableCol="selTableCol"
           >
             <template slot="tableButton">
               <el-table-column  label="鐘舵��" width="120">
@@ -84,7 +85,18 @@
         title: "鍒涘缓",
         infomation: {}
       },
-      purchaseStatusList: getDataByType("purchaseStatus")
+      purchaseStatusList: getDataByType("purchaseStatus"),
+      tableColumn: [
+        { label: "閲囪喘鍗曞彿", prop: "number", min: 150, isCommonClick: true },
+        { label: "閲囪喘鍗曞悕绉�", prop: "name", min: 130, isCommonClick: true },
+        { label: "鍗曟嵁绫诲瀷", prop: "orderType", min: 130 },
+        { label: "渚涘簲鍟嗗悕绉�", prop: "contact", min: 130 },
+        { label: "閲囪喘鏁伴噺", prop: "quantity", min: 130 },
+        { label: "鏀惰揣浠撳簱", prop: "warehouse", min: 130 },
+        { label: "缁忓姙浜�", prop: "handledBy", min: 130 },
+        { label: "鍒跺崟浜�", prop: "creator", min: 130 }
+      ],
+      showCol: ['閲囪喘鍗曞彿', '閲囪喘鍗曞悕绉�', '鍗曟嵁绫诲瀷', '渚涘簲鍟嗗悕绉�', '閲囪喘鏁伴噺', '鏀惰揣浠撳簱', '缁忓姙浜�', '鍒跺崟浜�']
     }
   },
   created() {
@@ -103,21 +115,27 @@
         return "--"
       }
     },
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
     setTable() {
       this.tableList = {
         tableInfomation: [],
         selectIndex: true,
-        tableColumn: [
-          { label: "閲囪喘鍗曞彿", prop: "number", min: 150, isCommonClick: true },
-          { label: "閲囪喘鍗曞悕绉�", prop: "name", min: 130, isCommonClick: true },
-          { label: "鍗曟嵁绫诲瀷", prop: "orderType", min: 130 },
-          { label: "渚涘簲鍟嗗悕绉�", prop: "contact", min: 130 },
-          { label: "閲囪喘鏁伴噺", prop: "quantity", min: 130 },
-          { label: "鏀惰揣浠撳簱", prop: "warehouse", min: 130 },
-          { label: "缁忓姙浜�", prop: "handledBy", min: 130 },
-          { label: "鍒跺崟浜�", prop: "creator", min: 130 }
-        ]
+        showcol: this.showCol,
+        allcol: [],
+        tableColumn:this.setColumnVisible(this.showCol)
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+    },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
     },
     // 璇锋眰鏁版嵁
     async getData() {
diff --git a/src/views/purchaseManage/quality/index.vue b/src/views/purchaseManage/quality/index.vue
index 9b57852..66c70c9 100644
--- a/src/views/purchaseManage/quality/index.vue
+++ b/src/views/purchaseManage/quality/index.vue
@@ -21,6 +21,7 @@
               ref="tableListRef"
               :table-list="tableList"
               @selCommonClick="selCommonClick"
+              @selTableCol="selTableCol"
           >
             <template slot="tableButton">
               <el-table-column align="center" label="鐘舵��" width="120">
@@ -72,6 +73,18 @@
       },
       search: {},
       qualityStatusList:getDataByType('qualityStatus'),
+      tableColumn: [
+        { label: "璐ㄦ鍗曠紪鍙�", prop: "number", min: 190, isCommonClick: true },
+        { label: "閲囪喘鍗曠紪鍙�", prop: "name", min: 130, isCommonClick: true},
+        { label: "鍗曟嵁绫诲瀷", prop: "contact_name", min: 130 },
+        { label: "渚涘簲鍟嗗悕绉�", prop: "contact_phone", min: 130 },
+        { label: "鍒拌揣浠撳簱", prop: "sales_resources", min: 130 },
+        { label: "璐ㄦ鏁伴噺", prop: "province", min: 130 },
+        { label: "妫�楠屽憳", prop: "city", min: 130 },
+        // { label: "鐘舵��", prop: "member_name", min: 110 },
+        { label: "璐ㄦ鏃堕棿", prop: "member_name", min: 150 },
+      ],
+      showCol: ['璐ㄦ鍗曠紪鍙�', '閲囪喘鍗曠紪鍙�', '鍗曟嵁绫诲瀷', '渚涘簲鍟嗗悕绉�', '鍒拌揣浠撳簱', '璐ㄦ鏁伴噺', '妫�楠屽憳', '璐ㄦ鏃堕棿']
     }
   },
   created() {
@@ -90,22 +103,27 @@
         return "--";
       }
     },
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
     setTable() {
       this.tableList = {
         tableInfomation: [],
         selectIndex: true,
-        tableColumn: [
-          { label: "璐ㄦ鍗曠紪鍙�", prop: "number", min: 190, isCommonClick: true },
-          { label: "閲囪喘鍗曠紪鍙�", prop: "name", min: 130, isCommonClick: true},
-          { label: "鍗曟嵁绫诲瀷", prop: "contact_name", min: 130 },
-          { label: "渚涘簲鍟嗗悕绉�", prop: "contact_phone", min: 130 },
-          { label: "鍒拌揣浠撳簱", prop: "sales_resources", min: 130 },
-          { label: "璐ㄦ鏁伴噺", prop: "province", min: 130 },
-          { label: "妫�楠屽憳", prop: "city", min: 130 },
-          // { label: "鐘舵��", prop: "member_name", min: 110 },
-          { label: "璐ㄦ鏃堕棿", prop: "member_name", min: 150 },
-        ]
+        showcol: this.showCol,
+        allcol: [],
+        tableColumn:this.setColumnVisible(this.showCol)
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+    },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
     },
     // 璇锋眰鏁版嵁
     async getData() {
diff --git a/src/views/purchaseManage/returned/index.vue b/src/views/purchaseManage/returned/index.vue
index feafffe..470e0e3 100644
--- a/src/views/purchaseManage/returned/index.vue
+++ b/src/views/purchaseManage/returned/index.vue
@@ -21,6 +21,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
+             @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column align="center" label="鐘舵��" width="120">
@@ -74,6 +75,19 @@
       },
       search: '',
       returnedStatusList:getDataByType('returnedStatus'),
+      tableColumn: [
+        { label: "閫�璐у崟缂栧彿", prop: "number", min: 190, isCommonClick: true },
+        { label: "閲囪喘鍗曠紪鍙�", prop: "name", min: 130, isCommonClick: true},
+        { label: "鍗曟嵁绫诲瀷", prop: "contact_name", min: 130 },
+        { label: "渚涘簲鍟嗗悕绉�", prop: "contact_phone", min: 130 },
+        { label: "閫�璐т粨搴�", prop: "sales_resources", min: 130 },
+        { label: "閫�璐х悊鐢�", prop: "province", min: 180 },
+        { label: "缁忓姙浜�", prop: "city", min: 130 },
+        { label: "鍒跺崟浜�", prop: "member_name", min: 130 },
+        { label: "閫�璐ф棩鏈�", prop: "member_name", min: 150 },
+        // { label: "鐘舵��", prop: "member_name", min: 110 }
+      ],
+      showCol: ['閫�璐у崟缂栧彿', '閲囪喘鍗曠紪鍙�', '鍗曟嵁绫诲瀷', '渚涘簲鍟嗗悕绉�', '閫�璐т粨搴�', '閫�璐х悊鐢�', '缁忓姙浜�', '鍒跺崟浜�', '閫�璐ф棩鏈�']
     }
   },
   created() {
@@ -92,23 +106,27 @@
         return "--";
       }
     },
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
     setTable() {
       this.tableList = {
         tableInfomation: [],
         selectIndex: true,
-        tableColumn: [
-          { label: "閫�璐у崟缂栧彿", prop: "number", min: 190, isCommonClick: true },
-          { label: "閲囪喘鍗曠紪鍙�", prop: "name", min: 130, isCommonClick: true},
-          { label: "鍗曟嵁绫诲瀷", prop: "contact_name", min: 130 },
-          { label: "渚涘簲鍟嗗悕绉�", prop: "contact_phone", min: 130 },
-          { label: "閫�璐т粨搴�", prop: "sales_resources", min: 130 },
-          { label: "閫�璐х悊鐢�", prop: "province", min: 180 },
-          { label: "缁忓姙浜�", prop: "city", min: 130 },
-          { label: "鍒跺崟浜�", prop: "member_name", min: 130 },
-          { label: "閫�璐ф棩鏈�", prop: "member_name", min: 150 },
-          // { label: "鐘舵��", prop: "member_name", min: 110 }
-        ]
+        showcol: this.showCol,
+        allcol: [],
+        tableColumn:this.setColumnVisible(this.showCol)
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+    },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
     },
     // 璇锋眰鏁版嵁
     async getData() {
diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue
index cbfb597..07c775c 100644
--- a/src/views/supplierManage/supplier/index.vue
+++ b/src/views/supplierManage/supplier/index.vue
@@ -23,6 +23,7 @@
                 :table-list="tableList"
                 @selCommonClick="selCommonClick"
                 @tableRowClick="tableRowClick"
+                @selTableCol="selTableCol"
             >
               <template slot="tableButton">
                 <el-table-column label="鎿嶄綔" width="100">
@@ -77,6 +78,7 @@
                 :table-list="productTableList"
                 @selCommonClick="selCommonClick"
                 @getSelectArray="getSelectArray"
+                @selTableCol="selProductTableCol"
             >
               <template slot="tableButton">
                 <el-table-column label="鎿嶄綔" width="170">
@@ -157,7 +159,28 @@
         pageSize: 10,
         totalCount: 0
       },
-      supplierId: 0
+      supplierId: 0,
+      showCol:['渚涘簲鍟嗙紪鍙�','渚涘簲鍟嗗悕绉�','渚涘簲鍟嗙被鍨�','鎵�灞炶涓�','鑱旂郴浜�','鑱旂郴鐢佃瘽','鐘舵��','鍒涘缓鏃堕棿'],
+      tableColumn: [
+        { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true },
+        { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 },
+        { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 },
+        { label: "鎵�灞炶涓�", prop: "industry", min: 130 },
+        { label: "鑱旂郴浜�", prop: "contact", min: 130 },
+        { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 },
+        { label: "鐘舵��", prop: "status_name", min: 130 },
+        { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 }
+      ],
+      showProductCol:['浜у搧缂栫爜','浜у搧鍚嶇О','浜у搧瑙勬牸','鍗曚綅','閲囪喘浠锋牸','渚涜揣鏃堕暱(澶�)','鐗╂祦鏃堕暱(澶�)'],
+      productColumn:[
+        { label: "浜у搧缂栫爜", prop: "number", min: 190 },
+        { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
+        { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 },
+        { label: "鍗曚綅", prop: "unit", min: 130 },
+        { label: "閲囪喘浠锋牸", prop: "purchasePrice", min: 130 },
+        { label: "渚涜揣鏃堕暱(澶�)", prop: "deliveryTime", min: 130 },
+        { label: "鐗╂祦鏃堕暱(澶�)", prop: "shippingDuration", min: 130 }
+      ]
     }
   },
   created() {
@@ -166,23 +189,34 @@
     this.getData()
   },
   methods: {
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
+    setProductColumnVisible(showCol){
+      return  this.productColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
     setTable() {
       this.tableList = {
         tableInfomation: [],
         selectIndex: true,
         highlight: true,
         ref: "tableListRef",
-        tableColumn: [
-          { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true },
-          { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130 },
-          { label: "渚涘簲鍟嗙被鍨�", prop: "supplierType", min: 130 },
-          { label: "鎵�灞炶涓�", prop: "industry", min: 130 },
-          { label: "鑱旂郴浜�", prop: "contact", min: 130 },
-          { label: "鑱旂郴鐢佃瘽", prop: "phone", min: 130 },
-          { label: "鐘舵��", prop: "status_name", min: 130 },
-          { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 }
-        ]
+        showcol: this.showCol,
+        allcol: [],
+        tableColumn: this.setColumnVisible(this.showCol),
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+
       this.searchOptions = []
       for (let i = 0; i < this.tableList.tableColumn.length; i++) {
         const label = this.tableList.tableColumn[i].label
@@ -190,20 +224,18 @@
         this.searchOptions.push({ value: value, label: label })
       }
     },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
+    },
     setProductTable() {
       this.productTableList = {
         tableInfomation: [],
         selectBox: true,
         selectIndex: true,
-        tableColumn: [
-          { label: "浜у搧缂栫爜", prop: "number", min: 190 },
-          { label: "浜у搧鍚嶇О", prop: "name", min: 130 },
-          { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 },
-          { label: "鍗曚綅", prop: "unit", min: 130 },
-          { label: "閲囪喘浠锋牸", prop: "purchasePrice", min: 130 },
-          { label: "渚涜揣鏃堕暱(澶�)", prop: "deliveryTime", min: 130 },
-          { label: "鐗╂祦鏃堕暱(澶�)", prop: "shippingDuration", min: 130 }
-        ]
+        showcol: this.showProductCol,
+        allcol: [],
+        tableColumn: this.setProductColumnVisible(this.showProductCol),
       }
       this.searchProductOptions = []
       for (let i = 0; i < this.productTableList.tableColumn.length; i++) {
@@ -211,6 +243,13 @@
         const value = this.productTableList.tableColumn[i].prop
         this.searchProductOptions.push({ value: value, label: label })
       }
+
+      this.productTableList.allcol = this.productTableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
+      console.log('this.productTableList',this.productTableList)
+    },
+    selProductTableCol(val) {
+      this.showProductCol = val;
+      this.productTableList.tableColumn = this.setProductColumnVisible(val);
     },
     // 璇锋眰鏁版嵁
     getData() {

--
Gitblit v1.8.0