完成扩展字段菜单

.env.production

@@ -5,7 +5,7 @@ NODE_ENV = production
 VITE_TITLE = Snowy
 
 # 接口地址
-VITE_API_BASEURL = http://127.0.0.1:82
+VITE_API_BASEURL = 'http://49.234.181.176:27315/bsx'
 
 # 本地端口
 VITE_PORT = 81

src/api/base/customer/customerApi.js

@@ -13,6 +13,10 @@ export default {
 	customerPage(data) {
 		return request('page', data, 'get')
 	},
+	// 获取销售区域列表
+	customerSaleAreaList(data) {
+		return request('saleArea/list', data, 'get')
+	},
 	// 提交客户表单 edit为true时为编辑，默认为新增
 	customerSubmitForm(data, edit = false) {
 		return request(edit ? 'edit' : 'add', data)

src/api/base/extendfield/extendFieldApi.js

@@ -0,0 +1,28 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/extendfield/` + url, ...arg)
+
+/**
+ * 扩展字段配置Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/28 17:18
+ **/
+export default {
+	// 获取扩展字段配置分页
+	extendFieldPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交扩展字段配置表单 edit为true时为编辑，默认为新增
+	extendFieldSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 获取扩展字段配置详情
+	extendFieldDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 获取扩展字段配置列表（根据分类）
+	extendFieldTypeList(data) {
+		return request('typeList', data, 'get')
+	}
+}

src/api/base/material/materialApi.js

@@ -0,0 +1,32 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/material/` + url, ...arg)
+
+/**
+ * 物料Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/24 19:54
+ **/
+export default {
+	// 获取物料分页
+	materialPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取物料 -- 物料包装数据
+	materialPackageData(data) {
+		return request('package/data', data, 'get')
+	},
+	// 提交物料表单 edit为true时为编辑，默认为新增
+	materialSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除物料
+	materialDelete(data) {
+		return request('delete', data)
+	},
+	// 获取物料详情
+	materialDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/base/material/materialCategoryApi.js

@@ -0,0 +1,32 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/materialCategory/` + url, ...arg)
+
+/**
+ * 物料分类Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/24 19:35
+ **/
+export default {
+	// 获取物料分类分页
+	materialCategoryPage(data) {
+		return request('page', data, 'get')
+	},
+	// 获取物料分类 树结构
+	materialCategoryTree(data) {
+		return request('tree', data, 'get')
+	},
+	// 提交物料分类表单 edit为true时为编辑，默认为新增
+	materialCategorySubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除物料分类
+	materialCategoryDelete(data) {
+		return request('delete', data)
+	},
+	// 获取物料分类详情
+	materialCategoryDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/base/unit/unitApi.js

@@ -24,5 +24,9 @@ export default {
 	// 获取单位详情
 	sysUnitDetail(data) {
 		return request('detail', data, 'get')
-	}
+	},
+	// 获取单位列表
+	sysUnitList(data) {
+		return request(`groupList`, data, 'get')
+	},
 }

src/components/DynamicForm/index.vue

@@ -3,7 +3,13 @@
 		<a-row :gutter="16">
 			<a-col :span="item.span || 6" v-for="(item, index) in formItems" :key="index">
 				<a-form-item :label="item.label" :name="item.name" :rules="item.rules">
-					<component :is="item.type" v-model:value="model[item.name]" v-bind="item.attrs" :disabled="allDisabled" />
+					<component
+						style="width: 100%"
+						:is="item.type"
+						v-model:value="model[item.name]"
+						:disabled="allDisabled"
+						v-bind="item.attrs"
+					/>
 				</a-form-item>
 			</a-col>
 		</a-row>

src/components/DynamicSearchForm/index.vue

@@ -0,0 +1,56 @@
+<template>
+	<a-form :model="model" :rules="rules" layout="vertical" ref="searchFormRef">
+		<a-row :gutter="16">
+			<a-col :span="6" v-for="(item, index) in formItems" :key="index">
+				<a-form-item :label="item.label" :name="item.name" :rules="item.rules">
+					<component
+						style="width: 100%"
+						:is="item.type"
+						v-model:value="model[item.name]"
+						:disabled="allDisabled"
+						v-bind="item.attrs"
+					/>
+				</a-form-item>
+			</a-col>
+			<a-col :span="6">
+				<a-button type="primary">查询</a-button>
+				<a-button style="margin: 0 8px">重置</a-button>
+			</a-col>
+		</a-row>
+	</a-form>
+</template>
+
+<script setup>
+	import { ref, watch } from 'vue'
+
+	const props = defineProps({
+		formItems: {
+			type: Array,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		rules: {
+			type: Object,
+			default: () => ({})
+		},
+		allDisabled: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const searchFormRef = ref(null)
+
+	// Expose validate method
+	defineExpose({
+		validate: () => searchFormRef.value.validate(),
+		resetFields: () => searchFormRef.value.resetFields()
+	})
+</script>
+
+<style scoped>
+	/* Add your styles here */
+</style>

src/components/DynamicTable/index.vue

@@ -23,6 +23,7 @@
 						:is="getComponent(column.dataType)"
 						v-model:value="record[column.dataIndex]"
 						:options="column.options"
+						v-bind="column.attrs"
 					/>
 				</template>
 				<template v-else>

src/components/DynamicTree/index.vue

@@ -0,0 +1,208 @@
+<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">
+					<span v-for="item in tool" :key="item.name">
+						<!-- 新增 -->
+						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'plus' && props.toolConfig.plus">
+							<component class="icons" :is="item.icon" @click="handleAddTree"></component>
+						</a-tooltip>
+						<!-- 修改 -->
+						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'edit' && props.toolConfig.edit">
+							<component class="icons" :is="item.icon" @click="handleEditTree"></component>
+						</a-tooltip>
+						<!-- 删除 -->
+						<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'delete' && props.toolConfig.delete">
+							<a-popconfirm title="确定要删除吗？" ok-text="确认" cancel-text="取消" @confirm="handleDelTree">
+								<component class="icons" :is="item.icon"></component>
+							</a-popconfirm>
+						</a-tooltip>
+						<!-- 刷新 -->
+						<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"
+				multiple
+				:fieldNames="{
+					children: 'children',
+					title: 'name',
+					key: 'id'
+				}"
+				:tree-data="treeData"
+				@select="handleTreeClick"
+			></a-directory-tree>
+		</a-spin>
+	</div>
+</template>
+
+<script setup>
+	import { message } from 'ant-design-vue'
+
+	const props = defineProps({
+		// 树 data
+		treeData: {
+			type: Array,
+			default: () => []
+		},
+		treeTitle: {
+			type: String,
+			default: ''
+		},
+		// 配置工具栏
+		toolConfig: {
+			type: Object,
+			default: () => ({
+				plus: true,
+				edit: true,
+				delete: true,
+				refresh: true
+			})
+		},
+		apiModel: {
+			type: Object,
+			default: () => {
+				return {
+					getTree: () => {},
+					addTree: () => {},
+					delTree: () => {}
+				}
+			}
+		},
+		openFormRef: {
+			type: Object,
+			default: () => {}
+		},
+		tableRef: {
+			type: Object,
+			default: () => {}
+		}
+	})
+
+	const emit = defineEmits(['selectTree', 'delTree'])
+
+	const tool = [
+		{
+			name: 'plus',
+			icon: 'plus-outlined',
+			title: '新增'
+		},
+		{
+			name: 'edit',
+			icon: 'edit-outlined',
+			title: '编辑'
+		},
+		{
+			name: 'delete',
+			icon: 'delete-outlined',
+			title: '删除'
+		},
+		{
+			name: 'refresh',
+			icon: 'ReloadOutlined',
+			title: '刷新'
+		}
+	]
+
+	// 树结构
+	const expandedKeys = ref()
+	const selectedKeys = ref([])
+	const localLoading = ref(false)
+	const treeData = ref([
+		{
+			id: 0,
+			parentId: '-1',
+			name: '顶级',
+			children: ''
+		}
+	])
+	let treeRow = {}
+
+	const handleTreeClick = (selectedKeys, event) => {
+		treeRow = event.node
+		emit('selectTree', treeRow)
+	}
+
+	const handleAddTree = () => {
+		props.openFormRef.onOpen()
+	}
+
+	const handleEditTree = () => {
+		if (!treeRow.id) return message.error('!请选择要编辑的数据')
+		props.openFormRef.onOpen(treeRow)
+	}
+
+	const handleDelTree = () => {
+		if (!treeRow.id) return message.error('!请选择要删除的数据')
+		props.apiModel.delTree([{ id: treeRow.id }]).then((res) => {
+			selectedKeys.value = []
+			treeRow = {}
+			emit('delTree', treeRow)
+			loadTreeData()
+		})
+	}
+
+	const loadTreeData = async () => {
+		try {
+			localLoading.value = true
+			const treeRes = await props.apiModel.getTree()
+			console.log(treeRes, 'treeRes')
+			if (Array.isArray(treeRes)) {
+				treeData.value[0].children = treeRes
+			} else {
+				treeData.value[0].children = []
+			}
+
+			if (selectedKeys.value.length > 0) {
+				selectedKeys.value = []
+
+				props.tableRef.refresh()
+			}
+
+			if (treeRow.id) {
+				treeRow = []
+			}
+
+			setTimeout(() => {
+				localLoading.value = false
+			}, 800)
+		} catch (e) {
+			localLoading.value = false
+			message.error('获取树结构数据失败:' + e)
+			console.error('获取树结构数据失败:' + e)
+		}
+	}
+
+	defineExpose({
+		loadTreeData
+	})
+</script>
+
+<style lang="less" scoped>
+	.s-table-tool {
+		display: flex;
+		margin-bottom: 16px;
+		.s-table-tool-left {
+			flex: 1;
+		}
+		.s-table-tool-right {
+			.s-tool-item {
+				font-size: 16px;
+				@apply ml-4;
+				cursor: pointer;
+			}
+		}
+	}
+</style>

src/components/OperationalInformation/index.vue

@@ -0,0 +1,72 @@
+<template>
+	<a-row :gutter="16">
+		<a-col :span="colSpan">
+			<a-form-item label="创建人：">
+				<a-input disabled v-model:value="detailDataProps.createUserName" placeholder="请输入创建人" allow-clear />
+			</a-form-item>
+		</a-col>
+		<a-col :span="colSpan">
+			<a-form-item label="创建时间：">
+				<a-input disabled v-model:value="detailDataProps.createTime" placeholder="请输入创建人" allow-clear />
+			</a-form-item>
+		</a-col>
+		<a-col :span="colSpan">
+			<a-form-item label="修改人：">
+				<a-input disabled v-model:value="detailDataProps.updateUserName" placeholder="请输入创建人" allow-clear />
+			</a-form-item>
+		</a-col>
+		<a-col :span="colSpan">
+			<a-form-item label="修改人：">
+				<a-input disabled v-model:value="detailDataProps.updateTime" placeholder="请输入创建人" allow-clear />
+			</a-form-item>
+		</a-col>
+	</a-row>
+</template>
+
+<script setup>
+	const props = defineProps({
+		detailData: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		},
+		colSpan: {
+			type: Number,
+			default: 24
+		}
+	})
+	const detailDataProps = ref({})
+
+	// const emit = defineEmits()
+
+	// 生命周期钩子
+	onMounted(() => {
+		console.log('Component mounted')
+		// TODO: Add your onMounted code here
+	})
+
+	onUpdated(() => {
+		console.log('Component updated')
+		// TODO: Add your onUpdated code here
+	})
+
+	onUnmounted(() => {
+		console.log('Component unmounted')
+		// TODO: Add your onUnmounted code here
+	})
+
+	watch(
+		() => props.detailData,
+		() => {
+			console.log(props.detailData, 'props.detailData')
+			detailDataProps.value = props.detailData
+		},
+		{
+			immediate: true,
+			deep: true
+		}
+	)
+</script>
+
+<style scoped></style>

src/components/Selector/userSelectorPlus.vue

@@ -186,6 +186,7 @@
 		if (dataIsConverterFlw) {
 			ids = goDataConverter(ids)
 		}
+		console.log(ids, 'ids')
 		recordIds.value = ids
 		// 加载机构树
 		if (props.orgTreeApi) {
@@ -213,12 +214,14 @@
 		searchFormState.value.size = pageSize.value
 		loadData()
 		if (props.checkedUserListApi) {
+			console.log(recordIds.value)
 			if (isEmpty(recordIds.value)) {
 				return
 			}
 			const param = {
 				idList: recordIds.value
 			}
+
 			selectedTableListLoading.value = true
 			props
 				.checkedUserListApi(param)

src/components/Table/index.vue

@@ -41,9 +41,9 @@
 					<a-tooltip v-if="item.name === 'delete' && props.toolConfig.delete" :title="item.title" class="s-tool-item">
 						<a-popconfirm
 							v-if="item.name === 'delete' && props.toolConfig.delete"
-							title="确认删除？"
+							title="确定要删除吗？"
-							ok-text="Yes"
+							ok-text="确认"
-							cancel-text="No"
+							cancel-text="取消"
 							@confirm="
 								() => {
 									emit('deleteRowData')
@@ -121,8 +121,8 @@
 								typeof props.alert === 'boolean' && props.alert
 									? clearSelected()
 									: props.alert.clear && typeof props.alert.clear === 'function'
-									  ? props.alert.clear()
+									? props.alert.clear()
-									  : null
+									: null
 							)
 						"
 					>
@@ -143,6 +143,7 @@
 					emit('expand', expanded, record)
 				}
 			"
+			tableLayout="fixed"
 			@resizeColumn="handleResizeColumn"
 			:rowClassName="
 				(record, index) => (data.localSettings.rowClassNameSwitch ? ((index + 1) % 2 == 0 ? 'odd' : '') : null)
@@ -240,6 +241,10 @@
 					columnSetting: false,
 					striped: false
 				})
+			},
+			scroll: {
+				type: Object,
+				default: () => {}
 			}
 		})
 	)
@@ -577,7 +582,7 @@
 			...renderProps,
 			size: data.customSize, // 注意这个size是a-table组件需要的，这里不能跟别的地方成为compSize
 			columns: data.columnsSetting.filter((value) => value.checked === undefined || value.checked),
-			...data.localSettings,
+			...data.localSettings
 		}
 		// 将值为 undefined 或者 null 的 table里props属性进行一个过滤
 		renderTableProps.value = Object.entries(renderProps).reduce((x, [y, z]) => (z == null ? x : ((x[y] = z), x)), {})

src/hook/useFormHandler.js

@@ -1,64 +1,131 @@
 import { useRoute, useRouter } from 'vue-router'
 import { cloneDeep } from 'lodash-es'
 import useTabs from '@/utils/useTabs'
+import extendFieldApi from '@/api/base/extendfield/extendFieldApi'
 
+/**
+ * 使用表单处理程序封装表单的提交、初始化和回退逻辑。
+ * @param {Array} formItems 表单项配置，包含表单字段名、默认值等信息。
+ * @param {Object} api 包含表单提交和获取详情方法的对象。
+ * @returns {Object} 返回包含表单数据、提交加载状态、表单引用、提交函数等的对象。
+ */
 export default function useFormHandler(formItems, api) {
+	// 初始化页面类型状态
 	const state = reactive({
 		PAGE_TYPE: ''
 	})
+	let extendFormData = ref({})
+	// 操作信息
+	let inform = reactive({
+		createUserName: '',
+		createTime: '',
+		updateUserName: '',
+		updateTime: ''
+	})
 
+	// 初始化表单数据对象
 	let formData = reactive({})
+	// 初始化提交加载状态
 	const submitLoading = ref(false)
+	// 初始化表单引用数组
 	const formRefs = ref([])
+
+	// 使用vue-router的useRoute钩子获取当前路由信息
 	const route = useRoute()
+	// 使用vue-router的useRouter钩子获取路由管理对象
 	const router = useRouter()
 
+	/**
+	 * 根据表单项配置初始化表单数据。
+	 * @param {Array} formItems 表单项配置数组。
+	 * @param {Object} formData 初始化后的表单数据对象。
+	 */
 	const initializeFormData = (formItems, formData) => {
 		formItems.forEach((item) => {
-			formData[item.name] = item.defaultValue || ''
+			formData[item.name] = item.defaultValue || null
 		})
 	}
 
+	/**
+	 * 处理表单提交逻辑。
+	 * @param {Object} params 提交时额外的参数配置，包含是否深度克隆formData的标志。
+	 */
 	const onSubmit = async (params) => {
-		Promise.all(formRefs.value.map((form) => form.validate()))
+		try {
-			.then(() => {
+			// 验证所有表单字段
-				submitLoading.value = true
+			await Promise.all(formRefs.value.map((form) => form.validate()))
-				let formDataParam = params.isDeep ? cloneDeep(params) : cloneDeep(formData)
+			submitLoading.value = true
 
-				if (route.query.id) {
+			// 根据参数配置决定是否深度克隆formData
-					formDataParam = { ...formDataParam, id: route.query.id }
+			let formDataParam = params.isDeep ? cloneDeep(params) : formData
-				}
+
-				api
+			// 安全地处理路由查询参数
-					.submitForm(formDataParam, route.query.id)
+			const safeId = validateAndCleanId(route.query.id)
-					.then(() => {
+			if (safeId) {
-						router.go(-1)
+				formDataParam.id = safeId
-						useTabs.close()
+			}
-					})
+
-					.finally(() => {
+			// 调用api提交表单数据
-						submitLoading.value = false
+			await api.submitForm(formDataParam, safeId)
-					})
+			// 提交成功后返回上一页，并关闭当前标签页
-			})
+			handleBack()
-			.catch((error) => {
+		} catch (error) {
-				console.error('Validation error:', error)
+			console.error('Validation error:', error)
-			})
+		} finally {
+			submitLoading.value = false
+		}
 	}
 
+	/**
+	 * 校验并清洁ID，确保其安全使用。
+	 * @param {string} id 待校验的ID。
+	 * @returns {string|undefined} 校验通过后返回清洁的ID，否则返回undefined。
+	 */
+	const validateAndCleanId = (id) => {
+		if (id && /^[a-zA-Z0-9\-_]+$/.test(id)) {
+			return id
+		}
+		console.warn('Invalid ID:', id)
+		return undefined
+	}
+
+	/**
+	 * 处理返回操作，返回上一级页面并关闭当前标签页。
+	 */
 	const handleBack = () => {
-		router.replace('/basicData/publicAccount')
+		useTabs.close(route)
-		useTabs.close()
+		// router.push('/basicData/unit') // 优化为通用的返回上一页操作
 	}
 
+	/**
+	 * 根据页面类型加载表单数据。
+	 * @param {String} pageType 页面类型，用于区分新增和编辑等不同场景。
+	 * @returns {Promise<Object>} 返回获取的详情数据。
+	 */
 	const fetchData = async (pageType) => {
 		initializeFormData(formItems, formData)
 		if (pageType && pageType !== 'ADD') {
 			try {
 				const res = await api.getDetail({ id: route.query.id })
+
+				// 根据返回的详情数据初始化表单数据
 				for (let key in formData) {
 					if (res[key] !== undefined) {
 						formData[key] = res[key]
 					}
 				}
 
+				// 操作信息
+				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)
@@ -66,12 +133,61 @@ 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,
+		inform,
+		extendFormData,
+		getExtendField,
 		onSubmit,
 		handleBack,
-		fetchData
+		fetchData,
+		initializeFormData
 	}
 }

src/hook/useTableManagement.js

@@ -7,32 +7,49 @@ import useTabs from '@/utils/useTabs'
  * 列表页面表格信息 hook 封装（数据操作）
  * @param apiModule 调用接口
  * @param tableColumns 表格头部信息
+ * @param hasPermData
  * @returns {{searchFormRef: Ref<UnwrapRef<{}>>, toolConfig: {columnSetting: boolean, striped: boolean, refresh: boolean, height: boolean}, searchFormState: Ref<UnwrapRef<{}>>, tableRef: Ref<UnwrapRef<null>>, selectedRowKeys: Ref<UnwrapRef<*[]>>, columns: Ref<UnwrapRef<unknown>>, options: {rowSelection: {onChange: options.rowSelection.onChange}, alert: {show: boolean, clear: options.alert.clear}}, reset: reset, loadData: (function(*): *), deleteBatchRecords: deleteBatchRecords, deleteRecord: deleteRecord}}
  */
 export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 	const searchFormState = ref({})
-	const searchFormRef = ref({})
+	const searchFormRef = ref(null)
-	const tableRef = ref(null)
 	const selectedRowKeys = ref([])
+	let advanced = ref(false)
+
 	const router = useRouter()
 
+	const tableRef = ref(null)
+
 	// 动态列配置
 	const columns = ref(tableColumns)
 
-	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
+	// 选择配置
+	const options = {
+		alert: {
+			show: true,
+			clear: () => {
+				selectedRowKeys.value = []
+			}
+		},
+		rowSelection: {
+			onChange: (selectedRowKey, selectedRows) => {
+				selectedRowKeys.value = selectedRowKey
+			}
+		},
+		toolConfig: { refresh: true, height: true, columnSetting: true, striped: false }
+	}
 
 	// 根据权限添加操作列
 	if (hasPerm(hasPermData)) {
 		// 判断columns 是否有操作
 		const columnsFilter = columns.value.filter((item) => item.dataIndex === 'action')
 		if (columnsFilter.length === 0)
-			columns.value.push({
+			columns.value.unshift({
 				title: '操作',
 				dataIndex: 'action',
 				align: 'center',
-				width: 200,
+				width: 150,
-				fixed: 'right',
+				fixed: 'left'
-				max_width: 100
 			})
 	}
 
@@ -47,7 +64,7 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 	// 重置
 	const reset = () => {
 		if (tableRef.value) {
-			tableRef.value.resetFields()
+			searchFormRef.value.resetFields()
 			tableRef.value.refresh(true)
 		}
 	}
@@ -55,7 +72,7 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 	// 删除
 	const deleteRecord = (record) => {
 		let params = [{ id: record.id }]
-		apiModule.delete(params).then(() => {
+		return apiModule.delete(params).then(() => {
 			if (tableRef.value) {
 				tableRef.value.refresh(true)
 			}
@@ -71,21 +88,6 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 		})
 	}
 
-	// 选择配置
-	const options = {
-		alert: {
-			show: true,
-			clear: () => {
-				selectedRowKeys.value = []
-			}
-		},
-		rowSelection: {
-			onChange: (selectedRowKey, selectedRows) => {
-				selectedRowKeys.value = selectedRowKey
-			}
-		}
-	}
-
 	// 页面跳转
 	const navigateTo = (to, params) => {
 		router.push({
@@ -94,6 +96,10 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 		})
 	}
 
+	const toggleAdvanced = () => {
+		advanced.value = !advanced.value
+	}
+
 	// 返回Hook的值
 	return {
 		searchFormState,
@@ -101,12 +107,13 @@ export function useTableManagement(apiModule = {}, tableColumns, hasPermData) {
 		tableRef,
 		selectedRowKeys,
 		columns,
+		options,
+		advanced,
 		loadData,
 		reset,
 		deleteRecord,
 		deleteBatchRecords,
-		options,
+		navigateTo,
-		toolConfig,
+		toggleAdvanced
-		navigateTo
 	}
 }

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,8 +107,8 @@
 	})
 	// 增加tag
 	const addViewTags = (to) => {
-		activeKey.value = to.fullPath
+		activeKey.value = to.path
-		if (to.name && !to.meta.fullpage) {
+		if (to.name) {
 			vStore.pushViewTags(to)
 			kStore.pushKeepLive(to.name)
 		}
@@ -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:
+						transition: background-color 0.3s, color 0.3s;
-							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:
+		box-shadow: 12px 15px 0 0 var(--primary-1), -12px 15px 0 0 var(--primary-1);
-			12px 15px 0 0 var(--primary-1),
-			-12px 15px 0 0 var(--primary-1);
 	}
 	.snowy-radius .ant-tabs-tab-active::before {
 		content: '';

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/columns/brandColumns.js

@@ -0,0 +1,18 @@
+export const brandColumns = [
+	{
+		title: '编码',
+		dataIndex: 'number'
+	},
+	{
+		title: '名称',
+		dataIndex: 'name'
+	},
+	{
+		title: '可用状态',
+		dataIndex: 'enabledState'
+	},
+	{
+		title: '创建时间',
+		dataIndex: 'createTime'
+	}
+]

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

@@ -15,21 +15,24 @@
 		/>
 	</a-card>
 
-	<!--	<a-card :bordered="false" title="域名" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-		<a-button @click="handleAddDomain">新增域名</a-button>
+		<a-tabs v-model:activeKey="activeKey">
-		<a-form class="mt-8" :model="domainFormData" :rules="domainFormRules" ref="domainFormRef">
+			<a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
-			<a-row v-for="(item, index) in domainFormItems" :key="item.value" :gutter="12">
+				<DynamicForm
-				<a-col :span="12">
+					:allDisabled="route.query.type === 'SEARCH'"
-					<a-form-item :label="item.label" :name="item.value" :props="item.value">
+					:formItems="extendData"
-						<a-input v-model:value="domainFormData[item.value]" placeholder="请输入域名" />
+					:model="extendFormData"
-					</a-form-item>
+					:rules="formRules"
-				</a-col>
+					v-if="extendData.length > 0"
-				<a-col :span="12" v-if="index > 0">
+				/>
-					<a-button @click="handleDelDomain(index)">删除</a-button>
+
-				</a-col>
+				<a-empty v-else />
-			</a-row>
+			</a-tab-pane>
-		</a-form>
+			<a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
-	</a-card>-->
+				<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 { state, formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(brandFormItems, {
+	let { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } = useFormHandler(
-		submitForm: sysBrandApi.sysBrandSubmitForm,
+		brandFormItems,
-		getDetail: sysBrandApi.sysBrandDetail
+		{
-	})
+			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/brand/index.vue

@@ -2,14 +2,23 @@
 	<a-card :bordered="false">
 		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
 			<a-row :gutter="24">
+				<a-col :span="6">
+					<a-form-item label="编码" name="number">
+						<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
+					</a-form-item>
+				</a-col>
 				<a-col :span="6">
 					<a-form-item label="名称" name="name">
 						<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="类型" name="type">
+					<a-form-item label="可用状态" name="enabledState">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择可用状态"
+							:options="$TOOL.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -20,7 +29,7 @@
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
 		<s-table
 			ref="tableRef"
 			:columns="columns"
@@ -28,10 +37,14 @@
 			:alert="options.alert.show"
 			bordered
 			:row-key="(record) => record.id"
-			:tool-config="toolConfig"
+			:tool-config="options.toolConfig"
 			:row-selection="options.rowSelection"
+			:scroll="{
+				x: 100,
+				y: 'calc(100vh - 300px)'
+			}"
 		>
-			<template #operator class="table-operator">
+			<template #operator>
 				<a-space>
 					<a-button
 						type="primary"
@@ -53,41 +66,52 @@
 				</a-space>
 			</template>
 			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'number'">
+					<a href="#">{{ record.number }}</a>
+				</template>
 				<template v-if="column.dataIndex === 'enabledState'">
-					<a-switch
+					<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-						checkedValue="ENABLE"
+					<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-						unCheckedValue="DISABLED"
-						checked-children="启用"
-						un-checked-children="停用"
-						v-model:checked="record.enabledState"
-					/>
 				</template>
 				<template v-if="column.dataIndex === 'action'">
 					<a-space>
-						<a
+						<a-tooltip title="查看">
-							@click="
+							<a
-								navigateTo('/basicData/brand/detail', {
+								@click="
-									type: 'SEARCH',
+									navigateTo('/basicData/brand/detail', {
-									id: record.id
+										type: 'SEARCH',
-								})
+										id: record.id
-							"
+									})
-							v-if="hasPerm('sysBrandEdit')"
+								"
-							>查看</a
+								v-if="hasPerm('customerEdit')"
-						>
+							>
-						<a-divider type="vertical" v-if="hasPerm(['sysBrandEdit', 'sysBrandDelete'], 'and')" />
+								<EyeOutlined />
-						<a
+								<!--									查看-->
-							@click="
+							</a>
-								navigateTo('/basicData/brand/detail', {
+						</a-tooltip>
-									type: 'EDIT',
+
-									id: record.id
+						<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-								})
+						<a-tooltip title="查看">
-							"
+							<a
-							v-if="hasPerm('sysBrandEdit')"
+								@click="
-							>编辑</a
+									navigateTo('/basicData/brand/detail', {
-						>
+										type: 'EDIT',
-						<a-divider type="vertical" v-if="hasPerm(['sysBrandEdit', 'sysBrandDelete'], 'and')" />
+										id: record.id
+									})
+								"
+								v-if="hasPerm('customerEdit')"
+							>
+								<FormOutlined />
+								<!--									编辑-->
+							</a>
+						</a-tooltip>
+
+						<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
-							<a-button type="link" danger size="small" v-if="hasPerm('sysBrandDelete')">删除</a-button>
+							<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+								<DeleteOutlined />
+								<!--										删除-->
+							</a-button>
 						</a-popconfirm>
 					</a-space>
 				</template>
@@ -96,7 +120,7 @@
 	</a-card>
 </template>
 
-<script setup>
+<script setup name="brand">
 	import sysBrandApi from '@/api/base/brand/sysBrandApi'
 	import { useTableManagement } from '@/hook/useTableManagement'
 
@@ -104,7 +128,7 @@
 		{
 			title: '编码',
 			dataIndex: 'number',
-			sorter: (a, b) => a.number.length - b.number.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
@@ -114,8 +138,6 @@
 		{
 			title: '名称',
 			dataIndex: 'name',
-			sorter: (a, b) => a.name.length - b.name.length,
-			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
 			width: 300,
@@ -132,7 +154,7 @@
 		{
 			title: '创建时间',
 			dataIndex: 'createTime',
-			sorter: (a, b) => a.createTime.length - b.createTime.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,

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

@@ -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>
 
@@ -27,7 +27,51 @@
 				/>
 			</a-tab-pane>
 			<a-tab-pane key="2" tab="销售区域管理" force-render>
-				<DynamicTable :initialData="data" :columns="columns" rowKey="id"></DynamicTable>
+				<a-space>
+					<a-button v-if="route.query.type !== 'SEARCH'" key="1" type="primary" @click="addRow">新增</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('customerBatchDelete')"
+						:selectedRowKeys="selectedListRowKeys"
+						@batchDelete="deleteBatchRecords"
+					/>
+				</a-space>
+				<a-table ref="tableRef" :dataSource="dataSource" :columns="columns" :row-selection="rowSelection" row-key="id">
+					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'province'">
+							<a-select
+								style="width: 100%"
+								:options="cityOptions"
+								v-model:value="record.province"
+								@change="
+									(value, options) => {
+										provinceChange(value, options, record)
+									}
+								"
+							></a-select>
+						</template>
+						<template v-if="column.dataIndex === 'city'">
+							<a-select
+								style="width: 100%"
+								:options="record.cityOptions"
+								v-model:value="record.city"
+								@change="
+									(value, options) => {
+										cityChange(value, options, record)
+									}
+								"
+							></a-select>
+						</template>
+						<template v-if="column.dataIndex === 'county'">
+							<a-select style="width: 100%" :options="record.countyOptions" v-model:value="record.county"></a-select>
+						</template>
+						<template v-if="column.dataIndex === 'remarks'">
+							<a-textarea style="width: 100%" v-model:value="record.remarks"></a-textarea>
+						</template>
+					</template>
+				</a-table>
+			</a-tab-pane>
+			<a-tab-pane key="3" tab="操作信息" v-if="route.query.type !== 'ADD'">
+				<OperationalInformation :detailData="detailData" :colSpan="6"></OperationalInformation>
 			</a-tab-pane>
 		</a-tabs>
 	</a-card>
@@ -42,9 +86,8 @@
 	import useFormHandler from '@/hook/useFormHandler'
 	import tool from '@/utils/tool'
 	import { useRoute } from 'vue-router'
-	const route = useRoute()
-	import DynamicTable from '@/components/DynamicTable/index.vue'
 	import cityOptions from '@/utils/cityOptions'
+	const route = useRoute()
 
 	const formRules = {
 		name: [required('请输入名称')],
@@ -52,6 +95,7 @@
 		appid: [required('请输入AppID')],
 		secret: [required('请输入AppSecret')]
 	}
+	let detailData = reactive({})
 
 	// 级联选择
 	const onCascaderChange = (value) => {
@@ -254,7 +298,7 @@
 	const formRef1 = ref(null)
 	const formRef2 = ref(null)
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+	const { formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
 		[...clientFormItems, ...baseFormItems],
 		{
 			submitForm: customerApi.customerSubmitForm,
@@ -262,10 +306,41 @@
 		}
 	)
 
+	const onSubmitForm = () => {
+		const dataSourceList = dataSource.value.map((item) => {
+			return {
+				id: item.id || '',
+				customerId: item.customerId || '',
+				province: item.province || '',
+				city: item.city || '',
+				county: item.county || '',
+				remarks: item.remarks || ''
+			}
+		})
+		onSubmit({
+			isDeep: true,
+			...formData,
+			saleAreaList: dataSourceList
+		})
+	}
+
 	onMounted(async () => {
+		console.log(1)
 		formRefs.value = [formRef1.value, formRef2.value]
 		fetchData(route.query.type).then((res) => {
-			formData.provinceName = [res.province, res.city, res.county]
+			if (res) {
+				detailData = res
+
+				formData.provinceName = [res.province, res.city, res.county]
+
+				customerApi
+					.customerSaleAreaList({
+						customerId: res.id
+					})
+					.then((list) => {
+						dataSource.value = list || []
+					})
+			}
 		})
 
 		// 选择品牌
@@ -282,7 +357,6 @@
 			})
 
 		// 客户分类
-
 		customerCategoryApi
 			.customerCategoryTree({
 				enabledState: 'ENABLE'
@@ -298,23 +372,70 @@
 
 	let activeKey = ref('1')
 
-	const data = ref([
+	const dataSource = ref([])
-		{ id: '1', name: 'John', age: 28 },
+	let selectedListRowKeys = ref([])
-		{ id: '2', name: 'Jane', age: 22 }
+	let tableRef = ref(null)
-	])
+
+	const provinceChange = (event, options, record) => {
+		record.cityOptions = options.children
+	}
+
+	const cityChange = (event, options, record) => {
+		record.countyOptions = options.children
+	}
+
+	const addRow = () => {
+		const newRow = {
+			id: Date.now().toString(),
+			...columns.reduce((acc, col) => {
+				if (col.dataIndex) acc[col.dataIndex] = ''
+				return acc
+			}, {})
+		}
+		dataSource.value = [...dataSource.value, newRow]
+	}
+
+	const deleteBatchRecords = (value) => {
+		dataSource.value = dataSource.value.filter((item) => {
+			return !value.some((itemValue) => itemValue.id === item.id)
+		})
+	}
+
+	const rowSelection = {
+		onChange: (selectedRowKeys, selectedRows) => {
+			selectedListRowKeys.value = selectedRowKeys
+		}
+	}
 
 	const columns = [
 		{
-			title: '上游仓库代码',
+			title: '省',
-			dataIndex: 'name',
+			dataIndex: 'province',
 			editable: true,
-			dataType: 'text' // 或 'number', 'select'
+			dataType: 'select', // 或 'number', 'select'
+			attrs: {
+				options: cityOptions,
+				onChange: provinceChange,
+				fliedNames: {
+					label: 'label',
+					value: 'code'
+				}
+			}
 		},
 		{
-			title: '上游仓库名称',
+			title: '市',
-			dataIndex: 'age',
+			dataIndex: 'city',
-			editable: true,
+			editable: true
-			dataType: 'number'
+		},
+		{
+			title: '区/县',
+			dataIndex: 'county',
+			editable: true
+		},
+		{
+			title: '备注',
+			dataIndex: 'remarks',
+			editable: true
 		}
 	]
 </script>

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

@@ -8,8 +8,17 @@
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="类型" name="type">
+					<a-form-item label="编码" name="number">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-input v-model:value="searchFormState.number" 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="$TOOL.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -20,49 +29,21 @@
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-		<a-row :gutter="16">
+		<a-row :gutter="24">
 			<a-col :span="6">
-				<div className="s-table-tool">
+				<dynamic-tree
-					<div className="s-table-tool-left">分类</div>
+					ref="dynamicTreeRef"
-					<!--  斑马纹 -->
+					treeTitle="客户分类"
-					<div className="layout-items-center s-table-tool-right">
+					:tableRef="tableRef"
-						<span v-for="item in tool" :key="item.name">
+					:openFormRef="CustomerCategoryFormRef"
-							<!-- 新增 -->
+					:apiModel="{
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'plus'" @click="handleAddTree">
+						getTree: customerCategoryApi.customerCategoryTree,
-								<component class="icons" :is="item.icon"></component>
+						delTree: customerCategoryApi.customerCategoryDelete
-							</a-tooltip>
-							<!-- 修改 -->
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'edit'" @click="handleEditTree">
-								<component class="icons" :is="item.icon"></component>
-							</a-tooltip>
-							<!-- 删除 -->
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'delete'" @click="handleDelTree">
-								<a-popconfirm title="确认删除？" ok-text="Yes" cancel-text="No">
-									<component class="icons" :is="item.icon"></component>
-								</a-popconfirm>
-							</a-tooltip>
-							<!-- 刷新 -->
-<!--							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'refresh'">
-								<component class="icons" :is="item.icon"></component>
-							</a-tooltip>-->
-						</span>
-					</div>
-				</div>
-
-				<a-directory-tree
-					v-model:expandedKeys="expandedKeys"
-					v-model:selectedKeys="selectedKeys"
-					multiple
-					:tree-data="treeData"
-					:selectedKeys="treeSelectedKeys"
-					:fieldNames="{
-						children: 'children',
-						title: 'name',
-						key: 'id'
 					}"
-					@select="handleTreeClick"
+					@selectTree="selectTree"
-				></a-directory-tree>
+					@delTree="delTree"
+				></dynamic-tree>
 			</a-col>
 			<a-col :span="18">
 				<s-table
@@ -72,10 +53,14 @@
 					:alert="options.alert.show"
 					bordered
 					:row-key="(record) => record.id"
-					:tool-config="toolConfig"
+					:tool-config="options.toolConfig"
 					:row-selection="options.rowSelection"
+					:scroll="{
+						x: 100,
+						y: 'calc(100vh - 300px)'
+					}"
 				>
-					<template #operator class="table-operator">
+					<template #operator>
 						<a-space>
 							<a-button
 								type="primary"
@@ -97,44 +82,54 @@
 						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'number'">
+							<a href="#">{{ record.number }}</a>
+						</template>
 						<template v-if="column.dataIndex === 'enabledState'">
-							<a-switch
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-								checkedValue="ENABLE"
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-								unCheckedValue="DISABLED"
-								checked-children="启用"
-								un-checked-children="停用"
-								v-model:checked="record.enabledState"
-							/>
 						</template>
 						<template v-if="column.dataIndex === 'type'">
 							{{ $TOOL.dictTypeData('OFFICIAL_ACCOUNT_TYPE', record.type) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a-space>
-								<a
+								<a-tooltip title="查看">
-									@click="
+									<a
-										navigateTo('/basicData/client/detail', {
+										@click="
-											type: 'SEARCH',
+											navigateTo('/basicData/client/detail', {
-											id: record.id
+												type: 'SEARCH',
-										})
+												id: record.id
-									"
+											})
-									v-if="hasPerm('customerEdit')"
+										"
-									>查看</a
+										v-if="hasPerm('customerEdit')"
-								>
+									>
+										<EyeOutlined />
+										<!--									查看-->
+									</a>
+								</a-tooltip>
+
 								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-								<a
+								<a-tooltip title="查看">
-									@click="
+									<a
-										navigateTo('/basicData/client/detail', {
+										@click="
-											type: 'EDIT',
+											navigateTo('/basicData/client/detail', {
-											id: record.id
+												type: 'EDIT',
-										})
+												id: record.id
-									"
+											})
-									v-if="hasPerm('customerEdit')"
+										"
-									>编辑</a
+										v-if="hasPerm('customerEdit')"
-								>
+									>
+										<FormOutlined />
+										<!--									编辑-->
+									</a>
+								</a-tooltip>
+
 								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
-									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">删除</a-button>
+									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+										<DeleteOutlined />
+									</a-button>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -146,54 +141,56 @@
 	</a-card>
 </template>
 
-<script setup>
+<script setup name="basicDataClient">
 	import customerApi from '@/api/base/customer/customerApi'
 	import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
 	import { useTableManagement } from '@/hook/useTableManagement'
 	import CustomerCategoryForm from '@/views/basicData/client/detail/CustomerCategoryForm.vue'
-	import { message } from 'ant-design-vue'
 
 	const clientColumn = [
 		{
 			title: '编码',
 			dataIndex: 'number',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '名称',
 			dataIndex: 'name',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '分类',
-			dataIndex: 'type',
+			dataIndex: 'categoryName',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '可用状态',
 			dataIndex: 'enabledState',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 100,
+			ellipsis: true
 		},
 		{
 			title: '创建时间',
 			dataIndex: 'createTime',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		}
 	]
 
@@ -208,7 +205,6 @@
 		deleteBatchRecords,
 		options,
 		searchFormRef,
-		toolConfig,
 		navigateTo
 	} = useTableManagement(
 		{
@@ -219,82 +215,28 @@
 		['customerEdit', 'customerDelete']
 	)
 
-	const tool = [
+	const dynamicTreeRef = ref(null)
-		{
-			name: 'plus',
-			icon: 'plus-outlined',
-			title: '新增'
-		},
-		{
-			name: 'edit',
-			icon: 'edit-outlined',
-			title: '编辑'
-		},
-		{
-			name: 'delete',
-			icon: 'delete-outlined',
-			title: '删除'
-		},
-		{
-			name: 'refresh',
-			icon: 'sync-outlined',
-			title: '刷新'
-		}
-	]
-
-	// 树结构
-	const expandedKeys = ref(['0-0', '0-1'])
-	const selectedKeys = ref([])
-	const treeData = ref([])
 	const CustomerCategoryFormRef = ref(null)
-	let treeRow = {}
-	let treeSelectedKeys = ref([])
 
-	const handleTreeClick = (selectedKeys, event) => {
+	const selectTree = (value) => {
-		treeRow = event.node
+		searchFormState.value.categoryId = value.id
 		tableRef.value.refresh()
-		searchFormState.value.categoryId = selectedKeys[0]
-		treeSelectedKeys.value = selectedKeys
 	}
 
-	const handleAddTree = () => {
+	const delTree = () => {
-		CustomerCategoryFormRef.value.onOpen()
+		searchFormState.value.categoryId = null
-	}
+		tableRef.value.refresh()
-
-	const handleEditTree = () => {
-		if (!treeRow.id) return message.error('!请选择要编辑的数据')
-		CustomerCategoryFormRef.value.onOpen(treeRow)
-	}
-
-	const handleDelTree = () => {
-		if (!treeRow.id) return message.error('!请选择要编辑的数据')
-		customerCategoryApi.customerCategoryDelete([{ id: treeRow.id }]).then((res) => {
-			treeSelectedKeys.value = []
-			searchFormState.value.categoryId = null
-			treeRow = {}
-			tableRef.value.refresh()
-
-			customerCategoryApi.customerCategoryTree().then((res) => {
-				treeData.value = res
-			})
-		})
 	}
 
 	const successful = () => {
-		treeSelectedKeys.value = []
 		searchFormState.value.categoryId = null
-		treeRow = {}
 		tableRef.value.refresh()
 
-		customerCategoryApi.customerCategoryTree().then((res) => {
+		dynamicTreeRef.value.loadTreeData()
-			treeData.value = res
-		})
 	}
 
 	onMounted(() => {
-		customerCategoryApi.customerCategoryTree().then((res) => {
+		dynamicTreeRef.value.loadTreeData()
-			treeData.value = res
-		})
 	})
 </script>
 

src/views/basicData/materiel/column/materiel-column.js

@@ -0,0 +1,93 @@
+export const materielColumn = [
+	{
+		title: '编码',
+		dataIndex: 'number',
+		sorter: true,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '名称',
+		dataIndex: 'name',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '可用状态',
+		dataIndex: 'enabledState',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '规格型号',
+		dataIndex: 'specification',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	// {
+	// 	title: '分类',
+	// 	dataIndex: 'name',
+	// 	align: 'center',
+	// 	resizable: true,
+	// 	width: 150
+	// },
+	{
+		title: '品牌',
+		dataIndex: 'brandName',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '保质期',
+		dataIndex: 'shelfLifeUnit',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '基本单位',
+		dataIndex: 'baseUnitName',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '生产单位',
+		dataIndex: 'produceUnitName',
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	},
+	{
+		title: '采购单位',
+		dataIndex: 'purchaseUnitName',
+		align: 'center',
+		resizable: true,
+		width: 150
+	},
+
+	{
+		title: '创建时间',
+		dataIndex: 'createTime',
+		sorter: true,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 150,
+		ellipsis: true
+	}
+]

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

@@ -1,57 +1,308 @@
 <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>
 
-	<a-card :bordered="false" title="仓库">
+	<a-card :bordered="false" title="物料">
 		<DynamicForm
 			:allDisabled="route.query.type === 'SEARCH'"
-			:formItems="officialAccountFormItems"
+			:formItems="materialFormItems"
 			:model="formData"
 			:rules="formRules"
 			ref="formRef1"
 		/>
 	</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"
 					:model="formData"
 					:rules="formRules"
-					ref="formRef1"
+					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"
 					:model="formData"
 					:rules="formRules"
-					ref="formRef1"
+					ref="formRef3"
 				/>
 			</a-tab-pane>
-			<a-tab-pane key="3" tab="包装关系" force-render>
+			<a-tab-pane key="3" tab="包装关系" forceRender>
-				<DynamicTable :initialData="data" :columns="columns" rowKey="id"></DynamicTable>
+				<a-table :dataSource="dataSource" :columns="columns">
+					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'enabledState'">
+							<a-switch
+								:disabled="route.query.type === 'SEARCH'"
+								checkedValue="ENABLE"
+								unCheckedValue="DISABLED"
+								checked-children="启用"
+								un-checked-children="停用"
+								v-model:checked="record.enabledState"
+							/>
+						</template>
+						<template v-if="column.dataIndex === 'unitId'">
+							<a-select
+								:disabled="route.query.type === 'SEARCH'"
+								style="width: 100%"
+								placeholder="请选择单位"
+								v-model:value="record.unitId"
+								:options="unitOptions"
+								:field-names="{
+									label: 'name',
+									value: 'id'
+								}"
+							/>
+						</template>
+						<template v-if="column.dataIndex === 'productQty'">
+							<a-input-number
+								:disabled="route.query.type === 'SEARCH'"
+								style="width: 100%"
+								v-model:value="record.productQty"
+							/>
+						</template>
+						<template v-if="column.dataIndex === 'name'">
+							<a-input :disabled="route.query.type === 'SEARCH'" v-model:value="record.name" />
+						</template>
+					</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
+							v-model:value="productFormData.promoteEnabledState"
+							:options="tool.dictList('COMMON_STATUS') || []"
+						/>
+					</a-form-item>
+					<a-form-item label="商品推广 （支持上传：.png .jpg且大小为200k的图片，最多可上传5张）">
+						<a-upload
+							v-model:file-list="fileList"
+							name="avatar"
+							list-type="picture-card"
+							class="avatar-uploader"
+							:show-upload-list="false"
+							action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+							:before-upload="beforeUpload"
+							@change="handleChange"
+						>
+							<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
+							<div v-else>
+								<loading-outlined v-if="loading"></loading-outlined>
+								<plus-outlined v-else></plus-outlined>
+								<div class="ant-upload-text">Upload</div>
+							</div>
+						</a-upload>
+					</a-form-item>
+					<a-form-item name="promoteUrl">
+						<a-input v-model:value="productFormData.promoteUrl" placeholder="请输入商品链接" />
+					</a-form-item>
+				</a-form>
+			</a-tab-pane>
+			<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-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>
 </template>
 
-<script setup>
+<script setup name="materielDetail">
+	import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
+	import unitApi from '@/api/base/unit/unitApi'
+
 	import { required } from '@/utils/formRules'
-	import officialAccountApi from '@/api/base/wx/officialAccountApi'
 	import useFormHandler from '@/hook/useFormHandler'
 	import tool from '@/utils/tool'
 	import { useRoute } from 'vue-router'
+	import materialApi from '@/api/base/material/materialApi'
+	import materialCategoryApi from '@/api/base/material/materialCategoryApi'
+	import { message } from 'ant-design-vue'
+	import sysBrandApi from '@/api/base/brand/sysBrandApi'
 	const route = useRoute()
-	import DynamicTable from '@/components/DynamicTable/index.vue'
+
+	const formRef1 = ref(null)
+	const formRef2 = ref(null)
+	const formRef3 = ref(null)
+
+	let dataSource = ref([])
+	let unitOptions = reactive([])
+	let productFormData = ref({
+		promoteEnabledState: 'ENABLE'
+	})
+	let extendData = ref([]) // 扩展字段
+
+	onMounted(async () => {
+		formRefs.value = [formRef1.value, formRef2.value, formRef3.value]
+		fetchData(route.query.type).then(async (res) => {
+			if (res) {
+				productFormData.value.promoteEnabledState = res.promoteEnabledState
+				productFormData.value.promoteUrl = res.promoteUrl
+				const packageData = await materialApi.materialPackageData({
+					materialId: res.id
+				})
+
+				const unitList = await unitApi.sysUnitList({
+					groupId: res.unitGroupId
+				})
+
+				unitFormItems.forEach((item) => {
+					if (item.name !== 'unitGroupId') {
+						item.attrs.options = unitList || []
+					}
+				})
+
+				unitOptions = unitList
+
+				dataSource.value = packageData
+			}
+		})
+
+		if (route.query.type === 'ADD') {
+			const packageType = tool.dictList('MATERIAL_PACKAGE_TYPE')
+			packageType.forEach((item) => {
+				dataSource.value.push({
+					enabledState: 'ENABLE',
+					number: item.value,
+					type: item.label,
+					name: item.label,
+					unitId: '',
+					productQty: ''
+				})
+			})
+		}
+
+		// 单位列表
+		const unitList = await unitGroupsApi.sysUnitGroupList({
+			enabledState: 'ENABLE'
+		})
+
+		unitList &&
+			unitFormItems.forEach((item) => {
+				if (item.name === 'unitGroupId') {
+					item.attrs.options = unitList
+				}
+			})
+
+		// 物料类型
+		const materialCategoryList = await materialCategoryApi.materialCategoryTree({
+			enabledState: 'ENABLE'
+		})
+
+		materialCategoryList &&
+			baseFormItems.forEach((item) => {
+				if (item.name === 'categoryId') {
+					item.attrs.options = materialCategoryList
+				}
+			})
+
+		// 品牌列表
+		const brandList = await sysBrandApi.sysBrandList({
+			enabledState: 'ENABLE'
+		})
+
+		brandList &&
+			baseFormItems.forEach((item) => {
+				if (item.name === 'brandId') {
+					item.attrs.options = brandList
+				}
+			})
+
+		extendData.value = await getExtendField('MATERIAL')
+	})
+
+	let activeKey = ref('1')
+
+	// 选择单位组
+	const handleChangeUnitGroup = (value) => {
+		unitFormItems.forEach((item) => {
+			if (item.name !== 'unitGroupId') {
+				formData[item.name] = null
+			}
+		})
+
+		unitApi
+			.sysUnitList({
+				groupId: value
+			})
+			.then((res) => {
+				unitFormItems.forEach((item) => {
+					if (item.name !== 'unitGroupId') {
+						item.attrs.options = res
+					}
+				})
+
+				unitOptions = res
+				const resFilter = res.filter((item) => item.isBase === 'YES')
+				if (resFilter.length > 0) formData.baseUnitId = resFilter[0].id
+			})
+	}
+
+	const onSubmitForm = () => {
+		onSubmit({
+			isDeep: true,
+			materialPackageList: dataSource.value,
+			...formData,
+			...productFormData.value,
+			extJson: JSON.stringify(extendFormData.value) || ''
+		})
+	}
+
+	// 图片上传
+
+	function getBase64(img, callback) {
+		const reader = new FileReader()
+		reader.addEventListener('load', () => callback(reader.result))
+		reader.readAsDataURL(img)
+	}
+	const fileList = ref([])
+	const loading = ref(false)
+	const imageUrl = ref('')
+	const handleChange = (info) => {
+		if (info.file.status === 'uploading') {
+			loading.value = true
+			return
+		}
+		if (info.file.status === 'done') {
+			// Get this url from response in real world.
+			getBase64(info.file.originFileObj, (base64Url) => {
+				imageUrl.value = base64Url
+				loading.value = false
+			})
+		}
+		if (info.file.status === 'error') {
+			loading.value = false
+			message.error('upload error')
+		}
+	}
+	const beforeUpload = (file) => {
+		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+		if (!isJpgOrPng) {
+			message.error('You can only upload JPG file!')
+		}
+		const isLt2M = file.size / 1024 / 1024 < 2
+		if (!isLt2M) {
+			message.error('Image must smaller than 2MB!')
+		}
+		return isJpgOrPng && isLt2M
+	}
 
 	const formRules = {
 		name: [required('请输入名称')],
@@ -60,15 +311,14 @@
 		secret: [required('请输入AppSecret')]
 	}
 
-	const officialAccountFormItems = [
+	const materialFormItems = [
 		{
 			label: '编码：',
 			name: 'number',
-			type: 'a-select',
+			type: 'a-input',
 			span: 6,
 			attrs: {
-				placeholder: '请选择类型',
+				placeholder: '请输入编码'
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
 			}
 		},
 		{
@@ -83,11 +333,50 @@
 			}
 		},
 		{
-			label: '仓库条码：',
+			label: '简称：',
-			name: 'name',
+			name: 'shortName',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '别名：',
+			name: 'alias',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '规格型号：',
+			name: 'specification',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '包装比例：',
+			name: 'packageProportion',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '助记码：',
+			name: 'mnemonicCode',
 			type: 'a-input',
 			span: 6,
-			rules: [required('请输入名称')],
 			attrs: {
 				placeholder: '请输入名称',
 				allowClear: true
@@ -103,18 +392,121 @@
 				options: tool.dictList('COMMON_STATUS')
 			},
 			defaultValue: 'ENABLE'
+		}
+	]
+
+	const baseFormItems = reactive([
+		{
+			label: '物料类型：',
+			name: 'categoryId',
+			type: 'a-select',
+			span: 6,
+			rules: [required('请选择物料类型')],
+			attrs: {
+				placeholder: '请选择物料类型',
+				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE'),
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
+			}
 		},
 		{
-			label: '库存管理方式：',
+			label: '品牌：',
-			name: 'name',
+			name: 'brandId',
+			type: 'a-select',
+			span: 6,
+			rules: [required('请选择品牌')],
+			attrs: {
+				placeholder: '请选择品牌',
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
+			}
+		},
+		{
+			label: '最高库存：',
+			name: 'maxInventory',
+			type: 'a-input-number',
+			span: 6,
+			attrs: {
+				placeholder: '请输入最高库存'
+			}
+		},
+		{
+			label: '最低库存：',
+			name: 'minInventory',
+			type: 'a-input-number',
+			span: 6,
+			attrs: {
+				placeholder: '请输入最高库存'
+			}
+		},
+		{
+			label: '保质期：',
+			name: 'shelfLife',
+			type: 'a-input-number',
+			span: 6,
+			rules: [required('请选择保质期')],
+			attrs: {
+				placeholder: '请输入保质期',
+				allowClear: true
+			}
+		},
+		{
+			label: '统一零售价：',
+			name: 'retailPrice',
+			type: 'a-input-number',
+			span: 6,
+			attrs: {
+				placeholder: '请输入统一零售价',
+				allowClear: true
+			}
+		},
+		{
+			label: '商品条形码：',
+			name: 'barcode',
 			type: 'a-input',
 			span: 6,
-			rules: [required('请输入名称')],
 			attrs: {
-				placeholder: '请输入名称',
+				placeholder: '请输入商品条形码',
 				allowClear: true
 			}
 		},
+		{
+			label: '保质期单位：',
+			name: 'shelfLifeUnit',
+			type: 'a-select',
+			span: 6,
+			rules: [required('请选择保质期单位')],
+			attrs: {
+				placeholder: '请选择保质期单位',
+				options: tool.dictList('DATE_UNIT')
+			}
+		},
+		{
+			label: '最大包装数量：',
+			name: 'maxPackageQuantity',
+			type: 'a-input-number',
+			span: 6,
+			rules: [required('请输入最大包装数量')],
+			attrs: {
+				placeholder: '请输入最大包装数量',
+				allowClear: true
+			}
+		},
+		{
+			label: '批次管理：',
+			name: 'batchManage',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择批次管理',
+				options: tool.dictList('COMMON_STATUS')
+			}
+		},
 		{
 			label: '备注：',
 			name: 'remarks',
@@ -125,222 +517,160 @@
 				allowClear: true
 			}
 		}
-	]
+	])
 
-	const baseFormItems = [
+	const unitFormItems = reactive([
-		{
-			label: '物料类型：',
-			name: 'number',
-			type: 'a-select',
-			span: 6,
-			attrs: {
-				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
-			}
-		},
-		{
-			label: '品牌：',
-			name: 'number',
-			type: 'a-select',
-			span: 6,
-			attrs: {
-				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
-			}
-		},
-		{
-			label: '最高库存：',
-			name: 'number',
-			type: 'a-select',
-			span: 6,
-			attrs: {
-				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
-			}
-		},
-		{
-			label: '最低库存：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-
-		{
-			label: '保质期：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-		{
-			label: '统一零售价：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-		{
-			label: '商品条形码：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-		{
-			label: '保质期单位：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-		{
-			label: '最大包装数量：',
-			name: 'remarks',
-			type: 'a-textarea',
-			span: 24,
-			attrs: {
-				placeholder: '请输入备注',
-				allowClear: true
-			}
-		},
-		{
-			label: '批次管理：',
-			name: 'number',
-			type: 'a-select',
-			span: 6,
-			attrs: {
-				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
-			}
-		},
-	]
-
-	const unitFormItems = [
 		{
 			label: '单位组：',
-			name: 'number',
+			name: 'unitGroupId',
 			type: 'a-select',
 			span: 6,
+			rules: [required('请选择单位组')],
 			attrs: {
 				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				},
+				onChange: handleChangeUnitGroup
 			}
 		},
 		{
 			label: '基本单位：',
-			name: 'number',
+			name: 'baseUnitId',
 			type: 'a-select',
 			span: 6,
 			attrs: {
 				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+				options: [],
+				disabled: true,
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		},
 		{
 			label: '采购单位：',
-			name: 'number',
+			name: 'purchaseUnitId',
 			type: 'a-select',
 			span: 6,
+			rules: [required('请选择采购单位')],
 			attrs: {
 				placeholder: '请选择类型',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		},
 		{
 			label: '分销单位：',
-			name: 'remarks',
+			name: 'distrUnitId',
-			type: 'a-textarea',
+			type: 'a-select',
-			span: 24,
+			span: 6,
+			rules: [required('请选择分销单位')],
 			attrs: {
 				placeholder: '请输入备注',
-				allowClear: true
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		},
 
 		{
 			label: '生产单位：',
-			name: 'remarks',
+			name: 'produceUnitId',
-			type: 'a-textarea',
+			type: 'a-select',
-			span: 24,
+			span: 6,
+			rules: [required('请选择生产单位')],
 			attrs: {
 				placeholder: '请输入备注',
-				allowClear: true
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		},
 		{
 			label: '销售单位：',
-			name: 'remarks',
+			name: 'saleUnitId',
-			type: 'a-textarea',
+			type: 'a-select',
-			span: 24,
+			span: 6,
+			rules: [required('请选择销售单位')],
 			attrs: {
 				placeholder: '请输入备注',
-				allowClear: true
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		},
 		{
 			label: '库存单位：',
-			name: 'remarks',
+			name: 'storeUnitId',
-			type: 'a-textarea',
+			type: 'a-select',
-			span: 24,
+			rules: [required('请选择库存单位')],
+			span: 6,
 			attrs: {
 				placeholder: '请输入备注',
-				allowClear: true
+				options: [],
+				fieldNames: {
+					label: 'name',
+					value: 'id'
+				}
 			}
 		}
-	]
-
-
-	const formRef1 = ref(null)
-	const formRef2 = ref(null)
-
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
-		[...officialAccountFormItems, ...baseFormItems],
-		{
-			submitForm: officialAccountApi.officialAccountSubmitForm,
-			getDetail: officialAccountApi.officialAccountDetail
-		}
-	)
-
-	onMounted(() => {
-		formRefs.value = [formRef1.value, formRef2.value]
-		fetchData(route.query.type)
-	})
-
-	let activeKey = ref('1')
-
-	const data = ref([
-		{ id: '1', name: 'John', age: 28 },
-		{ id: '2', name: 'Jane', age: 22 }
 	])
 
 	const columns = [
 		{
-			title: '上游仓库代码',
+			title: '启用',
-			dataIndex: 'name',
+			dataIndex: 'enabledState',
 			editable: true,
-			dataType: 'text' // 或 'number', 'select'
+			align: 'center'
 		},
 		{
-			title: '上游仓库名称',
+			title: '条码类型编码',
-			dataIndex: 'age',
+			dataIndex: 'number',
 			editable: true,
-			dataType: 'number'
+			align: 'center'
+		},
+		{
+			title: '条码类型',
+			dataIndex: 'type',
+			editable: true,
+			align: 'center'
+		},
+		{
+			title: '包装关系名称',
+			dataIndex: 'name',
+			editable: true,
+			align: 'center'
+		},
+		{
+			title: '单位',
+			dataIndex: 'unitId',
+			editable: true,
+			align: 'center'
+		},
+		{
+			title: '产品数',
+			dataIndex: 'productQty',
+			editable: true,
+			align: 'center'
 		}
 	]
+
+	const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
+		useFormHandler([...materialFormItems, ...baseFormItems, ...unitFormItems], {
+			submitForm: materialApi.materialSubmitForm,
+			getDetail: materialApi.materialDetail
+		})
 </script>

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

@@ -0,0 +1,135 @@
+<template>
+	<xn-form-container
+		:title="pageType === 'EDIT' ? '编辑物料' : pageType === 'ADD' ? '增加物料' : '查看物料'"
+		:width="700"
+		: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-form-item label="编码：" name="number">
+						<a-input
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.number"
+							placeholder="请输入编码"
+							allow-clear
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="24">
+					<a-form-item label="名称：" name="name">
+						<a-input
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.name"
+							placeholder="请输入物料名称"
+							allow-clear
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="24">
+					<a-form-item label="上级物料：" name="parentId">
+						<a-tree-select
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.parentId"
+							style="width: 100%"
+							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
+							:tree-data="treeData"
+							placeholder="请选择上级物料"
+							:fieldNames="{
+								children: 'children',
+								label: 'name',
+								value: 'id'
+							}"
+						>
+						</a-tree-select>
+					</a-form-item>
+				</a-col>
+			</a-row>
+		</a-form>
+		<template #footer>
+			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
+			<a-button v-if="pageType !== 'SEARCH'" type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
+		</template>
+	</xn-form-container>
+</template>
+
+<script setup name="productionOrganizationForm">
+	import { cloneDeep } from 'lodash-es'
+	import { required } from '@/utils/formRules'
+	import productionOrganizationApi from '@/api/base/production-organization/productionOrganizationApi'
+	import sysStoreApi from '@/api/base/store/sysStoreApi'
+	import materialCategoryApi from '@/api/base/material/materialCategoryApi'
+	// 抽屉状态
+	const visible = ref(false)
+	const emit = defineEmits({ successful: null })
+	const formRef = ref()
+	// 表单数据
+	let formData_enum = {
+		type: 'FACTORY',
+		enabledState: 'ENABLE'
+	}
+	const formData = ref({})
+	const submitLoading = ref(false)
+	const typeOptions = ref([])
+	const enabledStateOptions = ref([])
+	let pageType = ref('ADD')
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			pageType.value = record.pageType
+			let recordData = cloneDeep(record)
+			formData.value = Object.assign({}, recordData)
+		} else {
+			pageType.value = 'ADD'
+			formData.value = formData_enum
+		}
+
+		materialCategoryApi.materialCategoryTree().then((res) => {
+			treeData.value = [
+				{
+					id: 0,
+					parentId: '0',
+					name: '顶级',
+					children: res ? res : []
+				}
+			]
+		})
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+	// 默认要校验的refresh
+	const formRules = {
+		name: [required('请输入名称')],
+		parentId: [required('请选择上级物料')]
+	}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value.validate().then(() => {
+			submitLoading.value = true
+			const formDataParam = cloneDeep(formData.value)
+
+			materialCategoryApi
+				.materialCategorySubmitForm(formDataParam, formDataParam.id)
+				.then(() => {
+					onClose()
+					emit('successful')
+				})
+				.finally(() => {
+					submitLoading.value = false
+				})
+		})
+	}
+
+	let treeData = ref([])
+	// 抛出函数
+	defineExpose({
+		onOpen
+	})
+</script>

src/views/basicData/materiel/index.vue

@@ -8,8 +8,17 @@
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="类型" name="type">
+					<a-form-item label="编码" name="number">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-input v-model:value="searchFormState.number" 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="$TOOL.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -20,42 +29,21 @@
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-		<a-row :gutter="16">
+		<a-row :gutter="24">
 			<a-col :span="6">
-				<div className="s-table-tool">
+				<dynamic-tree
-					<div className="s-table-tool-left">分类</div>
+					ref="dynamicTreeRef"
-					<!--  斑马纹 -->
+					treeTitle="物料分类"
-					<div className="layout-items-center s-table-tool-right">
+					:tableRef="tableRef"
-						<span v-for="item in tool" :key="item.name">
+					:openFormRef="materialCategoryFormRef"
-							<!-- 新增 -->
+					:apiModel="{
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'plus'" @click="handleAddTree">
+						getTree: materialCategoryApi.materialCategoryTree,
-								<component class="icons" :is="item.icon"></component>
+						delTree: materialCategoryApi.materialCategoryDelete
-							</a-tooltip>
+					}"
-							<!-- 修改 -->
+					@selectTree="selectTree"
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'edit'">
+					@delTree="delTree"
-								<component class="icons" :is="item.icon"></component>
+				></dynamic-tree>
-							</a-tooltip>
-							<!-- 删除 -->
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'delete'">
-								<a-popconfirm title="确认删除？" ok-text="Yes" cancel-text="No">
-									<component class="icons" :is="item.icon"></component>
-								</a-popconfirm>
-							</a-tooltip>
-							<!-- 刷新 -->
-							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'refresh'">
-								<component class="icons" :is="item.icon"></component>
-							</a-tooltip>
-						</span>
-					</div>
-				</div>
-
-				<a-directory-tree
-					v-model:expandedKeys="expandedKeys"
-					v-model:selectedKeys="selectedKeys"
-					multiple
-					:tree-data="treeData"
-				></a-directory-tree>
 			</a-col>
 			<a-col :span="18">
 				<s-table
@@ -65,8 +53,12 @@
 					:alert="options.alert.show"
 					bordered
 					:row-key="(record) => record.id"
-					:tool-config="toolConfig"
+					:tool-config="options.toolConfig"
 					:row-selection="options.rowSelection"
+					:scroll="{
+						x: 100,
+						y: 'calc(100vh - 300px)'
+					}"
 				>
 					<template #operator class="table-operator">
 						<a-space>
@@ -90,44 +82,55 @@
 						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'number'">
+							<a href="#">{{ record.number }}</a>
+						</template>
 						<template v-if="column.dataIndex === 'enabledState'">
-							<a-switch
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-								checkedValue="ENABLE"
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-								unCheckedValue="DISABLED"
-								checked-children="启用"
-								un-checked-children="停用"
-								v-model:checked="record.enabledState"
-							/>
 						</template>
 						<template v-if="column.dataIndex === 'type'">
 							{{ $TOOL.dictTypeData('OFFICIAL_ACCOUNT_TYPE', record.type) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a-space>
-								<a
+								<a-tooltip title="查看">
-									@click="
+									<a
-										navigateTo('/basicData/materiel/detail', {
+										@click="
-											type: 'SEARCH',
+											navigateTo('/basicData/materiel/detail', {
-											id: record.id
+												type: 'SEARCH',
-										})
+												id: record.id
-									"
+											})
-									v-if="hasPerm('customerEdit')"
+										"
-									>查看</a
+										v-if="hasPerm('customerEdit')"
-								>
+									>
+										<EyeOutlined />
+										<!--									查看-->
+									</a>
+								</a-tooltip>
+
 								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-								<a
+								<a-tooltip title="查看">
-									@click="
+									<a
-										navigateTo('/basicData/materiel/detail', {
+										@click="
-											type: 'EDIT',
+											navigateTo('/basicData/materiel/detail', {
-											id: record.id
+												type: 'EDIT',
-										})
+												id: record.id
-									"
+											})
-									v-if="hasPerm('customerEdit')"
+										"
-									>编辑</a
+										v-if="hasPerm('customerEdit')"
-								>
+									>
+										<FormOutlined />
+										<!--									编辑-->
+									</a>
+								</a-tooltip>
+
 								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
-									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">删除</a-button>
+									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+										<DeleteOutlined />
+										<!--										删除-->
+									</a-button>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -136,63 +139,18 @@
 			</a-col>
 		</a-row>
 	</a-card>
+	<material-category-form ref="materialCategoryFormRef" @successful="successful"></material-category-form>
 </template>
 
-<script setup>
+<script setup name="materiel">
-	import customerApi from '@/api/base/customer/customerApi'
+	import materialApi from '@/api/base/material/materialApi'
-	import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
+	import materialCategoryApi from '@/api/base/material/materialCategoryApi'
+	import MaterialCategoryForm from '@/views/basicData/materiel/detail/materialCategoryForm.vue'
 	import { useTableManagement } from '@/hook/useTableManagement'
+	import { materielColumn } from '@/views/basicData/materiel/column/materiel-column'
 
-	const materielColumn = [
+	const materialCategoryFormRef = ref(null)
-		{
+	const dynamicTreeRef = ref(null)
-			title: '编码',
-			dataIndex: 'number',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
-		{
-			title: '名称',
-			dataIndex: 'type',
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
-		{
-			title: '分类',
-			dataIndex: 'name',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
-		{
-			title: '年龄',
-			dataIndex: 'enabledState',
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
-		{
-			title: '可用状态',
-			dataIndex: 'enabledState',
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
-		{
-			title: '创建时间',
-			dataIndex: 'createTime',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
-			align: 'center',
-			resizable: true,
-			width: 100
-		}
-	]
 
 	const {
 		searchFormState,
@@ -205,70 +163,34 @@
 		deleteBatchRecords,
 		options,
 		searchFormRef,
-		toolConfig,
 		navigateTo
 	} = useTableManagement(
 		{
-			page: customerApi.customerPage,
+			page: materialApi.materialPage,
-			delete: customerApi.customerDelete
+			delete: materialApi.materialDelete
 		},
 		materielColumn,
 		['customerEdit', 'customerDelete']
 	)
 
-	const tool = [
+	const selectTree = (value) => {
-		{
+		searchFormState.value.categoryId = value.id
-			name: 'plus',
+		tableRef.value.refresh()
-			icon: 'plus-outlined',
+	}
-			title: '新增'
-		},
-		{
-			name: 'edit',
-			icon: 'edit-outlined',
-			title: '编辑'
-		},
-		{
-			name: 'delete',
-			icon: 'delete-outlined',
-			title: '删除'
-		},
-		{
-			name: 'refresh',
-			icon: 'sync-outlined',
-			title: '刷新'
-		}
-	]
 
-	// 树结构
+	const delTree = () => {
-	const expandedKeys = ref(['0-0', '0-1'])
+		searchFormState.value.categoryId = null
-	const selectedKeys = ref([])
+		tableRef.value.refresh()
-	const treeData = []
+	}
-	const CustomerCategoryFormRef = ref(null)
 
-	const handleAddTree = () => {
+	const successful = () => {
-		CustomerCategoryFormRef.value.onOpen()
+		searchFormState.value.categoryId = null
+		tableRef.value.refresh()
+
+		dynamicTreeRef.value.loadTreeData()
 	}
 
 	onMounted(() => {
-		customerCategoryApi.customerCategoryTree().then((res) => {
+		dynamicTreeRef.value.loadTreeData()
-			console.log(res)
-		})
 	})
 </script>
-
-<style lang="less" scoped>
-	.s-table-tool {
-		display: flex;
-		margin-bottom: 16px;
-		.s-table-tool-left {
-			flex: 1;
-		}
-		.s-table-tool-right {
-			.s-tool-item {
-				font-size: 16px;
-				@apply ml-4;
-				cursor: pointer;
-			}
-		}
-	}
-</style>

src/views/basicData/publicAccount/columns/publicAccountColumn.js

@@ -0,0 +1,38 @@
+export const publicAccountColumn = [
+	{
+		title: '编码',
+		dataIndex: '',
+		sorter: (a, b) => a.address.length - b.address.length,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 100
+	},
+	{
+		title: '名称',
+		dataIndex: 'name',
+		sorter: (a, b) => a.address.length - b.address.length,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 100
+	},
+	{
+		title: '可用状态',
+		dataIndex: '',
+		sorter: (a, b) => a.address.length - b.address.length,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 100
+	},
+	{
+		title: '创建时间',
+		dataIndex: 'remarks',
+		sorter: (a, b) => a.address.length - b.address.length,
+		sortDirections: ['descend', 'ascend'],
+		align: 'center',
+		resizable: true,
+		width: 100
+	}
+]

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

@@ -15,14 +15,32 @@
 		/>
 	</a-card>
 
-	<a-card :bordered="false" title="基本信息" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-		<DynamicForm
+		<a-tabs v-model:activeKey="activeKey">
-			:allDisabled="route.query.type === 'SEARCH'"
+			<a-tab-pane key="1" tab="基本信息" forceRender>
-			:formItems="basicInfoFormItems"
+				<DynamicForm
-			:model="formData"
+					:allDisabled="route.query.type === 'SEARCH'"
-			:rules="formRules"
+					:formItems="basicInfoFormItems"
-			ref="formRef2"
+					:model="formData"
-		/>
+					:rules="formRules"
+					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>
 	</a-card>
 </template>
 
@@ -30,7 +48,7 @@
 	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,112 +59,26 @@
 		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({})
+	let activeKey = ref('1')
+	let extendData = ref([])
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+	const { formData, formRefs, inform, extendFormData, onSubmit, handleBack, fetchData, getExtendField } =
-		[...officialAccountFormItems, ...basicInfoFormItems],
+		useFormHandler([...officialAccountFormItems, ...basicInfoFormItems], {
-		{
 			submitForm: officialAccountApi.officialAccountSubmitForm,
 			getDetail: officialAccountApi.officialAccountDetail
-		}
+		})
-	)
 
 	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value]
-		await fetchData(route.query.type)
+		fetchData(route.query.type).then((res) => {
+			if (res) {
+				detailData.value = res
+			}
+		})
+
+		extendData.value = await getExtendField('MATERIAL')
 	})
 </script>

src/views/basicData/publicAccount/index.vue

@@ -8,8 +8,12 @@
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="类型" name="type">
+					<a-form-item label="可用状态" name="enabledState">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择可用状态"
+							:options="$TOOL.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -20,7 +24,7 @@
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
 		<s-table
 			ref="tableRef"
 			:columns="columns"
@@ -28,10 +32,14 @@
 			:alert="options.alert.show"
 			bordered
 			:row-key="(record) => record.id"
-			:tool-config="toolConfig"
+			:tool-config="options.toolConfig"
 			:row-selection="options.rowSelection"
+			:scroll="{
+				x: 100,
+				y: 'calc(100vh - 300px)'
+			}"
 		>
-			<template #operator class="table-operator">
+			<template #operator>
 				<a-space>
 					<a-button
 						type="primary"
@@ -53,44 +61,52 @@
 				</a-space>
 			</template>
 			<template #bodyCell="{ column, record }">
-				<template v-if="column.dataIndex === 'enabledState'">
+				<template v-if="column.dataIndex === 'number'">
-					<a-switch
+					<a href="#">{{ record.number }}</a>
-						checkedValue="ENABLE"
-						unCheckedValue="DISABLED"
-						checked-children="启用"
-						un-checked-children="停用"
-						v-model:checked="record.enabledState"
-					/>
 				</template>
-				<template v-if="column.dataIndex === 'type'">
+				<template v-if="column.dataIndex === 'enabledState'">
-					{{ $TOOL.dictTypeData('OFFICIAL_ACCOUNT_TYPE', record.type) }}
+					<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
+					<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
 				</template>
 				<template v-if="column.dataIndex === 'action'">
 					<a-space>
-						<a
+						<a-tooltip title="查看">
-							@click="
+							<a
-								navigateTo('/basicData/publicAccount/detail', {
+								@click="
-									type: 'SEARCH',
+									navigateTo('/basicData/publicAccount/detail', {
-									id: record.id
+										type: 'SEARCH',
-								})
+										id: record.id
-							"
+									})
-							v-if="hasPerm('officialAccountEdit')"
+								"
-							>查看</a
+								v-if="hasPerm('customerEdit')"
-						>
+							>
-						<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+								<EyeOutlined />
-						<a
+								<!--									查看-->
-							@click="
+							</a>
-								navigateTo('/basicData/publicAccount/detail', {
+						</a-tooltip>
-									type: 'EDIT',
+
-									id: record.id
+						<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-								})
+						<a-tooltip title="查看">
-							"
+							<a
-							v-if="hasPerm('officialAccountEdit')"
+								@click="
-							>编辑</a
+									navigateTo('/basicData/publicAccount/detail', {
-						>
+										type: 'EDIT',
-						<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+										id: record.id
+									})
+								"
+								v-if="hasPerm('customerEdit')"
+							>
+								<FormOutlined />
+								<!--									编辑-->
+							</a>
+						</a-tooltip>
+
+						<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
-							<a-button type="link" danger size="small" v-if="hasPerm('officialAccountDelete')">删除</a-button>
+							<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+								<DeleteOutlined />
+								<!--										删除-->
+							</a-button>
 						</a-popconfirm>
 					</a-space>
 				</template>
@@ -99,51 +115,46 @@
 	</a-card>
 </template>
 
-<script setup name="basicDataPublicAccount">
+<script setup name="publicAccount">
 	import officialAccountApi from '@/api/base/wx/officialAccountApi'
 	import { useTableManagement } from '@/hook/useTableManagement'
 
 	const publicAccountColumn = [
-		{
-			title: '编码',
-			dataIndex: 'number',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
-			align: 'center',
-			resizable: true,
-			width: 100
-		},
 		{
 			title: '类型',
 			dataIndex: 'type',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true,
+			sorter: true,
+			sortDirections: ['descend', 'ascend']
 		},
 		{
 			title: '名称',
 			dataIndex: 'name',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '可用状态',
 			dataIndex: 'enabledState',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 100,
+			ellipsis: true
 		},
 		{
 			title: '创建时间',
 			dataIndex: 'createTime',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		}
 	]
 

src/views/basicData/stash/columns/brandColumns.js

@@ -0,0 +1,18 @@
+export const brandColumns = [
+	{
+		title: '编码',
+		dataIndex: 'number'
+	},
+	{
+		title: '名称',
+		dataIndex: 'name'
+	},
+	{
+		title: '可用状态',
+		dataIndex: 'enabledState'
+	},
+	{
+		title: '创建时间',
+		dataIndex: 'createTime'
+	}
+]

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,10 +26,29 @@
 					ref="formRef2"
 				/>
 			</a-tab-pane>
-			<a-tab-pane key="2" tab="上游仓库系统" force-render>
+			<a-tab-pane key="2" tab="扩展字段" forceRender v-if="extendData.length > 0">
-<!--				<DynamicTable :initialData="data" :columns="columns" rowKey="id"></DynamicTable>-->
+				<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"
+			:org-tree-api="selectorApiFunction.orgTreeApi"
+			:user-page-api="selectorApiFunction.userPageApi"
+			:checkedUserListApi="selectorApiFunction.userListByIdListApi"
+			@onBack="userSelectorOnBack"
+			:radioModel="true"
+		></user-selector-plus>
 	</a-card>
 </template>
 
@@ -39,8 +58,45 @@
 	import useFormHandler from '@/hook/useFormHandler'
 	import tool from '@/utils/tool'
 	import { useRoute } from 'vue-router'
+	import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
+	import bizOrgApi from '@/api/biz/bizOrgApi'
+	import userCenterApi from '@/api/sys/userCenterApi'
 	const route = useRoute()
-	import DynamicTable from '@/components/DynamicTable/index.vue'
+	const userSelectorPlusProRef = ref(null)
+	let extendData = ref([])
+
+	// 传递设计器需要的API
+	const selectorApiFunction = {
+		orgTreeApi: (param) => {
+			return bizOrgApi.orgTreeSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userPageApi: (param) => {
+			return bizOrgApi.orgUserSelector(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		},
+		userListByIdListApi: (param) => {
+			return userCenterApi.userCenterGetUserListByIdList(param).then((data) => {
+				return Promise.resolve(data)
+			})
+		}
+	}
+
+	const handleManageUser = () => {
+		userSelectorPlusProRef.value.showUserPlusModal([formData.manageUserId])
+	}
+
+	const userSelectorOnBack = (data) => {
+		if (data.length > 0) {
+			formData.manageUserId = data[0].id
+			formData.manageUserName = data[0].name
+		} else {
+			formData.manageUserId = null
+			formData.manageUserName = null
+		}
+	}
 
 	const formRules = {
 		name: [required('请输入名称')],
@@ -49,7 +105,7 @@
 		secret: [required('请输入AppSecret')]
 	}
 
-	const officialAccountFormItems = [
+	const officialAccountFormItems = reactive([
 		{
 			label: '编码：',
 			name: 'number',
@@ -104,6 +160,22 @@
 			},
 			defaultValue: ''
 		},
+		{
+			label: '上游仓库：',
+			name: 'parentId',
+			type: 'a-tree-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择上游仓库',
+				treeData: [],
+				fieldNames: {
+					children: 'children',
+					label: 'name',
+					value: 'id'
+				}
+			},
+			defaultValue: ''
+		},
 		{
 			label: '备注：',
 			name: 'remarks',
@@ -114,17 +186,19 @@
 				allowClear: true
 			}
 		}
-	]
+	])
 
 	const baseFormItems = [
 		{
 			label: '管理员：',
-			name: 'manageUserId',
+			name: 'manageUserName',
-			type: 'a-select',
+			type: 'a-input',
 			span: 6,
 			attrs: {
 				placeholder: '请选择管理员',
-				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE'),
+				readonly: true,
+				onClick: handleManageUser
 			}
 		},
 		{
@@ -160,38 +234,44 @@
 	const formRef1 = ref(null)
 	const formRef2 = ref(null)
 
-	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+	const { inform, formData, extendFormData, formRefs, onSubmit, handleBack, fetchData, getExtendField } =
-		[...officialAccountFormItems, ...baseFormItems],
+		useFormHandler([...officialAccountFormItems, ...baseFormItems], {
-		{
 			submitForm: sysStoreApi.sysStoreSubmitForm,
 			getDetail: sysStoreApi.sysStoreDetail
-		}
+		})
-	)
 
-	onMounted(() => {
+	const onSubmitForm = () => {
+		onSubmit({
+			isDeep: true,
+			...formData,
+			extJson: JSON.stringify(extendFormData.value) || ''
+		})
+	}
+
+	onMounted(async () => {
 		formRefs.value = [formRef1.value, formRef2.value]
-		fetchData(route.query.type)
+		fetchData(route.query.type).then((res) => {
+			if (res) {
+				formData.manageUserId = res.manageUserId
+			}
+		})
+
+		const sysStoreTreeList = await sysStoreApi.sysStoreTree()
+		officialAccountFormItems.forEach((item) => {
+			if (item.name === 'parentId') {
+				item.attrs.treeData = [
+					{
+						id: 0,
+						parentId: '-1',
+						name: '顶级',
+						children: sysStoreTreeList || []
+					}
+				]
+			}
+		})
+
+		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/stash/index.vue

@@ -2,14 +2,23 @@
 	<a-card :bordered="false">
 		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
 			<a-row :gutter="24">
+				<a-col :span="6">
+					<a-form-item label="编码" name="number">
+						<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
+					</a-form-item>
+				</a-col>
 				<a-col :span="6">
 					<a-form-item label="名称" name="name">
 						<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="类型" name="type">
+					<a-form-item label="可用状态" name="enabledState">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择可用状态"
+							:options="$TOOL.dictList('COMMON_STATUS')"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -20,83 +29,120 @@
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-		<s-table
+		<a-row :gutter="24">
-			ref="tableRef"
+			<a-col :span="6">
-			:columns="columns"
+				<dynamic-tree
-			:data="loadData"
+					ref="dynamicTreeRef"
-			:alert="options.alert.show"
+					treeTitle="生产组织"
-			bordered
+					:tableRef="tableRef"
-			:row-key="(record) => record.id"
+					:apiModel="{
-			:tool-config="toolConfig"
+						getTree: sysStoreApi.sysStoreTree,
-			:row-selection="options.rowSelection"
+						delTree: sysStoreApi.productionOrganizationDelete
-		>
+					}"
-			<template #operator class="table-operator">
+					@selectTree="onSelectTree"
-				<a-space>
+					:toolConfig="{
-					<a-button
+						plus: false,
-						type="primary"
+						edit: false,
-						@click="
+						delete: false,
-							navigateTo('/basicData/stash/detail', {
+						refresh: true
-								type: 'ADD'
+					}"
-							})
+				></dynamic-tree>
-						"
+			</a-col>
-						v-if="hasPerm('sysStoreAdd')"
+			<a-col :span="18">
-					>
+				<s-table
-						<template #icon><plus-outlined /></template>
+					ref="tableRef"
-						新增
+					:columns="columns"
-					</a-button>
+					:data="loadData"
-					<xn-batch-delete
+					:alert="options.alert.show"
-						v-if="hasPerm('deleteBatchSysStore')"
+					bordered
-						:selectedRowKeys="selectedRowKeys"
+					:row-key="(record) => record.id"
-						@batchDelete="deleteBatchRecords"
+					:tool-config="options.toolConfig"
-					/>
+					:row-selection="options.rowSelection"
-				</a-space>
+					:scroll="{
-			</template>
+						x: 100,
-			<template #bodyCell="{ column, record }">
+						y: 'calc(100vh - 300px)'
-				<template v-if="column.dataIndex === 'enabledState'">
+					}"
-					<a-switch
+				>
-						checkedValue="ENABLE"
+					<template #operator>
-						unCheckedValue="DISABLED"
+						<a-space>
-						checked-children="启用"
+							<a-button
-						un-checked-children="停用"
+								type="primary"
-						v-model:checked="record.enabledState"
+								@click="
-					/>
+									navigateTo('/basicData/stash/detail', {
-				</template>
+										type: 'ADD'
-				<template v-if="column.dataIndex === 'action'">
+									})
-					<a-space>
+								"
-						<a
+								v-if="hasPerm('sysStoreAdd')"
-							@click="
+							>
-								navigateTo('/basicData/stash/detail', {
+								<template #icon><plus-outlined /></template>
-									type: 'SEARCH',
+								新增
-									id: record.id
+							</a-button>
-								})
+							<xn-batch-delete
-							"
+								v-if="hasPerm('deleteBatchSysStore')"
-							v-if="hasPerm('sysStoreEdit')"
+								:selectedRowKeys="selectedRowKeys"
-							>查看</a
+								@batchDelete="deleteBatchRecords"
-						>
+							/>
-						<a-divider type="vertical" v-if="hasPerm(['sysStoreEdit', 'sysStoreDelete'], 'and')" />
+						</a-space>
-						<a
+					</template>
-							@click="
+					<template #bodyCell="{ column, record }">
-								navigateTo('/basicData/stash/detail', {
+						<template v-if="column.dataIndex === 'number'">
-									type: 'EDIT',
+							<a href="#">{{ record.number }}</a>
-									id: record.id
+						</template>
-								})
+						<template v-if="column.dataIndex === 'enabledState'">
-							"
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-							v-if="hasPerm('sysStoreEdit')"
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-							>编辑</a
+						</template>
-						>
+						<template v-if="column.dataIndex === 'action'">
-						<a-divider type="vertical" v-if="hasPerm(['sysStoreEdit', 'sysStoreDelete'], 'and')" />
+							<a-space>
-						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
+								<a-tooltip title="查看">
-							<a-button type="link" danger size="small" v-if="hasPerm('sysStoreDelete')">删除</a-button>
+									<a
-						</a-popconfirm>
+										@click="
-					</a-space>
+											navigateTo('/basicData/stash/detail', {
-				</template>
+												type: 'SEARCH',
-			</template>
+												id: record.id
-		</s-table>
+											})
+										"
+										v-if="hasPerm('customerEdit')"
+									>
+										<EyeOutlined />
+										<!--									查看-->
+									</a>
+								</a-tooltip>
+
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
+								<a-tooltip title="查看">
+									<a
+										@click="
+											navigateTo('/basicData/stash/detail', {
+												type: 'EDIT',
+												id: record.id
+											})
+										"
+										v-if="hasPerm('customerEdit')"
+									>
+										<FormOutlined />
+										<!--									编辑-->
+									</a>
+								</a-tooltip>
+
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
+								<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
+									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+										<DeleteOutlined />
+										<!--										删除-->
+									</a-button>
+								</a-popconfirm>
+							</a-space>
+						</template>
+					</template>
+				</s-table>
+			</a-col>
+		</a-row>
 	</a-card>
 </template>
 
-<script setup name="officialaccount">
+<script setup name="stash">
 	import sysStoreApi from '@/api/base/store/sysStoreApi'
 	import { useTableManagement } from '@/hook/useTableManagement'
 
@@ -104,43 +150,46 @@
 		{
 			title: '编码',
 			dataIndex: 'number',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 200,
+			ellipsis: true
 		},
 		{
 			title: '名称',
 			dataIndex: 'name',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 200,
+			ellipsis: true
 		},
 		{
 			title: '可用状态',
 			dataIndex: 'enabledState',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 100,
+			ellipsis: true
 		},
 		{
 			title: '仓库条码',
 			dataIndex: 'barcode',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 200,
+			ellipsis: true
 		},
 		{
 			title: '创建时间',
 			dataIndex: 'createTime',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 150,
+			ellipsis: true
 		}
 	]
 
@@ -165,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,35 +1,47 @@
 <template>
 	<xn-form-container
-		:title="formData.id ? '编辑生产组织' : '增加生产组织'"
+		: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 v-model:value="formData.number" placeholder="请输入编码" allow-clear />
+						<a-input
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.number"
+							placeholder="请输入编码"
+							allow-clear
+						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="类型：" name="type">
 						<a-select
+							:disabled="pageType !== 'ADD'"
 							v-model:value="formData.type"
 							placeholder="请选择组织类型"
 							:options="typeOptions"
 						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="工厂名称：" name="name">
-						<a-input v-model:value="formData.name" placeholder="请输入工厂名称" allow-clear />
+						<a-input
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.name"
+							placeholder="请输入工厂名称"
+							allow-clear
+						/>
 					</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'"
 							v-model:value="formData.storeId"
 							style="width: 100%"
 							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -44,14 +56,15 @@
 						</a-tree-select>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12" v-if="formData.type !== 'FACTORY'">
-					<a-form-item label="上级仓库：" name="parentId" v-if="formData.type !== 'FACTORY'">
+					<a-form-item label="上级组织：" name="parentId">
 						<a-tree-select
+							:disabled="pageType === 'SEARCH'"
 							v-model:value="formData.parentId"
 							style="width: 100%"
 							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
 							:tree-data="parentTreeData"
-							placeholder="请选择上级仓库"
+							placeholder="请选择上级组织"
 							:fieldNames="{
 								children: 'children',
 								label: 'name',
@@ -61,14 +74,20 @@
 						</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 v-model:value="formData.manufacturer" placeholder="请输入仓库id" allow-clear />
+						<a-input
+							:disabled="pageType === 'SEARCH'"
+							v-model:value="formData.manufacturer"
+							placeholder="请输入厂家名称"
+							allow-clear
+						/>
 					</a-form-item>
 				</a-col>
-				<a-col :span="24">
+				<a-col :span="12">
 					<a-form-item label="启用状态：" name="enabledState">
 						<a-select
+							:disabled="pageType === 'SEARCH'"
 							v-model:value="formData.enabledState"
 							placeholder="请选择启用状态"
 							:options="enabledStateOptions"
@@ -76,10 +95,12 @@
 					</a-form-item>
 				</a-col>
 			</a-row>
+
+			<OperationalInformation :detailData="detailData" v-if="pageType !== 'ADD'" :colSpan="12"></OperationalInformation>
 		</a-form>
 		<template #footer>
 			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
-			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
+			<a-button v-if="pageType !== 'SEARCH'" type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
 		</template>
 	</xn-form-container>
 </template>
@@ -95,21 +116,30 @@
 	const emit = defineEmits({ successful: null })
 	const formRef = ref()
 	// 表单数据
-	const formData = ref({
+	let formData_enum = {
 		type: 'FACTORY',
 		enabledState: 'ENABLE'
-	})
+	}
+	const formData = ref({})
+	const detailData = ref({})
 	const submitLoading = ref(false)
 	const typeOptions = ref([])
 	const enabledStateOptions = ref([])
+	let pageType = ref('ADD')
 
 	// 打开抽屉
 	const onOpen = (record) => {
 		visible.value = true
 		if (record) {
+			pageType.value = record.pageType
 			let recordData = cloneDeep(record)
 			formData.value = Object.assign({}, recordData)
+			detailData.value = Object.assign({}, recordData)
+		} else {
+			pageType.value = 'ADD'
+			formData.value = formData_enum
 		}
+
 		typeOptions.value = tool.dictList('PRODUCTION_ORGANIZATION_TYPE')
 		enabledStateOptions.value = tool.dictList('COMMON_STATUS')
 
@@ -124,14 +154,13 @@
 	// 关闭抽屉
 	const onClose = () => {
 		formRef.value.resetFields()
-		formData.value = {}
 		visible.value = false
 	}
-	// 默认要校验的
+	// 默认要校验的refresh
 	const formRules = {
 		name: [required('请输入名称')],
 		type: [required('请输入类型')],
-		parentId: [required('请选择上级仓库')],
+		parentId: [required('请选择上级仓库')]
 	}
 	// 验证并提交数据
 	const onSubmit = () => {

src/views/basicData/tissue/index.vue

@@ -7,35 +7,64 @@
 						<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
 					</a-form-item>
 				</a-col>
+				<a-col :span="6">
+					<a-form-item label="编码" name="number">
+						<a-input v-model:value="searchFormState.number" placeholder="请输入类型" />
+					</a-form-item>
+				</a-col>
 				<a-col :span="6">
 					<a-form-item label="类型" name="type">
-						<a-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+						<a-select
+							v-model:value="searchFormState.type"
+							placeholder="请选择组织类型"
+							:options="tool.dictList('PRODUCTION_ORGANIZATION_TYPE')"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="6" v-show="advanced">
+					<a-form-item label="可用状态" name="type">
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择可用状态"
+							:options="tool.dictList('COMMON_STATUS')"
+						/>
 					</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 @click="toggleAdvanced" style="margin-left: 8px">
+						{{ advanced ? '收起' : '展开' }}
+						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
+					</a>
 				</a-col>
 			</a-row>
 		</a-form>
 	</a-card>
 
-	<a-card :bordered="false" class="mt-4">
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
 		<a-row :gutter="24">
-			<a-col :span="4">
+			<a-col :span="6">
-				<a-directory-tree
+				<dynamic-tree
-					v-model:expandedKeys="expandedKeys"
+					ref="dynamicTreeRef"
-					v-model:selectedKeys="selectedKeys"
+					treeTitle="生产组织"
-					multiple
+					:tableRef="tableRef"
-					:fieldNames="{
+					:openFormRef="TissueFormRef"
-						children: 'children',
+					:apiModel="{
-						title: 'name',
+						getTree: productionOrganizationApi.productionOrganizationTree,
-						key: 'id'
+						delTree: productionOrganizationApi.productionOrganizationDelete
 					}"
-					:tree-data="treeData"
+					@selectTree="onSelectTree"
-				></a-directory-tree>
+					@delTree="delTree"
+					:toolConfig="{
+						plus: false,
+						edit: false,
+						delete: false,
+						refresh: true
+					}"
+				></dynamic-tree>
 			</a-col>
-			<a-col :span="20">
+			<a-col :span="18">
 				<s-table
 					ref="tableRef"
 					:columns="columns"
@@ -43,10 +72,14 @@
 					:alert="options.alert.show"
 					bordered
 					:row-key="(record) => record.id"
-					:tool-config="toolConfig"
+					:tool-config="options.toolConfig"
 					:row-selection="options.rowSelection"
+					:scroll="{
+						x: 100,
+						y: 'calc(100vh - 300px)'
+					}"
 				>
-					<template #operator class="table-operator">
+					<template #operator>
 						<a-space>
 							<a-button type="primary" @click="TissueFormRef.onOpen()" v-if="hasPerm('officialAccountAdd')">
 								<template #icon><plus-outlined /></template>
@@ -60,35 +93,36 @@
 						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'number'">
+							<a href="#">{{ record.number }}</a>
+						</template>
 						<template v-if="column.dataIndex === 'enabledState'">
-							<a-switch
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-								checkedValue="ENABLE"
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-								unCheckedValue="DISABLED"
-								checked-children="启用"
-								un-checked-children="停用"
-								v-model:checked="record.enabledState"
-							/>
 						</template>
 						<template v-if="column.dataIndex === 'type'">
 							{{ $TOOL.dictTypeData('PRODUCTION_ORGANIZATION_TYPE', record.type) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a-space>
-								<a @click="TissueFormRef.onOpen()" v-if="hasPerm('officialAccountEdit')">查看</a>
+								<a-tooltip title="查看">
-								<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+									<a @click="TissueFormRef.onOpen({ ...record, pageType: 'SEARCH' })" v-if="hasPerm('customerEdit')">
-								<a
+										<EyeOutlined />
-									@click="
+									</a>
-										navigateTo('/basicData/publicAccount/detail', {
+								</a-tooltip>
-											type: 'EDIT',
+
-											id: record.id
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-										})
+								<a-tooltip title="查看">
-									"
+									<a @click="TissueFormRef.onOpen({ ...record, pageType: 'EDIT' })" v-if="hasPerm('customerEdit')">
-									v-if="hasPerm('officialAccountEdit')"
+										<FormOutlined />
-									>编辑</a
+									</a>
-								>
+								</a-tooltip>
-								<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
-									<a-button type="link" danger size="small" v-if="hasPerm('officialAccountDelete')">删除</a-button>
+									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+										<DeleteOutlined />
+									</a-button>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -98,23 +132,25 @@
 		</a-row>
 	</a-card>
 
-	<TissueForm ref="TissueFormRef"></TissueForm>
+	<TissueForm ref="TissueFormRef" @successful="successful"></TissueForm>
 </template>
 
 <script setup name="basicDataPublicAccount">
 	import productionOrganizationApi from '@/api/base/production-organization/productionOrganizationApi'
 	import { useTableManagement } from '@/hook/useTableManagement'
 	import TissueForm from '@/views/basicData/tissue/detail/TissueForm.vue'
+	import tool from '@/utils/tool'
 
 	const publicAccountColumn = [
 		{
 			title: '编码',
 			dataIndex: 'number',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '类型',
@@ -126,27 +162,28 @@
 		{
 			title: '名称',
 			dataIndex: 'name',
-			sorter: (a, b) => a.address.length - b.address.length,
-			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		},
 		{
 			title: '可用状态',
 			dataIndex: 'enabledState',
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 100,
+			ellipsis: true
 		},
 		{
 			title: '创建时间',
 			dataIndex: 'createTime',
-			sorter: (a, b) => a.address.length - b.address.length,
+			sorter: true,
 			sortDirections: ['descend', 'ascend'],
 			align: 'center',
 			resizable: true,
-			width: 100
+			width: 300,
+			ellipsis: true
 		}
 	]
 
@@ -157,12 +194,12 @@
 		columns,
 		loadData,
 		reset,
-		deleteRecord,
 		deleteBatchRecords,
 		options,
 		searchFormRef,
-		toolConfig,
+		navigateTo,
-		navigateTo
+		toggleAdvanced,
+		advanced
 	} = useTableManagement(
 		{
 			page: productionOrganizationApi.productionOrganizationPage,
@@ -173,16 +210,26 @@
 	)
 
 	const TissueFormRef = ref(null)
+	const dynamicTreeRef = ref(null)
 
-	// 树级结构
+	const onSelectTree = (value) => {
-	const expandedKeys = ref(['0-0', '0-1'])
+		searchFormState.value.parentId = value.id
-	const selectedKeys = ref([])
+		tableRef.value.refresh()
-	let treeData = ref([])
+	}
+
+	const delTree = () => {
+		searchFormState.value.parentId = null
+		tableRef.value.refresh()
+	}
+
+	const successful = () => {
+		searchFormState.value.parentId = null
+		tableRef.value.refresh()
+
+		dynamicTreeRef.value.loadTreeData()
+	}
 
 	onMounted(() => {
-		productionOrganizationApi.productionOrganizationTree().then((res) => {
+		dynamicTreeRef.value.loadTreeData()
-			console.log(res)
-			treeData.value = res
-		})
 	})
 </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: 80,
+		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-card :bordered="false" title="单位信息">
-		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+		<DynamicForm
-			<a-row :gutter="16">
+			:allDisabled="route.query.type === 'SEARCH'"
-				<a-col :span="6">
+			:formItems="unitFormItems"
-					<a-form-item label="单位组：" name="unitGroupId">
+			:model="formData"
-						<a-select
+			:rules="formRules"
-							v-model:value="formData.unitGroupId"
+			ref="formRef1"
-							placeholder="请选择单位组"
+		/>
-							:options="unitGroupList"
+	</a-card>
-							:fieldNames="{
+
-								label: 'name',
+	<a-card :bordered="false" class="mt-4" style="height: 100%">
-								value: 'id'
+		<a-tabs v-model:activeKey="activeKey">
-							}"
+			<a-tab-pane key="1" tab="扩展字段" forceRender v-if="extendData.length > 0">
-						/>
+				<DynamicForm
-					</a-form-item>
+					:allDisabled="route.query.type === 'SEARCH'"
-				</a-col>
+					:formItems="extendData"
-				<a-col :span="6">
+					:model="extendFormData"
-					<a-form-item label="编码：" name="number">
+					:rules="formRules"
-						<a-input v-model:value="formData.number" placeholder="请输入编码" allow-clear />
+					v-if="extendData.length > 0"
-					</a-form-item>
+				/>
-				</a-col>
+
-				<a-col :span="6">
+				<a-empty v-else />
-					<a-form-item label="名称：" name="name">
+			</a-tab-pane>
-						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
+			<a-tab-pane key="2" tab="操作信息" v-if="route.query.type !== 'ADD'">
-					</a-form-item>
+				<OperationalInformation :detailData="inform" :colSpan="6"></OperationalInformation>
-				</a-col>
+			</a-tab-pane>
-				<a-col :span="6">
+		</a-tabs>
-					<a-form-item label="可用状态：">
-						<a-select
-							v-model:value="formData.enabledState"
-							placeholder="请选择可用状态"
-							:options="tool.dictList('COMMON_STATUS')"
-						/>
-					</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-card>
 </template>
 
-<script setup name="sysUnitForm">
+<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 formRef1 = ref()
-	const visible = ref(false)
+	let activeKey = ref('1')
-	const emit = defineEmits({ successful: null })
+	let extendData = ref([])
-	const formRef = ref()
-	// 表单数据
-	const formData = ref({
-		enabledState: 'ENABLE',
-		isBase: 'NO'
-	})
-	const submitLoading = ref(false)
 
 	// 默认要校验的
 	const formRules = {
@@ -91,52 +53,119 @@
 		name: [required('请输入名称')],
 		isBase: [required('请选择是否基本单位')]
 	}
-	// 验证并提交数据
+
-	const onSubmit = () => {
+	let unitGroupList = ref([])
-		formRef.value.validate().then(() => {
+	onMounted(async () => {
-			submitLoading.value = true
+		formRefs.value = [formRef1.value]
-			const formDataParam = cloneDeep(formData.value)
+		await fetchData(route.query.type)
-			unitApi
+
-				.sysUnitSubmitForm(formDataParam, formDataParam.id)
+		// 单位组
-				.then(() => {
+		const unitGroupsList = await unitGroupsApi.sysUnitGroupList({
-					// emit('successful')
+			enabledState: 'ENABLE'
-					handleBack()
+		})
-				})
+
-				.finally(() => {
+		unitGroupsList &&
-					submitLoading.value = false
+			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 handleBack = () => {
-		router.replace('/basicData/unit')
-		useTabs.close()
-	}
 
-	let state = reactive({
+	const unitFormItems = reactive([
-		PAGE_TYPE: ''
+		{
-	})
+			label: '名称：',
-	let unitGroupList = ref([])
+			name: 'name',
-	onMounted(() => {
+			type: 'a-input',
-		// 单位组
+			span: 6,
-		unitGroupsApi
+			rules: [required('请输入名称')],
-			.sysUnitGroupList({
+			attrs: {
-				enabledState: 'ENABLE'
+				placeholder: '请输入名称',
-			})
+				allowClear: true
-			.then((res) => {
+			}
-				unitGroupList.value = res
+		},
-			})
+		{
-
+			label: '编码：',
-		state.PAGE_TYPE = useRouter.query.type
+			name: 'number',
-		if (state.PAGE_TYPE && state.PAGE_TYPE !== 'ADD') {
+			type: 'a-input-number',
-			state.detailId = useRouter.query.id
+			span: 6,
-			unitApi
+			attrs: {
-				.sysUnitDetail({
+				placeholder: '请输入编码',
-					id: useRouter.query.id
+				allowClear: true
-				})
+			}
-				.then((res) => {
+		},
-					formData.value = res
+		{
-				})
+			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-form-item label="可用状态" name="enabledState">
-						<a-select v-model:value="searchFormState.enabledState" placeholder="请选择状态" :options="stateOptions" />
+						<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 ? '收起' : '展开' }}
@@ -38,8 +42,8 @@
 		</a-form>
 	</a-card>
 
-	<a-card class="mt-4" :border="false">
+	<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,21 +73,26 @@
 								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"
+					ref="tableRef"
-					:columns="unitColumns"
+					: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,
+						y: 'calc(100vh - 300px)'
+					}"
 				>
 					<template #operator class="table-operator">
 						<a-space>
@@ -90,57 +103,68 @@
 										type: 'ADD'
 									})
 								"
-								v-if="hasPerm('sysUnitAdd')"
+								v-if="hasPerm('customerAdd')"
 							>
 								<template #icon><plus-outlined /></template>
 								新增
 							</a-button>
 							<xn-batch-delete
-								v-if="hasPerm('sysUnitBatchDelete')"
+								v-if="hasPerm('customerBatchDelete')"
 								:selectedRowKeys="selectedRowKeys"
-								@batchDelete="deleteBatchSysUnit"
+								@batchDelete="deleteBatchRecords"
 							/>
 						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'number'">
+							<a href="#">{{ record.number }}</a>
+						</template>
 						<template v-if="column.dataIndex === 'enabledState'">
-							<!--							<a-switch
+							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
-								checkedValue="ENABLE"
+							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
-								unCheckedValue="DISABLED"
-								checked-children="启用"
-								un-checked-children="停用"
-								v-model:checked="record.enabledState"
-							/>-->
-							{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }}
 						</template>
 						<template v-if="column.dataIndex === 'isBase'">
 							{{ $TOOL.dictTypeData('YES_NO', record.isBase) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
 							<a-space>
-								<a
+								<a-tooltip title="查看">
-									@click="
+									<a
-										navigateTo('/basicData/unit/detail', {
+										@click="
-											type: 'SEARCH',
+											navigateTo('/basicData/unit/detail', {
-											id: record.id
+												type: 'SEARCH',
-										})
+												id: record.id
-									"
+											})
-									>查看</a
+										"
-								>
+										v-if="hasPerm('customerEdit')"
-								<a-divider type="vertical" />
+									>
-								<a
+										<EyeOutlined />
-									@click="
+										<!--									查看-->
-										navigateTo('/basicData/unit/detail', {
+									</a>
-											type: 'SEARCH',
+								</a-tooltip>
-											id: record.id
+
-										})
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
-									"
+								<a-tooltip title="查看">
-									v-if="hasPerm('sysUnitEdit')"
+									<a
-									>编辑</a
+										@click="
-								>
+											navigateTo('/basicData/unit/detail', {
-								<a-divider type="vertical" v-if="hasPerm(['sysUnitEdit', 'sysUnitDelete'], 'and')" />
+												type: 'EDIT',
+												id: record.id
+											})
+										"
+										v-if="hasPerm('customerEdit')"
+									>
+										<FormOutlined />
+										<!--									编辑-->
+									</a>
+								</a-tooltip>
+
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteSysUnit(record)">
-									<a-button type="link" danger size="small" v-if="hasPerm('sysUnitDelete')">删除</a-button>
+									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
+										<DeleteOutlined />
+										<!--										删除-->
+									</a-button>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -153,22 +177,41 @@
 	<unit-group-form ref="UnitGroupFormRef" @successful="successful"></unit-group-form>
 </template>
 
-<script setup name="sysunit">
+<script setup name="basicDataUnit">
-	import tool from '@/utils/tool'
-	import { cloneDeep } from 'lodash-es'
-	import { useNavigation } from '@/hook/useNavigation'
-	import { unitColumns, unitGroupColumns } from '@/views/basicData/unit/columns/unitColumns'
-	import UnitGroupForm from '@/views/basicData/unit/detail/UnitGroupForm.vue'
-	// import Form from './form.vue'
 	import sysUnitApi from '@/api/base/unit/unitApi'
 	import sysUnitGroupsApi from '@/api/base/unit/unitGroupsApi'
-	import { message } from 'ant-design-vue'
 
-	const searchFormState = ref({})
+	import { message } from 'ant-design-vue'
-	const searchFormRef = ref()
+	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 {
+		searchFormState,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		navigateTo,
+		toggleAdvanced,
+		advanced
+	} = useTableManagement(
+		{
+			page: sysUnitApi.sysUnitPage,
+			delete: sysUnitApi.sysUnitDelete
+		},
+		unitColumns,
+		['officialAccountEdit', 'officialAccountDelete']
+	)
+
+	// 单位组
 	const UnitGroupFormRef = ref()
-	const unitTableRef = ref()
-	const unitToolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
 	const unitGroupTableRef = ref()
 	const unitGroupToolConfig = {
 		refresh: true,
@@ -179,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.push({
-				title: '操作',
-				dataIndex: 'action',
-				align: 'center',
-				fixed: 'right',
-				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 = {
@@ -260,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()
 	}
 
@@ -285,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>

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
+							:disabled="Boolean(formData.id)"
+							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="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="24">
+					<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.name" 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([
+		{
+			name: ''
+		}
+	])
+
+	const addSelectableData = () => {
+		selectableData.value.push({
+			name: ''
+		})
+	}
+
+	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 = {
+		name: [required('请输入名称')],
+		fieldType: [required('请输入类型')],
+		model: [required('请输入模块')]
+	}
+	// 验证并提交数据
+	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,167 @@
+<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="model">
+						<a-select
+							v-model:value="searchFormState.model"
+							placeholder="请选择所属模块"
+							:options="tool.dictList('EXTEND_FIELD_MODEL')"
+						/>
+					</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 === 'model'">
+					{{ $TOOL.dictTypeData('EXTEND_FIELD_MODEL', record.model) }}
+				</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: 'model'
+		},
+		{
+			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>