添加根据区域筛选服务组件

src/api/base/index.js

@@ -35,6 +35,13 @@ export const fetchServiceList = req =>
     method: 'get',
     ...req,
   });
+// 根据区域获取服务
+export const fetchAreaService = req =>
+  fetch({
+    url: path + '/dcxy/api/base/service/together/relation',
+    method: 'get',
+    ...req,
+  });
 // 获取运营商
 export const fetchOperatorList = req =>
   fetch({

src/components/input/AreaServiceSelect/AreaServiceSelect.vue

+<template>
+  <el-select
+    :clearable="clearable"
+    :disabled="disabled"
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in areaServiceList"
+      :disabled="disabledValue(item.serviceId)"
+      :key="index"
+      :value="item.serviceId"
+      :label="item.serviceName"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import areaServiceMixin from './mixin.js';
+
+export default {
+  name: 'area-service-select',
+  props: {
+    value: {
+      type: Number,
+      default: null,
+    },
+    disabled: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    filterList: {
+      type: Array,
+    },
+  },
+  mixins: [areaServiceMixin],
+  methods: {
+    changeHandle(val) {
+      if (val || val === 0) {
+        this.$emit('input', val);
+      } else {
+        this.$emit('input', null);
+      }
+    },
+    disabledValue(val) {
+      if (this.filterList && this.filterList.length) {
+        return this.filterList.indexOf(val) > -1;
+      }
+      return false;
+    },
+  },
+};
+</script>
+

src/components/input/AreaServiceSelect/areaServiceStore.js

+import { fetchAreaService } from '@/api/base/index';
+
+const AREA_SERVICE_LIST = 'AREA_SERVICE_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+const UPDATE_FILTER_ID = 'UPDATE_FILTER_ID';
+
+const state = () => ({
+  list: [],
+  filterId: undefined,
+  fetching: false,
+});
+
+const getters = {
+  areaServiceList: state =>
+    state.list.filter(item =>
+      state.filterId
+        ? item.areaId === state.filterId &&
+          item.serviceId !== 0 &&
+          item.serviceId !== 1
+        : true
+    ),
+};
+
+const actions = {
+  fetchAreaServiceList({ state, commit }, entity) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchAreaService({
+      params: entity,
+    })
+      .then(res => {
+        const { data } = res;
+        commit(AREA_SERVICE_LIST, data);
+        commit(FETCH_STATE, false);
+      })
+      .catch(err => {
+        commit(FETCH_STATE, false);
+      });
+  },
+  updateFilterId({ commit }, id) {
+    commit(UPDATE_FILTER_ID, id);
+  },
+};
+
+const mutations = {
+  [AREA_SERVICE_LIST](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, value) {
+    state.fetching = value;
+  },
+  [UPDATE_FILTER_ID](state, id) {
+    state.filterId = id;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/AreaServiceSelect/index.js

+import AreaServiceSelect from './AreaServiceSelect.vue';
+import areaServiceMixin from './mixin';
+
+export { areaServiceMixin };
+export default AreaServiceSelect;

src/components/input/AreaServiceSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  props: {
+    // 所属区域
+    areaId: {
+      type: Number,
+      default: null,
+    },
+  },
+  created() {
+    store.install(this.$store);
+    if (!this.areaServiceList.length) {
+      this.fetchAreaServiceList({
+        areaId: this.areaId,
+      });
+    }
+  },
+  computed: {
+    ...mapGetters('areaServiceOption', ['areaServiceList']),
+  },
+  watch: {
+    areaId(val) {
+      this.updateFilterId(val);
+    },
+  },
+  methods: {
+    ...mapActions('areaServiceOption', [
+      'fetchAreaServiceList',
+      'updateFilterId',
+    ]),
+    getServiceName(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? item.serviceName : '';
+    },
+    getServiceInfo() {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item
+        ? { serviceId: item.serviceId, serviceName: item.serviceName }
+        : null;
+    },
+    getOperatorInfo(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item
+        ? { operateId: item.operateId, operateName: item.operateName }
+        : null;
+    },
+    getAreaInfo() {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? { areaId: item.areaId, areaName: item.areaName } : null;
+    },
+    getAllItemInfo(id) {
+      let item = this.areaServiceList.find(service => service.serviceId === id);
+      return item ? item : null;
+    },
+  },
+};

src/components/input/AreaServiceSelect/store.js

+import areaServiceStore from './areaServiceStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.areaServiceOption) {
+      store.registerModule(['base', 'areaServiceOption'], areaServiceStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'areaServiceOption']);
+  },
+};

src/containers/HomePage/Demo.vue

@@ -5,17 +5,32 @@
         <operator-select
           :accessType="1"
           :value="filters.operateId"
-          @input="val => updateFilters({operateId: val,areaId:[]})"
+          @input="val => updateFilters({operateId: val,areaIdArr:[]})"
         />
       </search-item>
-      <search-item label="区域">
+      <!-- <search-item label="区域">
         <dashboard-area-select
           :operateId="filters.operateId"
-          :value="filters.areaId"
+          :value="filters.areaIdArr"
           multiple
+          @input="val => updateFilters({areaIdArr: val})"
+        />
+      </search-item> -->
+      <search-item label="区域">
+        <area-select
+          :value="filters.areaId"
           @input="val => updateFilters({areaId: val})"
         />
       </search-item>
+
+      <search-item label="服务">
+        <area-service-select
+          :areaId="filters.areaId"
+          :filterList="[3]"
+          :value="filters.service"
+          @input="val => updateFilters({service: val})"
+        />
+      </search-item>
     </template>
   </list-layout>
 </template>
@@ -26,7 +41,9 @@ export default {
     return {
       filters: {
         operateId: undefined,
-        areaId: [],
+        areaIdArr: [],
+        areaId: undefined,
+        service: undefined,
       },
     };
   },

src/lib/mixins.js

@@ -12,6 +12,7 @@ import BaseData from '../components/input/BaseDataSelect/mixin';
 import BeanType from '../components/input/BeanTypeSelect/mixin';
 import OperatorOptions from '../components/input/OperatorSelect/mixin';
 import ServiceType from '../components/input/ServiceTypeSelect/mixin';
+import AreaService from '../components/input/AreaServiceSelect/mixin';
 import SearchBar from '../mixins/searchBar';
 
 export default {
@@ -33,5 +34,6 @@ export default {
     BeanType,
     OperatorOptions,
     ServiceType,
+    AreaService,
   },
 };

src/utils/extends.js

@@ -23,6 +23,7 @@ import BaseDataSelect from '../components/input/BaseDataSelect/index';
 import OperatorSelect from '../components/input/OperatorSelect/index';
 import BeansSelect from '../components/input/BeanTypeSelect/index';
 import ImageUploader from '../components/input/ImageUploader/index';
+import AreaServiceSelect from '../components/input/AreaServiceSelect/index';
 
 const extendVue = Vue => {
   Vue.use(rymUi);
@@ -48,6 +49,7 @@ const extendVue = Vue => {
   Vue.component(OperatorSelect.name, OperatorSelect);
   Vue.component(BeansSelect.name, BeansSelect);
   Vue.component(ImageUploader.name, ImageUploader);
+  Vue.component(AreaServiceSelect.name, AreaServiceSelect);
 };
 
 export default extendVue;