<template>
|
<div class="scale-wrap">
|
<div class="scale-title">更年期评定量表（MRS）</div>
|
|
<!-- 纸质表表头：患者基本信息 -->
|
<el-descriptions :column="3" border size="small" class="scale-head">
|
<el-descriptions-item label="姓名">{{ patient.name || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="性别">{{ patient.sex || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="年龄">{{ patient.age || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="科室">{{ patient.dept || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="临床诊断">{{ patient.diagnosis || "-" }}</el-descriptions-item>
|
<el-descriptions-item label="评估日期">
|
<el-date-picker v-if="editing" v-model="local.date" value-format="yyyy-MM-dd" size="mini" style="width:160px" placeholder="选择日期" />
|
<span v-else>{{ local.date || "-" }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="scale-tip">指导语：请根据您近 1 个月的情况，对下列各项症状的严重程度进行评分（0 分 = 无症状，4 分 = 十分严重）。</div>
|
|
<!-- 纸质表主体：症状条目 + 0~4 打分格 -->
|
<el-table :data="items" border size="small" class="mrs-table">
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column prop="label" label="症状" min-width="220" />
|
<el-table-column label="0 无症状" align="center" width="90">
|
<template slot-scope="scope"><el-radio v-if="editing" v-model="local[scope.row.key]" :label="0"> </el-radio><span v-else>{{ local[scope.row.key] === 0 ? "✓" : "" }}</span></template>
|
</el-table-column>
|
<el-table-column label="1 轻微" align="center" width="90">
|
<template slot-scope="scope"><el-radio v-if="editing" v-model="local[scope.row.key]" :label="1"> </el-radio><span v-else>{{ local[scope.row.key] === 1 ? "✓" : "" }}</span></template>
|
</el-table-column>
|
<el-table-column label="2 中等" align="center" width="90">
|
<template slot-scope="scope"><el-radio v-if="editing" v-model="local[scope.row.key]" :label="2"> </el-radio><span v-else>{{ local[scope.row.key] === 2 ? "✓" : "" }}</span></template>
|
</el-table-column>
|
<el-table-column label="3 严重" align="center" width="90">
|
<template slot-scope="scope"><el-radio v-if="editing" v-model="local[scope.row.key]" :label="3"> </el-radio><span v-else>{{ local[scope.row.key] === 3 ? "✓" : "" }}</span></template>
|
</el-table-column>
|
<el-table-column label="4 十分严重" align="center" width="100">
|
<template slot-scope="scope"><el-radio v-if="editing" v-model="local[scope.row.key]" :label="4"> </el-radio><span v-else>{{ local[scope.row.key] === 4 ? "✓" : "" }}</span></template>
|
</el-table-column>
|
<el-table-column label="得分" align="center" width="70">
|
<template slot-scope="scope">{{ Number(local[scope.row.key]) || 0 }}</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 结果 -->
|
<el-descriptions :column="3" border size="small" class="scale-result">
|
<el-descriptions-item label="MRS 总分"><b :class="levelClass">{{ totalScore }}</b> 分</el-descriptions-item>
|
<el-descriptions-item label="程度">{{ severity }}</el-descriptions-item>
|
<el-descriptions-item label="评分人员">
|
<el-input v-if="editing" v-model="local.evaluator" size="mini" style="width:160px" placeholder="请输入" />
|
<span v-else>{{ local.evaluator || "-" }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<div class="mrs-range">程度分级：0~4 无症状/极轻微，5~8 轻度，9~15 中度，≥16 重度</div>
|
</div>
|
</template>
|
|
<script>
|
const MRS_ITEMS = [
|
{ key: "mrs_0", label: "1. 燥热、流汗" },
|
{ key: "mrs_1", label: "2. 心脏不适" },
|
{ key: "mrs_2", label: "3. 睡眠失常" },
|
{ key: "mrs_3", label: "4. 情绪低落" },
|
{ key: "mrs_4", label: "5. 易怒" },
|
{ key: "mrs_5", label: "6. 焦虑" },
|
{ key: "mrs_6", label: "7. 身体或精神疲惫" },
|
{ key: "mrs_7", label: "8. 性生活问题" },
|
{ key: "mrs_8", label: "9. 膀胱不适" },
|
{ key: "mrs_9", label: "10. 阴道干涩" },
|
{ key: "mrs_10", label: "11. 关节和肌肉不适" },
|
];
|
|
const KEYS = MRS_ITEMS.map((i) => i.key);
|
|
export default {
|
name: "MRSScoreTable",
|
props: {
|
value: { type: Object, default: () => ({}) },
|
patient: { type: Object, default: () => ({}) },
|
editing: Boolean,
|
},
|
data() {
|
return { items: MRS_ITEMS, local: this.normalize(this.value) };
|
},
|
computed: {
|
totalScore() { return KEYS.reduce((s, k) => s + (Number(this.local[k]) || 0), 0); },
|
severity() {
|
const t = this.totalScore;
|
if (t <= 4) return "无症状/极轻微";
|
if (t <= 8) return "轻度";
|
if (t <= 15) return "中度";
|
return "重度";
|
},
|
levelClass() {
|
const t = this.totalScore;
|
return t <= 4 ? "lv-good" : t <= 8 ? "lv-mid" : t <= 15 ? "lv-warn" : "lv-bad";
|
},
|
},
|
watch: {
|
value: {
|
deep: true,
|
handler(v) {
|
const n = this.normalize(v);
|
if (JSON.stringify(n) !== JSON.stringify(this.local)) this.local = n;
|
},
|
},
|
local: {
|
deep: true,
|
handler(v) {
|
const out = this.buildOut(v);
|
if (JSON.stringify(out) !== JSON.stringify(this.value)) this.$emit("input", out);
|
},
|
},
|
},
|
methods: {
|
normalize(v) {
|
const src = v || {};
|
const out = { date: src.date || "", evaluator: src.evaluator || "" };
|
KEYS.forEach((k) => { out[k] = Number(src[k]) || 0; });
|
return out;
|
},
|
buildOut(v) {
|
return Object.assign({}, v, { mrsTotal: this.totalScore, mrsSeverity: this.severity });
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.scale-title { margin-bottom: 10px; font-size: 16px; font-weight: 700; text-align: center; color: #303133; }
|
.scale-head { margin-bottom: 10px; }
|
.scale-tip { margin-bottom: 10px; padding: 6px 10px; font-size: 13px; color: #606266; line-height: 1.6; background: #f8f9fb; border-left: 3px solid #c0c4cc; }
|
.mrs-table { margin-bottom: 12px; }
|
.scale-result { margin-top: 6px; }
|
.mrs-range { margin-top: 8px; font-size: 12px; color: #909399; }
|
.lv-good { color: #67c23a; }
|
.lv-mid { color: #409eff; }
|
.lv-warn { color: #e6a23c; }
|
.lv-bad { color: #f56c6c; }
|
</style>
|
