代码上传

src/components/layout/modules/historyTabs.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="sw-tabs">
-    <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card"  @edit="onEdit" @change="onChange" :tabBarStyle="{margin:'0px 0px 0px -1px',borderBottom:'none'}">
-      <a-tab-pane v-for="pane in historyRoutes" :key="pane.meta.name" :tab="pane.meta.title" closable>
+    <a-tabs v-model:activeKey="activeKey" size="small" hide-add type="card" :tabBarGutter="0"  @edit="onEdit" @change="onChange" :tabBarStyle="{margin:'0px 0px 0px -1px',border:'none'}">
+      <a-tab-pane v-for="pane in historyRoutes" :key="pane.name" closable>
+        <template #tab>
+          <span class="sw-active">{{pane.meta.title}}&emsp;
+          <close-circle-outlined @click.stop="onEdit(pane)"/></span>
+        </template>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
-
 <script setup>
+import { CloseCircleOutlined } from '@ant-design/icons-vue';
+
 import {ref,watch} from 'vue'
 import { useRouteTabsStore } from '@/stores/modules/Htabs'
 import { useAuthStore } from '@/stores/modules/auth'
@@ -18,29 +23,40 @@ const router = useRouter()
 const store = useAuthStore()
 
 const rotTabs = useRouteTabsStore()
-let {historyRoutes} = storeToRefs(rotTabs)
+let {historyRoutes,activeKey} = storeToRefs(rotTabs)
 
 const panes = ref([])
-const activeKey = ref(0)
 const onEdit = (val)=>{
-  let currentRoute = router.currentRoute.value.meta.name
-  rotTabs.delRoute(val,currentRoute)
+  let currentRoute = router.currentRoute.value.name
+  rotTabs.delRoute(val.name,currentRoute)
 }
 const onChange = (val)=>{
   activeKey.value = val
-  
-  router.push({name:val})
+  let path = historyRoutes.value.filter(element => element.name == val)
+  router.push({name:path[0].name,query:path[0].query,meta:{keepAlive:false}})
 }
-watch(() => router.currentRoute.value,(to, from) => {
-  console.log(to.meta.name)
+router.beforeEach((to,from,next)=>{
+  let rs = historyRoutes.value.some(item=>item.name == from.name)
+ 
   rotTabs.saveRoute(to)
   store.appData(to.meta.name)
-  activeKey.value = to.meta.name
+  activeKey.value = to.name
+  next()
 })
 </script>
+<style>
+.ant-tabs-tab-active{
+  background: #143B88 !important;
+  color:#fff !important;
+}
+.ant-tabs-tab-active .sw-active{
+  color:#fff
+}
+</style>
 <style scoped>
 .sw-tabs{
   /* height: 56px; */
-  background: #E4E7EB;
+  padding: 0 1px;
+  background: #fafafa;
 }
 </style>

src/stores/modules/Htabs.js

@@ -7,16 +7,27 @@ import router from "@/router/index";
 export const useRouteTabsStore = defineStore('routeTabs', {
   state: () => {
     return {
-      historyRoutes: []
+      historyRoutes: [],
+      activeKey:0,
     }
   },
+  // 开启数据缓存
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: localStorage,
+        paths: ['historyRoutes','activeKey']
+      }
+    ]
+  },
   getters:{},
   actions:{
       // 存储路由记录
     saveRoute (route) {
-      let hasRoute = this.historyRoutes.some(e=>e.name == route.meta.name)
+      let hasRoute = this.historyRoutes.some(e=>e.name == route.name)
       if (!hasRoute)
-      this.historyRoutes.push(route)
+        return this.historyRoutes.push(route)
     },
 
     // 删除路由
@@ -24,18 +35,16 @@ export const useRouteTabsStore = defineStore('routeTabs', {
       let routes = router.options.routes[1].children
       routes.forEach(e=>{
         if (e.name == route) {
-          e.meta.keepAlive = false
-          e.meta.name = e.name
+          e.keepAlive = false
         }
       })
       this.historyRoutes = this.historyRoutes.filter(e=>{
-          if (e.meta.name !== route) {
+          if (e.name !== route) {
               return e
           }
       })
-      if(route === currentRoute) {
-          console.log(this.historyRoutes)
-          if (this.historyRoutes[0])
+      if(route == currentRoute) {
+          if (this.historyRoutes.length > 0)
             return router.replace({name:this.historyRoutes[0].meta.name})
       }
     },

src/stores/modules/columns.js

@@ -0,0 +1,118 @@
+import { defineStore } from 'pinia'
+import utils from '@/utils/utils'
+
+import Api from '@/api/api'
+
+import router from "@/router/index";
+// 第一个参数是应用程序中 store 的唯一 id
+export const useColumnsStore = defineStore('columnStore', {
+  state: () => {
+    return {
+      colIndex:[],
+      tableConfigs:{},
+      checkedColumns:[],
+      columnsIndex:[],
+      selectedColumns:[],
+      time:null
+    }
+  },
+  // 开启数据缓存
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        storage: localStorage,
+        paths: []
+      }
+    ]
+  },
+  getters:{},
+  actions:{
+    /**
+     * 获取配置数据
+     * @param columnsIndex 列索配置
+     * @param checkedColumns 选择配置
+     * @param tableName 表名称
+     * @param app 应用名称
+     */
+    configToJson ({columnsIndex,checkedColumns,tableName,app}) {
+      this.tableConfigs[`${app.systemappid}${tableName}`] = {
+        index:columnsIndex,
+        selected:checkedColumns
+      }
+      this.setColnums({columnsIndex,checkedColumns,tableName,app})
+      if (this.time !== null) {
+        clearTimeout(this.time)
+      }
+      this.time = setTimeout(() => {
+        this.saveConfig(JSON.stringify(this.tableConfigs))
+      }, 2000);
+
+      sessionStorage.setItem('customConfig',JSON.stringify(this.tableConfigs))
+    },
+    /**
+     * 根据获取到的排序重新排列表格列
+     * @param a 目标数组
+     * @param b 索引数组
+     */
+    sortTableColnums (ky,columnsData) {
+      let customConfig = sessionStorage.getItem('customConfig')
+      if (customConfig && customConfig[ky]) {
+        customConfig = JSON.parse(customConfig)
+        let a = columnsData
+        let b = []
+        b = customConfig[ky].index
+        const sortedA = b.map((key) => a.find((item) => item.value === key));
+        return sortedA
+      } else {
+        return 'none'
+      }
+    },
+     /**
+     * 处理系统系统配置项
+     */
+    async saveConfig (config) {
+      const res = await Api.requested({
+        "classname": "sysmanage.develop.users.users",
+        "method": "updateClientConfig",
+        "content": {
+          "config": config
+        }
+      })
+    },
+    /**
+     * 获取系统配置
+     */
+    async setConfig ({tableName,app,fn}) {    
+      let parsedData = sessionStorage.getItem('customConfig')
+      if (parsedData) {
+        this.tableConfigs = JSON.parse(parsedData)
+        if (this.tableConfigs[`${app.systemappid}${tableName}`]) {
+          this.columnsIndex =  this.tableConfigs[`${app.systemappid}${tableName}`].index
+          let a = utils.TBLayout(tableName)
+          let b = this.tableConfigs[`${app.systemappid}${tableName}`].selected
+          b = this.columnsIndex.filter(e=>b.includes(e))
+          this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
+        } else {
+          this.columnsIndex = utils.TBLayout(tableName).map(e=>e.dataIndex)
+          fn()
+        }
+      } else {
+        this.columnsIndex = utils.TBLayout(tableName).map(e=>e.dataIndex)
+        fn()
+      }
+      
+    },
+    /**
+     * 设置配置的列数据
+     */
+
+    setColnums (param) {
+      let a = utils.TBLayout(param.tableName)
+      let b = param.checkedColumns
+      b = this.columnsIndex.filter(e=>b.includes(e))
+      this.selectedColumns = b.map((key) => a.find((obj) => obj.dataIndex === key));
+    }
+  }
+    
+})