物模型：table添加排序

ui/dasadmin/src/views/backend/auth/model/index.vue

@@ -90,24 +90,33 @@
                 <el-main class="mainMain">
                     <el-tabs v-model="ModelTabs" @tab-change="changeTabs" class="tabsPart">
                         <el-tab-pane :label="modelTabsType['attribute']" name="attribute">
-                            <el-table :data="attributeTableData" class="tablePart" highlight-current-row>
+                            <el-table :data="attributeTableData" @sort-change="sortChange" class="tablePart" highlight-current-row>
+                                <el-table-column
+                                    prop="porder"
+                                    :label="ModelAttributeFieldsEnums['porder']"
+                                    align="center"
+                                    sortable="custom"
+                                    width="80"
+                                ></el-table-column>
                                 <el-table-column
                                     prop="attributeName"
                                     :label="ModelAttributeFieldsEnums['attributeName']"
                                     align="center"
+                                    sortable="custom"
                                 ></el-table-column>
                                 <el-table-column
                                     prop="attributeCode"
                                     :label="ModelAttributeFieldsEnums['attributeCode']"
                                     align="center"
+                                    sortable="custom"
                                 ></el-table-column>
                                 <el-table-column
                                     prop="attributeTypeName"
                                     :label="ModelAttributeFieldsEnums['attributeTypeName']"
                                     align="center"
+                                    sortable="custom"
                                 ></el-table-column>
-                                <el-table-column prop="porder" :label="ModelAttributeFieldsEnums['porder']" align="center"></el-table-column>
+                                <el-table-column fixed="right" label="操作" width="130" align="center">
-                                <el-table-column fixed="right" label="操作" min-width="80" align="center">
                                     <template #default="scope">
                                         <div class="tableOperate">
                                             <a @click="editAttributeForm(scope.row)">编辑</a>
@@ -123,15 +132,32 @@
                             </el-table>
                         </el-tab-pane>
                         <el-tab-pane :label="modelTabsType['service']" name="service">
-                            <el-table :data="serviceTableData" class="tablePart">
+                            <el-table :data="serviceTableData" @sort-change="sortChange" class="tablePart">
-                                <el-table-column prop="serviceName" :label="ModelServiceFieldsEnums['serviceName']" align="center"></el-table-column>
+                                <el-table-column
-                                <el-table-column prop="serviceCode" :label="ModelServiceFieldsEnums['serviceCode']" align="center"></el-table-column>
+                                    prop="porder"
+                                    :label="ModelServiceFieldsEnums['porder']"
+                                    align="center"
+                                    sortable="custom"
+                                    width="80"
+                                ></el-table-column>
+                                <el-table-column
+                                    prop="serviceName"
+                                    :label="ModelServiceFieldsEnums['serviceName']"
+                                    align="center"
+                                    sortable="custom"
+                                ></el-table-column>
+                                <el-table-column
+                                    prop="serviceCode"
+                                    :label="ModelServiceFieldsEnums['serviceCode']"
+                                    align="center"
+                                    sortable="custom"
+                                ></el-table-column>
                                 <el-table-column
                                     prop="serviceTypeName"
                                     :label="ModelServiceFieldsEnums['serviceTypeName']"
                                     align="center"
+                                    sortable="custom"
                                 ></el-table-column>
-                                <el-table-column prop="porder" :label="ModelServiceFieldsEnums['porder']" align="center"></el-table-column>
                                 <el-table-column fixed="right" label="操作" min-width="80" align="center">
                                     <template #default="scope">
                                         <div class="tableOperate">
@@ -479,15 +505,15 @@ const modelAttributeAndServiceInputValue = ref('')
 const searchModelAttribute = () => {
     if (modelAttributeSearchRadio.value === 'Name') {
         if (ModelTabs.value === 'attribute') {
-            getAttributeList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
+            getAttributeList({ type: modelAttributeSearchRadio.value, value: modelAttributeAndServiceInputValue.value })
         } else if (ModelTabs.value === 'service') {
-            getServiceList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
+            getServiceList({ type: modelAttributeSearchRadio.value, value: modelAttributeAndServiceInputValue.value })
         }
     } else if (modelAttributeSearchRadio.value === 'Code') {
         if (ModelTabs.value === 'attribute') {
-            getAttributeList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
+            getAttributeList({ type: modelAttributeSearchRadio.value, value: modelAttributeAndServiceInputValue.value })
         } else if (ModelTabs.value === 'service') {
-            getServiceList(modelAttributeSearchRadio.value, modelAttributeAndServiceInputValue.value)
+            getServiceList({ type: modelAttributeSearchRadio.value, value: modelAttributeAndServiceInputValue.value })
         }
     }
 }
@@ -502,6 +528,20 @@ const changeTabs = (name: any) => {
         getServiceList()
     }
 }
+const sortChange = ({
+    prop,
+    order,
+}: {
+    prop: keyof typeof ModelAttributeFieldsEnums | keyof typeof ModelServiceFieldsEnums
+    order: 'ascending' | 'descending' | null
+}) => {
+    const orderType = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : undefined
+    if (ModelTabs.value === 'attribute') {
+        getAttributeList({ orderFiled: order ? (prop as keyof typeof ModelAttributeFieldsEnums) : undefined, order: orderType })
+    } else if (ModelTabs.value === 'service') {
+        getServiceList({ orderFiled: order ? (prop as keyof typeof ModelServiceFieldsEnums) : undefined, order: orderType })
+    }
+}
 
 const attributeTableData = ref<ModelAttributeTableType[]>([])
 const editAttributeForm = (data: AddModelAttributeType & UpdateModelAttributeType) => {
@@ -524,11 +564,23 @@ const delAttributeForm = (data: AddModelAttributeType & UpdateModelAttributeType
         })
 }
 
-const getAttributeList = (type?: radioGroupType, value?: string) => {
+const getAttributeList = ({
+    type,
+    value,
+    order,
+    orderFiled,
+}: {
+    type?: radioGroupType
+    value?: string
+    order?: 'asc' | 'desc' | undefined
+    orderFiled?: keyof typeof ModelAttributeFieldsEnums
+} = {}) => {
     const requestData: GetModelAttributeType = {
         iotModelId: curContextMenuTreeData.value!.id!,
         pageNum: currentPage.value,
         pageSize: currentPageSize.value,
+        orderColumn: orderFiled,
+        orderType: order,
     }
     if (type === 'Name') {
         requestData.attributeName = value
@@ -568,11 +620,23 @@ const getAttributeList = (type?: radioGroupType, value?: string) => {
         })
 }
 
-const getServiceList = (type?: radioGroupType, value?: string) => {
+const getServiceList = ({
+    type,
+    value,
+    order,
+    orderFiled,
+}: {
+    type?: radioGroupType
+    value?: string
+    order?: 'asc' | 'desc'
+    orderFiled?: keyof typeof ModelServiceFieldsEnums
+} = {}) => {
     const requestData: GetModelServiceType = {
         iotModelId: curContextMenuTreeData.value!.id!,
         pageNum: currentPage.value,
         pageSize: currentPageSize.value,
+        orderColumn: orderFiled,
+        orderType: order,
     }
     if (type === 'Name') {
         requestData.serviceName = value

ui/dasadmin/src/views/backend/auth/model/type.ts

@@ -94,6 +94,8 @@ export type GetModelAttributeType = {
     attributeName?: string
     pageSize: number
     pageNum: number
+    orderColumn: keyof typeof ModelAttributeFieldsEnums | undefined
+    orderType: 'desc' | 'asc' | undefined
 }
 
 export type attributeTypeDataType = "float" | "double" | "tinyint" | "smallint" | "int" | "bigint"
@@ -128,6 +130,8 @@ export type GetModelServiceType = {
     serviceName?: string
     pageSize: number
     pageNum: number
+    orderColumn?: keyof typeof ModelServiceFieldsEnums
+    orderType?: 'desc' | 'asc'
 }
 
 export type AddModelServiceType = {