Update 字典调整成左右分屏的模式

UI/VAP_V3.VUE/src/views/system/dict/_data.vue

@@ -2,13 +2,10 @@
 import apis from "@a"
 import message from "@@/utils/message"
 import appStore from "~/src/stores"
-const props = defineProps<{
-	id: string
-}>()
 
-const { sys_normal_disable, sys_yes_no } = useDict("sys_normal_disable", "sys_yes_no")
+const { sys_yes_no } = useDict("sys_yes_no")
 
-const defaultDictType = ref("")
+const dictTypeData = ref<any>()
 
 const tableRef = ref()
 const modalRef = ref()
@@ -18,10 +15,9 @@ const opts = reactive({
 		{ field: "dictLabel", name: "字典标签", visible: true },
 		{ field: "dictValue", name: "字典键值", visible: true },
 		{ field: "dictSort", name: "字典排序", visible: false, width: 85 },
-		{ field: "createTime", name: "创建时间", visible: true, width: 185 },
 		{ field: "remark", name: "备注", visible: true },
-		{ field: "actions", name: `操作`, width: 120 }
-	],
+		{ field: "actions", name: `操作`, width: 100 }
+	] as any,
 	queryParams: {
 		dictType: undefined,
 		dictLabel: "",
@@ -63,7 +59,7 @@ const opts = reactive({
 			key: "handleExport",
 			show: false
 		}
-	],
+	] as any,
 	handleFuns: {},
 	customBtns: [],
 	tableListFun: apis.system.dictApi.listData,
@@ -127,24 +123,29 @@ function submitForm() {
 	}
 }
 
-watch(
-	() => props.id,
-	(val) => {
-		apis.system.dictApi.getType(val).then((res: any) => {
-			emptyFormData.value.dictType = res.data.dictType
-			queryParams.value = {
-				dictType: res.data.dictType,
-				status: "0",
-				dictLabel: ""
-			}
-			defaultDictType.value = res.data.dictType
-		})
+function queryDictData(id: string) {
+	if (dictTypeData.value?.dictId && id == dictTypeData.value?.dictId) {
+		dictTypeData.value = null
+		return
 	}
-)
-defineExpose({ defaultDictType })
+	apis.system.dictApi.getType(id).then((res: any) => {
+		emptyFormData.value.dictType = res.data.dictType
+		tableRef.value?.query({
+			dictType: res.data.dictType,
+			status: "0",
+			dictLabel: ""
+		})
+		dictTypeData.value = res.data
+	})
+}
+
+defineExpose({ queryDictData, dictTypeData })
 </script>
 <template>
-	<div class="app-container">
+	<div v-show="dictTypeData">
+		<h2 class="mt-5 text-primary text-center">
+			{{ dictTypeData?.dictName || "" }} {{ dictTypeData?.dictType || "" }}
+		</h2>
 		<VbDataTable
 			ref="tableRef"
 			:handle-perm="opts.permission"
@@ -160,7 +161,9 @@ defineExpose({ defaultDictType })
 			:reset-form-fun="opts.resetForm"
 			v-model:form-data="form"
 			v-model:query-params="queryParams"
+			:auto-search="false"
 			:check-multiple="true"
+			:show-search-bar="false"
 			:show-right-column-btn="false"
 			:show-right-search-btn="false"
 			:reset-search-form-fun="resetQuery"
@@ -206,7 +209,9 @@ defineExpose({ defaultDictType })
 		<VbModal
 			v-model:modal="modalRef"
 			modal-dialog-class="max-width:850px;width:850px;"
-			:title="opts.modalTitle"
+			:title="
+				opts.modalTitle + '（' + dictTypeData?.dictName + '：' + dictTypeData?.dictType + '）'
+			"
 			:form-data="form"
 			:form-rules="opts.formRules"
 			:label-width="opts.labelWidth"

UI/VAP_V3.VUE/src/views/system/dict/_type.vue

@@ -0,0 +1,221 @@
+<script setup lang="ts" name="Dict">
+import apis from "@a"
+import message from "@@/utils/message"
+import appStore from "@s"
+
+const emits = defineEmits<{
+	(e: "query", id: string): void
+}>()
+const tableRef = ref()
+const modalRef = ref()
+const isEdit = ref(false)
+
+const opts = reactive({
+	columns: [
+		{ field: "dictId", name: "字典编号", width: 100, isSort: true, visible: false },
+		{ field: "dictName", name: "字典名称", visible: true, width: 180 },
+		{ field: "dictType", name: "字典类型", visible: true, width: 150 },
+		{ field: "remark", name: "备注", visible: true, width: "auto" },
+		{ field: "actions", name: `操作`, width: 120 }
+	] as any,
+	queryParams: {
+		dictName: undefined,
+		dictType: undefined,
+		status: undefined,
+		dateRange: []
+	},
+	searchFormItems: [
+		{
+			field: "dictName",
+			label: "字典名称",
+			required: false,
+			class: "w-100",
+			placeholder: "请输入字典名称",
+			listeners: {
+				keyup: (e: KeyboardEvent) => {
+					if (e.code == "Enter") {
+						handleQuery()
+					}
+				}
+			}
+		},
+		{
+			field: "dictType",
+			label: "字典类型",
+			required: false,
+			class: "w-100",
+			placeholder: "请输入字典类型",
+			listeners: {
+				keyup: (e: KeyboardEvent) => {
+					if (e.code == "Enter") {
+						handleQuery()
+					}
+				}
+			}
+		}
+	],
+	permission: "system:dict",
+	handleFuns: {
+		handleUpdate: () => {
+			const row = tableRef.value.getSelected()
+			handleUpdate(row)
+		},
+		handleRefreshCache
+	},
+	customBtns: [],
+	tableListFun: apis.system.dictApi.listType,
+	getEntityFun: apis.system.dictApi.getType,
+	deleteEntityFun: apis.system.dictApi.delType,
+	exportUrl: apis.system.dictApi.typeExportUrl,
+	exportName: "DICT",
+	modalTitle: "字典类型",
+	resetForm: () => {
+		isEdit.value = false
+		form.value = emptyFormData.value
+	},
+	formRules: {
+		dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+		dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+	},
+	labelWidth: "80px",
+	emptyFormData: {
+		dictId: undefined,
+		dictName: undefined,
+		dictType: undefined,
+		status: "0",
+		remark: undefined
+	}
+})
+const { queryParams, emptyFormData } = toRefs(opts)
+const form = ref(emptyFormData.value)
+
+/** 修改按钮操作 */
+function handleUpdate(row: any) {
+	tableRef.value.defaultHandleFuns.handleUpdate("", row)
+	isEdit.value = true
+}
+/** 删除按钮操作 */
+function handleDelete(rows: any[]) {
+	tableRef.value.defaultHandleFuns.handleDelete("", rows)
+}
+
+/** 搜索按钮操作 */
+function handleQuery(query?: any) {
+	query = query || tableRef.value?.getQueryParams() || queryParams.value
+	addDateRange(query, query.dateRange)
+	tableRef.value?.query(query)
+}
+
+/** 重置按钮操作 */
+function resetQuery(query?: any) {
+	query = query || tableRef.value?.getQueryParams() || queryParams.value
+	query.dateRange = []
+	addDateRange(query, query.dateRange)
+}
+/** 提交按钮 */
+function submitForm() {
+	if (form.value.dictId != null) {
+		apis.system.dictApi.updateType(form.value).then(() => {
+			message.msgSuccess("修改成功")
+			handleQuery()
+		})
+	} else {
+		apis.system.dictApi.addType(form.value).then(() => {
+			message.msgSuccess("新增成功")
+			handleQuery()
+		})
+	}
+}
+
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+	appStore.dictStore.cleanDict().then(() => {
+		message.msgSuccess("刷新成功")
+	})
+}
+function handleRowClick(row: any) {
+	emits("query", row.dictId)
+}
+function onQuerySuccess() {
+	const row = tableRef.value?.getFirstRowData()
+	if (row) {
+		tableRef.value?.setSelected(row, true)
+		handleRowClick(row)
+	}
+}
+</script>
+<template>
+	<div>
+		<VbDataTable
+			ref="tableRef"
+			:handle-perm="opts.permission"
+			:handle-funs="opts.handleFuns"
+			:search-form-items="opts.searchFormItems as any"
+			:init-search="true"
+			:columns="opts.columns"
+			:custom-btns="opts.customBtns"
+			:remote-fun="opts.tableListFun"
+			:get-entity-fun="opts.getEntityFun"
+			:delete-entity-fun="opts.deleteEntityFun"
+			:export-url="opts.exportUrl"
+			:export-name="opts.exportName"
+			:modal="modalRef"
+			:reset-form-fun="opts.resetForm"
+			v-model:form-data="form"
+			v-model:query-params="queryParams"
+			:check-multiple="false"
+			:has-checkbox="true"
+			:row-click="handleRowClick"
+			:reset-search-form-fun="resetQuery"
+			@query-success="onQuerySuccess"
+			:custom-search-fun="handleQuery">
+			<template #status="{ row }">
+				<DictTag type="sys_normal_disable" :value="row.status"></DictTag>
+			</template>
+			<template #actions="{ row }">
+				<vb-tooltip content="修改" placement="top">
+					<el-button
+						link
+						type="primary"
+						@click="handleUpdate(row)"
+						v-hasPermission="'system:dict:edit'">
+						<template #icon>
+							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
+						</template>
+					</el-button>
+				</vb-tooltip>
+				<vb-tooltip content="删除" placement="top" :delay="500">
+					<el-button
+						link
+						type="primary"
+						@click="handleDelete([row])"
+						v-hasPermission="'system:dict:remove'">
+						<template #icon>
+							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
+						</template>
+					</el-button>
+				</vb-tooltip>
+			</template>
+		</VbDataTable>
+		<VbModal
+			v-model:modal="modalRef"
+			:title="opts.modalTitle"
+			:form-data="form"
+			:form-rules="opts.formRules"
+			:label-width="opts.labelWidth"
+			@confirm="submitForm"
+			append-to-body>
+			<template #form>
+				<el-form-item label="字典名称" prop="dictName">
+					<el-input v-model="form.dictName" placeholder="请输入字典名称" />
+				</el-form-item>
+				<el-form-item label="字典类型" prop="dictType">
+					<el-input v-model="form.dictType" placeholder="请输入字典类型" :disabled="isEdit" />
+				</el-form-item>
+				<el-form-item label="备注" prop="remark">
+					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+				</el-form-item>
+			</template>
+		</VbModal>
+	</div>
+</template>

UI/VAP_V3.VUE/src/views/system/dict/index.vue

@@ -1,238 +1,40 @@
-<script setup lang="ts" name="Dict">
-import apis from "@a"
-import message from "@@/utils/message"
-import appStore from "@s"
-import Data from "./_data.vue"
+<script setup lang="ts">
+import DataView from "./_data.vue"
+import TypeView from "./_type.vue"
 
-const { sys_normal_disable } = useDict("sys_normal_disable")
+// const typeRef = ref()
+const dataRef = ref()
+const curSize = ref("60%")
 
-const tableRef = ref()
-const modalRef = ref()
-const isEdit = ref(false)
-const opts = reactive({
-	columns: [
-		{ field: "dictId", name: "字典编号", width: 100, isSort: true, visible: false },
-		{ field: "dictName", name: "字典名称", visible: true, width: 200 },
-		{ field: "dictType", name: "字典类型", visible: true, width: 200 },
-		{ field: "remark", name: "备注", visible: true, width: "auto" },
-		{ field: "actions", name: `操作`, width: 150 }
-	],
-	queryParams: {
-		dictName: undefined,
-		dictType: undefined,
-		status: undefined,
-		dateRange: []
-	},
-	searchFormItems: [
-		{
-			field: "dictName",
-			label: "字典名称",
-			required: false,
-			class: "w-100",
-			placeholder: "请输入字典名称",
-			listeners: {
-				keyup: (e: KeyboardEvent) => {
-					if (e.code == "Enter") {
-						handleQuery()
-					}
-				}
-			}
-		},
-		{
-			field: "dictType",
-			label: "字典类型",
-			required: false,
-			class: "w-100",
-			placeholder: "请输入字典类型",
-			listeners: {
-				keyup: (e: KeyboardEvent) => {
-					if (e.code == "Enter") {
-						handleQuery()
-					}
-				}
-			}
-		}
-	],
-	permission: "system:dict",
-	handleFuns: {
-		handleUpdate: () => {
-			const row = tableRef.value.getSelected()
-			handleUpdate(row)
-		},
-		handleRefreshCache
-	},
-	customBtns: [],
-	tableListFun: apis.system.dictApi.listType,
-	getEntityFun: apis.system.dictApi.getType,
-	deleteEntityFun: apis.system.dictApi.delType,
-	exportUrl: apis.system.dictApi.typeExportUrl,
-	exportName: "DICT",
-	modalTitle: "字典类型",
-	resetForm: () => {
-		isEdit.value = false
-		form.value = emptyFormData.value
-	},
-	formRules: {
-		dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
-		dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
-	},
-	labelWidth: "80px",
-	emptyFormData: {
-		dictId: undefined,
-		dictName: undefined,
-		dictType: undefined,
-		status: "0",
-		remark: undefined
-	}
+const size = computed(() => {
+	return dataRef.value?.dictTypeData ? curSize.value : "100%"
 })
-const { queryParams, emptyFormData } = toRefs(opts)
-const form = ref(emptyFormData.value)
 
-/** 修改按钮操作 */
-function handleUpdate(row: any) {
-	tableRef.value.defaultHandleFuns.handleUpdate("", row)
-	isEdit.value = true
-}
-/** 删除按钮操作 */
-function handleDelete(rows: any[]) {
-	tableRef.value.defaultHandleFuns.handleDelete("", rows)
-}
-
-/** 搜索按钮操作 */
-function handleQuery(query?: any) {
-	query = query || tableRef.value?.getQueryParams() || queryParams.value
-	addDateRange(query, query.dateRange)
-	tableRef.value?.query(query)
-}
-
-/** 重置按钮操作 */
-function resetQuery(query?: any) {
-	query = query || tableRef.value?.getQueryParams() || queryParams.value
-	query.dateRange = []
-	addDateRange(query, query.dateRange)
-}
-/** 提交按钮 */
-function submitForm() {
-	if (form.value.dictId != null) {
-		apis.system.dictApi.updateType(form.value).then(() => {
-			message.msgSuccess("修改成功")
-			handleQuery()
-		})
-	} else {
-		apis.system.dictApi.addType(form.value).then(() => {
-			message.msgSuccess("新增成功")
-			handleQuery()
-		})
-	}
-}
-
-/** 刷新缓存按钮操作 */
-function handleRefreshCache() {
-	appStore.dictStore.cleanDict().then(() => {
-		message.msgSuccess("刷新成功")
-	})
+function onSizeChange(size) {
+	curSize.value = size
 }
 
-const viewModalRef = ref()
-const dataViewRef = ref()
-const viewDictId = ref()
-const viewModalTitle = computed(() => {
-	return "字典数据：" + dataViewRef.value?.defaultDictType
-})
-function handleView(row: any) {
-	viewDictId.value = row.dictId
-	viewModalRef.value.show()
+function onQueryData(id) {
+	dataRef.value.queryDictData(id)
 }
 </script>
+
 <template>
-	<div>
-		<VbDataTable
-			ref="tableRef"
-			:handle-perm="opts.permission"
-			:handle-funs="opts.handleFuns"
-			:search-form-items="opts.searchFormItems as any"
-			:columns="opts.columns"
-			:custom-btns="opts.customBtns"
-			:remote-fun="opts.tableListFun"
-			:get-entity-fun="opts.getEntityFun"
-			:delete-entity-fun="opts.deleteEntityFun"
-			:export-url="opts.exportUrl"
-			:export-name="opts.exportName"
-			:modal="modalRef"
-			:reset-form-fun="opts.resetForm"
-			v-model:form-data="form"
-			v-model:query-params="queryParams"
-			:check-multiple="true"
-			:reset-search-form-fun="resetQuery"
-			:custom-search-fun="handleQuery">
-			<template #status="{ row }">
-				<DictTag type="sys_normal_disable" :value="row.status"></DictTag>
-			</template>
-			<template #actions="{ row }">
-				<vb-tooltip content="修改" placement="top">
-					<el-button
-						link
-						type="primary"
-						@click="handleUpdate(row)"
-						v-hasPermission="'system:dict:edit'">
-						<template #icon>
-							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
-						</template>
-					</el-button>
-				</vb-tooltip>
-				<vb-tooltip content="删除" placement="top" :delay="500">
-					<el-button
-						link
-						type="primary"
-						@click="handleDelete([row])"
-						v-hasPermission="'system:dict:remove'">
-						<template #icon>
-							<VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
-						</template>
-					</el-button>
-				</vb-tooltip>
-				<vb-tooltip content="详情" placement="top">
-					<el-button
-						link
-						type="primary"
-						@click="handleView(row)"
-						v-hasPermission="'system:dict:query'">
-						<template #icon>
-							<VbIcon icon-name="eye" icon-type="duotone" class="fs-3"></VbIcon>
-						</template>
-					</el-button>
-				</vb-tooltip>
+	<div class="app-container">
+		<VbSplitPanel :size="size" min-size="30%" :is-drag="false" @drag-complete="onSizeChange">
+			<template #first>
+				<TypeView @query="onQueryData" ref="typeRef" />
 			</template>
-		</VbDataTable>
-		<VbModal
-			v-model:modal="modalRef"
-			:title="opts.modalTitle"
-			:form-data="form"
-			:form-rules="opts.formRules"
-			:label-width="opts.labelWidth"
-			@confirm="submitForm"
-			append-to-body>
-			<template #form>
-				<el-form-item label="字典名称" prop="dictName">
-					<el-input v-model="form.dictName" placeholder="请输入字典名称" />
-				</el-form-item>
-				<el-form-item label="字典类型" prop="dictType">
-					<el-input v-model="form.dictType" placeholder="请输入字典类型" :disabled="isEdit" />
-				</el-form-item>
-				<el-form-item label="备注" prop="remark">
-					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-				</el-form-item>
+			<template #second>
+				<DataView ref="dataRef" />
 			</template>
-		</VbModal>
-		<VbModal
-			v-model:modal="viewModalRef"
-			:title="viewModalTitle"
-			modal-dialog-style="width:1000px;max-width:1000px;"
-			modal-body-class="pt-0"
-			append-to-body>
-			<template #body>
-				<Data ref="dataViewRef" :id="viewDictId"></Data>
-			</template>
-		</VbModal>
+		</VbSplitPanel>
 	</div>
 </template>
+
+<style scoped>
+.app-container {
+	width: 100%;
+	height: calc(100vh - 135px);
+}
+</style>