11

src/components/Table/src/Table.vue

@@ -62,6 +62,41 @@
             </div>
           </el-tooltip>
 
+          <!--排序-->
+          <el-tooltip content="排序" v-if="isShowTableOrder">
+            <div class="table-toolbar-right-icon">
+              <el-popover
+                :width="300"
+                placement="bottom-end"
+                trigger="click"
+                style="max-height: 50vh"
+              >
+                <template #reference>
+                  <el-icon class="el-input__icon" :size="18">
+                    <Sort />
+                  </el-icon>
+                </template>
+                <div class="popContent">
+                  <div class="pop-item" v-for="item in getOrderParams" :key="item.label">
+                    <span>{{ item.label }}</span>
+                    <div>
+                      <el-button
+                        :type="item.active === 'asc' ? 'primary' : 'reset'"
+                        @click="changeOrder(item.prop, 'asc')"
+                        >从低到高</el-button
+                      >
+                      <el-button
+                        :type="item.active === 'desc' ? 'primary' : 'reset'"
+                        @click="changeOrder(item.prop, 'desc')"
+                        >从高到低</el-button
+                      >
+                    </div>
+                  </div>
+                </div>
+              </el-popover>
+            </div>
+          </el-tooltip>
+
           <!--表格设置单独抽离成组件-->
           <ColumnSetting
             v-if="isShowTableSetting"
@@ -82,14 +117,26 @@
       </div>
     </div>
     <div class="s-table" ref="sTableRef" v-if="isShowTable">
-      <el-table ref="tableElRef" v-bind="getBindValues" v-loading="getLoading">
+      <el-table
+        ref="tableElRef"
+        v-bind="getBindValues"
+        v-loading="getLoading"
+        @sort-change="sortChange"
+      >
         <template v-for="item in getTableColumns" :key="item.key">
           <el-table-column
-            v-if="item.type === 'index' || item.type === 'selection'"
+            v-if="item.type === 'index'"
+            label="序号"
+            :index="getIndexNum"
             :type="item.type"
             :width="item.width"
           />
-          <el-table-column v-else :prop="item.prop" v-bind="item">
+          <el-table-column
+            v-else-if="item.type === 'selection'"
+            :type="item.type"
+            :width="item.width"
+          />
+          <el-table-column v-else :prop="item.prop" :sortable="item.sortable" v-bind="item">
             <template #default="scope" v-if="item.render">
               <Render :column="item" :row="scope.row" :render="item.render" :index="scope.$index" />
             </template>
@@ -131,13 +178,13 @@
   import { usePagination } from './hooks/usePagination';
 
   import { basicProps } from './props';
-  import { BasicTableProps } from './types/table';
+  import { BasicTableProps, BasicTableOrders } from './types/table';
 
   import { getViewportOffset } from '@/utils/domUtils';
   import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';
   import { isBoolean } from '@/utils/is';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { Refresh } from '@element-plus/icons-vue';
+  import { Refresh, Sort } from '@element-plus/icons-vue';
   import {
     ColumnHeightOutlined,
     QuestionCircleOutlined,
@@ -146,6 +193,7 @@
   } from '@vicons/antd';
   import { useFullscreen } from '@vueuse/core';
   import { ElIcon } from 'element-plus';
+  import { PaginationProps } from './types/pagination';
 
   const props = defineProps({
     ...basicProps,
@@ -162,6 +210,9 @@
     'edit-row-end',
     'edit-change',
     'columns-change',
+    'order-change',
+    'page-num-change',
+    'page-size-change',
   ]);
 
   const striped = ref(false);
@@ -235,17 +286,36 @@
     reload(opt);
   }
 
+  //表格index计算
+  const getIndexNum = (index) => {
+    if (!isBoolean(unref(pagination))) {
+      const { currentPage = 1, pageSize = 10 } = unref(pagination) as PaginationProps;
+      return (currentPage - 1) * pageSize + (index + 1);
+    }
+    return index + 1;
+  };
+
   //页码切换
   async function updatePage(page) {
     !getProps.value.isKeepRowKeys && (await restCheckedRowKeys());
     setPagination({ currentPage: page });
     reload();
+    //自定义页码切换脚本
+    setLoading(true);
+    nextTick(() => {
+      emit('page-num-change', page);
+    });
   }
 
   //分页数量切换
   function updatePageSize(size) {
     setPagination({ currentPage: 1, pageSize: size });
     reload();
+    //自定义分页数量切换脚本
+    setLoading(true);
+    nextTick(() => {
+      emit('page-size-change', size);
+    });
   }
 
   //密度切换
@@ -277,6 +347,9 @@
   //是否显示斑马纹开关
   const isShowTableStriped = computed(() => getProps.value.tableSetting?.striped ?? true);
 
+  //是否显示排序开关
+  const isShowTableOrder = computed(() => getProps.value.tableSetting?.order ?? true);
+
   //计算高度
   const getDeviceHeight = computed(() => {
     const tableData = unref(getDataSourceRef);
@@ -383,7 +456,48 @@
 
   useWindowSizeFn(computeTableHeight, 280);
 
+  //表格排序参数列表
+  const getOrderParams = ref<BasicTableOrders[]>([]);
+
+  const initOrderParams = () => {
+    getOrderParams.value =
+      props.orderParams && props.orderParams.length > 0
+        ? props.orderParams
+        : getColumns()
+            .filter((column) => column.type !== 'index' && column.type !== 'action')
+            .map((column) => {
+              return {
+                label: column.label ?? '',
+                prop: column.prop ?? '',
+                active: '' as '' | 'asc' | 'desc',
+              };
+            });
+    getOrderParams.value[0].active = 'asc';
+  };
+
+  //表格排序方式切换
+  function changeOrder(sortItem: string, orderType: '' | 'asc' | 'desc') {
+    getOrderParams.value.forEach((param) => {
+      if (param.prop === sortItem) {
+        param.active = orderType;
+      } else {
+        param.active = '';
+      }
+    });
+    emit('order-change', getOrderParams.value);
+  }
+
+  function sortChange(e) {
+    const { prop, order } = e;
+    const sortInfo = {
+      prop,
+      order: order === 'ascending' ? 'asc' : 'desc',
+    };
+    emit('order-change', sortInfo);
+  }
+
   onMounted(() => {
+    initOrderParams();
     nextTick(() => {
       computeTableHeight();
     });