Update 优化前端Table组件

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

@@ -10,6 +10,7 @@ import type { Sort, Header, Scroll, ToolBtn } from "@@@/table/models"
 import type { VbFormItem, VbFormRowItem } from "@@@/form/models"
 import type { AxiosRequestConfig } from "axios"
 import type { WritableComputedRef } from "vue"
+import { set } from "nprogress"
 
 const formSlotSuffix = "tool-form_"
 
@@ -68,6 +69,7 @@ const props = withDefaults(
 		checkMultiple?: boolean // 是否多选
 		checkPageMultiple?: boolean // 是否跨页多选
 		hasCheckbox?: boolean // 是否有选择框 (checkMultiple 和 checkPageMultiple 为true 时不起作用)
+		clickToCheck?: boolean // 点击行时是否选中,默认true
 		/* pagination */
 		pagination?: boolean
 		noPage?: boolean // 查询不带分页参数
@@ -139,6 +141,7 @@ const props = withDefaults(
 		hasCheckbox: false,
 		checkMultiple: false,
 		checkPageMultiple: false,
+		clickToCheck: true,
 		fixedHeader: false,
 		fixedNumber: 0,
 		fixedRightNumber: 0,
@@ -177,6 +180,8 @@ const emits = defineEmits<{
 	(e: "checkbox-all", isChecked: boolean, rows: any[]): void
 	(e: "select-all", rows: any[]): void
 	(e: "unSelect-all", rows: any[]): void
+	(e: "form-edit", data: any): void // 修改时对formdata操作
+	(e: "query-success", rows: any[]): void //每次查询成功后触发
 }>()
 const tableBoxRef = ref()
 const tableContentRef = ref()
@@ -218,7 +223,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
 	},
@@ -368,6 +373,7 @@ const defaultHandleFuns = {
 		}
 		if (props.getEntityFun) {
 			props.getEntityFun(row[keyField.value]).then((res) => {
+				emits("form-edit", res.data)
 				emits("update:formData", res.data)
 				if (props.modal) {
 					props.modal.show()
@@ -376,6 +382,7 @@ const defaultHandleFuns = {
 			})
 		} else {
 			const _row = Object.assign({}, row)
+			emits("form-edit", _row)
 			emits("update:formData", _row)
 			if (props.modal) {
 				props.modal.show()
@@ -429,7 +436,7 @@ const remote = (id?: string) => {
 		: Object.assign(
 				{ pageNum: currentPage.value, pageSize: pageSize.value },
 				innerQueryParams.value
-		  )
+			)
 	if (sortParams.value.length) {
 		params.orderByColumn = ""
 		params.isAsc = ""
@@ -531,6 +538,9 @@ const remote = (id?: string) => {
 			} else {
 				remoteData.value = data
 			}
+			nextTick(() => {
+				emits("query-success", data)
+			})
 		}
 	})
 }
@@ -648,6 +658,30 @@ function getSelectedIds() {
 function getData() {
 	return remoteData.value
 }
+function getFirstRowData() {
+	return remoteData.value[0]
+}
+// 设置/取消 选中
+function setSelectedId(id: any, isSelected: boolean) {
+	const _row = remoteData.value.find((item) => item[keyField.value] === id)
+	setSelected(_row, isSelected)
+}
+// 设置/取消 选中
+function setSelected(row: any, isSelected: boolean) {
+	const _row = remoteData.value.find((item) => item[keyField.value] === row[keyField.value])
+	if (!_row) {
+		return
+	}
+	if (isSelected) {
+		selectedRows.value = [...new Set([...selectedRows.value, _row])]
+	} else {
+		selectedRows.value = selectedRows.value.filter(
+			(item: any) => _row[keyField.value] !== item[keyField.value]
+		)
+	}
+	onSelect({ row: _row, isChecked: isSelected })
+}
+// 设置/取消 选中
 function setSelecteds(rows: any[] | any, isSelected: boolean) {
 	if (!Array.isArray(rows)) {
 		rows = [rows]
@@ -799,6 +833,12 @@ const onQuery = () => {
 }
 const onRowClick = (v: any) => {
 	const row = toValue(v)
+	if (props.clickToCheck) {
+		onSelect({
+			isChecked: !selectedRows.value.find((v) => v[keyField.value] == row[keyField.value]),
+			row
+		})
+	}
 	props.rowClick && props.rowClick(row)
 	emits("row-click", row)
 }
@@ -988,7 +1028,10 @@ defineExpose({
 	getSelectedIds,
 	getSelecteds,
 	getData,
+	getFirstRowData,
 	getQueryParams,
+	setSelectedId,
+	setSelected,
 	setSelecteds,
 	clearSelecteds,
 	defaultHandleFuns

UI/VAP_V3.VUE/src/components/table/partials/body/BodyTd.vue

@@ -65,7 +65,7 @@ const tdClass = computed(() => {
 	if (props.column.tdClass) {
 		classStr += props.column.tdClass
 	}
-	if (props.isTree && props.column.field == props.iconField) {
+	if (props.isTree && props.column.field == propsOpts.iconField) {
 		classStr += " tree-icon"
 	}
 	return classStr
@@ -82,7 +82,7 @@ function init() {
 onMounted(init)
 </script>
 <template>
-	<td :style="tdStyle" :class="tdClass" :rowspan="rowspan">
+	<td :style="tdStyle" :class="tdClass" :rowspan="rowspan" :name="`td-${column.field}`">
 		<span
 			v-if="isTree && column.field == propsOpts.iconField"
 			@click="onToggle"

UI/VAP_V3.VUE/src/components/table/partials/body/BodyTr.vue

@@ -56,11 +56,21 @@ const onChange = (event: Event) => {
 		row: props.row
 	})
 }
-const onRowClick = () => {
-	VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.click", props.row)
+const onRowClick = (event: Event) => {
+	const target = event.target as HTMLElement
+	if (canTriggerClickEvent(target)) {
+		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.click", props.row)
+	}
+}
+const onDbRowClick = (event: Event) => {
+	const target = event.target as HTMLElement
+	if (canTriggerClickEvent(target)) {
+		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.dbclick", props.row)
+	}
 }
-const onDbRowClick = () => {
-	VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.dbclick", props.row)
+function canTriggerClickEvent(target: HTMLElement) {
+	let name = target.getAttribute("name")
+	return name?.indexOf("td-") === 0
 }
 </script>
 <template>