|
|
@@ -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,31 +124,40 @@ 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
|
|
|
- }
|
|
|
- if(ctx.type==='check'&&selectedRowKeys.value.length>0){
|
|
|
- filterState.indeterminate=true
|
|
|
+ if (ctx.type === 'uncheck') {
|
|
|
+ if (ctx.currentRowKey === 'CHECK_ALL_BOX') {
|
|
|
+ tableData.value.forEach(i => cancelSelectRowKeys.push(i.ChartInfoId));
|
|
|
+ } else {
|
|
|
+ cancelSelectRowKeys.push(ctx.currentRowKey);
|
|
|
+ }
|
|
|
+ filterState.indeterminate = selectedRowKeys.value.length > 0;
|
|
|
+ filterState.checkAll = selectedRowKeys.value.length === 0 ? false : filterState.checkAll;
|
|
|
+ } else if (ctx.type === 'check') {
|
|
|
+ filterState.indeterminate = true;
|
|
|
+ if (selectedRowKeys.value.length === pagination.value.total) {
|
|
|
+ filterState.checkAll = true;
|
|
|
+ filterState.indeterminate = false;
|
|
|
+ cancelSelectRowKeys = [];
|
|
|
+ } else {
|
|
|
+ cancelSelectRowKeys = cancelSelectRowKeys.filter(i => selectedRowKeys.value.includes(i));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handleClickCheckAll(check) {
|
|
|
- if(check){
|
|
|
- // 全选
|
|
|
- selectedRowKeys.value=[]
|
|
|
- tableData.value.forEach(item=>{
|
|
|
- selectedRowKeys.value.push(item.ChartInfoId)
|
|
|
- })
|
|
|
- }else{
|
|
|
- selectedRowKeys.value=[]
|
|
|
+ if(!check&&filterState.indeterminate){
|
|
|
+ selectedRowKeys.value=[...selectedRowKeys.value,...cancelSelectRowKeys]
|
|
|
+ cancelSelectRowKeys=[]
|
|
|
+ filterState.indeterminate = false;
|
|
|
+ filterState.checkAll=true
|
|
|
+ return
|
|
|
}
|
|
|
+ filterState.indeterminate = false;
|
|
|
+ selectedRowKeys.value = check ? tableData.value.map(item => item.ChartInfoId) : [];
|
|
|
+ cancelSelectRowKeys = [];
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -157,7 +176,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 +255,7 @@ function handleConfirmClassify() {
|
|
|
</t-input>
|
|
|
<t-checkbox
|
|
|
style="flex-shrink: 0"
|
|
|
- :indeterminate="indeterminate"
|
|
|
+ :indeterminate="filterState.indeterminate"
|
|
|
v-model="filterState.checkAll"
|
|
|
@change="handleClickCheckAll"
|
|
|
>全选</t-checkbox
|
