各表单布局调整

WXL

4 天以前 c4599aa279fd2f90b741608392e056fbae2282d5

 src/views/business/decide/DecideInfo.vue

@@ -1,7 +1,7 @@
<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" />
    <!-- 公共信息模块（独立显示） -->

    <!-- 判定类型标签页 -->
    <el-card class="type-card">
@@ -24,7 +24,7 @@
        </el-tab-pane>
      </el-tabs>
    </el-card>
<el-card class="detail-card common-info-card">
    <!-- <el-card class="detail-card common-info-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">公共信息</span>
      </div>
@@ -46,48 +46,17 @@
              <el-input v-model="form.gainhospitalname" :readonly="!isEdit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否默哀缅怀" prop="isspendremember">
              <el-select
                v-model="form.isspendremember"
                :disabled="!isEdit"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="恢复遗体仪容" prop="isrestoreremains">
              <el-select
                v-model="form.isrestoreremains"
                :disabled="!isEdit"
                style="width: 100%"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-card>
    </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-else
          v-if="!isEdit"
          style="float: right; margin-left: 10px;"
          type="primary"
          @click="handleEdit"
@@ -96,39 +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-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>

        <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>

      <!-- 脑死亡评估表附件 -->
@@ -250,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
@@ -272,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>

      <!-- 心死亡评估表附件 -->
@@ -429,9 +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}评估表`"
@@ -519,6 +553,13 @@
        </el-button>
      </div>
    </el-dialog>
    <!-- 附件预览 -->
    <FilePreviewDialog
      :visible="previewVisible"
      :file="currentPreviewFile"
      @close="previewVisible = false"
      @download="handleDownload"
    />
  </div>
</template>

@@ -530,21 +571,25 @@
} from "@/api/businessApi";
import { getToken } from "@/utils/auth";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import FilePreviewDialog from "@/components/FilePreviewDialog";

export default {
  name: "DeathJudgmentDetail",
  components: { CaseBasicInfo },
  components: { CaseBasicInfo, FilePreviewDialog },

  data() {
    return {
      caseId: null,
      isEdit: false,
      isEdit: true,
      saveLoading: false,
      infoid: undefined,

      brainExtraDoctors: [], // 脑死亡其他判定医生
      heartExtraDoctors: [], // 心死亡其他判定医生
      // 判定类型标签
      activeJudgmentType: "brain", // 默认显示脑死亡

      // 预览相关
      previewVisible: false,
      currentPreviewFile: null,
      // 表单数据
      form: {
        id: undefined,
@@ -575,7 +620,7 @@
        responsibleuserid: "",
        responsibleusername: "",
        recordstate: "0",
        remark: ""
        extContent: ""
      },
      // 表单验证规则
      rules: {
@@ -595,7 +640,11 @@
          { required: false, message: "心死亡原因不能为空", trigger: "blur" }
        ],
        heartdeathtime: [
          { required: false, message: "心死亡时间不能为空", trigger: "change" }
          {
            required: false,
            message: "心死亡判定完成时间不能为空",
            trigger: "change"
          }
        ],
        heartdeathjudgedocto: [
          {
@@ -628,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评分表(心死亡)" }
      ],

      // 附件列表数据
@@ -658,8 +709,8 @@
  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) {
      this.activeJudgmentType = this.$route.query.judgmentType;
@@ -674,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();
@@ -685,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 = {
@@ -710,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");
@@ -1017,37 +1099,82 @@
    },

    // 预览附件
    handlePreview(attachment) {
      if (attachment.fileName.endsWith(".pdf")) {
        window.open(attachment.fileUrl, "_blank");
      } else if (attachment.fileName.match(/\.(jpg|jpeg|png)$/i)) {
        this.$alert(
          `<img src="${attachment.fileUrl}" style="max-width: 100%;" alt="${attachment.fileName}">`,
          "图片预览",
          {
            dangerouslyUseHTMLString: true,
            customClass: "image-preview-dialog"
          }
        );
      } else {
        this.$message.info("该文件类型暂不支持在线预览，请下载后查看");
      }
    },
    handlePreview(file) {
      console.log(file, "file");

      this.currentPreviewFile = {
        fileName: file.fileName,
        fileUrl: file.path || file.fileUrl,
        fileType: this.getFileType(file.fileName)
      };
      this.previewVisible = true;
      // if (attachment.fileName.endsWith(".pdf")) {
      //   window.open(attachment.fileUrl, "_blank");
      // } else if (attachment.fileName.match(/\.(jpg|jpeg|png)$/i)) {
      //   this.$alert(
      //     `<img src="${attachment.fileUrl}" style="max-width: 100%;" alt="${attachment.fileName}">`,
      //     "图片预览",
      //     {
      //       dangerouslyUseHTMLString: true,
      //       customClass: "image-preview-dialog"
      //     }
      //   );
      // } else {
      //   this.$message.info("该文件类型暂不支持在线预览，请下载后查看");
      // }
    },
    getFileType(fileName) {
      if (!fileName) return "other";

      const extension = fileName
        .split(".")
        .pop()
        .toLowerCase();
      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
      const pdfTypes = ["pdf"];
      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];

      if (imageTypes.includes(extension)) return "image";
      if (pdfTypes.includes(extension)) return "pdf";
      if (officeTypes.includes(extension)) return "office";
      return "other";
    },
    // 下载附件
    handleDownload(attachment) {
      const link = document.createElement("a");
      link.href = attachment.fileUrl;
      link.download = attachment.fileName;
      link.click();
      this.$message.success(`开始下载: ${attachment.fileName}`);
    handleDownload(file) {
      const fileUrl = file.path || file.fileUrl;
      const fileName = file.fileName;

      if (fileUrl) {
        const link = document.createElement("a");
        link.href = fileUrl;
        link.download = fileName;
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.$message.success("开始下载文件");
      } else {
        this.$message.warning("文件路径不存在，无法下载");
      }
    },

    // 编辑信息
    handleEdit() {
      this.isEdit = true;
    },
    accomplish() {
      this.$confirm("是否确认完成该案例死亡判定全部信息？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.form.state = 3;
          this.handleSave();
        })

        .catch(() => {});
    },
    // 保存信息
    async handleSave() {
      // 根据当前标签选择验证规则
@@ -1059,14 +1186,36 @@
          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;
            }
            let response = null;

            if (submitData.id) {
@@ -1229,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>