|  |  | 
 |  |  |     > | 
 |  |  |       <div class="bg-view"> | 
 |  |  |         <div class="query-bg"> | 
 |  |  |           <!-- <el-input placeholder="请输入内容" v-model="queryInput" size="mini" class="input-with-select"> | 
 |  |  |             <el-select v-model="select" slot="prepend" placeholder="请选择" disabled> | 
 |  |  |               <el-option label="全部字段" value="1"></el-option> | 
 |  |  |               <el-option label="联系人姓名" value="2"></el-option> | 
 |  |  |               <el-option label="联系人编号" value="3"></el-option> | 
 |  |  |               <el-option label="客户名称" value="4"></el-option> | 
 |  |  |               <el-option label="手机" value="5"></el-option> | 
 |  |  |             </el-select> | 
 |  |  |           </el-input> | 
 |  |  |           <div class="btn"> | 
 |  |  |             <el-button type="primary" size="mini" disabled>设置字段</el-button> | 
 |  |  |             <el-button type="primary" size="mini" disabled>快速创建</el-button> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <el-table | 
 |  |  |           :data="tableData" | 
 |  |  |           border | 
 |  |  |           size="mini" | 
 |  |  |           v-loading="loading" | 
 |  |  |           :header-cell-style="{ background: '#f7f7f7' }" | 
 |  |  |         > | 
 |  |  |           <el-table-column label="联系人姓名" prop="name" show-overflow-tooltip> | 
 |  |  |             <template slot-scope="scope"> | 
 |  |  |               <span class="sel-name" @click="selNameClick(scope.row)">{{ scope.row.name }}</span> | 
 |  |  |             </template> | 
 |  |  |           </el-table-column> | 
 |  |  |           <el-table-column label="联系人编号" prop="number"></el-table-column> | 
 |  |  |           <el-table-column label="客户名称" prop="client_name"></el-table-column> | 
 |  |  |           <el-table-column label="手机" prop="phone"></el-table-column> | 
 |  |  |           <div slot="empty"> | 
 |  |  |             <el-empty :image-size="100"></el-empty> | 
 |  |  |           </div> | 
 |  |  |         </el-table> --> | 
 |  |  |           <SearchCommonView | 
 |  |  |             ref="searchCommonView" | 
 |  |  |             :search-options="searchOptions" | 
 |  |  | 
 |  |  |           :table-list="tableList" | 
 |  |  |           :select-box="false" | 
 |  |  |           @selContactsClick="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 { getContactList } from "@/api/client/contacts" | 
 |  |  | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" | 
 |  |  | export default { | 
 |  |  |   name: "EditSelClientDialog", | 
 |  |  |   mixins: [pageMixin], | 
 |  |  |   props: { | 
 |  |  |     editCommonConfig: { | 
 |  |  |       type: Object, | 
 |  |  | 
 |  |  |         return { | 
 |  |  |           editVisible: false, | 
 |  |  |           title: "", | 
 |  |  |           clientId: 0, | 
 |  |  |           infomation: {} | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  | 
 |  |  |       tableList: [], | 
 |  |  |       searchSelOptions: [], | 
 |  |  |       loading: false, | 
 |  |  |       search_map: {} | 
 |  |  |       search_map: {}, | 
 |  |  |       tableColumn: [ | 
 |  |  |         { label: "联系人姓名", prop: "name", isContactClick: true, default: true }, // 联系人姓名 | 
 |  |  |         // { label: "联系人编号", prop: "number" }, // 联系人编号 | 
 |  |  |         { label: "客户名称", prop: "client_name" }, // 客户名称 | 
 |  |  |         { label: "手机", prop: "phone" } // 手机号码 | 
 |  |  |       ], | 
 |  |  |       showCol: ["联系人姓名",  "客户名称", "手机"] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.search_map = { | 
 |  |  |       client_id: this.editConfig.clientId | 
 |  |  |     } | 
 |  |  |     this.setTable() | 
 |  |  |     this.getData() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     setTable() { | 
 |  |  |       this.tableList = { | 
 |  |  |         selectIndex: true, | 
 |  |  |         tableInfomation: [], | 
 |  |  |         tableColumn: [ | 
 |  |  |           { label: "联系人姓名", prop: "name", isContactClick: true }, // 联系人姓名 | 
 |  |  |           { label: "联系人编号", prop: "number" }, // 联系人编号 | 
 |  |  |           { label: "客户名称", prop: "client_name" }, // 客户名称 | 
 |  |  |           { label: "手机", prop: "phone" } // 手机号码 | 
 |  |  |         ] | 
 |  |  |         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 getContactList({ | 
 |  |  |         search_map: this.search_map, | 
 |  |  |         page: 0, | 
 |  |  |         pageSize: 0 | 
 |  |  |         page: this.pagerOptions.currPage, | 
 |  |  |         pageSize: this.pagerOptions.pageSize | 
 |  |  |       }) | 
 |  |  |         .then((res) => { | 
 |  |  |           console.log(res) | 
 |  |  | 
 |  |  |                   client_name: item.Client.name | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |               this.tableList.tableInfomation = list.slice(0, 5) || [] | 
 |  |  |               this.tableList.tableInfomation = list || [] | 
 |  |  |               this.pagerOptions.totalCount = res.data.count | 
 |  |  |             } else { | 
 |  |  |               this.tableList.tableInfomation = [] | 
 |  |  |             } | 
 |  |  | 
 |  |  |   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 { |