Эх сурвалжийг харах

修复表格全选逻辑漏洞

yujinwen 2 сар өмнө
parent
commit
39b1a2ba77

+ 1 - 1
package.json

@@ -21,7 +21,7 @@
     "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "tdesign-icons-vue-next": "^0.2.2",
-    "tdesign-vue-next": "^1.10.5",
+    "tdesign-vue-next": "^1.10.6",
     "vue": "^3.5.13",
     "vue-router": "^4.3.2"
   },

+ 9 - 8
pnpm-lock.yaml

@@ -35,8 +35,8 @@ dependencies:
     specifier: ^0.2.2
     version: 0.2.2(vue@3.5.13)
   tdesign-vue-next:
-    specifier: ^1.10.5
-    version: 1.10.5(vue@3.5.13)
+    specifier: ^1.10.6
+    version: 1.10.6(vue@3.5.13)
   vue:
     specifier: ^3.5.13
     version: 3.5.13
@@ -1011,7 +1011,7 @@ packages:
   /@vueuse/shared@10.11.0(vue@3.5.13):
     resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.13)
+      vue-demi: 0.14.8(vue@3.5.13)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -1181,8 +1181,8 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /bare-events@2.5.0:
-    resolution: {integrity: sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==}
+  /bare-events@2.5.3:
+    resolution: {integrity: sha512-pCO3aoRJ0MBiRMu8B7vUga0qL3L7gO1+SW7ku6qlSsMLwuhaawnuvZDyzJY/kyC63Un0XAB0OPUcfF1eTO/V+Q==}
     requiresBuild: true
     dev: true
     optional: true
@@ -3281,7 +3281,7 @@ packages:
       queue-tick: 1.0.1
       text-decoder: 1.2.1
     optionalDependencies:
-      bare-events: 2.5.0
+      bare-events: 2.5.3
     dev: true
 
   /strict-uri-encode@1.1.0:
@@ -3454,8 +3454,8 @@ packages:
       vue: 3.5.13
     dev: false
 
-  /tdesign-vue-next@1.10.5(vue@3.5.13):
-    resolution: {integrity: sha512-z00HyuKI3xnXSzkBMPjjl87FnXrkxmF1MPJbEzys2Eh80ofRC+Pc+iPQbcbEOxJhJ0yeQYf2jzwgl/wmKesSrg==}
+  /tdesign-vue-next@1.10.6(vue@3.5.13):
+    resolution: {integrity: sha512-EXMEiWlfH250Th0vZBfesoxozGrsuiV7doF34wmitDZk5KiMMyaXymKLN7832G4F/c9DIRW8DCKjxqqaHABGYA==}
     peerDependencies:
       vue: '>=3.1.0'
     dependencies:
@@ -3811,6 +3811,7 @@ packages:
         optional: true
     dependencies:
       vue: 3.5.13
+    dev: false
 
   /vue-demi@0.14.8(vue@3.5.13):
     resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}

+ 44 - 14
src/views/etaChart/components/MoveClassify.vue

@@ -14,6 +14,7 @@ const filterState = reactive({
   user: '',
   searchVal: '',
   checkAll: false,
+  indeterminate:false,
   targetClassify: ''
 })
 
@@ -93,7 +94,12 @@ async function getChartList() {
     pagination.value.total = res.Data.Paging.Totals
 
     if(filterState.checkAll){
-      handleClickCheckAll(filterState.checkAll)
+      //全选了去除之前记录被手动取消勾选的项
+      tableData.value.forEach(item=>{
+        if(!selectedRowKeys.value.includes(item.ChartInfoId)&&!cancelSelectRowKeys.includes(item.ChartInfoId)){
+          selectedRowKeys.value.push(item.ChartInfoId)
+        }
+      })
     }
   }
 }
@@ -104,6 +110,10 @@ function handlePageChange(pageInfo) {
   getChartList()
 }
 function handleRefreshList() {
+  cancelSelectRowKeys=[]
+  selectedRowKeys.value=[]
+  filterState.checkAll=false
+  filterState.indeterminate=false
   pagination.value.current = 1
   getChartList()
 }
@@ -114,30 +124,50 @@ watch(
   }
 )
 
-const indeterminate=computed(()=>{
-  if(filterState.checkAll) return false
-  if(selectedRowKeys.value.length>0) return true
-})
 const selectedRowKeys = ref([])
+let cancelSelectRowKeys=[]//取消选择的keys
 function tableSelectChange(value, ctx) {
-  selectedRowKeys.value = value
-  if(ctx.type==="uncheck"&&filterState.checkAll){
-    filterState.checkAll=false
+  console.log(ctx);
+  const selectLength=selectedRowKeys.value.length
+  if(ctx.type==="uncheck"){
+    if(ctx.currentRowKey==="CHECK_ALL_BOX"){//点击的表格上的全选
+      tableData.value.forEach(i=>{
+        cancelSelectRowKeys.push(i.ChartInfoId)
+      })
+    }else{
+      cancelSelectRowKeys.push(ctx.currentRowKey)
+    }
+
+    if(selectLength===0){
+      filterState.indeterminate=false
+      filterState.checkAll=false
+      cancelSelectRowKeys=[]
+    }else{
+      filterState.indeterminate=true
+    }
+    
   }
   if(ctx.type==='check'&&selectedRowKeys.value.length>0){
-    filterState.indeterminate=true
+    if(selectLength===pagination.value.total){
+      filterState.checkAll=true
+      filterState.indeterminate=false
+      cancelSelectRowKeys=[]
+    }else{
+      filterState.indeterminate=true
+      cancelSelectRowKeys=cancelSelectRowKeys.filter(i=>selectedRowKeys.value.includes(i))
+    }
   }
 }
 
 function handleClickCheckAll(check) {
+  filterState.indeterminate=false
+  selectedRowKeys.value=[]
+  cancelSelectRowKeys=[]
   if(check){
     // 全选
-    selectedRowKeys.value=[]
     tableData.value.forEach(item=>{
       selectedRowKeys.value.push(item.ChartInfoId)
     })
-  }else{
-    selectedRowKeys.value=[]
   }
 }
 
@@ -157,7 +187,7 @@ function handleConfirmClassify() {
     ChartClassifyIds: cArr|| '', //多个分类id用英文逗号拼接
     SysUserIds: filterState.user ? filterState.user.join(',') : '',
     ChartName: filterState.searchVal, //图表名称
-    ChartInfoIds: selectedRowKeys.value.join(','), //选中的图表ID
+    ChartInfoIds: filterState.checkAll? cancelSelectRowKeys.join(',') : selectedRowKeys.value.join(','), //选中的图表ID
     ChartClassifyId: filterState.targetClassify//新分类ID
   }
   console.log(params);
@@ -236,7 +266,7 @@ function handleConfirmClassify() {
         </t-input>
         <t-checkbox
           style="flex-shrink: 0"
-          :indeterminate="indeterminate"
+          :indeterminate="filterState.indeterminate"
           v-model="filterState.checkAll"
           @change="handleClickCheckAll"
           >全选</t-checkbox