线索

src/components/Search/src/Search.vue

@@ -7,6 +7,13 @@ import { findIndex } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 import { FormSchema } from '@/types/form'
 
+import { useUserStore } from '@/store/modules/user'
+import { useRoute } from 'vue-router'
+import cache from '@/plugins/cache'
+
+const route = useRoute()
+const { id: userId } = useUserStore().user //取用户ID
+
 const { t } = useI18n()
 
 const props = defineProps({
@@ -43,8 +50,16 @@ const emit = defineEmits(['search', 'reset'])
 
 const visible = ref(true)
 
+const SchemaSetting = ref()
+const SettingPop = ref()
+
+const checkedSchema = ref([])
+
+// 用户使用的查询条件
+const usedSchema = ref([])
+
 const newSchema = computed(() => {
-  let schema: FormSchema[] = cloneDeep(props.schema)
+  let schema: FormSchema[] = cloneDeep(usedSchema.value)
   if (props.expand && props.expandField && !unref(visible)) {
     const index = findIndex(schema, (v: FormSchema) => v.field === props.expandField)
     if (index > -1) {
@@ -65,6 +80,43 @@ const newSchema = computed(() => {
   return schema
 })
 
+function initSearch() {
+  reset()
+  // 1. 先获取缓存
+  const localData = getColumn('Schema')[route.name]
+  // 2. 如果有缓存，使用缓存表头，否则使用默认的所有表头
+  if (localData && localData.length) {
+    usedSchema.value = localData
+  } else {
+    const obj = getColumn('Schema')
+    obj[route.name] = [props.schema[0]]
+    setSchema(obj)
+    usedSchema.value = [props.schema[0]]
+  }
+  checkedSchema.value = usedSchema.value.map((it) => it.field)
+}
+
+function changeSearch() {
+  const obj = getColumn('Schema')
+  obj[route.name] = props.schema.filter((item) => checkedSchema.value.includes(item.field))
+  setSchema(obj)
+  initSearch()
+}
+
+// 获取缓存的查询条件
+function getColumn(name = 'Schema') {
+  return cache.local.get(`${name}-${userId}`) || {}
+}
+
+// 设置查询条件缓存
+function setSchema(val: Array<Object>, name = 'Schema') {
+  cache.local.set(`${name}-${userId}`, val)
+}
+
+function setSearch() {
+  unref(SettingPop).SettingPop?.delayHide?.()
+}
+
 const { register, elFormRef, methods } = useForm({
   model: props.model || {}
 })
@@ -96,6 +148,8 @@ const setVisible = () => {
   unref(elFormRef)?.resetFields()
   visible.value = !unref(visible)
 }
+
+initSearch()
 </script>
 
 <template>
@@ -114,6 +168,25 @@ const setVisible = () => {
   >
     <template #action>
       <div v-if="layout === 'inline'">
+        <ElButton ref="SchemaSetting" @click="setSearch">
+          <Icon class="mr-5px" icon="ep:setting" />
+          查询设置
+        </ElButton>
+        <el-popover
+          ref="SettingPop"
+          :virtual-ref="SchemaSetting"
+          placement="bottom"
+          width="120px"
+          trigger="click"
+          virtual-triggering
+        >
+          <el-checkbox-group v-model="checkedSchema" @change="changeSearch">
+            <el-checkbox v-for="item in schema" :key="item.field" :label="item.field">
+              {{ item.label }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-popover>
+
         <!-- update by 芋艿：去除搜索的 type="primary"，颜色变淡一点 -->
         <ElButton v-if="showSearch" @click="search">
           <Icon class="mr-5px" icon="ep:search" />