广播电台添加地区分类

src/views/music/radio/detail.vue

@@ -10,6 +10,10 @@
             :disabled="disabledJoinType(item.joinType)" />
         </el-select>
       </el-form-item>
+      <el-form-item label="城市筛选：" prop="cascader">
+        <el-cascader v-model="form.cascader" :options="mapOptions" placeholder="请选择省市区"  clearable
+          :props="{ value: 'id', label: 'name', children: 'childList', checkStrictly: true }" style="width: 100%" />
+      </el-form-item>
       <el-form-item v-if="form.platformId !== 4" label="地域分类：" prop="addressClassifyId">
         <el-select v-model="form.addressClassifyId" placeholder="请选择地域分类">
           <el-option v-for="item in addressOptions" :key="item.value" :value="item.value.toString()"
@@ -45,13 +49,14 @@
 
 <script>
 import { submit, detail } from '@/api/music/radio'
-import { platformMixin, addressMixin, contentMixin } from '@/mixin/index'
+import { platformMixin, addressMixin, contentMixin, mapMixin } from '@/mixin/index'
 export default {
-  mixins: [platformMixin, addressMixin, contentMixin],
+  mixins: [platformMixin, addressMixin, contentMixin, mapMixin],
   data() {
     return {
       // 表单
       form: {
+        addressClassifyId: null,
         status: 1
       },
       // 校验
@@ -59,6 +64,9 @@ export default {
         name: [{
           required: true, message: '请输入电台名称', trigger: 'blur'
         }],
+        cascader: [{
+          required: true, message: '请选择省市区', trigger: 'change'
+        }],
         addressClassifyId: [{
           required: true, message: '请选择地域分类', trigger: 'change'
         }],
@@ -96,6 +104,7 @@ export default {
       detail(this.form.id).then(res => {
         if (res.code === 0) {
           this.form = res.data
+          this.form.cascader = [res.data.province, res.data.city, res.data.area]
         }
       })
     },
@@ -107,10 +116,12 @@ export default {
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          let title = this.form.id ? `编辑成功！` : `新增成功！`
+          this.form.province = this.form.cascader[0]
+          this.form.city = this.form.cascader[1]
+          this.form.area = this.form.cascader[2]
           submit(this.form).then(res => {
             if (res.code === 0) {
-              this.$message.success(`${title}`)
+              this.$message.success(`提交成功！`)
               this.cancel()
             }
           })

src/views/music/radio/index.vue

@@ -10,6 +10,10 @@
           <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
+      <el-form-item label="城市筛选：">
+        <el-cascader v-model="form.list" :options="mapOptions" placeholder="请选择省市区" clearable
+          :props="{ value: 'id', label: 'name', children: 'childList', checkStrictly: true }" />
+      </el-form-item>
       <el-form-item label="地域分类：">
         <el-select v-model="form.addressClassifyId" placeholder="请选择地域分类" clearable>
           <el-option v-for="item in addressOptions" :key="item.value" :value="item.value" :label="item.label" />
@@ -46,6 +50,7 @@
           <el-image v-if="scope.row.thumb" :src="scope.row.thumb" />
         </template>
       </el-table-column>
+      <el-table-column label="地区" align="center" :formatter="areaFormatter" />
       <el-table-column label="地域分类" prop="addressClassifyId" align="center" :formatter="addressFormatter" />
       <el-table-column label="广播分类" prop="contentClassifyName" align="center" :formatter="contentFormatter" />
       <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
@@ -70,11 +75,11 @@
 </template>
 
 <script>
-import { platformMixin, onOrOffMixin, addressMixin, contentMixin } from '@/mixin/index'
+import { platformMixin, onOrOffMixin, addressMixin, contentMixin, mapMixin } from '@/mixin/index'
 import { list, change, remove } from '@/api/music/radio'
 import Audio from '@/components/Audio/index.vue'
 export default {
-  mixins: [platformMixin, onOrOffMixin, addressMixin, contentMixin],
+  mixins: [platformMixin, onOrOffMixin, addressMixin, contentMixin, mapMixin],
   components: {
     Audio
   },