各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 src/views/business/decide/DecideInfo.vue

@@ -1,6 +1,6 @@
<template>
  <div class="death-judgment-detail">
    <case-basic-info :case-id="caseId" :show-attachment="true" />
    <case-basic-info :case-id="caseId" :show-attachment="true":column="3" />
    <!-- 公共信息模块（独立显示） -->

    <!-- 判定类型标签页 -->
@@ -51,29 +51,12 @@
      </el-form>
    </el-card> -->
    <!-- 脑死亡判定模块 -->
    <el-card v-if="activeJudgmentType === 'brain'" class="detail-card">
    <el-card v-if="activeJudgmentType === 'brain'" class="detail-card paper-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">脑死亡判定信息</span>

        <el-button
          v-if="isEdit"
          style="float: right; margin-left: 10px;"
          type="success"
          @click="handleSave"
          :loading="saveLoading"
        >
          保存信息
        </el-button>
        <el-button
          v-if="isEdit"
          style="float: right; margin-left: 10px;"
          type="success"
          @click="accomplish"
          :loading="saveLoading"
        >
          完成判定
        </el-button>
        <el-button
          v-else
          v-if="!isEdit"
          style="float: right; margin-left: 10px;"
          type="primary"
          @click="handleEdit"
@@ -82,38 +65,63 @@
        </el-button>
      </div>

      <el-form :model="form" ref="brainForm" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="死亡原因" prop="deathreason">
              <el-input v-model="form.deathreason" :readonly="!isEdit" />
            </el-form-item>
          </el-col>
        </el-row>
      <el-form :model="form" ref="brainForm" :rules="rules" label-width="120px" class="paper-form">
        <div class="form-row">
          <el-form-item label="死亡原因" prop="deathreason" class="col-1-3">
            <el-input v-model="form.deathreason" :readonly="!isEdit" />
          </el-form-item>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="死亡时间" prop="deathtime">
              <el-date-picker
                v-model="form.deathtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
                :disabled="!isEdit"
        <div class="form-row">
          <el-form-item label="死亡时间" prop="deathtime" class="col-1-3">
            <el-date-picker
              v-model="form.deathtime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              :disabled="!isEdit"
            />
          </el-form-item>
          <el-form-item label="判定医生一" prop="deathjudgedocto" class="col-1-3">
            <el-input v-model="form.deathjudgedocto" :readonly="!isEdit" />
          </el-form-item>
          <el-form-item label="判定医生二" prop="deathjudgedoctt" class="col-1-3">
            <el-input v-model="form.deathjudgedoctt" :readonly="!isEdit" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="其他判定医生" class="col-full">
            <div
              v-for="(doctor, index) in brainExtraDoctors"
              :key="index"
              style="display: flex; align-items: center; margin-bottom: 8px;"
            >
              <el-input
                v-model="brainExtraDoctors[index]"
                placeholder="请输入医生姓名"
                style="flex: 1; margin-right: 10px;"
                :readonly="!isEdit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="判定医生一" prop="deathjudgedocto">
              <el-input v-model="form.deathjudgedocto" :readonly="!isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="判定医生二" prop="deathjudgedoctt">
              <el-input v-model="form.deathjudgedoctt" :readonly="!isEdit" />
            </el-form-item>
          </el-col>
        </el-row>
              <el-button
                v-if="isEdit"
                type="danger"
                icon="el-icon-minus"
                circle
                size="mini"
                @click="removeBrainDoctor(index)"
              />
            </div>
            <el-button
              v-if="isEdit"
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="addBrainDoctor"
            >
              添加医生
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- 脑死亡评估表附件 -->
@@ -235,7 +243,7 @@
    </el-card>

    <!-- 心死亡判定模块 -->
    <el-card v-else class="detail-card">
    <el-card v-else class="detail-card paper-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">心死亡判定信息</span>
        <el-button
@@ -257,44 +265,69 @@
        </el-button>
      </div>

      <el-form :model="form" ref="heartForm" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="心死亡原因" prop="heartdeathreason">
              <el-input v-model="form.heartdeathreason" :readonly="!isEdit" />
            </el-form-item>
          </el-col>
        </el-row>
      <el-form :model="form" ref="heartForm" :rules="rules" label-width="120px" class="paper-form">
        <div class="form-row">
          <el-form-item label="心死亡原因" prop="heartdeathreason" class="col-1-3">
            <el-input v-model="form.heartdeathreason" :readonly="!isEdit" />
          </el-form-item>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="心死亡时间" prop="heartdeathtime">
              <el-date-picker
                v-model="form.heartdeathtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
                :disabled="!isEdit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="判定医生一" prop="heartdeathjudgedocto">
        <div class="form-row">
          <el-form-item label="心死亡判定完成时间" prop="heartdeathtime" class="col-1-3">
            <el-date-picker
              v-model="form.heartdeathtime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              :disabled="!isEdit"
            />
          </el-form-item>
          <el-form-item label="判定医生一" prop="heartdeathjudgedocto" class="col-1-3">
            <el-input
              v-model="form.heartdeathjudgedocto"
              :readonly="!isEdit"
            />
          </el-form-item>
          <el-form-item label="判定医生二" prop="heartdeathjudgedoctt" class="col-1-3">
            <el-input
              v-model="form.heartdeathjudgedoctt"
              :readonly="!isEdit"
            />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="其他判定医生" class="col-full">
            <div
              v-for="(doctor, index) in heartExtraDoctors"
              :key="index"
              style="display: flex; align-items: center; margin-bottom: 8px;"
            >
              <el-input
                v-model="form.heartdeathjudgedocto"
                v-model="heartExtraDoctors[index]"
                placeholder="请输入医生姓名"
                style="flex: 1; margin-right: 10px;"
                :readonly="!isEdit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="判定医生二" prop="heartdeathjudgedoctt">
              <el-input
                v-model="form.heartdeathjudgedoctt"
                :readonly="!isEdit"
              <el-button
                v-if="isEdit"
                type="danger"
                icon="el-icon-minus"
                circle
                size="mini"
                @click="removeHeartDoctor(index)"
              />
            </el-form-item>
          </el-col>
        </el-row>
            </div>
            <el-button
              v-if="isEdit"
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="addHeartDoctor"
            >
              添加医生
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- 心死亡评估表附件 -->
@@ -414,7 +447,25 @@
        </el-tabs>
      </div>
    </el-card>

    <!-- 底部操作按钮 -->
    <div style="text-align: center; margin: 30px 0;">
      <el-button
        v-if="isEdit"
        type="primary"
        @click="handleSave"
        :loading="saveLoading"
      >
        保存信息
      </el-button>
      <el-button
        v-if="isEdit"
        type="success"
        @click="accomplish"
        :loading="saveLoading"
      >
        完成判定
      </el-button>
    </div>
    <!-- 上传对话框（脑死亡） -->
    <el-dialog
      :title="`上传${getCurrentBrainDeathTypeLabel}评估表`"
@@ -529,10 +580,11 @@
  data() {
    return {
      caseId: null,
      isEdit: false,
      isEdit: true,
      saveLoading: false,
      infoid: undefined,

      brainExtraDoctors: [], // 脑死亡其他判定医生
      heartExtraDoctors: [], // 心死亡其他判定医生
      // 判定类型标签
      activeJudgmentType: "brain", // 默认显示脑死亡
      // 预览相关
@@ -568,7 +620,7 @@
        responsibleuserid: "",
        responsibleusername: "",
        recordstate: "0",
        remark: ""
        extContent: ""
      },
      // 表单验证规则
      rules: {
@@ -588,7 +640,11 @@
          { required: false, message: "心死亡原因不能为空", trigger: "blur" }
        ],
        heartdeathtime: [
          { required: false, message: "心死亡时间不能为空", trigger: "change" }
          {
            required: false,
            message: "心死亡判定完成时间不能为空",
            trigger: "change"
          }
        ],
        heartdeathjudgedocto: [
          {
@@ -621,12 +677,14 @@
        { value: "3", label: "短潜伏期体感诱发电位评估表" },
        { value: "4", label: "经颅多普勒超声评估记录" },
        { value: "5", label: "卫健委脑损伤质控中心 - 临床综合评估表" },
        { value: "6", label: "UW评分表" }
        { value: "7", label: "AT前" },
        { value: "8", label: "AT后" },
        { value: "6", label: "UW评分表(脑死亡)" }
      ],
      // 心死亡评估表类型定义
      heartDeathAttachmentTypes: [
        { value: "heart_1", label: "心死亡判定表" },
        { value: "heart_2", label: "心电图评估表" }
        { value: "heart_2", label: "UW评分表(心死亡)" }
      ],

      // 附件列表数据
@@ -651,7 +709,7 @@
  created() {
    this.infoid = this.$route.query.infoid;
    this.caseId = this.infoid;
    this.isEdit = this.$route.query.isEdit === "true";

    this.activeJudgmentType = this.$route.query.type;
    // 从路由参数获取默认显示类型
    if (this.$route.query.judgmentType) {
@@ -667,7 +725,32 @@
      this.activeJudgmentType = tab.name;
      // 可以在这里添加其他切换逻辑
    },
    addBrainDoctor() {
      this.brainExtraDoctors.push("");
    },
    removeBrainDoctor(index) {
      this.brainExtraDoctors.splice(index, 1);
    },
    addHeartDoctor() {
      this.heartExtraDoctors.push("");
    },
    removeHeartDoctor(index) {
      this.heartExtraDoctors.splice(index, 1);
    },

    // 序列化额外医生列表为字符串（用中文逗号分隔）
    serializeExtraDoctors(list) {
      return list.filter(name => name && name.trim()).join("，");
    },

    // 从字符串解析出医生列表（按中文逗号拆分）
    parseExtraDoctors(str) {
      if (!str) return [];
      return str
        .split("，")
        .map(s => s.trim())
        .filter(s => s);
    },
    // 生成捐献者编号
    generateDonorNo() {
      const timestamp = Date.now().toString();
@@ -678,13 +761,8 @@
    async getDetail(infoid) {
      try {
        const response = await queryDathInfoBaseInfo({ infoid });
        let realData = {};

        if (response && response.data) {
          realData = response.data[0];
        } else if (response) {
          realData = response;
        }
        let realData = response?.data?.[0] || response || {};

        // 映射字段到表单
        this.form = {
@@ -703,7 +781,18 @@
        if (realData.rememberAnnex) {
          this.parseAttachmentData(realData.rememberAnnex, "brain");
        }

        if (realData.extContent) {
          const parts = realData.extContent.split(" | ");
          parts.forEach(part => {
            if (part.includes("脑死亡其他医生：")) {
              const doctorsStr = part.replace("脑死亡其他医生：", "");
              this.brainExtraDoctors = this.parseExtraDoctors(doctorsStr);
            } else if (part.includes("心死亡其他医生：")) {
              const doctorsStr = part.replace("心死亡其他医生：", "");
              this.heartExtraDoctors = this.parseExtraDoctors(doctorsStr);
            }
          });
        }
        // 解析心死亡附件信息
        if (realData.heartdeathjudgeannex) {
          this.parseAttachmentData(realData.heartdeathjudgeannex, "heart");
@@ -1097,13 +1186,32 @@
          this.saveLoading = true;

          try {
            // 构建额外医生字符串
            const brainExtraStr = this.serializeExtraDoctors(
              this.brainExtraDoctors
            );
            const heartExtraStr = this.serializeExtraDoctors(
              this.heartExtraDoctors
            );

            let extContent = this.form.extContent || "";
            // 如果已有备注，用 ' | ' 分隔；否则直接赋值
            if (brainExtraStr) {
              extContent +=
                (extContent ? " | " : "") + "脑死亡其他医生：" + brainExtraStr;
            }
            if (heartExtraStr) {
              extContent +=
                (extContent ? " | " : "") + "心死亡其他医生：" + heartExtraStr;
            }
            // 构建提交数据
            const submitData = {
              ...this.form,
              infoid: this.infoid,
              // 确保附件数据最新
              rememberAnnex: this.buildBrainDeathAttachmentJson(),
              heartdeathjudgeannex: this.buildHeartDeathAttachmentJson()
              rememberannex: this.buildBrainDeathAttachmentJson(),
              heartdeathjudgeannex: this.buildHeartDeathAttachmentJson(),
              extContent: extContent // 使用合并后的 extContent
            };
            if (submitData.state == 1 || !submitData.state) {
              submitData.state = 2;
@@ -1270,4 +1378,73 @@
:deep(.image-preview-dialog .el-message-box__content) {
  text-align: center;
}

/* ===== 纸质表格网格样式 ===== */
.paper-card >>> .el-card__body {
  padding: 16px;
}

.paper-form {
  border-left: 1px solid #d0d3db;
  background: #fff;
}

.paper-form >>> .form-row {
  display: flex;
  width: 100%;
  border-top: 1px solid #d0d3db;
}

.paper-form >>> .el-form-item {
  flex: 0 0 33.3333%;
  display: flex;
  margin: 0;
  background: #fff;
  border-right: 1px solid #d0d3db;
  border-bottom: 1px solid #d0d3db;
}
.paper-form >>> .el-form-item::after,
.paper-form >>> .el-form-item::before {
  display: none;
}

.paper-form >>> .col-1-3 { flex: 0 0 33.3333%; }
.paper-form >>> .col-half { flex: 0 0 50%; }
.paper-form >>> .col-2-3 { flex: 0 0 66.6666%; }
.paper-form >>> .col-full { flex: 0 0 100%; }

.paper-form >>> .el-form-item__label {
  flex: 0 0 120px;
  width: 120px !important;
  float: none;
  padding: 0 8px !important;
  background: #ecf5ff;
  border-right: 1px solid #d0d3db;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #2c3038;
  line-height: 1.3;
  white-space: normal;
  word-break: break-all;
}
.paper-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  color: #f56c6c;
  margin-right: 2px;
}

.paper-form >>> .el-form-item__content {
  flex: 1;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #fff;
  min-height: 42px;
  line-height: 1.4;
}
</style>