|  |  | 
 |  |  |           @searchClick="onFilterSearch" | 
 |  |  |         > | 
 |  |  |           <template slot="leftButton"> | 
 |  |  |             <el-button size="small" type="primary"  @click="addBtnClick">新建</el-button> | 
 |  |  |             <el-button size="small"  @click="delClick">删除</el-button> | 
 |  |  |             <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> | 
 |  |  |             <!-- <el-button size="small"  @click="delClick">删除</el-button> --> | 
 |  |  |           </template> | 
 |  |  |         </CommonSearch> | 
 |  |  |       </div> | 
 |  |  | 
 |  |  |       <div class="body-card"> | 
 |  |  |         <div class="list-view"> | 
 |  |  |           <TableCommonView | 
 |  |  |               ref="tableListRef" | 
 |  |  |               :table-list="tableList" | 
 |  |  |               :select-box="!isDetail" | 
 |  |  |               @selClientClick="selClientClick" | 
 |  |  |               @selCommonClick="selCommonClick" | 
 |  |  |               @getSelectArray="getSelectArray" | 
 |  |  |             ref="tableListRef" | 
 |  |  |             :table-list="tableList" | 
 |  |  |             @selClientClick="selClientClick" | 
 |  |  |             @selCommonClick="selCommonClick" | 
 |  |  |             @getSelectArray="getSelectArray" | 
 |  |  |             @selTableCol="selTableCol" | 
 |  |  |           > | 
 |  |  |             <template slot="tableButton"> | 
 |  |  |               <el-table-column label="操作" width="60"> | 
 |  |  |               <el-table-column label="操作" width="100"> | 
 |  |  |                 <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> --> | 
 |  |  |                   <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 class="btn-pager"> | 
 |  |  |           <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <!-- 新建/编辑 --> | 
 |  |  | 
 |  |  |       }, | 
 |  |  |       selValueList: [], | 
 |  |  |       keyword: "", | 
 |  |  |       keywordType: "" | 
 |  |  |       keywordType: "", | 
 |  |  |       tableColumn: [ | 
 |  |  |         { label: "服务合同编号", prop: "number", isCommonClick: true, default: true }, // 服务合同编号 | 
 |  |  |         { label: "客户名称", prop: "client_name", isClientClick: true }, // 客户名称 | 
 |  |  |         { label: "签约日期", prop: "signTime" }, // 签约日期 | 
 |  |  |         { label: "合同类型", prop: "serviceContractType" }, // 合同类型 | 
 |  |  |         { label: "合同状态", prop: "serviceContractStatus" }, // 合同状态 | 
 |  |  |         { label: "负责人", prop: "member_name" }, // 负责人 | 
 |  |  |         { label: "产品名称", prop: "productName", isProductName: true }, // 产品名称 | 
 |  |  |         { label: "服务开始日", prop: "startTime" }, // 服务开始日 | 
 |  |  |         { label: "服务到期日", prop: "endTime" }, // 服务到期日 | 
 |  |  |         { label: "价税合计", prop: "amountTotal" } // 价税合计 | 
 |  |  |       ], | 
 |  |  |       showCol: [ | 
 |  |  |         "服务合同编号", | 
 |  |  |         "客户名称", | 
 |  |  |         "签约日期", | 
 |  |  |         "合同类型", | 
 |  |  |         "合同状态", | 
 |  |  |         "负责人", | 
 |  |  |         "产品名称", | 
 |  |  |         "服务开始日", | 
 |  |  |         "服务到期日", | 
 |  |  |         "价税合计" | 
 |  |  |       ] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  | 
 |  |  |   methods: { | 
 |  |  |     setTable() { | 
 |  |  |       this.tableList = { | 
 |  |  |         selectIndex: true, | 
 |  |  |         tableInfomation: [], | 
 |  |  |         tableColumn: [ | 
 |  |  |           { label: "服务合同编号", prop: "number", isCommonClick: true }, // 服务合同编号 | 
 |  |  |           { label: "客户名称", prop: "client_name", isClientClick: true }, // 客户名称 | 
 |  |  |           { label: "签约日期", prop: "signTime" }, // 签约日期 | 
 |  |  |           { label: "合同类型", prop: "serviceContractType" }, // 合同类型 | 
 |  |  |           { label: "合同状态", prop: "serviceContractStatus" }, // 合同状态 | 
 |  |  |           { label: "负责人", prop: "member_name" }, // 负责人 | 
 |  |  |           { label: "产品名称", prop: "productName", isProductName: true }, // 产品名称 | 
 |  |  |           { label: "服务开始日", prop: "startTime" }, // 服务开始日 | 
 |  |  |           { label: "服务到期日", prop: "endTime" }, // 服务到期日 | 
 |  |  |           { label: "价税合计", prop: "amountTotal" } // 价税合计 | 
 |  |  |         ] | 
 |  |  |         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 | 
 |  |  |       await getServiceContractList({ | 
 |  |  |         keyword: this.keyword, | 
 |  |  |         keywordType: this.keywordType, | 
 |  |  |         page: this.pagerOptions.currPage, | 
 |  |  |         pageSize: this.pagerOptions.pageSize | 
 |  |  |       }) | 
 |  |  |       let params = {} | 
 |  |  |       console.log(this.addConfig) | 
 |  |  |       if (this.addConfig.id && this.addConfig.keywordType === "销售机会") { | 
 |  |  |         params = { | 
 |  |  |           saleChanceId: this.addConfig.id, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize | 
 |  |  |         } | 
 |  |  |       } else if (this.addConfig.id && this.addConfig.keywordType === "销售明细单") { | 
 |  |  |         params = { | 
 |  |  |           salesDetailsId: this.addConfig.id, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize | 
 |  |  |         } | 
 |  |  |       } else if (this.addConfig.id && this.addConfig.keywordType === "报价单") { | 
 |  |  |         params = { | 
 |  |  |           quotationId: this.addConfig.id, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize | 
 |  |  |         } | 
 |  |  |       } else { | 
 |  |  |         params = { | 
 |  |  |           keyword: this.keyword, | 
 |  |  |           keywordType: this.keywordType, | 
 |  |  |           page: this.pagerOptions.currPage, | 
 |  |  |           pageSize: this.pagerOptions.pageSize, | 
 |  |  |           contactId: this.addConfig.client_id | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |       await getServiceContractList(params) | 
 |  |  |         .then((res) => { | 
 |  |  |           console.log(res) | 
 |  |  |           if (res.code === 200) { | 
 |  |  | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 搜索 | 
 |  |  |     onFilterSearch(searchText){ | 
 |  |  |     onFilterSearch(searchText) { | 
 |  |  |       this.keyword = searchText ?? "" | 
 |  |  |       this.keywordType = "服务合同编号" | 
 |  |  |       this.pagerOptions.currPage = 1 | 
 |  |  | 
 |  |  |     addBtnClick() { | 
 |  |  |       this.editConfig.visible = true | 
 |  |  |       this.editConfig.title = "新建" | 
 |  |  |       this.editConfig.infomation = { ...this.addConfig, currency: "人民币" } | 
 |  |  |       this.editConfig.infomation = { | 
 |  |  |         ...this.addConfig, | 
 |  |  |         currency: "人民币", | 
 |  |  |         client_name: Object.keys(this.addConfig).length === 0 ? "" : this.addConfig.client_name, | 
 |  |  |         contact_name: "", | 
 |  |  |         sale_chance_name: Object.keys(this.addConfig).length === 0 ? "" : this.addConfig.sale_chance_name, | 
 |  |  |         contract_number: "", | 
 |  |  |         quotation_number: "" | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     // 编辑 | 
 |  |  |     handleClick(row) { | 
 |  |  | 
 |  |  |         ...row, | 
 |  |  |         contract_number: row.salesDetails.number, | 
 |  |  |         quotation_number: row.quotation.number, | 
 |  |  |         currency: "人民币" | 
 |  |  |         currency: "人民币", | 
 |  |  |         sale_chance_name: row.SaleChance.name, | 
 |  |  |         contact_name: row.contact.name, | 
 |  |  |         serviceContractTypeId: row.serviceContractTypeId === 0 ? null : row.serviceContractTypeId, | 
 |  |  |         serviceContractStatusId: row.serviceContractStatusId === 0 ? null : row.serviceContractStatusId | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     // 删除 | 
 |  |  |     delClick() { | 
 |  |  |       if (this.selValueList && this.selValueList.length > 0) { | 
 |  |  |         this.$confirm("是否确认删除?", "警告", { | 
 |  |  |           confirmButtonText: "确定", | 
 |  |  |           cancelButtonText: "取消", | 
 |  |  |           type: "warning" | 
 |  |  |         }) | 
 |  |  |           .then(() => { | 
 |  |  |             getDelServiceContract({ ids: this.selValueList }).then((response) => { | 
 |  |  |               if (response.code === 200) { | 
 |  |  |                 this.$message.success("删除成功") | 
 |  |  |                 this.getData() | 
 |  |  |               } else { | 
 |  |  |                 this.$message.warning("删除失败") | 
 |  |  |               } | 
 |  |  |             }) | 
 |  |  |     delClick(id) { | 
 |  |  |       // if (this.selValueList && this.selValueList.length > 0) { | 
 |  |  |       this.$confirm("是否确认删除?", "警告", { | 
 |  |  |         confirmButtonText: "确定", | 
 |  |  |         cancelButtonText: "取消", | 
 |  |  |         type: "warning" | 
 |  |  |       }) | 
 |  |  |         .then(() => { | 
 |  |  |           getDelServiceContract({ ids: [id] }).then((response) => { | 
 |  |  |             if (response.code === 200) { | 
 |  |  |               this.$message.success("删除成功") | 
 |  |  |               this.getData() | 
 |  |  |             } else { | 
 |  |  |               this.$message.warning("删除失败") | 
 |  |  |             } | 
 |  |  |           }) | 
 |  |  |           .catch(() => {}) | 
 |  |  |       } else { | 
 |  |  |         this.$message.warning("请至少选择一条记录") | 
 |  |  |       } | 
 |  |  |         }) | 
 |  |  |         .catch(() => {}) | 
 |  |  |       // } else { | 
 |  |  |       //   this.$message.warning("请至少选择一条记录") | 
 |  |  |       // } | 
 |  |  |     }, | 
 |  |  |     getSelectArray(val) { | 
 |  |  |       console.log(val) | 
 |  |  | 
 |  |  |  | 
 |  |  | <!-- Add "scoped" attribute to limit CSS to this component only --> | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | .service-contract{ | 
 |  |  | .service-contract { | 
 |  |  |   height: 100%; | 
 |  |  |   overflow: hidden; | 
 |  |  |   .filter{ | 
 |  |  |   .filter { | 
 |  |  |     height: 80px; | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |     padding: 12px 20px 0 20px; | 
 |  |  |     &-card{ | 
 |  |  |     &-card { | 
 |  |  |       height: 80px; | 
 |  |  |       display: flex; | 
 |  |  |       align-items: center; | 
 |  |  | 
 |  |  |       background-color: #fff; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .body{ | 
 |  |  |   .body { | 
 |  |  |     box-sizing: border-box; | 
 |  |  |     padding: 10px 20px; | 
 |  |  |     border-radius: 12px; |