lilei 4 år sedan
förälder
incheckning
173e661815

+ 33 - 1
src/api/subarea.js

@@ -4,7 +4,39 @@ import { axios } from '@/utils/request'
 export const subareaQueryAll = (params) => {
   return axios({
     url: `/subarea/queryAll`,
-    data: params,
     method: 'get'
   })
+}
+
+// 查询包含区域的所有分区
+export const subareaQueryIncludeAreaAll = (params) => {
+  return axios({
+    url: `/subarea/queryIncludeAreaAll`,
+    method: 'get'
+  })
+}
+
+// 根据sn删除分区信息
+export const subareaDeleteBySn = (params) => {
+  return axios({
+    url: `/subarea/deleteBySn/${params.sn}`,
+    method: 'get'
+  })
+}
+
+// 根据分区sn查询选中分区
+export const subareaFindBySn = (params) => {
+  return axios({
+    url: `/subarea/findBySn/${params.sn}`,
+    method: 'get'
+  })
+}
+
+// 保存选中省市区
+export const subareaSaveSubareaArea = (params) => {
+  return axios({
+    url: `/subarea/saveSubareaArea`,
+    data: params,
+    method: 'post'
+  })
 }

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

@@ -320,31 +320,31 @@ export const asyncRouterMap = [
           // permission: 'M_shop'
         },
         children: [
-          // {
-          //   path: '/dealerManagement/marketingDivisionSet',
-          //   redirect: '/dealerManagement/marketingDivisionSet/list',
-          //   name: 'marketingDivisionSet',
-          //   component: RouteView,
-          //   meta: {
-          //     title: '营销分区设置',
-          //     icon: 'sketch'
-          //     // permission: 'M_goodsManage_list'
-          //   },
-          //   hideChildrenInMenu: true,
-          //   children: [
-          //     {
-          //       path: 'list',
-          //       name: 'marketingDivisionSetList',
-          //       component: () => import(/* webpackChunkName: "shop" */ '@/views/dealerManagement/marketingDivisionSet/list.vue'),
-          //       meta: {
-          //         title: '营销分区列表',
-          //         icon: 'sketch',
-          //         hidden: true
-          //         // permission: 'M_goodsManage_list'
-          //       }
-          //     }
-          //   ]
-          // },
+          {
+            path: '/dealerManagement/marketingDivisionSet',
+            redirect: '/dealerManagement/marketingDivisionSet/list',
+            name: 'marketingDivisionSet',
+            component: RouteView,
+            meta: {
+              title: '营销分区设置',
+              icon: 'sketch'
+              // permission: 'M_goodsManage_list'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: 'list',
+                name: 'marketingDivisionSetList',
+                component: () => import(/* webpackChunkName: "shop" */ '@/views/dealerManagement/marketingDivisionSet/list.vue'),
+                meta: {
+                  title: '营销分区列表',
+                  icon: 'sketch',
+                  hidden: true
+                  // permission: 'M_goodsManage_list'
+                }
+              }
+            ]
+          },
           // {
           //   path: '/dealerManagement/userManagement',
           //   redirect: '/dealerManagement/userManagement/list',

+ 162 - 116
src/views/dealerManagement/marketingDivisionSet/editModal.vue

@@ -7,7 +7,7 @@
     :title="modalTit"
     v-model="isShow"
     @cancle="isShow=false"
-    width="500px">
+    width="800px">
     <!-- 表单 -->
     <div>
       <a-form-model
@@ -18,24 +18,36 @@
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
       >
-        <a-form-model-item label="分区名称" prop="productBrandName">
+        <a-form-model-item label="分区名称" prop="subareaName">
           <a-input
-            id="marketingDivisionSetEdit-productBrandName"
+            id="marketingDivisionSetEdit-subareaName"
             :maxLength="30"
-            v-model="form.productBrandName"
+            v-model="form.subareaName"
             placeholder="请输入分区名称(最多30个字符)"
             allowClear />
         </a-form-model-item>
-        <a-form-model-item label="省份/市" prop="productBrandName">
-          <a-tree
-            checkable
-            @check="onCheck"
-            @expand="onExpand"
-            :expandedKeys="expandedKeys"
-            :autoExpandParent="autoExpandParent"
-            v-model="checkedKeys"
-            :treeData="treeData"
-          />
+        <a-form-model-item label="省份/市">
+          <div class="tree-node">
+            <div class="tree-box" v-for="item in addrProvinceList" :key="item.id">
+              <div class="tree-parent">
+                <span>
+                  <a-checkbox style="width: 100%;" v-model="item.checked" @change="onChange(item,$event)">
+                    {{ item.checked }}{{ item.name }}
+                  </a-checkbox>
+                </span>
+                <span @click="expend(item)"><a-icon :title="item.isOpen==0?'展开':'收起'" :type="item.isOpen==0?'plus-square':'minus-square'" /></span>
+              </div>
+
+              <!-- 子级 -->
+              <div v-show="item.isOpen==1" class="tree-child">
+                <div v-for="child in item.children" :key="child.id">
+                  <a-checkbox v-model="child.checked" style="width: 100%;" @change="onChange(child,$event)">
+                    {{ child.checked }}{{ child.name }}
+                  </a-checkbox>
+                </div>
+              </div>
+            </div>
+          </div>
         </a-form-model-item>
       </a-form-model>
       <div class="btn-cont">
@@ -49,7 +61,7 @@
 <script>
 import { STable, Upload } from '@/components'
 import Editor from '@/components/WEeditor'
-// import { dealerProductBrandSave } from '@/api/dealerProductBrand'
+import { getArea } from '@/api/data'
 export default {
   name: 'MarketingDivisionSetEditModal',
   components: { STable, Upload, Editor },
@@ -80,99 +92,124 @@ export default {
         wrapperCol: { span: 20 }
       },
       form: {
-        productBrandName: '', // 产品品牌名称
-        image: '',
-        desc: ''
+        subareaName: '' // 分区名称
       },
       rules: {
-        productBrandName: [
-          { required: true, message: '请输入产品品牌名称', trigger: 'blur' }
+        subareaName: [
+          { required: true, message: '请输入分区名称', trigger: 'blur' }
         ]
       },
-      productBrandList: [],
-      expandedKeys: ['0-0-0', '0-0-1'],
-      autoExpandParent: true,
-      checkedKeys: ['0-0-0'],
-      selectedKeys: [],
-      treeData: [
-        {
-          title: '0-0',
-          key: '0-0',
-          children: [
-            {
-              title: '0-0-0',
-              key: '0-0-0',
-              children: [
-                { title: '0-0-0-0', key: '0-0-0-0' },
-                { title: '0-0-0-1', key: '0-0-0-1' },
-                { title: '0-0-0-2', key: '0-0-0-2' }
-              ]
-            },
-            {
-              title: '0-0-1',
-              key: '0-0-1',
-              children: [
-                { title: '0-0-1-0', key: '0-0-1-0' },
-                { title: '0-0-1-1', key: '0-0-1-1' },
-                { title: '0-0-1-2', key: '0-0-1-2' }
-              ]
-            },
-            {
-              title: '0-0-2',
-              key: '0-0-2'
-            }
-          ]
-        },
-        {
-          title: '0-1',
-          key: '0-1',
-          children: [
-            { title: '0-1-0-0', key: '0-1-0-0' },
-            { title: '0-1-0-1', key: '0-1-0-1' },
-            { title: '0-1-0-2', key: '0-1-0-2' }
-          ]
-        },
-        {
-          title: '0-2',
-          key: '0-2'
-        }
-      ]
+      addrProvinceList: [], //  省下拉
+      subareaAreaList: []
     }
   },
   methods: {
-    onExpand (expandedKeys) {
-      console.log('onExpand', expandedKeys)
-      this.expandedKeys = expandedKeys
-      this.autoExpandParent = false
+    onChange (item, e) {
+      console.log(item, `checked = ${e.target.checked}`)
+      item.checked = e.target.checked
+      const hasItemIndex = this.subareaAreaList.findIndex(d => d.areaSn == item.areaSn)
+      // 已存在,则删除
+      if (hasItemIndex >= 0) {
+        this.subareaAreaList.splice(hasItemIndex, 1)
+      } else {
+        // 不存在,添加
+        this.subareaAreaList.push({
+          areaSn: item.areaSn,
+          areaName: item.name,
+          areaType: item.type,
+          areaParentSn: item.parentId
+        })
+      }
+      console.log(this.subareaAreaList)
+
+      // 判断是否存在父级
+      if (item.type == 3) {
+        // 如何子级全部勾选
+        const parent = this.addrProvinceList.find(d => d.areaSn == item.parentId)
+        const plen = parent.children.length
+        const tjNode = this.subareaAreaList.filter(d => d.areaParentSn == item.parentId)
+        console.log(tjNode.length == plen)
+        if (tjNode.length == plen) {
+          console.log(1)
+          // 保存父级
+          this.subareaAreaList.push({
+            areaSn: parent.areaSn,
+            areaName: parent.name,
+            areaType: parent.type,
+            areaParentSn: parent.parentId
+          })
+          // 删除所有子级
+          this.subareaAreaList = this.subareaAreaList.filter(d => d.areaParentSn != item.parentId)
+          parent.checked = true
+        } else {
+          const hasPIndex = this.subareaAreaList.findIndex(d => d.areaSn == item.parentId)
+          // 存在则删除父级
+          if (hasPIndex >= 0) {
+            this.subareaAreaList.splice(hasPIndex, 1)
+          }
+          parent.checked = false
+        }
+      } else {
+        console.log(item.checked)
+        // 父级操作
+        item.children && item.children.map(d => {
+          d.disabled = item.checked
+          d.checked = item.checked
+        })
+      }
+
+      this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+    },
+    // 展开收起
+    expend (item) {
+      if (item.children && item.children.length == 0) {
+        item.isOpen = 1
+        this.getArea('city', item)
+      } else {
+        item.isOpen = !item.isOpen
+      }
     },
-    onCheck (checkedKeys, info) {
-      console.log('onCheck', checkedKeys, info)
-      // this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
-      this.checkedKeys = checkedKeys
+    //  省/市/区
+    getArea (leve, item, isOpen) {
+      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.checked = false
+              item.children = []
+            })
+          } else if (leve == 'city') {
+            item.children = res.data || []
+            item.children.map(d => {
+              d.disabled = false
+              d.checked = item.checked
+            })
+            this.addrProvinceList = JSON.parse(JSON.stringify(this.addrProvinceList))
+          }
+        } else {
+          if (leve == 'province') {
+            this.addrProvinceList = []
+          } else if (leve == 'city') {
+            item.children = []
+            item.isOpen = 0
+          }
+        }
+      })
     },
-    // onExpand (expandedKeys) {
-    //   console.log('onExpand', expandedKeys)
-    //   // if not set autoExpandParent to false, if children expanded, parent can not collapse.
-    //   // or, you can remove all expanded children keys.
-    //   this.expandedKeys = expandedKeys
-    //   this.autoExpandParent = false
-    // },
-    // onCheck (checkedKeys) {
-    //   console.log('onCheck', checkedKeys)
-    //   this.checkedKeys = checkedKeys
-    // },
-    // onSelect (selectedKeys, info) {
-    //   console.log('onSelect', info)
-    //   this.selectedKeys = selectedKeys
-    // },
     //  保存
     handleSave () {
-      console.log(this.checkedKeys)
       const _this = this
       _this.$refs.ruleForm.validate(valid => {
         if (valid) {
           const formData = JSON.parse(JSON.stringify(_this.form))
-          formData.id = _this.itemId ? _this.itemId : undefined
+          console.log(this.subareaAreaList)
           // dealerProductBrandSave(formData).then(res => {
           //   if (res.status == 200) {
           //     _this.$message.success(res.message)
@@ -184,14 +221,6 @@ export default {
           return false
         }
       })
-    },
-    //  图片上传
-    changeHomeImage (file) {
-      this.form.image = file
-    },
-    //  文本编辑器
-    editorChange (html, text) {
-      this.form.desc = html
     }
   },
   watch: {
@@ -204,7 +233,7 @@ export default {
       if (!newValue) {
         this.$emit('close')
       } else {
-        this.form.productBrandName = this.nowData && this.nowData.productBrandName ? this.nowData.productBrandName : ''
+        this.getArea('province')
       }
     }
   }
@@ -216,23 +245,40 @@ export default {
     .ant-modal-body {
     	padding: 40px 40px 24px;
     }
-    .upload{
-      width: 100%!important;
-    }
-    //  商品图片描述
-    .upload-desc{
-      font-size: 12px;
-      color: #808695;
-    }
-    //  文本编辑器  工具栏样式换行
-    .marketingDivisionSetEdit-editor{
-      .w-e-toolbar{
-        flex-wrap: wrap;
-      }
-    }
     .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>

+ 31 - 42
src/views/dealerManagement/marketingDivisionSet/list.vue

@@ -11,13 +11,24 @@
       size="default"
       :rowKey="(record) => record.id"
       :columns="columns"
+      :showPagination="false"
       :data="loadData"
       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" @click="handleEdit(record)" id="marketingDivisionSetList-edit-btn">编辑</a-button>
-        <a-divider type="vertical" style="margin: 0;" />
-        <a-button size="small" type="link" @click="handleDel(record)" id="marketingDivisionSetList-del-btn">删除</a-button>
+        <a-button size="small" type="link" class="button-info" @click="handleEdit(record)" id="marketingDivisionSetList-edit-btn">编辑</a-button>
+        <a-button size="small" type="link" class="button-error" @click="handleDel(record)" id="marketingDivisionSetList-del-btn">删除</a-button>
       </template>
     </s-table>
     <!-- 编辑分区 -->
@@ -28,51 +39,29 @@
 <script>
 import { STable, VSelect } from '@/components'
 import marketingDivisionSetEditModal from './editModal.vue'
+import { subareaQueryIncludeAreaAll, subareaDeleteBySn } from '@/api/subarea'
 export default {
   components: { STable, VSelect, marketingDivisionSetEditModal },
   data () {
     return {
-      advanced: false, // 高级搜索 展开/关闭
-      queryParam: { //  查询条件
-      },
       disabled: false, //  查询、重置按钮是否可操作
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
-        { title: '分区名', dataIndex: 'productName', width: 200, align: 'center', ellipsis: true },
-        { title: '省份/市', dataIndex: 'productCode', align: 'center', ellipsis: true },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center', fixed: 'right' }
+        { title: '分区名', dataIndex: 'subareaName', width: 200, align: 'center' },
+        { title: '省份/市', scopedSlots: { customRender: 'cityArea' }, align: 'left' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
         this.disabled = true
-        // return dealerProductList(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
-        //     const productTypeName1 = data.list[i].productTypeName1 ? data.list[i].productTypeName1 : ''
-        //     const productTypeName2 = data.list[i].productTypeName2 ? ' > ' + data.list[i].productTypeName2 : ''
-        //     const productTypeName3 = data.list[i].productTypeName3 ? ' > ' + data.list[i].productTypeName3 : ''
-        //     data.list[i].productTypeName = productTypeName1 + productTypeName2 + productTypeName3
-        //   }
-        //   this.disabled = false
-        //   return data
-        // })
-        const _this = this
-        return new Promise(function (resolve, reject) {
-          const data = {
-            pageNo: 1,
-            pageSize: 10,
-            list: [
-              { id: '1', productNum: 'jgqp11111111111', productName: '产品1', productPic: ['https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 'https://qn.antdv.com/vue.png'], productOldNum: 'jgqp111123545', productBrand: '箭冠品牌', productType: '产品分类1', inventoryNum: '5', inventoryMoney: '122' }
-            ]
-          }
-          const no = (data.pageNo - 1) * data.pageSize
-          for (var i = 0; i < data.list.length; i++) {
-            data.list[i].no = no + i + 1
+        return subareaQueryIncludeAreaAll(parameter).then(res => {
+          const data = res.data
+          const no = 0
+          for (var i = 0; i < data.length; i++) {
+            data[i].no = no + i + 1
           }
-          _this.disabled = false
-          resolve(data)
+          this.disabled = false
+          return data
         })
       },
       openModal: false, //  编辑  弹框
@@ -92,12 +81,12 @@ export default {
         content: '确认要删除吗?',
         centered: true,
         onOk () {
-          // salesDel({ id: row.id }).then(res => {
-          //   if (res.status == 200) {
-          //     _this.$message.success(res.message)
-          //     _this.$refs.table.refresh()
-          //   }
-          // })
+          subareaDeleteBySn({ sn: row.subareaSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+            }
+          })
         }
       })
     },