青岛维护

WXL

3 天以前 7f67f2e6fbb7d47249fef0905a40a66f13ae2f2b

 src/views/business/GetWitness/GetWitnessInfo.vue

@@ -1,129 +1,113 @@
<template>
  <div class="organ-procurement-detail">
    <case-basic-info :case-id="caseId" :show-attachment="true" />
    <case-basic-info :case-id="caseId" :show-attachment="true":column="3" />

    <!-- 基本信息 -->
    <el-card class="detail-card">
    <el-card class="detail-card paper-card">
      <div slot="header" class="clearfix">
        <span class="detail-title">器官获取基本信息</span>
      </div>

      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
      <el-form :model="form" ref="form" :rules="rules" label-width="120px" class="paper-form">
        <!-- 手术相关信息 -->
        <el-divider content-position="left">手术信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="手术医生" prop="operationdoctor">
              <el-input v-model="form.operationdoctor" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手术开始时间" prop="operationbegtime">
              <el-date-picker
                v-model="form.operationbegtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手术结束时间" prop="operationendtime">
              <el-date-picker
                v-model="form.operationendtime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-row">
          <el-form-item label="手术医生" prop="operationdoctor" class="col-1-3">
            <el-input v-model="form.operationdoctor" />
          </el-form-item>
          <el-form-item label="手术开始时间" prop="operationbegtime" class="col-1-3">
            <el-date-picker
              v-model="form.operationbegtime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="手术结束时间" prop="operationendtime" class="col-1-3">
            <el-date-picker
              v-model="form.operationendtime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="腹主动脉插管时间"
              prop="abdominalaortacannulatime"
            >
              <el-date-picker
                v-model="form.abdominalaortacannulatime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="腹主动脉灌注时间"
              prop="abdominalaortaperfusiontime"
            >
              <el-date-picker
                v-model="form.abdominalaortaperfusiontime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-row">
          <el-form-item
            label="腹主动脉插管时间"
            prop="abdominalaortacannulatime"
            class="col-1-3"
          >
            <el-date-picker
              v-model="form.abdominalaortacannulatime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item
            label="腹主动脉灌注时间"
            prop="abdominalaortaperfusiontime"
            class="col-1-3"
          >
            <el-date-picker
              v-model="form.abdominalaortaperfusiontime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="门静脉插管时间" prop="portalveincannulatime">
              <el-date-picker
                v-model="form.portalveincannulatime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门静脉灌注时间" prop="portalveinperfusiontime">
              <el-date-picker
                v-model="form.portalveinperfusiontime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-row">
          <el-form-item label="门静脉插管时间" prop="portalveincannulatime" class="col-1-3">
            <el-date-picker
              v-model="form.portalveincannulatime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="门静脉灌注时间" prop="portalveinperfusiontime" class="col-1-3">
            <el-date-picker
              v-model="form.portalveinperfusiontime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </div>

        <!-- 协调员信息 -->
        <el-divider content-position="left">协调员信息</el-divider>

        <el-row :gutter="20">
        <div class="form-row">
          <!-- <el-col :span="8">
            <el-form-item label="协调员姓名" prop="coordinatorName">
              <el-input v-model="form.coordinatorName" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="进手术室时间" prop="coordinatorInOperating">
              <el-date-picker
                v-model="form.coordinatorInOperating"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出手术室时间" prop="coordinatorOutOperating">
              <el-date-picker
                v-model="form.coordinatorOutOperating"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="进手术室时间" prop="coordinatorInOperating" class="col-1-3">
            <el-date-picker
              v-model="form.coordinatorInOperating"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="出手术室时间" prop="coordinatorOutOperating" class="col-1-3">
            <el-date-picker
              v-model="form.coordinatorOutOperating"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </div>

        <el-row :gutter="20">
        <div class="form-row">
          <!-- <el-col :span="8">
            <el-form-item label="协调员签字" prop="coordinatorSign">
              <el-input v-model="form.coordinatorSign" />
@@ -139,57 +123,45 @@
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="是否默哀缅怀" prop="isspendremember">
              <el-select v-model="form.isspendremember" 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" style="width: 100%">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="是否默哀缅怀" prop="isspendremember" class="col-1-3">
            <el-select v-model="form.isspendremember" style="width: 100%">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="恢复遗体仪容" prop="isrestoreremains" class="col-1-3">
            <el-select v-model="form.isrestoreremains" style="width: 100%">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </div>

        <!-- 负责人信息 -->
        <el-divider content-position="left">负责人信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="负责人姓名" prop="responsibleusername">
              <el-input v-model="form.responsibleusername" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="协调员一" prop="coordinatedusernameo">
              <el-input v-model="form.coordinatedusernameo" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="协调员二" prop="coordinatedusernamet">
              <el-input v-model="form.coordinatedusernamet" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-row">
          <el-form-item label="负责人姓名" prop="responsibleusername" class="col-1-3">
            <el-input v-model="form.responsibleusername" />
          </el-form-item>
          <el-form-item label="协调员一" prop="coordinatedusernameo" class="col-1-3">
            <el-input v-model="form.coordinatedusernameo" />
          </el-form-item>
          <el-form-item label="协调员二" prop="coordinatedusernamet" class="col-1-3">
            <el-input v-model="form.coordinatedusernamet" />
          </el-form-item>
        </div>

        <!-- 获取机构信息 -->
        <el-divider content-position="left">获取机构信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="获取机构名称" prop="gainhospitalname">
              <el-input
                v-model="form.gainhospitalname"
                placeholder="请输入获取机构名称"
              />
            </el-form-item>
          </el-col>
        <div class="form-row">
          <el-form-item label="获取机构名称" prop="gainhospitalname" class="col-1-3">
            <el-input
              v-model="form.gainhospitalname"
              placeholder="请输入获取机构名称"
            />
          </el-form-item>
          <!-- <el-col :span="8">
            <el-form-item label="捐献编号" prop="gainhospitalno">
              <el-input
@@ -198,7 +170,7 @@
              />
            </el-form-item>
          </el-col> -->
        </el-row>
        </div>
      </el-form>
    </el-card>

@@ -425,42 +397,30 @@
        <span class="detail-title">相关附件</span>
      </div>

      <!-- 上传区域（无分类选择，由Tab控制） -->
      <div class="upload-wrapper">
        <UploadAttachment
          ref="uploadAttachment"
          :file-list="attachmentFileList"
          :limit="attachmentLimit"
          :accept="attachmentAccept"
          :multiple="true"
          @change="handleAttachmentChange"
          @upload-success="handleUploadSuccess"
          @upload-error="handleUploadError"
          @remove="handleAttachmentRemove"
        />
        <div style="font-size:12px; color:#909399; margin-top:4px;">
          当前上传分类：<el-tag size="small" type="info">{{
            activeTab === "未分类" ? "未分类" : activeTab
          }}</el-tag>
          （切换 Tab 可改变上传分类）
        </div>
      </div>

      <!-- 附件列表 - 分类Tab展示，支持修改分类 -->
      <div class="attachment-list" v-if="attachments && attachments.length > 0">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane
            v-for="category in categories"
            :key="category"
            :label="category + '(' + getCategoryCount(category) + ')'"
            :name="category"
          >
            <el-table
              :data="getCategoryFiles(category)"
              style="width: 100%"
              size="small"
              border
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane
          v-for="category in categories"
          :key="category"
          :label="category + '(' + getCategoryCount(category) + ')'"
          :name="category"
        >
          <div style="margin-bottom: 10px; text-align: right;">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              @click="openUploadDialog(category)"
            >
              添加附件
            </el-button>
          </div>
          <el-table
            :data="getCategoryFiles(category)"
            style="width: 100%"
            size="small"
            border
          >
              <el-table-column label="文件名" min-width="180">
                <template #default="scope">
                  <i
@@ -521,15 +481,15 @@
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 无附件时显示 -->
      <div v-else style="text-align:center; padding:20px; color:#909399;">
        暂无附件，请上传
      </div>
          </el-table>
          <div
            v-if="getCategoryFiles(category).length === 0"
            style="text-align:center; padding:20px; color:#909399;"
          >
            暂无附件
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div style="text-align: center; margin: 30px 0;">
      <el-button type="primary" @click="handleSave" :loading="saveLoading">
@@ -631,45 +591,68 @@
      </div>
    </el-dialog>

    <!-- 文件预览弹窗 -->
    <!-- 上传对话框 -->
    <el-dialog
      :title="filePreviewTitle"
      :visible.sync="filePreviewVisible"
      width="800px"
      @close="filePreviewVisible = false"
      :title="`上传${currentUploadCategory}附件`"
      :visible.sync="uploadDialogVisible"
      width="480px"
      :close-on-click-modal="false"
    >
      <div v-if="currentPreviewFile">
        <div v-if="currentPreviewFile.fileType === 'image'">
          <img
            :src="currentPreviewFile.fileUrl"
            style="max-width: 100%; max-height: 500px;"
          />
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        drag
        :action="uploadAction"
        :headers="headers"
        multiple
        :file-list="tempFileList"
        :before-upload="beforeUpload"
        :on-change="handleFileChange"
        :on-remove="handleTempRemove"
        :on-success="handleUploadSuccess"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          支持上传pdf、jpg、png、doc、docx格式文件，单个文件不超过10MB
        </div>
        <div v-else-if="currentPreviewFile.fileType === 'pdf'">
          <iframe
            :src="currentPreviewFile.fileUrl"
            width="100%"
            height="500px"
          ></iframe>
        </div>
        <div v-else>
          <p>不支持预览此文件类型，请下载查看</p>
        </div>
      </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submitUpload"
          :loading="uploadLoading"
          :disabled="tempFileList.length === 0"
        >
          确认上传
        </el-button>
      </span>
    </el-dialog>

    <!-- 文件预览弹窗 -->
    <FilePreviewDialog
      :visible="previewVisible"
      :file="currentPreviewFile"
      @close="previewVisible = false"
      @download="handleDownload"
    />
  </div>
</template>

<script>
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
import UploadAttachment from "@/components/UploadAttachment";
import FilePreviewDialog from "@/components/FilePreviewDialog";
import CaseBasicInfo from "@/components/CaseBasicInfo";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";

export default {
  name: "OrganProcurementDetail",
  components: {
    UploadAttachment,
    FilePreviewDialog,
    CaseBasicInfo
  },
  dicts: [
@@ -779,19 +762,22 @@
      },
      // 附件数据
      attachments: [],
      attachmentFileList: [],
      // 附件相关配置
      attachmentLimit: 10,
      attachmentAccept:
        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
      // 上传相关
      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      },
      uploadDialogVisible: false,
      uploadLoading: false,
      tempFileList: [],
      currentUploadCategory: "",
      // 编辑对话框
      editDialogVisible: false,
      currentRecord: {},
      currentEditIndex: -1,
      // 文件预览相关
      filePreviewVisible: false,
      currentPreviewFile: null,
      filePreviewTitle: ""
      previewVisible: false,
      currentPreviewFile: null
    };
  },
  computed: {
@@ -847,22 +833,6 @@
    // 获取器官字典
    organDict() {
      return this.dict.type.sys_Organ || [];
    }
  },
  watch: {
    // 监听附件数据变化
    attachments: {
      handler(newAttachments) {
        this.attachmentFileList = newAttachments.map(item => ({
          uid: item.id || Math.random(),
          name: item.fileName,
          fileSize: item.fileSize,
          url: item.path || item.fileUrl,
          uploadTime: item.uploadTime,
          status: "success"
        }));
      },
      deep: true
    }
  },
  created() {
@@ -934,19 +904,8 @@
              fileType: item.fileType || "" // 默认空字符串表示未分类
            }));
            this.form.attachments = this.attachments;
            // 同步 attachmentFileList
            this.attachmentFileList = this.attachments.map(item => ({
              uid: item.id || Math.random(),
              name: item.fileName,
              url: item.path || item.fileUrl,
              fileSize: item.fileSize,
              uploadTime: item.uploadTime,
              status: "success",
              raw: item
            }));
          } else {
            this.attachments = [];
            this.attachmentFileList = [];
          }

          // 处理捐献器官字段
@@ -1382,133 +1341,157 @@
      this.handleConfirmProcurement();
    },

    // 附件相关方法
    /** 附件变化处理 */
    handleAttachmentChange(fileList) {
      this.attachmentFileList = fileList;
    // ===== 附件相关方法 =====
    // 打开上传对话框
    openUploadDialog(category) {
      this.currentUploadCategory = category;
      this.tempFileList = [];
      this.uploadDialogVisible = true;
      this.$nextTick(() => {
        if (this.$refs.uploadRef) {
          this.$refs.uploadRef.clearFiles();
        }
      });
    },

    /** 附件移除处理 */
   handleAttachmentRemove(file) {
  // 直接调用新的删除方法
  if (file.raw) {
    this.handleRemoveAttachmentByFile(file.raw);
  } else if (file.url) {
    const target = this.attachments.find(
      item => item.path === file.url || item.fileUrl === file.url
    );
    if (target) {
      this.handleRemoveAttachmentByFile(target);
    }
  }
},

    /** 上传成功处理 */
    handleUploadSuccess({ file, fileList, response }) {
  if (response.code === 200) {
    // 根据当前激活的 Tab 决定分类（未分类 Tab 对应空字符串）
    const category = this.activeTab === '未分类' ? '' : this.activeTab;
    const attachmentObj = {
      fileName: file.name,
      path: response.fileUrl || file.url,
      fileUrl: response.fileUrl || file.url,
      fileType: category,                    // 关键：记录分类
      fileSize: file.size,
      uploadTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
    };

    if (!Array.isArray(this.attachments)) {
      this.attachments = [];
    }
    this.attachments.push(attachmentObj);
    this.attachmentFileList = fileList;
    this.$message.success('文件上传成功');
  }
},
// 获取某分类的文件数量
getCategoryCount(category) {
  return this.attachments.filter(item => {
    const type = item.fileType || '';
    if (category === '未分类') {
      return !this.presetCategories.includes(type);
    }
    return type === category;
  }).length;
},

// 获取某分类的文件列表
getCategoryFiles(category) {
  return this.attachments.filter(item => {
    const type = item.fileType || '';
    if (category === '未分类') {
      return !this.presetCategories.includes(type);
    }
    return type === category;
  });
},

// 更新附件分类（下拉修改时触发）
updateAttachmentCategory(row, newVal) {
  const target = this.attachments.find(item => item === row);
  if (target) {
    target.fileType = newVal; // 可能为空字符串
    // 同步更新 attachmentFileList
    const fileItem = this.attachmentFileList.find(
      f => f.raw === row || f.url === row.fileUrl
    );
    if (fileItem) {
      fileItem.raw.fileType = newVal;
      fileItem.fileType = newVal || '未分类';
    }
    // 如果当前激活的tab没有文件了，自动切换到第一个有文件的tab
    const currentTabHasFiles = this.getCategoryFiles(this.activeTab).length > 0;
    if (!currentTabHasFiles) {
      const firstCategory = this.categories[0];
      if (firstCategory) this.activeTab = firstCategory;
    }
  }
},

// 按文件对象删除（用于表格中的删除按钮）
handleRemoveAttachmentByFile(file) {
  const index = this.attachments.findIndex(item => item === file);
  if (index > -1) {
    this.attachments.splice(index, 1);
    // 同步删除 attachmentFileList
    const fileIndex = this.attachmentFileList.findIndex(
      f => f.raw === file || f.url === file.fileUrl
    );
    if (fileIndex > -1) {
      this.attachmentFileList.splice(fileIndex, 1);
    }
    this.$message.success('附件删除成功');
  }
},
    /** 上传错误处理 */
    handleUploadError({ file, fileList, error }) {
      console.error("附件上传失败:", error);
      this.$message.error("文件上传失败，请重试");
    // 上传前校验
    beforeUpload(file) {
      const allowedTypes = [
        "application/pdf",
        "image/jpeg",
        "image/png",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      ];
      const maxSize = 10 * 1024 * 1024;
      const isTypeOk =
        allowedTypes.includes(file.type) ||
        file.name.endsWith(".pdf") ||
        file.name.endsWith(".jpg") ||
        file.name.endsWith(".jpeg") ||
        file.name.endsWith(".png") ||
        file.name.endsWith(".doc") ||
        file.name.endsWith(".docx");
      if (!isTypeOk) {
        this.$message.error("文件格式不支持，请上传pdf、jpg、png、doc或docx格式文件");
        return false;
      }
      if (file.size > maxSize) {
        this.$message.error("文件大小不能超过10MB");
        return false;
      }
      return true;
    },

    /** 手动删除附件 */
    handleRemoveAttachment(index) {
      this.attachments.splice(index, 1);
      this.attachmentFileList.splice(index, 1);
      this.$message.success("附件删除成功");
    // 文件选择变化
    handleFileChange(file, fileList) {
      this.tempFileList = fileList;
    },

    /** 文件预览 */
    // 临时移除
    handleTempRemove(file, fileList) {
      this.tempFileList = fileList;
    },

    // 上传成功处理
    handleUploadSuccess(response, file, fileList) {
      if (response.code !== 200) {
        this.$message.error(response.msg || "上传失败");
        return;
      }
      // 未分类对应空字符串，与展示/保存逻辑一致
      const category = this.currentUploadCategory === "未分类" ? "" : this.currentUploadCategory;
      const attachmentObj = {
        fileName: file.name,
        path: response.fileUrl || response.url || response.data || file.url,
        fileUrl: response.fileUrl || response.url || response.data || file.url,
        fileType: category,
        fileSize: file.size,
        uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
      };
      if (!Array.isArray(this.attachments)) {
        this.attachments = [];
      }
      this.attachments.push(attachmentObj);
      this.$message.success("文件上传成功");
      this.uploadLoading = false;
      this.uploadDialogVisible = false;
      this.tempFileList = [];
    },

    // 提交上传
    submitUpload() {
      if (this.tempFileList.length === 0) {
        this.$message.warning("请先选择要上传的文件");
        return;
      }
      this.uploadLoading = true;
      this.$refs.uploadRef.submit();
    },

    // 获取某分类的文件数量
    getCategoryCount(category) {
      return this.attachments.filter(item => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      }).length;
    },

    // 获取某分类的文件列表
    getCategoryFiles(category) {
      return this.attachments.filter(item => {
        const type = item.fileType || "";
        if (category === "未分类") {
          return !this.presetCategories.includes(type);
        }
        return type === category;
      });
    },

    // 更新附件分类（下拉修改时触发）
    updateAttachmentCategory(row, newVal) {
      const target = this.attachments.find(item => item === row);
      if (target) {
        target.fileType = newVal;
        const currentTabHasFiles = this.getCategoryFiles(this.activeTab).length > 0;
        if (!currentTabHasFiles) {
          const firstCategory = this.categories[0];
          if (firstCategory) this.activeTab = firstCategory;
        }
      }
    },

    // 按文件对象删除（用于表格中的删除按钮）
    handleRemoveAttachmentByFile(file) {
      this.$confirm("确定要删除这个附件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const index = this.attachments.findIndex(item => item === file);
          if (index > -1) {
            this.attachments.splice(index, 1);
            this.$message.success("附件删除成功");
          }
        })
        .catch(() => {});
    },

    // 文件预览
    handlePreview(file) {
      this.currentPreviewFile = {
        fileName: file.fileName,
        fileUrl: file.path || file.fileUrl,
        fileType: this.getFileType(file.fileName)
      };
      this.filePreviewTitle = file.fileName;
      this.filePreviewVisible = true;
      this.previewVisible = true;
    },

    /** 文件下载 */
    // 文件下载
    handleDownload(file) {
      const fileUrl = file.path || file.fileUrl;
      const fileName = file.fileName;
@@ -1767,4 +1750,105 @@
    margin-bottom: 10px;
  }
}

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

.paper-form {
  border-left: 1px solid #d0d3db;
  background: #fff;
  /* 超宽屏限制表单最大宽度，右侧留白，避免字段分布过开 */
  max-width: 1400px;
}

.paper-form >>> .form-row {
  display: flex;
  width: 100%;
  border-top: 1px solid #d0d3db;
  /* 上移1px与上一行的border-bottom重叠，两行之间只显示一条1px细线 */
  margin-top: -1px;
}
.paper-form >>> .form-row:first-child {
  margin-top: 0;
}

/* 行尾空白填充：不满整行的右侧自动补一个空白格子，网格保持闭合（右侧适当留白） */
.paper-form >>> .form-row::after {
  content: "";
  flex: 1 1 0;
  min-height: 42px;
  background: linear-gradient(to left, #d0d3db 1px, transparent 1px),
    linear-gradient(to top, #d0d3db 1px, transparent 1px);
  background-color: #fff;
}

.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 150px;
  width: 150px !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: nowrap;
}
.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;
}

/* 控件宽度适中，不铺满整格（内容短时输入框不再拉得很长） */
.paper-form >>> .el-form-item__content .el-input,
.paper-form >>> .el-form-item__content .el-select,
.paper-form >>> .el-form-item__content .el-cascader {
  width: 220px;
  max-width: 100%;
}
.paper-form >>> .el-form-item__content .el-date-editor {
  width: 240px;
  max-width: 100%;
}
.paper-form >>> .el-form-item__content .el-range-editor {
  width: 360px;
  max-width: 100%;
}
</style>