From 7d7fbe920279c9d7a42268a284427d2c42d8f0f2 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期二, 10 十月 2023 14:45:01 +0800 Subject: [PATCH] 弹出搜索框 公共组件修改 --- src/views/sales/salesReturn/index.vue | 216 ++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 147 insertions(+), 69 deletions(-) diff --git a/src/views/sales/salesReturn/index.vue b/src/views/sales/salesReturn/index.vue index 9654087..1ceff3e 100644 --- a/src/views/sales/salesReturn/index.vue +++ b/src/views/sales/salesReturn/index.vue @@ -2,43 +2,53 @@ <div class="sales-return"> <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" - @searchClick="searchClick" - @resetClick="resetClick" - /> - <div class="btn-pager"> - <PublicFunctionBtnView - :receive="false" - :import-button="false" - receive:operates-list="operatesList" - @batchDelete="delClick" - /> - <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" - :table-list="tableList" - :select-box="!isDetail" - @selClientClick="selClientClick" - @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 class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + :table-list="tableList" + :select-box="!isDetail" + @selClientClick="selClientClick" + @selCommonClick="selCommonClick" + @getSelectArray="getSelectArray" + @selTableCol="selTableCol" + > + <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> <!-- 鏂板缓/缂栬緫 --> <AddSalesReturnDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> <!-- 閿�鍞��璐у崟璇︽儏 --> @@ -60,6 +70,12 @@ isDetail: { type: Boolean, default: false + }, + addConfig: { + type: Object, + default: () => { + return {} + } } }, mixins: [pageMixin], @@ -108,40 +124,72 @@ infomation: {} }, selValueList: [], - search_map: {} + search_map: {}, + searchSel: { + value: "number", + label: "閿�鍞��璐у崟缂栧彿" + }, + keyword: "", + keywordType: "", + tableColumn: [ + { label: "閿�鍞��璐у崟缂栧彿", prop: "number", min: 120, isCommonClick: true ,default:true }, + { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 90, isClientClick: true }, + { label: "閫�璐ф棩鏈�", prop: "returnDate", min: 130 }, + { label: "鐘舵��", prop: "salesReturnStatus_name" }, + { label: "閫�鍏ヤ粨搴�", prop: "repository" }, + { label: "搴旈��娆�", prop: "refundabe" }, + { label: "宸查��娆�", prop: "refunded" }, + { label: "閿�鍞礋璐d汉", prop: "member_name" } + // { label: "淇敼鏃堕棿", prop: "modifyTime", isTime: true, min: 130 } + ], + showCol:["閿�鍞��璐у崟缂栧彿", "瀹㈡埛鍚嶇О", "閫�璐ф棩鏈�", "鐘舵��", "閫�鍏ヤ粨搴�", "搴旈��娆�", "宸查��娆�", "閿�鍞礋璐d汉"] } }, created() { this.setTable() + if (!this.isDetail) { + this.keyword = "" + this.keywordType = "" + } else { + this.keyword = this.addConfig.keyword + this.keywordType = this.addConfig.keywordType + } this.getData() }, methods: { setTable() { this.tableList = { tableInfomation: [], - tableColumn: [ - { label: "閿�鍞��璐у崟缂栧彿", prop: "number", min: 120, isCommonClick: true }, - { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 90, isClientClick: true }, - { label: "閫�璐ф棩鏈�", prop: "returnDate", isTime: true, min: 130 }, - { label: "鐘舵��", prop: "status" }, - { label: "閫�鍏ヤ粨搴�", prop: "repository" }, - { label: "搴旈��娆�", prop: "refundabe" }, - { label: "宸查��娆�", prop: "refunded" }, - { label: "閿�鍞礋璐d汉", prop: "memberId" } - // { label: "淇敼鏃堕棿", prop: "modifyTime", isTime: true, min: 130 } - ] + allcol: [], + showcol: this.showCol, + 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 - this.searchOptions.push({ value: (i + 1).toString(), label: label }) + const value = this.tableList.tableColumn[i].prop + this.searchOptions.push({ value: value, label: label }) } + }, + setColumnVisible(showCol){ + return this.tableColumn.map(ele=>{ + return { + ...ele, + isShowColumn:showCol.includes(ele.label) + } + }) + }, + selTableCol(val) { + this.showcol = val; + this.tableList.tableColumn = this.setColumnVisible(val); }, // 璇锋眰鏁版嵁 async getData() { this.loading = true await getSalesReturnList({ - search_map: this.search_map, + keyword: this.keyword, + keywordType: this.keywordType, page: this.pagerOptions.currPage, pageSize: this.pagerOptions.pageSize }) @@ -151,7 +199,10 @@ if (res.data.list && res.data.list.length > 0) { const list = res.data.list.map((item) => { return { - ...item + ...item, + member_name: item.Member.username, + salesReturnStatus_name: item.SalesReturnStatus.name, + client_name: item.client.name } }) this.tableList.tableInfomation = list || [] @@ -171,29 +222,24 @@ }) }, // 鎼滅储 - searchClick(val, content) { - console.log(val, content) - this.search_map = { - [val.value]: content - } - this.getData() - }, - resetClick() { - this.search_map = {} + onFilterSearch(searchText){ + this.keyword = searchText ?? '' + this.keywordType = "閿�鍞��璐у崟缂栧彿" + this.pagerOptions.currPage = 1 this.getData() }, // 鏂板缓 addBtnClick() { this.editConfig.visible = true this.editConfig.title = "鏂板缓" - this.editConfig.infomation = {} + this.editConfig.infomation = { currency: "浜烘皯甯�" } }, // 缂栬緫 handleClick(row) { console.log(row) this.editConfig.visible = true this.editConfig.title = "缂栬緫" - this.editConfig.infomation = { ...row } + this.editConfig.infomation = { ...row, currency: "浜烘皯甯�", salesDetailNumber: row.Source.number } }, // 鍒犻櫎 delClick() { @@ -230,7 +276,13 @@ selClientClick(row) { console.log(row) this.clientDeail.visible = true - this.clientDeail.infomation = { ...row, client_name: row.name } + this.clientDeail.infomation = { + ...row.client, + client_name: row.name, + member: row.Member, + client_level: row.client.client_level.name, + client_status: row.client.client_status.name + } }, // 鑱旂郴浜鸿鎯� selCommonClick(row) { @@ -245,19 +297,45 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> .sales-return { - .top { - margin-bottom: 20px; + 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