基础资料模块优化

src/api/base/extendfield/extendFieldApi.js

@@ -20,5 +20,9 @@ export default {
 	// 获取扩展字段配置详情
 	extendFieldDetail(data) {
 		return request('detail', data, 'get')
+	},
+	// 获取扩展字段配置列表（根据分类）
+	extendFieldTypeList(data) {
+		return request('typeList', data, 'get')
 	}
 }

src/components/DynamicTree/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<div>
+		<a-spin :spinning="localLoading">
 			<div class="s-table-tool">
 				<div class="s-table-tool-left">{{ treeTitle }}</div>
 				<div class="layout-items-center s-table-tool-right">
@@ -19,13 +20,18 @@
 							</a-popconfirm>
 						</a-tooltip>
 						<!-- 刷新 -->
-					<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'refresh' && props.toolConfig.refresh">
+						<a-tooltip
+							:title="item.title"
+							class="s-tool-item"
+							v-if="item.name === 'refresh' && props.toolConfig.refresh"
+						>
 							<component class="icons" :is="item.icon" @click="loadTreeData()"></component>
 						</a-tooltip>
 					</span>
 				</div>
 			</div>
 			<a-directory-tree
+				:loading="localLoading"
 				show-line
 				v-model:expandedKeys="expandedKeys"
 				v-model:selectedKeys="selectedKeys"
@@ -38,6 +44,7 @@
 				:tree-data="treeData"
 				@select="handleTreeClick"
 			></a-directory-tree>
+		</a-spin>
 	</div>
 </template>
 
@@ -84,7 +91,7 @@
 		}
 	})
 
-	const emits = defineEmits('selectTree', 'delTree')
+	const emit = defineEmits(['selectTree', 'delTree'])
 
 	const tool = [
 		{
@@ -112,12 +119,20 @@
 	// 树结构
 	const expandedKeys = ref()
 	const selectedKeys = ref([])
-	const treeData = ref([])
+	const localLoading = ref(false)
+	const treeData = ref([
+		{
+			id: 0,
+			parentId: '-1',
+			name: '顶级',
+			children: ''
+		}
+	])
 	let treeRow = {}
 
 	const handleTreeClick = (selectedKeys, event) => {
 		treeRow = event.node
-		emits('selectTree', treeRow)
+		emit('selectTree', treeRow)
 	}
 
 	const handleAddTree = () => {
@@ -141,11 +156,13 @@
 
 	const loadTreeData = async () => {
 		try {
+			localLoading.value = true
 			const treeRes = await props.apiModel.getTree()
+			console.log(treeRes, 'treeRes')
 			if (Array.isArray(treeRes)) {
-				treeData.value = treeRes
+				treeData.value[0].children = treeRes
 			} else {
-				treeData.value = []
+				treeData.value[0].children = []
 			}
 
 			if (selectedKeys.value.length > 0) {
@@ -157,7 +174,12 @@
 			if (treeRow.id) {
 				treeRow = []
 			}
+
+			setTimeout(() => {
+				localLoading.value = false
+			}, 800)
 		} catch (e) {
+			localLoading.value = false
 			message.error('获取树结构数据失败:' + e)
 			console.error('获取树结构数据失败:' + e)
 		}

src/components/OperationalInformation/index.vue

@@ -62,7 +62,8 @@
 			detailDataProps.value = props.detailData
 		},
 		{
-			immediate: true
+			immediate: true,
+			deep: true
 		}
 	)
 </script>

src/hook/useFormHandler.js

@@ -13,6 +13,7 @@ export default function useFormHandler(formItems, api) {
 	const state = reactive({
 		PAGE_TYPE: ''
 	})
+	let detailData = reactive({})
 
 	// 初始化表单数据对象
 	let formData = reactive({})
@@ -84,8 +85,8 @@ export default function useFormHandler(formItems, api) {
 	 * 处理返回操作，返回上一级页面并关闭当前标签页。
 	 */
 	const handleBack = () => {
+		useTabs.close(route)
 		router.go(-1) // 优化为通用的返回上一页操作
-		useTabs.close()
 	}
 
 	/**
@@ -98,6 +99,7 @@ export default function useFormHandler(formItems, api) {
 		if (pageType && pageType !== 'ADD') {
 			try {
 				const res = await api.getDetail({ id: route.query.id })
+
 				// 根据返回的详情数据初始化表单数据
 				for (let key in formData) {
 					if (res[key] !== undefined) {
@@ -117,6 +119,7 @@ export default function useFormHandler(formItems, api) {
 		formData,
 		submitLoading,
 		formRefs,
+		detailData,
 		onSubmit,
 		handleBack,
 		fetchData

src/layout/components/tags.vue

@@ -52,7 +52,7 @@
 					<right-outlined />
 				</div>
 			</template>
-			<a-tab-pane v-for="tag in tagList" :key="tag.fullPath" :tab="tag.meta.title" :closable="!tag.meta.affix">
+			<a-tab-pane v-for="tag in tagList" :key="tag.path" :tab="tag.meta.title" :closable="!tag.meta.affix">
 			</a-tab-pane>
 		</a-tabs>
 	</div>
@@ -94,7 +94,7 @@
 	})
 	watch(route, (to) => {
 		addViewTags(to)
-		activeKey.value = to.fullPath
+		activeKey.value = to.path
 	})
 	watch(layoutTagsOpen, () => {
 		// closeOtherCacheTabs()
@@ -107,10 +107,10 @@
 	})
 	// 增加tag
 	const addViewTags = (to) => {
-		activeKey.value = to.fullPath
-		if (to.name && !to.meta.fullpage) {
+		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]
@@ -158,9 +158,9 @@
 		const nowTag = getCurrentTag()
 		// 判断是否当前路由，否的话跳转
 		// eslint-disable-next-line eqeqeq
-		if (route.fullPath !== nowTag.fullPath) {
+		if (route.path !== nowTag.path) {
 			router.push({
-				path: nowTag.fullPath,
+				path: nowTag.path,
 				query: nowTag.query
 			})
 		}
@@ -189,16 +189,16 @@
 		const nowTag = getCurrentTag()
 		// 判断是否当前路由，否的话跳转
 		// eslint-disable-next-line eqeqeq
-		if (route.fullPath !== nowTag.fullPath) {
+		if (route.path !== nowTag.path) {
 			router.push({
-				path: nowTag.fullPath,
+				path: nowTag.path,
 				query: nowTag.query
 			})
 		}
 		const tags = [...tagList.value]
 		tags.forEach((tag) => {
 			// eslint-disable-next-line eqeqeq
-			if ((tag.meta && tag.meta.affix) || nowTag.fullPath === tag.fullPath) {
+			if ((tag.meta && tag.meta.affix) || nowTag.path === tag.path) {
 				return true
 			} else {
 				closeSelectedTag(tag, false)
@@ -219,9 +219,9 @@
 		const nowTag = getCurrentTag()
 		// 判断是否当前路由，否的话跳转
 		// eslint-disable-next-line eqeqeq
-		if (route.fullPath !== nowTag.fullPath) {
+		if (route.path !== nowTag.path) {
 			router.push({
-				path: nowTag.fullPath,
+				path: nowTag.path,
 				query: nowTag.query
 			})
 		}
@@ -265,7 +265,7 @@
 
 	const onTabRemove = (tabKey, action) => {
 		if (action === 'remove') {
-			const tag = tagList.value.find((tag) => tag.fullPath === tabKey)
+			const tag = tagList.value.find((tag) => tag.path === tabKey)
 			closeSelectedTag(tag)
 		}
 	}
@@ -319,9 +319,7 @@
 						background: none;
 						height: 40px;
 						line-height: 40px;
-						transition:
-							background-color 0.3s,
-							color 0.3s;
+						transition: background-color 0.3s, color 0.3s;
 						padding: 0 16px;
 						border-radius: 0;
 						border: none;
@@ -442,9 +440,7 @@
 		position: relative;
 		z-index: 1;
 		border-radius: 10px 10px 0 0 !important;
-		box-shadow:
-			12px 15px 0 0 var(--primary-1),
-			-12px 15px 0 0 var(--primary-1);
+		box-shadow: 12px 15px 0 0 var(--primary-1), -12px 15px 0 0 var(--primary-1);
 	}
 	.snowy-radius .ant-tabs-tab-active::before {
 		content: '';

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

@@ -70,6 +70,9 @@
 					</template>
 				</a-table>
 			</a-tab-pane>
+			<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation>
+			</a-tab-pane>
 		</a-tabs>
 	</a-card>
 </template>
@@ -83,8 +86,8 @@
 	import useFormHandler from '@/hook/useFormHandler'
 	import tool from '@/utils/tool'
 	import { useRoute } from 'vue-router'
-	const route = useRoute()
 	import cityOptions from '@/utils/cityOptions'
+	const route = useRoute()
 
 	const formRules = {
 		name: [required('请输入名称')],
@@ -92,6 +95,7 @@
 		appid: [required('请输入AppID')],
 		secret: [required('请输入AppSecret')]
 	}
+	let detailData = reactive({})
 
 	// 级联选择
 	const onCascaderChange = (value) => {
@@ -321,9 +325,12 @@
 	}
 
 	onMounted(async () => {
+		console.log(1)
 		formRefs.value = [formRef1.value, formRef2.value]
 		fetchData(route.query.type).then((res) => {
 			if (res) {
+				detailData = res
+
 				formData.provinceName = [res.province, res.city, res.county]
 
 				customerApi
@@ -350,7 +357,6 @@
 			})
 
 		// 客户分类
-
 		customerCategoryApi
 			.customerCategoryTree({
 				enabledState: 'ENABLE'

src/views/basicData/client/formItems/index.js

@@ -0,0 +1,95 @@
+import tool from '@/utils/tool'
+import { required } from '@/utils/formRules'
+
+export const officialAccountFormItems = [
+	{
+		label: '类型：',
+		name: 'type',
+		type: 'a-select',
+		span: 8,
+		attrs: {
+			placeholder: '请选择类型',
+			options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+		}
+	},
+	{
+		label: '名称：',
+		name: 'name',
+		type: 'a-input',
+		span: 8,
+		rules: [required('请输入名称')],
+		attrs: {
+			placeholder: '请输入名称',
+			allowClear: true
+		}
+	},
+	{
+		label: '可用状态：',
+		name: 'enabledState',
+		type: 'a-select',
+		span: 8,
+		attrs: {
+			placeholder: '请选择可用状态',
+			options: tool.dictList('COMMON_STATUS')
+		},
+		defaultValue: 'ENABLE'
+	},
+	{
+		label: '备注：',
+		name: 'remarks',
+		type: 'a-textarea',
+		span: 24,
+		attrs: {
+			placeholder: '请输入备注',
+			allowClear: true
+		}
+	}
+]
+
+export const basicInfoFormItems = [
+	{
+		label: 'AppID：',
+		name: 'appid',
+		type: 'a-input',
+		attrs: {
+			placeholder: '请输入AppID',
+			allowClear: true
+		}
+	},
+	{
+		label: 'AppSecret：',
+		name: 'secret',
+		type: 'a-input',
+		attrs: {
+			placeholder: '请输入AppSecret',
+			allowClear: true
+		}
+	},
+	{
+		label: '字符串编码格式：',
+		name: 'encodingFormat',
+		type: 'a-input',
+		attrs: {
+			placeholder: '请输入字符串编码格式',
+			allowClear: true
+		}
+	},
+	{
+		label: '校验码：',
+		name: 'token',
+		type: 'a-input',
+		attrs: {
+			placeholder: '请输入校验码',
+			allowClear: true
+		}
+	},
+	{
+		label: '签名方式：',
+		name: 'aesKey',
+		type: 'a-input',
+		attrs: {
+			placeholder: '请输入签名方式',
+			allowClear: true
+		}
+	}
+]

src/views/basicData/client/index.vue

@@ -129,7 +129,6 @@
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
 									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
 										<DeleteOutlined />
-										<!--										删除-->
 									</a-button>
 								</a-popconfirm>
 							</a-space>
@@ -142,7 +141,7 @@
 	</a-card>
 </template>
 
-<script setup name="client">
+<script setup name="basicDataClient">
 	import customerApi from '@/api/base/customer/customerApi'
 	import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
 	import { useTableManagement } from '@/hook/useTableManagement'

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

@@ -106,6 +106,17 @@
 					</a-form-item>
 				</a-form>
 			</a-tab-pane>
+			<a-tab-pane key="5" tab="扩展字段" force-render>
+				<a-form layout="vertical">
+					<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="item.defaultValue" v-bind="item.attrs" />
+							</a-form-item>
+						</a-col>
+					</a-row>
+				</a-form>
+			</a-tab-pane>
 		</a-tabs>
 	</a-card>
 </template>
@@ -113,6 +124,7 @@
 <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'
@@ -133,6 +145,7 @@
 	let productFormData = ref({
 		promoteEnabledState: 'ENABLE'
 	})
+	let extendData = ref([]) // 扩展字段
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value, formRef3.value]
@@ -209,6 +222,33 @@
 					item.attrs.options = brandList
 				}
 			})
+
+		// 字段扩展
+		extendFieldApi
+			.extendFieldTypeList({
+				enabledState: 'ENABLE',
+				model: 'MATERIAL'
+			})
+			.then((res) => {
+				if (res) {
+					res.forEach((item) => {
+						extendData.value.push({
+							label: item.fieldName,
+							name: item.fieldName,
+							type: 'ASelect',
+							span: 6,
+							attrs: {
+								placeholder: '请输入内容',
+								options: [],
+								fieldNames: {
+									label: 'name',
+									value: 'id'
+								}
+							}
+						})
+					})
+				}
+			})
 	})
 
 	let activeKey = ref('1')
@@ -651,7 +691,7 @@
 		}
 	]
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+	const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
 		[...materialFormItems, ...baseFormItems, ...unitFormItems],
 		{
 			submitForm: materialApi.materialSubmitForm,

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

@@ -24,13 +24,17 @@
 			ref="formRef2"
 		/>
 	</a-card>
+
+	<a-card :bordered="false" title="操作信息" class="mt-4" v-if="route.query.type !== 'ADD'">
+		<OperationalInformation :detailData="detailData" :colSpan="12"></OperationalInformation>
+	</a-card>
 </template>
 
 <script setup name="publicAccountDetail">
 	import { required } from '@/utils/formRules'
 	import officialAccountApi from '@/api/base/wx/officialAccountApi'
 	import useFormHandler from '@/hook/useFormHandler'
-	import tool from '@/utils/tool'
+	import { basicInfoFormItems, officialAccountFormItems } from '@/views/basicData/client/formItems'
 	import { useRoute } from 'vue-router'
 	const route = useRoute()
 
@@ -41,103 +45,11 @@
 		secret: [required('请输入AppSecret')]
 	}
 
-	const officialAccountFormItems = [
-		{
-			label: '类型：',
-			name: 'type',
-			type: 'a-select',
-			span: 8,
-			attrs: {
-				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
-			}
-		},
-		{
-			label: '名称：',
-			name: 'name',
-			type: 'a-input',
-			span: 8,
-			rules: [required('请输入名称')],
-			attrs: {
-				placeholder: '请输入名称',
-				allowClear: true
-			}
-		},
-		{
-			label: '可用状态：',
-			name: 'enabledState',
-			type: 'a-select',
-			span: 8,
-			attrs: {
-				placeholder: '请选择可用状态',
-				options: tool.dictList('COMMON_STATUS')
-			},
-			defaultValue: 'ENABLE'
-		},
-		{
-			label: '备注：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		}
-	]
-
-	const basicInfoFormItems = [
-		{
-			label: 'AppID：',
-			name: 'appid',
-			type: 'a-input',
-			attrs: {
-				placeholder: '请输入AppID',
-				allowClear: true
-			}
-		},
-		{
-			label: 'AppSecret：',
-			name: 'secret',
-			type: 'a-input',
-			attrs: {
-				placeholder: '请输入AppSecret',
-				allowClear: true
-			}
-		},
-		{
-			label: '字符串编码格式：',
-			name: 'encodingFormat',
-			type: 'a-input',
-			attrs: {
-				placeholder: '请输入字符串编码格式',
-				allowClear: true
-			}
-		},
-		{
-			label: '校验码：',
-			name: 'token',
-			type: 'a-input',
-			attrs: {
-				placeholder: '请输入校验码',
-				allowClear: true
-			}
-		},
-		{
-			label: '签名方式：',
-			name: 'aesKey',
-			type: 'a-input',
-			attrs: {
-				placeholder: '请输入签名方式',
-				allowClear: true
-			}
-		}
-	]
-
 	const formRef1 = ref(null)
 	const formRef2 = ref(null)
+	let detailData = ref({})
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+	const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
 		[...officialAccountFormItems, ...basicInfoFormItems],
 		{
 			submitForm: officialAccountApi.officialAccountSubmitForm,
@@ -147,6 +59,10 @@
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value]
-		await fetchData(route.query.type)
+		fetchData(route.query.type).then((res) => {
+			if (res) {
+				detailData.value = res
+			}
+		})
 	})
 </script>

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

@@ -152,7 +152,7 @@
 			span: 6,
 			attrs: {
 				placeholder: '请选择上游仓库',
-				options: [],
+				treeData: [],
 				fieldNames: {
 					children: 'children',
 					label: 'name',
@@ -236,13 +236,18 @@
 		})
 
 		const sysStoreTreeList = await sysStoreApi.sysStoreTree()
-		if (Array.isArray(sysStoreTreeList)) {
 		officialAccountFormItems.forEach((item) => {
 			if (item.name === 'parentId') {
-					item.attrs.options = sysStoreTreeList
+				item.attrs.treeData = [
+					{
+						id: 0,
+						parentId: '-1',
+						name: '顶级',
+						children: sysStoreTreeList || []
+					}
+				]
 			}
 		})
-		}
 	})
 
 	let activeKey = ref('1')

src/views/basicData/stash/index.vue

@@ -30,6 +30,26 @@
 	</a-card>
 
 	<a-card :bordered="false" class="mt-4" style="height: 100%">
+		<a-row :gutter="24">
+			<a-col :span="6">
+				<dynamic-tree
+					ref="dynamicTreeRef"
+					treeTitle="生产组织"
+					:tableRef="tableRef"
+					:apiModel="{
+						getTree: sysStoreApi.sysStoreTree,
+						delTree: sysStoreApi.productionOrganizationDelete
+					}"
+					@selectTree="onSelectTree"
+					:toolConfig="{
+						plus: false,
+						edit: false,
+						delete: false,
+						refresh: true
+					}"
+				></dynamic-tree>
+			</a-col>
+			<a-col :span="18">
 				<s-table
 					ref="tableRef"
 					:columns="columns"
@@ -117,6 +137,8 @@
 						</template>
 					</template>
 				</s-table>
+			</a-col>
+		</a-row>
 	</a-card>
 </template>
 
@@ -192,4 +214,15 @@
 		stashColumn,
 		['sysStoreEdit', 'sysStoreDelete']
 	)
+
+	const dynamicTreeRef = ref(null)
+
+	const onSelectTree = (value) => {
+		searchFormState.value.parentId = value.id
+		tableRef.value.refresh()
+	}
+
+	onMounted(() => {
+		dynamicTreeRef.value.loadTreeData()
+	})
 </script>

src/views/basicData/tissue/detail/TissueForm.vue

@@ -1,14 +1,14 @@
 <template>
 	<xn-form-container
 		:title="pageType === 'EDIT' ? '编辑生产组织' : pageType === 'ADD' ? '增加生产组织' : '查看生产组织'"
-		:width="700"
+		width="50%"
 		:visible="visible"
 		:destroy-on-close="true"
 		@close="onClose"
 	>
 		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
 			<a-row :gutter="16">
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="编码：" name="number">
 						<a-input
 							:disabled="pageType === 'SEARCH'"
@@ -18,7 +18,7 @@
 						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="类型：" name="type">
 						<a-select
 							:disabled="pageType !== 'ADD'"
@@ -28,7 +28,7 @@
 						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="工厂名称：" name="name">
 						<a-input
 							:disabled="pageType === 'SEARCH'"
@@ -38,7 +38,7 @@
 						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="仓库：" name="storeId">
 						<a-tree-select
 							:disabled="pageType === 'SEARCH'"
@@ -56,8 +56,8 @@
 						</a-tree-select>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
-					<a-form-item label="上级组织：" name="parentId" v-if="formData.type !== 'FACTORY'">
+				<a-col :span="12" v-if="formData.type !== 'FACTORY'">
+					<a-form-item label="上级组织：" name="parentId">
 						<a-tree-select
 							:disabled="pageType === 'SEARCH'"
 							v-model:value="formData.parentId"
@@ -74,7 +74,7 @@
 						</a-tree-select>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="厂家名称：" name="manufacturer" v-if="formData.type === 'FACTORY'">
 						<a-input
 							:disabled="pageType === 'SEARCH'"
@@ -84,7 +84,7 @@
 						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="启用状态：" name="enabledState">
 						<a-select
 							:disabled="pageType === 'SEARCH'"
@@ -96,7 +96,7 @@
 				</a-col>
 			</a-row>
 
-			<OperationalInformation :detailData="detailData" v-if="pageType !== 'ADD'"></OperationalInformation>
+			<OperationalInformation :detailData="detailData" v-if="pageType !== 'ADD'" :colSpan="12"></OperationalInformation>
 		</a-form>
 		<template #footer>
 			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>

src/views/biz/extendedField/detail/form.vue

@@ -0,0 +1,180 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑扩展字段配置' : '增加扩展字段配置'"
+		width="50%"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<a-row :gutter="16">
+				<a-col :span="12">
+					<a-form-item label="名称：" name="name">
+						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="所属模块：" name="model">
+						<a-select
+							v-model:value="formData.model"
+							placeholder="请选择所属模块"
+							:options="tool.dictList('EXTEND_FIELD_MODEL')"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="字段名：" name="fieldName">
+						<a-input v-model:value="formData.fieldName" placeholder="请输入字段名" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="字段名：" name="fieldType">
+						<a-input v-model:value="formData.fieldType" placeholder="请输入字段名" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="展示形式：" name="showType">
+						<a-select
+							v-model:value="formData.showType"
+							placeholder="请选择展示形式"
+							:options="tool.dictList('EXTEND_FIELD_SHOW_TYPE')"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="启用状态：" name="enabledState">
+						<a-select
+							v-model:value="formData.enabledState"
+							placeholder="请选择启用状态"
+							:options="enabledStateOptions"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="备注：" name="remarks">
+						<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear />
+					</a-form-item>
+				</a-col>
+
+				<a-col
+					:span="24"
+					v-if="formData.showType && formData.showType !== 'input' && formData.showType !== 'inputNumber'"
+				>
+					<h3>扩展数据：</h3>
+					<div v-for="(item, index) in selectableData" :key="index" class="mb-2">
+						<a-space>
+							<a-button type="primary" @click="addSelectableData" v-if="index === 0">
+								<PlusOutlined />
+							</a-button>
+							<a-button type="primary" danger @click="delSelectableData(index)" v-if="index !== 0">
+								<MinusOutlined />
+							</a-button>
+							<a-input style="width: 100%" v-model:value="item.filedName" placeholder="请输入内容"></a-input>
+						</a-space>
+					</div>
+				</a-col>
+			</a-row>
+		</a-form>
+
+		<template #footer>
+			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
+			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup name="extendFieldForm">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	import { required } from '@/utils/formRules'
+	import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
+	import { message } from 'ant-design-vue'
+
+	// 抽屉状态
+	const visible = ref(false)
+	const emit = defineEmits({ successful: null })
+	const formRef = ref()
+	// 表单数据
+	const formData = ref({})
+	const submitLoading = ref(false)
+	const enabledStateOptions = ref([])
+
+	// 增加数据
+	let selectableData = ref([
+		{
+			filedName: ''
+		}
+	])
+
+	const addSelectableData = () => {
+		selectableData.value.push({
+			filedName: ''
+		})
+	}
+
+	const delSelectableData = (index) => {
+		selectableData.value.splice(index, 1)
+	}
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			let recordData = cloneDeep(record)
+			formData.value = Object.assign({}, recordData)
+			if (recordData.showValues) {
+				selectableData.value = JSON.parse(recordData.showValues)
+			} else {
+				selectableData.value = [
+					{
+						filedName: ''
+					}
+				]
+			}
+		}
+		enabledStateOptions.value = tool.dictList('COMMON_STATUS')
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		formData.value = {}
+		visible.value = false
+	}
+	// 默认要校验的
+	const formRules = {}
+	// 验证并提交数据
+	const onSubmit = () => {
+		if (
+			formData.value.showType === 'select' &&
+			formData.value.showType === 'radio' &&
+			formData.value.showType === 'checkbox' &&
+			selectableData.value.length === 0
+		) {
+			return message.error('请添加选项要展示的数据')
+		}
+
+		formRef.value.validate().then(() => {
+			submitLoading.value = true
+			const formDataParam = cloneDeep(formData.value)
+			if (formDataParam.showType === 'input' || formDataParam.showType === 'inputNumber') {
+				formDataParam.showValues = ''
+			} else {
+				formDataParam.showValues = JSON.stringify(selectableData.value)
+			}
+
+			extendFieldApi
+				.extendFieldSubmitForm(formDataParam, formDataParam.id)
+				.then(() => {
+					onClose()
+					emit('successful')
+				})
+				.finally(() => {
+					submitLoading.value = false
+				})
+		})
+	}
+	// 抛出函数
+	defineExpose({
+		onOpen
+	})
+</script>

src/views/biz/extendedField/index.vue

@@ -0,0 +1,160 @@
+<template>
+	<a-card :bordered="false">
+		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState">
+			<a-row :gutter="24">
+				<a-col :span="6">
+					<a-form-item label="所属类型" name="type">
+						<a-input v-model:value="searchFormState.type" placeholder="请输入所属类型" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="6">
+					<a-form-item label="启用状态" name="enabledState">
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择启用状态"
+							:options="enabledStateOptions"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="6">
+					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
+					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
+				</a-col>
+			</a-row>
+		</a-form>
+	</a-card>
+
+	<a-card :bordered="false" style="height: 100%" class="mt-4">
+		<s-table
+			ref="tableRef"
+			:columns="columns"
+			:data="loadData"
+			:alert="options.alert.show"
+			bordered
+			:row-key="(record) => record.id"
+			:tool-config="toolConfig"
+			:row-selection="options.rowSelection"
+		>
+			<template #operator>
+				<a-space>
+					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('extendFieldAdd')">
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('extendFieldBatchDelete')"
+						:selectedRowKeys="selectedRowKeys"
+						@batchDelete="deleteBatchExtendField"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'enabledState'">
+					{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }}
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-space>
+						<a @click="formRef.onOpen(record)" v-if="hasPerm('extendFieldEdit')">编辑</a>
+						<a-divider type="vertical" v-if="hasPerm(['extendFieldEdit', 'extendFieldDelete'], 'and')" />
+						<a-popconfirm title="确定要删除吗？" @confirm="deleteExtendField(record)">
+							<a-button type="link" danger size="small" v-if="hasPerm('extendFieldDelete')">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+	<Form ref="formRef" @successful="tableRef.refresh()" />
+</template>
+
+<script setup name="extendfield">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	import Form from './detail/form.vue'
+	import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const tableRef = ref()
+	const formRef = ref()
+	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
+	const columns = [
+		{
+			title: '名称',
+			dataIndex: 'name'
+		},
+		{
+			title: '所属类型',
+			dataIndex: 'type'
+		},
+		{
+			title: '字段名',
+			dataIndex: 'fieldName'
+		},
+		{
+			title: '字段类型',
+			dataIndex: 'fieldType'
+		},
+		{
+			title: '备注',
+			dataIndex: 'remarks'
+		},
+		{
+			title: '启用状态',
+			dataIndex: 'enabledState'
+		}
+	]
+	// 操作栏通过权限判断是否显示
+	if (hasPerm(['extendFieldEdit', 'extendFieldDelete'])) {
+		columns.push({
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			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 extendFieldApi.extendFieldPage(Object.assign(parameter, searchFormParam)).then((data) => {
+			return data
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteExtendField = (record) => {
+		let params = [
+			{
+				id: record.id
+			}
+		]
+		extendFieldApi.extendFieldDelete(params).then(() => {
+			tableRef.value.refresh(true)
+		})
+	}
+	// 批量删除
+	const deleteBatchExtendField = (params) => {
+		extendFieldApi.extendFieldDelete(params).then(() => {
+			tableRef.value.clearRefreshSelected()
+		})
+	}
+	const enabledStateOptions = tool.dictList('COMMON_STATUS')
+</script>