|  |  | 
 |  |  |           :table-list="tableList" | 
 |  |  |           :select-box="false" | 
 |  |  |           @selCommonClick="selNameClick" | 
 |  |  |           @selTableCol="selTableCol" | 
 |  |  |         > | 
 |  |  |         </TableCommonView> | 
 |  |  |         <div slot="footer" class="dialog-footer"> | 
 |  |  |           <div class="remark">说明:支持多字段模糊查询,仅显示符合条件的前5条数据</div> | 
 |  |  |           <!-- <div class="remark">说明:支持多字段模糊查询,仅显示符合条件的前5条数据</div> --> | 
 |  |  |           <div class="btn-pager"> | 
 |  |  |             <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |     </el-dialog> | 
 |  |  | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import { getSaleChanceList } from "@/api/sales/salesOpportunity" | 
 |  |  | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" | 
 |  |  | export default { | 
 |  |  |   name: "EditSelChanceDialog", | 
 |  |  |   mixins: [pageMixin], | 
 |  |  |   props: { | 
 |  |  |     editCommonConfig: { | 
 |  |  |       type: Object, | 
 |  |  | 
 |  |  |         return { | 
 |  |  |           editVisible: false, | 
 |  |  |           title: "", | 
 |  |  |           clientId: 0, | 
 |  |  |           infomation: {} | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  | 
 |  |  |       tableList: [], | 
 |  |  |       searchSelOptions: [], | 
 |  |  |       loading: false, | 
 |  |  |       search_map: {} | 
 |  |  |       search_map: {}, | 
 |  |  |       tableColumn: [ | 
 |  |  |         { label: "销售机会编号", prop: "number" }, // 销售机会编号 | 
 |  |  |         { label: "机会名称", prop: "name", isCommonClick: true, default: true }, // 机会名称 | 
 |  |  |         { label: "销售阶段", prop: "sale_stage_name" }, // 销售阶段 | 
 |  |  |         { label: "销售负责人", prop: "member_name" }, // 销售负责人 | 
 |  |  |         { label: "预计成交日期", prop: "expected_time" } // 预计成交日期 | 
 |  |  |       ], | 
 |  |  |       showCol: ["销售机会编号", "机会名称", "销售阶段", "销售负责人", "预计成交日期"] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.search_map = { | 
 |  |  |       client_id: this.editConfig.clientId | 
 |  |  |     } | 
 |  |  |     this.setTable() | 
 |  |  |     this.getData() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     setTable() { | 
 |  |  |       this.tableList = { | 
 |  |  |         selectIndex: true, | 
 |  |  |         tableInfomation: [], | 
 |  |  |         tableColumn: [ | 
 |  |  |           { label: "销售机会编号", prop: "number" }, // 销售机会编号 | 
 |  |  |           { label: "机会名称", prop: "name", isCommonClick: true }, // 机会名称 | 
 |  |  |           { label: "销售阶段", prop: "sale_stage_name" }, // 销售阶段 | 
 |  |  |           { label: "销售负责人", prop: "member_name" }, // 销售负责人 | 
 |  |  |           { label: "预计成交日期", prop: "expected_time" } // 预计成交日期 | 
 |  |  |         ] | 
 |  |  |         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) | 
 |  |  |     }, | 
 |  |  |     handleClose() { | 
 |  |  |       this.editConfig.editVisible = false | 
 |  |  | 
 |  |  |       this.loading = true | 
 |  |  |       await getSaleChanceList({ | 
 |  |  |         search_map: this.search_map, | 
 |  |  |         page: 0, | 
 |  |  |         pageSize: 0 | 
 |  |  |         page: this.pagerOptions.currPage, | 
 |  |  |         pageSize: this.pagerOptions.pageSize | 
 |  |  |       }) | 
 |  |  |         .then((res) => { | 
 |  |  |           console.log(res) | 
 |  |  | 
 |  |  |                   sale_stage_name: item.sale_stage.name | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |               this.tableList.tableInfomation = list.slice(0, 5) || [] | 
 |  |  |               this.tableList.tableInfomation = list || [] | 
 |  |  |               this.pagerOptions.totalCount = res.data.count | 
 |  |  |             } else { | 
 |  |  |               this.tableList.tableInfomation = [] | 
 |  |  |             } | 
 |  |  | 
 |  |  | .bg-view { | 
 |  |  |   margin: 10px; | 
 |  |  |   .query-bg { | 
 |  |  |     margin-left: -20px; | 
 |  |  |     margin-bottom: 10px; | 
 |  |  |     display: flex; | 
 |  |  |     justify-content: space-between; | 
 |  |  | 
 |  |  |   cursor: pointer; | 
 |  |  | } | 
 |  |  | .dialog-footer { | 
 |  |  |   height: 40px; | 
 |  |  |   line-height: 40px; | 
 |  |  |   height: 50px; | 
 |  |  |   line-height: 50px; | 
 |  |  |   color: red; | 
 |  |  |   .btn-pager { | 
 |  |  |     display: flex; | 
 |  |  |     margin-top: 0px; | 
 |  |  |     .page { | 
 |  |  |       margin-left: auto; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | ::v-deep { | 
 |  |  |   .input-with-select .el-input-group__prepend { |