form：支持表头排序功能

src/components/DesignForm/app/index.vue

@@ -31,7 +31,7 @@ import {
 import type { FormInstance, FormRules } from "element-plus";
 import { ElLoading, ElMessage, ElNotification } from "element-plus";
 import html2canvas from "html2canvas";
-import JSZip, { forEach } from "jszip";
+import JSZip from "jszip";
 import { gainFormPageListCont } from "@/api/DesignForm/requestapi";
 import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
 import request from "@/utils/request";
@@ -991,11 +991,19 @@ let asfQueryParams: any[] = [];
 @ 功能: 获取数据
 */
 const getPageData = () => {
+
+  // by han2015: 处理排序字段信息
+  let arr:string[]=[];
+  columnSortData.forEach((value, key) => {
+    arr.push(`${key} ${value}`)
+  });
+
   let sendData = {
     formId: props.formId,
     page: state.currentPage,
     pagesize: state.pageSize,
     searchData: json2string(props.searchData),
+    sortData: arr.join(", "),
   };
   // console.log("获取列表详细信息",sendData)
 
@@ -1025,6 +1033,7 @@ const getPageData = () => {
       break;
     default:
       state.loading = true;
+
       //by han2015, 抽成独立部分，方便其他功能调用
       doGainFormPageListCont(sendData)
         .then((datas) => {
@@ -1618,6 +1627,32 @@ const lookPageInfoIsShow = ref(false);
 const asflookPageInfoIsShow = ref(false);
 const pageInfoCont = ref<any>();
 
+//------------------ by han2015:  支持表单排序功能----------------------
+const columnSortData = new Map();
+const setHeaderClass=(params:any)=>{
+  if(columnSortData.has(params.column.property)){
+    if(columnSortData.get(params.column.property)=="DESC"){
+      params.column.order="descending"
+      return
+    }else{
+      params.column.order="ascending"
+      return
+    }
+  }
+}
+// by han2015: 列表支持表头排序
+const onUpdateSort = (data: { prop: string; order: "ascending" | "descending" | null }) => {
+  if (data.order === "descending") {
+    columnSortData.set(data.prop, "DESC");
+  } else if (data.order === "ascending") {
+    columnSortData.set(data.prop, "ASC");
+  } else {
+    columnSortData.delete(data.prop);
+  }
+  getPageData()
+}
+
+
 const lookPageInfo = (val: any) => {
   tablePageClass.value = 4;
   pageInfoCont.value = val;
@@ -2154,13 +2189,15 @@ const isObject = (obj: any) => {
       </el-col>
 
       <el-col v-if="viewType == 1" :span="24" class="tableTdClass">
-        
+        +++++++++++++++++++++
         <el-table
           v-bind="data.tableProps"
           ref="table"
           v-loading="state.loading"
           :data="tableDataList"
           table-layout="fixed"
+          @sort-change="onUpdateSort"
+          :header-cell-class-name="(params:any)=>{setHeaderClass(params)}"
           border
           @selection-change="selectionChange"
         >
@@ -2193,12 +2230,14 @@ const isObject = (obj: any) => {
                 {{ writeListTitle(scope.row, viewPage.list) }}
               </template>
             </el-table-column>
+            
             <el-table-column
               v-else-if="item.fieldClass == ''"
               :prop="item.field"
               :label="item.label"
               :min-width="readerColumnSun(item)"
               header-align="center"
+              sortable="custom"
               align="center"
             >
               <template #default="scope">
@@ -2214,7 +2253,7 @@ const isObject = (obj: any) => {
               </template>
             </el-table-column>
 
-
+           
             <el-table-column
               v-else-if="item.fieldClass == '__control'"
               :prop="item.field"
@@ -2373,6 +2412,7 @@ const isObject = (obj: any) => {
               config=""
               min-width="220"
                header-align="center"
+               sortable="custom"
               align="center"
             >
               <template v-if="item.help" #header="scope">
@@ -2423,7 +2463,7 @@ const isObject = (obj: any) => {
                   type="primary"
                   @click="showAsfDetailDialog(item, scope, asfQueryParams)"
                 >
-                  {{ scope.row[scope.column.property] }}==
+                  {{ scope.row[scope.column.property] }}
                 </el-link>
               </template>
             </el-table-column>