From 15b2acbcd5b4fdd26ba596425883c01ce5502e09 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Fri, 1 Dec 2023 12:02:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E9=9A=90=E5=88=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=A4=8D=E9=80=89=E6=A1=86=E5=BC=B9=E5=87=BA?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RightToolbar/index.vue | 47 ++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 9fd0bb0..9c453f2 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -8,7 +8,19 @@
         <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-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+          <el-button size="mini" circle icon="Menu" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <template v-for="item in columns" :key="item.key">
+                <el-dropdown-item>
+                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </el-tooltip>
     </el-row>
     <el-dialog :title="title" v-model="open" append-to-body>
@@ -24,17 +36,26 @@
 
 <script setup>
 const props = defineProps({
+  /* 是否显示检索条件 */
   showSearch: {
     type: Boolean,
     default: true,
   },
+  /* 显隐列信息 */
   columns: {
     type: Array,
   },
+  /* 是否显示检索图标 */
   search: {
     type: Boolean,
     default: true,
   },
+  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+  showColumnsType: {
+    type: String,
+    default: "checkbox",
+  },
+  /* 右外边距 */
   gutter: {
     type: Number,
     default: 10,
@@ -81,12 +102,20 @@ function showColumn() {
   open.value = true;
 }
 
-// 显隐列初始默认隐藏列
-for (let item in props.columns) {
-  if (props.columns[item].visible === false) {
-    value.value.push(parseInt(item));
+if (props.showColumnsType == 'transfer') {
+  // 显隐列初始默认隐藏列
+  for (let item in props.columns) {
+    if (props.columns[item].visible === false) {
+      value.value.push(parseInt(item));
+    }
   }
 }
+
+// 勾选
+function checkboxChange(event, label) {
+  props.columns.filter(item => item.label == label)[0].visible = event;
+}
+
 </script>
 
 <style lang='scss' scoped>
@@ -98,8 +127,8 @@ for (let item in props.columns) {
 :deep(.el-transfer__button:first-child) {
   margin-bottom: 10px;
 }
-
-.my-el-transfer {
-  text-align: center;
+:deep(.el-dropdown-menu__item) {
+  line-height: 30px;
+  padding: 0 17px;
 }
-</style>
\ No newline at end of file
+</style>