基础资料模块

src/components/DynamicForm/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<a-form :model="model" :rules="rules" layout="vertical" ref="formRef">
 		<a-row :gutter="16">
-			<a-col :span="col.span || 24" v-for="(item, index) in formItems" :key="index">
+			<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" />
+					<component :is="item.type" v-model:value="model[item.name]" v-bind="item.attrs" :disabled="allDisabled" />
 				</a-form-item>
 			</a-col>
 		</a-row>
@@ -26,9 +26,9 @@
 			type: Object,
 			default: () => ({})
 		},
-		col: {
+		allDisabled: {
-			type: Object,
+			type: Boolean,
-			default: () => ({ span: 8 })
+			default: false
 		}
 	})
 
@@ -36,7 +36,8 @@
 
 	// Expose validate method
 	defineExpose({
-		validate: () => formRef.value.validate()
+		validate: () => formRef.value.validate(),
+		resetFields: () => formRef.value.resetFields()
 	})
 </script>
 

src/components/DynamicTable/index.vue

@@ -0,0 +1,144 @@
+<template>
+	<div class="table-wrapper">
+		<!-- 工具栏 -->
+		<div class="table-tool">
+			<a-button @click="addRow" type="primary">新增</a-button>
+			<a-button @click="addRow" type="primary">删除</a-button>
+		</div>
+
+		<!-- 表格 -->
+		<a-table
+			size="middle"
+			:dataSource="dataSource"
+			:columns="computedColumns"
+			:rowKey="rowKey"
+			@change="handleTableChange"
+			:scroll="{ x: 'max-content' }"
+			:row-selection="rowSelection"
+		>
+			<template #bodyCell="{ column, record }">
+				<template v-if="column.editable">
+					<component
+						style="width: 100%"
+						:is="getComponent(column.dataType)"
+						v-model:value="record[column.dataIndex]"
+						:options="column.options"
+					/>
+				</template>
+				<template v-else>
+					<span>{{ record[column.dataIndex] }}</span>
+				</template>
+			</template>
+			<template #actions="{ record }">
+				<a-button @click="edit(record[props.rowKey])" size="small">编辑</a-button>
+				<a-popconfirm title="确定删除吗？" @confirm="() => deleteRow(record[props.rowKey])">
+					<a-button type="danger" size="small">删除</a-button>
+				</a-popconfirm>
+			</template>
+		</a-table>
+	</div>
+</template>
+
+<script setup>
+	import { ref, reactive, computed, defineProps } from 'vue'
+
+	// 通过 defineProps 获取外部传递的属性
+	const props = defineProps({
+		initialData: {
+			type: Array,
+			default: () => []
+		},
+		columns: {
+			type: Array,
+			default: () => []
+		},
+		rowKey: {
+			type: String,
+			default: 'key'
+		}
+	})
+
+	// 内部数据
+	const dataSource = ref([...props.initialData])
+	const editingKey = ref(null)
+
+	// 获取合适的组件
+	const getComponent = (dataType) => {
+		switch (dataType) {
+			case 'number':
+				return 'a-input-number'
+			case 'select':
+				return 'a-select'
+			default:
+				return 'a-input'
+		}
+	}
+
+	// 计算列配置
+	const computedColumns = computed(() => {
+		return props.columns.map((col) => ({
+			...col,
+			editable: col.editable
+		}))
+	})
+
+	const addRow = () => {
+		const newRow = {
+			[props.rowKey]: Date.now().toString(),
+			...props.columns.reduce((acc, col) => {
+				if (col.dataIndex) acc[col.dataIndex] = ''
+				return acc
+			}, {})
+		}
+		dataSource.value = [...dataSource.value, newRow]
+		edit(newRow[props.rowKey])
+	}
+
+	const deleteRow = (key) => {
+		dataSource.value = dataSource.value.filter((item) => item[props.rowKey] !== key)
+	}
+
+	const handleFieldChange = (key, field, value) => {
+		dataSource.value = dataSource.value.map((item) => (item[props.rowKey] === key ? { ...item, [field]: value } : item))
+	}
+
+	const isEditing = (record) => record[props.rowKey] === editingKey.value
+
+	const edit = (key) => {
+		editingKey.value = key
+	}
+
+	const save = () => {
+		editingKey.value = null
+	}
+
+	const cancel = () => {
+		editingKey.value = null
+	}
+
+	const handleTableChange = (pagination, filters, sorter) => {
+		console.log('Table changed:', pagination, filters, sorter)
+	}
+
+	const rowSelection = {
+		onChange: (selectedRowKeys, selectedRows) => {
+			console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+		},
+		onSelect: (record, selected, selectedRows) => {
+			console.log(record, selected, selectedRows)
+		},
+		onSelectAll: (selected, selectedRows, changeRows) => {
+			console.log(selected, selectedRows, changeRows)
+		}
+	}
+</script>
+
+<style scoped>
+	.table-wrapper {
+		margin: 16px;
+	}
+
+	.table-tool {
+		margin-bottom: 16px;
+	}
+</style>

src/components/Table/index.vue

@@ -38,17 +38,20 @@
 						<component class="icons" :is="item.icon"></component>
 					</a-tooltip>
 					<!-- 删除 -->
-					<a-tooltip
+					<a-tooltip v-if="item.name === 'delete' && props.toolConfig.delete" :title="item.title" class="s-tool-item">
-						v-if="item.name === 'delete' && props.toolConfig.delete"
+						<a-popconfirm
-						:title="item.title"
+							v-if="item.name === 'delete' && props.toolConfig.delete"
-						class="s-tool-item"
+							title="确认删除？"
-						@click="
+							ok-text="Yes"
-							() => {
+							cancel-text="No"
-								emit('deleteRowData')
+							@confirm="
-							}
+								() => {
-						"
+									emit('deleteRowData')
-					>
+								}
-						<component class="icons" :is="item.icon"></component>
+							"
+						>
+							<component class="icons" :is="item.icon"></component>
+						</a-popconfirm>
 					</a-tooltip>
 					<!-- 刷新 -->
 					<a-tooltip
@@ -118,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
 							)
 						"
 					>
@@ -575,7 +578,6 @@
 			size: data.customSize, // 注意这个size是a-table组件需要的，这里不能跟别的地方成为compSize
 			columns: data.columnsSetting.filter((value) => value.checked === undefined || value.checked),
 			...data.localSettings,
-			scroll: { x: 100 }
 		}
 		// 将值为 undefined 或者 null 的 table里props属性进行一个过滤
 		renderTableProps.value = Object.entries(renderProps).reduce((x, [y, z]) => (z == null ? x : ((x[y] = z), x)), {})

src/layout/components/tags.vue

@@ -52,7 +52,6 @@
 					<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>
 		</a-tabs>

src/utils/useTabs.js

@@ -31,6 +31,7 @@ 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)

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

@@ -0,0 +1,170 @@
+<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="horizontal">
+			<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="number">
+						<a-input v-model:value="formData.number" placeholder="请输入编码" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="简称：" name="shortName">
+						<a-input v-model:value="formData.shortName" placeholder="请输入简称" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="客户分类ID：" name="categoryId">
+						<a-input v-model:value="formData.categoryId" placeholder="请输入客户分类ID" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="品牌：" name="brandId">
+						<a-input v-model:value="formData.brandId" placeholder="请输入品牌" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="省：" name="province">
+						<a-input v-model:value="formData.province" placeholder="请输入省" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="市：" name="city">
+						<a-input v-model:value="formData.city" placeholder="请输入市" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="县：" name="county">
+						<a-input v-model:value="formData.county" placeholder="请输入县" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="详细地址 ：" name="address">
+						<a-input v-model:value="formData.address" placeholder="请输入详细地址 " allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="启用状态：" name="enabledState">
+						<a-radio-group
+							v-model:value="formData.enabledState"
+							placeholder="请选择启用状态"
+							:options="enabledStateOptions"
+						/>
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="联系人：" name="contacts">
+						<a-input v-model:value="formData.contacts" placeholder="请输入联系人" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="手机：" name="phone">
+						<a-input v-model:value="formData.phone" placeholder="请输入手机" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="固话：" name="tel">
+						<a-input v-model:value="formData.tel" placeholder="请输入固话" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="传真：" name="fax">
+						<a-input v-model:value="formData.fax" placeholder="请输入传真" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="电子邮箱：" name="email">
+						<a-input v-model:value="formData.email" placeholder="请输入电子邮箱" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="qq：" name="qq">
+						<a-input v-model:value="formData.qq" placeholder="请输入qq" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="微信号：" name="wechat">
+						<a-input v-model:value="formData.wechat" placeholder="请输入微信号" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="联系地址：" name="contactAddress">
+						<a-input v-model:value="formData.contactAddress" placeholder="请输入联系地址" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :span="12">
+					<a-form-item label="扩展信息：" name="extJson">
+						<a-input v-model:value="formData.extJson" placeholder="请输入扩展信息" allow-clear />
+					</a-form-item>
+				</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="customerForm">
+	import tool from '@/utils/tool'
+	import { cloneDeep } from 'lodash-es'
+	import { required } from '@/utils/formRules'
+	import customerCategoryApi from '@/api/base/customer/customerCategoryApi'
+	// 抽屉状态
+	const visible = ref(false)
+	const emit = defineEmits({ successful: null })
+	const formRef = ref()
+	// 表单数据
+	const formData = ref({})
+	const submitLoading = ref(false)
+	const enabledStateOptions = ref([])
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			let recordData = cloneDeep(record)
+			formData.value = Object.assign({}, recordData)
+		}
+		enabledStateOptions.value = tool.dictList('COMMON_STATUS')
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		formData.value = {}
+		visible.value = false
+	}
+	// 默认要校验的
+	const formRules = {}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value.validate().then(() => {
+			submitLoading.value = true
+			const formDataParam = cloneDeep(formData.value)
+			customerCategoryApi
+				.customerSubmitForm(formDataParam, formDataParam.id)
+				.then(() => {
+					onClose()
+					emit('successful')
+				})
+				.finally(() => {
+					submitLoading.value = false
+				})
+		})
+	}
+	// 抛出函数
+	defineExpose({
+		onOpen
+	})
+</script>

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

@@ -11,8 +11,16 @@
 		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
 			<a-row :gutter="16">
 				<a-col :span="6">
-					<a-form-item label="单位组：" name="name">
+					<a-form-item label="单位组：" name="unitGroupId">
-						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
+						<a-select
+							v-model:value="formData.unitGroupId"
+							placeholder="请选择单位组"
+							:options="unitGroupList"
+							:fieldNames="{
+								label: 'name',
+								value: 'id'
+							}"
+						/>
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
@@ -26,9 +34,9 @@
 					</a-form-item>
 				</a-col>
 				<a-col :span="6">
-					<a-form-item label="可用状态：" name="code">
+					<a-form-item label="可用状态：">
 						<a-select
-							v-model:value="formData.code"
+							v-model:value="formData.enabledState"
 							placeholder="请选择可用状态"
 							:options="tool.dictList('COMMON_STATUS')"
 						/>
@@ -42,9 +50,9 @@
 				<a-col :span="6">
 					<a-form-item label="是否基本单位：" name="isBase">
 						<a-select
-							v-model:value="formData.code"
+							v-model:value="formData.isBase"
 							placeholder="请选择是否基本单位"
-							:options="tool.dictList('COMMON_STATUS')"
+							:options="tool.dictList('YES_NO')"
 						/>
 					</a-form-item>
 				</a-col>
@@ -64,30 +72,38 @@
 	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 { useRoute } from 'vue-router'
+	const useRouter = useRoute()
+
 	// 抽屉状态
 	const visible = ref(false)
 	const emit = defineEmits({ successful: null })
 	const formRef = ref()
 	// 表单数据
-	const formData = ref({})
+	const formData = ref({
+		enabledState: 'ENABLE',
+		isBase: 'NO'
+	})
 	const submitLoading = ref(false)
-	const stateOptions = ref([])
-	const isBaseOptions = ref([])
 
 	// 默认要校验的
 	const formRules = {
+		unitGroupId: [required('请选择单位')],
 		name: [required('请输入名称')],
-		unitGroupId: [required('请输入单位组id')]
+		isBase: [required('请选择是否基本单位')]
 	}
 	// 验证并提交数据
 	const onSubmit = () => {
 		formRef.value.validate().then(() => {
 			submitLoading.value = true
 			const formDataParam = cloneDeep(formData.value)
-			sysUnitApi
+			unitApi
 				.sysUnitSubmitForm(formDataParam, formDataParam.id)
 				.then(() => {
-					emit('successful')
+					// emit('successful')
+					handleBack()
 				})
 				.finally(() => {
 					submitLoading.value = false
@@ -96,7 +112,34 @@
 	}
 	// 返回之后关闭标签
 	const handleBack = () => {
-		router.go(-1)
+		router.replace('/basicData/unit')
 		useTabs.close()
 	}
+
+	let state = reactive({
+		PAGE_TYPE: ''
+	})
+	let unitGroupList = ref([])
+	onMounted(() => {
+		// 单位组
+		unitGroupsApi
+			.sysUnitGroupList({
+				enabledState: 'ENABLE'
+			})
+			.then((res) => {
+				unitGroupList.value = res
+			})
+
+		state.PAGE_TYPE = useRouter.query.type
+		if (state.PAGE_TYPE && state.PAGE_TYPE !== 'ADD') {
+			state.detailId = useRouter.query.id
+			unitApi
+				.sysUnitDetail({
+					id: useRouter.query.id
+				})
+				.then((res) => {
+					formData.value = res
+				})
+		}
+	})
 </script>

src/views/basicData/unit/index.vue

@@ -44,36 +44,42 @@
 	</a-card>
 
 	<a-card class="mt-4" :border="false">
-		<a-row :gutter="20">
+		<a-row :gutter="30">
-			<a-col :span="8">
+			<a-col :span="6">
 				<s-table
-					ref="unitTableRef"
+					ref="unitGroupTableRef"
 					:columns="unitGroupColumns"
 					:data="loadGroupsData"
 					bordered
 					:row-key="(record) => record.id"
 					:tool-config="unitGroupToolConfig"
-					:row-selection="options.rowSelection"
 					@plusRowData="handlePlusRowData"
 					@editRowData="handleEditRowData"
 					@deleteRowData="handleDeleteRowData"
+					:rowSelection="{
+						type: 'radio',
+						onChange: unitGroupOnChange
+					}"
 				>
 					<template #operator class="table-operator">
 						<span>单位组</span>
 					</template>
 					<template #bodyCell="{ column, record }">
-						<template v-if="column.dataIndex === 'state'">
+						<template v-if="column.dataIndex === 'enabledState'">
-							{{ $TOOL.dictTypeData('COMMON_STATUS', record.state) }}
+							<a-switch
-						</template>
+								checkedValue="ENABLE"
-						<template v-if="column.dataIndex === 'isBase'">
+								unCheckedValue="DISABLED"
-							{{ $TOOL.dictTypeData('YES_NO', record.isBase) }}
+								checked-children="启用"
+								un-checked-children="停用"
+								v-model:checked="record.enabledState"
+							/>
 						</template>
 					</template>
 				</s-table>
 			</a-col>
-			<a-col :span="16">
+			<a-col :span="18">
 				<s-table
-					ref="unitGroupTableRef"
+					ref="unitTableRef"
 					:columns="unitColumns"
 					:data="loadData"
 					:alert="options.alert.show"
@@ -104,15 +110,40 @@
 						</a-space>
 					</template>
 					<template #bodyCell="{ column, record }">
-						<template v-if="column.dataIndex === 'state'">
+						<template v-if="column.dataIndex === 'enabledState'">
-							{{ $TOOL.dictTypeData('COMMON_STATUS', record.state) }}
+							<a-switch
+								checkedValue="ENABLE"
+								unCheckedValue="DISABLED"
+								checked-children="启用"
+								un-checked-children="停用"
+								v-model:checked="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 @click="formRef.onOpen(record)" v-if="hasPerm('sysUnitEdit')">编辑</a>
+								<a
+									@click="
+										navigateTo('/basicData/unit/detail', {
+											type: 'SEARCH',
+											id: record.id
+										})
+									"
+									>查看</a
+								>
+								<a-divider type="vertical" />
+								<a
+									@click="
+										navigateTo('/basicData/unit/detail', {
+											type: 'SEARCH',
+											id: record.id
+										})
+									"
+									v-if="hasPerm('sysUnitEdit')"
+									>编辑</a
+								>
 								<a-divider type="vertical" v-if="hasPerm(['sysUnitEdit', 'sysUnitDelete'], 'and')" />
 								<a-popconfirm title="确定要删除吗？" @confirm="deleteSysUnit(record)">
 									<a-button type="link" danger size="small" v-if="hasPerm('sysUnitDelete')">删除</a-button>
@@ -125,7 +156,7 @@
 		</a-row>
 	</a-card>
 	<!--	<Form ref="formRef" @successful="tableRef.refresh()" />-->
-	<unit-group-form ref="UnitGroupFormRef"></unit-group-form>
+	<unit-group-form ref="UnitGroupFormRef" @successful="successful"></unit-group-form>
 </template>
 
 <script setup name="sysunit">
@@ -137,6 +168,7 @@
 	// 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({})
 	const searchFormRef = ref()
@@ -160,13 +192,15 @@
 	}
 	// 操作栏通过权限判断是否显示
 	if (hasPerm(['sysUnitEdit', 'sysUnitDelete'])) {
-		unitColumns.push({
+		const columnsFilter = unitColumns.filter((item) => item.dataIndex === 'action')
-			title: '操作',
+		if (columnsFilter.length === 0)
-			dataIndex: 'action',
+			unitColumns.push({
-			align: 'center',
+				title: '操作',
-			fixed: 'right',
+				dataIndex: 'action',
-			width: 150
+				align: 'center',
-		})
+				fixed: 'right',
+				width: 150
+			})
 	}
 	const selectedRowKeys = ref([])
 	// 列表选择配置
@@ -225,13 +259,36 @@
 	const { navigateTo } = useNavigation()
 
 	// 单位组
+	let unitGroupRecord = ''
 	const handlePlusRowData = () => {
 		UnitGroupFormRef.value.onOpen()
 	}
 
 	const handleEditRowData = () => {
-		UnitGroupFormRef.value.onOpen()
+		if (!unitGroupRecord) return message.error('请选择单位组数据')
+		UnitGroupFormRef.value.onOpen(unitGroupRecord)
 	}
 
-	const handleDeleteRowData = () => {}
+	const handleDeleteRowData = () => {
+		if (!unitGroupRecord) return message.error('请选择单位组数据')
+		sysUnitGroupsApi
+			.sysUnitGroupDelete([
+				{
+					id: unitGroupRecord.id
+				}
+			])
+			.then(() => {
+				unitGroupTableRef.value.refresh()
+			})
+	}
+
+	const successful = () => {
+		unitGroupTableRef.value.refresh()
+	}
+
+	const unitGroupOnChange = (value, selectedOptions) => {
+		unitGroupRecord = selectedOptions[0]
+		searchFormState.value.unitGroupId = value[0]
+		unitTableRef.value.refresh()
+	}
 </script>