|  |  | 
 |  |  |   <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() { | 
 |  |  |     this.setTable() | 
 |  |  |     console.log(this.addConfig) | 
 |  |  |     if (!this.isDetail) { | 
 |  |  |       this.serviceContractId = 0 | 
 |  |  |     } 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() { | 
 |  |  | 
 |  |  |         serviceContractId: this.serviceContractId | 
 |  |  |       }) | 
 |  |  |         .then((res) => { | 
 |  |  |           if (res.code === 200) { | 
 |  |  |             if (res.data.list && res.data.list.length > 0) { | 
 |  |  |               const list = res.data.list.map((item) => { | 
 |  |  |           if (res.data.code === 200) { | 
 |  |  |             if (res.data.data.data && res.data.data.data.length > 0) { | 
 |  |  |               const list = res.data.data.data.map((item) => { | 
 |  |  |                 return { | 
 |  |  |                   ...item | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |               this.tableList.tableInfomation = list || [] | 
 |  |  |               this.pagerOptions.totalCount = res.data.count | 
 |  |  |               this.pagerOptions.totalCount = res.data.data.count | 
 |  |  |             } else { | 
 |  |  |               this.tableList.tableInfomation = [] | 
 |  |  |             } | 
 |  |  | 
 |  |  |     // 新建 | 
 |  |  |     addBtnClick() { | 
 |  |  |       if (this.tableList.tableInfomation && this.tableList.tableInfomation.length > 0) { | 
 |  |  |         this.$message.success("该订单已创建收款计划") | 
 |  |  |         this.$confirm("该订单已创建收款计划", "提示", { | 
 |  |  |           confirmButtonText: "确定", | 
 |  |  |           cancelButtonText: "取消", | 
 |  |  | 
 |  |  | <!-- 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; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } |