From 7874262b15ca8d2495012ed5f934332dbeeadf29 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期四, 28 九月 2023 09:42:57 +0800 Subject: [PATCH] feat: 客户管理页列表配置列显隐控制 --- src/views/sales/subOrder/index.vue | 281 +++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 219 insertions(+), 62 deletions(-) diff --git a/src/views/sales/subOrder/index.vue b/src/views/sales/subOrder/index.vue index 54c3e39..1a39691 100644 --- a/src/views/sales/subOrder/index.vue +++ b/src/views/sales/subOrder/index.vue @@ -2,31 +2,62 @@ <div class="sub-order"> <div v-if="isDetail" class="detail-top"> <DetailListCommonBtn :query-class-options="queryClassOptions" /> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> </div> - <div v-else class="top"> - <SearchCommonView - ref="searchCommonView" - :query-class-options="queryClassOptions" - :search-options="searchOptions" - /> - <div class="btn-pager"> - <PublicFunctionBtnView :operates-list="operatesList" /> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + + <div v-else class="filter"> + <div class="filter-card"> + <CommonSearch + :show-add="false" + :show-download="false" + :amount-view="false" + :show-action-btn="false" + placeholder="璇疯緭鍏ュ崟鎹紪鍙�" + @searchClick="onFilterSearch" + > + <template slot="leftButton"> + <el-button size="small" type="primary" @click="addBtnClick">鏂板缓</el-button> + <el-button size="small" @click="delClick">鍒犻櫎</el-button> + </template> + </CommonSearch> </div> </div> - <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail"> - <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="90"> - <template slot-scope="scope"> - <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> - <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> - </template> - </el-table-column> - </template> - </TableCommonView> + + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + :table-list="tableList" + :show-summary="showSummary" + :select-box="!isDetail" + @selClientClick="selClientClick" + @selMasterClick="selMasterClick" + @selCommonClick="selCommonClick" + @getSelectArray="getSelectArray" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="90"> + <template slot-scope="scope"> + <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> + <!-- <el-button @click="delClick(scope.row.id)" type="text" size="small">鍒犻櫎</el-button> --> + </template> + </el-table-column> + </template> + </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> + </div> + </div> <!-- 鏂板缓/缂栬緫 --> <AddSubOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> + <!-- 閿�鍞瓙鍗曡鎯� --> + <DetailSubOrder v-if="subOrderDeail.visible" :sub-order-detail="subOrderDeail" /> + <!-- 瀹㈡埛璇︽儏 --> + <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> + <!-- 閿�鍞�诲崟璇︽儏 --> + <DetailMasterOrder v-if="masterDeail.visible" :master-order-detail="masterDeail" /> </div> </template> @@ -34,6 +65,7 @@ import AddSubOrderDialog from "@/views/sales/subOrder/AddSubOrderDialog" import { getSubOrderList, getDelSubOrder } from "@/api/sales/subOrder" import pageMixin from "@/components/makepager/pager/mixin/pageMixin" +import DetailSubOrder from "@/views/sales/subOrder/DetailSubOrder" export default { name: "SubOrder", @@ -41,11 +73,20 @@ isDetail: { type: Boolean, default: false + }, + addConfig: { + type: Object, + default: () => { + return {} + } } }, mixins: [pageMixin], components: { - AddSubOrderDialog + AddSubOrderDialog, + DetailSubOrder, + DetailMasterOrder: () => import("@/views/sales/masterOrder/DetailMasterOrder"), + DetailClientManage: () => import("@/views/client/client/DetailClientManage") }, computed: { searchCommonHeight() { @@ -81,40 +122,66 @@ }, showSummary: { show: true, - sumProp: ["number"], - mergeNumber: 7 + sumProp: ["productAmount"], + mergeNumber: 6 + }, + subOrderDeail: { + visible: false, + infomation: {} + }, + masterDeail: { + visible: false, + infomation: {} + }, + clientDeail: { + visible: false, + infomation: {} + }, + selValueList: [], + search_map: {}, + searchSel: { + value: "number", + label: "鍗曟嵁缂栧彿" } } }, created() { this.setTable() - this.getData() + if (!this.isDetail) { + this.search_map = {} + } else { + this.search_map = { + [this.addConfig.id_name]: this.addConfig.common_name + } + } + this.getData(this.search_map) }, methods: { setTable() { this.tableList = { tableInfomation: [], tableColumn: [ - { label: "鍗曟嵁缂栧彿", prop: "number", min: 120 }, // 鍗曟嵁缂栧彿 - { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120 }, // 瀹㈡埛鍚嶇О - { label: "閿�鍞�诲崟", prop: "masterOrderId", min: 90 }, // 閿�鍞�诲崟 - { label: "璐熻矗浜�", prop: "memberId" }, // 璐熻矗浜� - { label: "瀹℃壒鐘舵��", prop: "approvalStatus" }, // 瀹℃壒鐘舵�� - { label: "浜у搧鍚嶇О", prop: "productName" }, // 浜у搧鍚嶇О - { label: "鏁伴噺", prop: "number1", min: 100 } // 鏁伴噺 + { label: "鍗曟嵁缂栧彿", prop: "number", min: 120, isCommonClick: true }, // 鍗曟嵁缂栧彿 + { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120, isClientClick: true }, // 瀹㈡埛鍚嶇О + { label: "閿�鍞�诲崟", prop: "master_order_number", min: 90, isMasterClick: true }, // 閿�鍞�诲崟 + { label: "璐熻矗浜�", prop: "member_name" }, // 璐熻矗浜� + // { label: "瀹℃壒鐘舵��", prop: "approvalStatus" }, // 瀹℃壒鐘舵�� + { label: "浜у搧鍚嶇О", prop: "productName", isProductName: true }, // 浜у搧鍚嶇О + { label: "鏁伴噺", prop: "productAmount", isProductAmount: true } // 鏁伴噺 ] } this.searchOptions = [] for (let i = 0; i < this.tableList.tableColumn.length; i++) { const label = this.tableList.tableColumn[i].label - this.searchOptions.push({ value: (i + 1).toString(), label: label }) + const value = this.tableList.tableColumn[i].prop + this.searchOptions.push({ value: value, label: label }) } }, // 璇锋眰鏁版嵁 async getData() { this.loading = true await getSubOrderList({ - keyword: "", + search_map: this.search_map, page: this.pagerOptions.currPage, pageSize: this.pagerOptions.pageSize }) @@ -125,7 +192,9 @@ const list = res.data.list.map((item) => { return { ...item, - client_name: item.client.name + client_name: item.client.name, + master_order_number: item.masterOrder.number, + member_name: item.member.username } }) this.tableList.tableInfomation = list || [] @@ -144,41 +213,90 @@ this.loading = false }) }, + // 鎼滅储 + searchClick(val, content) { + console.log(val, content) + this.search_map = { + [val.value]: content + } + this.getData() + }, + resetClick() { + this.search_map = {} + this.getData() + }, + onFilterSearch(searchText){ + this.search_map.number = searchText ?? '' + this.pagerOptions.currPage = 1 + this.getData() + }, // 鏂板缓 addBtnClick() { this.editConfig.visible = true this.editConfig.title = "鏂板缓" - this.editConfig.infomation = {} + this.editConfig.infomation = { ...this.addConfig, currency: "浜烘皯甯�" } }, // 缂栬緫 handleClick(row) { console.log(row) this.editConfig.visible = true this.editConfig.title = "缂栬緫" - this.editConfig.infomation = { ...row, masterOrderNumber: "" } + this.editConfig.infomation = { ...row, masterOrderNumber: "", currency: "浜烘皯甯�" } }, // 鍒犻櫎 - delClick(id) { - this.$confirm("鏄惁纭鍒犻櫎?", "璀﹀憡", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning" - }) - .then(function () { - return getDelSubOrder({ id: id }) + delClick() { + if (this.selValueList && this.selValueList.length > 0) { + this.$confirm("鏄惁纭鍒犻櫎?", "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning" }) - .then((response) => { - if (response.code === 200) { - this.$message.success("鍒犻櫎鎴愬姛") - this.getData() - } else { - this.$message.warning("鍒犻櫎澶辫触") - } - }) - .catch(function () {}) + .then(() => { + getDelSubOrder({ ids: this.selValueList }).then((response) => { + if (response.code === 200) { + this.$message.success("鍒犻櫎鎴愬姛") + this.getData() + } else { + this.$message.warning("鍒犻櫎澶辫触") + } + }) + }) + .catch(() => {}) + } else { + this.$message.warning("璇疯嚦灏戦�夋嫨涓�鏉¤褰�") + } }, getSelectArray(val) { console.log(val) + this.selValueList = [] + const list = val.map((item) => { + return item.id + }) + this.selValueList = list + }, + // 瀹㈡埛鍚嶇О璇︽儏 + selClientClick(row) { + console.log(row) + this.clientDeail.visible = true + this.clientDeail.infomation = { + ...row.client, + client_name: row.client.name, + client_level: row.client.client_level.name, + client_status: row.client.client_status.name, + contact_name: row.name + } + }, + // 閿�鍞�诲崟璇︽儏 + selMasterClick(row) { + console.log(row) + this.masterDeail.visible = true + this.masterDeail.infomation = { ...row, number: row.masterOrderId } + }, + // 閿�鍞瓙鍗曡鎯� + selCommonClick(row) { + console.log(row) + this.subOrderDeail.visible = true + this.subOrderDeail.infomation = { ...row } } } } @@ -186,20 +304,59 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> -.sub-order { - .top { - margin-bottom: 20px; +::v-deep { + .el-table .el-table__cell { + padding: 0; + } + .el-table__header tr, + .el-table__header th { + height: 48px; + } + .el-table__footer-wrapper tbody td.el-table__cell { + height: 48px; + } +} + +.sub-order{ + height: 100%; + overflow: hidden; + .filter{ + height: 80px; + display: flex; + align-items: center; + padding: 12px 20px 0 20px; + &-card{ + height: 80px; + display: flex; + align-items: center; + box-sizing: border-box; + padding: 10px 20px; + flex: 1; + border-radius: 12px; + background-color: #fff; + } + } + .body{ + box-sizing: border-box; + padding: 10px 20px; + border-radius: 12px; + height: calc(100% - 92px); + .body-card { + background-color: #fff; + border-radius: 12px; + height: 100%; + overflow: hidden; + } + .list-view { + height: calc(100% - 60px); + overflow: hidden; + } .btn-pager { display: flex; + margin-top: 10px; .page { margin-left: auto; } - } - } - .detail-top { - display: flex; - .page { - margin-left: auto; } } } -- Gitblit v1.8.0