<template>
|
<el-dialog
|
:title="`${isEdit ? '编辑' : '新建'}转运单`"
|
:visible.sync="editOpen"
|
width="900px"
|
append-to-body
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form ref="editForm" :model="formData" :rules="formRules" label-width="120px">
|
<!-- 基础信息 -->
|
<el-card class="form-section" shadow="never">
|
<div slot="header" class="section-header">
|
<i class="el-icon-document" style="color: #409EFF; margin-right: 8px;"></i>
|
<span>基础信息</span>
|
</div>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="转运单号" prop="id">
|
<el-input v-model="formData.id" :disabled="isEdit" placeholder="系统自动生成" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="案例编号" prop="caseNo">
|
<el-input v-model="formData.caseNo" placeholder="请输入案例编号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="捐献者姓名" prop="donorName">
|
<el-input v-model="formData.donorName" placeholder="请输入捐献者姓名" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="性别" prop="gender">
|
<el-select v-model="formData.gender" placeholder="请选择性别" style="width: 100%">
|
<el-option label="男" value="男" />
|
<el-option label="女" value="女" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="年龄" prop="age">
|
<el-input-number
|
v-model="formData.age"
|
:min="0"
|
:max="120"
|
placeholder="请输入年龄"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="疾病诊断" prop="diagnosis">
|
<el-input v-model="formData.diagnosis" placeholder="请输入疾病诊断" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<!-- 转运信息 -->
|
<el-card class="form-section" shadow="never">
|
<div slot="header" class="section-header">
|
<i class="el-icon-location-information" style="color: #67C23A; margin-right: 8px;"></i>
|
<span>转运信息</span>
|
</div>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="出发医院" prop="hospitalName">
|
<el-input v-model="formData.hospitalName" placeholder="请输入出发医院" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="目的医院" prop="destinationHospital">
|
<el-input v-model="formData.destinationHospital" placeholder="请输入目的医院" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="计划转运时间" prop="transportTime">
|
<el-date-picker
|
v-model="formData.transportTime"
|
type="datetime"
|
placeholder="选择转运时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="负责协调员" prop="coordinator">
|
<el-input v-model="formData.coordinator" placeholder="请输入协调员姓名" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="出发地点" prop="departureLocation">
|
<el-input v-model="formData.departureLocation" placeholder="请输入详细出发地点" />
|
</el-form-item>
|
</el-card>
|
|
<!-- 团队成员 -->
|
<el-card class="form-section" shadow="never">
|
<div slot="header" class="section-header">
|
<i class="el-icon-user" style="color: #E6A23C; margin-right: 8px;"></i>
|
<span>团队成员</span>
|
</div>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="急诊科医生" prop="emergencyDoctor">
|
<el-input v-model="formData.emergencyDoctor" placeholder="请输入急诊科医生" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="护士" prop="nurse">
|
<el-input v-model="formData.nurse" placeholder="请输入护士姓名" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="司机" prop="driver">
|
<el-input v-model="formData.driver" placeholder="请输入司机姓名" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="ICU评估医生" prop="icuDoctor">
|
<el-input v-model="formData.icuDoctor" placeholder="请输入ICU医生" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<!-- 备注信息 -->
|
<el-card class="form-section" shadow="never">
|
<div slot="header" class="section-header">
|
<i class="el-icon-edit" style="color: #909399; margin-right: 8px;"></i>
|
<span>备注信息</span>
|
</div>
|
<el-form-item prop="remarks">
|
<el-input
|
v-model="formData.remarks"
|
type="textarea"
|
:rows="4"
|
placeholder="请输入转运备注信息"
|
maxlength="500"
|
show-word-limit
|
/>
|
</el-form-item>
|
</el-card>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取消</el-button>
|
<el-button type="primary" :loading="saveLoading" @click="handleSave">保存</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "TransportEdit",
|
props: {
|
editOpen: {
|
type: Boolean,
|
default: false
|
},
|
transportData: {
|
type: Object,
|
default: () => ({})
|
},
|
isEdit: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
saveLoading: false,
|
formData: this.getDefaultFormData(),
|
formRules: {
|
caseNo: [
|
{ required: true, message: '请输入案例编号', trigger: 'blur' }
|
],
|
donorName: [
|
{ required: true, message: '请输入捐献者姓名', trigger: 'blur' }
|
],
|
gender: [
|
{ required: true, message: '请选择性别', trigger: 'change' }
|
],
|
age: [
|
{ required: true, message: '请输入年龄', trigger: 'blur' }
|
],
|
diagnosis: [
|
{ required: true, message: '请输入疾病诊断', trigger: 'blur' }
|
],
|
hospitalName: [
|
{ required: true, message: '请输入出发医院', trigger: 'blur' }
|
],
|
destinationHospital: [
|
{ required: true, message: '请输入目的医院', trigger: 'blur' }
|
],
|
transportTime: [
|
{ required: true, message: '请选择转运时间', trigger: 'change' }
|
],
|
coordinator: [
|
{ required: true, message: '请输入负责协调员', trigger: 'blur' }
|
]
|
}
|
};
|
},
|
watch: {
|
editOpen(val) {
|
if (val) {
|
this.formData = this.isEdit ?
|
{ ...this.transportData } :
|
this.getDefaultFormData();
|
|
this.$nextTick(() => {
|
this.$refs.editForm && this.$refs.editForm.clearValidate();
|
});
|
}
|
}
|
},
|
methods: {
|
getDefaultFormData() {
|
return {
|
id: '',
|
caseNo: '',
|
donorName: '',
|
gender: '',
|
age: null,
|
diagnosis: '',
|
hospitalName: '',
|
destinationHospital: '',
|
transportTime: '',
|
coordinator: '',
|
departureLocation: '',
|
emergencyDoctor: '',
|
nurse: '',
|
driver: '',
|
icuDoctor: '',
|
remarks: '',
|
status: 'pending',
|
statusText: '待出发'
|
};
|
},
|
|
handleClose() {
|
this.$emit('update:editOpen', false);
|
this.$emit('close');
|
},
|
|
async handleSave() {
|
try {
|
const valid = await this.$refs.editForm.validate();
|
if (!valid) return;
|
|
this.saveLoading = true;
|
|
// 模拟API调用
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
this.$message.success(this.isEdit ? '修改成功' : '新建成功');
|
this.handleClose();
|
this.$emit('save-success');
|
|
} catch (error) {
|
console.error('保存失败:', error);
|
this.$message.error('操作失败');
|
} finally {
|
this.saveLoading = false;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.form-section {
|
margin-bottom: 16px;
|
}
|
|
.section-header {
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
padding: 20px 0 0;
|
}
|
|
::v-deep .el-card__header {
|
background: #f5f7fa;
|
border-bottom: 1px solid #ebeef5;
|
}
|
</style>
|
