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

5 months ago · 6f7a9c836f
5 changed files with 122 additions and 12 deletions
--- 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"
    />
    <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 方法，用于打开弹窗

--- 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<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}
--- 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',
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@ -864,6 +864,9 @@ export default {
    导出:'导出',
    刷新:'刷新',
    筛选:'筛选',
+    选择当页:'选择当页',
+    反选当页:'反选当页',
+    取消全选:'取消全选',
    设置:'设置',
    确定:'确定',
    '确 定':'确 定',
--- 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,{