Browse Source

总部创建销售单

chenrui 3 years ago
parent
commit
b4adc6eb7d

+ 44 - 0
src/api/dealerRecevieAddr.js

@@ -0,0 +1,44 @@
+import { axios } from '@/utils/request'
+
+//  收货地址 列表  有分页
+export const dealerRecevieAddrList = (params) => {
+  const url = `/dealerRecevieAddr/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  收货地址 列表
+export const dealerRecevieAddrQuery = (params) => {
+  return axios({
+    url: '/dealerRecevieAddr/queryList',
+    data: params,
+    method: 'post'
+  })
+}
+//  收货地址 保存
+export const dealerRecevieAddrSave = (params) => {
+  return axios({
+    url: '/dealerRecevieAddr/save',
+    data: params,
+    method: 'post'
+  })
+}
+//  收货地址 设置默认
+export const dealerRecevieAddrSet = (params) => {
+  return axios({
+    url: `/dealerRecevieAddr/setDefault/${params.id}`,
+    method: 'get'
+  })
+}
+//  收货地址 删除
+export const dealerRecevieAddrDel = (params) => {
+  return axios({
+    url: `/dealerRecevieAddr/delete/${params.id}`,
+    data: {},
+    method: 'get'
+  })
+}

+ 79 - 0
src/views/common/dealerSubareaScopeList.vue

@@ -0,0 +1,79 @@
+<template>
+  <a-select
+    show-search
+    label-in-value
+    :size="size"
+    :value="dealerName"
+    placeholder="请输入名称搜索"
+    style="width: 100%"
+    :filter-option="false"
+    :not-found-content="fetching ? undefined : null"
+    @search="fetchUser"
+    @change="handleChange"
+    allowClear
+  >
+    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+    <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerSn">
+      {{ item.dealerName }}
+    </a-select-option>
+  </a-select>
+</template>
+<script>
+import debounce from 'lodash/debounce'
+import { dealerSubareaScopeList, dealerDetailBySn } from '@/api/dealer'
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'default'
+    }
+  },
+  data () {
+    this.lastFetchId = 0
+    this.fetchUser = debounce(this.fetchUser, 800)
+    return {
+      data: [],
+      dealerName: [],
+      fetching: false
+    }
+  },
+  methods: {
+    fetchUser (dealerName) {
+      console.log('fetching user', dealerName)
+      if (dealerName == '') return
+      this.lastFetchId += 1
+      const fetchId = this.lastFetchId
+      this.data = []
+      this.fetching = true
+      dealerSubareaScopeList({ nameLike: dealerName, pageNo: 1, pageSize: 20 }).then(res => {
+        if (fetchId !== this.lastFetchId) {
+          return
+        }
+        this.data = res.data && res.data.list ? res.data.list : []
+        this.fetching = false
+      })
+    },
+    handleChange (value) {
+      if (value && value.key) {
+        const obj = this.data.find(item => item.dealerSn == value.key)
+        value.name = obj.dealerName
+      }
+      Object.assign(this, {
+        dealerName: value,
+        data: [],
+        fetching: false
+      })
+      this.$emit('change', value || { key: undefined })
+    },
+    resetForm () {
+      this.dealerName = []
+    },
+    // 查询详细
+    getDetail (sn) {
+      dealerDetailBySn({ sn: sn }).then(res => {
+        this.$emit('dealerDetail', res.data || null)
+      })
+    }
+  }
+}
+</script>

+ 102 - 110
src/views/salesManagement/salesQuery/chooseCustomModal.vue

@@ -5,7 +5,7 @@
     centered
     :maskClosable="false"
     :confirmLoading="confirmLoading"
-    :width="960"
+    :width="800"
     :footer="null"
     @cancel="cancel"
   >
@@ -16,67 +16,43 @@
         :model="form"
         :rules="rules"
         :label-col="formItemLayout.labelCol"
-        :wrapper-col="formItemLayout.wrapperCol"
-      >
-        <a-row :gutter="15">
-          <a-col :span="24">
-            <a-form-model-item label="客户名称" prop="buyerSn">
-              <custList id="chooseCustom-buyerSn" defValKey="buyerSn" @change="custChange" v-model="form.buyerSn"></custList>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="15">
-          <a-col :span="24">
-            <a-form-model-item label="联系人">
-              {{ form.consigneeName }}
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-model-item label="联系电话">
-              {{ form.consigneeTel }}
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="15">
-          <a-col :span="24">
-            <a-form-model-item label="客户地址">
-              {{ form.customerAddr }}
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="15">
-          <a-col :span="24">
-            <a-form-model-item label="收款方式" prop="settleStyleSn">
-              <settleStyle id="chooseCustom-settleStyleSn" v-model="form.settleStyleSn"></settleStyle>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="15">
-          <a-col :span="24">
-            <a-form-model-item label="选择收货地址" prop="shippingAddr">
-              <a-select id="chooseCustom-shippingAddr" v-model="form.shippingAddr" placeholder="请选择收货地址">
-                <a-select-option v-for="item in addrList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
+        :wrapper-col="formItemLayout.wrapperCol">
+        <a-form-model-item label="客户名称" prop="buyerSn">
+          <dealerSubareaScopeList ref="dealerSubareaScopeList" id="chooseCustom-buyerSn" defValKey="buyerSn" @change="custChange" v-model="form.buyerSn" />
+        </a-form-model-item>
+        <a-form-model-item label="支付方式" prop="settleStyleSn">
+          <v-select
+            code="SETTLE_STYLE"
+            id="chooseCustom-settleStyleSn"
+            v-model="form.settleStyleSn"
+            allowClear
+            placeholder="请选择支付方式"></v-select>
+        </a-form-model-item>
+        <a-form-model-item prop="consigneeTel">
+          <span slot="label"><i style="color: red;">*</i> 收货地址</span>
+          {{ chooseAddr }}
+          <a-button type="link" :disabled="!form.buyerSn" id="chooseCustom-chooseAddr" @click="handleChoose">{{ addressVal }} >></a-button>
+        </a-form-model-item>
         <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
           <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">保存</a-button>
           <a-button @click="cancel" style="margin-left: 15px" id="chooseCustom-btn-back">取消</a-button>
         </a-form-model-item>
       </a-form-model>
     </a-spin>
+    <!-- 选择地址 -->
+    <choose-address-modal :openModal="openAddrModal" :paramsData="form.buyerSn" @ok="handleOk" @verify="verifyFun" @close="openAddrModal=false" />
   </a-modal>
 </template>
 
 <script>
-import { salesSave } from '@/api/sales'
 import { VSelect } from '@/components'
-import custList from '@/views/common/custList.vue'
-import settleStyle from '@/views/common/settleStyle.js'
+import dealerSubareaScopeList from '@/views/common/dealerSubareaScopeList.vue'
+import chooseAddressModal from './receivingAddress/chooseAddressModal.vue'
+import { dealerRecevieAddrQuery } from '@/api/dealerRecevieAddr'
+import { salesSave } from '@/api/sales'
 export default {
   name: 'ChooseCustomModal',
-  components: { VSelect, custList, settleStyle },
+  components: { VSelect, dealerSubareaScopeList, chooseAddressModal },
   props: {
     show: [Boolean]
   },
@@ -90,71 +66,44 @@ export default {
         labelCol: { span: 4 },
         wrapperCol: { span: 18 }
       },
-      buyerSnBak: '', // 更改前客户sn备份
-      priceTypeBak: '', // 更改前客户价格类型备份
       form: {
-        buyerName: '', // 客户名称
         buyerSn: undefined, // 客户sn
-        consigneeTel: '', //  联系电话
-        consigneeName: '', //  联系人
-        shippingAddressProvinceSn: undefined, //  省
-        shippingAddressProvinceName: '',
-        shippingAddressCitySn: undefined, // 市
-        shippingAddressCityName: '',
-        shippingAddressCountySn: undefined, // 区
-        shippingAddressCountyName: '',
-        shippingAddress: '', //  详细地址
-        fax: '', //  客户传真
-        dispatchType: undefined, //  配送方式
-        satelliteFlag: 0, //  是否卫星仓客户
-        priceType: undefined, //  价格类型
-        settleStyleSn: '', //  收款方式
-        salesManSn: undefined, //  业务员
-        salesManName: '',
-        distributionFlag: '0', // 铺货出库
-        salesTragetType: 'C',
-        remarks: '' //  备注
+        buyerName: '',
+        settleStyleSn: undefined,
+        shippingAddrProvinceSn: '',
+        shippingAddrProvinceName: '', // 省
+        shippingAddrCitySn: '',
+        shippingAddrCityName: '', // 市
+        shippingAddrCountySn: '',
+        shippingAddrCountyName: '', // 区
+        shippingAddr: '', // 详细地址
+        consigneeTel: '', // 联系电话
+        consigneeName: '' // 联系人名称
       },
       rules: {
-        buyerSn: [
-          { required: true, message: '请选择客户', trigger: ['change', 'blur'] }
-        ],
-        consigneeTel: [{ required: true, message: '请输入联系电话', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }],
-        shippingAddressProvinceSn: [
-          { required: true, message: '请选择省', trigger: 'change' }
-        ],
-        shippingAddressCitySn: [
-          { required: true, message: '请选择市', trigger: 'change' }
-        ],
-        shippingAddressCountySn: [
-          { required: true, message: '请选择区/县', trigger: 'change' }
-        ],
-        shippingAddress: [
-          { required: true, message: '请输入详细地址', trigger: 'blur' }
-        ],
-        priceType: [
-          { required: true, message: '请选择价格类型', trigger: ['change', 'blur'] }
-        ],
-        settleStyleSn: [
-          { required: true, message: '请选择收款方式', trigger: ['change', 'blur'] }
-        ],
-        distributionFlag: [
-          { required: true, message: '请选择是否铺货出库', trigger: 'change' }
-        ]
-        // salesManSn: [
-        //   { required: true, message: '请选择业务员', trigger: 'change' }
-        // ]
+        buyerSn: [ { required: true, message: '请选择客户', trigger: ['change', 'blur'] } ],
+        settleStyleSn: [ { required: true, message: '请选择支付方式', trigger: ['change', 'blur'] } ],
+        consigneeTel: [ { required: true, message: '请选择收货地址', trigger: ['change', 'blur'] } ]
       },
-      custAllList: [], //  客户 下拉数据
-      addrList: [], // 地址列表
-      custId: undefined, // 客户id
-      isEdit: false //  是否编辑状态
+      addressVal: '选择地址', //  选择地址/更换地址
+      chooseAddr: '', //  当前已选地址信息
+      openAddrModal: false // 选择地址弹框是否显示
     }
   },
   methods: {
     // 客户 change
     custChange (val) {
-      console.log(val, 'custChange')
+      if (val && val.key) {
+        this.form.buyerSn = val.key || undefined
+        this.form.buyerName = val.name || ''
+        this.getDefaultAddress()
+      } else {
+        this.verifyFun(this.addressId)
+      }
+    },
+    //  选择地址
+    handleChoose () {
+      this.openAddrModal = true
     },
     //  保存
     handleSubmit (e) {
@@ -173,7 +122,6 @@ export default {
     salesSaveFun () {
       const _this = this
       const form = this.form
-      console.log(form, 'save data')
       _this.spinning = true
       salesSave(form).then(res => {
         if (res.status == 200) {
@@ -193,18 +141,62 @@ export default {
       this.opened = false
       this.$emit('cancel')
       this.$refs.ruleForm.resetFields()
+    },
+    //  地址保存
+    handleOk (data) {
+      this.chooseAddr = (data.consigneeName || '') + '(' + (data.consigneeTel || '') + ')' + ' ' + (data.address || '')
+      this.addressVal = '更换地址'
+      this.form.shippingAddrProvinceSn = data.provinceSn
+      this.form.shippingAddrProvinceName = data.provinceName // 省
+      this.form.shippingAddrCitySn = data.citySn
+      this.form.shippingAddrCityName = data.cityName // 市
+      this.form.shippingAddrCountySn = data.countySn
+      this.form.shippingAddrCountyName = data.countyName // 区
+      this.form.shippingAddr = data.addr// 详细地址
+      this.form.consigneeTel = data.consigneeTel // 联系电话
+      this.form.consigneeName = data.consigneeName
+      this.addressId = data.id || undefined
+      this.openAddrModal = false
+    },
+    verifyFun (id) {
+      if (id == this.addressId) {
+        this.chooseAddr = ''
+        this.addressVal = '选择地址'
+        this.form.shippingAddrProvinceSn = ''
+        this.form.shippingAddrProvinceName = ''// 省
+        this.form.shippingAddrCitySn = ''
+        this.form.shippingAddrCityName = '' // 市
+        this.form.shippingAddrCountySn = ''
+        this.form.shippingAddrCountyName = '' // 区
+        this.form.shippingAddr = ''// 详细地址
+        this.form.consigneeTel = '' // 联系电话
+        this.form.consigneeName = ''
+      }
+    },
+    // 获取默认地址
+    getDefaultAddress () {
+      dealerRecevieAddrQuery({ defaultFlag: 1, dealerSn: this.form.buyerSn }).then(res => {
+        if (res.status == 200) {
+          if (res.data.length == 1) {
+            res.data[0].address = res.data[0].provinceName + '-' + res.data[0].cityName + '-' + res.data[0].countyName + '-' + res.data[0].addr
+            this.addressId = res.data[0].id || undefined
+            this.handleOk(res.data[0])
+          } else {
+            this.verifyFun(this.addressId)
+          }
+        }
+      })
     }
   },
   watch: {
     show (newValue, oldValue) {
       this.opened = newValue
-      if (newValue) {
-        this.getArea('province')
+      if (!newValue) {
+        this.$refs.dealerSubareaScopeList.resetForm()
+        this.$refs.ruleForm.resetFields()
+        this.verifyFun(this.addressId)
       }
     }
   }
 }
 </script>
-
-<style>
-</style>

+ 1 - 13
src/views/salesManagement/salesQuery/edit.vue

@@ -6,7 +6,6 @@
         <template slot="subTitle">
           <a id="salesEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
           <span style="margin: 0 15px;color: #666;">客户名称:{{ detailData&&detailData.buyerName }}</span>
-          <!-- <a-button id="salesEdit-edit-btn" size="small" @click="handleEdit" style="margin-left:10px" key="0">编辑</a-button> -->
         </template>
         <!-- 操作区,位于 title 行的行尾 -->
         <!-- <template slot="extra">
@@ -142,8 +141,6 @@
         @click="handleSubmit()"
         id="productInfoList-handleSubmit">提交</a-button>
     </div>
-    <!-- 选择客户弹框 -->
-    <choose-custom-modal ref="custModal" :show="openModal" @cancel="openModal=false" />
     <!-- 添加产品 -->
     <ChooseActive
       ref="activeProduct"
@@ -159,20 +156,18 @@
 import { STable, VSelect } from '@/components'
 import queryPart from './queryPart.vue'
 import queryPromotable from './queryPromotable.vue'
-import chooseCustomModal from './chooseCustomModal.vue'
 import ChooseActive from './chooseActive.vue'
 import { salesDetailBySn, salesWriteSubmit, getPromoacActiveList } from '@/api/sales'
 import { salesDetailList, salesDetailInsert, salesDetailUpdateQty, salesDetailDel, salesDetailDelAll, addPromoGoods } from '@/api/salesDetail'
 export default {
   name: 'SalesDetail',
-  components: { STable, VSelect, queryPart, queryPromotable, chooseCustomModal, ChooseActive },
+  components: { STable, VSelect, queryPart, queryPromotable, ChooseActive },
   data () {
     return {
       spinning: false,
       salesBillSn: null, // 销售单sn
       disabled: false, //  查询、重置按钮是否可操作
       isInster: false, // 是否正在添加产品
-      openModal: false, // 客户弹框
       delLoading: false,
       newActive: false, // 选择促销品
       detailData: { discountAmount: 0, id: null, salesBillSn: '' }, // 订单基础数据
@@ -234,13 +229,6 @@ export default {
         record.qty = record.qtyBackups
       }
     },
-    // 编辑客户信息
-    handleEdit () {
-      this.openModal = true
-      setTimeout(() => {
-        this.$refs.custModal.editCust(this.detailData)
-      }, 500)
-    },
     //  重置
     resetSearchForm (flag) {
       this.$refs.table.refresh(!!flag)

+ 3 - 3
src/views/salesManagement/salesQuery/list.vue

@@ -99,9 +99,9 @@
         </a-form>
       </div>
       <!-- 操作按钮 -->
-      <!-- <div class="table-operator">
+      <div class="table-operator">
         <a-button type="primary" class="button-error" @click="handleAdd">新增</a-button>
-      </div> -->
+      </div>
       <!-- alert -->
       <a-alert type="info" style="margin-bottom:10px">
         <div slot="message">
@@ -442,7 +442,7 @@ export default {
     },
     setTableH () {
       const tableSearchH = this.$refs.tableSearch.offsetHeight
-      this.tableHeight = window.innerHeight - tableSearchH - 270
+      this.tableHeight = window.innerHeight - tableSearchH - 315
     }
   },
   mounted () {

+ 238 - 0
src/views/salesManagement/salesQuery/receivingAddress/chooseAddressModal.vue

@@ -0,0 +1,238 @@
+<template>
+  <a-modal
+    centered
+    class="chooseAddressList-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="收货地址"
+    v-model="isShow"
+    @cancel="isShow=false"
+    :width="960">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 操作按钮 -->
+      <div class="table-operator">
+        <a-button id="chooseAddressList-add" type="primary" class="button-error" @click="handleEdit()">新增</a-button>
+      </div>
+      <!-- 列表 -->
+      <s-table
+        class="sTable"
+        ref="table"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :data="loadData"
+        :scroll="{ x: 1200 }"
+        :showPagination="false"
+        bordered>
+        <!-- 收货人 -->
+        <template slot="consignee" slot-scope="text, record">
+          <div class="item-box">
+            <a-tooltip placement="top">
+              <template slot="title">
+                <span>{{ record.consigneeName }}</span>
+              </template>
+              <p class="ellipsis-txt">{{ record.consigneeName }}</p>
+            </a-tooltip>
+            <span v-if="record.defaultFlag==1" class="badge-txt">默认</span>
+          </div>
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text, record">
+          <a-button
+            size="small"
+            type="primary"
+            class="button-success"
+            v-if="record.defaultFlag!=1"
+            @click="handleDefault(record)"
+            id="chooseAddressList-default-btn">设为默认</a-button>
+          <a-button
+            size="small"
+            type="primary"
+            class="button-info"
+            @click="handleEdit(record)"
+            id="chooseAddressList-edit-btn"
+          >编辑</a-button>
+          <a-button
+            size="small"
+            type="primary"
+            class="button-error"
+            @click="handleDel(record)"
+            id="chooseAddressList-del-btn"
+          >删除</a-button>
+        </template>
+        <!-- 选择 -->
+        <template slot="choose" slot-scope="text, record">
+          <a-button
+            size="small"
+            type="primary"
+            class="button-primary"
+            @click="handleChoose(record)"
+            id="chooseAddressList-choose-btn">选择</a-button>
+        </template>
+      </s-table>
+    </a-spin>
+    <!-- 新增/编辑地址 -->
+    <edit-address-modal ref="addrModal" :openModal="openAddrModal" :paramsData="paramsData" @ok="handleOk" @close="openAddrModal=false" />
+  </a-modal>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import editAddressModal from './editAddressModal'
+import { dealerRecevieAddrQuery, dealerRecevieAddrSet, dealerRecevieAddrDel } from '@/api/dealerRecevieAddr'
+export default {
+  name: 'ChooseAddressModal',
+  components: { STable, VSelect, editAddressModal },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    paramsData: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      isShow: this.openModal, //  是否打开弹框
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 50, align: 'center' },
+        { title: '收货人', scopedSlots: { customRender: 'consignee' }, align: 'center', ellipsis: true },
+        { title: '手机号码', dataIndex: 'consigneeTel', width: 230, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '收货地址', dataIndex: 'address', width: 400, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center', fixed: 'right' },
+        { title: '选择', scopedSlots: { customRender: 'choose' }, width: 80, align: 'center', fixed: 'right' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        return dealerRecevieAddrQuery({ dealerSn: this.paramsData }).then(res => {
+          const data = res.data
+          const no = 0
+          for (var i = 0; i < data.length; i++) {
+            data[i].no = no + i + 1
+            const provinceName = data[i].provinceName ? (data[i].provinceName + '-') : ''
+            const cityName = data[i].cityName ? (data[i].cityName + '-') : ''
+            const countyName = data[i].countyName ? (data[i].countyName + '-') : ''
+            const addr = data[i].addr || ''
+            data[i].address = provinceName + cityName + countyName + addr
+          }
+          this.disabled = false
+          return data
+        })
+      },
+      openAddrModal: false // 选择地址弹框是否显示
+    }
+  },
+  methods: {
+    //  设为默认
+    handleDefault (row) {
+      this.spinning = true
+      dealerRecevieAddrSet({ id: row.id }).then(res => {
+        if (res.status == 200) {
+          this.$message.success(res.message)
+          this.$refs.table.refresh(true)
+          this.spinning = false
+        } else {
+          this.spinning = false
+        }
+      })
+    },
+    //  新增/编辑收货地址
+    handleEdit (row) {
+      if (row) {
+        this.$refs.addrModal.setData({
+          id: row.id,
+          consigneeName: row.consigneeName,
+          consigneeTel: row.consigneeTel,
+          provinceSn: row.provinceSn,
+          provinceName: row.provinceName,
+          citySn: row.citySn,
+          cityName: row.cityName,
+          countySn: row.countySn,
+          countyName: row.countyName,
+          addr: row.addr
+        })
+      }
+      this.openAddrModal = true
+    },
+    //  选择
+    handleChoose (row) {
+      this.$emit('ok', row)
+    },
+    //  删除
+    handleDel (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '删除后不可恢复,确定要进行删除吗?',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          dealerRecevieAddrDel({
+            id: row.id
+          }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('verify', row.id)
+              _this.$refs.table.refresh(true)
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    //  地址保存成功
+    handleOk (data) {
+      this.$refs.table.refresh(true)
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chooseAddressList-modal{
+    .table-operator{
+      margin-bottom: 10px;
+    }
+    .item-box{
+      position: relative;
+      display: flex;
+      align-items: center;
+      .ellipsis-txt{
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+        text-overflow:ellipsis;
+        whitewhite-space: nowrap;
+      }
+      .badge-txt{
+        line-height: 20px;
+        padding: 0 7px;
+        font-size: 12px;
+        background-color: #fff;
+        color: #ed1c24;
+        border-color: #ed1c24;
+        border-radius: 20px;
+        box-shadow: 0 0 0 1px #d9d9d9 inset;
+      }
+    }
+  }
+</style>

+ 267 - 0
src/views/salesManagement/salesQuery/receivingAddress/editAddressModal.vue

@@ -0,0 +1,267 @@
+<template>
+  <a-modal
+    centered
+    class="editAddress-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="收货地址"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-form-model
+        id="editAddress-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="收货人" prop="consigneeName">
+          <a-input
+            id="editAddress-name"
+            :maxLength="30"
+            v-model="form.consigneeName"
+            placeholder="请输入收货人(最多30个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item label="收货人电话" prop="consigneeTel">
+          <a-input
+            id="editAddress-phone"
+            :maxLength="30"
+            v-model="form.consigneeTel"
+            placeholder="请输入收货人电话(最多30个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item label="所在地区" required style="margin: 0;">
+          <a-row :gutter="20">
+            <!-- 所在地区 -->
+            <a-col span="8">
+              <a-form-model-item prop="provinceSn">
+                <a-select id="editAddress-provinceSn" allowClear @change="getCityList" v-model="form.provinceSn" placeholder="请选择省">
+                  <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + 'a'">{{ item.name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col span="8">
+              <a-form-model-item prop="citySn">
+                <a-select id="editAddress-citySn" allowClear @change="getAreaList" v-model="form.citySn" placeholder="请选择市">
+                  <a-select-option v-for="item in addrCityList" :value="item.areaSn" :key="item.areaSn + 'b'">{{ item.name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col span="8">
+              <a-form-model-item prop="countySn">
+                <a-select id="editAddress-countySn" allowClear @change="areaCharged" v-model="form.countySn" placeholder="请选择区/县">
+                  <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model-item>
+        <a-form-model-item label="详细地址" prop="addr">
+          <a-input
+            id="editAddress-address"
+            :maxLength="60"
+            v-model="form.addr"
+            placeholder="请输入详细地址(最多60个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
+          <a-button type="primary" @click="handleSubmit" id="editAddress-btn-submit">保存</a-button>
+          <a-button @click="isShow=false" style="margin-left: 15px" id="editAddress-btn-back">返回</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { getArea } from '@/api/data'
+import { dealerRecevieAddrSave } from '@/api/dealerRecevieAddr'
+export default {
+  name: 'EditAddressModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    paramsData: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      isShow: this.openModal, //  是否打开弹框
+      isEdit: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      form: {
+        consigneeName: '',
+        consigneeTel: '',
+        provinceSn: undefined,
+        provinceName: '',
+        citySn: undefined,
+        cityName: '',
+        countySn: undefined,
+        countyName: '',
+        addr: ''
+      },
+      rules: {
+        consigneeName: [
+          { required: true, message: '请输入收货人', trigger: 'change' }
+        ],
+        consigneeTel: [
+          { required: true, message: '请输入收货人电话', trigger: 'change' }
+        ],
+        provinceSn: [
+          { required: true, message: '请选择省', trigger: 'change' }
+        ],
+        citySn: [
+          { required: true, message: '请选择市', trigger: 'change' }
+        ],
+        countySn: [
+          { required: true, message: '请选择区', trigger: 'change' }
+        ],
+        addr: [
+          { required: true, message: '请输入详细地址', trigger: 'change' }
+        ]
+      },
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [] //  区下拉
+    }
+  },
+  methods: {
+    //  保存
+    handleSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.spinning = true
+          dealerRecevieAddrSave(Object.assign(this.form, { dealerSn: this.paramsData })).then(res => {
+            if (res.status == 200) {
+              this.isShow = false
+              this.$emit('ok')
+              this.$message.success(res.message)
+              this.spinning = false
+            } else {
+              this.spinning = false
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.form.citySn = undefined
+      this.form.countySn = undefined
+      if (val) {
+        this.getArea('city', val)
+        this.form.provinceName = this.addrProvinceList.find(item => item.areaSn == val).name
+      } else {
+        this.form.provinceName = ''
+      }
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.form.countySn = undefined
+      if (val) {
+        this.getArea('district', val)
+        this.form.cityName = this.addrCityList.find(item => item.areaSn == val).name
+      } else {
+        this.form.cityName = ''
+      }
+    },
+    // 区县变更
+    areaCharged (val) {
+      if (val) {
+        this.form.countyName = this.addrDistrictList.find(item => item.areaSn == val).name
+      } else {
+        this.form.countyName = ''
+      }
+    },
+    //  省/市/区
+    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 = []
+          }
+        }
+      })
+    },
+    // 编辑数据
+    setData (data) {
+      this.isEdit = true
+      Promise.all([getArea({ type: '2' }), getArea({ parentId: data.provinceSn, type: '3' }), getArea({ parentId: data.citySn, type: '4' })]).then(res => {
+        console.log(res)
+        this.addrProvinceList = res[0].data
+        const provinceName = this.addrProvinceList.find(item => item.id == data.provinceSn)
+        if (provinceName && provinceName.name) {
+          this.form.provinceName = provinceName.name
+        }
+        this.addrCityList = res[1].data
+        const cityName = this.addrCityList.find(item => item.id == data.citySn)
+        if (cityName && cityName.name) {
+          this.form.cityName = cityName.name
+        }
+        this.addrDistrictList = res[2].data
+        const countyName = this.addrDistrictList.find(item => item.id == data.countySn)
+        if (countyName && countyName.name) {
+          this.form.countyName = countyName.name
+        }
+        this.form = Object.assign({}, this.form, data)
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.addrCityList = []
+        this.addrDistrictList = []
+        this.isEdit = false
+        delete this.form.id
+      } else {
+        if (!this.isEdit) {
+          this.getArea('province')
+        }
+      }
+    }
+  }
+}
+</script>