|  |  |  | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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() { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | console.log(this.addConfig) | 
|---|
|  |  |  | await getCollectionPlanList({ | 
|---|
|  |  |  | serviceContractId: this.serviceContractId | 
|---|
|  |  |  | sourceType: this.addConfig.keywordType === "销售明细单" ? 1 : 2, | 
|---|
|  |  |  | sourceId: this.addConfig.id | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then((res) => { | 
|---|
|  |  |  | if (res.data.code === 200) { | 
|---|
|  |  |  | if (res.data.data.data && res.data.data.data.length > 0) { | 
|---|
|  |  |  | const list = res.data.data.data.map((item) => { | 
|---|
|  |  |  | if (res.code === 200) { | 
|---|
|  |  |  | if (res.data.data && res.data.data.length > 0) { | 
|---|
|  |  |  | const list = res.data.data.map((item) => { | 
|---|
|  |  |  | item.client_name=this.addConfig.client_name | 
|---|
|  |  |  | item.number=item.term | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | ...item | 
|---|
|  |  |  | ...item, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.tableList.tableInfomation = list || [] | 
|---|
|  |  |  | this.pagerOptions.totalCount = res.data.data.count | 
|---|
|  |  |  | this.pagerOptions.totalCount = res.data.count | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.tableList.tableInfomation = [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | <!-- 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|