浏览代码

经销商管理

chenrui 2 年之前
父节点
当前提交
3f436cb863

+ 25 - 0
src/config/router.config.js

@@ -2888,6 +2888,31 @@ export const asyncRouterMap = [
               }
             ]
           },
+          {
+            path: '/dealerManagement/marketingDivisionSetNew',
+            redirect: '/dealerManagement/marketingDivisionSetNew/list',
+            name: 'marketingDivisionSetNew',
+            component: BlankLayout,
+            meta: {
+              title: '营销分区设置(新版)',
+              icon: 'setting'
+              // permission: 'M_marketingDivisionSetNewList'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: 'list',
+                name: 'marketingDivisionSetNewList',
+                component: () => import(/* webpackChunkName: "dealerManagement" */ '@/views/dealerManagement/marketingDivisionSetNew/list.vue'),
+                meta: {
+                  title: '营销分区列表',
+                  icon: 'setting',
+                  hidden: true
+                  // permission: 'M_marketingDivisionSetNewList'
+                }
+              }
+            ]
+          },
           {
             path: '/dealerManagement/dealerZoneSearch',
             redirect: '/dealerManagement/dealerZoneSearch/list',

+ 61 - 6
src/views/common/chooseDealer.vue

@@ -19,12 +19,40 @@
               <v-select code="DEALER_LEVEL" id="ucModal-dealerLevel" v-model="queryParam.dealerLevel" allowClear placeholder="请选择商户级别"></v-select>
             </a-form-model-item>
           </a-col>
-          <a-col :md="8" :sm="24">
+          <a-col :md="8" :sm="24" v-if="pageType!='viewDealers'">
             <a-form-item label="所在区域/分区">
               <subarea id="chooseDealer-subarea" v-model="queryParam.subareaSn"></subarea>
             </a-form-item>
           </a-col>
-          <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
+          <div v-else>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="审核状态">
+                <v-select code="AUDIT_STATE" id="viewDealers-auditState" v-model="queryParam.auditState" allowClear placeholder="请选择审核状态"></v-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="10" :sm="24">
+              <a-form-model-item label="地址" required style="margin: 0;" :label-col="{span:4}" :wrapper-col="{span:20}">
+                <a-row :gutter="20">
+                  <a-col span="8">
+                    <a-select id="viewDealers-provinceSn" allowClear @change="getCityList" v-model="queryParam.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-col>
+                  <a-col span="8">
+                    <a-select id="viewDealers-citySn" allowClear @change="getAreaList" v-model="queryParam.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-col>
+                  <a-col span="8">
+                    <a-select id="viewDealers-districtSn" allowClear @change="areaCharged" v-model="queryParam.districtSn" placeholder="请选择区/县">
+                      <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
+                    </a-select>
+                  </a-col>
+                </a-row>
+              </a-form-model-item>
+            </a-col>
+          </div>
+          <a-col :md="pageType!='viewDealers'?8:6" :sm="24" style="margin-bottom: 10px;">
             <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="chooseDealer-refresh">查询</a-button>
             <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="chooseDealer-reset">重置</a-button>
           </a-col>
@@ -52,6 +80,14 @@
       :scroll="{ y: tableHeight }"
       :defaultLoadData="false"
       bordered>
+      <template slot="action" slot-scope="text, record">
+        <a-button
+          size="small"
+          type="link"
+          class="button-error"
+          @click="handleDel(record)"
+          id="marketingDivisionSetNew-del-btn">删除</a-button>
+      </template>
     </s-table>
   </a-spin>
 </template>
@@ -65,6 +101,12 @@ export default {
   name: 'ChooseDealer',
   mixins: [commonMixin],
   components: { STable, VSelect, subarea },
+  props: {
+    pageType: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       spinning: false,
@@ -91,14 +133,27 @@ export default {
           return data
         })
       },
-      rowSelectionInfo: null,
-      columns: [
+      rowSelectionInfo: null
+    }
+  },
+  computed: {
+    columns () {
+      const _this = this
+      const arr = [
         { title: '经销商名称', dataIndex: 'putTime', width: '30%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '商户别名', dataIndex: 'providerName', align: 'left', width: '30%', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '商户类型', dataIndex: 'putBizTypeDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '商户级别', dataIndex: 'auditStateDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '所在区域', dataIndex: 'remark', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true }
+        { title: '商户级别', dataIndex: 'auditStateDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } }
       ]
+      if (_this.pageType == 'viewDealers') {
+        arr.splice(4, 0, { title: '审核状态', dataIndex: 'remark', width: '20%', align: 'left', customRender: function (text) { return text || '--' } })
+        arr.splice(5, 0, { title: '当前所属区域', dataIndex: 'remark', width: '20%', align: 'left', customRender: function (text) { return text || '--' } })
+        arr.splice(6, 0, { title: '操作', scopedSlots: { customRender: 'action' }, width: '30%', align: 'center' })
+      } else {
+        arr.splice(4, 0, { title: '所在区域', dataIndex: 'remark', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true })
+        arr.splice(5, 0, { title: '所在分区', dataIndex: 'remark', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true })
+      }
+      return arr
     }
   },
   methods: {

+ 322 - 0
src/views/dealerManagement/marketingDivisionSetNew/addAreaModal.vue

@@ -0,0 +1,322 @@
+<template>
+  <a-modal
+    centered
+    class="marketingDivisionSetEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancel="isShow=false"
+    :width="500">
+    <!-- 表单 -->
+    <div>
+      <a-spin :spinning="spinning" tip="Loading...">
+        <a-form-model
+          id="marketingDivisionSetEdit-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+        >
+          <a-form-model-item label="区域名称" prop="subareaName">
+            <a-input
+              id="marketingDivisionSetEdit-subareaName"
+              :maxLength="30"
+              v-model.trim="form.subareaName"
+              @change="filterEmpty"
+              placeholder="请输入区域名称(最多30个字符)"
+              allowClear />
+          </a-form-model-item>
+        </a-form-model>
+        <div class="btn-cont">
+          <a-button type="primary" id="marketingDivisionSetEdit-modal-save" @click="handleSave">保存</a-button>
+          <a-button id="marketingDivisionSetEdit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
+        </div>
+      </a-spin>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { STable, Upload } from '@/components'
+import Editor from '@/components/WEeditor'
+import { getArea } from '@/api/data'
+import { subareaSaveSubareaArea, subareaFindBySn } from '@/api/subarea'
+export default {
+  name: 'MarketingDivisionSetEditModal',
+  components: { STable, Upload, Editor },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    modalTit () {
+      return (this.itemId ? '编辑' : '新增') + '区域'
+    }
+  },
+  filters: {
+    hasCheckChild: function (value) {
+      return value.filter(item => item.checked).length
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      form: {
+        subareaName: '' // 分区名称
+      },
+      rules: {
+        subareaName: [
+          { required: true, message: '请输入分区名称', trigger: 'blur' }
+        ]
+      },
+      addrProvinceList: [], //  省下拉
+      subareaAreaList: []
+    }
+  },
+  methods: {
+    filterEmpty () {
+      let str = this.form.subareaName
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.form.subareaName = str
+    },
+    onChange (item, e, parent) {
+      // console.log(item, `checked = ${e.target.checked}`)
+      item.checked = e.target.checked
+      item.noSave = false
+      // 父级
+      if (item.type == 2) {
+        item.children && item.children.map(d => {
+          d.checked = item.checked
+        })
+        item.indeterminate = false
+      }
+      // 子级
+      if (item.type == 3) {
+        // 父级节点
+        const hasCheckd = parent.children.filter(k => k.checked)
+        // 是否全选
+        parent.checked = hasCheckd.length == parent.children.length
+        parent.children.map(d => d.noSave = parent.checked)
+        // indeterminate为true,则为全选,false则为部分选择或者空
+        parent.indeterminate = ((hasCheckd.length < parent.children.length) && (hasCheckd.length != 0))
+      }
+      this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+    },
+    // 展开收起
+    expend (item) {
+      if (item.children && item.children.length == 0) {
+        item.isOpen = 1
+        this.getArea('city', item, 1)
+      } else {
+        item.isOpen = !item.isOpen
+      }
+    },
+    //  省/市/区
+    getArea (leve, item, openType) {
+      let params
+      if (leve == 'province') {
+        params = { type: '2' }
+      } else {
+        params = { parentId: item.areaSn, type: leve == 'city' ? '3' : '4' }
+      }
+      getArea(params).then(res => {
+        if (res.status == 200) {
+          if (leve == 'province') {
+            this.addrProvinceList = res.data || []
+            this.addrProvinceList.map(item => {
+              item.noSave = true
+              item.checked = false
+              item.children = []
+              item.indeterminate = false
+            })
+            // 编辑时获取已选数据
+            if (this.itemId) {
+              this.getChecked()
+            }
+            document.getElementById('treeNode').scrollTop = 0
+          } else if (leve == 'city') {
+            item.children = res.data || []
+            item.children.map(d => {
+              // 编辑时回显
+              if (this.itemId && openType == 0) {
+                d.checked = !!this.subareaAreaList.find(o => o.areaSn == d.areaSn)
+                d.noSave = false
+              } else {
+                d.checked = item.checked
+                d.noSave = true
+              }
+            })
+
+            // 首次加载子级
+            if (openType == 1) {
+              this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+            } else {
+              item.isOpen = 1
+              item.indeterminate = true
+            }
+          }
+        } else {
+          if (leve == 'province') {
+            this.addrProvinceList = []
+          } else if (leve == 'city') {
+            item.children = []
+            item.isOpen = 0
+          }
+        }
+      })
+    },
+    // 过滤数据
+    filterData (list) {
+      list.map(item => {
+        if (item.checked && !item.noSave) {
+          this.subareaAreaList.push({
+            areaSn: item.areaSn,
+            areaName: item.name,
+            areaType: item.type,
+            areaParentSn: item.parentId
+          })
+        } else {
+          if (item.children && item.children.length) {
+            this.filterData(item.children)
+          }
+        }
+      })
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          this.subareaAreaList = []
+          this.filterData(this.addrProvinceList)
+          // console.log(this.subareaAreaList)
+          if (this.subareaAreaList.length == 0) {
+            this.$message.info('请先选择省份/市')
+            return
+          }
+          // 编辑
+          if (this.itemId) {
+            formData.subareaSn = this.itemId
+          }
+          formData.subareaAreaList = this.subareaAreaList
+          // console.log(formData, 'formData')
+          _this.spinning = true
+          subareaSaveSubareaArea(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              _this.isShow = false
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 编辑
+    getChecked () {
+      subareaFindBySn({ sn: this.itemId }).then(res => {
+        // console.log(res.data)
+        this.form.subareaName = res.data.subareaName
+        this.subareaAreaList = res.data.subareaAreaList
+        this.form.subareaSn = res.data.subareaSn
+        this.form.id = res.data.id
+        // 回显数据
+        this.showChecked()
+      })
+    },
+    showChecked () {
+      // 省回显
+      this.addrProvinceList.map(item => {
+        item.checked = !!this.subareaAreaList.find(d => d.areaSn == item.areaSn)
+        item.noSave = false
+        item.indeterminate = false
+      })
+      // 市回显
+      const hasCity = this.nowData.subareaAreaList.filter(item => item.citySubareaAreaList && item.citySubareaAreaList.length)
+      // console.log(hasCity, 'hasCity.nowData')
+      hasCity.map(item => {
+        // 省
+        const pre = this.addrProvinceList.find(k => k.areaSn == item.areaSn)
+        // 获取子级
+        this.getArea('city', pre, 0)
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.form.subareaName = ''
+        this.form.subareaSn = ''
+        delete this.form.id
+      } else {
+        this.getArea('province')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .marketingDivisionSetEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+    .tree-node{
+      height: 300px;
+      overflow: auto;
+      .tree-box{
+        .tree-parent{
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #eee;
+          padding: 0 10px;
+          > span{
+            margin:0 5px;
+            &:first-child{
+              flex-grow: 1;
+            }
+            &:last-child{
+              cursor: pointer;
+            }
+          }
+        }
+        .tree-child{
+          padding: 10px 10px 10px 35px;
+          display: flex;
+          align-items: center;
+          flex-wrap:wrap ;
+          > div{
+            margin:0 5px;
+          }
+        }
+      }
+
+    }
+  }
+</style>

+ 319 - 0
src/views/dealerManagement/marketingDivisionSetNew/addZoneModal.vue

@@ -0,0 +1,319 @@
+<template>
+  <a-modal
+    centered
+    class="marketingDivisionSetEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancel="isShow=false"
+    :width="500">
+    <!-- 表单 -->
+    <a-form-model
+      ref="ruleForm"
+      :model="zoneForm"
+      :rules="zoneRules"
+      :label-col="formItemLayout.labelCol"
+      :wrapper-col="formItemLayout.wrapperCol"
+    >
+      <a-form-model-item label="区域" prop="subareaName">
+        区域区域区域
+      </a-form-model-item>
+      <a-form-model-item label="分区名称" prop="subareaName">
+        <a-input
+          :maxLength="30"
+          v-model.trim="zoneForm.subareaName"
+          @change="filterEmpty"
+          placeholder="请输入分区名称(最多30个字符)"
+          allowClear />
+      </a-form-model-item>
+    </a-form-model>
+    <div class="btn-cont">
+      <a-button type="primary" id="marketingDivisionSetEdit-modal-save" @click="handleSave">保存</a-button>
+      <a-button id="marketingDivisionSetEdit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { STable, Upload } from '@/components'
+import Editor from '@/components/WEeditor'
+import { getArea } from '@/api/data'
+import { subareaSaveSubareaArea, subareaFindBySn } from '@/api/subarea'
+export default {
+  name: 'MarketingDivisionSetEditModal',
+  components: { STable, Upload, Editor },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    modalTit () {
+      return (this.itemId ? '编辑' : '新增') + '分区'
+    }
+  },
+  filters: {
+    hasCheckChild: function (value) {
+      return value.filter(item => item.checked).length
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      zoneForm: {
+        subareaName: '' // 分区名称
+      },
+      zoneRules: {
+        subareaName: [
+          { required: true, message: '请输入分区名称', trigger: 'blur' }
+        ]
+      },
+      addrProvinceList: [], //  省下拉
+      subareaAreaList: []
+    }
+  },
+  methods: {
+    filterEmpty () {
+      let str = this.zoneForm.subareaName
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.zoneForm.subareaName = str
+    },
+    onChange (item, e, parent) {
+      // console.log(item, `checked = ${e.target.checked}`)
+      item.checked = e.target.checked
+      item.noSave = false
+      // 父级
+      if (item.type == 2) {
+        item.children && item.children.map(d => {
+          d.checked = item.checked
+        })
+        item.indeterminate = false
+      }
+      // 子级
+      if (item.type == 3) {
+        // 父级节点
+        const hasCheckd = parent.children.filter(k => k.checked)
+        // 是否全选
+        parent.checked = hasCheckd.length == parent.children.length
+        parent.children.map(d => d.noSave = parent.checked)
+        // indeterminate为true,则为全选,false则为部分选择或者空
+        parent.indeterminate = ((hasCheckd.length < parent.children.length) && (hasCheckd.length != 0))
+      }
+      this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+    },
+    // 展开收起
+    expend (item) {
+      if (item.children && item.children.length == 0) {
+        item.isOpen = 1
+        this.getArea('city', item, 1)
+      } else {
+        item.isOpen = !item.isOpen
+      }
+    },
+    //  省/市/区
+    getArea (leve, item, openType) {
+      let params
+      if (leve == 'province') {
+        params = { type: '2' }
+      } else {
+        params = { parentId: item.areaSn, type: leve == 'city' ? '3' : '4' }
+      }
+      getArea(params).then(res => {
+        if (res.status == 200) {
+          if (leve == 'province') {
+            this.addrProvinceList = res.data || []
+            this.addrProvinceList.map(item => {
+              item.noSave = true
+              item.checked = false
+              item.children = []
+              item.indeterminate = false
+            })
+            // 编辑时获取已选数据
+            if (this.itemId) {
+              this.getChecked()
+            }
+            document.getElementById('treeNode').scrollTop = 0
+          } else if (leve == 'city') {
+            item.children = res.data || []
+            item.children.map(d => {
+              // 编辑时回显
+              if (this.itemId && openType == 0) {
+                d.checked = !!this.subareaAreaList.find(o => o.areaSn == d.areaSn)
+                d.noSave = false
+              } else {
+                d.checked = item.checked
+                d.noSave = true
+              }
+            })
+
+            // 首次加载子级
+            if (openType == 1) {
+              this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+            } else {
+              item.isOpen = 1
+              item.indeterminate = true
+            }
+          }
+        } else {
+          if (leve == 'province') {
+            this.addrProvinceList = []
+          } else if (leve == 'city') {
+            item.children = []
+            item.isOpen = 0
+          }
+        }
+      })
+    },
+    // 过滤数据
+    filterData (list) {
+      list.map(item => {
+        if (item.checked && !item.noSave) {
+          this.subareaAreaList.push({
+            areaSn: item.areaSn,
+            areaName: item.name,
+            areaType: item.type,
+            areaParentSn: item.parentId
+          })
+        } else {
+          if (item.children && item.children.length) {
+            this.filterData(item.children)
+          }
+        }
+      })
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(_this.form))
+          this.subareaAreaList = []
+          this.filterData(this.addrProvinceList)
+          // console.log(this.subareaAreaList)
+          if (this.subareaAreaList.length == 0) {
+            this.$message.info('请先选择省份/市')
+            return
+          }
+          // 编辑
+          if (this.itemId) {
+            formData.subareaSn = this.itemId
+          }
+          formData.subareaAreaList = this.subareaAreaList
+          // console.log(formData, 'formData')
+          _this.spinning = true
+          subareaSaveSubareaArea(formData).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              _this.isShow = false
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 编辑
+    getChecked () {
+      subareaFindBySn({ sn: this.itemId }).then(res => {
+        // console.log(res.data)
+        this.form.subareaName = res.data.subareaName
+        this.subareaAreaList = res.data.subareaAreaList
+        this.form.subareaSn = res.data.subareaSn
+        this.form.id = res.data.id
+        // 回显数据
+        this.showChecked()
+      })
+    },
+    showChecked () {
+      // 省回显
+      this.addrProvinceList.map(item => {
+        item.checked = !!this.subareaAreaList.find(d => d.areaSn == item.areaSn)
+        item.noSave = false
+        item.indeterminate = false
+      })
+      // 市回显
+      const hasCity = this.nowData.subareaAreaList.filter(item => item.citySubareaAreaList && item.citySubareaAreaList.length)
+      // console.log(hasCity, 'hasCity.nowData')
+      hasCity.map(item => {
+        // 省
+        const pre = this.addrProvinceList.find(k => k.areaSn == item.areaSn)
+        // 获取子级
+        this.getArea('city', pre, 0)
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.form.subareaName = ''
+        this.form.subareaSn = ''
+        delete this.form.id
+      } else {
+        this.getArea('province')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .marketingDivisionSetEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+    .tree-node{
+      height: 300px;
+      overflow: auto;
+      .tree-box{
+        .tree-parent{
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #eee;
+          padding: 0 10px;
+          > span{
+            margin:0 5px;
+            &:first-child{
+              flex-grow: 1;
+            }
+            &:last-child{
+              cursor: pointer;
+            }
+          }
+        }
+        .tree-child{
+          padding: 10px 10px 10px 35px;
+          display: flex;
+          align-items: center;
+          flex-wrap:wrap ;
+          > div{
+            margin:0 5px;
+          }
+        }
+      }
+
+    }
+  }
+</style>

+ 103 - 103
src/views/dealerManagement/marketingDivisionSetNew/list.vue

@@ -1,108 +1,109 @@
 <template>
-  <div>
-    <a-card size="small" :bordered="false">
-      <!-- 搜索条件 -->
-      <div ref="tableSearch" class="table-page-search-wrapper newTableSearchName">
-        <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="rebateSettingsList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="24">
-              <a-form-item label="客服/区域负责人/销售总监">
-                <a-input id="rebateSettingsList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入客服/区域负责人/销售总监"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="24" :sm="24" style="margin-bottom: 10px;">
-              <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="rebateSettingsList-refresh">查询</a-button>
-              <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="rebateSettingsList-reset">重置</a-button>
-            </a-col>
-          </a-row>
-        </a-form>
-      </div></a-card>
-    <a-card size="small" :bordered="false" class="marketingDivisionSetList-wrap">
-      <a-spin :spinning="spinning" tip="Loading...">
-        <!-- 操作按钮 -->
-        <div ref="tableSearch" class="table-operator" style="border: 0;">
-          <a-button id="marketingDivisionSetList-add" type="primary" v-if="$hasPermissions('B_marketingDivisionSet_add')" class="button-error" @click="handleEdit()">+新增区域</a-button>
-        </div>
-        <!-- 列表 -->
-        <s-table
-          class="sTable fixPagination"
-          ref="table"
-          :style="{ height: tableHeight+84.5+'px' }"
-          size="small"
-          :rowKey="(record) => record.id"
-          :columns="columns"
-          :showPagination="false"
-          :data="loadData"
-          :scroll="{ y: tableHeight }"
-          :defaultLoadData="false"
-          bordered>
-          <!-- 市区 -->
-          <template slot="cityArea" slot-scope="text, record">
-            <div style="display: inline-block;margin-right: 15px;" v-for="item in record.subareaAreaList" :key="item.id">
-              {{ item.areaName }}
-              <span v-if="item.citySubareaAreaList">(</span>
-              <span style="color: #999;margin:0 3px;" v-for="area in item.citySubareaAreaList" :key="area.id">
-                {{ area.areaName }}
-              </span>
-              <span v-if="item.citySubareaAreaList">)</span>
-            </div>
-          </template>
-          <!-- 操作 -->
-          <template slot="action" slot-scope="text, record">
-            <a-button
-              size="small"
-              type="link"
-              v-if="$hasPermissions('B_marketingDivisionSet_edit')"
-              class="button-info"
-              @click="handleEdit(record)"
-              id="marketingDivisionSetList-edit-btn">编辑</a-button>
-            <a-button
-              size="small"
-              type="link"
-              v-if="$hasPermissions('B_marketingDivisionSet_del')"
-              class="button-error"
-              @click="handleDel(record)"
-              id="marketingDivisionSetList-del-btn">删除</a-button>
-            <span v-if="!$hasPermissions('B_marketingDivisionSet_edit') && !$hasPermissions('B_marketingDivisionSet_del')">--</span>
-          </template>
-        </s-table>
-      </a-spin>
-      <!-- 编辑分区 -->
-      <marketing-division-set-edit-modal
-        v-drag
-        :nowData="nowData"
-        :openModal="openModal"
-        :itemId="itemId"
-        @ok="$refs.table.refresh()"
-        @close="closeModal" />
-    </a-card>
-  </div>
+  <a-card size="small" :bordered="false" class="marketingDivisionSetNew-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 操作按钮 -->
+      <div ref="tableSearch" class="table-operator" style="border: 0;text-align:right;">
+        <a-button id="marketingDivisionSetNew-add" type="primary" class="button-error" @click="addArea">+新增区域</a-button>
+      </div>
+      <!-- 列表 -->
+      <s-table
+        class="sTable fixPagination"
+        ref="table"
+        :style="{ height: tableHeight+84.5+'px' }"
+        size="small"
+        :rowKey="(record) => record.id"
+        :columns="columns"
+        :showPagination="false"
+        :data="loadData"
+        :scroll="{ y: tableHeight }"
+        :defaultLoadData="false"
+        expanded-row-keys
+        bordered>
+        <!-- 市区 -->
+        <template slot="cityArea" slot-scope="text, record">
+          <div style="display: inline-block;margin-right: 15px;" v-for="item in record.subareaAreaList" :key="item.id">
+            {{ item.areaName }}
+            <span v-if="item.citySubareaAreaList">(</span>
+            <span style="color: #999;margin:0 3px;" v-for="area in item.citySubareaAreaList" :key="area.id">
+              {{ area.areaName }}
+            </span>
+            <span v-if="item.citySubareaAreaList">)</span>
+          </div>
+        </template>
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text, record">
+          <a-button
+            size="small"
+            type="link"
+            class="button-success"
+            @click="addZone(record)"
+            id="marketingDivisionSetNew-edit-btn">新增分区</a-button>
+          <a-button
+            size="small"
+            type="link"
+            class="button-success"
+            @click="openDealerModal=true"
+            id="marketingDivisionSetNew-edit-btn">查看经销商</a-button>
+          <a-button
+            size="small"
+            type="link"
+            v-if="$hasPermissions('B_marketingDivisionSet_edit')"
+            class="button-info"
+            @click="handleEdit(record)"
+            id="marketingDivisionSetNew-edit-btn">编辑</a-button>
+          <a-button
+            size="small"
+            type="link"
+            v-if="$hasPermissions('B_marketingDivisionSet_del')"
+            class="button-error"
+            @click="handleDel(record)"
+            id="marketingDivisionSetNew-del-btn">删除</a-button>
+          <span v-if="!$hasPermissions('B_marketingDivisionSet_edit') && !$hasPermissions('B_marketingDivisionSet_del')">--</span>
+        </template>
+      </s-table>
+    </a-spin>
+    <!-- 新增区域 -->
+    <addAreaModal
+      v-drag
+      :openModal="openAreaModal"
+      @ok="$refs.table.refresh()"
+      @close="openAreaModal=false"></addAreaModal>
+    <!-- 新增分区 -->
+    <addZoneModal
+      v-drag
+      :openModal="openZoneModal"
+      @ok="$refs.table.refresh()"
+      @close="openZoneModal=false"></addZoneModal>
+    <!-- 查看经销商 -->
+    <viewDealers
+      :showModal="openDealerModal"
+      @close="openDealerModal=false"></viewDealers>
+  </a-card>
 </template>
 
 <script>
 import { commonMixin } from '@/utils/mixin'
 import { STable, VSelect } from '@/components'
-import marketingDivisionSetEditModal from './editModal.vue'
+import addAreaModal from './addAreaModal.vue'
+import addZoneModal from './addZoneModal.vue'
+import viewDealers from './viewDealers.vue'
 import { subareaQueryIncludeAreaAll, subareaDeleteBySn } from '@/api/subarea'
 export default {
-  name: 'MarketingDivisionSetList',
+  name: 'MarketingDivisionSetNew',
   mixins: [commonMixin],
-  components: { STable, VSelect, marketingDivisionSetEditModal },
+  components: { STable, VSelect, addAreaModal, addZoneModal, viewDealers },
   data () {
     return {
       spinning: false,
       disabled: false, //  查询、重置按钮是否可操作
       tableHeight: 0,
+      openAddDealer: false,
+      openAreaModal: false,
+      openZoneModal: false,
+      openDealerModal: false,
       columns: [
-        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
-        { title: '分区名', dataIndex: 'subareaName', width: '30%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '省份/市', scopedSlots: { customRender: 'cityArea' }, align: 'left', width: '55%' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
+        { title: '区域分区', dataIndex: 'subareaName', width: '70%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '30%', align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
@@ -121,13 +122,18 @@ export default {
           this.spinning = false
           return data
         })
-      },
-      openModal: false, //  编辑  弹框
-      nowData: null,
-      itemId: null //  当前产品id
+      }
     }
   },
   methods: {
+    // 新增区域
+    addArea () {
+      this.openAreaModal = true
+    },
+    // 新增分区
+    addZone (row) {
+      this.openZoneModal = true
+    },
     //  重置
     resetSearchForm () {
       this.$refs.table.refresh(true)
@@ -137,7 +143,7 @@ export default {
       const _this = this
       this.$confirm({
         title: '提示',
-        content: '确定要删除吗?删除后,经销商解除区域归属,人员解除管辖区域,删除后数据不可恢复。',
+        content: '确定要删除吗?删除后相关用户权限自动解绑。',
         centered: true,
         onOk () {
           _this.spinning = true
@@ -159,12 +165,6 @@ export default {
       this.nowData = row
       this.openModal = true
     },
-    //  关闭弹框
-    closeModal () {
-      this.itemId = null
-      this.nowData = null
-      this.openModal = false
-    },
     pageInit () {
       const _this = this
       this.$nextTick(() => { // 页面渲染完成后的回调
@@ -173,7 +173,7 @@ export default {
     },
     setTableH () {
       const tableSearchH = this.$refs.tableSearch.offsetHeight
-      this.tableHeight = window.innerHeight - tableSearchH - 195
+      this.tableHeight = window.innerHeight - tableSearchH - 230
     }
   },
   watch: {
@@ -205,7 +205,7 @@ export default {
 }
 </script>
 <style lang="less">
-  .marketingDivisionSetList-wrap{
+  .marketingDivisionSetNew-wrap{
     height: 100%;
   }
 </style>

+ 282 - 0
src/views/dealerManagement/marketingDivisionSetNew/viewDealers.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <a-drawer
+      title="选择区域"
+      width="80%"
+      :zIndex="100"
+      :visible="visible"
+      :get-container="false"
+      :wrap-style="{ position: 'absolute' }"
+      @close="visible = false">
+      <a-spin :spinning="spinning" tip="Loading...">
+        <!-- 搜索条件 -->
+        <div ref="tableSearch" class="table-page-search-wrapper newTableSearchName">
+          <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+            <a-row :gutter="15">
+              <a-col :md="8" :sm="24">
+                <a-form-item label="经销商名称/别名">
+                  <a-input id="viewDealers-nameLike" v-model.trim="queryParam.nameLike" allowClear placeholder="请输入经销商名称/别名"/>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="商户类型">
+                  <v-select code="DEALER_TYPE" id="viewDealers-dealerType" v-model="queryParam.dealerType" allowClear placeholder="请选择商户类型"></v-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-model-item label="商户级别" prop="dealerLevel">
+                  <v-select code="DEALER_LEVEL" id="viewDealers-dealerLevel" v-model="queryParam.dealerLevel" allowClear placeholder="请选择商户级别"></v-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="8" :sm="24">
+                <a-form-item label="审核状态">
+                  <v-select code="AUDIT_STATE" id="viewDealers-auditState" v-model="queryParam.auditState" allowClear placeholder="请选择审核状态"></v-select>
+                </a-form-item>
+              </a-col>
+              <a-col :md="10" :sm="24">
+                <a-form-model-item label="地址" required style="margin: 0;" :label-col="{span:4}" :wrapper-col="{span:20}">
+                  <a-row :gutter="20">
+                    <a-col span="8">
+                      <a-select id="viewDealers-provinceSn" allowClear @change="getCityList" v-model="queryParam.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-col>
+                    <a-col span="8">
+                      <a-select id="viewDealers-citySn" allowClear @change="getAreaList" v-model="queryParam.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-col>
+                    <a-col span="8">
+                      <a-select id="viewDealers-districtSn" allowClear @change="areaCharged" v-model="queryParam.districtSn" placeholder="请选择区/县">
+                        <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
+                      </a-select>
+                    </a-col>
+                  </a-row>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
+                <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="viewDealers-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="viewDealers-reset">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <div style="margin-top:200px;" v-if="flag">
+          <a-empty
+            :image="simpleImage"
+            :image-style="{
+              height: '60px',
+            }"
+          >
+            <span slot="description"> 暂无数据 </span>
+            <a-button type="primary" class="button-error" @click="openAddDealer=true"><a-icon type="plus" />立即绑定经销商</a-button>
+          </a-empty>
+        </div>
+        <div class="tableCon" v-else>
+          <div style="text-align:right;margin-bottom:10px;"><a-button type="primary" class="button-error" @click="openAddDealer=true"><a-icon type="plus" />绑定经销商</a-button></div>
+          <s-table
+            class="sTable"
+            ref="table"
+            size="small"
+            :rowKey="(record) => record.stockPutSn"
+            rowKeyName="stockPutSn"
+            :columns="columns"
+            :data="loadData"
+            :style="{ height: tableHeight+84.5+'px' }"
+            :scroll="{ y: tableHeight }"
+            :defaultLoadData="false"
+            bordered>
+          </s-table>
+        </div>
+      </a-spin>
+    </a-drawer>
+
+    <!-- 绑定经销商 -->
+    <a-drawer
+      title="选择经销商"
+      width="68%"
+      :zIndex="200"
+      :visible="openAddDealer"
+      :get-container="false"
+      :wrap-style="{ position: 'absolute' }"
+      @close="openAddDealer = false">
+      <div class="dealerModalCon">
+        <chooseDealer pageType="viewDealers"></chooseDealer>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import { STable, VSelect } from '@/components'
+import chooseDealer from '@/views/common/chooseDealer.vue'
+import { Empty } from 'ant-design-vue'
+export default {
+  mixins: [commonMixin],
+  components: { STable, VSelect, chooseDealer },
+  props: {
+    showModal: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    showModal (newValue, oldValue) {
+      this.visible = newValue
+    },
+    visible (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    },
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  data () {
+    return {
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+      spinning: false,
+      visible: this.showModal,
+      openAddDealer: false,
+      flag: false,
+      queryParam: { //  查询条件
+        nameLike: '',
+        dealerType: null,
+        dealerLevel: null,
+        auditState: null,
+        provinceSn: undefined,
+        citySn: undefined,
+        districtSn: undefined
+      },
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [], //  区下拉
+      disabled: false,
+      tableHeight: 0,
+      columns: [
+        { title: '经销商名称', dataIndex: 'subareaName', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '商户别名', dataIndex: 'subareaName1', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '商户类型', dataIndex: 'subareaName2', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '商户级别', dataIndex: 'subareaName3', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '审核状态', dataIndex: 'subareaName4', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '20%', align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        return stockPutList(Object.assign(parameter, this.queryParam, { confirm: true })).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+
+  methods: {
+    resetSearchForm () {},
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+      })
+      _this.getArea('province')
+    },
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 345
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.queryParam.districtSn = undefined
+      if (val) {
+        this.getArea('district', val)
+        this.queryParam.cityName = this.addrCityList.find(item => item.areaSn == val).name
+      } else {
+        this.queryParam.cityName = ''
+      }
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.queryParam.citySn = undefined
+      this.queryParam.districtSn = undefined
+      if (val) {
+        this.getArea('city', val)
+        this.queryParam.provinceName = this.addrProvinceList.find(item => item.areaSn == val).name
+      } else {
+        this.queryParam.provinceName = ''
+      }
+    },
+    // 区县变更
+    areaCharged (val) {
+      if (val) {
+        this.queryParam.districtName = this.addrDistrictList.find(item => item.areaSn == val).name
+      } else {
+        this.queryParam.districtName = ''
+      }
+    },
+    //  省/市/区
+    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 = []
+          }
+        }
+      })
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.pageInit()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.areaSetModal {
+  width: 100%;
+  .areaFooter {
+    text-align:center;
+  }
+}
+</style>