Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

tabValue.ts 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import { createStore } from 'vuex'
  2. export default createStore<any>({
  3. state: {
  4. tabArray: [
  5. {
  6. title: '首页', //标题
  7. name: '0',
  8. start: false, //是否可删除
  9. path: 'home', //路径
  10. },
  11. ], //默认首页进行展示
  12. editableTabsValue: {
  13. index: '0',
  14. menuIndex: '首页,home',
  15. }, //默认选中菜单值
  16. },
  17. getters: {
  18. //计算属性
  19. //判断是否存在tab
  20. contains(state) {
  21. return function(value: any) {
  22. const tabData = value.split(',')
  23. let itemIndex = state.tabArray.findIndex((item) =>(item.title === tabData[0] && item.path === tabData[1]));
  24. return itemIndex
  25. }
  26. },
  27. },
  28. actions: {
  29. //添加tab
  30. addTab: function (context, value) {
  31. if (value.type === 1) {
  32. context.commit('AddTab', value.data)
  33. } else {
  34. const tabSign = context.getters.contains(value.data)
  35. const tabData = value.data.split(',')
  36. if (tabSign !== -1) {
  37. //判断标签是否存在,存在则进行跳转
  38. context.commit('UpdateETV', tabSign + '')
  39. } else {
  40. //添加tab
  41. const coord = context.state.tabArray.length + '';
  42. const data = {
  43. title: tabData[0],
  44. name: coord,
  45. start: true,
  46. path: tabData[1],
  47. }
  48. sessionStorage.setItem('newTab', JSON.stringify(data))
  49. context.commit('AddTab', data)
  50. context.commit('UpdateETV', coord)
  51. }
  52. }
  53. },
  54. //删除tab
  55. removeTab: function (context, value) {
  56. let arr = context.state.tabArray
  57. arr.splice(value, 1)
  58. //赋值默认选择最后一项
  59. context.state.editableTabsValue.index = arr.length - 1 + ''
  60. const data = {
  61. arr: arr,
  62. value: -1,
  63. }
  64. context.commit('sort', data)
  65. },
  66. //关闭其他
  67. closeTheOther: function (context, value) {
  68. const arr = context.state.tabArray.filter((item: any, index: number) => {
  69. if (value === -1) {
  70. //关闭全部
  71. return item.start !== true
  72. } else {
  73. return !(item.start === true && index !== value) //关闭其他
  74. }
  75. })
  76. const data = {
  77. arr: arr,
  78. value: value,
  79. }
  80. context.commit('sort', data)
  81. },
  82. //更新ETV
  83. updateETV: function (context, value) {
  84. context.commit('UpdateETV', value)
  85. },
  86. //更新MI
  87. updateMI: function (context, value) {
  88. context.commit('UpdateMI', value)
  89. },
  90. },
  91. mutations: {
  92. //添加tab
  93. AddTab(state, value) {
  94. state.tabArray.push(value)
  95. },
  96. //更新ETV
  97. UpdateETV(state, value) {
  98. state.editableTabsValue.index = value
  99. },
  100. //更新MI
  101. UpdateMI(state, value) {
  102. state.editableTabsValue.menuIndex = value
  103. },
  104. //排序后重新赋值
  105. sort(state, data) {
  106. data.arr.forEach((item: any, index: number) => {
  107. item.name = index + ''
  108. })
  109. state.tabArray.splice(0, state.tabArray.length, ...data.arr)
  110. //选项赋值
  111. if (data.value === -1) {
  112. //删除tab | 删除全部tab
  113. state.editableTabsValue.index = state.tabArray.length - 1 + ''
  114. } else {
  115. state.editableTabsValue.index = '1'
  116. }
  117. },
  118. },
  119. modules: {},
  120. })