| | |
| | | <template> |
| | | <div class="organ-utilization-detail"> |
| | | <case-basic-info :case-id="caseId" :show-attachment="true" /> |
| | | |
| | | <!-- 基本信息 --> |
| | | <el-card class="detail-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">器官利用基本信息</span> |
| | | <div style="float: right;"> |
| | | <el-button type="primary" @click="handleSave" :loading="saveLoading"> |
| | | 保存 |
| | | </el-button> |
| | | <el-button |
| | | type="success" |
| | | @click="handleComplete" |
| | | :loading="confirmLoading" |
| | | > |
| | | 完成利用 |
| | | </el-button> |
| | | <case-basic-info :case-id="caseId" :show-attachment="true":column="3" /> |
| | | <el-form :model="form" ref="form" :rules="rules" label-width="120px" class="paper-form"> |
| | | <!-- 基本信息 --> |
| | | <el-card class="detail-card paper-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">器官利用基本信息</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-form :model="form" ref="form" :rules="rules" label-width="120px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-form-item align="left" label="遗体捐献" prop="isbodydonation"> |
| | | <el-radio-group v-model="form.isbodydonation"> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_0_1 || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="18"> |
| | | <el-form-item |
| | | align="left" |
| | | label="接收单位" |
| | | prop="receivingunitname" |
| | | > |
| | | <el-input |
| | | v-model="form.receivingunitname" |
| | | placeholder="请输入接收单位" |
| | | :disabled="form.isbodydonation !== '1'" |
| | | /> |
| | | </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" |
| | | placeholder="请输入负责人姓名" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="协调员一" prop="coordinatedusernameo" class="col-1-3"> |
| | | <el-input |
| | | v-model="form.coordinatedusernameo" |
| | | placeholder="请输入协调员一姓名" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="协调员二" prop="coordinatedusernamet" class="col-1-3"> |
| | | <el-input |
| | | v-model="form.coordinatedusernamet" |
| | | placeholder="请输入协调员二姓名" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="完成时间" prop="completetime" class="col-1-3"> |
| | | <el-date-picker |
| | | v-model="form.completetime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </div> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="负责人" prop="responsibleusername"> |
| | | <el-input |
| | | v-model="form.responsibleusername" |
| | | placeholder="请输入负责人姓名" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="协调员一" prop="coordinatedusernameo"> |
| | | <el-input |
| | | v-model="form.coordinatedusernameo" |
| | | placeholder="请输入协调员一姓名" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="协调员二" prop="coordinatedusernamet"> |
| | | <el-input |
| | | v-model="form.coordinatedusernamet" |
| | | placeholder="请输入协调员二姓名" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="完成时间" prop="completetime"> |
| | | <el-date-picker |
| | | v-model="form.completetime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <!-- <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人" prop="createBy"> |
| | | <el-input v-model="form.createBy" /> |
| | |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-card> |
| | | </el-row> --> |
| | | </el-card> |
| | | <el-card class="detail-card paper-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">遗体捐献信息</span> |
| | | </div> |
| | | <div class="form-row"> |
| | | <el-form-item align="left" label="遗体接收" prop="isbodydonation" class="col-1-3"> |
| | | <el-radio-group v-model="form.isbodydonation"> |
| | | <el-radio |
| | | v-for="dict in dict.type.sys_0_1 || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | >{{ dict.label }}</el-radio |
| | | > |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | |
| | | <el-form-item align="left" label="接收家属" prop="relationname" class="col-1-3"> |
| | | <el-input |
| | | v-model="form.relationname" |
| | | placeholder="请输入接收家属" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="与捐献者关系" prop="signfamilyrelations" class="col-1-3"> |
| | | <el-select |
| | | v-model="form.signfamilyrelations" |
| | | placeholder="请选择与捐献者关系" |
| | | > |
| | | <el-option |
| | | v-for="dict in dict.type.sys_FamilyRelation || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | </el-card> |
| | | </el-form> |
| | | <!-- 器官利用记录部分 - 整合受者详情 --> |
| | | <el-card class="utilization-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">器官利用记录</span> |
| | | <div style="float: right;"> |
| | | <dict-tag |
| | | <dict-tag |
| | | :options="dict.type.utilize_statue" |
| | | :value="form.completeState" |
| | | /> |
| | |
| | | <el-col> |
| | | <el-form-item> |
| | | <el-table |
| | | :data="utilizationData.serviceDonatecomporganList" |
| | | :data="displayOrgans" |
| | | v-loading="loading" |
| | | border |
| | | style="width: 100%" |
| | |
| | | <div class="recipient-header"> |
| | | <span class="recipient-title">受者详细信息</span> |
| | | <el-tag |
| | | v-if="scope.row.transplantstate === '1'" |
| | | v-if="scope.row.transplantstate == '1'" |
| | | type="success" |
| | | size="small" |
| | | > |
| | | 已移植 |
| | | </el-tag> |
| | | <el-tag |
| | | v-else-if="scope.row.transplantstate === '0'" |
| | | v-else-if="scope.row.transplantstate == '0'" |
| | | type="warning" |
| | | size="small" |
| | | > |
| | |
| | | <!-- 移植信息部分 --> |
| | | <div |
| | | class="form-section" |
| | | v-if="scope.row.transplantstate === '1'" |
| | | v-if="scope.row.transplantstate == '1'" |
| | | > |
| | | <h4 class="section-title">移植信息</h4> |
| | | <el-row :gutter="20"> |
| | |
| | | <!-- 未移植原因 --> |
| | | <div |
| | | class="form-section" |
| | | v-if="scope.row.transplantstate === '0'" |
| | | v-if="scope.row.transplantstate == '0'" |
| | | > |
| | | <h4 class="section-title">未移植信息</h4> |
| | | <el-row :gutter="20"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="系统编号" align="center" prop="caseNo"> |
| | | <!-- <el-table-column label="系统编号" align="center" prop="caseNo"> |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.caseNo" |
| | | placeholder="系统编号" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table-column> --> |
| | | |
| | | <el-table-column |
| | | label="移植医院" |
| | |
| | | prop="hospitalno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-select |
| | | v-model="scope.row.hospitalno" |
| | | placeholder="请选择移植医院" |
| | | <el-autocomplete |
| | | v-model="scope.row.hospitalname" |
| | | :fetch-suggestions="queryHospitalSearch" |
| | | placeholder="请选择或输入移植医院" |
| | | style="width: 100%" |
| | | @change="handleHospitalChange(scope.row, $event)" |
| | | > |
| | | <el-option |
| | | v-for="hospital in hospitalList" |
| | | :key="hospital.hospitalNo" |
| | | :label="hospital.hospitalName" |
| | | :value="hospital.hospitalNo" |
| | | /> |
| | | </el-select> |
| | | clearable |
| | | ></el-autocomplete> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="移植状态" |
| | | align="center" |
| | |
| | | <el-input v-model="scope.row.name" placeholder="受者姓名" /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="操作" |
| | | align="center" |
| | | class-name="small-padding fixed-width" |
| | | v-if="form.completeState !== '3'" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleEditUtilization(scope.row)" |
| | | > |
| | | 编辑 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | style="color: #F56C6C;" |
| | | @click="handleRemoveOrgan(scope.$index)" |
| | | v-if="!scope.row.id" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-card> |
| | | |
| | | <!-- 附件管理部分 --> |
| | | <!-- 附件管理部分 - 优化为完整功能 --> |
| | | <!-- 附件管理部分 - 分类Tab展示 --> |
| | | <el-card class="attachment-card"> |
| | | <div class="attachment-header"> |
| | | <i class="el-icon-paperclip"></i> |
| | | <span class="attachment-title">相关附件</span> |
| | | <span class="attachment-tip" |
| | | >支持上传器官利用相关文件 (最多{{ attachmentLimit }}个)</span |
| | | > |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">相关附件</span> |
| | | </div> |
| | | |
| | | <!-- 使用 UploadAttachment 组件 --> |
| | | <UploadAttachment |
| | | ref="uploadAttachment" |
| | | :file-list="attachmentFileList" |
| | | :limit="attachmentLimit" |
| | | :accept="attachmentAccept" |
| | | :multiple="true" |
| | | @change="handleAttachmentChange" |
| | | @upload-success="handleUploadSuccess" |
| | | @upload-error="handleUploadError" |
| | | @remove="handleAttachmentRemove" |
| | | /> |
| | | |
| | | <!-- 附件列表展示 --> |
| | | <div class="attachment-list" v-if="attachments && attachments.length > 0"> |
| | | <div class="list-title">已上传附件 ({{ attachments.length }})</div> |
| | | <el-table :data="attachments" style="width: 100%" size="small"> |
| | | <el-table-column label="文件名" min-width="200"> |
| | | <template slot-scope="scope"> |
| | | <i |
| | | class="el-icon-document" |
| | | :style="{ color: getFileIconColor(scope.row.fileName) }" |
| | | ></i> |
| | | <span class="file-name">{{ scope.row.fileName }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件类型" width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getFileTagType(scope.row.fileName)" size="small"> |
| | | {{ getFileTypeText(scope.row.fileName) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="上传时间" width="200"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ formatDateTime(scope.row.uploadTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件大小" width="180"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ formatFileSize(scope.row.fileSize) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="260" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="primary" |
| | | @click="handlePreview(scope.row)" |
| | | :disabled="!isPreviewable(scope.row.fileName)" |
| | | > |
| | | 预览 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="success" |
| | | @click="handleDownloadAttachment(scope.row)" |
| | | > |
| | | 下载 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="danger" |
| | | @click="handleRemoveAttachment(scope.$index)" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | |
| | | <!-- 编辑利用记录对话框 --> |
| | | <el-dialog |
| | | title="编辑器官利用记录" |
| | | :visible.sync="editDialogVisible" |
| | | width="600px" |
| | | > |
| | | <el-form :model="currentRecord" label-width="120px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="器官名称"> |
| | | <el-input v-model="currentRecord.organname" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="移植状态"> |
| | | <el-select |
| | | v-model="currentRecord.transplantstate" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="dict in transplantStatusList" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item |
| | | label="未移植原因" |
| | | v-if="currentRecord.transplantstate === '0'" |
| | | <!-- 附件列表 - 分类Tab展示,支持修改分类 --> |
| | | <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-input |
| | | type="textarea" |
| | | :rows="3" |
| | | v-model="currentRecord.abandonreason" |
| | | placeholder="请输入未移植原因" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="移植医院" |
| | | v-if="currentRecord.transplantstate === '1'" |
| | | > |
| | | <el-select |
| | | v-model="currentRecord.hospitalno" |
| | | placeholder="请选择移植医院" |
| | | <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-option |
| | | v-for="hospital in hospitalList" |
| | | :key="hospital.hospitalNo" |
| | | :label="hospital.hospitalName" |
| | | :value="hospital.hospitalNo" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item |
| | | label="受者姓名" |
| | | v-if="currentRecord.transplantstate === '1'" |
| | | <el-table-column label="文件名" min-width="180"> |
| | | <template #default="scope"> |
| | | <i |
| | | class="el-icon-document" |
| | | style="margin-right: 8px; color: #409EFF;" |
| | | ></i> |
| | | <span class="file-name">{{ scope.row.fileName }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- 可编辑分类下拉 --> |
| | | <el-table-column label="分类" width="150"> |
| | | <template #default="scope"> |
| | | <el-select |
| | | v-model="scope.row.fileType" |
| | | size="small" |
| | | @change="updateAttachmentCategory(scope.row, $event)" |
| | | placeholder="选择分类" |
| | | > |
| | | <el-option label="原表拍照" value="原表拍照" /> |
| | | <el-option label="接受确认书" value="接受确认书" /> |
| | | <el-option label="弃用说明" value="弃用说明" /> |
| | | <el-option label="捐献证书照片" value="捐献证书照片" /> |
| | | <el-option label="未分类" value="" /> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件类型" width="100"> |
| | | <template #default="scope"> |
| | | <el-tag size="small">{{ |
| | | getFileTypeText(scope.row.fileName) |
| | | }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="上传时间" width="160"> |
| | | <template #default="scope"> |
| | | <span>{{ formatDateTime(scope.row.uploadTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件大小" width="120"> |
| | | <template #default="scope"> |
| | | <span>{{ formatFileSize(scope.row.fileSize) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="180" fixed="right"> |
| | | <template #default="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="primary" |
| | | @click="handlePreview(scope.row)" |
| | | >预览</el-button |
| | | > |
| | | <el-button |
| | | size="mini" |
| | | type="danger" |
| | | @click="handleRemoveAttachmentByFile(scope.row)" |
| | | >删除</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </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"> |
| | | 保存 |
| | | </el-button> |
| | | <el-button |
| | | type="success" |
| | | @click="handleComplete" |
| | | :loading="confirmLoading" |
| | | > |
| | | 完成利用 |
| | | </el-button> |
| | | </div> |
| | | <!-- 上传对话框 --> |
| | | <el-dialog |
| | | :title="`上传${currentUploadCategory}附件`" |
| | | :visible.sync="uploadDialogVisible" |
| | | width="480px" |
| | | :close-on-click-modal="false" |
| | | > |
| | | <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> |
| | | </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-input v-model="currentRecord.name" placeholder="请输入受者姓名" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="editDialogVisible = false">取消</el-button> |
| | | <el-button type="primary" @click="handleEditConfirm">确认</el-button> |
| | | </div> |
| | | 确认上传 |
| | | </el-button> |
| | | </span> |
| | | </el-dialog> |
| | | |
| | | <!-- 文件预览对话框 --> |
| | |
| | | completionadd, |
| | | completionedit |
| | | } from "@/api/businessApi"; |
| | | import UploadAttachment from "@/components/UploadAttachment"; // 新增导入 |
| | | import FilePreviewDialog from "@/components/FilePreviewDialog"; // 新增导入 |
| | | import FilePreviewDialog from "@/components/FilePreviewDialog"; |
| | | import CaseBasicInfo from "@/components/CaseBasicInfo"; |
| | | import dayjs from "dayjs"; // 新增导入,用于时间处理 |
| | | import { getToken } from "@/utils/auth"; |
| | | import dayjs from "dayjs"; |
| | | |
| | | export default { |
| | | name: "OrganUtilizationDetail", |
| | | components: { |
| | | UploadAttachment, |
| | | FilePreviewDialog, |
| | | CaseBasicInfo |
| | | }, |
| | | dicts: ["sys_BloodType", "sys_Organ", "sys_0_1",'utilize_statue'], |
| | | dicts: [ |
| | | "Geta_hospital", |
| | | "sys_BloodType", |
| | | "sys_Organ", |
| | | "sys_FamilyRelation", |
| | | "sys_0_1", |
| | | "utilize_statue" |
| | | ], |
| | | data() { |
| | | return { |
| | | caseId: null, |
| | | |
| | | activeTab: "原表拍照", // 当前激活的附件分类Tab |
| | | presetCategories: ["原表拍照", "接受确认书", "弃用说明", "捐献证书照片"], // 预设分类 |
| | | // 表单数据 - 根据接口参数调整 |
| | | form: { |
| | | id: undefined, |
| | |
| | | coordinatedusernamet: "", |
| | | assessannex: "", |
| | | donateorgan: "", |
| | | isbodydonation: "0", |
| | | isbodydonation: "1", |
| | | receivingunitname: "", |
| | | createBy: "", |
| | | createTime: "", |
| | |
| | | transplantStatusList: [ |
| | | { value: "1", label: "已移植" }, |
| | | { value: "0", label: "未移植" }, |
| | | { value: "2", label: "移植中" } |
| | | { value: "2", label: "移植中" }, |
| | | { value: "3", label: "库存" } |
| | | ], |
| | | organExpansionMap: { |
| | | C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] }, |
| | | C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] } |
| | | }, |
| | | // 利用记录数据 |
| | | utilizationData: { |
| | | serviceDonatecomporganList: [] |
| | |
| | | editDialogVisible: false, |
| | | currentRecord: {}, |
| | | currentEditIndex: -1, |
| | | // 附件相关配置 - 新增 |
| | | 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: "", |
| | | |
| | | // 文件预览相关 - 新增 |
| | | // 文件预览相关 |
| | | filePreviewVisible: false, |
| | | currentPreviewFile: null, |
| | | currentFollowup: {}, |
| | |
| | | currentUser() { |
| | | return JSON.parse(sessionStorage.getItem("user") || "{}"); |
| | | }, |
| | | categories() { |
| | | // 始终返回所有预设分类 + 未分类,即使没有数据也显示 |
| | | const allCategories = [ |
| | | "原表拍照", |
| | | "接受确认书", |
| | | "弃用说明", |
| | | "捐献证书照片", |
| | | "未分类" |
| | | ]; |
| | | return allCategories; |
| | | }, |
| | | // 已移植数量 |
| | | transplantedCount() { |
| | | if (!this.utilizationData.serviceDonatecomporganList) return 0; |
| | | return this.utilizationData.serviceDonatecomporganList.filter( |
| | | record => record.transplantstate === "1" |
| | | record => record.transplantstate == "1" |
| | | ).length; |
| | | }, |
| | | // 唯一医院数量 |
| | |
| | | .filter(Boolean); |
| | | return new Set(hospitals).size; |
| | | }, |
| | | organReverseMap() { |
| | | const map = {}; |
| | | for (const key in this.organExpansionMap) { |
| | | const { subItems } = this.organExpansionMap[key]; |
| | | subItems.forEach(item => { |
| | | map[item] = key; |
| | | }); |
| | | } |
| | | return map; |
| | | }, |
| | | // 过滤掉 delFlag=1 的记录(用于表格展示) |
| | | displayOrgans() { |
| | | return (this.utilizationData.serviceDonatecomporganList || []).filter( |
| | | item => item.delFlag !== 1 |
| | | ); |
| | | }, |
| | | // 获取器官字典 |
| | | organDict() { |
| | | return this.dict.type.sys_Organ || []; |
| | |
| | | }, |
| | | created() { |
| | | this.initData(); |
| | | }, |
| | | 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 |
| | | } |
| | | }, |
| | | methods: { |
| | | // 初始化数据 |
| | |
| | | .replace("T", " ") |
| | | .substring(0, 19); |
| | | |
| | | this.generateDonorNo(); |
| | | this.getDetail(); |
| | | this.getHospitalData(); |
| | | }, |
| | | syncOrgansFromSelection() { |
| | | const records = this.utilizationData.serviceDonatecomporganList || []; |
| | | const targetNos = []; |
| | | this.selectedOrgans.forEach(val => { |
| | | if (this.organExpansionMap[val]) { |
| | | targetNos.push(...this.organExpansionMap[val].subItems); |
| | | } else { |
| | | targetNos.push(val); |
| | | } |
| | | }); |
| | | |
| | | // 生成捐献者编号 |
| | | generateDonorNo() { |
| | | const timestamp = Date.now().toString(); |
| | | this.form.donorno = "D" + timestamp.slice(-8); |
| | | this.form.caseNo = "CASE" + timestamp.slice(-6); |
| | | this.form.inpatientno = "IP" + timestamp.slice(-6); |
| | | targetNos.forEach(no => { |
| | | const existing = records.find(r => r.organno == no); |
| | | if (existing) { |
| | | if (existing.delFlag == 1) existing.delFlag = 0; |
| | | } else { |
| | | // 使用创建方法,自动包含 delFlag:0 |
| | | this.createOrganRecord(no); |
| | | } |
| | | }); |
| | | |
| | | // 强制所有记录 delFlag=0(加载时应该全部有效) |
| | | records.forEach(r => (r.delFlag = 0)); |
| | | this.form.donateorgan = this.selectedOrgans.join(","); |
| | | }, |
| | | |
| | | // 获取详情 |
| | | async getDetail() { |
| | | this.loading = true; |
| | | try { |
| | | const response = await completionList({ infoid: this.caseId }); |
| | | if ( |
| | | response.code === 200 && |
| | | response.data && |
| | | response.data.length > 0 |
| | | ) { |
| | | if (response.code == 200 && response.data && response.data.length > 0) { |
| | | const data = response.data[0]; |
| | | if (!data.completeState || data.completeState == 1) { |
| | | data.completeState = "2"; |
| | | } |
| | | this.form = data; |
| | | // 填充表单数据 |
| | | Object.assign(this.form, data); |
| | | |
| | | // Object.assign(this.form, data); |
| | | this.form.signfamilyrelations = this.form.signfamilyrelations || ""; |
| | | // 处理捐献器官字段 |
| | | if (data.donateorgan) { |
| | | const organArray = Array.isArray(data.donateorgan) |
| | |
| | | ? data.serviceDonatecomporganList.map(record => ({ |
| | | ...record, |
| | | transplanttime: record.transplanttime || "", |
| | | transplantstate: record.transplantstate |
| | | ? record.transplantstate.toString() |
| | | : "1" |
| | | transplantstate: |
| | | record.transplantstate != null |
| | | ? record.transplantstate.toString() |
| | | : "1" |
| | | })) |
| | | : []; |
| | | } |
| | | console.log(this.utilizationData.serviceDonatecomporganList); |
| | | |
| | | // 初始化附件 |
| | | // 改为(确保每个附件都有 fileType 字段) |
| | | if (this.form.assessannex) { |
| | | this.form.attachments = JSON.parse(this.form.assessannex); |
| | | this.attachments = Array.isArray(this.form.attachments) |
| | | ? [...this.form.attachments] |
| | | : []; |
| | | const parsed = JSON.parse(this.form.assessannex); |
| | | this.attachments = parsed.map(item => ({ |
| | | ...item, |
| | | fileType: item.fileType || "" // 默认空字符串表示未分类 |
| | | })); |
| | | this.form.attachments = this.attachments; |
| | | } else { |
| | | this.attachments = []; |
| | | } |
| | | |
| | | this.$message.success("数据加载成功"); |
| | | this.syncOrgansFromSelection(); |
| | | } else { |
| | | this.$message.warning("未找到对应的器官利用数据"); |
| | | } |
| | |
| | | }, |
| | | |
| | | // 获取医院数据 |
| | | async getHospitalData() { |
| | | try { |
| | | // TODO: 替换为实际的医院列表接口 |
| | | // 暂时使用模拟数据 |
| | | this.hospitalList = [ |
| | | { hospitalNo: "H001", hospitalName: "北京协和医院" }, |
| | | { hospitalNo: "H002", hospitalName: "上海华山医院" }, |
| | | { hospitalNo: "H003", hospitalName: "上海瑞金医院" }, |
| | | { hospitalNo: "H004", hospitalName: "广州中山医院" }, |
| | | { hospitalNo: "H005", hospitalName: "武汉同济医院" }, |
| | | { hospitalNo: "H006", hospitalName: "成都华西医院" } |
| | | ]; |
| | | } catch (error) { |
| | | console.error("获取医院数据失败:", error); |
| | | this.$message.error("获取医院数据失败"); |
| | | } |
| | | }, |
| | | // async getHospitalData() { |
| | | // try { |
| | | // // TODO: 替换为实际的医院列表接口 |
| | | // // 暂时使用模拟数据 |
| | | // this.hospitalList = [ |
| | | // { hospitalNo: "H001", hospitalName: "北京协和医院" }, |
| | | // { hospitalNo: "H002", hospitalName: "上海华山医院" }, |
| | | // { hospitalNo: "H003", hospitalName: "上海瑞金医院" }, |
| | | // { hospitalNo: "H004", hospitalName: "广州中山医院" }, |
| | | // { hospitalNo: "H005", hospitalName: "武汉同济医院" }, |
| | | // { hospitalNo: "H006", hospitalName: "成都华西医院" } |
| | | // ]; |
| | | // } catch (error) { |
| | | // console.error("获取医院数据失败:", error); |
| | | // this.$message.error("获取医院数据失败"); |
| | | // } |
| | | // }, |
| | | |
| | | // 器官选择状态变化 |
| | | handleOrganSelectionChange(selectedValues) { |
| | | if (!this.utilizationData.serviceDonatecomporganList) { |
| | | this.utilizationData.serviceDonatecomporganList = []; |
| | | } |
| | | |
| | | const currentOrganValues = this.utilizationData.serviceDonatecomporganList.map( |
| | | item => item.organno |
| | | ); |
| | | |
| | | // 处理互斥逻辑 |
| | | async handleOrganSelectionChange(selectedValues) { |
| | | // 1. 处理互斥逻辑(修改 this.selectedOrgans) |
| | | this.handleExclusiveSelections(selectedValues); |
| | | |
| | | // 更新捐献器官字段 |
| | | this.form.donateorgan = selectedValues.join(","); |
| | | const finalSelected = this.selectedOrgans; |
| | | const records = this.utilizationData.serviceDonatecomporganList || []; |
| | | |
| | | // 新增选择的器官 |
| | | selectedValues.forEach(organValue => { |
| | | if (!currentOrganValues.includes(organValue)) { |
| | | this.createOrganRecord(organValue); |
| | | // 2. 构建目标器官编号列表(展开组合器官) |
| | | const targetOrganNos = []; |
| | | finalSelected.forEach(val => { |
| | | if (this.organExpansionMap[val]) { |
| | | targetOrganNos.push(...this.organExpansionMap[val].subItems); |
| | | } else { |
| | | targetOrganNos.push(val); |
| | | } |
| | | }); |
| | | |
| | | // 移除取消选择的器官 |
| | | this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter( |
| | | record => { |
| | | if (selectedValues.includes(record.organno)) { |
| | | return true; |
| | | } else { |
| | | if (record.id) { |
| | | this.$confirm( |
| | | "删除器官利用数据后将无法恢复,您确认删除该条记录吗?", |
| | | "提示", |
| | | { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | } |
| | | ) |
| | | .then(() => { |
| | | this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter( |
| | | r => r.organno !== record.organno |
| | | ); |
| | | this.$message.success("删除成功"); |
| | | }) |
| | | .catch(() => { |
| | | this.selectedOrgans.push(record.organno); |
| | | }); |
| | | return true; |
| | | } else { |
| | | return false; |
| | | } |
| | | // 3. 新增或恢复记录(无需弹窗) |
| | | targetOrganNos.forEach(no => { |
| | | const existing = records.find(r => r.organno == no); |
| | | if (existing) { |
| | | if (existing.delFlag == 1) { |
| | | existing.delFlag = 0; // 恢复显示 |
| | | } |
| | | } else { |
| | | this.createOrganRecord(no); // 新增记录(包含 delFlag:0) |
| | | } |
| | | ); |
| | | }, |
| | | }); |
| | | |
| | | // 4. 找出需要取消的记录(不在目标集合中的) |
| | | const toRemove = records.filter(r => !targetOrganNos.includes(r.organno)); |
| | | const toRemoveSaved = toRemove.filter(r => r.id); // 已保存,需确认 |
| | | const toRemoveUnsaved = toRemove.filter(r => !r.id); // 未保存,直接移除 |
| | | |
| | | // 4.1 直接移除未保存的记录 |
| | | toRemoveUnsaved.forEach(r => { |
| | | const idx = records.indexOf(r); |
| | | if (idx !== -1) records.splice(idx, 1); |
| | | }); |
| | | |
| | | // 4.2 处理已保存的记录:弹窗确认 |
| | | if (toRemoveSaved.length > 0) { |
| | | const organNames = toRemoveSaved.map(r => r.organname).join("、"); |
| | | try { |
| | | await this.$confirm( |
| | | `您确定要取消以下已保存的器官利用记录吗?\n${organNames}\n取消后,这些记录将从列表中移除(数据仍保留,可恢复)。`, |
| | | "提示", |
| | | { |
| | | confirmButtonText: "确定移除", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | } |
| | | ); |
| | | // 用户确认:标记 delFlag=1 |
| | | toRemoveSaved.forEach(r => { |
| | | r.delFlag = 1; |
| | | }); |
| | | } catch (error) { |
| | | // 用户取消:恢复选中状态 |
| | | // 将取消的器官重新加入 this.selectedOrgans |
| | | const parentToRestore = new Set(); |
| | | toRemoveSaved.forEach(r => { |
| | | const parent = this.organReverseMap[r.organno]; |
| | | if (parent) { |
| | | parentToRestore.add(parent); |
| | | } else { |
| | | parentToRestore.add(r.organno); |
| | | } |
| | | }); |
| | | parentToRestore.forEach(val => { |
| | | if (!this.selectedOrgans.includes(val)) { |
| | | this.selectedOrgans.push(val); |
| | | } |
| | | }); |
| | | // 提示用户操作已取消 |
| | | this.$message.info("已取消删除操作"); |
| | | // 更新表单字段(保持一致性) |
| | | this.form.donateorgan = this.selectedOrgans.join(","); |
| | | // 注意:此时 records 中已新增了目标器官,并且之前的记录未被标记删除,状态一致。 |
| | | // 但是,我们还需要移除之前新增但用户可能不想保留的记录?不会,因为新增的是目标器官,用户是想保留的。 |
| | | // 因此直接返回即可。 |
| | | return; |
| | | } |
| | | } |
| | | |
| | | // 5. 更新表单字段 |
| | | this.form.donateorgan = this.selectedOrgans.join(","); |
| | | }, |
| | | // 移植医院模糊搜索 |
| | | queryHospitalSearch(queryString, cb) { |
| | | const hospitals = this.dict.type.Geta_hospital || []; |
| | | const results = queryString |
| | | ? hospitals.filter(item => |
| | | item.label.toLowerCase().includes(queryString.toLowerCase()) |
| | | ) |
| | | : hospitals; |
| | | |
| | | // el-autocomplete 需要 value 字段 |
| | | cb(results.map(item => ({ value: item.label }))); |
| | | }, |
| | | // 处理互斥选择 |
| | | handleExclusiveSelections(selectedValues) { |
| | | // 如果选择了"双肾"(假设字典值为C64),自动取消单独的"左肾"(C64L)和"右肾"(C64R)选择 |
| | |
| | | const organName = this.getOrganLabel(organValue); |
| | | |
| | | this.utilizationData.serviceDonatecomporganList.push({ |
| | | infoid: this.caseId, |
| | | organname: organName, |
| | | organno: organValue, |
| | | caseNo: "", |
| | |
| | | transplanttime: "", |
| | | transplantstate: "1", |
| | | abandonreason: "", |
| | | delFlag: 0, // 新增 |
| | | sex: "", |
| | | age: "", |
| | | birthday: "", |
| | |
| | | |
| | | // 根据字典value获取label |
| | | getOrganLabel(organValue) { |
| | | const dictItem = this.organDict.find(item => item.value === organValue); |
| | | const dictItem = this.organDict.find(item => item.value == organValue); |
| | | return dictItem ? dictItem.label : organValue; |
| | | }, |
| | | |
| | | // 医院选择变化 |
| | | handleHospitalChange(row, hospitalNo) { |
| | | const hospital = this.hospitalList.find( |
| | | item => item.hospitalNo === hospitalNo |
| | | ); |
| | | if (hospital) { |
| | | row.hospitalname = hospital.hospitalName; |
| | | } |
| | | }, |
| | | |
| | | // 移植状态变化处理 |
| | | handleTransplantStatusChange(row, status) { |
| | | if (status === "0") { |
| | | if (status == "0") { |
| | | // 如果状态为未移植,清除相关字段 |
| | | // row.transplanttime = ""; |
| | | // row.transplantdoct = ""; |
| | | // row.hospitalno = ""; |
| | | // row.hospitalname = ""; |
| | | } else if (status === "1") { |
| | | } else if (status == "1") { |
| | | // 如果状态为已移植,自动设置移植时间为当前时间 |
| | | if (!row.transplanttime) { |
| | | row.transplanttime = new Date().toISOString().split("T")[0]; |
| | |
| | | // 行展开事件 |
| | | handleExpandChange(row, expandedRows) { |
| | | this.expandedRows = expandedRows.map(item => item.organno); |
| | | }, |
| | | |
| | | // 编辑利用记录 |
| | | handleEditUtilization(row) { |
| | | const index = this.utilizationData.serviceDonatecomporganList.findIndex( |
| | | item => item.organno === row.organno |
| | | ); |
| | | if (index !== -1) { |
| | | this.currentRecord = { ...row }; |
| | | this.currentEditIndex = index; |
| | | this.editDialogVisible = true; |
| | | } |
| | | }, |
| | | |
| | | // 确认编辑 |
| | | handleEditConfirm() { |
| | | if (this.currentEditIndex !== -1) { |
| | | this.utilizationData.serviceDonatecomporganList[ |
| | | this.currentEditIndex |
| | | ] = { |
| | | ...this.currentRecord |
| | | }; |
| | | this.$message.success("利用记录更新成功"); |
| | | this.editDialogVisible = false; |
| | | } |
| | | }, |
| | | |
| | | // 删除器官记录 |
| | |
| | | // 器官行样式 |
| | | getOrganRowClassName({ row }) { |
| | | if ( |
| | | row.transplantstate === "1" && |
| | | (!row.caseNo || !row.hospitalno || !row.name || !row.transplanttime) |
| | | row.transplantstate == "1" && |
| | | (!row.hospitalno || !row.name || !row.transplanttime) |
| | | ) { |
| | | return "warning-row"; |
| | | } |
| | | if (row.transplantstate === "0" && !row.abandonreason) { |
| | | if (row.transplantstate == "0" && !row.abandonreason) { |
| | | return "warning-row"; |
| | | } |
| | | return ""; |
| | |
| | | const apiMethod = this.form.id ? completionedit : completionadd; |
| | | const response = await apiMethod(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | if (response.code == 200) { |
| | | this.$message.success("保存成功"); |
| | | if (!this.form.id && response.data && response.data.id) { |
| | | this.form.id = response.data.id; |
| | |
| | | async handleSaveUtilization() { |
| | | if ( |
| | | !this.utilizationData.serviceDonatecomporganList || |
| | | this.utilizationData.serviceDonatecomporganList.length === 0 |
| | | this.utilizationData.serviceDonatecomporganList.length == 0 |
| | | ) { |
| | | this.$message.warning("请先添加利用记录"); |
| | | return; |
| | |
| | | |
| | | const response = await completionedit(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | if (response.code == 200) { |
| | | this.$message.success("利用记录保存成功"); |
| | | } else { |
| | | this.$message.error( |
| | |
| | | // 检查利用记录是否完整 |
| | | const incompleteRecords = this.utilizationData.serviceDonatecomporganList.filter( |
| | | record => { |
| | | if (record.transplantstate === "1") { |
| | | return ( |
| | | !record.caseNo || |
| | | !record.hospitalno || |
| | | !record.name || |
| | | !record.transplanttime |
| | | ); |
| | | } else if (record.transplantstate === "0") { |
| | | if (record.transplantstate == "1") { |
| | | return !record.hospitalno || !record.name || !record.transplanttime; |
| | | } else if (record.transplantstate == "0") { |
| | | return !record.abandonreason; |
| | | } |
| | | return false; |
| | |
| | | |
| | | const response = await completionedit(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | if (response.code == 200) { |
| | | this.$message.success("器官利用已完成"); |
| | | } else { |
| | | this.$message.error( |
| | |
| | | |
| | | // 获取器官名称 |
| | | const organRecord = this.utilizationData.serviceDonatecomporganList.find( |
| | | item => item.organno === this.currentFollowup.organNo |
| | | item => item.organno == this.currentFollowup.organNo |
| | | ); |
| | | const organName = organRecord ? organRecord.organname : ""; |
| | | |
| | |
| | | if (this.isEditingFollowup) { |
| | | // 更新现有记录 |
| | | const index = this.followupData.records.findIndex( |
| | | item => item.id === this.currentFollowup.id |
| | | item => item.id == this.currentFollowup.id |
| | | ); |
| | | if (index !== -1) { |
| | | this.followupData.records[index] = { |
| | |
| | | this.saveLoading = false; |
| | | }, 1000); |
| | | }, |
| | | /** 附件变化处理 */ |
| | | 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.url) { |
| | | const index = this.attachments.findIndex( |
| | | item => item.path === file.url || item.fileUrl === file.url |
| | | // 上传前校验 |
| | | 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格式文件" |
| | | ); |
| | | if (index > -1) { |
| | | this.attachments.splice(index, 1); |
| | | this.$message.success("附件删除成功"); |
| | | return false; |
| | | } |
| | | if (file.size > maxSize) { |
| | | this.$message.error("文件大小不能超过10MB"); |
| | | return false; |
| | | } |
| | | return true; |
| | | }, |
| | | |
| | | // 文件选择变化 |
| | | 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; |
| | | } |
| | | } |
| | | }, |
| | | /** 上传成功处理 */ |
| | | handleUploadSuccess({ file, fileList, response }) { |
| | | if (response.code === 200) { |
| | | const attachmentObj = { |
| | | fileName: file.name, |
| | | path: response.fileUrl || file.url, |
| | | fileUrl: response.fileUrl || file.url, |
| | | fileType: this.getFileExtension(file.name), |
| | | 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("文件上传成功"); |
| | | } |
| | | // 按文件对象删除(用于表格中的删除按钮) |
| | | 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(() => {}); |
| | | }, |
| | | |
| | | /** 上传错误处理 */ |
| | | handleUploadError({ file, fileList, error }) { |
| | | console.error("附件上传失败:", error); |
| | | this.$message.error("文件上传失败,请重试"); |
| | | }, |
| | | |
| | | /** 手动删除附件 */ |
| | | handleRemoveAttachment(index) { |
| | | this.attachments.splice(index, 1); |
| | | this.attachmentFileList.splice(index, 1); |
| | | this.$message.success("附件删除成功"); |
| | | }, |
| | | |
| | | /** 文件预览 */ |
| | | // 文件预览 |
| | | handlePreview(file) { |
| | | this.currentPreviewFile = { |
| | | fileName: file.fileName, |
| | |
| | | }; |
| | | this.filePreviewVisible = true; |
| | | }, |
| | | /** 文件下载 */ |
| | | |
| | | // 文件下载 |
| | | handleDownloadAttachment(file) { |
| | | const fileUrl = file.path || file.fileUrl; |
| | | const fileName = file.fileName; |
| | |
| | | |
| | | /** 格式化文件大小 */ |
| | | formatFileSize(bytes) { |
| | | if (!bytes || bytes === 0) return "0 B"; |
| | | if (!bytes || bytes == 0) return "0 B"; |
| | | const k = 1024; |
| | | const sizes = ["B", "KB", "MB", "GB"]; |
| | | const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| | |
| | | .recipient-form { |
| | | padding: 15px; |
| | | } |
| | | |
| | | .attachment-header { |
| | | flex-wrap: wrap; |
| | | } |
| | |
| | | margin-top: 8px; |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .form-section { |
| | | margin-bottom: 20px; |
| | | padding-bottom: 15px; |
| | |
| | | padding: 10px 15px; |
| | | } |
| | | } |
| | | |
| | | /* ===== 纸质表格网格样式 ===== */ |
| | | .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> |