zhywpt-web/src/store/tabValue.ts

import { createStore } from 'vuex'

export default createStore<any>({
  state: {
    tabArray: [
      {
        title: '首页', //标题
        name: '0',
        start: false, //是否可删除
        path: 'home', //路径
      },
    ], //默认首页进行展示
    editableTabsValue: {
      index: '0',
      menuIndex: '首页,home',
    }, //默认选中菜单值

  },
  getters: {
    //计算属性
    //判断是否存在tab
    contains(state) {
      return function(value: any) {
        const tabData = value.split(',')
        let itemIndex = state.tabArray.findIndex((item) =>(item.title === tabData[0] && item.path === tabData[1]));
        return itemIndex
      }
     
    },
  },
  actions: {
    //添加tab
    addTab: function (context, value) {
      if (value.type === 1) {
        context.commit('AddTab', value.data)
      } else {
        const tabSign = context.getters.contains(value.data)
        const tabData = value.data.split(',')
        if (tabSign !== -1) {
          //判断标签是否存在,存在则进行跳转
          context.commit('UpdateETV', tabSign + '')
        } else {
          //添加tab
          const coord = context.state.tabArray.length + '';
          const data = {
            title: tabData[0],
            name: coord,
            start: true,
            path: tabData[1],
          }
          sessionStorage.setItem('newTab', JSON.stringify(data))
          context.commit('AddTab', data)
          context.commit('UpdateETV', coord)
        }
      }
    },
    //删除tab
    removeTab: function (context, value) {
      let arr = context.state.tabArray
      arr.splice(value, 1)
      //赋值默认选择最后一项
      context.state.editableTabsValue.index = arr.length - 1 + ''
      const data = {
        arr: arr,
        value: -1,
      }
      context.commit('sort', data)
    },
    //关闭其他
    closeTheOther: function (context, value) {
      const arr = context.state.tabArray.filter((item: any, index: number) => {
        if (value === -1) {
          //关闭全部
          return item.start !== true
        } else {
          return !(item.start === true && index !== value) //关闭其他
        }
      })
      const data = {
        arr: arr,
        value: value,
      }
      context.commit('sort', data)
    },
    //更新ETV
    updateETV: function (context, value) {
      context.commit('UpdateETV', value)
    },
    //更新MI
    updateMI: function (context, value) {
      context.commit('UpdateMI', value)
    },
  },
  mutations: {
    //添加tab
    AddTab(state, value) {
      state.tabArray.push(value)
    },
    //更新ETV
    UpdateETV(state, value) {
      state.editableTabsValue.index = value
    },
    //更新MI
    UpdateMI(state, value) {
      state.editableTabsValue.menuIndex = value
    },
    //排序后重新赋值
    sort(state, data) {
      data.arr.forEach((item: any, index: number) => {
        item.name = index + ''
      })
      state.tabArray.splice(0, state.tabArray.length, ...data.arr)
      //选项赋值
      if (data.value === -1) {
        //删除tab | 删除全部tab
        state.editableTabsValue.index = state.tabArray.length - 1 + ''
      } else {
        state.editableTabsValue.index = '1'
      }
    },
  },
  modules: {},
})