add field order

frontend/src/api/schema/openapi.json

@@ -1219,14 +1219,9 @@
             "format": "int64"
           },
           "sortBy": {
-            "type": "object",
-            "additionalProperties": {
-              "type": "string",
-              "enum": [
-                "ASC",
-                "DESC"
-              ]
-            }
+            "type": "string",
+            "description": "排序字段",
+            "example": "name:asc,age:desc"
           },
           "offset": {
             "type": "integer",

frontend/src/api/types/schema.d.ts

@@ -544,9 +544,11 @@ export interface components {
 			page?: number;
 			/** Format: int64 */
 			size?: number;
-			sortBy?: {
-				[key: string]: "ASC" | "DESC";
-			};
+			/**
+			 * @description 排序字段
+			 * @example name:asc,age:desc
+			 */
+			sortBy?: string;
 			/** Format: int64 */
 			offset?: number;
 			sortFields?: components["schemas"]["SortFieldObject"][];

frontend/src/components/SortIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="ml-1">
+            <svg class="w-3.5 h-3.5" :class="{'text-blue-700': sortField?.order}" fill="currentColor" viewBox="0 0 24 24">
+              <path v-if="sortField?.order === 'asc'" d="M8 12l6-6 6 6"/>
+              <path v-else-if="sortField?.order === 'desc'" d="M8 12l6 6 6-6"/>
+              <path v-else d="M8 9l6-6 6 6M8 15l6 6 6-6"/>
+            </svg>
+          </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	sortField?: {
+		field: string;
+		order: "asc" | "desc" | undefined;
+	};
+}>();
+</script>

frontend/src/composables/sort.ts

@@ -0,0 +1,42 @@
+import { computed, ref } from "vue";
+
+export const useSort = () => {
+	const sortFields = ref<
+		{
+			field: string;
+			order: "asc" | "desc" | undefined;
+		}[]
+	>([]);
+
+	const getSortField = (field: string) => {
+		return sortFields.value.find((item) => item.field === field);
+	};
+
+	const sortBy = computed(() => {
+		return sortFields.value
+			.map((item) => `${item.field}:${item.order}`)
+			.join(",");
+	});
+
+	const handleSort = async (field: string) => {
+		if (sortFields.value?.find((item) => item.field === field)) {
+			sortFields.value = sortFields.value?.map((item) =>
+				item.field === field
+					? { ...item, order: item.order === "asc" ? "desc" : undefined }
+					: item,
+			);
+		} else {
+			sortFields.value.push({ field, order: "asc" });
+		}
+		sortFields.value = sortFields.value?.filter(
+			(item) => item.order !== undefined,
+		);
+	};
+
+	return {
+		sortFields,
+		sortBy,
+		handleSort,
+		getSortField,
+	};
+};

frontend/src/composables/user/useUserQuery.ts

@@ -24,6 +24,7 @@ export const useUserQuery = () => {
 		},
 		page = 1,
 		size = 10,
+		sortBy = "id:desc",
 	) => {
 		const { data } = await client.GET("/iam/users", {
 			params: {
@@ -31,6 +32,7 @@ export const useUserQuery = () => {
 					pageRequestDto: {
 						page,
 						size,
+						sortBy,
 					},
 					userQueryDto: param,
 				},

frontend/src/views/UserView.vue

@@ -25,7 +25,7 @@
       </form>
       <!-- Create Modal toggle -->
       <button @click="handleUpsertUserClick(undefined)"
-        class="flex items-center block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center    absolute right-5 bottom-2"
+        class="flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center    absolute right-5 bottom-2"
         type="button">
         新增用户
       </button>
@@ -42,7 +42,12 @@
               </div>
             </th>
             <th scope="col" class="px-6 py-3">用户名</th>
-            <th scope="col" class="px-6 py-3">创建时间</th>
+            <th scope="col" class="px-6 py-3 cursor-pointer" @click="handleSortClick('createTime')">
+              <div class="flex items-center">
+                <span>创建时间</span> 
+                <SortIcon :sortField="getSortField('createTime')" />
+              </div>
+            </th>
             <th scope="col" class="px-6 py-3">状态</th>
             <th scope="col" class="px-6 py-3">分配</th>
             <th scope="col" class="px-6 py-3">操作</th>
@@ -147,18 +152,18 @@ import { useRouter } from "vue-router";
 import type { components } from "../api/types/schema";
 import useAlertStore from "../composables/store/useAlertStore";
 import { useUserUpsert } from "../composables/user/useUserUpsert";
+import { useSort } from "@/composables/sort";
+import SortIcon from "@/components/SortIcon.vue";
 
 const username = ref<string>("");
 const selectedUser = ref<components["schemas"]["UserRolePermissionDto"]>();
 const userUpsertModal = ref<ModalInterface>();
 const userDeleteModal = ref<ModalInterface>();
 const router = useRouter();
-
 const { total, users, fetchUsersWith } = useUserQuery();
-
 const { deleteUser } = useUserDelete();
 const userUpsert = useUserUpsert();
-
+const { sortFields, sortBy, handleSort, getSortField } = useSort();
 const alertStore = useAlertStore();
 
 onMounted(async () => {
@@ -193,9 +198,14 @@ const handleUpsertUserSubmit = async (data: UserUpsertSubmitModel) => {
 		content: "操作成功",
 		level: "success",
 	});
-	await fetchUsersWith({
-		username: username.value,
-	});
+	await fetchUsersWith(
+		{
+			username: username.value,
+		},
+		1,
+		10,
+		sortBy.value,
+	);
 };
 
 const handleUpsertUserClick = async (
@@ -240,6 +250,18 @@ const handleBindPositionClick = async (
 	});
 };
 
+const handleSortClick = async (field: string) => {
+	handleSort(field);
+	await fetchUsersWith(
+		{
+			username: username.value,
+		},
+		1,
+		10,
+		sortBy.value,
+	);
+};
+
 const handleDeleteUserSubmit = async () => {
 	if (!selectedUser?.value?.id) return;
 	await deleteUser(selectedUser.value.id);
@@ -248,9 +270,14 @@ const handleDeleteUserSubmit = async () => {
 		content: "删除成功",
 		level: "success",
 	});
-	await fetchUsersWith({
-		username: username.value,
-	});
+	await fetchUsersWith(
+		{
+			username: username.value,
+		},
+		1,
+		10,
+		sortBy.value,
+	);
 };
 
 const handleDeleteUserClick = async (
@@ -263,9 +290,14 @@ const handleDeleteUserClick = async (
 };
 
 const handleSearch = async () => {
-	await fetchUsersWith({
-		username: username.value,
-	});
+	await fetchUsersWith(
+		{
+			username: username.value,
+		},
+		1,
+		10,
+		sortBy.value,
+	);
 };
 
 const handlePageChange = async (page: number, pageSize: number) => {
@@ -275,6 +307,7 @@ const handlePageChange = async (page: number, pageSize: number) => {
 		},
 		page,
 		pageSize,
+		sortBy.value,
 	);
 };
 </script>