From 99a6b562335da60795f61b7c29f5414b3bfd3469 Mon Sep 17 00:00:00 2001
From: "DESKTOP-IGCH756\\PC" <921509429@qq.com>
Date: Thu, 28 Sep 2023 14:58:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E4=B8=8E=E9=9A=90=E8=97=8F=E5=B0=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RightToolbar/index.vue | 53 +++++++++++++++------------
 src/types/global.d.ts                 |  1 +
 src/views/system/user/index.vue       | 14 +++----
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 09036b7..0f4219f 100644
--- a/src/components/RightToolbar/index.vue
+++ b/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[]) {
-    props.columns?.forEach((item) => {
-        item.visible = !data.includes(item.key);
-    })
-}
-
-// 打开显隐列dialog
-const showColumn = () => {
-    open.value = true;
+// 更改数据列的显示和隐藏
+function columnChange(...args: any[]) {
+  props.columns?.forEach((item) => {
+    item.visible = args[1].checkedKeys.includes(item.key);
+  })
 }
 
 // 显隐列初始默认隐藏列
 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>
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index b9bc5f4..130f855 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -13,6 +13,7 @@ declare global {
     key: number;
     label: string;
     visible: boolean;
+    children: Array<FieldOption>;
   }
 
   /**
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 9a6d82c..284d941 100644
--- a/src/views/system/user/index.vue
+++ b/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: [] }
 ])