基础资料模块

src/api/base/store/sysStoreApi.js

@@ -0,0 +1,28 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/store/` + url, ...arg)
+
+/**
+ * 仓库Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/25 13:42
+ **/
+export default {
+	// 获取仓库分页
+	page(data) {
+		return request('page', data, 'get')
+	},
+	// 提交仓库表单 edit为true时为编辑，默认为新增
+	sysStoreSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除仓库
+	sysStoreDelete(data) {
+		return request('delete', data)
+	},
+	// 获取仓库详情
+	sysStoreDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/base/unit/unitApi.js

@@ -0,0 +1,28 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/sysunit/` + url, ...arg)
+
+/**
+ * 单位Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/23 11:36
+ **/
+export default {
+	// 获取单位分页
+	sysUnitPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交单位表单 edit为true时为编辑，默认为新增
+	sysUnitSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除单位
+	sysUnitDelete(data) {
+		return request('delete', data)
+	},
+	// 获取单位详情
+	sysUnitDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

src/api/base/unit/unitGroupsApi.js

@@ -0,0 +1,32 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/base/sysunitgroup/` + url, ...arg)
+
+/**
+ * 单位组Api接口管理器
+ *
+ * @author Luck
+ * @date  2024/07/26 10:46
+ **/
+export default {
+	// 获取单位组分页
+	sysUnitGroupPage(data) {
+		return request('page', data, 'get')
+	},
+	// 提交单位组表单 edit为true时为编辑，默认为新增
+	sysUnitGroupSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除单位组
+	sysUnitGroupDelete(data) {
+		return request('delete', data)
+	},
+	// 获取单位组详情
+	sysUnitGroupDetail(data) {
+		return request('detail', data, 'get')
+	},
+	// 单位组列表
+	sysUnitGroupList(data) {
+		return request('list', data, 'get')
+	},
+}

src/components/CardTitle/index.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="card-title">
+		<div class="flex">
+			<span class=""></span>
+			<span class="">基本信息</span>
+		</div>
+	</div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less">
+	.card-title {
+		background: #0d84ff;
+		padding: 5px 10px;
+		position: absolute;
+		top: 0;
+		width: 100%;
+		left: 0;
+
+		span {
+			color: #ffffff;
+			font-size: 16px;
+		}
+	}
+</style>

src/components/FounderForm/index.vue

@@ -0,0 +1,7 @@
+<template>
+	<div></div>
+</template>
+
+<script setup></script>
+
+<style scoped></style>

src/hook/useFormHandler.js

@@ -0,0 +1,75 @@
+import { useRoute, useRouter } from 'vue-router'
+import { cloneDeep } from 'lodash-es'
+import useTabs from '@/utils/useTabs'
+
+export default function useFormHandler(formItems, api) {
+	const state = reactive({
+		PAGE_TYPE: ''
+	})
+
+	let formData = reactive({})
+	const submitLoading = ref(false)
+	const formRefs = ref([])
+	const route = useRoute()
+	const router = useRouter()
+
+	const initializeFormData = (formItems, formData) => {
+		formItems.forEach((item) => {
+			formData[item.name] = item.defaultValue || ''
+		})
+	}
+
+	const onSubmit = async (params) => {
+		Promise.all(formRefs.value.map((form) => form.validate()))
+			.then(() => {
+				submitLoading.value = true
+				let formDataParam = params.isDeep ? cloneDeep(params) : cloneDeep(formData)
+
+				if (route.query.id) {
+					formDataParam = { ...formDataParam, id: route.query.id }
+				}
+				api
+					.submitForm(formDataParam, route.query.id)
+					.then(() => {
+						router.go(-1)
+						useTabs.close()
+					})
+					.finally(() => {
+						submitLoading.value = false
+					})
+			})
+			.catch((error) => {
+				console.error('Validation error:', error)
+			})
+	}
+
+	const handleBack = () => {
+		router.replace('/basicData/publicAccount')
+		useTabs.close()
+	}
+
+	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]
+					}
+				}
+			} catch (error) {
+				console.error('API request failed:', error)
+			}
+		}
+	}
+
+	return {
+		formData,
+		submitLoading,
+		formRefs,
+		onSubmit,
+		handleBack,
+		fetchData
+	}
+}

src/hook/useNavigation.js

@@ -0,0 +1,25 @@
+import { useRouter } from 'vue-router'
+
+/**
+ * 封装路由跳转的 Hook
+ */
+export function useNavigation() {
+	// 创建 router 实例
+	const router = useRouter()
+
+	/**
+	 * 跳转到指定的路由
+	 * @param {string|object} to - 目标路由的路径或路由对象
+	 * @param {object} params - 跳转所需的参数
+	 */
+	const navigateTo = (to, params) => {
+		router.push({
+			path: to,
+			query: params
+		})
+	}
+
+	return {
+		navigateTo
+	}
+}

src/hook/useTableManagement.js

@@ -0,0 +1,112 @@
+import { cloneDeep } from 'lodash-es'
+import { hasPerm } from '@/utils/permission'
+import { useRouter } from 'vue-router'
+import useTabs from '@/utils/useTabs'
+
+/**
+ * 列表页面表格信息 hook 封装（数据操作）
+ * @param apiModule 调用接口
+ * @param tableColumns 表格头部信息
+ * @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 tableRef = ref(null)
+	const selectedRowKeys = ref([])
+	const router = useRouter()
+
+	// 动态列配置
+	const columns = ref(tableColumns)
+
+	const 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({
+				title: '操作',
+				dataIndex: 'action',
+				align: 'center',
+				width: 200,
+				fixed: 'right',
+				max_width: 100
+			})
+	}
+
+	// 加载数据
+	const loadData = (parameter) => {
+		const searchFormParam = cloneDeep(searchFormState.value)
+		return apiModule.page(Object.assign(parameter, searchFormParam)).then((data) => {
+			return data
+		})
+	}
+
+	// 重置
+	const reset = () => {
+		if (tableRef.value) {
+			tableRef.value.resetFields()
+			tableRef.value.refresh(true)
+		}
+	}
+
+	// 删除
+	const deleteRecord = (record) => {
+		let params = [{ id: record.id }]
+		apiModule.delete(params).then(() => {
+			if (tableRef.value) {
+				tableRef.value.refresh(true)
+			}
+		})
+	}
+
+	// 批量删除
+	const deleteBatchRecords = (params) => {
+		apiModule.delete(params).then(() => {
+			if (tableRef.value) {
+				tableRef.value.clearRefreshSelected()
+			}
+		})
+	}
+
+	// 选择配置
+	const options = {
+		alert: {
+			show: true,
+			clear: () => {
+				selectedRowKeys.value = []
+			}
+		},
+		rowSelection: {
+			onChange: (selectedRowKey, selectedRows) => {
+				selectedRowKeys.value = selectedRowKey
+			}
+		}
+	}
+
+	// 页面跳转
+	const navigateTo = (to, params) => {
+		router.push({
+			path: to,
+			query: params
+		})
+	}
+
+	// 返回Hook的值
+	return {
+		searchFormState,
+		searchFormRef,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteRecord,
+		deleteBatchRecords,
+		options,
+		toolConfig,
+		navigateTo
+	}
+}

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

@@ -0,0 +1,168 @@
+<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="onSubmitForm">保存</a-button>
+		</template>
+	</a-page-header>
+
+	<a-card :bordered="false" title="品牌">
+		<DynamicForm
+			:allDisabled="route.query.type === 'SEARCH'"
+			:formItems="brandFormItems"
+			:model="formData"
+			:rules="formRules"
+			ref="formRef1"
+		/>
+	</a-card>
+
+	<a-card :bordered="false" title="域名" class="mt-4">
+		<a-button @click="handleAddDomain">新增域名</a-button>
+		<a-form class="mt-8" :model="domainFormData" :rules="domainFormRules" ref="domainFormRef">
+			<a-row v-for="(item, index) in domainFormItems" :key="item.value" :gutter="12">
+				<a-col :span="12">
+					<a-form-item :label="item.label" :name="item.value" :props="item.value">
+						<a-input v-model:value="domainFormData[item.value]" placeholder="请输入域名" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12" v-if="index > 0">
+					<a-button @click="handleDelDomain(index)">删除</a-button>
+				</a-col>
+			</a-row>
+		</a-form>
+	</a-card>
+</template>
+
+<script setup name="brandDetail">
+	import { required } from '@/utils/formRules'
+	import sysBrandApi from '@/api/base/brand/sysBrandApi'
+	import useFormHandler from '@/hook/useFormHandler'
+	import tool from '@/utils/tool'
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+
+	const formRules = {
+		name: [required('请输入名称')],
+		type: [required('请输入类型')],
+		appid: [required('请输入AppID')],
+		secret: [required('请输入AppSecret')]
+	}
+
+	const brandFormItems = [
+		{
+			label: '名称：',
+			name: 'name',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '编码：',
+			name: 'number',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入编码',
+				allowClear: true
+			}
+		},
+		{
+			label: '简称：',
+			name: 'shortName',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入简称',
+				allowClear: true
+			}
+		},
+		{
+			label: '所属企业：',
+			name: 'company',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入所属企业',
+				allowClear: true
+			}
+		},
+		{
+			label: '公众号：',
+			name: 'officialAccountId',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入公众号',
+				allowClear: true
+			}
+		},
+		{
+			label: '备注：',
+			name: 'remarks',
+			type: 'a-input',
+			span: 6,
+			attrs: {
+				placeholder: '请输入备注',
+				allowClear: true
+			}
+		},
+		{
+			label: '启用状态：',
+			name: 'enabledState',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择启用状态',
+				options: tool.dictList('COMMON_STATUS')
+			},
+			defaultValue: 'ENABLE'
+		}
+	]
+
+	const formRef1 = ref(null)
+
+	let { state, formData, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(brandFormItems, {
+		submitForm: sysBrandApi.sysBrandSubmitForm,
+		getDetail: sysBrandApi.sysBrandDetail
+	})
+
+	onMounted(() => {
+		formRefs.value = [formRef1.value, domainFormRef.value]
+		fetchData(route.query.type)
+	})
+
+	// 添加域名
+	const domainFormRef = ref(null)
+	const domainFormRules = {
+		domainName1: [required('请输入域名')]
+	}
+
+	let domainFormData = reactive({})
+
+	let domainFormItems = reactive([
+		{
+			label: '域名1',
+			value: 'domainName1'
+		}
+	])
+
+	const handleAddDomain = () => {
+		domainFormItems.push({
+			label: '域名' + (domainFormItems.length + 1),
+			value: 'domainName' + domainFormItems.length
+		})
+
+		domainFormRules['domainName' + domainFormItems.length] = [required('请输入域名')]
+	}
+
+	const handleDelDomain = (index) => {
+		domainFormItems.splice(index, 1)
+		delete domainFormRules['domainName' + (index + 1)]
+	}
+
+	const onSubmitForm = async () => {
+		await onSubmit({ ...formData, ...domainFormData })
+	}
+</script>

src/views/basicData/brand/index.vue

@@ -0,0 +1,165 @@
+<template>
+	<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="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-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+					</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" 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 class="table-operator">
+				<a-space>
+					<a-button
+						type="primary"
+						@click="
+							navigateTo('/basicData/brand/detail', {
+								type: 'ADD'
+							})
+						"
+						v-if="hasPerm('sysBrandAdd')"
+					>
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('sysBrandDelete')"
+						:selectedRowKeys="selectedRowKeys"
+						@batchDelete="deleteBatchRecords"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'enabledState'">
+					<a-switch
+						checkedValue="ENABLE"
+						unCheckedValue="DISABLED"
+						checked-children="启用"
+						un-checked-children="停用"
+						v-model:checked="record.enabledState"
+					/>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-space>
+						<a
+							@click="
+								navigateTo('/basicData/brand/detail', {
+									type: 'SEARCH',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('sysBrandEdit')"
+							>查看</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['sysBrandEdit', 'sysBrandDelete'], 'and')" />
+						<a
+							@click="
+								navigateTo('/basicData/brand/detail', {
+									type: 'EDIT',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('sysBrandEdit')"
+							>编辑</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['sysBrandEdit', 'sysBrandDelete'], 'and')" />
+						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
+							<a-button type="link" danger size="small" v-if="hasPerm('sysBrandDelete')">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+</template>
+
+<script setup>
+	import sysBrandApi from '@/api/base/brand/sysBrandApi'
+	import { useTableManagement } from '@/hook/useTableManagement'
+
+	const brandColumns = [
+		{
+			title: '编码',
+			dataIndex: 'number',
+			sorter: (a, b) => a.number.length - b.number.length,
+			sortDirections: ['descend', 'ascend'],
+			align: 'center',
+			resizable: true,
+			width: 300,
+			ellipsis: true
+		},
+		{
+			title: '名称',
+			dataIndex: 'name',
+			sorter: (a, b) => a.name.length - b.name.length,
+			sortDirections: ['descend', 'ascend'],
+			align: 'center',
+			resizable: true,
+			width: 300,
+			ellipsis: true
+		},
+		{
+			title: '可用状态',
+			dataIndex: 'enabledState',
+			align: 'center',
+			resizable: true,
+			width: 100,
+			ellipsis: true
+		},
+		{
+			title: '创建时间',
+			dataIndex: 'createTime',
+			sorter: (a, b) => a.createTime.length - b.createTime.length,
+			sortDirections: ['descend', 'ascend'],
+			align: 'center',
+			resizable: true,
+			width: 300,
+			ellipsis: true
+		}
+	]
+
+	const {
+		searchFormState,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteRecord,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		toolConfig,
+		navigateTo
+	} = useTableManagement(
+		{
+			page: sysBrandApi.page,
+			delete: sysBrandApi.sysBrandDelete
+		},
+		brandColumns,
+		['sysBrandEdit', 'sysBrandDelete']
+	)
+</script>

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

@@ -0,0 +1,5 @@
+<template></template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/basicData/client/index.vue

@@ -0,0 +1,277 @@
+<template>
+	<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="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-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+					</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" class="mt-4">
+		<a-row :gutter="16">
+			<a-col :span="6">
+				<div className="s-table-tool">
+					<div className="s-table-tool-left">分类</div>
+					<!--  斑马纹 -->
+					<div className="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'" @click="handleAddTree">
+								<component class="icons" :is="item.icon"></component>
+							</a-tooltip>
+							<!-- 修改 -->
+							<a-tooltip :title="item.title" class="s-tool-item" v-if="item.name === 'edit'">
+								<component class="icons" :is="item.icon"></component>
+							</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
+					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 class="table-operator">
+						<a-space>
+							<a-button
+								type="primary"
+								@click="
+									navigateTo('/basicData/publicAccount/detail', {
+										type: 'ADD'
+									})
+								"
+								v-if="hasPerm('customerAdd')"
+							>
+								<template #icon><plus-outlined /></template>
+								新增
+							</a-button>
+							<xn-batch-delete
+								v-if="hasPerm('customerBatchDelete')"
+								:selectedRowKeys="selectedRowKeys"
+								@batchDelete="deleteBatchRecords"
+							/>
+						</a-space>
+					</template>
+					<template #bodyCell="{ column, record }">
+						<template v-if="column.dataIndex === 'enabledState'">
+							<a-switch
+								checkedValue="ENABLE"
+								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
+									@click="
+										navigateTo('/basicData/publicAccount/detail', {
+											type: 'SEARCH',
+											id: record.id
+										})
+									"
+									v-if="hasPerm('customerEdit')"
+									>查看</a
+								>
+								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
+								<a
+									@click="
+										navigateTo('/basicData/publicAccount/detail', {
+											type: 'EDIT',
+											id: record.id
+										})
+									"
+									v-if="hasPerm('customerEdit')"
+									>编辑</a
+								>
+								<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-popconfirm>
+							</a-space>
+						</template>
+					</template>
+				</s-table>
+			</a-col>
+		</a-row>
+		<CustomerCategoryForm ref="CustomerCategoryFormRef"></CustomerCategoryForm>
+	</a-card>
+</template>
+
+<script setup>
+	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 UnitGroupForm from "@/views/basicData/unit/detail/UnitGroupForm.vue";
+
+	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
+		},
+		{
+			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,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteRecord,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		toolConfig,
+		navigateTo
+	} = useTableManagement(
+		{
+			page: customerApi.customerPage,
+			delete: customerApi.customerDelete
+		},
+		publicAccountColumn,
+		['customerEdit', 'customerDelete']
+	)
+
+	const tool = [
+		{
+			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 = []
+	const CustomerCategoryFormRef = ref(null)
+
+	const handleAddTree = () => {
+		CustomerCategoryFormRef.value.onOpen()
+	}
+
+	onMounted(() => {
+		customerCategoryApi.customerCategoryTree().then((res) => {
+			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/employee/detail/index.vue

@@ -0,0 +1,5 @@
+<template></template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/basicData/employee/index.vue

@@ -0,0 +1,187 @@
+<template>
+	<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="name">
+						<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="enabledState">
+						<a-select
+							v-model:value="searchFormState.enabledState"
+							placeholder="请选择启用状态"
+							:options="enabledStateOptions"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="6" v-show="advanced">
+					<a-form-item label="分类id" name="categoryId">
+						<a-input v-model:value="searchFormState.categoryId" placeholder="请输入分类id" />
+					</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>
+		<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 class="table-operator">
+				<a-space>
+					<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('employeeAdd')">
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('employeeBatchDelete')"
+						:selectedRowKeys="selectedRowKeys"
+						@batchDelete="deleteBatchEmployee"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'gender'">
+					{{ $TOOL.dictTypeData('GENDER', record.gender) }}
+				</template>
+				<template v-if="column.dataIndex === 'enabledState'">
+					{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }}
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-space>
+						<a @click="formRef.onOpen(record)" v-if="hasPerm('employeeEdit')">编辑</a>
+						<a-divider type="vertical" v-if="hasPerm(['employeeEdit', 'employeeDelete'], 'and')" />
+						<a-popconfirm title="确定要删除吗？" @confirm="deleteEmployee(record)">
+							<a-button type="link" danger size="small" v-if="hasPerm('employeeDelete')">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+	<!--	<Form ref="formRef" @successful="tableRef.refresh()" />-->
+</template>
+
+<script setup name="employee">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	// import Form from './form.vue'
+	import employeeApi from '@/api/base/employee/employeeApi'
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const tableRef = ref()
+	const formRef = ref()
+	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
+	// 查询区域显示更多控制
+	const advanced = ref(false)
+	const toggleAdvanced = () => {
+		advanced.value = !advanced.value
+	}
+	const columns = [
+		{
+			title: '名称',
+			dataIndex: 'name'
+		},
+		{
+			title: '编码',
+			dataIndex: 'number'
+		},
+		{
+			title: '性别',
+			dataIndex: 'gender'
+		},
+		{
+			title: '启用状态',
+			dataIndex: 'enabledState'
+		},
+		{
+			title: '部门',
+			dataIndex: 'departmentId'
+		},
+		{
+			title: '分类id',
+			dataIndex: 'categoryId'
+		},
+		{
+			title: '入职日期',
+			dataIndex: 'entryDate'
+		},
+		{
+			title: '离职日期',
+			dataIndex: 'departDate'
+		}
+	]
+	// 操作栏通过权限判断是否显示
+	if (hasPerm(['employeeEdit', 'employeeDelete'])) {
+		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 employeeApi.employeePage(Object.assign(parameter, searchFormParam)).then((data) => {
+			return data
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteEmployee = (record) => {
+		let params = [
+			{
+				id: record.id
+			}
+		]
+		employeeApi.employeeDelete(params).then(() => {
+			tableRef.value.refresh(true)
+		})
+	}
+	// 批量删除
+	const deleteBatchEmployee = (params) => {
+		employeeApi.employeeDelete(params).then(() => {
+			tableRef.value.clearRefreshSelected()
+		})
+	}
+	const enabledStateOptions = tool.dictList('COMMON_STATUS')
+</script>

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

@@ -0,0 +1,5 @@
+<template></template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/views/basicData/materiel/index.vue

@@ -0,0 +1,341 @@
+<template>
+	<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="name">
+						<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="categoryId">
+						<a-input v-model:value="searchFormState.categoryId" placeholder="请输入物料类型" />
+					</a-form-item>
+				</a-col>
+				<a-col :span="6" v-show="advanced">
+					<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 @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-row :gutter="20">
+			<a-col :span="6">
+				<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
+					ref="tableRef"
+					:columns="columns"
+					:data="[]"
+					:alert="options.alert.show"
+					bordered
+					:row-key="(record) => record.id"
+					:tool-config="toolConfig"
+					:row-selection="options.rowSelection"
+				>
+					<template #operator class="table-operator">
+						<a-space>
+							<a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('materialAdd')">
+								<template #icon><plus-outlined /></template>
+								新增
+							</a-button>
+							<xn-batch-delete
+								v-if="hasPerm('materialBatchDelete')"
+								:selectedRowKeys="selectedRowKeys"
+								@batchDelete="deleteBatchMaterial"
+							/>
+						</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 === 'batchManage'">
+							{{ $TOOL.dictTypeData('YES_NO', record.batchManage) }}
+						</template>
+						<template v-if="column.dataIndex === 'promoteEnabledState'">
+							{{ $TOOL.dictTypeData('COMMON_STATUS', record.promoteEnabledState) }}
+						</template>
+						<template v-if="column.dataIndex === 'action'">
+							<a-space>
+								<a @click="formRef.onOpen(record)" v-if="hasPerm('materialEdit')">编辑</a>
+								<a-divider type="vertical" v-if="hasPerm(['materialEdit', 'materialDelete'], 'and')" />
+								<a-popconfirm title="确定要删除吗？" @confirm="deleteMaterial(record)">
+									<a-button type="link" danger size="small" v-if="hasPerm('materialDelete')">删除</a-button>
+								</a-popconfirm>
+							</a-space>
+						</template>
+					</template>
+				</s-table>
+			</a-col>
+		</a-row>
+	</a-card>
+	<!--	<Form ref="formRef" @successful="tableRef.refresh()" />-->
+</template>
+
+<script setup name="material">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	// import Form from './form.vue'
+	// import materialApi from '@/api/base/materialApi'
+	const searchFormState = ref({})
+	const searchFormRef = ref()
+	const tableRef = ref()
+	const formRef = ref()
+	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
+	// 查询区域显示更多控制
+	const advanced = ref(false)
+	const toggleAdvanced = () => {
+		advanced.value = !advanced.value
+	}
+	const columns = [
+		{
+			title: '名称',
+			dataIndex: 'name',
+			width: 100
+		},
+		{
+			title: '编码',
+			dataIndex: 'number',
+			width: 100
+		},
+		{
+			title: '简称',
+			dataIndex: 'shortName',
+			width: 100
+		},
+		{
+			title: '别名',
+			dataIndex: 'alias',
+			width: 100
+		},
+		{
+			title: '物料类型',
+			dataIndex: 'categoryId',
+			width: 100
+		},
+		{
+			title: '规格型号',
+			dataIndex: 'specification',
+			width: 100
+		},
+		{
+			title: '包装比例',
+			dataIndex: 'packageProportion',
+			width: 100
+		},
+		{
+			title: '启用状态',
+			dataIndex: 'enabledState',
+			width: 100
+		},
+		{
+			title: '扩展信息',
+			dataIndex: 'extJson',
+			width: 100
+		},
+		{
+			title: '助记码',
+			dataIndex: 'mnemonicCode',
+			width: 100
+		},
+		{
+			title: '批次管理',
+			dataIndex: 'batchManage',
+			width: 100
+		},
+		{
+			title: '品牌',
+			dataIndex: 'brandId',
+			width: 100
+		},
+		{
+			title: '最高库存',
+			dataIndex: 'maxInventory',
+			width: 100
+		},
+		{
+			title: '最低库存',
+			dataIndex: 'minInventory',
+			width: 100
+		},
+		{
+			title: '统一零售价',
+			dataIndex: 'retailPrice',
+			width: 100
+		},
+		{
+			title: '商品条形码',
+			dataIndex: 'barcode',
+			width: 100
+		},
+		{
+			title: '保质期',
+			dataIndex: 'shelfLife',
+			width: 100
+		},
+		{
+			title: '保质期单位',
+			dataIndex: 'shelfLifeUnit',
+			width: 100
+		},
+		{
+			title: '最大包装数量',
+			dataIndex: 'maxPackageQuantity'
+		},
+		{
+			title: '备注',
+			dataIndex: 'remarks'
+		},
+		{
+			title: '单位组',
+			dataIndex: 'unitGroupId'
+		},
+		{
+			title: '基本单位',
+			dataIndex: 'baseUnitId'
+		},
+		{
+			title: '采购单位',
+			dataIndex: 'purchaseUnitId'
+		},
+		{
+			title: '分销单位',
+			dataIndex: 'distrUnitId'
+		},
+		{
+			title: '生成单位',
+			dataIndex: 'produceUnitId'
+		},
+		{
+			title: '销售单位',
+			dataIndex: 'saleUnitId'
+		},
+		{
+			title: '库存单位',
+			dataIndex: 'storeUnitId'
+		},
+		{
+			title: '推广启用状态',
+			dataIndex: 'promoteEnabledState'
+		}
+	]
+	// 操作栏通过权限判断是否显示
+	if (hasPerm(['materialEdit', 'materialDelete'])) {
+		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 materialApi.materialPage(Object.assign(parameter, searchFormParam)).then((data) => {
+			return data
+		})
+	}
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteMaterial = (record) => {
+		let params = [
+			{
+				id: record.id
+			}
+		]
+		materialApi.materialDelete(params).then(() => {
+			tableRef.value.refresh(true)
+		})
+	}
+	// 批量删除
+	const deleteBatchMaterial = (params) => {
+		materialApi.materialDelete(params).then(() => {
+			tableRef.value.clearRefreshSelected()
+		})
+	}
+	const enabledStateOptions = tool.dictList('COMMON_STATUS')
+
+	// 树结构
+	const expandedKeys = ref(['0-0', '0-1'])
+	const selectedKeys = ref([])
+	const treeData = [
+		{
+			title: 'parent 0',
+			key: '0-0',
+			children: [
+				{
+					title: 'leaf 0-0',
+					key: '0-0-0',
+					isLeaf: true
+				},
+				{
+					title: 'leaf 0-1',
+					key: '0-0-1',
+					isLeaf: true
+				}
+			]
+		},
+		{
+			title: 'parent 1',
+			key: '0-1',
+			children: [
+				{
+					title: 'leaf 1-0',
+					key: '0-1-0',
+					isLeaf: true
+				},
+				{
+					title: 'leaf 1-1',
+					key: '0-1-1',
+					isLeaf: true
+				}
+			]
+		}
+	]
+</script>

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

@@ -0,0 +1,152 @@
+<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>
+		</template>
+	</a-page-header>
+
+	<a-card :bordered="false" title="公众号">
+		<DynamicForm
+			:allDisabled="route.query.type === 'SEARCH'"
+			:formItems="officialAccountFormItems"
+			:model="formData"
+			:rules="formRules"
+			ref="formRef1"
+		/>
+	</a-card>
+
+	<a-card :bordered="false" title="基本信息" class="mt-4">
+		<DynamicForm
+			:allDisabled="route.query.type === 'SEARCH'"
+			:formItems="basicInfoFormItems"
+			:model="formData"
+			:rules="formRules"
+			ref="formRef2"
+		/>
+	</a-card>
+</template>
+
+<script setup name="publicAccountDetail">
+	import { required } from '@/utils/formRules'
+	import officialAccountApi from '@/api/base/wx/officialAccountApi'
+	import useFormHandler from '@/hook/useFormHandler'
+	import tool from '@/utils/tool'
+	import { useRoute } from 'vue-router'
+	const route = useRoute()
+
+	const formRules = {
+		name: [required('请输入名称')],
+		type: [required('请输入类型')],
+		appid: [required('请输入AppID')],
+		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)
+
+	const { state, formData, submitLoading, formRefs, onSubmit, handleBack, fetchData } = useFormHandler(
+		[...officialAccountFormItems, ...basicInfoFormItems],
+		{
+			submitForm: officialAccountApi.officialAccountSubmitForm,
+			getDetail: officialAccountApi.officialAccountDetail
+		}
+	)
+
+	onMounted(async () => {
+		formRefs.value = [formRef1.value, formRef2.value]
+		await fetchData(route.query.type)
+	})
+</script>

src/views/basicData/publicAccount/index.vue

@@ -0,0 +1,171 @@
+<template>
+	<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="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-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+					</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" 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 class="table-operator">
+				<a-space>
+					<a-button
+						type="primary"
+						@click="
+							navigateTo('/basicData/publicAccount/detail', {
+								type: 'ADD'
+							})
+						"
+						v-if="hasPerm('officialAccountAdd')"
+					>
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('officialAccountBatchDelete')"
+						:selectedRowKeys="selectedRowKeys"
+						@batchDelete="deleteBatchRecords"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'enabledState'">
+					<a-switch
+						checkedValue="ENABLE"
+						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
+							@click="
+								navigateTo('/basicData/publicAccount/detail', {
+									type: 'SEARCH',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('officialAccountEdit')"
+							>查看</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+						<a
+							@click="
+								navigateTo('/basicData/publicAccount/detail', {
+									type: 'EDIT',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('officialAccountEdit')"
+							>编辑</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['officialAccountEdit', 'officialAccountDelete'], 'and')" />
+						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
+							<a-button type="link" danger size="small" v-if="hasPerm('officialAccountDelete')">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+</template>
+
+<script setup name="basicDataPublicAccount">
+	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
+		},
+		{
+			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: 'createTime',
+			sorter: (a, b) => a.address.length - b.address.length,
+			sortDirections: ['descend', 'ascend'],
+			align: 'center',
+			resizable: true,
+			width: 100
+		}
+	]
+
+	const {
+		searchFormState,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteRecord,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		toolConfig,
+		navigateTo
+	} = useTableManagement(
+		{
+			page: officialAccountApi.page,
+			delete: officialAccountApi.officialAccountDelete
+		},
+		publicAccountColumn,
+		['officialAccountEdit', 'officialAccountDelete']
+	)
+</script>

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

@@ -0,0 +1,200 @@
+<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>
+		</template>
+	</a-page-header>
+
+	<a-card :bordered="false" title="仓库">
+		<DynamicForm
+			:allDisabled="route.query.type === 'SEARCH'"
+			:formItems="officialAccountFormItems"
+			:model="formData"
+			:rules="formRules"
+			ref="formRef1"
+		/>
+	</a-card>
+
+	<a-card :bordered="false" class="mt-4">
+		<a-tabs v-model:activeKey="activeKey">
+			<a-tab-pane key="1" tab="基本信息">
+				<DynamicForm
+					:allDisabled="route.query.type === 'SEARCH'"
+					:formItems="baseFormItems"
+					:model="formData"
+					:rules="formRules"
+					ref="formRef1"
+				/>
+			</a-tab-pane>
+			<a-tab-pane key="2" tab="上游仓库系统" force-render>
+				<DynamicTable :initialData="data" :columns="columns" rowKey="id"></DynamicTable>
+			</a-tab-pane>
+		</a-tabs>
+	</a-card>
+</template>
+
+<script setup>
+	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'
+	const route = useRoute()
+	import DynamicTable from '@/components/DynamicTable/index.vue';
+
+	const formRules = {
+		name: [required('请输入名称')],
+		type: [required('请输入类型')],
+		appid: [required('请输入AppID')],
+		secret: [required('请输入AppSecret')]
+	}
+
+	const officialAccountFormItems = [
+		{
+			label: '编码：',
+			name: 'number',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择类型',
+				options: tool.dictList('OFFICIAL_ACCOUNT_TYPE')
+			}
+		},
+		{
+			label: '名称：',
+			name: 'name',
+			type: 'a-input',
+			span: 6,
+			rules: [required('请输入名称')],
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '仓库条码：',
+			name: 'name',
+			type: 'a-input',
+			span: 6,
+			rules: [required('请输入名称')],
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '可用状态：',
+			name: 'enabledState',
+			type: 'a-select',
+			span: 6,
+			attrs: {
+				placeholder: '请选择可用状态',
+				options: tool.dictList('COMMON_STATUS')
+			},
+			defaultValue: 'ENABLE'
+		},
+		{
+			label: '库存管理方式：',
+			name: 'name',
+			type: 'a-input',
+			span: 6,
+			rules: [required('请输入名称')],
+			attrs: {
+				placeholder: '请输入名称',
+				allowClear: true
+			}
+		},
+		{
+			label: '备注：',
+			name: 'remarks',
+			type: 'a-textarea',
+			span: 24,
+			attrs: {
+				placeholder: '请输入备注',
+				allowClear: true
+			}
+		}
+	]
+
+	const baseFormItems = [
+		{
+			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
+			}
+		}
+	]
+
+
+	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: '上游仓库代码',
+			dataIndex: 'name',
+			editable: true,
+			dataType: 'text' // 或 'number', 'select'
+		},
+		{
+			title: '上游仓库名称',
+			dataIndex: 'age',
+			editable: true,
+			dataType: 'number'
+		}
+	]
+</script>

src/views/basicData/stash/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<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="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-input v-model:value="searchFormState.type" placeholder="请输入类型" />
+					</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" 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 class="table-operator">
+				<a-space>
+					<a-button
+						type="primary"
+						@click="
+							navigateTo('/basicData/stash/detail', {
+								type: 'ADD'
+							})
+						"
+						v-if="hasPerm('sysStoreAdd')"
+					>
+						<template #icon><plus-outlined /></template>
+						新增
+					</a-button>
+					<xn-batch-delete
+						v-if="hasPerm('deleteBatchSysStore')"
+						:selectedRowKeys="selectedRowKeys"
+						@batchDelete="deleteBatchRecords"
+					/>
+				</a-space>
+			</template>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.dataIndex === 'enabledState'">
+					<a-switch
+						checkedValue="ENABLE"
+						unCheckedValue="DISABLED"
+						checked-children="启用"
+						un-checked-children="停用"
+						v-model:checked="record.enabledState"
+					/>
+				</template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-space>
+						<a
+							@click="
+								navigateTo('/basicData/stash/detail', {
+									type: 'SEARCH',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('sysStoreEdit')"
+							>查看</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['sysStoreEdit', 'sysStoreDelete'], 'and')" />
+						<a
+							@click="
+								navigateTo('/basicData/stash/detail', {
+									type: 'EDIT',
+									id: record.id
+								})
+							"
+							v-if="hasPerm('sysStoreEdit')"
+							>编辑</a
+						>
+						<a-divider type="vertical" v-if="hasPerm(['sysStoreEdit', 'sysStoreDelete'], 'and')" />
+						<a-popconfirm title="确定要删除吗？" @confirm="deleteRecord(record)">
+							<a-button type="link" danger size="small" v-if="hasPerm('sysStoreDelete')">删除</a-button>
+						</a-popconfirm>
+					</a-space>
+				</template>
+			</template>
+		</s-table>
+	</a-card>
+</template>
+
+<script setup name="officialaccount">
+	import sysStoreApi from '@/api/base/store/sysStoreApi'
+	import { useTableManagement } from '@/hook/useTableManagement'
+
+	const stashColumn = [
+		{
+			title: '编码',
+			dataIndex: 'number',
+			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: 'enabledState',
+			align: 'center',
+			resizable: true,
+			width: 100
+		},
+		{
+			title: '仓库条码',
+			dataIndex: 'barcode',
+			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,
+		tableRef,
+		selectedRowKeys,
+		columns,
+		loadData,
+		reset,
+		deleteRecord,
+		deleteBatchRecords,
+		options,
+		searchFormRef,
+		toolConfig,
+		navigateTo
+	} = useTableManagement(
+		{
+			page: sysStoreApi.page,
+			delete: sysStoreApi.sysStoreDelete
+		},
+		stashColumn,
+		['sysStoreEdit', 'sysStoreDelete']
+	)
+</script>

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

@@ -0,0 +1,54 @@
+export const unitColumns = [
+	{
+		title: '编码',
+		dataIndex: 'number',
+		width: 150,
+		resizable: true,
+		align: 'center'
+	},
+	{
+		title: '名称',
+		dataIndex: 'name',
+		width: 150,
+		resizable: true,
+		align: 'center'
+	},
+	{
+		title: '可用状态',
+		dataIndex: 'enabledState',
+		width: 150,
+		resizable: true,
+		align: 'center'
+	},
+	{
+		title: '换算率',
+		dataIndex: 'rate',
+		width: 200,
+		resizable: true,
+		align: 'center'
+	},
+	{
+		title: '是否基本单位',
+		dataIndex: 'isBase',
+		width: 80,
+		resizable: true,
+		align: 'center'
+	}
+]
+
+export const unitGroupColumns = [
+	{
+		title: '名称',
+		dataIndex: 'name',
+		width: 180,
+		resizable: true,
+		align: 'center'
+	},
+	{
+		title: '状态',
+		dataIndex: 'enabledState',
+		width: 80,
+		resizable: true,
+		align: 'center'
+	}
+]

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

@@ -0,0 +1,91 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑单位组' : '增加单位组'"
+		:width="700"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+			<a-form-item label="编码：">
+				<a-input v-model:value="formData.number" placeholder="不输入自动生成" allow-clear />
+			</a-form-item>
+			<a-form-item label="名称：" name="name" props="name">
+				<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
+			</a-form-item>
+			<a-form-item label="状态：" name="enabledState" props="enabledState">
+				<a-select
+					v-model:value="formData.enabledState"
+					placeholder="请选择状态"
+					:options="tool.dictList('COMMON_STATUS')"
+				/>
+			</a-form-item>
+		</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="sysUnitGroupForm">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	import { required } from '@/utils/formRules'
+	import sysUnitGroupApi from '@/api/base/unit/unitGroupsApi'
+	// 抽屉状态
+	const visible = ref(false)
+	const emit = defineEmits({ successful: null })
+	const formRef = ref()
+	// 表单数据
+	const formData = ref({
+		number: '',
+		name: '',
+		enabledState: 'ENABLE',
+	})
+	const submitLoading = ref(false)
+	const enabledStateOptions = ref([])
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			let recordData = cloneDeep(record)
+			formData.value = Object.assign({}, recordData)
+		} else {
+			formData.value.number = ''
+			formData.value.name = ''
+			formData.value.enabledState = 'ENABLE'
+		}
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入名称')],
+		enabledState: [required('请输入状态')]
+	}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value.validate().then(() => {
+			submitLoading.value = true
+			const formDataParam = cloneDeep(formData.value)
+			sysUnitGroupApi
+				.sysUnitGroupSubmitForm(formDataParam, formDataParam.id)
+				.then(() => {
+					onClose()
+					emit('successful')
+				})
+				.finally(() => {
+					submitLoading.value = false
+				})
+		})
+	}
+	// 抛出函数
+	defineExpose({
+		onOpen
+	})
+</script>