|  |  | 
 |  |  |           @searchClick="onFilterSearch" | 
 |  |  |         > | 
 |  |  |           <template slot="leftButton"> | 
 |  |  |             <el-button size="small" type="primary" @click="addBtnClick" | 
 |  |  |               >新建</el-button | 
 |  |  |             > | 
 |  |  |             <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> | 
 |  |  |             <!--            <el-button size="small"  @click="delClick">删除</el-button>--> | 
 |  |  |           </template> | 
 |  |  |         </CommonSearch> | 
 |  |  | 
 |  |  |           </TableCommonView> | 
 |  |  |         </div> | 
 |  |  |         <div class="btn-pager"> | 
 |  |  |           <PagerView | 
 |  |  |             class="page" | 
 |  |  |             :pager-options="pagerOptions" | 
 |  |  |             v-on="pagerEvents" | 
 |  |  |           /> | 
 |  |  |           <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import { getReceiptList } from "@/api/common/payment"; | 
 |  |  | import pageMixin from "@/components/makepager/pager/mixin/pageMixin"; | 
 |  |  | import AddReceipt from "@/views/other/payment/receipt/addReceipt.vue"; | 
 |  |  | import { getReceiptList } from "@/api/common/payment" | 
 |  |  | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" | 
 |  |  | import AddReceipt from "@/views/other/payment/receipt/addReceipt.vue" | 
 |  |  |  | 
 |  |  | export default { | 
 |  |  |   name: "ReceiptView", | 
 |  |  |   props: { | 
 |  |  |     isDetail: { | 
 |  |  |       type: Boolean, | 
 |  |  |       default: false, | 
 |  |  |       default: false | 
 |  |  |     }, | 
 |  |  |     addConfig: { | 
 |  |  |       type: Object, | 
 |  |  |       default: () => { | 
 |  |  |         return {}; | 
 |  |  |       }, | 
 |  |  |         return {} | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     sourceType: { | 
 |  |  |       type: Number, | 
 |  |  |       default: 1, | 
 |  |  |     }, | 
 |  |  |       default: 1 | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   mixins: [pageMixin], | 
 |  |  |   components: { AddReceipt }, | 
 |  |  | 
 |  |  |         { value: "1", label: "全部" }, | 
 |  |  |         { value: "2", label: "今日联系" }, | 
 |  |  |         { value: "3", label: "本周联系" }, | 
 |  |  |         { value: "4", label: "本月联系" }, | 
 |  |  |         { value: "4", label: "本月联系" } | 
 |  |  |       ], | 
 |  |  |       searchOptions: [], | 
 |  |  |       operatesList: [ | 
 |  |  | 
 |  |  |         { id: "5", name: "更改创建人" }, | 
 |  |  |         { id: "6", name: "树结构设置" }, | 
 |  |  |         { id: "7", name: "审批设置" }, | 
 |  |  |         { id: "8", name: "回访预设列宽" }, | 
 |  |  |         { id: "8", name: "回访预设列宽" } | 
 |  |  |       ], | 
 |  |  |       editConfig: { | 
 |  |  |         visible: false, | 
 |  |  |         title: "新建", | 
 |  |  |         infomation: {}, | 
 |  |  |         infomation: {} | 
 |  |  |       }, | 
 |  |  |       saleChanceName: "", | 
 |  |  |       contactsDeail: { | 
 |  |  |         visible: false, | 
 |  |  |         infomation: {}, | 
 |  |  |         infomation: {} | 
 |  |  |       }, | 
 |  |  |       clientDeail: { | 
 |  |  |         visible: false, | 
 |  |  |         infomation: {}, | 
 |  |  |         infomation: {} | 
 |  |  |       }, | 
 |  |  |       selValueList: [], | 
 |  |  |       searchSel: { | 
 |  |  |         value: "topic", | 
 |  |  |         label: "", | 
 |  |  |         label: "" | 
 |  |  |       }, | 
 |  |  |       search_map: {}, | 
 |  |  |       keyword: "", | 
 |  |  | 
 |  |  |         { label: "实际收款金额", prop: "amount" }, | 
 |  |  |         { label: "收款方式", prop: "paymentType_name" }, | 
 |  |  |         { label: "销售负责人", prop: "principal_name" }, | 
 |  |  |         { label: "收款日期", prop: "receiptDate" }, | 
 |  |  |         { label: "收款日期", prop: "receiptDate" } | 
 |  |  |       ], | 
 |  |  |       showCol: [ | 
 |  |  |         "收款单编号", | 
 |  |  |         "客户名称", | 
 |  |  |         "选择源单", | 
 |  |  |         "实际收款金额", | 
 |  |  |         "收款方式", | 
 |  |  |         "销售负责人", | 
 |  |  |         "收款日期", | 
 |  |  |       ], | 
 |  |  |     }; | 
 |  |  |       showCol: ["收款单编号", "客户名称", "选择源单", "实际收款金额", "收款方式", "销售负责人", "收款日期"] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.setTable(); | 
 |  |  |     this.setTable() | 
 |  |  |     if (!this.isDetail) { | 
 |  |  |       this.keyword = ""; | 
 |  |  |       this.keywordType = ""; | 
 |  |  |       this.keyword = "" | 
 |  |  |       this.keywordType = "" | 
 |  |  |     } else { | 
 |  |  |       this.keyword = this.addConfig.keyword; | 
 |  |  |       this.keywordType = this.addConfig.keywordType; | 
 |  |  |       this.keyword = this.addConfig.keyword | 
 |  |  |       this.keywordType = this.addConfig.keywordType | 
 |  |  |     } | 
 |  |  |     this.getData(); | 
 |  |  |     this.getData() | 
 |  |  |   }, | 
 |  |  |   mounted() { | 
 |  |  |     console.log(this.addConfig, "这是啥"); | 
 |  |  |   }, | 
 |  |  |   mounted() {}, | 
 |  |  |   methods: { | 
 |  |  |     setTable() { | 
 |  |  |       this.tableList = { | 
 |  |  |         tableInfomation: [], | 
 |  |  |         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 = []; | 
 |  |  |         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 }); | 
 |  |  |         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), | 
 |  |  |         }; | 
 |  |  |       }); | 
 |  |  |           isShowColumn: showCol.includes(ele.label) | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     selTableCol(val) { | 
 |  |  |       this.showcol = val; | 
 |  |  |       this.tableList.tableColumn = this.setColumnVisible(val); | 
 |  |  |       this.showcol = val | 
 |  |  |       this.tableList.tableColumn = this.setColumnVisible(val) | 
 |  |  |     }, | 
 |  |  |     // 请求数据 | 
 |  |  |     async getData() { | 
 |  |  |       // console.log() | 
 |  |  |       this.loading = true; | 
 |  |  |       await getReceiptList({ | 
 |  |  |         keyword: this.keyword, | 
 |  |  |         keywordType: this.keywordType, | 
 |  |  |         page: this.pagerOptions.currPage, | 
 |  |  |         pageSize: this.pagerOptions.pageSize, | 
 |  |  |  | 
 |  |  |         sourceId: this.addConfig.salesDetailsId, | 
 |  |  |         sourceIdType: this.addConfig.serviceContractId, | 
 |  |  |       }) | 
 |  |  |       this.loading = true | 
 |  |  |       let params = {} | 
 |  |  |       let sourceTyle = this.addConfig.keywordType === "销售明细单" || this.addConfig.keywordType === "客户名称" ? 1 : 2 | 
 |  |  |       if (this.addConfig.id) { | 
 |  |  |         params = { | 
 |  |  |           sourceId: this.addConfig.id, | 
 |  |  |           sourceType: sourceTyle, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize, | 
 |  |  |           client_id: this.addConfig.client_id | 
 |  |  |         } | 
 |  |  |       } else { | 
 |  |  |         params = { | 
 |  |  |           keyword: this.keyword, | 
 |  |  |           keywordType: this.keywordType, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize, | 
 |  |  |           client_id: this.addConfig.client_id | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |       await getReceiptList(params) | 
 |  |  |         .then((res) => { | 
 |  |  |           if (res.data.code === 200) { | 
 |  |  |             const resList = res?.data?.data?.data ?? []; | 
 |  |  |           if (res.code === 200) { | 
 |  |  |             const resList = res?.data?.data ?? [] | 
 |  |  |             if (resList.length > 0) { | 
 |  |  |               const list = resList.map((item) => { | 
 |  |  |                 return { | 
 |  |  |                   ...item, | 
 |  |  |                   client_name: item.client.name, | 
 |  |  |                   paymentType_name: item.paymentType.name, | 
 |  |  |                   principal_name: item.principal.username, | 
 |  |  |                 }; | 
 |  |  |               }); | 
 |  |  |               this.tableList.tableInfomation = list || []; | 
 |  |  |               this.pagerOptions.totalCount = res.data.data.count; | 
 |  |  |                   principal_name: item.principal.username | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |               this.tableList.tableInfomation = list || [] | 
 |  |  |               this.pagerOptions.totalCount = res.data.count | 
 |  |  |             } else { | 
 |  |  |               this.tableList.tableInfomation = []; | 
 |  |  |               this.tableList.tableInfomation = [] | 
 |  |  |             } | 
 |  |  |           } else { | 
 |  |  |             this.tableList.tableInfomation = []; | 
 |  |  |             this.tableList.tableInfomation = [] | 
 |  |  |           } | 
 |  |  |           this.loading = false; | 
 |  |  |           this.loading = false | 
 |  |  |         }) | 
 |  |  |         .catch((err) => { | 
 |  |  |           console.log(err); | 
 |  |  |           this.tableList.tableInfomation = []; | 
 |  |  |           this.loading = false; | 
 |  |  |         }); | 
 |  |  |           console.log(err) | 
 |  |  |           this.tableList.tableInfomation = [] | 
 |  |  |           this.loading = false | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 搜索 | 
 |  |  |     onFilterSearch(searchText) { | 
 |  |  |       this.keyword = searchText ?? ""; | 
 |  |  |       this.keywordType = "收款单编号"; | 
 |  |  |       this.pagerOptions.currPage = 1; | 
 |  |  |       this.getData(); | 
 |  |  |       this.keyword = searchText ?? "" | 
 |  |  |       this.keywordType = "收款单编号" | 
 |  |  |       this.pagerOptions.currPage = 1 | 
 |  |  |       this.getData() | 
 |  |  |     }, | 
 |  |  |     getSelectArray(val) { | 
 |  |  |       console.log(val); | 
 |  |  |       this.selValueList = []; | 
 |  |  |       console.log(val) | 
 |  |  |       this.selValueList = [] | 
 |  |  |       const list = val.map((item) => { | 
 |  |  |         return item.id; | 
 |  |  |       }); | 
 |  |  |       this.selValueList = list; | 
 |  |  |         return item.id | 
 |  |  |       }) | 
 |  |  |       this.selValueList = list | 
 |  |  |     }, | 
 |  |  |     // 新建 | 
 |  |  |     addBtnClick() { | 
 |  |  |       this.editConfig.visible = true; | 
 |  |  |       this.editConfig.title = "新建"; | 
 |  |  |       this.editConfig.sourceType = this.sourceType; | 
 |  |  |       this.editConfig.infomation = { ...this.addConfig, number: "" }; | 
 |  |  |     }, | 
 |  |  |   }, | 
 |  |  | }; | 
 |  |  |       this.editConfig.visible = true | 
 |  |  |       this.editConfig.title = "新建" | 
 |  |  |       this.editConfig.sourceType = this.addConfig.keywordType === "客户名称" ? 1 : this.sourceType | 
 |  |  |       console.log(this.addConfig) | 
 |  |  |       this.editConfig.infomation = { ...this.addConfig, saleDetailNumber: "" } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <!-- Add "scoped" attribute to limit CSS to this component only --> |