From f2a0f694655c5b58b7f9fd002493bdaa393ae6ff Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期一, 21 四月 2025 15:29:14 +0800
Subject: [PATCH] 显隐列组件支持全选/全不选

---
 src/components/RightToolbar/index.vue |   67 ++++++++++++++++++++++-----------
 1 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 8820acb..e5dae99 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -13,9 +13,14 @@
           <el-button circle icon="Menu" />
           <template #dropdown>
             <el-dropdown-menu>
+              <!-- 鍏ㄩ��/鍙嶉�� 鎸夐挳 -->
+              <el-dropdown-item>
+                <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 鍒楀睍绀� </el-checkbox>
+              </el-dropdown-item>
+              <div class="check-line"></div>
               <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-checkbox v-model="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
@@ -39,83 +44,95 @@
   /* 鏄惁鏄剧ず妫�绱㈡潯浠� */
   showSearch: {
     type: Boolean,
-    default: true,
+    default: true
   },
   /* 鏄鹃殣鍒椾俊鎭� */
   columns: {
-    type: Array,
+    type: Array
   },
   /* 鏄惁鏄剧ず妫�绱㈠浘鏍� */
   search: {
     type: Boolean,
-    default: true,
+    default: true
   },
   /* 鏄鹃殣鍒楃被鍨嬶紙transfer绌挎妗嗐�乧heckbox澶嶉�夋锛� */
   showColumnsType: {
     type: String,
-    default: "checkbox",
+    default: "checkbox"
   },
   /* 鍙冲杈硅窛 */
   gutter: {
     type: Number,
-    default: 10,
+    default: 10
   },
 })
 
-const emits = defineEmits(['update:showSearch', 'queryTable']);
+const emits = defineEmits(['update:showSearch', 'queryTable'])
 
 // 鏄鹃殣鏁版嵁
-const value = ref([]);
+const value = ref([])
 // 寮瑰嚭灞傛爣棰�
-const title = ref("鏄剧ず/闅愯棌");
+const title = ref("鏄剧ず/闅愯棌")
 // 鏄惁鏄剧ず寮瑰嚭灞�
-const open = ref(false);
+const open = ref(false)
 
 const style = computed(() => {
-  const ret = {};
+  const ret = {}
   if (props.gutter) {
-    ret.marginRight = `${props.gutter / 2}px`;
+    ret.marginRight = `${props.gutter / 2}px`
   }
-  return ret;
-});
+  return ret
+})
+
+// 鏄惁鍏ㄩ��/鍗婇�� 鐘舵��
+const isChecked = computed({
+  get: () => props.columns.every(col => col.visible),
+  set: () => {}
+})
+const isIndeterminate = computed(() => props.columns.some((col) => col.visible) && !isChecked.value)
 
 // 鎼滅储
 function toggleSearch() {
-  emits("update:showSearch", !props.showSearch);
+  emits("update:showSearch", !props.showSearch)
 }
 
 // 鍒锋柊
 function refresh() {
-  emits("queryTable");
+  emits("queryTable")
 }
 
 // 鍙充晶鍒楄〃鍏冪礌鍙樺寲
 function dataChange(data) {
   for (let item in props.columns) {
-    const key = props.columns[item].key;
-    props.columns[item].visible = !data.includes(key);
+    const key = props.columns[item].key
+    props.columns[item].visible = !data.includes(key)
   }
 }
 
 // 鎵撳紑鏄鹃殣鍒梔ialog
 function showColumn() {
-  open.value = true;
+  open.value = true
 }
 
 if (props.showColumnsType == 'transfer') {
   // 鏄鹃殣鍒楀垵濮嬮粯璁ら殣钘忓垪
   for (let item in props.columns) {
     if (props.columns[item].visible === false) {
-      value.value.push(parseInt(item));
+      value.value.push(parseInt(item))
     }
   }
 }
 
-// 鍕鹃��
+// 鍗曞嬀閫�
 function checkboxChange(event, label) {
-  props.columns.filter(item => item.label == label)[0].visible = event;
+  props.columns.filter(item => item.label == label)[0].visible = event
 }
 
+// 鍒囨崲鍏ㄩ��/鍙嶉��
+function toggleCheckAll() {
+  const newValue = !isChecked.value
+  props.columns.forEach((col) => (col.visible = newValue))
+}
 </script>
 
 <style lang='scss' scoped>
@@ -131,4 +148,10 @@
   line-height: 30px;
   padding: 0 17px;
 }
+.check-line {
+  width: 90%;
+  height: 1px;
+  background-color: #ccc;
+  margin: 3px auto;
+}
 </style>

--
Gitblit v1.9.3