wkx-his-web/src/views/patients/medicalRecord/editDialog.vue

<template>
    <el-dialog :model-value="visible" title="编辑门诊患者信息" width="1100px" append-to-body @close="handleClose" class="edit-dialog-root">
        <div class="edit-dialog-body">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" label-position="right">
                <el-row :gutter="0">
                    <el-col :span="12">
                        <el-form-item label="看诊类型：" prop="type" required>
                            <span>{{ form.type === '0' ? '门诊' : '住院' }}</span>
                        </el-form-item>
                        <el-form-item label="诊疗卡号：" prop="treatNum">
                            <span>{{ form.treatNum || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="科室：" prop="deptName" required>
                            <span>{{ form.deptName || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="姓名：" prop="treatName" required>
                            <span>{{ form.treatName || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="身份证：" prop="idCard" required>
                            <span>{{ form.idCard || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="年龄：" prop="age">
                            <span>{{ form.age || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="身高：" prop="height">
                            <el-input v-model="form.height" style="width: 80%;" />
                            <span class="unit">cm</span>
                        </el-form-item>


                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="门诊号：" prop="outpatientNo">
                            <span>{{ form.outpatientNo || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="性别：" prop="sex" required>
                            <span>{{ form.sex === '1' ? '男' : form.sex === '2' ? '女' : '--' }}</span>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birthday">
                            <span>{{ form.birthday || '--' }}</span>
                        </el-form-item>
                        <el-form-item label="联系电话：" prop="phoneNum">
                            <el-input v-model="form.phoneNum" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="体重：" prop="weight">
                            <el-input v-model="form.weight" style="width: 80%;" />
                            <span class="unit">kg</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="过敏食物：" prop="allergyFoot">
                            <el-input type="textarea" v-model="form.allergyFoot" maxlength="120" show-word-limit />
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="过敏药物：" prop="allergyDrug">
                            <el-input type="textarea" v-model="form.allergyDrug" maxlength="120" show-word-limit />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="体力活动：" prop="activity">
                            <el-select v-model="form.activity" placeholder="请选择">
                                <el-option v-for="dict in physical_activity" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="床号：" prop="bedNo" v-if="form.type === '1'">
                            <el-input v-model="form.bedNo" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="病区：" prop="inpatientWard" v-if="form.type === '1'">
                            <el-input v-model="form.inpatientWard" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="入院日期：" prop="admissionDate" v-if="form.type === '1'">
                            <el-date-picker v-model="form.admissionDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="handleClose">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
    import { ref, watch, getCurrentInstance, toRefs } from 'vue';
    import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElCol, ElRow, ElDatePicker } from 'element-plus';
    
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const { physical_activity } = toRefs(proxy?.useDict('physical_activity'));

    const props = defineProps({
        visible: Boolean,
        editData: {
            type: Object,
            default: () => ({})
        }
    });
    const emit = defineEmits(['update:visible', 'save', 'close']);

    const formRef = ref();
    const form = ref({ ...props.editData });

    watch(() => props.editData, (val) => {
        form.value = { ...val };
    }, { immediate: true });

    const rules = {
        phoneNum: [{ required: false, message: '请输入联系电话', trigger: 'blur' }],
        height: [{ required: false, message: '请输入身高', trigger: 'blur' }],
        weight: [{ required: false, message: '请输入体重', trigger: 'blur' }],
        allergyFoot: [{ required: false, message: '请输入过敏食物', trigger: 'blur' }],
        allergyDrug: [{ required: false, message: '请输入过敏药物', trigger: 'blur' }],
        activity: [{ required: false, message: '请选择体力活动', trigger: 'change' }],
    };

    function handleSave() {
        formRef.value.validate((valid) => {
            if (valid) {
                emit('save', form.value);
                emit('update:visible', false);
            }
        });
    }

    function handleClose() {
        emit('update:visible', false);
        emit('close');
    }

    defineOptions({
        name: 'EditDialog'
    });
</script>

<style scoped>
    .edit-dialog-root>>>.el-dialog__body {
        padding: 40px 40px 10px 40px;
    }

    .edit-dialog-body {
        font-size: 14px;
        color: #222;
    }

    .unit {
        margin-left: 8px;
        color: #888;
    }

    .el-form-item {
        margin-bottom: 18px;
    }
</style>