上传

src/components/SSTable/index.vue

@@ -28,7 +28,7 @@
             @end="onDragEnd"
           >
             <template #item="{ element: item }">
-              <el-checkbox :key="item.field" :label="item.field">
+              <el-checkbox :key="item.id" :label="item.id">
                 {{ item.label }}
               </el-checkbox>
             </template>
@@ -48,9 +48,8 @@
 
 <script setup>
 import draggable from 'vuedraggable'
-import { useUserStore } from '@/store/modules/user'
+import * as ClueCacheApi from '@/api/clue/clueCache'
 import { useRoute } from 'vue-router'
-import cache from '@/plugins/cache'
 
 const props = defineProps({
   tableObject: { type: Object, default: () => ({ tableList: [] }) },
@@ -59,7 +58,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:tableObject', 'getList', 'getCheckedColumns'])
 const route = useRoute()
-const { id: userId } = useUserStore().user //取用户ID
 
 const pageNo = ref(props.tableObject?.pageNo || 1)
 
@@ -68,7 +66,7 @@ const pageSize = ref(props.tableObject?.pageSize || 20)
 const ColumnSetting = ref()
 const TableColumnPop = ref()
 // 展示在设置里的所有表格列，由于会排序，所以使用新属性，不直接修改原值
-const allColumns = ref({})
+const allColumns = ref([...props.tableColumns])
 // 已勾选的选项
 const checkedColumns = ref([])
 
@@ -85,67 +83,50 @@ const clickSetting = () => {
   unref(TableColumnPop).TableColumnPop?.delayHide?.()
 }
 
-// 获取所有的表格列，注意如果本地有缓存使用缓存数据，因为用户可能已对表格列排序，并且不依赖网络请求，可更快渲染表头
-function getAllColumns() {
-  // 1. 先获取缓存表头
-  const localData = getColumn('TableColumnAll')[route.name] || []
-  // 2. 如果有缓存的表头，直接使用，并将新增的标题加入，如果没有缓存，那就得用获取到的表头
-  if (localData && localData) {
-    const newColumns = props.tableColumns.filter(
-      (item) => !localData.some((it) => it.field == item.field)
-    )
-    allColumns.value = [...localData, ...newColumns]
-  } else {
-    allColumns.value = [...props.tableColumns]
-  }
-}
-// 获取缓存的表头
-function getColumn(name = 'shitTable') {
-  return cache.local.get(`${name}-${userId}`) || {}
-}
-// 设置表头缓存
-function setColumn(val, name = 'shitTable') {
-  cache.local.set(`${name}-${userId}`, val)
+const routeMap = {
+  CluePool: 1,
+  ClueOrder: 2
 }
+
 // 获取用户已勾选的表头
-function getUserCheckedColumns() {
-  // 1. 先获取缓存
-  const localData = getColumn('shitTable')[route.name]
-  // 2. 如果有缓存，使用缓存表头，否则使用默认的所有表头
-  if (localData && localData.length) {
-    checkedColumns.value = localData
-  } else {
-    checkedColumns.value = allColumns.value.map((it) => it.field)
-  }
-  // 3. 回显到表格中
+async function getUserCheckedColumns() {
+  checkedColumns.value = await ClueCacheApi.getClueCache({
+    settingType: 2,
+    model: routeMap[route.name]
+  })
+  // 回显到表格中
   emitColumns()
 }
 
 // 表格列排序
 function onDragEnd() {
-  const obj = getColumn('TableColumnAll')
-  obj[route.name] = allColumns.value
-  // 1. 设置缓存
-  setColumn(obj, 'TableColumnAll')
-  // 2. 表格回显
+  ClueCacheApi.setClueCache({
+    settingType: 2,
+    model: routeMap[route.name],
+    clueParamId: checkedColumns.value
+  })
+
+  // 表格回显
   emitColumns()
 }
 
 // 勾选确认
 function confirm() {
-  const obj = getColumn()
-  obj[route.name] = checkedColumns.value
-  setColumn(obj, 'shitTable')
+  ClueCacheApi.setClueCache({
+    settingType: 2,
+    model: routeMap[route.name],
+    clueParamId: checkedColumns.value
+  })
+  // usedSchema.value = allColumns.value.filter((it) => checkedColumns.value.includes(it.id))
   emitColumns()
 }
 
 // 将表头数据返回至父组件
 function emitColumns() {
-  const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.field))
+  const arr = allColumns.value.filter((item) => checkedColumns.value.includes(item.id))
   emit('getCheckedColumns', arr)
 }
 
-getAllColumns()
 getUserCheckedColumns()
 
 defineExpose({ getUserCheckedColumns })