From bca479d1713a6cb914711578251951522c0d1a2d Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期三, 11 十月 2023 17:36:12 +0800 Subject: [PATCH] 收款计划、销售发票样式调整及公共组件no-product清空下行高调整 --- src/components/makepager/TableCommonView.vue | 6 src/views/other/payment/collectionPlan/index.vue | 134 ++++++++++++++++++-------- src/views/other/payment/saleInvoice/index.vue | 125 +++++++++++++++--------- 3 files changed, 174 insertions(+), 91 deletions(-) diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue index 5fc4cd3..7335401 100644 --- a/src/components/makepager/TableCommonView.vue +++ b/src/components/makepager/TableCommonView.vue @@ -394,12 +394,12 @@ border-bottom: 0; } } - li:last-child .name-view{ + li:last-child .name-view { border-bottom: none; } .no-product { - height: 57px; - line-height: 57px; + height: 22px; + line-height: 22px; } } } diff --git a/src/views/other/payment/collectionPlan/index.vue b/src/views/other/payment/collectionPlan/index.vue index 4f5ffa8..b118f45 100644 --- a/src/views/other/payment/collectionPlan/index.vue +++ b/src/views/other/payment/collectionPlan/index.vue @@ -2,37 +2,44 @@ <div class="collectionPlan"> <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" - :search-sel="searchSel" - @searchClick="searchClick" - @resetClick="resetClick" - /> - <div class="btn-pager"> - <PublicFunctionBtnView :statistics="true" :operates-list="operatesList" @batchDelete="delClick" /> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + <div v-else class="filter"> + <div class="filter-card"> + <CommonSearch + ref="searchCommonView" + :query-class-options="queryClassOptions" + :search-options="searchOptions" + :search-sel="searchSel" + @searchClick="searchClick" + @resetClick="resetClick" + > + <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" - v-loading="loading" - :table-list="tableList" - :select-box="!isDetail" - @getSelectArray="getSelectArray" - > - <!-- <template slot="tableButton"> + <div class="body"> + <div class="body-card"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + v-loading="loading" + :table-list="tableList" + @getSelectArray="getSelectArray" + > + <!-- <template slot="tableButton"> <el-table-column label="鎿嶄綔" width="60" fixed="right"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button> </template> </el-table-column> </template> --> - </TableCommonView> + </TableCommonView> + </div> + </div> + </div> <!-- 鏂板缓/缂栬緫 --> <AddCollectionPlan v-if="editConfig.visible" :edit-common-config="editConfig" /> </div> @@ -107,7 +114,18 @@ label: "" }, search_map: {}, - serviceContractId: 0 + serviceContractId: 0, + tableColumn: [ + { label: "鏀舵璁″垝缂栧彿", prop: "number", default: true }, + { label: "瀹㈡埛鍚嶇О", prop: "client_name" }, + { label: "鏈熸", prop: "term" }, + { label: "璁″垝鏀舵鏃ユ湡", prop: "collectionDate" }, + { label: "閲戦", prop: "amount" }, + { label: "宸叉敹閲戦", prop: "amountReceived" }, + { label: "搴旀敹閲戦", prop: "amountReceivable" }, + { label: "璐熻矗浜�", prop: "member_name" } + ], + showCol: ["鏀舵璁″垝缂栧彿", "瀹㈡埛鍚嶇О", "鏈熸", "璁″垝鏀舵鏃ユ湡", "閲戦", "宸叉敹閲戦", "搴旀敹閲戦", "璐熻矗浜�"] } }, created() { @@ -118,29 +136,35 @@ } else { this.serviceContractId = this.addConfig.id } - this.getData() + // this.getData() }, methods: { setTable() { this.tableList = { tableInfomation: [], - tableColumn: [ - { label: "鏀舵璁″垝缂栧彿", prop: "number" }, - { label: "瀹㈡埛鍚嶇О", prop: "client_name" }, - { label: "鏈熸", prop: "term" }, - { label: "璁″垝鏀舵鏃ユ湡", prop: "collectionDate" }, - { label: "閲戦", prop: "amount" }, - { label: "宸叉敹閲戦", prop: "amountReceived" }, - { label: "搴旀敹閲戦", prop: "amountReceivable" }, - { label: "璐熻矗浜�", prop: "member_name" } - ] + 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 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() { @@ -215,19 +239,45 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> .collectionPlan { - .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; } } } diff --git a/src/views/other/payment/saleInvoice/index.vue b/src/views/other/payment/saleInvoice/index.vue index ce60ddb..a65c286 100644 --- a/src/views/other/payment/saleInvoice/index.vue +++ b/src/views/other/payment/saleInvoice/index.vue @@ -2,40 +2,38 @@ <div class="saleInvoice"> <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" - :search-sel="searchSel" - @searchClick="searchClick" - @resetClick="resetClick" - /> - <div class="btn-pager"> - <PublicFunctionBtnView :statistics="true" :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" - @selClientClick="selClientClick" - @selCommonClick="selCommonClick" - @getSelectArray="getSelectArray" - @selTableCol="selTableCol" - > - <!-- <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="60" fixed="right"> - <template slot-scope="scope"> - <el-button @click="handleClick(scope.row)" 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" @selTableCol="selTableCol"> </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> + </div> + </div> <!-- 鏂板缓/缂栬緫 --> <AddSaleInvoice v-if="editConfig.visible" :edit-common-config="editConfig" /> + <!-- 瀹㈡埛璇︽儏 --> + <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> </div> </template> @@ -63,7 +61,7 @@ } }, mixins: [pageMixin], - components: { AddSaleInvoice }, + components: { AddSaleInvoice, DetailClientManage: () => import("@/views/client/client/DetailClientManage") }, computed: {}, data() { return { @@ -94,19 +92,11 @@ infomation: {} }, saleChanceName: "", - contactsDeail: { - visible: false, - infomation: {} - }, clientDeail: { visible: false, infomation: {} }, selValueList: [], - searchSel: { - value: "topic", - label: "" - }, search_map: {}, keyword: "", keywordType: "", @@ -237,6 +227,18 @@ this.editConfig.title = "鏂板缓" this.editConfig.sourceType = this.sourceType this.editConfig.infomation = { ...this.addConfig, number: "" } + }, + // 瀹㈡埛鍚嶇О璇︽儏 + 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.contact.name + } } } } @@ -245,20 +247,51 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> .saleInvoice { - .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; - } - } +} +::v-deep .el-table__body-wrapper .el-table .el-table__cell { + padding: 6px 0 !important; + height: 35px; + text-align: center; } </style> -- Gitblit v1.8.0