| | |
| | | :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 { |