diff --git a/src/components/SearchTable/src/SearchTable.vue b/src/components/SearchTable/src/SearchTable.vue index 084a68806..e3790bca0 100644 --- a/src/components/SearchTable/src/SearchTable.vue +++ b/src/components/SearchTable/src/SearchTable.vue @@ -10,6 +10,7 @@ :HeadButttondata="HeadButttondata" :routeName="routeName" @searchFormClick="searchFormClick" + @buttonBaseClick="buttonBaseClick" :allSchemas="allSchemasRef" /> @@ -26,6 +27,7 @@ v-model:sort="tableObjectRef.sort" :searchTableSelectionsList="searchTableSelectionsList" :selection="true" + :selectionTotal="multipleBol" :reserveSelection="true" row-key="id" /> @@ -53,10 +55,18 @@ routeName.value = route.name const searchDialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 +const multipleBol = ref(false) + // 列表头部按钮 -const HeadButttondata = ref([ +const HeadButttondata = ref(multipleBol.value? +[ + defaultButtons.defaultWhenPageBtn(null), // 选择当页 + defaultButtons.defaultUnselectPageBtn(null), // 反选当页 + defaultButtons.defaultDeselectAllBtn(null), // 取消全选 defaultButtons.defaultFilterBtn(null), // 筛选 +]:[ + defaultButtons.defaultFilterBtn(null) // 筛选 ]) /** 打开弹窗 */ @@ -71,28 +81,39 @@ const searchFieldRef = ref() const typeRef = ref() const rowRef = ref() const allSchemasRef = ref() -const multipleBol = ref(false) const searchConditionRef = ref() const searchTableSelectionsList = ref()//表格弹窗回显的列表 const openData = (titleName: any, tableObject:any ,allSchemas: any,multiple: any) => { dialogWidth.value = '80%' - HeadButttondata.value = [ + multipleBol.value = multiple + HeadButttondata.value = multiple?[ + defaultButtons.defaultWhenPageBtn(null), // 选择当页 + defaultButtons.defaultUnselectPageBtn(null), // 反选当页 + defaultButtons.defaultDeselectAllBtn(null), // 取消全选 + defaultButtons.defaultFilterBtn(null), // 筛选 + ]:[ defaultButtons.defaultFilterBtn(null), // 筛选 ] dialogTitle.value = t(`ts.${titleName}`).replace('ts.','') tableObjectRef.value = tableObject searchDialogVisible.value = true - multipleBol.value = multiple allSchemasRef.value = allSchemas searchSchema.value = allSchemas.searchSchema tableColumns.value = allSchemas.tableColumns } const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, searchField: any,multiple: any, type: any, row: any, searchCondition:any , isCountRequestRe:any,isConcatDetailSchemas=false,detailSchemas: any, searchTableSelections:any) => { dialogWidth.value = '80%' - HeadButttondata.value = [ + multipleBol.value = multiple + HeadButttondata.value = multiple?[ + defaultButtons.defaultWhenPageBtn(null), // 选择当页 + defaultButtons.defaultUnselectPageBtn(null), // 反选当页 + defaultButtons.defaultDeselectAllBtn(null), // 取消全选 defaultButtons.defaultFilterBtn(null), // 筛选 - ] + ]: + [ + defaultButtons.defaultFilterBtn(null), // 筛选 + ] searchDialogVisible.value = true formFieldRef.value = formField searchFieldRef.value = searchField @@ -108,7 +129,6 @@ const open = (titleName: any, allSchemas: any,getApiPage: any, formField: any, s getPage.value = getApiPage typeRef.value = type rowRef.value = row - multipleBol.value = multiple // dialogTitle.value = t('action.' + type) dialogTitle.value = t(`ts.${titleName}`).replace('ts.','') searchTableSelectionsList.value = searchTableSelections @@ -175,6 +195,20 @@ const searchFormClick = (searchData) => { } getListRef.value() // 刷新当前列表 } +const buttonBaseClick = (val, item) => { + // 设置按钮 + if (val == 'DeselectAll') { + // 取消全选 + searchTableRef.value.clearSelection() + } else if (val == 'UnselectPage') { + // 反选当页 + searchTableRef.value.togglePageSelection() + } else if (val == 'WhenPage') { + // 选择当页 + searchTableRef.value.toggleAllSelection(true) + } +} + defineExpose({ open,openData,hiddenFilterButton ,changeDialogWidth}) // 提供 open 方法,用于打开弹窗 diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue index 811321e7d..493c9f35e 100644 --- a/src/components/Table/src/Table.vue +++ b/src/components/Table/src/Table.vue @@ -21,6 +21,8 @@ export default defineComponent({ currentPage: propTypes.number.def(1), // 是否多选 selection: propTypes.bool.def(false), + // 是否显示多选数量 + selectionTotal: propTypes.bool.def(false), // 是否所有的超出隐藏,优先级低于schema中的showOverflowTooltip, showOverflowTooltip: propTypes.bool.def(true), // 表头 @@ -115,12 +117,36 @@ export default defineComponent({ const selections = ref([]) const sortRef = ref() + // 选中某行 const selectRow = ()=>{ emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows()) } - const selectAll = (val)=>{ + //全选回调 + const selectAll = ()=>{ emit('getSelectionRows', currentPageRef.value,elTableRef.value?.getSelectionRows()) } + //反选 + const togglePageSelection = ()=>{ + unref(getProps).data.forEach(row=>{ + elTableRef.value!.toggleRowSelection(row) + }) + } + // 切换全选/不全选 + const toggleAllSelection = (isAll)=>{ + if(isAll){ + //全选 + if(elTableRef.value?.getSelectionRows().length{ + console.log('clearSelection') + elTableRef.value!.clearSelection() + } + const selectionChange = (selection: Recordable[]) => { selections.value = selection } @@ -134,7 +160,11 @@ export default defineComponent({ setProps, setColumn, selections, - toggleRowSelection + toggleRowSelection, + selectAll, + toggleAllSelection, + togglePageSelection, + clearSelection }) const pagination = computed(() => { @@ -358,13 +388,15 @@ export default defineComponent({ append: () => getSlot(slots, 'append') }} - + {unref(getProps).selectionTotal ? ( +
已选{selections.value.length}条数据
+ ):undefined} {unref(getProps).pagination ? ( // update by 芋艿:保持和 Pagination 组件一致 ) : undefined} diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index 49b7ca904..d24ed744a 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -864,6 +864,9 @@ export default { 导出:'Export', 刷新:'Refresh', 筛选:'Filter', + 选择当页:'As Page', + 反选当页:'Unselect Page', + 取消全选:'Deselect All', 设置:'Settings', 确定:'Confirm', '确 定':'Confirm', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index b7cf05325..f42aae706 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -864,6 +864,9 @@ export default { 导出:'导出', 刷新:'刷新', 筛选:'筛选', + 选择当页:'选择当页', + 反选当页:'反选当页', + 取消全选:'取消全选', 设置:'设置', 确定:'确定', '确 定':'确 定', diff --git a/src/utils/disposition/defaultButtons.ts b/src/utils/disposition/defaultButtons.ts index a38217b56..1bf11445b 100644 --- a/src/utils/disposition/defaultButtons.ts +++ b/src/utils/disposition/defaultButtons.ts @@ -159,7 +159,45 @@ export function defaultSearchResetBtn(option:any) { hasPermi: '' }) } - +// 选择当页 +export function defaultWhenPageBtn(option:any) { + return __defaultBtnOption(option,{ + label: t(`ts.选择当页`).replace('ts.', ''), + name: 'WhenPage', + hide: false, + type: 'primary', + color: '', + float:'right', + link: false, // 文本展现按钮 + hasPermi: '' + }) +} +// 反选当页 +export function defaultUnselectPageBtn(option:any) { + return __defaultBtnOption(option,{ + label: t(`ts.反选当页`).replace('ts.', ''), + name: 'UnselectPage', + hide: false, + type: 'primary', + color: '', + float:'right', + link: false, // 文本展现按钮 + hasPermi: '' + }) +} +// 取消全选 +export function defaultDeselectAllBtn(option:any) { + return __defaultBtnOption(option,{ + label: t(`ts.取消全选`).replace('ts.', ''), + name: 'DeselectAll', + hide: false, + type: 'primary', + color: '', + float:'right', + link: false, // 文本展现按钮 + hasPermi: '' + }) +} // form表单-保存按钮 export function formSaveBtn(option:any) { return __defaultBtnOption(option,{