Vue下拉列表的內容有後臺傳入前臺處理數據封裝後用mapGetters和mapActions調用

Vue下拉列表的內容有後臺傳入前臺處理數據封裝後用mapGetters和mapActions調用

每一個模塊下都應該有以下文件夾：

配置文件：

//引入了調接口的API
import * as resourceApi from '../api/resourceApi'
const state = {
  resTypeList: [], 
  resNodeList: [], 
  resProfessionList: []
}

const getters = {
  resTypeList: state => state.resTypeList,
  resNodeList: state => state.resNodeList,
  resProfessionList: state => state.resProfessionList
}
const actions = {
  async getResType ({ commit, state }, payload) {
    if (state.resTypeList && state.resTypeList.length > 0) {
      return
    }
    const data = await resourceApi.getResType(payload.professionId, payload.scopeid)
    commit('SET_RES_TYPE', data)
  },
  async getResNode ({ commit, state }, payload) {
    if (state.resNodeList && state.resNodeList.length > 0) {
      return
    }
    const data = await resourceApi.getResNode(payload.professionId)
    commit('SET_RES_NODE', data)
  },
  async getResProfession ({ commit, state }, payload) {
    if (state.resProfessionList && state.resProfessionList.length > 0) {
      return
    }
    const data = await resourceApi.getResProfession()
    commit('SET_RES_PRPFESSION', data)
  }
}
const mutations = {
  SET_RES_TYPE: (state, payload) => state.resTypeList = payload,
  SET_RES_NODE: (state, payload) => state.resNodeList = payload,
  SET_RES_PRPFESSION: (state, payload) => state.resProfessionList = payload
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

API文件

//引入形成級聯選擇器的方法
import * as treeUtil from './treeutil'
import Vue from 'vue'
//類型1：分組選擇器
export function getResType (professionId, scopeid) {
  return Vue.axios.post('接口名', {
    professionId: professionId
  }).then(resp => {
    const newList = [{
      label: '設備資源',
      options: []
    }, {
      label: '軟件資源',
      options: []
    }]
    resp.dataList.forEach(element => {
      if (element.TYPE_ATTR === '0') {
        const data = _.find(newList[0].options, item => item.value === element.SEQID)
        if (data) {
          data.professionIds.push(element.PROFESSION_ID)
        } else {
          newList[0].options.push({ value: element.SEQID, label: element.TYPE_NAME, professionIds: [element.PROFESSION_ID] })
        }
      } if (element.TYPE_ATTR === '1') {
        const data = _.find(newList[1].options, item => item.value === element.SEQID)
        if (data) {
          data.professionIds.push(element.PROFESSION_ID)
        } else {
          newList[1].options.push({ value: element.SEQID, label: element.TYPE_NAME, professionIds: [element.PROFESSION_ID] })
        }
      }
    })
    return newList
  })
}
//類型2：級聯選擇器
export function getResNode (professionId) {
  return Vue.axios.post('接口名', { professionId: professionId }).then(resp => {
    const treeList = treeUtil.toTree(resp.dataList.map(item => { return { value: item.seqid, label: item.name, id: item.seqid, name: item.name, pid: item.pid } }))
    return treeList
  })
}
//類型3：普通選擇器
export function getResProfession (scopeid) {
  return Vue.axios.post('接口名', {}).then(resp => {
    const onelist = []
    resp.dataList.forEach(element => {
      onelist.push({ value: element.SEQID, label: element.PROFESSION_NAME })
    })
    return onelist
  })
}

//treeutil.js
export function toTree (data) {
  const result = []
  if (!Array.isArray(data)) {
    return result
  }
  data.forEach(item => {
    delete item.children
  })
  const map = {}
  data.forEach(item => {
    map[item.id] = item
  })
  data.forEach(item => {
    const parent = map[item.pid]
    if (parent) {
      (parent.children || (parent.children = [])).push(item)
    } else {
      result.push(item)
    }
  })
  return result
}

調取的方法

mounted  ()  {
  this.getResProfession('傳的參數')
  this.getResCompany('傳的參數')
  }
computed:{
  ...mapGetters('上一級的文件名', [
      'resTypeList',
      'resNodeList',
      'resCompanyList'
    ])
  }，
   methods: {
    ...mapActions('上一級的文件名', [
      'getResType',
      'getResNode', 
      'getResCompany'
    ])
  }