基础资料模块优化

src/components/OperationalInformation/index.vue

@@ -59,6 +59,7 @@
 	watch(
 		() => props.detailData,
 		() => {
+			console.log(props.detailData, 'props.detailData')
 			detailDataProps.value = props.detailData
 		},
 		{

src/hook/useFormHandler.js

@@ -1,6 +1,7 @@
 import { useRoute, useRouter } from 'vue-router'
 import { cloneDeep } from 'lodash-es'
 import useTabs from '@/utils/useTabs'
+import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
 
 /**
  * 使用表单处理程序封装表单的提交、初始化和回退逻辑。
@@ -13,7 +14,14 @@ export default function useFormHandler(formItems, api) {
 	const state = reactive({
 		PAGE_TYPE: ''
 	})
-	let detailData = reactive({})
+	let extendFormData = ref({})
+	// 操作信息
+	let inform = reactive({
+		createUserName: '',
+		createTime: '',
+		updateUserName: '',
+		updateTime: ''
+	})
 
 	// 初始化表单数据对象
 	let formData = reactive({})
@@ -86,7 +94,7 @@ export default function useFormHandler(formItems, api) {
 	 */
 	const handleBack = () => {
 		useTabs.close(route)
-		router.go(-1) // 优化为通用的返回上一页操作
+		// router.push('/basicData/unit') // 优化为通用的返回上一页操作
 	}
 
 	/**
@@ -107,6 +115,17 @@ export default function useFormHandler(formItems, api) {
 					}
 				}
 
+				// 操作信息
+				for (let key in inform) {
+					if (res[key] !== undefined) {
+						inform[key] = res[key]
+					}
+				}
+
+				// 扩展字段
+				if (res.extJson) {
+					extendFormData.value = JSON.parse(res.extJson)
+				}
 				return res
 			} catch (error) {
 				console.error('API request failed:', error)
@@ -114,12 +133,58 @@ export default function useFormHandler(formItems, api) {
 		}
 	}
 
+	/**
+	 * 扩展字段。
+	 */
+	const getExtendField = async (model) => {
+		let extendData = []
+		// 字段扩展
+		const resExtendField = await extendFieldApi.extendFieldTypeList({
+			enabledState: 'ENABLE',
+			model
+		})
+
+		console.log(resExtendField, 'resExtendField')
+
+		if (resExtendField) {
+			resExtendField.forEach((item) => {
+				const showValues = JSON.parse(item.showValues)
+				let options = []
+				showValues.forEach((value) => {
+					options.push({
+						value: value.name,
+						label: value.name
+					})
+				})
+				extendData.push({
+					label: item.name,
+					name: item.fieldName,
+					type: item.showType,
+					span: 6,
+					attrs: {
+						placeholder: '请输入内容',
+						options
+					}
+				})
+			})
+
+			extendData.forEach((item) => {
+				if (item.fieldName) extendFormData.value[item.fieldName] = null
+			})
+			return extendData
+		} else {
+			return []
+		}
+	}
+
 	// 返回包含各种处理函数和状态的对象
 	return {
 		formData,
 		submitLoading,
 		formRefs,
-		detailData,
+		inform,
+		extendFormData,
+		getExtendField,
 		onSubmit,
 		handleBack,
 		fetchData,

src/layout/components/tags.vue

@@ -110,7 +110,7 @@
 		activeKey.value = to.path
 		if (to.name) {
 			vStore.pushViewTags(to)
-			// kStore.pushKeepLive(to.name)
+			kStore.pushKeepLive(to.name)
 		}
 		if (tagList.value.length - 1 > maxTabs.value) {
 			const firstTag = tagList.value[1]

src/utils/useTabs.js

@@ -31,12 +31,12 @@ export default {
 	close(tag) {
 		const route = tag || router.currentRoute.value
 		const store = viewTagsStore()
-		console.log(route, 'route')
 		store.removeViewTags(route)
 		iframeStore().removeIframeList(route)
 		keepAliveStore().removeKeepLive(route.name)
 		const tagList = store.viewTags
 		const latestView = tagList.slice(-1)[0]
+		console.log(latestView, 'route')
 		if (latestView) {
 			router.push(latestView)
 		} else {

src/views/basicData/brand/detail/index.vue

@@ -15,21 +15,24 @@
 		/>
 	</a-card>
 
-	<!--	<a-card :bordered="false" title="域名" class="mt-4">
-		<a-button @click="handleAddDomain">新增域名</a-button>
-		<a-form class="mt-8" :model="domainFormData" :rules="domainFormRules" ref="domainFormRef">
-			<a-row v-for="(item, index) in domainFormItems" :key="item.value" :gutter="12">
-				<a-col :span="12">
-					<a-form-item :label="item.label" :name="item.value" :props="item.value">
-						<a-input v-model:value="domainFormData[item.value]" placeholder="请输入域名" />
-					</a-form-item>
-				</a-col>
-				<a-col :span="12" v-if="index > 0">
-					<a-button @click="handleDelDomain(index)">删除</a-button>
-				</a-col>
-			</a-row>
-		</a-form>
-	</a-card>-->
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
+		<a-tabs v-model:activeKey="activeKey">
+			<a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="extendData"
+					:model="extendFormData"
+					:rules="formRules"
+					v-if="extendData.length > 0"
+				/>
+
+				<a-empty v-else />
+			</a-tab-pane>
+			<a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
+			</a-tab-pane>
+		</a-tabs>
+	</a-card>
 </template>
 
 <script setup name="brandDetail">
@@ -128,11 +131,15 @@
 	])
 
 	const formRef1 = ref(null)
+	let extendData = ref([])
 
-	let { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(brandFormItems, {
+	let { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } = useFormHandler(
+		brandFormItems,
+		{
 			submitForm: sysBrandApi.sysBrandSubmitForm,
 			getDetail: sysBrandApi.sysBrandDetail
-	})
+		}
+	)
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value]
@@ -149,6 +156,8 @@
 					}
 				})
 			})
+
+		extendData.value = await getExtendField('MATERIAL')
 	})
 
 	// 添加域名
@@ -183,4 +192,6 @@
 	const onSubmitForm = async () => {
 		await onSubmit({ ...formData, ...domainFormData })
 	}
+
+	let activeKey = ref('1')
 </script>

src/views/basicData/client/detail/CustomerCategoryForm.vue

@@ -42,6 +42,9 @@
 				</a-col>
 			</a-row>
 		</a-form>
+
+		<OperationalInformation v-if="route.query.id" :detailData="formData" :colSpan="12"></OperationalInformation>
+
 		<template #footer>
 			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
 			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
@@ -54,6 +57,9 @@
 	import { cloneDeep } from 'lodash-es'
 	import { required } from '@/utils/formRules'
 	import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+
 	// 抽屉状态
 	const visible = ref(false)
 	const emit = defineEmits({ successful: null })
@@ -74,7 +80,7 @@
 		}
 		enabledStateOptions.value = tool.dictList('COMMON_STATUS')
 
-		customerCategoryApi.customerCategoryTree().then(res => {
+		customerCategoryApi.customerCategoryTree().then((res) => {
 			parentTreeData.value = [
 				{
 					id: 0,
@@ -94,7 +100,7 @@
 	// 默认要校验的
 	const formRules = {
 		name: [required('请输入名称')],
-		parentId: [required('请选择上级')],
+		parentId: [required('请选择上级')]
 	}
 	// 验证并提交数据
 	const onSubmit = () => {

src/views/basicData/client/detail/index.vue

@@ -71,7 +71,7 @@
 				</a-table>
 			</a-tab-pane>
 			<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
-				<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation>
+				<OperationalInformation :detailData="detailData" :colSpan="6"></OperationalInformation>
 			</a-tab-pane>
 		</a-tabs>
 	</a-card>

src/views/basicData/materiel/detail/index.vue

@@ -15,9 +15,9 @@
 		/>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
 		<a-tabs v-model:activeKey="activeKey">
-			<a-tab-pane key="1" tab="基本信息">
+			<a-tab-pane key="1" tab="基本信息" forceRender>
 				<DynamicForm
 					:allDisabled="route.query.type === 'SEARCH'"
 					:formItems="baseFormItems"
@@ -26,7 +26,7 @@
 					ref="formRef2"
 				/>
 			</a-tab-pane>
-			<a-tab-pane key="2" tab="单位信息" force-render>
+			<a-tab-pane key="2" tab="单位信息" forceRender>
 				<DynamicForm
 					:allDisabled="route.query.type === 'SEARCH'"
 					:formItems="unitFormItems"
@@ -35,7 +35,7 @@
 					ref="formRef3"
 				/>
 			</a-tab-pane>
-			<a-tab-pane key="3" tab="包装关系" force-render>
+			<a-tab-pane key="3" tab="包装关系" forceRender>
 				<a-table :dataSource="dataSource" :columns="columns">
 					<template #bodyCell="{ column, record }">
 						<template v-if="column.dataIndex === 'enabledState'">
@@ -74,7 +74,7 @@
 					</template>
 				</a-table>
 			</a-tab-pane>
-			<a-tab-pane key="4" tab="商品推广" force-render>
+			<a-tab-pane key="4" tab="商品推广" forceRender>
 				<a-form :model="productFormData" class="w-1/3" layout="vertical">
 					<a-form-item label="是否启用" name="promoteEnabledState">
 						<a-select
@@ -106,21 +106,19 @@
 					</a-form-item>
 				</a-form>
 			</a-tab-pane>
-			<a-tab-pane key="5" tab="扩展字段" force-render>
-				<a-form layout="vertical" :model="extendFormData">
-					<a-row :gutter="16">
-						<a-col :span="item.span || 6" v-for="(item, index) in extendData" :key="index">
-							<a-form-item :label="item.label" :name="item.name" :rules="item.rules">
-								<component
-									style="width: 100%"
-									:is="item.type"
-									v-model:value="extendFormData[item.name]"
-									v-bind="item.attrs"
+			<a-tab-pane key="5" tab="扩展字段" forceRender v-if="extendData.length > 0">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="extendData"
+					:model="extendFormData"
+					:rules="formRules"
+					v-if="extendData.length > 0"
 				/>
-							</a-form-item>
-						</a-col>
-					</a-row>
-				</a-form>
+
+				<a-empty v-else />
+			</a-tab-pane>
+			<a-tab-pane key="6" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
 			</a-tab-pane>
 		</a-tabs>
 	</a-card>
@@ -129,7 +127,6 @@
 <script setup name="materielDetail">
 	import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
 	import unitApi from '@/api/base/unit/unitApi'
-	import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
 
 	import { required } from '@/utils/formRules'
 	import useFormHandler from '@/hook/useFormHandler'
@@ -151,7 +148,6 @@
 		promoteEnabledState: 'ENABLE'
 	})
 	let extendData = ref([]) // 扩展字段
-	let extendFormData = ref({}) // 扩展字段
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value, formRef3.value]
@@ -176,11 +172,6 @@
 				unitOptions = unitList
 
 				dataSource.value = packageData
-
-				if (res.extJson) {
-					extendFormData.value = JSON.parse(res.extJson)
-					console.log(extendFormData.value, 'extendFormData.value')
-				}
 			}
 		})
 
@@ -234,40 +225,7 @@
 				}
 			})
 
-		// 字段扩展
-		extendFieldApi
-			.extendFieldTypeList({
-				enabledState: 'ENABLE',
-				model: 'MATERIAL'
-			})
-			.then((res) => {
-				if (res) {
-					res.forEach((item) => {
-						const showValues = JSON.parse(item.showValues)
-						let options = []
-						showValues.forEach((value) => {
-							options.push({
-								value: value.name,
-								label: value.name
-							})
-						})
-						extendData.value.push({
-							label: item.name,
-							name: item.fieldName,
-							type: item.showType,
-							span: 6,
-							attrs: {
-								placeholder: '请输入内容',
-								options
-							}
-						})
-					})
-
-					extendData.value.forEach((item) => {
-						if (item.fieldName) extendFormData.value[item.fieldName] = null
-					})
-				}
-			})
+		extendData.value = await getExtendField('MATERIAL')
 	})
 
 	let activeKey = ref('1')
@@ -298,13 +256,12 @@
 	}
 
 	const onSubmitForm = () => {
-		console.log(extendFormData.value, 'extendFormData.value')
 		onSubmit({
 			isDeep: true,
 			materialPackageList: dataSource.value,
 			...formData,
 			...productFormData.value,
-			extJson: JSON.stringify(extendFormData.value)
+			extJson: JSON.stringify(extendFormData.value) || ''
 		})
 	}
 
@@ -711,11 +668,9 @@
 		}
 	]
 
-	const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
-		[...materialFormItems, ...baseFormItems, ...unitFormItems],
-		{
+	const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
+		useFormHandler([...materialFormItems, ...baseFormItems, ...unitFormItems], {
 			submitForm: materialApi.materialSubmitForm,
 			getDetail: materialApi.materialDetail
-		}
-	)
+		})
 </script>

src/views/basicData/publicAccount/detail/index.vue

@@ -15,7 +15,9 @@
 		/>
 	</a-card>
 
-	<a-card :bordered="false" title="基本信息" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
+		<a-tabs v-model:activeKey="activeKey">
+			<a-tab-pane key="1" tab="基本信息" forceRender>
 				<DynamicForm
 					:allDisabled="route.query.type === 'SEARCH'"
 					:formItems="basicInfoFormItems"
@@ -23,10 +25,22 @@
 					:rules="formRules"
 					ref="formRef2"
 				/>
-	</a-card>
+			</a-tab-pane>
+			<a-tab-pane key="2" tab="扩展字段" forceRender v-if="extendData.length > 0">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="extendData"
+					:model="extendFormData"
+					:rules="formRules"
+					v-if="extendData.length > 0"
+				/>
 
-	<a-card :bordered="false" title="操作信息" class="mt-4" v-if="route.query.type !== 'ADD'">
-		<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation>
+				<a-empty v-else />
+			</a-tab-pane>
+			<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
+			</a-tab-pane>
+		</a-tabs>
 	</a-card>
 </template>
 
@@ -48,14 +62,14 @@
 	const formRef1 = ref(null)
 	const formRef2 = ref(null)
 	let detailData = ref({})
+	let activeKey = ref('1')
+	let extendData = ref([])
 
-	const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
-		[...officialAccountFormItems, ...basicInfoFormItems],
-		{
+	const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
+		useFormHandler([...officialAccountFormItems, ...basicInfoFormItems], {
 			submitForm: officialAccountApi.officialAccountSubmitForm,
 			getDetail: officialAccountApi.officialAccountDetail
-		}
-	)
+		})
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value]
@@ -64,5 +78,7 @@
 				detailData.value = res
 			}
 		})
+
+		extendData.value = await getExtendField('MATERIAL')
 	})
 </script>

src/views/basicData/stash/detail/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<a-page-header style="padding: 10px; font-size: 20px" @back="handleBack">
 		<template #extra>
-			<a-button v-if="route.query.type !== 'SEARCH'" key="1" type="primary" @click="onSubmit">保存</a-button>
+			<a-button v-if="route.query.type !== 'SEARCH'" key="1" type="primary" @click="onSubmitForm">保存</a-button>
 		</template>
 	</a-page-header>
 
@@ -15,7 +15,7 @@
 		/>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
 		<a-tabs v-model:activeKey="activeKey">
 			<a-tab-pane key="1" tab="基本信息">
 				<DynamicForm
@@ -26,6 +26,20 @@
 					ref="formRef2"
 				/>
 			</a-tab-pane>
+			<a-tab-pane key="2" tab="扩展字段" forceRender v-if="extendData.length > 0">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="extendData"
+					:model="extendFormData"
+					:rules="formRules"
+					v-if="extendData.length > 0"
+				/>
+
+				<a-empty v-else />
+			</a-tab-pane>
+			<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
+			</a-tab-pane>
 		</a-tabs>
 		<user-selector-plus
 			ref="userSelectorPlusProRef"
@@ -49,6 +63,7 @@
 	import userCenterApi from '@/api/sys/userCenterApi'
 	const route = useRoute()
 	const userSelectorPlusProRef = ref(null)
+	let extendData = ref([])
 
 	// 传递设计器需要的API
 	const selectorApiFunction = {
@@ -219,13 +234,19 @@
 	const formRef1 = ref(null)
 	const formRef2 = ref(null)
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
-		[...officialAccountFormItems, ...baseFormItems],
-		{
+	const { inform, formData, extendFormData, formRefs, onSubmit, handleBack, fetchData, getExtendField } =
+		useFormHandler([...officialAccountFormItems, ...baseFormItems], {
 			submitForm: sysStoreApi.sysStoreSubmitForm,
 			getDetail: sysStoreApi.sysStoreDetail
+		})
+
+	const onSubmitForm = () => {
+		onSubmit({
+			isDeep: true,
+			...formData,
+			extJson: JSON.stringify(extendFormData.value) || ''
+		})
 	}
-	)
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value]
@@ -248,27 +269,9 @@
 				]
 			}
 		})
+
+		extendData.value = await getExtendField('MATERIAL')
 	})
 
 	let activeKey = ref('1')
-
-	const data = ref([
-		{ id: '1', name: 'John', age: 28 },
-		{ id: '2', name: 'Jane', age: 22 }
-	])
-
-	const columns = [
-		{
-			title: '上游仓库代码',
-			dataIndex: 'name',
-			editable: true,
-			dataType: 'text' // 或 'number', 'select'
-		},
-		{
-			title: '上游仓库名称',
-			dataIndex: 'age',
-			editable: true,
-			dataType: 'number'
-		}
-	]
 </script>

src/views/basicData/unit/columns/unitColumns.js

@@ -2,37 +2,62 @@ export const unitColumns = [
 	{
 		title: '编码',
 		dataIndex: 'number',
-		width: 150,
+		width: 200,
 		resizable: true,
-		align: 'center'
+		align: 'center',
+		sorter: true,
+		sortDirections: ['descend', 'ascend'],
+		ellipsis: true
 	},
 	{
 		title: '名称',
 		dataIndex: 'name',
-		width: 150,
+		width: 200,
 		resizable: true,
-		align: 'center'
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '单位组',
+		dataIndex: 'unitGroupName',
+		width: 200,
+		resizable: true,
+		align: 'center',
+		ellipsis: true
 	},
 	{
 		title: '可用状态',
 		dataIndex: 'enabledState',
-		width: 150,
+		width: 200,
 		resizable: true,
-		align: 'center'
+		align: 'center',
+		ellipsis: true
 	},
 	{
 		title: '换算率',
 		dataIndex: 'rate',
 		width: 200,
 		resizable: true,
-		align: 'center'
+		align: 'center',
+		ellipsis: true
 	},
 	{
 		title: '是否基本单位',
 		dataIndex: 'isBase',
 		width: 200,
 		resizable: true,
-		align: 'center'
+		align: 'center',
+		ellipsis: true
+	},
+	{
+		title: '换算率',
+		dataIndex: 'rate',
+		width: 200,
+		resizable: true,
+		align: 'center',
+		sorter: true,
+		sortDirections: ['descend', 'ascend'],
+		ellipsis: true
 	}
 ]
 

src/views/basicData/unit/detail/UnitGroupForm.vue

@@ -21,6 +21,7 @@
 				/>
 			</a-form-item>
 		</a-form>
+		<OperationalInformation :detailData="formData" :colSpan="12" v-if="formData.id"></OperationalInformation>
 		<template #footer>
 			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
 			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
@@ -41,7 +42,7 @@
 	const formData = ref({
 		number: '',
 		name: '',
-		enabledState: 'ENABLE',
+		enabledState: 'ENABLE'
 	})
 	const submitLoading = ref(false)
 	const enabledStateOptions = ref([])
@@ -56,6 +57,7 @@
 			formData.value.number = ''
 			formData.value.name = ''
 			formData.value.enabledState = 'ENABLE'
+			formData.id = ''
 		}
 	}
 	// 关闭抽屉

src/views/basicData/unit/detail/index.vue

@@ -1,89 +1,51 @@
 <template>
 	<a-page-header style="padding: 10px; font-size: 20px" @back="handleBack">
 		<template #extra>
-			<a-button key="1" type="primary" @click="onSubmit">保存</a-button>
+			<a-button key="1" type="primary" @click="onSubmitForm">保存</a-button>
 		</template>
 	</a-page-header>
-	<a-card :bordered="false" title="基本信息">
-		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
-			<a-row :gutter="16">
-				<a-col :span="6">
-					<a-form-item label="单位组：" name="unitGroupId">
-						<a-select
-							v-model:value="formData.unitGroupId"
-							placeholder="请选择单位组"
-							:options="unitGroupList"
-							:fieldNames="{
-								label: 'name',
-								value: 'id'
-							}"
+	<a-card :bordered="false" title="单位信息">
+		<DynamicForm
+			:allDisabled="route.query.type === 'SEARCH'"
+			:formItems="unitFormItems"
+			:model="formData"
+			:rules="formRules"
+			ref="formRef1"
 		/>
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="编码：" name="number">
-						<a-input v-model:value="formData.number" placeholder="请输入编码" allow-clear />
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="名称：" name="name">
-						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="可用状态：">
-						<a-select
-							v-model:value="formData.enabledState"
-							placeholder="请选择可用状态"
-							:options="tool.dictList('COMMON_STATUS')"
+	</a-card>
+
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
+		<a-tabs v-model:activeKey="activeKey">
+			<a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="extendData"
+					:model="extendFormData"
+					:rules="formRules"
+					v-if="extendData.length > 0"
 				/>
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="换算率：" name="rate">
-						<a-input v-model:value="formData.rate" placeholder="请输入换算率" allow-clear />
-					</a-form-item>
-				</a-col>
-				<a-col :span="6">
-					<a-form-item label="是否基本单位：" name="isBase">
-						<a-select
-							v-model:value="formData.isBase"
-							placeholder="请选择是否基本单位"
-							:options="tool.dictList('YES_NO')"
-						/>
-					</a-form-item>
-				</a-col>
-				<a-col :span="24">
-					<a-form-item label="备注：" name="remarks">
-						<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear />
-					</a-form-item>
-				</a-col>
-			</a-row>
-		</a-form>
+
+				<a-empty v-else />
+			</a-tab-pane>
+			<a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
+			</a-tab-pane>
+		</a-tabs>
 	</a-card>
 </template>
 
 <script setup name="basicDataUnitDetail">
 	import tool from '@/utils/tool'
-	import { cloneDeep } from 'lodash-es'
 	import { required } from '@/utils/formRules'
-	import useTabs from '@/utils/useTabs'
-	import router from '@/router'
 	import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
-	import unitApi from '@/api/base/unit/unitApi'
+	import useFormHandler from '@/hook/useFormHandler'
 	import { useRoute } from 'vue-router'
-	const useRouter = useRoute()
+	import unitApi from '@/api/base/unit/unitApi'
+	const route = useRoute()
 
-	// 抽屉状态
-	const visible = ref(false)
-	const emit = defineEmits({ successful: null })
-	const formRef = ref()
-	// 表单数据
-	const formData = ref({
-		enabledState: 'ENABLE',
-		isBase: 'NO'
-	})
-	const submitLoading = ref(false)
+	const formRef1 = ref()
+	let activeKey = ref('1')
+	let extendData = ref([])
 
 	// 默认要校验的
 	const formRules = {
@@ -91,52 +53,119 @@
 		name: [required('请输入名称')],
 		isBase: [required('请选择是否基本单位')]
 	}
-	// 验证并提交数据
-	const onSubmit = () => {
-		formRef.value.validate().then(() => {
-			submitLoading.value = true
-			const formDataParam = cloneDeep(formData.value)
-			unitApi
-				.sysUnitSubmitForm(formDataParam, formDataParam.id)
-				.then(() => {
-					// emit('successful')
-					handleBack()
-				})
-				.finally(() => {
-					submitLoading.value = false
-				})
-		})
-	}
-	// 返回之后关闭标签
-	const handleBack = () => {
-		router.replace('/basicData/unit')
-		useTabs.close()
-	}
 
-	let state = reactive({
-		PAGE_TYPE: ''
-	})
 	let unitGroupList = ref([])
-	onMounted(() => {
+	onMounted(async () => {
+		formRefs.value = [formRef1.value]
+		await fetchData(route.query.type)
+
 		// 单位组
-		unitGroupsApi
-			.sysUnitGroupList({
+		const unitGroupsList = await unitGroupsApi.sysUnitGroupList({
 			enabledState: 'ENABLE'
 		})
-			.then((res) => {
-				unitGroupList.value = res
-			})
 
-		state.PAGE_TYPE = useRouter.query.type
-		if (state.PAGE_TYPE && state.PAGE_TYPE !== 'ADD') {
-			state.detailId = useRouter.query.id
-			unitApi
-				.sysUnitDetail({
-					id: useRouter.query.id
-				})
-				.then((res) => {
-					formData.value = res
-				})
+		unitGroupsList &&
+			unitFormItems.forEach((item) => {
+				if (item.name === 'unitGroupId') {
+					item.attrs.options = unitGroupsList
 				}
 			})
+
+		extendData.value = await getExtendField('MATERIAL')
+	})
+
+	const onSubmitForm = () => {
+		onSubmit({
+			isDeep: true,
+			...formData,
+			extJson: JSON.stringify(extendFormData.value) || ''
+		})
+	}
+
+	const unitFormItems = reactive([
+		{
+			label: '名称：',
+			name: 'name',
+			type: 'a-input',
+			span: 6,
+			rules: [required('请输入名称')],
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '编码：',
+			name: 'number',
+			type: 'a-input-number',
+			span: 6,
+			attrs: {
+				placeholder: '请输入编码',
+				allowClear: true
+			}
+		},
+		{
+			label: '单位组：',
+			name: 'unitGroupId',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择可用状态',
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
+			},
+			defaultValue: ''
+		},
+		{
+			label: '换算率：',
+			name: 'number',
+			type: 'a-input-number',
+			span: 6,
+			attrs: {
+				placeholder: '请输入换算率',
+				allowClear: true
+			}
+		},
+		{
+			label: '是否基本单位：',
+			name: 'isBase',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择是否基本单位',
+				options: tool.dictList('YES_NO')
+			},
+			defaultValue: 'NO'
+		},
+		{
+			label: '可用状态：',
+			name: 'enabledState',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择可用状态',
+				options: tool.dictList('COMMON_STATUS')
+			},
+			defaultValue: 'ENABLE'
+		},
+		{
+			label: '备注：',
+			name: 'remarks',
+			type: 'a-textarea',
+			span: 24,
+			attrs: {
+				placeholder: '请输入备注',
+				allowClear: true
+			}
+		}
+	])
+
+	const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
+		useFormHandler([...unitFormItems], {
+			submitForm: unitApi.sysUnitSubmitForm,
+			getDetail: unitApi.sysUnitDetail
+		})
 </script>

src/views/basicData/unit/index.vue

@@ -8,8 +8,12 @@
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="状态" name="enabledState">
-						<a-select v-model:value="searchFormState.enabledState" placeholder="请选择状态" :options="stateOptions" />
+					<a-form-item label="可用状态" name="enabledState">
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择状态"
+							:options="tool.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -22,12 +26,12 @@
 						<a-select
 							v-model:value="searchFormState.isBase"
 							placeholder="请选择是否基本单位"
-							:options="isBaseOptions"
+							:options="tool.dictList('YES_NO')"
 						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-button type="primary" @click="unitTableRef.refresh()">查询</a-button>
+					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
 					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
 					<a @click="toggleAdvanced" style="margin-left: 8px">
 						{{ advanced ? '收起' : '展开' }}
@@ -39,7 +43,7 @@
 	</a-card>
 
 	<a-card class="mt-4" :border="false" style="height: 100%">
-		<a-row :gutter="30">
+		<a-row :gutter="24">
 			<a-col :span="6">
 				<s-table
 					ref="unitGroupTableRef"
@@ -52,6 +56,10 @@
 					@editRowData="handleEditRowData"
 					@deleteRowData="handleDeleteRowData"
 					:rowSelection="unitGroupRowSelection"
+					:scroll="{
+						x: 100,
+						y: 'calc(100vh - 300px)'
+					}"
 				>
 					<template #operator class="table-operator">
 						<span>单位组</span>
@@ -65,20 +73,21 @@
 								un-checked-children="停用"
 								v-model:checked="record.enabledState"
 							/>-->
-							{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }}
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
 						</template>
 					</template>
 				</s-table>
 			</a-col>
 			<a-col :span="18">
 				<s-table
-					ref="unitTableRef"
-					:columns="unitColumns"
+					ref="tableRef"
+					:columns="columns"
 					:data="loadData"
 					:alert="options.alert.show"
 					bordered
 					:row-key="(record) => record.id"
-					:tool-config="unitToolConfig"
+					:tool-config="options.toolConfig"
 					:row-selection="options.rowSelection"
 					:scroll="{
 						x: 100,
@@ -102,7 +111,7 @@
 							<xn-batch-delete
 								v-if="hasPerm('customerBatchDelete')"
 								:selectedRowKeys="selectedRowKeys"
-								@batchDelete="deleteBatchSysUnit"
+								@batchDelete="deleteBatchRecords"
 							/>
 						</a-space>
 					</template>
@@ -171,20 +180,38 @@
 <script setup name="basicDataUnit">
 	import sysUnitApi from '@/api/base/unit/unitApi'
 	import sysUnitGroupsApi from '@/api/base/unit/unitGroupsApi'
-	import tool from '@/utils/tool'
-	import { cloneDeep } from 'lodash-es'
-	import { useNavigation } from '@/hook/useNavigation'
+
 	import { message } from 'ant-design-vue'
 	import { unitColumns, unitGroupColumns } from '@/views/basicData/unit/columns/unitColumns'
 	import UnitGroupForm from '@/views/basicData/unit/detail/UnitGroupForm.vue'
+	import { useTableManagement } from '@/hook/useTableManagement'
+	import tool from '@/utils/tool'
 
 	// ------------------------------ 组件 REF 变量定义 ------------------------------ //
-	const searchFormRef = ref()
+	const {
+		searchFormState,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		navigateTo,
+		toggleAdvanced,
+		advanced
+	} = useTableManagement(
+		{
+			page: sysUnitApi.sysUnitPage,
+			delete: sysUnitApi.sysUnitDelete
+		},
+		unitColumns,
+		['officialAccountEdit', 'officialAccountDelete']
+	)
 
-	const searchFormState = ref({})
+	// 单位组
 	const UnitGroupFormRef = ref()
-	const unitTableRef = ref()
-	const unitToolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
 	const unitGroupTableRef = ref()
 	const unitGroupToolConfig = {
 		refresh: true,
@@ -195,80 +222,6 @@
 		edit: true,
 		delete: true
 	}
-	// 查询区域显示更多控制
-	const advanced = ref(false)
-	const toggleAdvanced = () => {
-		advanced.value = !advanced.value
-	}
-	// 操作栏通过权限判断是否显示
-	if (hasPerm(['sysUnitEdit', 'sysUnitDelete'])) {
-		const columnsFilter = unitColumns.filter((item) => item.dataIndex === 'action')
-		if (columnsFilter.length === 0)
-			unitColumns.unshift({
-				title: '操作',
-				dataIndex: 'action',
-				align: 'center',
-				fixed: 'left',
-				width: 150
-			})
-	}
-	const selectedRowKeys = ref([])
-	// 列表选择配置
-	const options = {
-		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
-		alert: {
-			show: true,
-			clear: () => {
-				selectedRowKeys.value = ref([])
-			}
-		},
-		rowSelection: {
-			onChange: (selectedRowKey, selectedRows) => {
-				selectedRowKeys.value = selectedRowKey
-			}
-		}
-	}
-	const loadData = (parameter) => {
-		const searchFormParam = cloneDeep(searchFormState.value)
-		return sysUnitApi.sysUnitPage(Object.assign(parameter, searchFormParam)).then((data) => {
-			return data
-		})
-	}
-
-	const loadGroupsData = (parameter) => {
-		return sysUnitGroupsApi.sysUnitGroupPage(Object.assign(parameter)).then((data) => {
-			return data
-		})
-	}
-	// 重置
-	const reset = () => {
-		searchFormRef.value.resetFields()
-		unitTableRef.value.refresh(true)
-	}
-	// 删除
-	const deleteSysUnit = (record) => {
-		let params = [
-			{
-				id: record.id
-			}
-		]
-		sysUnitApi.sysUnitDelete(params).then(() => {
-			unitTableRef.value.refresh(true)
-		})
-	}
-	// 批量删除
-	const deleteBatchSysUnit = (params) => {
-		sysUnitApi.sysUnitDelete(params).then(() => {
-			unitTableRef.value.clearRefreshSelected()
-		})
-	}
-	const stateOptions = tool.dictList('COMMON_STATUS')
-	const isBaseOptions = tool.dictList('YES_NO')
-
-	// 跳转
-	const { navigateTo } = useNavigation()
-
-	// 单位组
 	let unitGroupRecord = ''
 	let unitGroupSelectedRowKeys = ref([])
 	const unitGroupRowSelection = {
@@ -276,13 +229,19 @@
 		onChange: (selectedRowKey, selectedRows) => {
 			unitGroupRecord = selectedRows[0]
 			searchFormState.value.unitGroupId = selectedRowKey[0]
-			unitTableRef.value.refresh()
+			tableRef.value.refresh()
 			unitGroupSelectedRowKeys.value = selectedRowKey
 		}
 	}
+	const loadGroupsData = (parameter) => {
+		return sysUnitGroupsApi.sysUnitGroupPage(Object.assign(parameter)).then((data) => {
+			return data
+		})
+	}
+
 	const handlePlusRowData = () => {
 		unitGroupRecord = ''
-		unitGroupTableRef.value.clearSelected()
+		tableRef.value.clearSelected()
 		UnitGroupFormRef.value.onOpen()
 	}
 
@@ -301,15 +260,21 @@
 			])
 			.then(() => {
 				searchFormState.value.unitGroupId = ''
-				unitGroupTableRef.value.clearSelected()
+				tableRef.value.clearSelected()
+				tableRef.value.refresh()
+
 				unitGroupTableRef.value.refresh()
+				unitGroupTableRef.value.clearSelected()
 			})
 	}
 
 	const successful = () => {
 		searchFormState.value.unitGroupId = ''
-		unitGroupTableRef.value.refresh()
+		tableRef.value.refresh()
 		unitGroupRecord = ''
+		tableRef.value.clearSelected()
+
+		unitGroupTableRef.value.refresh()
 		unitGroupTableRef.value.clearSelected()
 	}
 </script>