Update 前端代码优化修复

UI/VAP.VUE/src/components/table/partials/TableContent.vue

@@ -8,7 +8,7 @@ const propOpts = inject(symbolKeys.content, {
 	tableClass: "",
 	tableStyle: ""
 })
-const { loading } = toRefs(propOpts)
+const loading = propOpts.loading
 const tableRef = ref()
 
 function isHeaderSlots(name: string | number): boolean {

UI/VAP.VUE/src/components/table/partials/body/BodyTds.vue

@@ -2,12 +2,12 @@
 import symbolKeys from "@@@/table/symbol"
 import BodyTd from "@@@/table/partials/body/BodyTd.vue"
 const props = defineProps<{
-	row: any[]
-	isTree: boolean
-	isExpand: boolean
-	hasChildren: boolean
-	index: number
-	depth: number
+	row: any
+	isTree?: boolean
+	isExpand?: boolean
+	hasChildren?: boolean
+	index?: number
+	depth?: number
 }>()
 
 const propOpts = inject(symbolKeys.bodyTds, {

UI/VAP.VUE/src/components/table/partials/footer/TablePageSizeSelect.vue

@@ -11,7 +11,7 @@ const propOpts = inject(symbolKeys.pagePerItems, {
 	pageSizeChange: true
 })
 const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
-const { currentPage, pageSize: _pageSize, total } = toRefs(propOpts)
+const { currentPage, pageSize: _pageSize, total } = propOpts
 const pageCount = computed(() => {
 	return Math.ceil(total.value / pageSize.value)
 })

UI/VAP.VUE/src/components/table/partials/footer/TablePagination.vue

@@ -8,7 +8,7 @@ const propOpts = inject(symbolKeys.pagination, {
 	total: ref(0),
 	maxPageBtnCount: 5
 })
-const { currentPage, pageSize, total } = toRefs(propOpts)
+const { currentPage, pageSize, total } = propOpts
 const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
 const pageCount = computed(() => {
 	return Math.ceil(total.value / pageSize.value)

UI/VAP.VUE/src/components/table/partials/header/HeaderTh.vue

@@ -13,22 +13,25 @@ const props = withDefaults(
 )
 
 const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
-const sort = ref<Sort>(props.sort)
+const sorts = ref<Sort[]>([props.sort])
 const onSort = (label?: string, sortEnabled?: boolean) => {
 	if (sortEnabled) {
-		if (sort.value.label === label) {
-			if (sort.value.order === "asc") {
-				sort.value.order = "desc"
-			} else if (sort.value.order === "desc") {
-				sort.value.order = ""
+		const index = sorts.value.findIndex((sort) => sort.label === label)
+		if (index >= 0) {
+			if (sorts.value[index].order === "asc") {
+				sorts.value[index].order = "desc"
+			} else if (sorts.value[index].order === "desc") {
+				sorts.value[index].order = ""
 			} else {
-				sort.value.order = "asc"
+				sorts.value[index].order = "asc"
 			}
 		} else {
-			sort.value.order = "asc"
-			sort.value.label = label
+			sorts.value.push({
+				label: label,
+				order: "asc"
+			})
 		}
-		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.sort", sort)
+		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.sort", sorts)
 	}
 }
 
@@ -53,6 +56,11 @@ const rowspan = computed(() => {
 	}
 	return props.column.rowspan
 })
+
+function isSort(col: string, order: string) {
+	const sort = sorts.value.find((v) => v.label === col)
+	return sort && sort.order === order
+}
 </script>
 <template>
 	<th
@@ -77,16 +85,12 @@ const rowspan = computed(() => {
 				icon-name="to-left"
 				icon-type="duotone"
 				style="transform: rotate(90deg) translateX(2px)"
-				:class="[
-					sort.label === column.field && sort.order == 'asc' ? 'text-primary' : 'text-muted'
-				]"></VbIcon>
+				:class="[isSort(column.field, 'asc') ? 'text-primary' : 'text-muted']"></VbIcon>
 			<VbIcon
 				icon-name="to-left"
 				icon-type="duotone"
 				style="transform: rotate(-90deg) translateX(2px)"
-				:class="[
-					sort.label === column.field && sort.order == 'desc' ? 'text-primary' : 'text-muted'
-				]"></VbIcon>
+				:class="[isSort(column.field, 'desc') ? 'text-primary' : 'text-muted']"></VbIcon>
 		</span>
 	</th>
 </template>

UI/VAP.VUE/src/components/table/partials/header/TableHeader.vue

@@ -13,7 +13,7 @@ const propOpts = inject(symbolKeys.header, {
 	thTrClass: "text-center text-gray-800 fw-bold fs-7"
 })
 
-const { columns, checkAll } = toRefs(propOpts)
+const { columns, checkAll } = propOpts
 
 const sort = ref<Sort>({
 	label: propOpts.sortField,

UI/VAP.VUE/src/components/table/partials/toolbar/TableSearchFrom.vue

@@ -9,7 +9,7 @@ const propOpts = inject(symbolKeys.searchFrom, {
 	tableSearchBtnSpan: 1.5
 })
 const searchFormRef = ref<any>()
-const { searchFormRowItems, searchFormItems, queryParams } = toRefs(propOpts)
+const { searchFormRowItems, searchFormItems, queryParams } = propOpts
 const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
 const formSlotSuffix = inject(symbolKeys.formSlotSuffix, "tool-form_")
 

UI/VAP.VUE/src/core/vb-dom/icons/VbIcon.vue

@@ -4,8 +4,8 @@ import icons from "@@/vb-dom/icons/icons.json"
 withDefaults(
 	defineProps<{
 		iconName: string
-		iconType: "duotone" | "solid" | "outline"
-		iconClass: string
+		iconType?: "duotone" | "solid" | "outline"
+		iconClass?: string
 	}>(),
 	{
 		iconType: "duotone",

UI/VAP.Vue/src/components/dict/DictTag.vue

@@ -3,6 +3,7 @@ import appStore from "@s"
 const props = withDefaults(
 	defineProps<{
 		value: string | number | Array<string | number>
+		valueIsNumber?: boolean
 		type: string
 		showValue?: boolean // 当未找到匹配的数据时，显示value
 	}>(),
@@ -19,7 +20,7 @@ function load() {
 		options.value = res.map((v: any) => {
 			return {
 				label: v.label,
-				value: v.value,
+				value: props.valueIsNumber ? Number(v.value) : v.value,
 				type: v.elTagType,
 				class: v.elTagClass,
 				style: undefined

UI/VAP.Vue/src/components/iFrame/iFrame.vue

@@ -1,29 +1,56 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{ src: string }>(), { src: "" })
+const props = withDefaults(
+	defineProps<{
+		src: string
+		frameStyle?: any
+	}>(),
+	{
+		src: ""
+	}
+)
 
-const height = ref(document.documentElement.clientHeight - 150.5 + "px;")
+const height = ref(document.documentElement.clientHeight - 150.5)
 const loading = ref(true)
-const url = computed(() => props.src)
+const { src: url } = toRefs(props)
+const boxStyle = computed(() => {
+	const style: any = {
+		width: "100%"
+	}
+	style.height = height.value + "px"
+	return style
+})
+const frameStyle = computed(() => {
+	let style: any = {
+		height: "100%",
+		width: "100%"
+	}
+	if (props.frameStyle) {
+		if (typeof props.frameStyle === "string") {
+			return props.frameStyle
+		} else {
+			style = { ...style, ...props.frameStyle }
+		}
+	}
+	return style
+})
 
 function init() {
 	setTimeout(() => {
 		loading.value = false
-	}, 300)
+	}, 1000)
 	window.addEventListener("resize", () => {
-		//height.value = document.documentElement.clientHeight - 150.5 + "px;"
-		const tableBoxAuotHeight =
+		height.value =
 			document.documentElement.clientHeight -
 			(document.querySelector(".app-header")?.clientHeight ?? 0) -
 			(document.querySelector(".app-footer")?.clientHeight ?? 0) -
 			5
-		height.value = tableBoxAuotHeight + "px"
 	})
 }
 
 onMounted(init)
 </script>
 <template>
-	<div v-loading="loading" :style="'height:' + height">
-		<iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
+	<div v-loading="loading" :style="boxStyle">
+		<iframe :src="url" frameborder="no" :style="frameStyle" scrolling="auto" />
 	</div>
 </template>

UI/VAP.Vue/src/components/modal/VbModal.vue

@@ -32,7 +32,7 @@ const props = withDefaults(
 		isValidateForm?: boolean //验证表单
 		validateFormCallback?: (isValid: boolean, invalidFields?: any) => void //验证表单
 		saveAutoClose?: boolean // 保存时自动关闭modal
-		closeNeedConfrim?: boolean // 关闭模态框需要确认
+		closeNeedConfirm?: boolean // 关闭模态框需要确认
 		closeBtn?: boolean //显示关闭按钮
 		closeBtnText?: string
 		closeBtnClass?: string
@@ -73,7 +73,7 @@ const props = withDefaults(
 		isValidateForm: true,
 		formLabelWidth: "100px",
 		formSize: "large",
-		closeNeedConfrim: false,
+		closeNeedConfirm: false,
 		closeBtn: true,
 		closeBtnText: "关闭",
 		closeBtnClass: "btn btn-light",
@@ -109,7 +109,7 @@ const emits = defineEmits<{
 }>()
 const modalRef = ref()
 const modalFormRef = ref<HTMLFormElement>()
-const appedBody = computed(() => {
+const appendBody = computed(() => {
 	return props.appendTo ?? (props.appendToBody ? "body" : undefined)
 })
 const _titlePrefix = ref(props.titlePrefix)
@@ -136,7 +136,7 @@ function cancel() {
 			modal.value.hide()
 		}
 	}
-	if (props.closeNeedConfrim) {
+	if (props.closeNeedConfirm) {
 		message.confirm("数据还未保存，确认关闭对话框？", "关闭对话框").then((confirm: any) => {
 			console.log("confirm", confirm)
 			closeModal()
@@ -202,7 +202,6 @@ function init() {
 		}
 	}
 }
-watch(modalRef.value, init)
 watch(
 	() => props.id,
 	() => init
@@ -223,7 +222,7 @@ onMounted(() => {
 defineExpose({ show, resetForm, validateForm, changePrefixTitle, modalFormRef })
 </script>
 <template>
-	<teleport :to="appedBody" :disabled="!appedBody">
+	<teleport :to="appendBody" :disabled="!appendBody">
 		<div
 			ref="modalRef"
 			class="modal fade"

UI/VAP.Vue/src/components/table/VbDataTable.vue

@@ -168,7 +168,7 @@ const emits = defineEmits<{
 	(e: "update:loading", v: boolean): void
 	(e: "page-change", v: number): void
 	(e: "update:formData", v: any): void
-	(e: "sort", v: Sort): void
+	(e: "sort", v: Sort[]): void
 	(e: "select", row: any): void
 	(e: "unSelect", row: any): void
 	(e: "select-all", rows: any[]): void
@@ -189,10 +189,12 @@ const remoteTotal = ref<number>(0)
 const remoteData = ref<any[]>([])
 const checkAll = ref<boolean>(false)
 const toolbarHandleBtns = ref<ToolBtn[]>([])
-const sortParams = ref<{ orderByColumn?: string; isAsc?: string }>({
-	orderByColumn: props.sortField ?? "",
-	isAsc: props.sortOrder == "asc" ? "ascending" : "descending"
-})
+const sortParams = ref<Sort[]>([
+	{
+		label: props.sortField ?? "",
+		order: props.sortOrder == "asc" ? "asc" : "desc"
+	}
+])
 
 const _columns = ref<Header[]>()
 const columns: WritableComputedRef<Header[]> = computed({
@@ -396,9 +398,15 @@ const remote = (id?: string) => {
 	const params = props.noPage
 		? queryParams.value
 		: Object.assign({ pageNum: currentPage.value, pageSize: pageSize.value }, queryParams.value)
-	if (sortParams.value.orderByColumn) {
-		params.orderByColumn = sortParams.value.orderByColumn
-		params.isAsc = sortParams.value.isAsc
+	if (sortParams.value.length) {
+		params.orderByColumn = ""
+		params.isAsc = ""
+		sortParams.value.forEach((v: any) => {
+			if (v.order && v.label) {
+				params.orderByColumn += (params.orderByColumn ? "," : "") + v.label
+				params.isAsc += (params.isAsc ? "," : "") + v.order
+			}
+		})
 	}
 	let curData: any = {}
 	if (props.isLazy) {
@@ -508,38 +516,40 @@ const loadHandleBtns = () => {
 	if (!props.useCustomBtns && props.handlePerm) {
 		const _handleFuns = Object.assign({}, defaultHandleFuns, props.handleFuns ?? {})
 		apis.system.menuApi.menuChildrenByPerms(props.handlePerm).then((res) => {
-			res.data.forEach((v: any) => {
-				if (v.btnScript && v.btnScript != "hide") {
-					const scripts = v.btnScript.split("@")
-					const _btn = props.handleBtns?.find((v) => {
-						return v.key == scripts[0]
-					})
-					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,
-						disabledFun: _btn?.disabledFun
-					}
-					if (scripts.length > 1) {
-						btn.disabledFun = (r: number) => {
-							const temp = Number(scripts[1])
-							if (temp == 0) {
-								return r == 0
+			if (res.data && res.data.length > 0) {
+				res.data.forEach((v: any) => {
+					if (v.btnScript && v.btnScript != "hide") {
+						const scripts = v.btnScript.split("@")
+						const _btn = props.handleBtns?.find((v) => {
+							return v.key == scripts[0]
+						})
+						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,
+							disabledFun: _btn?.disabledFun
+						}
+						if (scripts.length > 1) {
+							btn.disabledFun = (r: number) => {
+								const temp = Number(scripts[1])
+								if (temp == 0) {
+									return r == 0
+								}
+								return r != Number(scripts[1])
 							}
-							return r != Number(scripts[1])
 						}
+						if (props.handleDisabledFuns && props.handleDisabledFuns[scripts[0]]) {
+							btn.disabledFun = props.handleDisabledFuns[scripts[0]]
+						}
+						toolbarHandleBtns.value.push(btn)
 					}
-					if (props.handleDisabledFuns && props.handleDisabledFuns[scripts[0]]) {
-						btn.disabledFun = props.handleDisabledFuns[scripts[0]]
-					}
-					toolbarHandleBtns.value.push(btn)
-				}
-			})
+				})
+			}
 			toolbarHandleBtns.value.push(...(props.customBtns ?? []))
 		})
 	} else {
@@ -687,16 +697,10 @@ const onPageSizeChange = (count: number) => {
 const onColumnsChange = (headers: Header[]) => {
 	columns.value = headers
 }
-const onSort = (v: Sort) => {
-	const sort = toValue(v)
-	if (sort.order) {
-		sortParams.value.orderByColumn = sort.label ?? ""
-		sortParams.value.isAsc = sort.order == "asc" ? "ascending" : "descending"
-	} else {
-		delete sortParams.value.orderByColumn
-		delete sortParams.value.isAsc
-	}
-	emits("sort", sort)
+const onSort = (v: Sort[]) => {
+	const sorts = toValue(v)
+	sortParams.value = sorts
+	emits("sort", sorts)
 	search(false)
 }
 const onSelectAll = (isChecked: boolean) => {

UI/VAP.Vue/src/components/tag/VbTag.vue

@@ -15,29 +15,29 @@ const props = withDefaults(
 )
 
 // 记录未匹配的项
-const unmatchArray = ref<any[]>([])
+const unMatchArray = ref<any[]>([])
 const options = ref<any>([])
 
 const values = computed(() => {
 	if (props.value !== null && typeof props.value !== "undefined") {
-		return Array.isArray(props.value) ? props.value : [String(props.value)]
+		return Array.isArray(props.value) ? props.value : [props.value]
 	} else {
 		return []
 	}
 })
 
-const unmatch = computed(() => {
-	unmatchArray.value = []
+const unMatch = computed(() => {
+	unMatchArray.value = []
 	if (props.value !== null && typeof props.value !== "undefined") {
 		// 传入值为非数组
 		if (!Array.isArray(props.value)) {
 			if (options.value.some((v: any) => v.value == props.value)) return false
-			unmatchArray.value.push(props.value)
+			unMatchArray.value.push(props.value)
 			return true
 		}
 		// 传入值为Array
 		props.value.forEach((item) => {
-			if (!options.value.some((v: any) => v.value == item)) unmatchArray.value.push(item)
+			if (!options.value.some((v: any) => v.value == item)) unMatchArray.value.push(item)
 		})
 		return true
 	}
@@ -101,8 +101,8 @@ onMounted(init)
 				</el-tag>
 			</template>
 		</template>
-		<template v-if="unmatch && showValue">
-			{{ handleArray(unmatchArray) }}
+		<template v-if="unMatch && showValue">
+			{{ handleArray(unMatchArray) }}
 		</template>
 	</div>
 </template>

UI/VAP.Vue/src/core/services/RequestService.ts

@@ -155,7 +155,7 @@ Rs.interceptors.response.use(
 			return Promise.reject(msg)
 		} else if (code !== 200) {
 			if (config.errorAlert) {
-				msgUtil.notifyError(msg)
+				msgUtil.msgError(msg)
 			}
 			// ElNotification.error({ title: msg })
 			return Promise.reject("error")

UI/VAP.Vue/src/views/system/config/index.vue

@@ -139,8 +139,8 @@ function handleRefreshCache() {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:modal="modalRef"

UI/VAP.Vue/src/views/system/dept/index.vue

@@ -163,11 +163,12 @@ function submitForm() {
 
 /** 删除按钮操作 */
 function handleDelete(rows: any[]) {
+	const ids = rows.map((v: any) => v.deptId)
 	const _deptNames = rows.map((v: any) => v.deptName)
 	message
 		.confirm('是否确认删除部门为"' + _deptNames + '"的数据项？')
 		.then(() => {
-			return apis.system.deptApi.delDept(_deptNames).then(() => {
+			return apis.system.deptApi.delDept(ids).then(() => {
 				handleQuery()
 			})
 		})

UI/VAP.Vue/src/views/system/dict/_data.vue

@@ -167,8 +167,8 @@ defineExpose({ defaultDictType })
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:modal="modalRef"
 			:reset-form-fun="opts.resetForm"
 			v-model:form-data="form"

UI/VAP.Vue/src/views/system/dict/index.vue

@@ -185,8 +185,8 @@ function handleView(row: any) {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:modal="modalRef"

UI/VAP.Vue/src/views/system/log/logininfor.vue

@@ -179,7 +179,7 @@ export default {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:query-params="queryParams"

UI/VAP.Vue/src/views/system/log/operlog.vue

@@ -149,7 +149,7 @@ function typeFormat(row: any) {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:query-params="queryParams"

UI/VAP.Vue/src/views/system/notice/index.vue

@@ -136,8 +136,8 @@ function submitForm() {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:modal="modalRef"
 			:reset-form-fun="opts.resetForm"
 			v-model:form-data="form"

UI/VAP.Vue/src/views/system/post/index.vue

@@ -192,8 +192,8 @@ const formItems = ref([
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:modal="modalRef"

UI/VAP.Vue/src/views/system/role/index.vue

@@ -458,8 +458,8 @@ function getDeptAllCheckedKeys() {
 			:columns="opts.columns"
 			:custom-btns="opts.customBtns"
 			:remote-fun="opts.tableListFun"
-			:get-entiy-fun="opts.getEntityFun"
-			:delete-entiy-fun="opts.deleteEntityFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
 			:export-url="opts.exportUrl"
 			:export-name="opts.exportName"
 			:modal="modalRef"