提取公共方法

src/views/operation/map/detail.vue

@@ -11,7 +11,7 @@
         <el-input v-model="form.linkPhone" placeholder="请输入联系电话" />
       </el-form-item>
       <el-form-item label="城市筛选：" prop="cascader">
-        <el-cascader style="width: 100%" v-model="form.cascader" :options="options" placeholder="请选择省市区"
+        <el-cascader style="width: 100%" v-model="form.cascader" :options="mapOptions" placeholder="请选择省市区"
           :props="{ value: 'id', label: 'name', children: 'childList', checkStrictly: true }" />
       </el-form-item>
       <el-form-item label="详细地址：" prop="address">
@@ -32,8 +32,10 @@
 </template>
 
 <script>
-import { detail, options, submit } from '@/api/operation/map'
+import { mapMixin } from '@/mixin/index'
+import { detail, submit } from '@/api/operation/map'
 export default {
+  mixins: [ mapMixin ],
   data() {
     return {
       // 表单
@@ -41,8 +43,6 @@ export default {
         icon: '',
         status: 0
       },
-      // 省市区
-      options: [],
       // 校验
       rules: {
         name: [{
@@ -69,7 +69,6 @@ export default {
     }
   },
   mounted() {
-    this.getOptions()
     if (this.$route.query.id) {
       this.getDetail()
       this.disabled = Boolean(this.$route.query.boolean)
@@ -91,15 +90,6 @@ export default {
       this.form.icon = e.file
     },
 
-    // 省市区
-    getOptions() {
-      options().then(res => {
-        if (res.code === 0) {
-          this.options = res.data
-        }
-      })
-    },
-
     cancel() {
       this.$tab.closeOpenPage("/operation/map")
     },

src/views/operation/map/index.vue

@@ -6,7 +6,7 @@
         <el-input v-model="form.name" placeholder="请输入门店名称" clearable />
       </el-form-item>
       <el-form-item label="城市筛选：">
-        <el-cascader v-model="form.list" :options="options" placeholder="请选择省市区" clearable
+        <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="当前状态：">
@@ -59,8 +59,10 @@
 </template>
 
 <script>
-import { list, options, change, remove } from '@/api/operation/map'
+import { mapMixin } from '@/mixin/index'
+import { list, change, remove } from '@/api/operation/map'
 export default {
+  mixins: [mapMixin],
   data() {
     return {
       // 遮罩层
@@ -73,8 +75,6 @@ export default {
       },
       // 总数据
       total: 0,
-      // 省市区
-      options: [],
       // 列表
       tableData: [],
       // 当前状态
@@ -94,8 +94,7 @@ export default {
       this.form.area = val[2]
     }
   },
-  async mounted() {
-    await this.getOptions()
+  mounted() {
     this.getList()
   },
   methods: {
@@ -126,17 +125,6 @@ export default {
       this.getList()
     },
 
-    // 省市区
-    getOptions() {
-      return new Promise((reslove, reject) => {
-        options().then(res => {
-          if (res.code === 0) {
-            reslove(this.options = res.data)
-          }
-        })
-      })
-    },
-
     // 新增、 编辑、 查看
     getDetail(id, boolean) {
       this.$router.push({
@@ -173,16 +161,6 @@ export default {
     },
 
     // 字典翻译
-    areaFormatter(row) {
-      let province = this.options.find(i => i.id == row.province)
-      let provinceName = province.name
-      let city = province.childList.length > 0 ? province.childList.find(i => i.id == row.city) : ''
-      let cityName = city ? `-${city.name}` : ''
-      let area = city && city.childList.length > 0 ? city.childList.find(i => i.id == row.area) : ''
-      let areaName = area ? `-${area.name}` : ''
-      return `${provinceName}${cityName}${areaName}`
-    },
-
     statusFormatter(row) {
       return this.selectDictLabel(this.statusOptions, row.status)
     }