wkx-his-web/src/views/workbench/treatmentUser/index.vue

<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div v-show="showSearch" class="mb-[10px]">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="150px">
                        <el-form-item label="患者类型" prop="type">
                            <el-select v-model="queryParams.type" clearable>
                                <el-option v-for="dict in treatment_user_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="科室" prop="doorId">
                            <el-tree-select v-model="queryParams.doorId" :data="treeData" :props="treeProps" placeholder="请选择" check-strictly node-key="id" @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="患者状态" prop="treatmentUserStatus" v-if="showStatusSearch">
                            <el-select v-model="queryParams.treatmentUserStatus" clearable>
                                <el-option v-for="dict in treatment_user_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="评估状态" prop="evaluationStatus">
                            <el-select v-model="queryParams.evaluationStatus" clearable>
                                <el-option v-for="dict in evaluation_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="searchFlag">
                            <el-input v-model="queryParams.searchFlag" placeholder="姓名/门诊号/身份证号/医生" clearable @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['workbench:treatmentUser:add']">添加患者</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="never">
            <div class="status-tabs">
                <div class="tab-item" :class="{ 'active': activeTab === 'waiting' }" @click="handleTabClick('waiting')">
                    待诊
                    <el-badge :value="waitingCount" class="tab-badge" />
                </div>
                <div class="tab-item" :class="{ 'active': activeTab === 'treating' }" @click="handleTabClick('treating')">
                    诊中
                    <el-badge :value="treatingCount" class="tab-badge" />
                </div>
                <div class="tab-item" :class="{ 'active': activeTab === 'treated' }" @click="handleTabClick('treated')">
                    已诊
                    <el-badge :value="treatedCount" class="tab-badge" />
                </div>
                <div class="tab-item" :class="{ 'active': activeTab === 'reapply' }" @click="handleTabClick('reapply')">
                    处方重申
                    <el-badge :value="reapplyCount" class="tab-badge" />
                </div>
            </div>

            <div class="patient-cards-container" v-if="userList.length > 0">
                <el-row :gutter="20">
                    <el-col v-for="(patient, index) in userList" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-card class="patient-card" shadow="hover" @click="toPatients(patient)">
                            <div class="patient-status-bar" :class="getStatusBarClass(patient)">
                                {{ getStatusText(patient) }}
                            </div>
                            <div class="patient-info">
                                <div class="patient-header">
                                    <div class="patient-name-age">
                                        <span class="patient-name">{{ patient.treatName }}</span>
                                        <span class="patient-age">{{ patient.age }}</span>
                                    </div>
                                    <span class="gender-icon" :class="patient.sex === '1' ? 'male' : 'female'">
                                        {{ patient.sex === '1' ? '♂' : '♀' }}
                                    </span>
                                </div>
                                <div class="patient-detail">
                                    <span class="detail-label">门诊号:</span>
                                    <span>{{ patient.outpatientNo }}</span>
                                </div>
                                <div class="patient-detail">
                                    <span class="detail-label">科室:</span>
                                    <span>{{ patient.deptName }}</span>
                                </div>
                                <div class="evaluation-info">
                                    <span class="evaluation-score" v-if="patient.treatmentUserStatus==='4'">营养筛查得分:{{ patient.score }}</span>
                                    <span class="evaluation-status" :class="patient.evaluationStatus === '1' ? 'evaluated' : 'not-evaluated'">
                                        {{ patient.evaluationStatus === '1' ? '已评估' : '未评估' }}
                                    </span>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div v-else class="empty-state">
                <img src="@/assets/images/empty.png" alt="暂无数据" />
                <p>暂无数据</p>
            </div>
        </el-card>
        <!-- 添加或修改【待诊患者】对话框 -->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
            <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="看诊类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio label="1">住院</el-radio>
                        <el-radio label="0">门诊</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="诊疗卡号" prop="treatNum">
                            <el-input v-model="form.treatNum" placeholder="系统生成" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="门诊号" prop="outpatientNo">
                            <el-input v-model="form.outpatientNo" placeholder="系统生成" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="科室" prop="doorId">
                            <el-tree-select v-model="form.doorId" :data="treeData" :props="treeProps" placeholder="请选择" check-strictly node-key="id" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-show="form.type == '1'">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="床号" prop="bedNum">
                                <el-input v-model="form.bedNum" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="病区" prop="inpatientWard">
                                <el-select v-model="form.inpatientWard" placeholder="请选择">
                                    <el-option v-for="item in inpatientWardList" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item v-if="data.form.type === '1'" label="入院日期" prop="admissionDate" :required="data.form.type === '1'">
                                <el-date-picker v-model="data.form.admissionDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="treatName">
                            <el-input v-model="form.treatName" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="form.idCard" placeholder="请输入" @input="handleIdCardChange" />
                        </el-form-item>
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="form.age" placeholder="请输入" disabled />
                        </el-form-item>
                        <el-form-item label="身高" prop="height">
                            <el-input v-model="form.height" placeholder="请输入" min="0" oninput="value=value.replace(/[^0-9.]/g,'')" style="width: calc(100% - 40px)">
                                <template #append>cm</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" clearable>
                                <el-option v-for="dict in user_sex" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="birthday">
                            <el-input v-model="form.birthday" placeholder="请输入" disabled />
                        </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" placeholder="请输入" style="width: calc(100% - 40px)">
                                <template #append>kg</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="过敏食物" prop="allergyFoot">
                    <el-input type="textarea" v-model="form.allergyFoot" placeholder="请输入" maxlength="120" show-word-limit @input="handleTextareaInput" />
                </el-form-item>
                <el-form-item label="过敏药物" prop="allergyDrug">
                    <el-input type="textarea" v-model="form.allergyDrug" placeholder="请输入" maxlength="120" show-word-limit @input="handleTextareaInput" />
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="体力活动" prop="activity">
                            <el-select v-model="form.activity" placeholder="请选择" clearable>
                                <el-option v-for="dict in physical_activity" :key="dict.value" :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="cancel">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="TreatmentUser" lang="ts">
    import { listTreatmentUser, getTreatmentUser, delTreatmentUser, addTreatmentUser, updateTreatmentUser } from '@/api/workbench/treatmentUser';
    import { listDept } from '@/api/system/dept';
    import { listWard } from '@/api/system/ward';
    import { TreatmentUserVo, TreatmentUserForm, TreatmentUserQuery } from '@/api/workbench/treatmentUser/types';
    import { log } from 'console';
    import { get } from 'http';
    import { useRouter } from 'vue-router';

    const router = useRouter();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    const { treatment_user_type, treatment_user_status, evaluation_status, physical_activity, user_sex } = toRefs < any > (proxy ?.useDict('treatment_user_type', 'treatment_user_status', 'evaluation_status', 'physical_activity', 'user_sex'));
    const userList = ref < TreatmentUserVo[] > ([]);
    const buttonLoading = ref(false);
    const loading = ref(true);
    const showSearch = ref(true);
    const ids = ref < Array < string | number >> ([]);
    const single = ref(true);
    const multiple = ref(true);
    const total = ref(0);
    const treeData = ref([]); // 定义 treeData
    const inpatientWardList = ref([]);

    // 获取病区列表数据
    const getWardList = async () => {
        try {
            const res = await listWard({
                pageNum: 1,
                pageSize: 999
            });
            if (res.rows && Array.isArray(res.rows)) {
                inpatientWardList.value = res.rows.map(item => ({
                    value: item.wardId,
                    label: item.wardName
                }));
            }
        } catch (error) {
            console.error('获取病区列表失败:', error);
            inpatientWardList.value = [];
        }
    };

    const waitingCount = ref(0);
    const treatingCount = ref(0);
    const treatedCount = ref(0);
    const reapplyCount = ref(0);
    const showStatusSearch = computed(() => activeTab.value !== 'reapply');

    // 当前选中的标签
    const activeTab = ref('waiting');

    // 点击标签切换
    const handleTabClick = (tabType: string) => {
        activeTab.value = tabType;
        if (tabType === 'waiting') {
            getList(); // 重新加载数据
        } else {
            userList.value = [];
        }
    };

    const queryFormRef = ref < ElFormInstance > ();
    const userFormRef = ref < ElFormInstance > ();

    const dialog = reactive < DialogOption > ({
        visible: false,
        title: ''
    });

    const treeProps = ref({
        value: 'deptId', // 对应部门的 deptId
        label: 'deptName', // 对应部门的 deptName
        children: 'children' // 保持原有的父子结构
    });

    const initFormData: TreatmentUserForm = {
        id: undefined,
        type: '0',
        treatNum: undefined,
        outpatientNo: undefined,
        doorId: undefined,
        treatName: undefined,
        sex: undefined,
        idCard: undefined,
        phoneNum: undefined,
        birthday: undefined,
        age: undefined,
        height: undefined,
        weight: undefined,
        allergyFoot: undefined,
        allergyDrug: undefined,
        activity: undefined,
    }
    const data = reactive < PageData < TreatmentUserForm,
        TreatmentUserQuery >> ({
            form: { ...initFormData },

            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: '0',
                doorId: undefined,
                treatNum: undefined,
                searchFlag: undefined,
                outpatientNo: undefined,
                evaluationStatus: undefined,
                treatmentUserStatus: undefined,

                params: {}
            },
            // 状态计数（独立 ref）

            rules: {
                type: [{ required: true, message: '看诊类型为空', trigger: 'blur' }],
                doorId: [{ required: true, message: '科室不能为空', trigger: 'blur' }],
                treatName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
                idCard: [{ required: true, message: '身份证不能为空', trigger: 'blur' }],
                admissionDate: [{
                    validator: (rule, value, callback) => {
                        // 只有当 type 为 '1' 时才验证
                        if (data.form.type === '1' && !value) {
                            callback(new Error('入院时间不能为空'));
                        } else {
                            callback();
                        }
                    },
                    trigger: 'blur'
                }]

            }
        });

    const { queryParams, form, rules } = toRefs(data);


    /** 查询【待诊患者】列表 */
    const getList = async () => {
        loading.value = true;
        try {
            const res = await listTreatmentUser(queryParams.value);
            // 获取部门数据
            const deptMap = new Map();
            treeData.value.forEach(dept => {
                deptMap.set(dept.deptId, dept.deptName);
                if (dept.children) {
                    dept.children.forEach(child => {
                        deptMap.set(child.deptId, child.deptName);
                    });
                }
            });

            // 为每个患者添加科室名称
            userList.value = res.rows.map(patient => ({
                ...patient,
                deptName: deptMap.get(patient.doorId) || '未知科室'
            }));
            total.value = res.total;
            loading.value = false;
            waitingCount.value = res.total;
        } catch (error) {
            console.error('获取列表失败:', error);
            loading.value = false;
        }
    }
    const getDeptList = async () => {
        loading.value = true;
        try {
            const res = await listDept({});
            if (!res.data) {
                console.warn("部门数据为空");
                treeData.value = [];
                return;
            }

            // 处理树形数据
            const processedData = proxy ?.handleTree(res.data, 'deptId');
            if (!processedData) {
                console.warn("树形数据处理失败");
                treeData.value = [];
                return;
            }

            treeData.value = processedData;

        } catch (error) {
            console.error('获取部门列表失败:', error);
            treeData.value = [];
        } finally {
            loading.value = false;
        }
    };
    const getDictLabel = (dictList, value) => {
        if (!Array.isArray(dictList)) return value || '--';
        const item = dictList.find(item => item.value === value);
        return item ? item.label : (value || '--');
    };
    const handleTextareaInput = () => {
        if (form.allergyFoot.length > 120) {
            form.allergyFoot = form.allergyFoot.slice(0, 120); // 强制截断
        }
        if (form.allergyDrug.length > 120) {
            form.allergyDrug = form.allergyDrug.slice(0, 120); // 强制截断
        }
    };
    const handleIdCardChange = (idCard: string) => {
        if (!validateIdCard(idCard)) {
            return;
        }
        // 当身份证号长度足够时（18位或15位）
        if (idCard.length === 18 || idCard.length === 15) {
            // 提取出生日期
            let birthdayStr = '';
            if (idCard.length === 18) {
                birthdayStr = idCard.substring(6, 14);
                form.value.birthday = `${birthdayStr.substring(0, 4)}-${birthdayStr.substring(4, 6)}-${birthdayStr.substring(6, 8)}`;
            } else if (idCard.length === 15) {
                birthdayStr = '19' + idCard.substring(6, 12);
                form.value.birthday = `${birthdayStr.substring(0, 4)}-${birthdayStr.substring(4, 6)}-${birthdayStr.substring(6, 8)}`;
            }

            // 计算年龄
            if (birthdayStr) {
                const birthYear = parseInt(birthdayStr.substring(0, 4));
                const birthMonth = parseInt(birthdayStr.substring(4, 6)) - 1;
                const birthDay = parseInt(birthdayStr.substring(6, 8));

                const today = new Date();
                const birthDate = new Date(birthYear, birthMonth, birthDay);

                let age = today.getFullYear() - birthDate.getFullYear();
                if (today.getMonth() < birthDate.getMonth() || (today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())) {
                    age--;
                }

                // 设置为"xx岁x月"的格式
                form.value.age = `${age}岁${today.getMonth() - birthDate.getMonth()}月`;
            }

            // 根据身份证倒数第二位判断性别（奇数为男，偶数为女）
            const genderNum = parseInt(idCard.length === 18 ? idCard.charAt(16) : idCard.charAt(14));
            form.value.sex = (genderNum % 2 === 1 ? '1' : '2').toString();
        }
    }

    const validateIdCard = (idCard: string) => {
        // 18位身份证正则
        const reg18 = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
        // 15位身份证正则
        const reg15 = /^[1-9]\d{5}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$/;

        return reg18.test(idCard) || reg15.test(idCard);
    }

    /** 取消按钮 */
    const cancel = () => {
        reset();
        dialog.visible = false;
    }

    /** 表单重置 */
    const reset = () => {
        form.value = { ...initFormData };
        userFormRef.value ?.resetFields();
    }

    /** 搜索按钮操作 */
    const handleQuery = () => {
        queryParams.value.pageNum = 1;
        getList();
    }

    /** 重置按钮操作 */
    const resetQuery = () => {
        queryFormRef.value ?.resetFields();
        handleQuery();
    }

    /** 多选框选中数据 */
    const handleSelectionChange = (selection: TreatmentUserVo[]) => {
        ids.value = selection.map(item => item.id);
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }

    /** 新增按钮操作 */
    const handleAdd = () => {
        reset();
        dialog.visible = true;
        dialog.title = "添加门诊患者";
    }

    /** 修改按钮操作 */
    const handleUpdate = async (row ? : TreatmentUserVo) => {
        reset();
        const _id = row ?.id || ids.value[0]
        const res = await getTreatmentUser(_id);
        Object.assign(form.value, res.data);
        dialog.visible = true;
        dialog.title = "修改门诊患者";
    }

    /** 提交按钮 */
    const submitForm = () => {
        userFormRef.value ?.validate(async (valid: boolean) => {
            if (valid) {
                buttonLoading.value = true;
                if (form.value.id) {
                    await updateTreatmentUser(form.value).finally(() => buttonLoading.value = false);
                } else {
                    await addTreatmentUser(form.value).finally(() => buttonLoading.value = false);
                }
                proxy ?.$modal.msgSuccess("操作成功");
                dialog.visible = false;
                await getList();
            }
        });
    }

    /** 删除按钮操作 */
    const handleDelete = async (row ? : TreatmentUserVo) => {
        const _ids = row ?.id || ids.value;
        await proxy ?.$modal.confirm('是否确认删除门诊患者编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
        await delTreatmentUser(_ids);
        proxy ?.$modal.msgSuccess("删除成功");
        await getList();
    }

    /** 导出按钮操作 */
    const handleExport = () => {
        proxy ?.download('workbench/treatmentUser/export', {
            ...queryParams.value
        }, `user_${new Date().getTime()}.xlsx`)
    }

    const getStatusBarClass = (patient) => {
        if (patient.treatmentUserStatus === '0') {
            return 'need-intervention'
        }
        return 'not-checked';
    };

    const getStatusText = (patient) => {
        if (patient.treatmentUserStatus === '0') {
            return '需进行营养干预'
        }
        if (patient.treatmentUserStatus === '1') {
            return '已过复筛日'
        }
        if (patient.treatmentUserStatus === '2') {
            return '待筛查'
        }
        if (patient.treatmentUserStatus === '3') {
            return '未筛查'
        }
        if (patient.treatmentUserStatus === '4') {
            return '已筛查'
        }
        if (patient.treatmentUserStatus === '5') {
            return '复筛提醒'
        }
        if (patient.treatmentUserStatus === '6') {
            return '今日复筛'
        }
        return '';
    };

    const getAge = (birthday) => {
        if (!birthday) return 0;
        const birthDate = new Date(birthday);
        const today = new Date();
        let age = today.getFullYear() - birthDate.getFullYear();
        if (today.getMonth() < birthDate.getMonth() || (today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
    };

    const getMonths = (birthday) => {
        if (!birthday) return 0;
        const birthDate = new Date(birthday);
        const today = new Date();
        const months = (today.getFullYear() - birthDate.getFullYear()) * 12 +
            (today.getMonth() - birthDate.getMonth());
        return months % 12;
    };
    onMounted(() => {
        getList();
        getDeptList(); // 初始化时加载部门数据
        getWardList(); // 初始化时加载病区数据
    });

    const detailData = ref({});
    const toPatients = (patient: TreatmentUserVo) => {
        router.push({
            path: '/patients/medicalRecord',
            query: {
                id: patient.id,
                type: patient.type,
                treatName: patient.treatName,
                outpatientNo: patient.outpatientNo
            }
        });
    };
</script>
<style scoped>
    .item {
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 4px;
        transition: all 0.3s;
    }

    .item:hover {
        background-color: #f5f5f5;
    }

    .active-tab {
        font-weight: 300;
        /* 激活标签文字加粗 */
        border-bottom: 6px solid var(--el-color-primary);
        padding-bottom: 6px;
        /* 调整下划线间距 */
    }

    .active-tab .el-badge__content {
        background-color: white;
        color: var(--el-color-primary);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }

    .word-count {
        text-align: right;
        font-size: 12px;
        color: #999;
        margin-top: 4px;
    }

    .patient-cards-container {
        margin-top: 20px;
    }

    .patient-card {
        margin-bottom: 20px;
        border: 1px solid #e4e7ed;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        height: 100%;
    }

    .patient-card:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .patient-status-bar {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
        writing-mode: vertical-lr;
        text-orientation: upright;
        letter-spacing: 4px;
        text-align: center;
        padding: 10px 0;
    }

    .patient-status-bar.need-intervention {
        background-color: #ff4949;
    }

    .patient-status-bar.not-checked {
        background-color: #409eff;
    }

    .patient-info {
        padding: 15px 15px 15px 42px;
        margin-left: 32px;
    }

    .patient-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .patient-name-age {
        display: flex;
        align-items: center;
        gap: 60px;
    }

    .patient-name {
        font-size: 18px;
        font-weight: bold;
    }

    .patient-age {
        font-size: 18px;
        color: #606266;
        white-space: nowrap;
    }

    .gender-icon {
        font-size: 25px;
        font-weight: bold;
    }

    .gender-icon.female {
        color: #ff4949;
    }

    .gender-icon.male {
        color: #409eff;
    }

    .patient-detail {
        margin: 8px 0;
        font-size: 14px;
        color: #606266;
    }

    .detail-label {
        color: #909399;
        margin-right: 4px;
        font-size: 16px;
    }

    .evaluation-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;
        font-size: 16px;
        position: relative;
        min-height: 24px;
    }

    .evaluation-score {
        flex: 1;
        font-size: 16px;
    }

    .evaluation-status {
        padding: 2px 8px;
        border-radius: 4px;
        position: absolute;
        right: 0;
        font-size: 16px;
    }

    .evaluation-status.evaluated {
        color: #67c23a;
        background-color: #f0f9eb;
    }

    .evaluation-status.not-evaluated {
        color: #909399;
        background-color: #f4f4f5;
    }

    .status-text {
        writing-mode: vertical-lr;
        text-orientation: mixed;
        white-space: nowrap;
        color: #fff;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .search-form {
        margin-bottom: 20px;
    }

    .search-form .el-form-item {
        margin-bottom: 18px;
        margin-right: 18px;
    }

    .search-form .el-input,
    .search-form .el-select,
    .search-form .el-tree-select {
        width: 200px;
    }

    .search-form .el-button {
        margin-left: 10px;
    }

    .status-tabs {
        display: flex;
        border-bottom: 1px solid #e4e7ed;
        margin-bottom: 20px;
        padding: 0 25px;
    }

    .tab-item {
        position: relative;
        padding: 0 20px 16px;
        font-size: 22px;
        cursor: pointer;
        color: #606266;
        margin-right: 32px;
    }

    .tab-item.active {
        color: var(--el-color-primary);
        font-weight: 500;
    }

    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: var(--el-color-primary);
        border-radius: 3px 3px 0 0;
    }

    .tab-badge {
        position: absolute;
        top: -8px;
        right: 0;
        transform: translateX(50%);
    }

    .tab-badge :deep(.el-badge__content) {
        background-color: #ff4949;
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 0;
        color: #909399;
    }

    .empty-state img {
        width: 160px;
        height: 160px;
        margin-bottom: 16px;
    }
</style>