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