| | |
| | | > |
| | | <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, |
| | |
| | | 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() { |
| | |
| | | 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 { |