修改区域选择添加权限控制

src/api/base/index.js

@@ -8,7 +8,12 @@ export const fetchAreaList = req =>
     method: 'get',
     ...req,
   });
-
+export const fetchAccessAreaList = req =>
+  fetch({
+    url: path + '/dcxy/baseArea/queryAll',
+    method: 'get',
+    ...req,
+  });
 //获取下拉列表
 export const fetchSelectList = req =>
   fetch({

src/components/input/AreaSelect/AreaSelect.vue

@@ -24,6 +24,11 @@ export default {
     value: Number,
   },
   mixins: [areaMixin],
+  computed: {
+    areaList() {
+      return this[`areaList${this.accessType}`];
+    },
+  },
   methods: {
     changeHandle(val) {
       if (val) {

src/components/input/AreaSelect/areaStore.js

-import { fetchAreaList } from '@/api/base/index';
+import { fetchAreaList, fetchAccessAreaList } from '@/api/base/index';
+import typeMapping from './typeMapping';
 
 const GET_AREA_LIST = 'GET_AREA_LIST';
 const FETCH_STATE = 'FETCH_STATE';
+const FETCH_END = 'FETCH_END';
 
-const state = () => ({
-  list: [],
-  fetching: false,
-});
+const state = () => {
+  let areaState = {};
+  typeMapping.map(type => {
+    areaState[`list${type.value}`] = [];
+    areaState[`fetching${type.value}`] = false;
+  });
+  return areaState;
+};
 
-const getters = {
-  areaList: state => state.list,
+const initGetters = () => {
+  let getters = {};
+  typeMapping.map(type => {
+    getters[`areaList${type.value}`] = state => state[`list${type.value}`];
+  });
+  return getters;
 };
+const getters = initGetters();
 
-const actions = {
-  fetchAreaList({ state, commit }) {
-    if (state.fetching) return;
-    commit(FETCH_STATE, true);
-    return fetchAreaList().then(res => {
+const initAction = () => {
+  let actions = {};
+  typeMapping.map(type => {
+    actions[`fetchAreaList${type.value}`] = ({ state, commit }) => {
+      if (state[`fetching${type.value}`]) return;
+      commit(FETCH_STATE, type.value);
+      let fetchHandle = null;
+      if (type.value == 0) {
+        fetchHandle = fetchAreaList;
+      } else {
+        fetchHandle = fetchAccessAreaList;
+      }
+      return fetchHandle().then(res => {
         const list = res.data;
-      commit(GET_AREA_LIST, list);
-      commit(FETCH_STATE, false);
+        commit(GET_AREA_LIST, { type: type.value, list });
+        commit(FETCH_END, type.value);
       });
-  },
+    };
+  });
+  return actions;
 };
+const actions = initAction();
 
 const mutations = {
-  [GET_AREA_LIST](state, list) {
-    state.list = list;
+  [GET_AREA_LIST](state, { type, list }) {
+    state[`list${type}`] = list;
+  },
+  [FETCH_STATE](state, type) {
+    state[`fetching${type}`] = true;
   },
-  [FETCH_STATE](state, fetching) {
-    state.fetching = fetching;
+  [FETCH_END](state, type) {
+    state[`fetching${type}`] = false;
   },
 };
 

src/components/input/AreaSelect/mixin.js

 import { mapGetters, mapActions } from 'vuex';
 import store from './store';
+import typeMapping from './typeMapping';
+
+const getterList = typeMapping.map(type => `areaList${type.value}`);
+const actionsList = typeMapping.map(type => `fetchAreaList${type.value}`);
 
 export default {
+  props: {
+    accessType: {
+      type: Number,
+      default: 1, // 0 全部 1 权限
+    },
+  },
   created() {
     store.install(this.$store);
   },
   mounted() {
-    if (!this.areaList.length) {
-      this.fetchAreaList();
+    if (
+      this[`areaList${this.accessType}`] &&
+      !this[`areaList${this.accessType}`].length
+    ) {
+      this[`fetchAreaList${this.accessType}`]();
     }
+    // if (!this.areaList.length) {
+    //   this.fetchAreaList();
+    // }
   },
   computed: {
-    ...mapGetters('area', ['areaList']),
+    ...mapGetters('area', getterList),
   },
   methods: {
-    ...mapActions('area', ['fetchAreaList']),
+    ...mapActions('area', actionsList),
     getAreaName(id) {
-      let item = this.areaList.find(area => area.id === id);
+      let item = this[`areaList${this.accessType}`].find(
+        area => area.id === id
+      );
       if (item) {
         return item.areaName;
       } else {
@@ -24,7 +42,9 @@ export default {
       }
     },
     getAreaOperatorInfo(id) {
-      let item = this.areaList.find(area => area.id === id);
+      let item = this[`areaList${this.accessType}`].find(
+        area => area.id === id
+      );
       if (item) {
         return {
           rechargeOperateId: item.rechargeOperateId,

src/components/input/AreaSelect/typeMapping.js

+const typeMapping = [{ value: 0, label: '全部' }, { value: 1, label: '权限' }];
+
+export default typeMapping;