测试完成

WXL (wul)

5 天以前 39c8b288ec8294e026459dfb1955f0bbc49ebb52

 src/views/patient/archives/maternalHealth/MRSScoreTable.vue

@@ -1,37 +1,139 @@
<template>
  <div>
    <el-table :data="items" border size="small">
      <el-table-column prop="item" label="条目" width="220" />
      <el-table-column label="评分" align="center" width="120">
        <template slot-scope="scope">
          <el-select v-if="editing" v-model="scope.row.score" size="small">
            <el-option v-for="s in scoreOptions" :key="s" :label="s" :value="s" />
          </el-select>
          <span v-else>{{ scope.row.score }}</span>
        </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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
    <div style="margin-top:10px;font-size:14px">MRS总分：{{ totalScore }}</div>

    <!-- 结果 -->
    <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:()=>({}) }, editing:Boolean },
  data(){ return { scoreOptions:[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1] }; },
  computed:{
    items(){
      const names=["潮热出汗","心脏不适","睡眠障碍","情绪抑郁","易激惹","焦虑","体力/精力下降","性功能","泌尿系症状","阴道干涩","关节肌肉不适"];
      return names.map((n,i)=>({ item:n, key:'mrs_'+i, score:this.value['mrs_'+i]||0 }));
    },
    totalScore(){ return this.items.reduce((s,i)=>s+i.score,0).toFixed(1); },
  name: "MRSScoreTable",
  props: {
    value: { type: Object, default: () => ({}) },
    patient: { type: Object, default: () => ({}) },
    editing: Boolean,
  },
  watch:{
    items:{ deep:true, handler(v){
      const obj={...this.value, mrsTotal:this.totalScore};
      v.forEach(i=>{ obj[i.key]=i.score; });
      this.$emit('input',obj);
    }},
  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>