QRAPI/Web/src/components/tablePage/index.vue

<template>
  <div class="app-container" v-loading="state.loading">
    <el-card class="search-container">
      <el-form :inline="true">
        <el-form-item 
          v-for="(item,index) in props.searchOptions"
          :key="index"
          :label="item.label">
          <el-input 
            v-if="item.type == 'input'"
            v-model="props.searchFilter[item.prop]" 
            :placeholder="item.label" 
            :clearable="!item.noClear"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-for="(btn,btn_key) in props.searchButtons"
            :key="btn_key"
            :icon="state.searchBtnOptions[btn].icon"
            v-auth="state.searchBtnOptions[btn].sAuth || props.apiName + state.searchBtnOptions[btn].auth"
            :type="state.searchBtnOptions[btn].type"
            @click="searchBtnHandle(btn)"
          >{{state.searchBtnOptions[btn].label}}</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="paged-table-container">
      <elTable 
        :columnWidth="props.columnWidth"
        :columnHeaderAlign="props.columnHeaderAlign"
        :columnAlign="props.columnAlign"
        :tableData="state.tableData"
        :tableColumns="props.tableColumns"
        @sortChange="sortChange"
      ></elTable>

      <elPager
        style="margin-top: 15px;float:right"
        :pager="state.pager"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      ></elPager>
    </el-card>

    <!-- 导入弹窗 -->
    <importPop 
      ref="importPopRef" 
      :apiName="props.apiName"
      @success="importSuccess"
    />
  </div>
</template>
  
<script setup>
  defineOptions({ name: 'tablePage' })
  import { reactive, ref, onMounted } from 'vue'
  import { getCommonPaged,postCommonExport } from '@/api/common/index'
  import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
  import elTable from '@/components/elTable/index.vue'
  import elPager from '@/components/elPager/index.vue'
  import { getPageParamsForFilter } from '@/utils/common/index'
  import { downloadByData } from '@/utils/download'
  import importPop from '@/components/importPop/index.vue'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  
  const state = reactive({
    loading:false,
    searchBtnOptions:{
      search:{icon:'Search',auth:':page',label:'查询',type:null},
      import:{icon:'BottomRight',auth:':import',label:'导入',type:'warning'},
      export:{icon:'TopRight',auth:':export',label:'导出',type:'success'},
    },
    tableData:[],
    // table排序处理
    sortFilter:{
      sortBy:null,
      isAscending:null
    },
    pager:{
      page: 1,
      pageSize: 10,
      total: 1,
    }
  })

  const props = defineProps({
    // api名称
    apiName: {
      type: String,
      default: null
    },
    // table表头
    tableColumns: {
      type: Object,
      default: []
    },
    // 查询配置
    searchOptions: {
      type: Object,
      default: []
    },
    // 查询按钮
    searchButtons: {
      type: Object,
      default: ['search','import','export']
    },
    // table查询数据filter
    searchFilter: {
      type: Object,
      default: {}
    },
    // 表头宽度
    columnWidth:{
      type: Number,
      default: 120
    },
    // 表头对齐
    columnHeaderAlign:{
      type: String,
      default: 'center'
    },
    // 表内容对齐
    columnAlign:{
      type: String,
      default: 'center'
    },
  })
  

  // 格式化页面传参
  function getPageParams(){
    console.log(136,props.searchFilter)
    let _pageParams = getPageParamsForFilter({
      pageNumber:state.pager.page,
      pageSize:state.pager.pageSize,
      sortBy:state.sortFilter.sortBy,
      isAscending:state.sortFilter.isAscending,
      filters:props.searchFilter
    })
    return _pageParams
  }

  // 获取页面数据
  function getTableData(page) {
    state.loading = true
    if(!page)page = state.pager.page
    if(page)state.pager.page = page
    getCommonPaged(props.apiName,getPageParams())
      .then((resp) => {
        state.tableData = resp.data.data
        state.pager.total = resp.data.totalPages
      })
      .finally(() => (state.loading = false))
  }

  const importPopRef = ref()
  // 按钮功能
  function searchBtnHandle(btn){
    console.log(btn)
    // 查询
    if(btn == 'search'){
      getTableData()
    }
    // 导入
    else if (btn == 'import'){
      importPopRef.value.open()
    }
    // 导出
    else if (btn == 'export'){
      state.loading = true
      getTableData()//同步数据查询
      postCommonExport(props.apiName,getPageParams())
        .then((res) => {
          downloadByData(res.data,route.meta.title+'.xlsx')
        })
        .finally(() => (state.loading = false))
    }
  }

  // 排序
  function sortChange(data) {
    const { prop, order } = data;
    if (!prop || !order) {
      state.sortFilter.sortBy = null;
      state.sortFilter.isAscending = null;
      getTableData();
      return;
    }
    state.sortFilter.sortBy = prop;
    state.sortFilter.isAscending = (order == "ascending");
    getTableData();
  }
  
  // 导入成功之后todo
  function importSuccess(response,importDate){
    getTableData()
  }
  
  // 页脚方法处理
  // const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
  
  // size-change
  function pageSizeChange(page){
    getTableData(page)
    // emits('pageSizeChange',page)
  }

  // current-change
  function pageCurrentChange(page){
    getTableData(page)
    // emits('pageCurrentChange',page)
  }

  onMounted(() => {
    getTableData()
  })
  </script>