Update 优化Table组件的后端排序字段

UI/VAP_V3.VUE/src/components/table/VbDataTable.vue

@@ -34,7 +34,7 @@ const props = withDefaults(
 		loading?: boolean
 		loadingText?: string
 		sortField?: string // 排序字段
-		sortOrder?: "asc" | "desc"
+		sortOrder?: string
 		/* modal form */
 		modal?: any
 		formData?: any
@@ -201,19 +201,26 @@ const remoteTotal = ref<number>(0)
 const remoteData = ref<any[]>([])
 const checkAll = ref<boolean>(false)
 const toolbarHandleBtns = ref<ToolBtn[]>([])
-const sortParams = ref<Sort[]>([
-	{
-		label: props.sortField ?? "",
-		order: props.sortOrder == "asc" ? "asc" : "desc"
-	}
-])
+const _sortParams = computed(() => {
+	const sorts: Sort[] = []
+	const sortFields = (props.sortField || "").split(",")
+	const sortOrders = (props.sortOrder || "").split(",")
+	sortFields.forEach((field, index) => {
+		sorts.push({
+			label: field,
+			order: sortOrders[sortOrders.length > index ? index : 0] == "asc" ? "asc" : "desc"
+		})
+	})
+	return sorts
+})
+const sortParams = ref<Sort[]>(_sortParams.value)
 
 const _columns = ref<Header[]>([])
 const columns: WritableComputedRef<Header[]> = computed({
 	get(): Header[] {
 		if (_columns.value && _columns.value.length > 0) {
 			if (props.columnsFun) {
-				const cols = props.columnsFun() ?? []
+				const cols = props.columnsFun() || []
 				const newCols: Header[] = []
 				cols.forEach((v: Header) => {
 					const col = _columns.value.find((vv: Header) => vv.field == v.field)
@@ -225,7 +232,7 @@ const columns: WritableComputedRef<Header[]> = computed({
 				_columns.value = newCols
 			}
 		} else {
-			_columns.value = props.columnsFun ? props.columnsFun() : (props.columns ?? [])
+			_columns.value = props.columnsFun ? props.columnsFun() : props.columns || []
 		}
 		return _columns.value
 	},
@@ -237,7 +244,7 @@ const columns: WritableComputedRef<Header[]> = computed({
 const _selectedRows = ref<any[]>()
 const selectedRows: WritableComputedRef<any[]> = computed({
 	get(): any[] {
-		return _selectedRows.value ?? props.selectedRows ?? []
+		return _selectedRows.value || props.selectedRows || []
 	},
 	set(value: any[]): void {
 		_selectedRows.value = value
@@ -247,7 +254,7 @@ const selectedRows: WritableComputedRef<any[]> = computed({
 const _currentPage = ref<number>()
 const currentPage: WritableComputedRef<number> = computed({
 	get(): number {
-		return _currentPage.value ?? props.currentPage
+		return _currentPage.value || props.currentPage
 	},
 	set(value: number): void {
 		if (_currentPage.value != value) {
@@ -260,7 +267,7 @@ const currentPage: WritableComputedRef<number> = computed({
 const _pageSize = ref<number>()
 const pageSize: WritableComputedRef<number> = computed({
 	get(): number {
-		return _pageSize.value ?? props.pageSize ?? props.pageSizeArray[0]
+		return _pageSize.value || props.pageSize || props.pageSizeArray[0]
 	},
 	set(value: number): void {
 		_pageSize.value = value
@@ -270,7 +277,7 @@ const pageSize: WritableComputedRef<number> = computed({
 const _loading = ref<boolean>()
 const loading: WritableComputedRef<boolean> = computed({
 	get(): boolean {
-		return _loading.value ?? props.loading
+		return _loading.value || props.loading
 	},
 	set(value: boolean): void {
 		_loading.value = value
@@ -280,7 +287,7 @@ const loading: WritableComputedRef<boolean> = computed({
 const _innerQueryParams = ref<any>()
 const innerQueryParams: WritableComputedRef<any> = computed({
 	get(): boolean {
-		return _innerQueryParams.value ?? props.queryParams
+		return _innerQueryParams.value || props.queryParams
 	},
 	set(value: any): void {
 		_innerQueryParams.value = value
@@ -347,7 +354,7 @@ const tableStyle = computed(() => {
 	const y = props.scroll?.y
 	if (fixedColumn.value) {
 		style += "overflow:auto;"
-		x = x ?? 1920
+		x = x || 1920
 	}
 	if (x) {
 		style += `width:${Number(x) ? x + "px" : x};`
@@ -512,9 +519,9 @@ const remote = (id?: string) => {
 					})
 					if (!data.length) {
 						const item = {}
-						item[props.iconField ?? ""] = "没有查询到字节点"
-						item[props.leafField ?? ""] = true
-						item[props.parentField ?? ""] = id
+						item[props.iconField || ""] = "没有查询到字节点"
+						item[props.leafField || ""] = true
+						item[props.parentField || ""] = id
 						data.push(item)
 					}
 					resolve(1)
@@ -558,7 +565,7 @@ const isContentSlots = (name: string | number): boolean => {
 }
 const loadHandleBtns = () => {
 	toolbarHandleBtns.value = []
-	const _handleFuns = Object.assign({}, defaultHandleFuns, props.handleFuns ?? {})
+	const _handleFuns = Object.assign({}, defaultHandleFuns, props.handleFuns || {})
 	if (!props.useCustomBtns && props.handlePerm) {
 		apis.system.menuApi.menuChildrenByPerms(props.handlePerm).then((res) => {
 			if (res.data && res.data.length > 0) {
@@ -571,12 +578,12 @@ const loadHandleBtns = () => {
 						const btn: ToolBtn = {
 							key: scripts[0],
 							show: _btn?.show == undefined ? true : _btn?.show,
-							name: _btn?.name ?? v.menuName,
-							permission: _btn?.permission ?? v.perms,
-							clickFun: _btn?.clickFun ?? _handleFuns[scripts[0]],
-							icon: _btn?.icon ?? `${props.btnIconPrefix}${v.icon}`,
-							iconType: _btn?.iconType ?? "class",
-							btnClass: _btn?.btnClass ?? v.btnClass,
+							name: _btn?.name || v.menuName,
+							permission: _btn?.permission || v.perms,
+							clickFun: _btn?.clickFun || _handleFuns[scripts[0]],
+							icon: _btn?.icon || `${props.btnIconPrefix}${v.icon}`,
+							iconType: _btn?.iconType || "class",
+							btnClass: _btn?.btnClass || v.btnClass,
 							disabledFun: _btn?.disabledFun
 						}
 						if (scripts.length > 1) {
@@ -635,14 +642,14 @@ const customSearch = () => {
 	}
 }
 function calcTableBoxStyle() {
-	const style = props.tableBoxStyle ?? {}
+	const style = props.tableBoxStyle || {}
 	if (props.tableBoxHeight) {
 		style.height = Number(props.tableBoxHeight) ? props.tableBoxHeight + "px" : props.tableBoxHeight
 	} else {
 		const tableBoxAutoHeight =
 			document.documentElement.clientHeight -
-			(document.querySelector(".app-header")?.clientHeight ?? 0) -
-			(document.querySelector(".app-footer")?.clientHeight ?? 0) -
+			(document.querySelector(".app-header")?.clientHeight || 0) -
+			(document.querySelector(".app-footer")?.clientHeight || 0) -
 			5
 		style.height = tableBoxAutoHeight + "px"
 	}
@@ -654,6 +661,7 @@ function calcTableBoxStyle() {
 	_tableBoxStyle.value = style
 	// return style
 }
+
 function query(query?: any) {
 	if (query) {
 		innerQueryParams.value = Object.assign({}, query)
@@ -752,8 +760,8 @@ provide(symbolKeys.header, {
 	columns,
 	hasCheckbox: isMultipleCheck.value || props.hasCheckbox,
 	isMultipleCheck: isMultipleCheck.value,
-	sortField: props.sortField ?? "",
-	sortOrder: props.sortOrder,
+	sortField: props.sortField || "",
+	sortOrder: props.sortOrder || "",
 	headerClass: props.fixedHeader ? props.headerClass + " fixed" : props.headerClass,
 	thTrClass: props.thTrClass
 })
@@ -999,7 +1007,7 @@ function initFixedColumns() {
 					for (let i = 0; _temp < num; i++) {
 						const item = tr.children[i]
 						_temp += Number(item.getAttribute("colspan"))
-						width += tr.children[i]?.clientWidth ?? 0
+						width += tr.children[i]?.clientWidth || 0
 					}
 					leftFixedRef.value.style.width = width + "px"
 					leftFixedRef.value.firstElementChild.style.width = tableRef.value.clientWidth + "px"
@@ -1011,7 +1019,7 @@ function initFixedColumns() {
 					for (let i = trLength - 1; _temp < props.fixedRightNumber; i--) {
 						const item = tr.children[i]
 						_temp += Number(item.getAttribute("colspan"))
-						width += tr.children[i]?.clientWidth ?? 0
+						width += tr.children[i]?.clientWidth || 0
 					}
 					rightFixedRef.value.style.width = width + "px"
 					rightFixedRef.value.firstElementChild.style.width = tableRef.value.clientWidth + "px"

UI/VAP_V3.VUE/src/components/table/symbol.ts

@@ -31,7 +31,7 @@ export default {
 		hasCheckbox: boolean // 是否有选择框
 		isMultipleCheck: boolean // 是否多选
 		sortField: string // 排序字段
-		sortOrder: "asc" | "desc"
+		sortOrder: string
 		headerClass: string
 		thTrClass: string
 	}>,