|  |  | 
 |  |  |           :table-list="tableList" | 
 |  |  |           :select-box="false" | 
 |  |  |           @selClientClick="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 { getClientList } from "@/api/client/client" | 
 |  |  | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" | 
 |  |  | export default { | 
 |  |  |   name: "EditSelClientDialog", | 
 |  |  |   mixins: [pageMixin], | 
 |  |  |   props: { | 
 |  |  |     editCommonConfig: { | 
 |  |  |       type: Object, | 
 |  |  | 
 |  |  |       loading: false, | 
 |  |  |       searchOptions: [], | 
 |  |  |       tableList: {}, | 
 |  |  |       search_map: {} | 
 |  |  |       search_map: {}, | 
 |  |  |       tableColumn: [ | 
 |  |  |         { label: "客户名称", prop: "name", min: 100, isClientClick: true, default: true }, | 
 |  |  |         { label: "客户编号", prop: "number" }, | 
 |  |  |         { label: "客户状态", prop: "client_status" }, | 
 |  |  |         { label: "销售负责人", prop: "member_name", min: 100 }, | 
 |  |  |         { label: "法定代表人", prop: "representative", min: 100 }, | 
 |  |  |         { label: "注册时间", prop: "registration_time" }, | 
 |  |  |         { label: "经营范围", prop: "business_scope" }, | 
 |  |  |         { label: "详细地址", prop: "detail_address" }, | 
 |  |  |         { label: "备注", prop: "remark" } | 
 |  |  |       ], | 
 |  |  |       showCol: [ | 
 |  |  |         "客户名称", | 
 |  |  |         "客户编号", | 
 |  |  |         "客户状态", | 
 |  |  |         "销售负责人", | 
 |  |  |         "法定代表人", | 
 |  |  |         "注册时间", | 
 |  |  |         "经营范围", | 
 |  |  |         "详细地址", | 
 |  |  |         "备注" | 
 |  |  |       ] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  | 
 |  |  |   methods: { | 
 |  |  |     setTable() { | 
 |  |  |       this.tableList = { | 
 |  |  |         selectIndex: true, | 
 |  |  |         tableInfomation: [], | 
 |  |  |         tableColumn: [ | 
 |  |  |           { label: "客户名称", prop: "name", min: 100, isClientClick: true }, | 
 |  |  |           { label: "客户编号", prop: "number" }, | 
 |  |  |           { label: "客户状态", prop: "client_status" }, | 
 |  |  |           { label: "销售负责人", prop: "member_name" }, | 
 |  |  |           { label: "法定代表人", prop: "representative" }, | 
 |  |  |           { label: "注册时间", prop: "registration_time" }, | 
 |  |  |           { label: "经营范围", prop: "business_scope" }, | 
 |  |  |           { label: "详细地址", prop: "detail_address" }, | 
 |  |  |           { label: "备注", prop: "remark" } | 
 |  |  |         ] | 
 |  |  |         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 getClientList({ | 
 |  |  |         search_map: this.search_map, | 
 |  |  |         page: 0, | 
 |  |  |         pageSize: 0 | 
 |  |  |         page: this.pagerOptions.currPage, | 
 |  |  |         pageSize: this.pagerOptions.pageSize | 
 |  |  |       }) | 
 |  |  |         .then((res) => { | 
 |  |  |           console.log(res) | 
 |  |  |           if (res.code === 200) { | 
 |  |  |             if (res.data.list && res.data.list.length > 0) { | 
 |  |  |               console.log("ssss") | 
 |  |  |               const list = res.data.list.map((item) => { | 
 |  |  |                 return { | 
 |  |  |                   ...item, | 
 |  |  | 
 |  |  |                   member_name: item.member.username | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |               this.tableList.tableInfomation = list.slice(0, 5) || [] | 
 |  |  |             } else { | 
 |  |  |               this.tableList.tableInfomation = [] | 
 |  |  |               this.tableList.tableInfomation = list || [] | 
 |  |  |               this.pagerOptions.totalCount = res.data.count | 
 |  |  |             } | 
 |  |  |           } else { | 
 |  |  |             this.tableList.tableInfomation = [] | 
 |  |  | 
 |  |  |       float: right; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   .list-view { | 
 |  |  |     height: 100%; | 
 |  |  |     background: #c22f2f; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .sel-name { | 
 |  |  |   color: $color-primary; | 
 |  |  |   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 { |