inspect-front/src/views/project-management/base/createUI.vue

224 lines
6.6 KiB
Vue

<template>
<el-dialog
v-model="visible"
title="新增检查项目"
width="50%"
:close-on-click-modal="false"
:close-on-press-escape="false"
destroy-on-close
>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属科室" prop="section" required>
<el-select
v-model="formData.section"
placeholder="请选择科室"
filterable
style="width: 100%"
clearable
>
<el-option
v-for="item in departmentOptions"
:key="item.value"
:label="item.label"
:value="item.value + '|' + item.label"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目代号" prop="itemCode" required>
<el-input v-model="formData.itemCode" placeholder="请输入项目代码" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称" prop="itemName" required>
<el-input v-model="formData.itemName" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目单位" prop="unit">
<el-select
v-model="formData.unit"
placeholder="请选择项目单位"
clearable
filterable
>
<el-option
v-for="dict in getStrDictOptions('metering_unit')"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目单价" prop="price" required>
<el-input v-model="formData.price" placeholder="请输入项目单价">
<template #append>元</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="折扣百分比" prop="discounted">
<el-input v-model="formData.discounted" placeholder="请输入折扣">
<template #append>%</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="取值上限" prop="highValue">
<el-input v-model="formData.highValue" placeholder="请输入上限值" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="取值下限" prop="lowValue">
<el-input v-model="formData.lowValue" placeholder="请输入下限值" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="体检单元" prop="moduleName">
<el-select
v-model="formData.moduleName"
placeholder="请选择体检单元"
clearable
filterable
>
<el-option
v-for="dict in getStrDictOptions('inspect_unit')"
:key="dict.value"
:label="dict.label"
:value="dict.label+ '|' + dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { DepartmentApi, DepartmentVO } from '@/api/inspect/inspectdepartment/index'
import { itemsApi, itemsVO } from '@/api/inspect/inspectitems/index'
import { getStrDictOptions } from '@/utils/dict'
const visible = ref(false)
const formRef = ref<FormInstance>()
const departmentOptions = ref<{ value: string; label: string }[]>([])
// 表单数据
const formData = ref<Partial<itemsVO>>({
itemName: '',
itemCode: '',
price: undefined,
discounted: undefined,
section: '',
unit: '',
moduleName: '',
highValue: undefined,
lowValue: undefined,
moduleID: undefined,
sectionID: ''
})
// 表单验证规则
const formRules = {
section: [{ required: true, message: '请选择所属科室', trigger: 'change' }],
itemCode: [{ required: true, message: '请输入项目代号', trigger: 'blur' }],
itemName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
price: [{ required: true, message: '请输入项目单价', trigger: 'blur' }]
}
// 获取科室列表
const getDepartmentList = async () => {
try {
const data = await DepartmentApi.getListDepartment()
departmentOptions.value = data.map((item: DepartmentVO) => ({
value: item.departmentName,
label: item.departmentName
}))
} catch (error) {
console.error('获取科室列表失败:', error)
ElMessage.error('获取科室列表失败')
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
try {
if (formData.value.moduleName) {
const moduleName = formData.value.moduleName
formData.value.moduleName = moduleName.split('|')[0]
formData.value.moduleID = parseInt(moduleName.split('|')[1])
}
if (formData.value.section) {
const section = formData.value.section
formData.value.section = section.split('|')[0]
formData.value.sectionID = section.split('|')[1]
}
await itemsApi.createitems(formData.value as itemsVO)
ElMessage.success('添加成功')
handleClose()
} catch (error) {
console.error('添加失败:', error)
ElMessage.error('添加失败')
}
}
})
}
// 关闭对话框
const handleClose = () => {
formRef.value?.resetFields()
formData.value = {
itemName: '',
itemCode: '',
price: undefined,
discounted: undefined,
section: '',
unit: '',
moduleName: '',
highValue: undefined,
lowValue: undefined,
moduleID: undefined
}
visible.value = false
}
const open = async () => {
visible.value = true
await getDepartmentList()
}
// 直接暴露 open 方法
defineExpose({
open
})
</script>