From 890781f6894a4af2558e41cc5c9660477b68b9c5 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期三, 01 十一月 2023 19:28:08 +0800 Subject: [PATCH] 公共搜索组件修改、供应商列表及添加产品搜索框修改 --- src/views/supplierManage/supplier/index.vue | 149 +++++++++++++++++++++++++------------------------ 1 files changed, 75 insertions(+), 74 deletions(-) diff --git a/src/views/supplierManage/supplier/index.vue b/src/views/supplierManage/supplier/index.vue index 0755ae7..d3bccbd 100644 --- a/src/views/supplierManage/supplier/index.vue +++ b/src/views/supplierManage/supplier/index.vue @@ -4,14 +4,14 @@ <div class="filter"> <div class="filter-card"> <CommonSearch - :show-add="true" - add-title="鏂板缓" - @addCommonClick="addBtnClick" - :show-download="false" - :amount-view="false" - :show-action-btn="false" - :placeholder="'璇疯緭鍏ヤ緵搴斿晢鍚嶇О'" - @searchClick="onFilterSearch" + :show-add="true" + add-title="鏂板缓" + @addCommonClick="addBtnClick" + :show-download="true" + :amount-view="false" + :show-action-btn="false" + :placeholder="'璇疯緭鍏ヤ緵搴斿晢鍚嶇О'" + @searchClick="onFilterSearch" /> </div> </div> @@ -19,21 +19,21 @@ <div class="body-card"> <div class="list-view"> <TableCommonView - ref="tableSupplier" - :table-list="tableList" - @selCommonClick="selCommonClick" - @tableRowClick="tableRowClick" - @selTableCol="selTableCol" + ref="tableSupplier" + :table-list="tableList" + @selCommonClick="selCommonClick" + @tableRowClick="tableRowClick" + @selTableCol="selTableCol" > <template slot="tableButton"> <el-table-column label="鎿嶄綔" width="100"> <template slot-scope="scope"> <el-button - v-if="scope.row.status === 0" - @click="enableClick(scope.row, '鍚敤')" - type="text" - size="small" - >鍚敤</el-button + v-if="scope.row.status === 0" + @click="enableClick(scope.row, '鍚敤')" + type="text" + size="small" + >鍚敤</el-button > <el-button v-else @click="enableClick(scope.row, '鍋滅敤')" type="text" size="small">鍋滅敤</el-button> <el-button @click="modifyClick(scope.row)" type="text" size="small">淇敼</el-button> @@ -47,18 +47,18 @@ </div> </div> </div> - </div> <div class="bottom"> <div class="simple-filter"> <div class="simple-filter-card"> <CommonSearch - :show-add="false" - :show-download="false" - :amount-view="false" - :show-action-btn="false" - :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'" - @searchClick="onProductFilterSearch" + :show-add="false" + :show-download="false" + :amount-view="false" + :show-screen="false" + :show-action-btn="false" + :placeholder="'璇疯緭鍏ヤ骇鍝佸悕绉�'" + @searchClick="onProductFilterSearch" > <template slot="leftButton"> <div class="sub-title"><span class="sub-title-decorator"></span>鍙彁渚涚殑浜у搧</div> @@ -74,11 +74,11 @@ <div class="body-card"> <div class="list-view"> <TableCommonView - ref="tableListProduct" - :table-list="productTableList" - @selCommonClick="selCommonClick" - @getSelectArray="getSelectArray" - @selTableCol="selProductTableCol" + ref="tableListProduct" + :table-list="productTableList" + @selCommonClick="selCommonClick" + @getSelectArray="getSelectArray" + @selTableCol="selProductTableCol" > <template slot="tableButton"> <el-table-column label="鎿嶄綔" width="170"> @@ -93,10 +93,10 @@ </div> <div class="btn-pager"> <PagerView - class="page" - :pager-options="productPagerOptions" - @size-change="productChangeHandler" - @current-change="currentProductHandler" + class="page" + :pager-options="productPagerOptions" + @size-change="productChangeHandler" + @current-change="currentProductHandler" /> </div> </div> @@ -130,7 +130,7 @@ computed: {}, data() { return { - searchSupplierName: '', + searchSupplierName: "", tableList: {}, // 渚涘簲鍟嗗垪琛� productTableList: {}, // 浜у搧鍒楄〃 selValueList: [], @@ -160,7 +160,7 @@ totalCount: 0 }, supplierId: 0, - showCol:['渚涘簲鍟嗙紪鍙�','渚涘簲鍟嗗悕绉�','渚涘簲鍟嗙被鍨�','鎵�灞炶涓�','鑱旂郴浜�','鑱旂郴鐢佃瘽','鐘舵��'], + showCol: ["渚涘簲鍟嗙紪鍙�", "渚涘簲鍟嗗悕绉�", "渚涘簲鍟嗙被鍨�", "鎵�灞炶涓�", "鑱旂郴浜�", "鑱旂郴鐢佃瘽", "鐘舵��"], tableColumn: [ { label: "渚涘簲鍟嗙紪鍙�", prop: "number", min: 190, isCommonClick: true }, { label: "渚涘簲鍟嗗悕绉�", prop: "name", min: 130, default: true }, @@ -171,8 +171,8 @@ { label: "鐘舵��", prop: "status_name", min: 130 }, { label: "鍒涘缓鏃堕棿", prop: "created_at", min: 130 } ], - showProductCol:['浜у搧缂栫爜','浜у搧鍚嶇О','浜у搧瑙勬牸','鍗曚綅','閲囪喘浠锋牸','渚涜揣鏃堕暱(澶�)','鐗╂祦鏃堕暱(澶�)'], - productColumn:[ + showProductCol: ["浜у搧缂栫爜", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "鍗曚綅", "閲囪喘浠锋牸", "渚涜揣鏃堕暱(澶�)", "鐗╂祦鏃堕暱(澶�)"], + productColumn: [ { label: "浜у搧缂栫爜", prop: "number", min: 190 }, { label: "浜у搧鍚嶇О", prop: "name", min: 130, default: true }, { label: "浜у搧瑙勬牸", prop: "specifications", min: 130 }, @@ -189,19 +189,19 @@ this.getData() }, methods: { - setColumnVisible(showCol){ - return this.tableColumn.map(ele=>{ + setColumnVisible(showCol) { + return this.tableColumn.map((ele) => { return { ...ele, isShowColumn: showCol.includes(ele.label) } }) }, - setProductColumnVisible(showCol){ - return this.productColumn.map(ele=>{ + setProductColumnVisible(showCol) { + return this.productColumn.map((ele) => { return { ...ele, - isShowColumn:showCol.includes(ele.label) + isShowColumn: showCol.includes(ele.label) } }) }, @@ -213,9 +213,9 @@ ref: "tableListRef", showcol: this.showCol, allcol: [], - tableColumn: this.setColumnVisible(this.showCol), + tableColumn: this.setColumnVisible(this.showCol) } - this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label); + 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++) { @@ -225,8 +225,8 @@ } }, selTableCol(val) { - this.showcol = val; - this.tableList.tableColumn = this.setColumnVisible(val); + this.showcol = val + this.tableList.tableColumn = this.setColumnVisible(val) }, setProductTable() { this.productTableList = { @@ -235,7 +235,7 @@ selectIndex: true, showcol: this.showProductCol, allcol: [], - tableColumn: this.setProductColumnVisible(this.showProductCol), + tableColumn: this.setProductColumnVisible(this.showProductCol) } this.searchProductOptions = [] for (let i = 0; i < this.productTableList.tableColumn.length; i++) { @@ -244,12 +244,14 @@ 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) + 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); + this.showProductCol = val + this.productTableList.tableColumn = this.setProductColumnVisible(val) }, // 璇锋眰鏁版嵁 getData() { @@ -282,13 +284,13 @@ }) // 閲嶆柊鑾峰彇渚涘簲鍟嗗垪琛ㄥ悗搴旇閲嶇疆浜у搧鍒楄〃椤电爜 - this.productPagerOptions.currPage = 1; + this.productPagerOptions.currPage = 1 // 濡傛灉渚涘簲鍟嗗垪琛ㄤ负绌�,鍒欏彲鎻愪緵浜у搧鍒楄〃涔熷簲涓虹┖ - if (list.length){ + if (list.length) { this.getProductList() - }else { - this.productTableList.tableInfomation=[] - this.productPagerOptions.currPage = 1; + } else { + this.productTableList.tableInfomation = [] + this.productPagerOptions.currPage = 1 this.productPagerOptions.totalCount = 0 } } @@ -314,15 +316,15 @@ }) }, // 鎼滅储渚涘簲鍟� - onFilterSearch(searchText){ - this.searchSupplierName = searchText ??'' + onFilterSearch(searchText) { + this.searchSupplierName = searchText ?? "" this.pagerOptions.currPage = 1 this.getSupplierList() }, // 鎼滅储浜у搧 - onProductFilterSearch(searchText){ + onProductFilterSearch(searchText) { this.productPagerOptions.currPage = 1 - this.getProductList('name', searchText) + this.getProductList("name", searchText) }, // 鏂板缓渚涘簲鍟� addBtnClick() { @@ -423,32 +425,32 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> -.supplier{ +.supplier { height: 100%; overflow: hidden; - .top{ + .top { position: relative; height: 55%; - .body{ + .body { position: relative; height: calc(100% - 92px); } } - .bottom{ + .bottom { position: relative; height: 45%; - .body{ + .body { position: relative; height: calc(100% - 40px); padding-top: 0; } } - .filter{ + .filter { height: 80px; display: flex; align-items: center; padding: 12px 20px 0 20px; - &-card{ + &-card { height: 80px; display: flex; align-items: center; @@ -459,13 +461,13 @@ background-color: #fff; } } - .simple-filter{ + .simple-filter { height: 40px; box-sizing: border-box; display: flex; align-items: center; padding: 0 20px; - &-card{ + &-card { height: 80px; display: flex; align-items: center; @@ -473,7 +475,7 @@ flex: 1; } } - .body{ + .body { box-sizing: border-box; padding: 10px 20px; border-radius: 12px; @@ -504,7 +506,7 @@ } } } -.sub-title{ +.sub-title { flex-shrink: 0; margin-right: 20px; font-size: 16px; @@ -513,7 +515,7 @@ line-height: 28px; position: relative; padding-left: 12px; - &-decorator{ + &-decorator { position: absolute; height: 100%; width: 4px; @@ -522,5 +524,4 @@ left: 0; } } - </style> -- Gitblit v1.8.0