基础资料模块
							parent
							
								
									11e6f17532
								
							
						
					
					
						commit
						59d9d4e4c1
					
				| 
						 | 
				
			
			@ -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: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			default: () => ({ span: 8 })
 | 
			
		||||
		allDisabled: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			default: false
 | 
			
		||||
		}
 | 
			
		||||
	})
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -36,7 +36,8 @@
 | 
			
		|||
 | 
			
		||||
	// Expose validate method
 | 
			
		||||
	defineExpose({
 | 
			
		||||
		validate: () => formRef.value.validate()
 | 
			
		||||
		validate: () => formRef.value.validate(),
 | 
			
		||||
		resetFields: () => formRef.value.resetFields()
 | 
			
		||||
	})
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -38,17 +38,20 @@
 | 
			
		|||
						<component class="icons" :is="item.icon"></component>
 | 
			
		||||
					</a-tooltip>
 | 
			
		||||
					<!-- 删除 -->
 | 
			
		||||
					<a-tooltip
 | 
			
		||||
						v-if="item.name === 'delete' && props.toolConfig.delete"
 | 
			
		||||
						:title="item.title"
 | 
			
		||||
						class="s-tool-item"
 | 
			
		||||
						@click="
 | 
			
		||||
							() => {
 | 
			
		||||
								emit('deleteRowData')
 | 
			
		||||
							}
 | 
			
		||||
						"
 | 
			
		||||
					>
 | 
			
		||||
						<component class="icons" :is="item.icon"></component>
 | 
			
		||||
					<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="确认删除?"
 | 
			
		||||
							ok-text="Yes"
 | 
			
		||||
							cancel-text="No"
 | 
			
		||||
							@confirm="
 | 
			
		||||
								() => {
 | 
			
		||||
									emit('deleteRowData')
 | 
			
		||||
								}
 | 
			
		||||
							"
 | 
			
		||||
						>
 | 
			
		||||
							<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()
 | 
			
		||||
									: null
 | 
			
		||||
									  ? props.alert.clear()
 | 
			
		||||
									  : 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)), {})
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			@ -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-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
 | 
			
		||||
					<a-form-item label="单位组:" name="unitGroupId">
 | 
			
		||||
						<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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -44,36 +44,42 @@
 | 
			
		|||
	</a-card>
 | 
			
		||||
 | 
			
		||||
	<a-card class="mt-4" :border="false">
 | 
			
		||||
		<a-row :gutter="20">
 | 
			
		||||
			<a-col :span="8">
 | 
			
		||||
		<a-row :gutter="30">
 | 
			
		||||
			<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'">
 | 
			
		||||
							{{ $TOOL.dictTypeData('COMMON_STATUS', record.state) }}
 | 
			
		||||
						</template>
 | 
			
		||||
						<template v-if="column.dataIndex === 'isBase'">
 | 
			
		||||
							{{ $TOOL.dictTypeData('YES_NO', record.isBase) }}
 | 
			
		||||
						<template v-if="column.dataIndex === 'enabledState'">
 | 
			
		||||
							<a-switch
 | 
			
		||||
								checkedValue="ENABLE"
 | 
			
		||||
								unCheckedValue="DISABLED"
 | 
			
		||||
								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'">
 | 
			
		||||
							{{ $TOOL.dictTypeData('COMMON_STATUS', record.state) }}
 | 
			
		||||
						<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 === '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({
 | 
			
		||||
			title: '操作',
 | 
			
		||||
			dataIndex: 'action',
 | 
			
		||||
			align: 'center',
 | 
			
		||||
			fixed: 'right',
 | 
			
		||||
			width: 150
 | 
			
		||||
		})
 | 
			
		||||
		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([])
 | 
			
		||||
	// 列表选择配置
 | 
			
		||||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue