feat: 添加用户列表列配置组件

src/modules/user/components/ListColumnOptions.vue

+<script setup>
+import { useStorage } from '@vueuse/core'
+import { getMemberFieldsList } from '../api'
+
+const props = defineProps({
+  fields: { type: Array, default: () => [] },
+})
+const visible = ref(false)
+
+const fieldsList = ref(props.fields)
+
+const selectedFields = useStorage('userListColumns', props.fields)
+
+onMounted(() => {
+  getMemberFieldsList().then((res) => {
+    const fields = (fieldsList.value = res.data.map((item) => {
+      return { label: item.name, prop: `fields.${item.id}` }
+    }))
+    fieldsList.value = [...props.fields, ...fields]
+  })
+})
+</script>
+
+<template>
+  <el-button @click="visible = true">列配置</el-button>
+  <el-dialog title="表格列配置" v-model="visible">
+    <el-checkbox-group v-model="selectedFields">
+      <el-checkbox v-for="field in fieldsList" :key="field.prop" :label="field.label" :value="field" />
+    </el-checkbox-group>
+  </el-dialog>
+</template>

src/modules/user/views/Index.vue

@@ -5,6 +5,7 @@ import { getMemberList, deleteMember, getMemberConnectionsList, syncMember, clea
 import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
 import type { MemberProp, ConnectionsProp } from '../types'
 import { useUserStore } from '@/stores/user'
+import { useStorage } from '@vueuse/core'
 
 const userStore = useUserStore()
 
@@ -13,6 +14,7 @@ const UploadEventsDialog = defineAsyncComponent(() => import('../components/Uplo
 const UploadUserDialog = defineAsyncComponent(() => import('../components/UploadUserDialog.vue'))
 const ViewProgressDialog = defineAsyncComponent(() => import('../components/ViewProgressDialog.vue'))
 const ViewGenerateEventData = defineAsyncComponent(() => import('@/components/ViewGenerateEventData.vue'))
+const ListColumnOptions = defineAsyncComponent(() => import('../components/ListColumnOptions.vue'))
 
 const router = useRouter()
 
@@ -28,6 +30,22 @@ const getConnectionsList = function () {
   })
 }
 getConnectionsList()
+
+const defaultFields = [
+  { label: '用户ID', prop: 'id' },
+  { label: '姓名', prop: 'name' },
+  { label: '性别', prop: 'gender_name' },
+  { label: '手机号码', prop: 'mobile' },
+  { label: '来源连接', prop: 'connection_name' },
+]
+
+const selectedFields = useStorage('userListColumns', [
+  { label: '用户ID', prop: 'id' },
+  { label: '姓名', prop: 'name' },
+  { label: '性别', prop: 'gender_name' },
+  { label: '手机号码', prop: 'mobile' },
+  { label: '来源连接', prop: 'connection_name' },
+])
 // 列表配置
 const listOptions = computed(() => {
   return {
@@ -60,11 +78,7 @@ const listOptions = computed(() => {
     columns: [
       { type: 'selection' },
       { label: '序号', type: 'index', width: 60 },
-      { label: '用户ID', prop: 'id' },
-      { label: '姓名', prop: 'name' },
-      { label: '性别', prop: 'gender_name' },
-      { label: '手机号码', prop: 'mobile' },
-      { label: '来源连接', prop: 'connection_name' },
+      ...selectedFields.value,
       {
         label: '状态',
         prop: 'status_name',
@@ -286,6 +300,7 @@ const handleClear = async () => {
           <el-space>
             <router-link to="/analyze/user"><el-button type="primary">用户分析</el-button></router-link>
             <el-button type="primary" @click="generateEventVisible = true">用户事件数据</el-button>
+            <ListColumnOptions :fields="defaultFields" />
           </el-space>
         </el-row>
       </template>