From 5e3cb6d4c27a656da1e2125652abd9b4785bfa02 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 6 Nov 2024 16:57:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90=E5=9B=A2=E9=98=9F=E6=88=90?=
 =?UTF-8?q?=E5=91=98=E3=80=91=E4=BF=AE=E5=A4=8D=E5=85=A8=E9=80=89=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#1558)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../team/component/PermissionSetting.vue      | 107 ++++++++++--------
 1 file changed, 58 insertions(+), 49 deletions(-)

diff --git a/ui/src/views/team/component/PermissionSetting.vue b/ui/src/views/team/component/PermissionSetting.vue
index 8c72f371c70..e5ed8373a48 100644
--- a/ui/src/views/team/component/PermissionSetting.vue
+++ b/ui/src/views/team/component/PermissionSetting.vue
@@ -33,15 +33,15 @@
           <el-checkbox
             :disabled="props.manage"
             v-model="allChecked[TeamEnum.MANAGE]"
+            :indeterminate="allIndeterminate[TeamEnum.MANAGE]"
             label="管理"
-            @change="handleCheckAllChange($event, TeamEnum.MANAGE)"
           />
         </template>
         <template #default="{ row }">
           <el-checkbox
             :disabled="props.manage"
             v-model="row.operate[TeamEnum.MANAGE]"
-            @change="checkedOperateChange(TeamEnum.MANAGE, row)"
+            @change="(e: boolean) => checkedOperateChange(TeamEnum.MANAGE, row, e)"
           />
         </template>
       </el-table-column>
@@ -50,15 +50,15 @@
           <el-checkbox
             :disabled="props.manage"
             v-model="allChecked[TeamEnum.USE]"
+            :indeterminate="allIndeterminate[TeamEnum.USE]"
             label="查看"
-            @change="handleCheckAllChange($event, TeamEnum.USE)"
           />
         </template>
         <template #default="{ row }">
           <el-checkbox
             :disabled="props.manage"
             v-model="row.operate[TeamEnum.USE]"
-            @change="checkedOperateChange(TeamEnum.USE, row)"
+            @change="(e: boolean) => checkedOperateChange(TeamEnum.USE, row, e)"
           />
         </template>
       </el-table-column>
@@ -85,58 +85,67 @@ const isApplication = computed(() => props.type === TeamEnum.APPLICATION)
 
 const emit = defineEmits(['update:data'])
 const allChecked: any = ref({
-  [TeamEnum.MANAGE]: false,
-  [TeamEnum.USE]: false
+  [TeamEnum.MANAGE]: computed({
+    get: () => {
+      return filterData.value.some((item: any) => item.operate[TeamEnum.MANAGE])
+    },
+    set: (val: boolean) => {
+      if (val) {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.MANAGE] = true
+        })
+      } else {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.MANAGE] = false
+        })
+      }
+    }
+  }),
+  [TeamEnum.USE]: computed({
+    get: () => {
+      return filterData.value.some((item: any) => item.operate[TeamEnum.USE])
+    },
+    set: (val: boolean) => {
+      if (val) {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.USE] = true
+        })
+      } else {
+        filterData.value.map((item: any) => {
+          item.operate[TeamEnum.USE] = false
+        })
+      }
+    }
+  })
 })
 
 const filterText = ref('')
 
 const filterData = computed(() => props.data.filter((v: any) => v.name.includes(filterText.value)))
 
-watch(
-  () => props.data,
-  (val) => {
-    Object.keys(allChecked.value).map((item) => {
-      allChecked.value[item] = compare(item)
-    })
-    emit('update:data', val)
-  },
-  {
-    deep: true
-  }
-)
-
-function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
-  if (val) {
-    props.data.map((item: any) => {
-      item.operate[Name] = true
-    })
-  } else {
-    props.data.map((item: any) => {
-      item.operate[Name] = false
-    })
-  }
-}
-function checkedOperateChange(Name: string | number, row: any) {
-  if (Name === TeamEnum.MANAGE && row.operate[TeamEnum.MANAGE]) {
-    props.data.map((item: any) => {
-      if (item.id === row.id) {
-        item.operate[TeamEnum.USE] = true
-      }
-    })
-  }
-  allChecked.value[Name] = compare(Name)
-}
-
-function compare(attrs: string | number) {
-  const filterData = props.data.filter((item: any) => item?.operate[attrs])
-  return props.data.length > 0 && filterData.length === props.data.length
-}
-
-onMounted(() => {
-  Object.keys(allChecked.value).map((item) => {
-    allChecked.value[item] = compare(item)
+const allIndeterminate: any = ref({
+  [TeamEnum.MANAGE]: computed(() => {
+    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.MANAGE])
+    if (all_not_checked) {
+      return false
+    }
+    return !filterData.value.every((item: any) => item.operate[TeamEnum.MANAGE])
+  }),
+  [TeamEnum.USE]: computed(() => {
+    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.USE])
+    if (all_not_checked) {
+      return false
+    }
+    return !filterData.value.every((item: any) => item.operate[TeamEnum.USE])
   })
 })
+
+function checkedOperateChange(Name: string | number, row: any, e: boolean) {
+  props.data.map((item: any) => {
+    if (item.id === row.id) {
+      item.operate[Name] = e
+    }
+  })
+}
 </script>
 <style lang="scss" scope></style>