客户提出功能： 选择当页、反选当页、取消全选

src/components/SearchTable/src/SearchTable.vue

@@ -10,6 +10,7 @@
       :HeadButttondata="HeadButttondata"
       :routeName="routeName"
       @searchFormClick="searchFormClick"
+      @buttonBaseClick="buttonBaseClick"
       :allSchemas="allSchemasRef"
     />
     <ContentWrap>
@@ -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,26 +81,37 @@ 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
@@ -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 方法，用于打开弹窗
 

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<Recordable[]>([])
     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<unref(getProps).data.length){
+          elTableRef.value!.toggleAllSelection()
+        }
+      }
+    }
+    
+    //清空选择
+    const clearSelection  = ()=>{
+      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')
           }}
         </ElTable>
-        
+        {unref(getProps).selectionTotal ? (
+          <div class="mt-5px">已选{selections.value.length}条数据</div>
+        ):undefined}
         {unref(getProps).pagination ? (
           // update by 芋艿：保持和 Pagination 组件一致
             <ElPagination
               v-model:pageSize={pageSizeRef.value}
               v-model:currentPage={currentPageRef.value}
-              class="float-right mb-15px mt-15px"
+              class="float-right mt-15px"
               {...unref(pagination)}
             ></ElPagination>         
         ) : undefined}

src/locales/en-US.ts

@@ -864,6 +864,9 @@ export default {
     导出:'Export',
     刷新:'Refresh',
     筛选:'Filter',
+    选择当页:'As Page',
+    反选当页:'Unselect Page',
+    取消全选:'Deselect All',
     设置:'Settings',
     确定:'Confirm',
     '确 定':'Confirm',

src/locales/zh-CN.ts

@@ -864,6 +864,9 @@ export default {
     导出:'导出',
     刷新:'刷新',
     筛选:'筛选',
+    选择当页:'选择当页',
+    反选当页:'反选当页',
+    取消全选:'取消全选',
     设置:'设置',
     确定:'确定',
     '确 定':'确 定',

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,{