🎈 perf: 爆品列表添加区域范围

src/views/active/hot/HotGoodsAdd.vue

@@ -28,8 +28,20 @@
         <el-input v-model="form.productPrice" prefix="¥" placeholder="请输入爆品价格"></el-input>
       </el-form-item>
 
+      <el-form-item label="活动区域" prop="regionalCodes">
+        <el-cascader
+          style="width: 100%"
+          v-model="regionArrDialog"
+          :props="regionProps"
+          size="large"
+          placeholder="请选择区域"
+          @change="form.regionalCodes = [...new Set(regionArrDialog.map((i) => i[i.length - 1]))].join(',')"
+        ></el-cascader>
+        <div v-if="String(form.regionalCodes)">已选ID：{{ form.regionalCodes }}</div>
+      </el-form-item>
+
       <el-form-item label="是否上架" prop="isPut">
-        <el-select v-model="form.isPut" placeholder="请选择">
+        <el-select style="width: 100%" v-model="form.isPut" placeholder="请选择">
           <el-option label="上架" :value="1"></el-option>
           <el-option label="下架" :value="0"></el-option>
         </el-select>
@@ -50,6 +62,7 @@
 import ImageUpload from '@/components/ImageUpload'
 import { getClassifyGetAll } from '@/api/commodity'
 import { addHotGoods, editHotGoods } from '@/api/active/active_hot'
+import { getProvinceList, getChildAreaList } from '@/api/address'
 
 export default {
   components: { ImageUpload },
@@ -66,8 +79,36 @@ export default {
         productName: '',
         productImage: '',
         productPrice: '',
-        isPut: 1
+        isPut: 1,
+        regionalCodes: ''
+      },
+      regionProps: {
+        checkStrictly: true,
+        multiple: true,
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node
+          if (level === 0) {
+            resolve([{ id: 0, parentId: 0, name: '全中国', shortName: '全国', longitude: '108.55', latitude: '34.32', level: 1, sort: 1, status: true }])
+          } else if (level === 1) {
+            getProvinceList().then((res) => {
+              resolve(res.data)
+            })
+          } else if (level != 0 && level != 1) {
+            getChildAreaList(value).then((res) => {
+              resolve(
+                res.data.map((item) => {
+                  item.leaf = level === 4
+                  return item
+                })
+              )
+            })
+          }
+        }
       },
+      regionArrDialog: [],
       rules: {
         productId: [{ required: true, message: '请选择商品', trigger: 'blur' }],
         productName: [{ required: true, message: '请输入爆品名称', trigger: 'blur' }],
@@ -88,6 +129,7 @@ export default {
             trigger: 'blur'
           }
         ],
+        regionalCodes: [{ required: true, message: '请选择地址', trigger: 'change' }],
         isPut: [{ required: true, message: '请选择是否上架', trigger: 'change' }]
       }
     }
@@ -110,6 +152,7 @@ export default {
         this.form.productImage = row.productImage
         this.form.productPrice = row.productPrice
         this.form.isPut = row.isPut
+        this.form.regionalCodes = row.regionalCodesSource
         this.dialogTitle = '编辑爆款产品'
       }
       this.hotGoodsAddVisible = true
@@ -160,7 +203,8 @@ export default {
         productName: '',
         productImage: '',
         productPrice: '',
-        isPut: 1
+        isPut: 1,
+        regionalCodes: ''
       }
       this.goodsList = []
     },