地区

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import { getLogin } from "@/api/ajax";
 export default {
   name: "App",
   data() {
@@ -12,8 +13,37 @@ export default {
     };
   },
   created() {
+    this.fn()
   },
   methods:{
+    async fn() {
+        let provinceCityList = []
+        await getLogin('/OrgServer/DictManager/GetAllProvinceCityList', {})
+            .then((res) => {
+                if (res.status === 1) {
+                    res.province_list.forEach(item => {
+                        let obj = {
+                            label: item.name,
+                            value: item.id,
+                            children: []
+                        }
+                        item.city_list.forEach(items=>{
+                            let objs = {
+                                label: items.name,
+                                value: items.id,
+                                leaf: true
+                            }
+                            obj.children.push(objs)
+                        })
+                        provinceCityList.push(obj)
+                    });
+                }
+            })
+            .catch(() => {
+
+            });
+            this.$store.commit('setProviceCity',provinceCityList)
+    }
   },
   mounted(){
   },

src/store/index.js

@@ -9,13 +9,21 @@ import lang from './modules/lang'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-  modules: {
-    app,
-    settings,
-    user,
-    lang
-  },
-  getters
+    state: {
+        $provinceCityList: []
+    },
+    mutations: {
+        setProviceCity(state, data) {
+            state.$provinceCityList = data
+        }
+    },
+    modules: {
+        app,
+        settings,
+        user,
+        lang
+    },
+    getters
 })
 
-export default store
+export default store

src/views/personalCenter/components/Setting.vue

@@ -60,7 +60,7 @@
                     <el-form-item label="所在省市" prop="selectedOptions">
                         <el-cascader
                             size="medium"
-                            :options="provinceAndCityData"
+                            :options="$provinceCityList"
                             v-model="infoForm.selectedOptions"
                             @change="handleCity">
                         </el-cascader>
@@ -227,9 +227,7 @@
 <script>
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
-import {
-  provinceAndCityData
-} from "element-china-area-data";
+import { mapState } from 'vuex';
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { },
@@ -286,7 +284,6 @@ export default {
         }
     };
     return {
-        provinceAndCityData,
         show: false, // 编辑头像flag
         tabsIndex: 0,
         personalInfo: {
@@ -384,7 +381,9 @@ export default {
     }
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapState(['$provinceCityList']),
+  },
   //监控data中数据变化
   watch: {
 

src/views/register.vue

@@ -36,7 +36,7 @@
             <el-form-item label="所在省市" prop="selectedOptions">
                 <el-cascader
                     size="medium"
-                    :options="provinceAndCityData"
+                    :options="$provinceCityList"
                     v-model="registerForm.selectedOptions"
                     @change="handleCity">
                 </el-cascader>
@@ -103,11 +103,9 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header.vue";
 import Upload from "@/components/Upload.vue"
-import {
-  provinceAndCityData
-} from "element-china-area-data";
 import { getLogin } from "@/api/ajax";
 import Cookies from 'js-cookie'
+import { mapState } from 'vuex';
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: { Header, Upload },
@@ -177,7 +175,6 @@ export default {
         }
     };
     return {
-        provinceAndCityData,
         config: this.$route.query.headerConfig?decodeURIComponent(this.$route.query.headerConfig):'',
         userBg: 'rgba(0, 0, 0, 0.24)',
         headerBorder: '#5C5C5C',
@@ -189,7 +186,7 @@ export default {
             name:'',
             realName:'',
             sex:1,
-            selectedOptions:'0204',
+            selectedOptions:[],
             desc:'',
             phone:'',
             email:'',
@@ -209,11 +206,8 @@ export default {
             sex:[
                 { required: true, message: '请选择性别', trigger: 'change' },
             ],
-            // selectedOptions: [
-            //     { type: 'array', required: true, message: '请选择所在省市', trigger: 'change' }
-            // ],
             selectedOptions: [
-                { required: true, message: '请选择所在省市', trigger: 'change' }
+                { type: 'array', required: true, message: '请选择所在省市', trigger: 'change' }
             ],
             phone:[
                 { required: true, validator: validatePhone, trigger: 'blur' }
@@ -245,7 +239,9 @@ export default {
     }
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapState(['$provinceCityList']),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -283,7 +279,7 @@ export default {
                 org_id: form.region,
                 email: form.email,
                 phone: form.phone,
-                city_id: form.selectedOptions,
+                city_id: form.selectedOptions[1],
                 memo: form.desc,
                 password: form.newPwd
             }