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>
		<template #title>
			<span style="font-size: 18px">新增</span>
		</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="name">
						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
					</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="可用状态：" name="code">
						<a-select
							v-model:value="formData.code"
							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.code"
							placeholder="请选择是否基本单位"
							:options="tool.dictList('COMMON_STATUS')"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="24">
					<a-form-item label="备注：" name="remarks">
						<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" allow-clear />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
</template>

<script setup name="sysUnitForm">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import useTabs from '@/utils/useTabs'
	import router from '@/router'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const stateOptions = ref([])
	const isBaseOptions = ref([])

	// 默认要校验的
	const formRules = {
		name: [required('请输入名称')],
		unitGroupId: [required('请输入单位组id')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			sysUnitApi
				.sysUnitSubmitForm(formDataParam, formDataParam.id)
				.then(() => {
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 返回之后关闭标签
	const handleBack = () => {
		router.go(-1)
		useTabs.close()
	}
</script>