From 36f65570d93cced7996e337e0b8d289db61662bc Mon Sep 17 00:00:00 2001 From: zzq <a13193816592@163.com> Date: 星期六, 07 十月 2023 19:15:54 +0800 Subject: [PATCH] fix:表格合计动态添加单位 --- src/views/productManage/product/index.vue | 116 ++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 80 insertions(+), 36 deletions(-) diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue index 08c4dcc..b66f494 100644 --- a/src/views/productManage/product/index.vue +++ b/src/views/productManage/product/index.vue @@ -31,19 +31,23 @@ <div v-if="isIconIndex === '1'" class="product-view"> <div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="tableRowClick(item)"> <div class="left"> - <el-image style="width: 60px; height: 80px" :src="url"></el-image> + <!-- <el-image style="width: 60px; height: 80px" :src="url"></el-image> --> + <div class="img-view"> + <i class="el-icon-picture-outline"></i> + </div> </div> <div class="right"> <div class="label"> - <span>鍗楁柟涓濆发SOUTHSILK 19濮嗙背鐪熶笣鐫¤。濂� 100%妗戣殨涓� 闀跨増濂楄瀹� </span> + {{ item.name }} </div> <div class="price"> <span>浠锋牸:锟�</span> - <span>{{ item.name }}</span> + <span>{{ item.salePrice }}</span> </div> <div class="library"> <span>鍦ㄥ簱锛�</span> - <span>{{ item.name }}</span> + <span>{{ item.amount }}</span> + <span style="margin-left: 5px">{{ item.unit }}</span> </div> </div> </div> @@ -62,7 +66,7 @@ </div> --> </div> <div class="btn-pager"> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + <PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" /> </div> </div> <!-- 鏂板缓/缂栬緫 --> @@ -98,15 +102,27 @@ infomation: {} }, isIconIndex: "1", // 1 鍥炬爣 2 鍒楄〃 - url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" + url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", + pageSizes: [15, 30], + keyWord: "", + categoryId: null } }, created() { this.setTable() + let query = this.$route.query + if (query) { + this.categoryId = query.id ? Number(query.id) : null + this.pagerOptions.currPage = 1 + } this.getData() }, methods: { setTable() { + if (this.isIconIndex === "1") { + this.pageSizes = [30, 60] + this.pagerOptions.pageSize = 30 + } this.tableList = { tableInfomation: [], selectBox: true, @@ -127,75 +143,74 @@ let tableColumn = [ { label: "浜у搧鍚嶇О", - prop: "id", + prop: "name", isShowColumn: true, default: true }, { label: "鍐呴儴鍙傝��", - prop: "deviceName", + prop: "internalReference", isShowColumn: showcol.includes("鍐呴儴鍙傝��"), default: false }, { label: "璐熻矗浜�", - prop: "id", + prop: "principal", isShowColumn: true, default: true }, { label: "浜у搧鏍囩", - prop: "deviceId", + prop: "productTagName", isShowColumn: showcol.includes("浜у搧鏍囩"), default: false }, { label: "鏉$爜", - prop: "shopName", + prop: "barcode", isShowColumn: showcol.includes("鏉$爜"), default: false }, { label: "閿�鍞环鏍�", - prop: "faultLevel", + prop: "salePrice", isShowColumn: showcol.includes("閿�鍞环鏍�"), default: false }, { label: "鎴愭湰", - prop: "status", + prop: "cost", isShowColumn: showcol.includes("鎴愭湰"), - default: false, - status: true + default: false }, { label: "浜у搧绫诲埆", - prop: "faultTime", + prop: "categoryName", isShowColumn: showcol.includes("浜у搧绫诲埆"), default: false }, { label: "浜у搧绫诲瀷", - prop: "shopName", + prop: "model", isShowColumn: showcol.includes("浜у搧绫诲瀷"), default: false }, { label: "鍦ㄥ簱鏁伴噺", - prop: "faultLevel", + prop: "amount", isShowColumn: showcol.includes("鍦ㄥ簱鏁伴噺"), default: false }, - { - label: "棰勬祴鏁伴噺", - prop: "status", - isShowColumn: showcol.includes("棰勬祴鏁伴噺"), - default: false, - status: true - }, + // { + // label: "棰勬祴鏁伴噺", + // prop: "status", + // isShowColumn: showcol.includes("棰勬祴鏁伴噺"), + // default: false, + // status: true + // }, { label: "璁¢噺鍗曚綅", - prop: "faultTime", + prop: "unit", isShowColumn: showcol.includes("璁¢噺鍗曚綅"), default: false } @@ -207,33 +222,36 @@ this.tableList.tableColumn = this.setTableColumn(val) }, // 璇锋眰鏁版嵁 - async getData(val, content) { + async getData() { await getProductList({ - [val]: content, + keyWord: this.keyWord, + categoryId: this.categoryId ? this.categoryId : null, page: this.pagerOptions.currPage, pageSize: this.pagerOptions.pageSize }).then((res) => { - if (res.data.code === 200) { - const list = res.data.data.list.map((item) => { + if (res.code === 200) { + const list = res.data.map((item) => { return { - ...item, - supplierNumber: item.supplier.number + ...item } }) this.tableList.tableInfomation = list || [] - this.pagerOptions.totalCount = res.data.data.total + this.pagerOptions.totalCount = res.total } }) }, // 鎼滅储 searchClick(val) { console.log(val) + this.keyWord = val + this.pagerOptions.currPage = 1 this.getData() }, // 鏂板缓 addBtnClick() { this.editConfig.visible = true this.editConfig.title = "鏂板缓" + this.editConfig.infomation = {} }, // 琛岀偣鍑� tableRowClick(row) { @@ -244,7 +262,16 @@ }, // 鍒囨崲鍒楄〃灞曠幇褰㈠紡 selIconSwitchClick(value) { + this.pagerOptions.currPage = 1 this.isIconIndex = value + if (value === "1") { + this.pageSizes = [30, 60] + this.pagerOptions.pageSize = 30 + } else { + this.pageSizes = [15, 30] + this.pagerOptions.pageSize = 15 + } + this.getData() } } } @@ -288,8 +315,8 @@ justify-content: flex-start; align-content: flex-start; .product-box { - width: 295px; - height: 84px; + width: 294px; + height: 94px; margin-bottom: 10px; margin-right: 20px; border: 1px solid #dee2e6; @@ -298,24 +325,41 @@ -webkit-box-shadow: inset 0 0 2px #dee2e6; padding: 8px; display: flex; + align-items: center; + cursor: pointer; .left { width: 60px; text-align: center; + .img-view { + width: 60px; + height: 80px; + line-height: 80px; + border: 1px solid #dee2e6; + font-size: 22px; + color: #b8babb; + } } .right { flex: 1; font-size: 13px; margin-left: 10px; .label { + // max-height: 30px; color: #212529; + // margin-top: -5px; margin-right: 15px; word-break: break-all; word-wrap: break-word; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } .price, .library { color: #495057; - margin-top: 3px; + margin-top: 10px; } } } -- Gitblit v1.8.0