<template> <a-modal centered class="chooseCustomer-modal" :footer="null" :maskClosable="false" title="选择客户" v-model="isShow" @cancle="isShow=false" :width="900"> <div class="chooseCustomer-con"> <!-- 搜索条件 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)"> <a-row :gutter="15"> <a-col :md="6" :sm="24"> <a-form-item label="客户名称"> <a-input id="chooseCustomer-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入客户名称"/> </a-form-item> </a-col> <a-col :md="12" :sm="24"> <a-row> <a-form-item label="地区"> <a-col span="7"> <a-form-item prop="provinceSn" style="margin: 0;"> <a-select v-model="queryParam.provinceSn" @change="getCityList" placeholder="请选择省"> <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option> </a-select> </a-form-item> </a-col> <a-col span="7" offset="1"> <a-form-item prop="citySn" style="margin: 0;"> <a-select v-model="queryParam.citySn" @change="getAreaList" placeholder="请选择市"> <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option> </a-select> </a-form-item> </a-col> <a-col span="7" offset="1"> <a-form-item prop="districtSn" style="margin: 0;"> <a-select v-model="queryParam.districtSn" placeholder="请选择区/县"> <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option> </a-select> </a-form-item> </a-col> </a-form-item> </a-row> </a-col> <a-col :md="6" :sm="24"> <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="promotionRulesList-refresh">查询</a-button> <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="promotionRulesList-reset">重置</a-button> </a-col> </a-row> </a-form> </div> <p style="font-weight: bold;">当前已选:{{ selectedRowKeys.length }}个</p> <!-- 列表 --> <s-table class="sTable" ref="table" size="small" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :rowKey="(record) => record.id" :columns="columns" :data="loadData" :defaultLoadData="false" bordered> </s-table> <!-- 按钮 --> <div class="btn-con"> <a-button type="primary" id="chooseCustomer-submit" size="large" class="button-primary" style="padding: 0 60px;" @click="handleSubmit">确定</a-button> <a-button id="chooseCustomer-cancel" size="large" class="button-cancel" @click="isShow=false" style="padding: 0 60px;margin-left: 15px;">取消</a-button> </div> </div> </a-modal> </template> <script> import { STable } from '@/components' import { getArea } from '@/api/data' import { dealerQueryList } from '@/api/dealer' export default { name: 'ChooseCustomerModal', components: { STable }, props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, chooseCust: { type: Array, default: () => { return [] } } }, data () { return { isShow: this.openModal, // 是否打开弹框 disabled: false, // 查询、重置按钮是否可操作 queryParam: { dealerName: '', provinceSn: undefined, citySn: undefined, districtSn: undefined }, columns: [ { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '客户名称', dataIndex: 'dealerName', align: 'center', customRender: function (text) { return text || '--' } } ], // 加载数据方法 必须为 Promise 对象 loadData: parameter => { this.disabled = true return dealerQueryList(Object.assign(parameter, this.queryParam)).then(res => { const data = res.data const no = (data.pageNo - 1) * data.pageSize for (var i = 0; i < data.list.length; i++) { data.list[i].no = no + i + 1 } this.disabled = false return data }) }, selectedRowKeys: [], addrProvinceList: [], // 省下拉 addrCityList: [], // 市下拉 addrDistrictList: [] // 区下拉 } }, methods: { // 重置 resetSearchForm () { this.resetData() this.$refs.table.refresh(true) }, resetData () { console.log('重置艾迪康') this.queryParam.dealerName = '' this.queryParam.provinceSn = undefined this.queryParam.citySn = undefined this.queryParam.districtSn = undefined this.addrCityList = [] this.addrDistrictList = [] }, // 确定 handleSubmit () { if (this.selectedRowKeys.length < 1) { this.$message.warning('请在列表勾选后再进行操作!') return } this.$emit('ok', this.selectedRowKeys) this.isShow = false }, onSelectChange (selectedRowKeys, selectedRows) { console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows) this.selectedRowKeys = selectedRowKeys }, // 获取城市列表 getCityList (val) { this.addrCityList = [] this.addrDistrictList = [] this.queryParam.citySn = undefined this.queryParam.districtSn = undefined this.getArea('city', val) }, // 获取区县列表 getAreaList (val) { this.addrDistrictList = [] this.queryParam.districtSn = undefined this.getArea('district', val) }, // 省/市/区 getArea (leve, sn) { let params if (leve == 'province') { params = { type: '2' } } else { params = { parentId: sn, type: leve == 'city' ? '3' : '4' } } getArea(params).then(res => { if (res.status == 200) { if (leve == 'province') { this.addrProvinceList = res.data || [] } else if (leve == 'city') { this.addrCityList = res.data || [] } else if (leve == 'district') { this.addrDistrictList = res.data || [] } } else { if (leve == 'province') { this.addrProvinceList = [] } else if (leve == 'city') { this.addrCityList = [] } else if (leve == 'district') { this.addrDistrictList = [] } } }) } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') this.resetData() } else { this.selectedRowKeys = this.chooseCust if (this.addrProvinceList.length == 0) { this.getArea('province') } const _this = this setTimeout(() => { _this.$refs.table.refresh(true) }, 200) } } } } </script> <style lang="less" scoped> .chooseCustomer-modal{ .chooseCustomer-con{ .btn-con{ text-align: center; margin: 30px 0 20px; .button-cancel{ font-size: 12px; } } } } </style>