优化控制表格列的显示和隐藏组件

src/api/demo/demo/index.ts

@@ -1,13 +1,14 @@
 import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
-import { DemoVO, DemoForm, DemoQuery } from '@/api/demo/demo/types';
+import { DemoVO, DemoForm, DemoPageQuery, DemoCountQuery } from '@/api/demo/demo/types';
 
 /**
  * 查询测试单列表
  * @param query
  * @returns {*}
  */
-export const listDemo = (query?: DemoQuery): AxiosPromise<DemoVO[]> => {
+
+export const listDemo = (query?: DemoPageQuery): AxiosPromise<DemoVO[]> => {
   return request({
     url: '/demo/demo/list',
     method: 'get',
@@ -15,6 +16,19 @@ export const listDemo = (query?: DemoQuery): AxiosPromise<DemoVO[]> => {
   });
 };
 
+/**
+ * 查询测试单数量
+ * @param query
+ * @returns {*}
+ */
+
+export const countDemo = (query?: DemoCountQuery): AxiosPromise<number> => {
+  return request({
+    url: '/demo/demo/count',
+    method: 'get',
+    params: query
+  });
+};
 /**
  * 查询测试单详细
  * @param id

src/api/demo/demo/types.ts

@@ -62,7 +62,7 @@ export interface DemoForm extends BaseEntity {
   value?: string;
 }
 
-export interface DemoQuery extends PageQuery {
+export interface DemoPageQuery extends PageQuery {
   /**
    * 部门id
    */
@@ -87,4 +87,41 @@ export interface DemoQuery extends PageQuery {
    * 值
    */
   value?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
+
+export interface DemoCountQuery {
+  /**
+   * 部门id
+   */
+  deptId?: string | number;
+
+  /**
+   * 用户id
+   */
+  userId?: string | number;
+
+  /**
+   * 排序号
+   */
+  orderNum?: number;
+
+  /**
+   * key键
+   */
+  testKey?: string;
+
+  /**
+   * 值
+   */
+  value?: string;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
 }

src/components/RightToolbar/index.vue

@@ -7,13 +7,23 @@
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
         <el-button circle icon="Refresh" @click="refresh()" />
       </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button circle icon="Menu" @click="showColumn()" />
+      <el-tooltip class="item" effect="dark" content="显示/隐藏列" placement="top" v-if="columns">
+        <el-popover placement="bottom" trigger="click">
+          <div class="tree-header">显示/隐藏列</div>
+          <el-tree
+            ref="columnRef"
+            :data="columns"
+            show-checkbox
+            @check="columnChange"
+            node-key="key"
+            :props="{ label: 'label', children: 'children' }"
+          ></el-tree>
+          <template #reference>
+            <el-button circle icon="Menu" />
+          </template>
+        </el-popover>
       </el-tooltip>
     </el-row>
-    <el-dialog :title="title" v-model="open" append-to-body>
-      <el-transfer :titles="['显示', '隐藏']" v-model="value" :data="columns" @change="dataChange"></el-transfer>
-    </el-dialog>
   </div>
 </template>
 
@@ -29,15 +39,9 @@ const props = defineProps({
     gutter: propTypes.number.def(10),
 })
 
+const columnRef = ref<ElTreeInstance>();
 const emits = defineEmits(['update:showSearch', 'queryTable']);
 
-// 显隐数据
-const value = ref<Array<number>>([]);
-// 弹出层标题
-const title = ref("显示/隐藏");
-// 是否显示弹出层
-const open = ref(false);
-
 const style = computed(() => {
     const ret: any = {};
     if (props.gutter) {
@@ -56,23 +60,19 @@ function refresh() {
     emits("queryTable");
 }
 
-// 右侧列表元素变化
-function dataChange(data: TransferKey[]) {
+// 更改数据列的显示和隐藏
+function columnChange(...args: any[]) {
   props.columns?.forEach((item) => {
-        item.visible = !data.includes(item.key);
+    item.visible = args[1].checkedKeys.includes(item.key);
   })
 }
 
-// 打开显隐列dialog
-const showColumn = () => {
-    open.value = true;
-}
-
 // 显隐列初始默认隐藏列
 onMounted(() => {
     props.columns?.forEach((item) => {
-        if (!item.visible) {
-            value.value.push(item.key);
+        if (item.visible) {
+          columnRef.value?.setChecked(item.key, true, false);
+            // value.value.push(item.key);
         }
     })
 })
@@ -91,4 +91,9 @@ onMounted(() => {
 .my-el-transfer {
   text-align: center;
 }
+.tree-header{
+  width: 100%;
+  line-height: 24px;
+  text-align: center;
+}
 </style>

src/types/global.d.ts

@@ -13,6 +13,7 @@ declare global {
     key: number;
     label: string;
     visible: boolean;
+    children: Array<FieldOption>;
   }
 
   /**

src/views/demo/demo/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="p-2">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div class="mb-[10px]" v-show="showSearch">
-        <el-card shadow="hover">
+      <div class="search" v-show="showSearch">
         <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
           <el-form-item label="部门id" prop="deptId">
             <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable style="width: 240px" @keyup.enter="handleQuery" />
@@ -24,11 +23,10 @@
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
-        </el-card>
       </div>
     </transition>
 
-    <el-card shadow="hover">
+    <el-card shadow="never">
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
@@ -101,8 +99,8 @@
 </template>
 
 <script setup name="Demo" lang="ts">
-import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
-import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
+import { listDemo, getDemo, delDemo, addDemo, updateDemo } from "@/api/demo/demo";
+import { DemoVO, DemoPageQuery, DemoForm } from '@/api/demo/demo/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -131,7 +129,7 @@ const initFormData: DemoForm = {
   testKey: undefined,
   value: undefined,
 }
-const data = reactive<PageData<DemoForm, DemoQuery>>({
+const data = reactive<PageData<DemoForm, DemoPageQuery>>({
   form: {...initFormData},
   queryParams: {
     pageNum: 1,
@@ -141,6 +139,8 @@ const data = reactive<PageData<DemoForm, DemoQuery>>({
     orderNum: undefined,
     testKey: undefined,
     value: undefined,
+    params: {
+    }
   },
   rules: {
     id: [

src/views/system/user/index.vue

@@ -340,13 +340,13 @@ const upload = reactive<ImportOption>({
 })
 // 列显隐信息
 const columns = ref<FieldOption[]>([
-  { key: 0, label: `用户编号`, visible: false },
-  { key: 1, label: `用户名称`, visible: true },
-  { key: 2, label: `用户昵称`, visible: true },
-  { key: 3, label: `部门`, visible: true },
-  { key: 4, label: `手机号码`, visible: true },
-  { key: 5, label: `状态`, visible: true },
-  { key: 6, label: `创建时间`, visible: true }
+  { key: 0, label: `用户编号`, visible: false,children: [] },
+  { key: 1, label: `用户名称`, visible: true,children: [] },
+  { key: 2, label: `用户昵称`, visible: true,children: [] },
+  { key: 3, label: `部门`, visible: true,children: [] },
+  { key: 4, label: `手机号码`, visible: true,children: [] },
+  { key: 5, label: `状态`, visible: true,children: [] },
+  { key: 6, label: `创建时间`, visible: true,children: [] }
 ])
 
 

src/views/tool/gen/index.vue

@@ -193,7 +193,7 @@ const handleGenTable = async (row?: TableVO) => {
     await genCode(row.tableId);
     proxy?.$modal.msgSuccess('成功生成到自定义路径：' + row.genPath);
   } else {
-    proxy?.$download.zip('/tool/gen/batchGenCode?tableIdStr=' + tbIds, 'ruoyi.zip');
+    proxy?.$download.zip('/tool/gen/batchGenCode?tableIdStr=' + tbIds, 'codegen-ruoyi.zip');
   }
 }
 /** 同步数据库操作 */