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

<template>
	<a-page-header style="padding: 10px; font-size: 20px" @back="handleBack">
		<template #extra>
			<a-button key="1" type="primary" @click="onSubmit">保存</a-button>
		</template>
	</a-page-header>
	<a-card :bordered="false" title="基本信息">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-col :span="6">
					<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">
					<a-form-item label="编码：" name="number">
						<a-input v-model:value="formData.number" placeholder="请输入编码" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="名称：" name="name">
						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="可用状态：">
						<a-select
							v-model:value="formData.enabledState"
							placeholder="请选择可用状态"
							:options="tool.dictList('COMMON_STATUS')"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="换算率：" name="rate">
						<a-input v-model:value="formData.rate" placeholder="请输入换算率" allow-clear />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="是否基本单位：" name="isBase">
						<a-select
							v-model:value="formData.isBase"
							placeholder="请选择是否基本单位"
							:options="tool.dictList('YES_NO')"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="备注：" name="remarks">
						<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
</template>

<script setup name="basicDataUnitDetail">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import useTabs from '@/utils/useTabs'
	import router from '@/router'
	import unitGroupsApi from '@/api/base/unit/unitGroupsApi'
	import unitApi from '@/api/base/unit/unitApi'
	import { useRoute } from 'vue-router'
	const useRouter = useRoute()

	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({
		enabledState: 'ENABLE',
		isBase: 'NO'
	})
	const submitLoading = ref(false)

	// 默认要校验的
	const formRules = {
		unitGroupId: [required('请选择单位')],
		name: [required('请输入名称')],
		isBase: [required('请选择是否基本单位')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			unitApi
				.sysUnitSubmitForm(formDataParam, formDataParam.id)
				.then(() => {
					// emit('successful')
					handleBack()
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 返回之后关闭标签
	const handleBack = () => {
		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>