|
@@ -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
|