| | |
| | | </el-button> |
| | | <el-button |
| | | type="success" |
| | | @click="handleAllocate" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | @click="handleConfirmAllocation" |
| | | :disabled="form.allocationStatus === '1'" |
| | | :loading="confirmLoading" |
| | | > |
| | | 确认分配 |
| | | </el-button> |
| | |
| | | <el-form :model="form" ref="form" :rules="rules" label-width="120px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="住院号" prop="hospitalNo"> |
| | | <el-input v-model="form.hospitalNo" readonly /> |
| | | <el-form-item label="住院号" prop="donorno"> |
| | | <el-input v-model="form.donorno" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="住院号" prop="caseNo"> |
| | | <el-input v-model="form.caseNo" readonly /> |
| | | <el-form-item label="案例编号" prop="caseNo"> |
| | | <el-input v-model="form.caseNo" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="捐献者姓名" prop="donorName"> |
| | | <el-input v-model="form.donorName" /> |
| | | <el-form-item label="捐献者姓名" prop="name"> |
| | | <el-input v-model="form.name" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="性别" prop="gender"> |
| | | <el-select v-model="form.gender" style="width: 100%"> |
| | | <el-form-item label="性别" prop="sex"> |
| | | <el-select v-model="form.sex" style="width: 100%"> |
| | | <el-option label="男" value="0" /> |
| | | <el-option label="女" value="1" /> |
| | | </el-select> |
| | |
| | | <el-input v-model="form.age" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="出生日期" prop="birthDate"> |
| | | <el-date-picker |
| | | v-model="form.birthDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 100%" |
| | | <!-- <el-col :span="8"> |
| | | <el-form-item label="捐献类别" prop="donationcategory"> |
| | | <el-select v-model="form.donationcategory" style="width: 100%"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_DonationCategory || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> --> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="血型" prop="bloodtype"> |
| | | <el-select v-model="form.bloodtype" style="width: 100%"> |
| | | <el-option |
| | | v-for="dict in dict.type.sys_BloodType || []" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="证件号码" prop="idcardno"> |
| | | <el-input v-model="form.idcardno" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="记录状态" prop="recordstate"> |
| | | <el-input v-model="form.recordstate" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="疾病诊断" prop="diagnosis"> |
| | | <el-form-item label="疾病诊断" prop="diagnosisname"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="2" |
| | | v-model="form.diagnosis" |
| | | v-model="form.diagnosisname" |
| | | placeholder="请输入疾病诊断信息" |
| | | /> |
| | | </el-form-item> |
| | |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | | :disabled="form.allocationStatus !== 'allocated'" |
| | | :disabled="form.allocationStatus === '1'" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人" prop="registrant"> |
| | | <el-input v-model="form.registrant" /> |
| | | <el-form-item label="所在医疗机构" prop="treatmenthospitalname"> |
| | | <el-input |
| | | v-model="form.treatmenthospitalname" |
| | | placeholder="请输入医疗机构名称" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="医疗机构编码" prop="treatmenthospitalno"> |
| | | <el-input |
| | | v-model="form.treatmenthospitalno" |
| | | placeholder="请输入医疗机构编码" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人" prop="registrationName"> |
| | | <el-input v-model="form.registrationName" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | |
| | | <div style="float: right;"> |
| | | <el-tag |
| | | :type=" |
| | | form.allocationStatus === 'allocated' ? 'success' : 'warning' |
| | | form.allocationStatus === '1' |
| | | ? 'success' |
| | | : form.allocationStatus === '2' |
| | | ? 'danger' |
| | | : 'warning' |
| | | " |
| | | > |
| | | {{ form.allocationStatus === "allocated" ? "已分配" : "待分配" }} |
| | | {{ |
| | | form.allocationStatus === "1" |
| | | ? "已分配" |
| | | : form.allocationStatus === "2" |
| | | ? "作废" |
| | | : "未分配" |
| | | }} |
| | | </el-tag> |
| | | </div> |
| | | </div> |
| | |
| | | @change="handleOrganSelectionChange" |
| | | > |
| | | <el-checkbox |
| | | v-for="organ in organDict" |
| | | :key="organ.value" |
| | | :label="organ.value" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | v-for="dict in dict.type.sys_Organ || []" |
| | | :key="dict.value" |
| | | :label="dict.value" |
| | | :disabled="form.allocationStatus === '1'" |
| | | > |
| | | {{ organ.label }} |
| | | {{ dict.label }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | <el-input |
| | | v-if="showOtherInput" |
| | | v-model="otherOrganInput" |
| | | placeholder="请输入其他器官名称" |
| | | style="margin-top: 10px; width: 300px;" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-col> |
| | | <el-form-item> |
| | | <el-table |
| | | :data="allocationData.records" |
| | | :data="allocationData.serviceDonateorganList" |
| | | v-loading="loading" |
| | | border |
| | | style="width: 100%" |
| | |
| | | label="器官名称" |
| | | align="center" |
| | | width="120" |
| | | prop="organName" |
| | | prop="organname" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.organName" |
| | | v-model="scope.row.organname" |
| | | placeholder="器官名称" |
| | | :disabled="true" |
| | | /> |
| | |
| | | label="分配系统编号" |
| | | align="center" |
| | | width="150" |
| | | prop="systemNo" |
| | | prop="caseno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.systemNo" |
| | | v-model="scope.row.caseno" |
| | | placeholder="分配系统编号" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | :disabled="form.allocationStatus === '1'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | label="分配接收时间" |
| | | align="center" |
| | | width="180" |
| | | prop="applicantTime" |
| | | prop="applicanttime" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-date-picker |
| | | clearable |
| | | size="small" |
| | | style="width: 100%" |
| | | v-model="scope.row.applicantTime" |
| | | v-model="scope.row.applicanttime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="选择分配接收时间" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | :disabled="form.allocationStatus === '1'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | label="受体姓氏" |
| | | align="center" |
| | | width="120" |
| | | prop="recipientName" |
| | | prop="name" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.recipientName" |
| | | v-model="scope.row.name" |
| | | placeholder="受体姓氏" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | :disabled="form.allocationStatus === '1'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | label="移植医院" |
| | | align="center" |
| | | width="200" |
| | | prop="transplantHospitalNo" |
| | | prop="transplanthospitalno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-select |
| | | v-model="scope.row.transplantHospitalNo" |
| | | placeholder="请选择移植医院" |
| | | <div> |
| | | <org-selecter |
| | | ref="tranHosSelect" |
| | | :org-type="'4'" |
| | | :dataList="dataList" |
| | | v-model="scope.row.transplanthospitalno" |
| | | style="width: 100%" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | @change="handleHospitalChange(scope.row, $event)" |
| | | > |
| | | <el-option |
| | | v-for="hospital in hospitalList" |
| | | :key="hospital.hospitalNo" |
| | | :label="hospital.hospitalName" |
| | | :value="hospital.hospitalNo" |
| | | /> |
| | | </el-select> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="说明" |
| | | align="center" |
| | | prop="reallocationReason" |
| | | prop="reallocationreason" |
| | | min-width="200" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | type="textarea" |
| | | clearable |
| | | v-model="scope.row.reallocationReason" |
| | | v-model="scope.row.reallocationreason" |
| | | placeholder="请输入说明" |
| | | :disabled="form.allocationStatus === 'allocated'" |
| | | :disabled="form.allocationStatus === '1'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | align="center" |
| | | width="120" |
| | | class-name="small-padding fixed-width" |
| | | v-if="form.allocationStatus !== 'allocated'" |
| | | v-if="form.allocationStatus !== '1'" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | |
| | | type="text" |
| | | icon="el-icon-copy-document" |
| | | @click="handleRedistribution(scope.row)" |
| | | :disabled="!scope.row.systemNo" |
| | | :disabled="!scope.row.caseno" |
| | | > |
| | | 重分配 |
| | | </el-button> |
| | |
| | | </el-row> |
| | | |
| | | <!-- 分配统计信息 --> |
| | | <div class="allocation-stats" v-if="allocationData.records.length > 0"> |
| | | <div |
| | | class="allocation-stats" |
| | | v-if=" |
| | | allocationData.serviceDonateorganList && |
| | | allocationData.serviceDonateorganList.length > 0 |
| | | " |
| | | > |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">已分配器官:</span> |
| | | <span class="stat-value" |
| | | >{{ allocationData.records.length }} 个</span |
| | | >{{ allocationData.serviceDonateorganList.length }} 个</span |
| | | > |
| | | </div> |
| | | </el-col> |
| | |
| | | <span class="stat-value"> |
| | | <el-tag |
| | | :type=" |
| | | form.allocationStatus === 'allocated' |
| | | form.allocationStatus === '1' |
| | | ? 'success' |
| | | : form.allocationStatus === '2' |
| | | ? 'danger' |
| | | : 'warning' |
| | | " |
| | | > |
| | | {{ |
| | | form.allocationStatus === "allocated" |
| | | ? "已完成" |
| | | : "进行中" |
| | | form.allocationStatus === "1" |
| | | ? "已分配" |
| | | : form.allocationStatus === "2" |
| | | ? "作废" |
| | | : "未分配" |
| | | }} |
| | | </el-tag> |
| | | </span> |
| | |
| | | </div> |
| | | </el-form> |
| | | |
| | | <div class="dialog-footer" v-if="form.allocationStatus !== 'allocated'"> |
| | | <div class="dialog-footer" v-if="form.allocationStatus !== '1'"> |
| | | <el-button |
| | | type="primary" |
| | | @click="handleSaveAllocation" |
| | | :loading="saveLoading" |
| | | :disabled="allocationData.records.length === 0" |
| | | :disabled=" |
| | | !allocationData.serviceDonateorganList || |
| | | allocationData.serviceDonateorganList.length === 0 |
| | | " |
| | | > |
| | | 保存分配记录 |
| | | </el-button> |
| | |
| | | </div> |
| | | </el-card> |
| | | |
| | | <!-- 附件管理部分 --> |
| | | <!-- 附件管理部分优化 --> |
| | | <el-card class="attachment-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">相关附件</span> |
| | | <upload-attachment |
| | | :file-list="attachments" |
| | | <div class="attachment-header"> |
| | | <i class="el-icon-paperclip"></i> |
| | | <span class="attachment-title">相关附件</span> |
| | | <span class="attachment-tip" |
| | | >支持上传器官分配相关文件 (最多{{ attachmentLimit }}个)</span |
| | | > |
| | | </div> |
| | | |
| | | <!-- 使用 UploadAttachment 组件 --> |
| | | <UploadAttachment |
| | | ref="uploadAttachment" |
| | | :file-list="attachmentFileList" |
| | | :limit="attachmentLimit" |
| | | :accept="attachmentAccept" |
| | | :multiple="true" |
| | | @change="handleAttachmentChange" |
| | | :limit="10" |
| | | :accept="'.pdf,.jpg,.jpeg,.png,.doc,.docx'" |
| | | @upload-success="handleUploadSuccess" |
| | | @upload-error="handleUploadError" |
| | | @remove="handleAttachmentRemove" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="attachment-list"> |
| | | <el-table :data="attachments" style="width: 100%"> |
| | | <el-table-column label="文件名称" min-width="200"> |
| | | <!-- 附件列表展示 --> |
| | | <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"> |
| | | <div class="file-info"> |
| | | <i |
| | | :class="getFileIcon(scope.row.fileName)" |
| | | style="margin-right: 8px; color: #409EFF;" |
| | | class="el-icon-document" |
| | | :style="{ color: getFileIconColor(scope.row.fileName) }" |
| | | ></i> |
| | | <span>{{ scope.row.fileName }}</span> |
| | | </div> |
| | | <span class="file-name">{{ scope.row.fileName }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="文件类型" width="100" align="center"> |
| | | <el-table-column label="文件类型" width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-tag size="small">{{ |
| | | getFileType(scope.row.fileName) |
| | | }}</el-tag> |
| | | <el-tag :type="getFileTagType(scope.row.fileName)" size="small"> |
| | | {{ getFileTypeText(scope.row.fileName) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="文件大小" width="100" align="center"> |
| | | <el-table-column label="上传时间" width="160"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ formatDateTime(scope.row.uploadTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件大小" width="100"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ formatFileSize(scope.row.fileSize) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="上传时间" width="160" align="center"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.uploadTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="操作" width="150" align="center"> |
| | | <el-table-column label="操作" width="200" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-view" |
| | | @click="handlePreviewAttachment(scope.row)" |
| | | >预览</el-button |
| | | type="primary" |
| | | @click="handlePreview(scope.row)" |
| | | :disabled="!isPreviewable(scope.row.fileName)" |
| | | > |
| | | 预览 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-download" |
| | | type="success" |
| | | @click="handleDownloadAttachment(scope.row)" |
| | | >下载</el-button |
| | | > |
| | | 下载 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | style="color: #F56C6C;" |
| | | @click="handleRemoveAttachment(scope.row)" |
| | | >删除</el-button |
| | | type="danger" |
| | | @click="handleRemoveAttachment(scope.$index)" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | <!-- 附件预览对话框 --> |
| | | <attachment-preview |
| | | :visible="attachmentPreviewVisible" |
| | | :file-list="currentAttachmentList" |
| | | :title="attachmentPreviewTitle" |
| | | @close="attachmentPreviewVisible = false" |
| | | /> |
| | | |
| | | <!-- 重分配对话框 --> |
| | | <el-dialog |
| | | title="器官重分配" |
| | |
| | | > |
| | | <el-form :model="redistributionForm" label-width="100px"> |
| | | <el-form-item label="原器官信息"> |
| | | <el-input v-model="redistributionForm.organName" readonly /> |
| | | <el-input v-model="redistributionForm.organname" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="重分配原因" prop="reason"> |
| | | <el-input |
| | |
| | | > |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | |
| | | |
| | | <!-- 附件预览对话框 --> |
| | | <FilePreviewDialog |
| | | :visible="filePreviewVisible" |
| | | :file="currentPreviewFile" |
| | | @close="filePreviewVisible = false" |
| | | @download="handleDownloadAttachment" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getOrganAllocationDetail, |
| | | updateOrganAllocation, |
| | | saveAllocationRecords, |
| | | getHospitalList, |
| | | getOrganDict |
| | | } from "./organAllocation"; |
| | | allocationList, |
| | | allocationadd, |
| | | allocationedit |
| | | } from "@/api/businessApi"; |
| | | import UploadAttachment from "@/components/UploadAttachment"; |
| | | import AttachmentPreview from "@/components/AttachmentPreview"; |
| | | import FilePreviewDialog from "@/components/FilePreviewDialog"; |
| | | import OrgSelecter from "@/views/project/components/orgselect"; |
| | | |
| | | import dayjs from "dayjs"; |
| | | |
| | | export default { |
| | | name: "OrganAllocationDetail", |
| | | components: { |
| | | UploadAttachment, |
| | | AttachmentPreview, |
| | | OrgSelecter, |
| | | FilePreviewDialog |
| | | }, |
| | | dicts: [ |
| | | "sys_BloodType", |
| | | "sys_DonationCategory", |
| | | "sys_RecordState", |
| | | "sys_Organ" |
| | | ], |
| | | data() { |
| | | return { |
| | | // 表单数据 |
| | | form: { |
| | | id: undefined, |
| | | hospitalNo: "", |
| | | infoid: undefined, |
| | | donationcategory: "", |
| | | recordstate: "", |
| | | caseNo: "", |
| | | donorName: "", |
| | | gender: "", |
| | | donorno: "", |
| | | treatmenthospitalname: "", |
| | | treatmenthospitalno: "", |
| | | sex: "", |
| | | name: "", |
| | | age: "", |
| | | birthDate: "", |
| | | diagnosis: "", |
| | | allocationStatus: "pending", |
| | | bloodtype: "", |
| | | idcardno: "", |
| | | diagnosisname: "", |
| | | allocationStatus: "0", // 0:未分配;1:已分配;2作废 |
| | | allocationTime: "", |
| | | registrant: "", |
| | | registrationTime: "" |
| | | registrationCode: "", |
| | | registrationName: "", |
| | | registrationTime: "", |
| | | attachments: [] // 添加附件字段 |
| | | }, |
| | | // 附件预览相关 |
| | | attachmentPreviewVisible: false, |
| | | currentAttachmentList: [], |
| | | attachmentPreviewTitle: "", |
| | | dataList: [], |
| | | // 表单验证规则 |
| | | rules: { |
| | | donorName: [ |
| | | name: [ |
| | | { required: true, message: "捐献者姓名不能为空", trigger: "blur" } |
| | | ], |
| | | diagnosis: [ |
| | | diagnosisname: [ |
| | | { required: true, message: "疾病诊断不能为空", trigger: "blur" } |
| | | ], |
| | | recordstate: [ |
| | | { required: true, message: "记录状态不能为空", trigger: "change" } |
| | | ] |
| | | }, |
| | | // 分配记录验证规则 |
| | |
| | | confirmLoading: false, |
| | | // 加载状态 |
| | | loading: false, |
| | | // 选中的器官 |
| | | // 选中的器官(存储字典value) |
| | | selectedOrgans: [], |
| | | // 器官字典 |
| | | organDict: [], |
| | | // 其他器官输入 |
| | | otherOrganInput: "", |
| | | // 医院列表 |
| | | hospitalList: [], |
| | | // 分配记录数据 |
| | | allocationData: { |
| | | records: [] |
| | | serviceDonateorganList: [] |
| | | }, |
| | | // 附件数据 |
| | | attachments: [], |
| | | attachmentFileList: [], |
| | | // 附件相关配置 |
| | | attachmentLimit: 10, |
| | | attachmentAccept: |
| | | ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt", |
| | | // 重分配对话框 |
| | | redistributionDialogVisible: false, |
| | | redistributionForm: { |
| | | organName: "", |
| | | organname: "", |
| | | reason: "" |
| | | }, |
| | | currentRedistributeRecord: null |
| | | currentRedistributeRecord: null, |
| | | // 文件预览相关 |
| | | filePreviewVisible: false, |
| | | currentPreviewFile: null, |
| | | filePreviewTitle: "" |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | // 不完整的记录数量 |
| | | incompleteRecords() { |
| | | return this.allocationData.records.filter( |
| | | if (!this.allocationData.serviceDonateorganList) return 0; |
| | | return this.allocationData.serviceDonateorganList.filter( |
| | | record => |
| | | !record.systemNo || |
| | | !record.applicantTime || |
| | | !record.recipientName || |
| | | !record.transplantHospitalNo |
| | | !record.caseno || |
| | | !record.applicanttime || |
| | | !record.name || |
| | | !record.transplanthospitalno |
| | | ).length; |
| | | }, |
| | | // 唯一医院数量 |
| | | uniqueHospitals() { |
| | | const hospitals = this.allocationData.records |
| | | .map(record => record.transplantHospitalNo) |
| | | if (!this.allocationData.serviceDonateorganList) return 0; |
| | | const hospitals = this.allocationData.serviceDonateorganList |
| | | .map(record => record.transplanthospitalno) |
| | | .filter(Boolean); |
| | | return new Set(hospitals).size; |
| | | }, |
| | | // 获取器官字典 |
| | | organDict() { |
| | | return this.dict.type.sys_Organ || []; |
| | | }, |
| | | // 判断是否需要显示其他输入框 |
| | | showOtherInput() { |
| | | return this.selectedOrgans.includes("C01"); // 假设"其他"的字典值是C01 |
| | | } |
| | | }, |
| | | 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 |
| | | }, |
| | | // 监听其他器官输入变化 |
| | | otherOrganInput(newValue) { |
| | | if (newValue && this.selectedOrgans.includes("C01")) { |
| | | // 更新器官字典中的"其他"标签显示 |
| | | const otherRecord = this.allocationData.serviceDonateorganList.find( |
| | | item => item.organname && item.organname.includes("其他") |
| | | ); |
| | | if (otherRecord) { |
| | | otherRecord.organname = `其他(${newValue})`; |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | const id = this.$route.query.id; |
| | | if (id) { |
| | | this.getDetail(id); |
| | | } else { |
| | | this.generateCaseNo(); |
| | | this.form.registrant = this.currentUser.username || "当前用户"; |
| | | this.initData(); |
| | | }, |
| | | methods: { |
| | | // 根据字典value获取label |
| | | getOrganLabel(organValue) { |
| | | const dictItem = this.organDict.find(item => item.value === organValue); |
| | | return dictItem ? dictItem.label : organValue; |
| | | }, |
| | | |
| | | // 初始化数据 |
| | | initData() { |
| | | const { id, infoid } = this.$route.query; |
| | | |
| | | if (!infoid) { |
| | | this.$message.error("缺少必要的路由参数 infoid"); |
| | | this.$router.back(); |
| | | return; |
| | | } |
| | | |
| | | this.form.infoid = infoid; |
| | | this.form.registrationName = |
| | | this.currentUser.nickName || this.currentUser.username || "当前用户"; |
| | | this.form.registrationTime = new Date() |
| | | .toISOString() |
| | | .replace("T", " ") |
| | | .substring(0, 19); |
| | | |
| | | if (infoid) { |
| | | this.getDetail(infoid); |
| | | } else { |
| | | this.generateDonorNo(); |
| | | } |
| | | this.getOrganDictionary(); |
| | | |
| | | this.getHospitalData(); |
| | | }, |
| | | methods: { |
| | | // 生成住院号 |
| | | generateCaseNo() { |
| | | // 生成捐献者编号 |
| | | generateDonorNo() { |
| | | const timestamp = Date.now().toString(); |
| | | this.form.hospitalNo = "D" + timestamp.slice(-6); |
| | | this.form.caseNo = "C" + timestamp.slice(-6); |
| | | this.form.donorno = "D" + timestamp.slice(-8); |
| | | this.form.caseNo = "CASE" + timestamp.slice(-6); |
| | | }, |
| | | // 获取详情 |
| | | getDetail(id) { |
| | | async getDetail(infoid) { |
| | | this.loading = true; |
| | | getOrganAllocationDetail(id) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | this.form = response.data; |
| | | if (response.data.allocationRecords) { |
| | | this.allocationData.records = response.data.allocationRecords; |
| | | this.selectedOrgans = response.data.allocationRecords.map( |
| | | item => item.organNo |
| | | try { |
| | | const response = await allocationList({ infoid }); |
| | | if ( |
| | | response.code === 200 && |
| | | response.data && |
| | | response.data.length > 0 |
| | | ) { |
| | | const data = response.data[0]; |
| | | |
| | | // 填充表单数据 |
| | | Object.assign(this.form, data); |
| | | |
| | | // 初始化附件 |
| | | if (this.form.attachments) { |
| | | this.attachments = Array.isArray(this.form.attachments) |
| | | ? [...this.form.attachments] |
| | | : []; |
| | | } |
| | | |
| | | // 处理分配记录 |
| | | if (data.serviceDonateorganList) { |
| | | this.allocationData.serviceDonateorganList = Array.isArray( |
| | | data.serviceDonateorganList |
| | | ) |
| | | ? data.serviceDonateorganList |
| | | : []; |
| | | |
| | | // 更新选中的器官 |
| | | this.selectedOrgans = this.allocationData.serviceDonateorganList |
| | | .map(item => { |
| | | // 从后端数据中获取器官的value |
| | | if (item.organno) { |
| | | return item.organno; |
| | | } |
| | | |
| | | // 如果后端只有器官名称,尝试从字典中匹配 |
| | | if (item.organname) { |
| | | const dictItem = this.organDict.find( |
| | | org => |
| | | org.label === item.organname || |
| | | (item.organname && item.organname.includes(org.label)) |
| | | ); |
| | | return dictItem ? dictItem.value : null; |
| | | } |
| | | } |
| | | this.loading = false; |
| | | |
| | | return null; |
| | | }) |
| | | .catch(error => { |
| | | console.error("获取器官分配详情失败:", error); |
| | | this.loading = false; |
| | | this.$message.error("获取详情失败"); |
| | | }); |
| | | }, |
| | | // 获取器官字典 |
| | | getOrganDictionary() { |
| | | getOrganDict().then(response => { |
| | | if (response.code === 200) { |
| | | this.organDict = response.data; |
| | | .filter(Boolean); |
| | | |
| | | // 处理"其他"器官 |
| | | const otherRecord = this.allocationData.serviceDonateorganList.find( |
| | | item => item.organname && item.organname.includes("其他(") |
| | | ); |
| | | if (otherRecord) { |
| | | const match = otherRecord.organname.match(/其他\((.*?)\)/); |
| | | if (match) { |
| | | this.otherOrganInput = match[1]; |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | |
| | | this.$message.success("数据加载成功"); |
| | | } else { |
| | | this.$message.warning("未找到对应的器官分配数据"); |
| | | } |
| | | } catch (error) { |
| | | console.error("获取器官分配详情失败:", error); |
| | | this.$message.error("获取详情失败"); |
| | | } finally { |
| | | this.loading = false; |
| | | } |
| | | }, |
| | | // 获取医院数据 |
| | | getHospitalData() { |
| | | getHospitalList().then(response => { |
| | | if (response.code === 200) { |
| | | this.hospitalList = response.data; |
| | | async getHospitalData() { |
| | | try { |
| | | // TODO: 替换为实际的医院列表接口 |
| | | // 暂时使用模拟数据 |
| | | this.hospitalList = [ |
| | | { hospitalNo: "H001", hospitalName: "北京协和医院" }, |
| | | { hospitalNo: "H002", hospitalName: "上海华山医院" }, |
| | | { hospitalNo: "H003", hospitalName: "广州中山医院" }, |
| | | { hospitalNo: "H004", hospitalName: "武汉同济医院" }, |
| | | { hospitalNo: "H005", hospitalName: "成都华西医院" } |
| | | ]; |
| | | } catch (error) { |
| | | console.error("获取医院数据失败:", error); |
| | | this.$message.error("获取医院数据失败"); |
| | | } |
| | | }); |
| | | }, |
| | | handleAttachmentChange(fileList) { |
| | | console.log(fileList,'测试'); |
| | | |
| | | }, |
| | | // 器官选择状态变化 |
| | | handleOrganSelectionChange(selectedValues) { |
| | | const currentOrganNos = this.allocationData.records.map( |
| | | item => item.organNo |
| | | if (!this.allocationData.serviceDonateorganList) { |
| | | this.allocationData.serviceDonateorganList = []; |
| | | } |
| | | |
| | | const currentOrganValues = this.allocationData.serviceDonateorganList.map( |
| | | item => item.organno |
| | | ); |
| | | |
| | | // 处理互斥逻辑(参考捐献决定页面) |
| | | this.handleExclusiveSelections(selectedValues); |
| | | |
| | | // 新增选择的器官 |
| | | selectedValues.forEach(organValue => { |
| | | if (!currentOrganNos.includes(organValue)) { |
| | | const organInfo = this.organDict.find( |
| | | item => item.value === organValue |
| | | ); |
| | | if (organInfo) { |
| | | this.allocationData.records.push({ |
| | | organName: organInfo.label, |
| | | organNo: organValue, |
| | | id: null, |
| | | allocationId: this.form.id, |
| | | systemNo: "", |
| | | applicantTime: "", |
| | | recipientName: "", |
| | | transplantHospitalNo: "", |
| | | transplantHospitalName: "", |
| | | reallocationReason: "", |
| | | organState: 1 |
| | | }); |
| | | } |
| | | if (!currentOrganValues.includes(organValue)) { |
| | | this.createOrganRecord(organValue); |
| | | } |
| | | }); |
| | | |
| | | // 移除取消选择的器官 |
| | | this.allocationData.records = this.allocationData.records.filter( |
| | | this.allocationData.serviceDonateorganList = this.allocationData.serviceDonateorganList.filter( |
| | | record => { |
| | | if (selectedValues.includes(record.organNo)) { |
| | | if (selectedValues.includes(record.organno)) { |
| | | return true; |
| | | } else { |
| | | if (record.id) { |
| | |
| | | } |
| | | ) |
| | | .then(() => { |
| | | // 实际项目中这里应该调用删除API |
| | | this.allocationData.records = this.allocationData.records.filter( |
| | | r => r.organNo !== record.organNo |
| | | this.allocationData.serviceDonateorganList = this.allocationData.serviceDonateorganList.filter( |
| | | r => r.organno !== record.organno |
| | | ); |
| | | this.$message.success("删除成功"); |
| | | }) |
| | | .catch(() => { |
| | | this.selectedOrgans.push(record.organNo); |
| | | this.selectedOrgans.push(record.organno); |
| | | }); |
| | | return true; // 等待用户确认 |
| | | } else { |
| | |
| | | } |
| | | ); |
| | | }, |
| | | |
| | | // 处理互斥选择(参考捐献决定页面) |
| | | handleExclusiveSelections(selectedValues) { |
| | | // 如果选择了"双肾"(假设字典值为C64),自动取消单独的"左肾"(C64L)和"右肾"(C64R)选择 |
| | | if (selectedValues.includes("C64")) { |
| | | this.selectedOrgans = selectedValues.filter( |
| | | item => item !== "C64L" && item !== "C64R" |
| | | ); |
| | | } |
| | | // 如果选择了"左肾"或"右肾",取消"双肾"选择 |
| | | else if ( |
| | | selectedValues.includes("C64L") || |
| | | selectedValues.includes("C64R") |
| | | ) { |
| | | this.selectedOrgans = selectedValues.filter(item => item !== "C64"); |
| | | } |
| | | |
| | | // 如果选择了"全肺"(假设字典值为C34),自动取消单独的"左肺"(C34L)和"右肺"(C34R)选择 |
| | | if (selectedValues.includes("C34")) { |
| | | this.selectedOrgans = selectedValues.filter( |
| | | item => item !== "C34L" && item !== "C34R" |
| | | ); |
| | | } |
| | | // 如果选择了"左肺"或"右肺",取消"全肺"选择 |
| | | else if ( |
| | | selectedValues.includes("C34L") || |
| | | selectedValues.includes("C34R") |
| | | ) { |
| | | this.selectedOrgans = selectedValues.filter(item => item !== "C34"); |
| | | } |
| | | }, |
| | | |
| | | // 创建器官记录 |
| | | createOrganRecord(organValue) { |
| | | let organName = this.getOrganLabel(organValue); |
| | | |
| | | // 如果是"其他"器官且有输入值 |
| | | if (organValue === "C01" && this.otherOrganInput) { |
| | | organName = `其他(${this.otherOrganInput})`; |
| | | } |
| | | |
| | | this.allocationData.serviceDonateorganList.push({ |
| | | id: null, |
| | | organname: organName, |
| | | organno: organValue, |
| | | caseno: "", |
| | | applicanttime: "", |
| | | name: "", |
| | | transplanthospitalno: "", |
| | | transplantHospitalName: "", |
| | | reallocationreason: "", |
| | | organState: 1 |
| | | }); |
| | | }, |
| | | |
| | | // 医院选择变化 |
| | | handleHospitalChange(row, hospitalNo) { |
| | | const hospital = this.hospitalList.find( |
| | |
| | | // 重分配操作 |
| | | handleRedistribution(row) { |
| | | this.currentRedistributeRecord = row; |
| | | this.redistributionForm.organName = row.organName; |
| | | this.redistributionForm.reason = row.reallocationReason || ""; |
| | | this.redistributionForm.organname = row.organname; |
| | | this.redistributionForm.reason = row.reallocationreason || ""; |
| | | this.redistributionDialogVisible = true; |
| | | }, |
| | | // 确认重分配 |
| | |
| | | } |
| | | |
| | | if (this.currentRedistributeRecord) { |
| | | this.currentRedistributeRecord.reallocationReason = this.redistributionForm.reason; |
| | | this.currentRedistributeRecord.reallocationreason = this.redistributionForm.reason; |
| | | this.$message.success("重分配原因已更新"); |
| | | this.redistributionDialogVisible = false; |
| | | } |
| | |
| | | // 器官行样式 |
| | | getOrganRowClassName({ row }) { |
| | | if ( |
| | | !row.systemNo || |
| | | !row.applicantTime || |
| | | !row.recipientName || |
| | | !row.transplantHospitalNo |
| | | !row.caseno || |
| | | !row.applicanttime || |
| | | !row.name || |
| | | !row.transplanthospitalno |
| | | ) { |
| | | return "warning-row"; |
| | | } |
| | | return ""; |
| | | }, |
| | | // 保存基本信息 |
| | | handleSave() { |
| | | this.$refs.form.validate(valid => { |
| | | if (valid) { |
| | | this.saveLoading = true; |
| | | const apiMethod = this.form.id |
| | | ? updateOrganAllocation |
| | | : addOrganAllocation; |
| | | async handleSave() { |
| | | this.$refs.form.validate(async valid => { |
| | | if (!valid) { |
| | | this.$message.warning("请完善表单信息"); |
| | | return; |
| | | } |
| | | |
| | | apiMethod(this.form) |
| | | .then(response => { |
| | | this.saveLoading = true; |
| | | try { |
| | | const saveData = { |
| | | ...this.form, |
| | | attachments: this.attachments, |
| | | serviceDonateorganList: |
| | | this.allocationData.serviceDonateorganList || [] |
| | | }; |
| | | console.log(this.form.recordstate); |
| | | this.form.recordstate = 1; |
| | | const apiMethod = this.form.id ? allocationedit : allocationadd; |
| | | const response = await apiMethod(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | this.$message.success("保存成功"); |
| | | if (!this.form.id) { |
| | | if (!this.form.id && response.data && response.data.id) { |
| | | this.form.id = response.data.id; |
| | | this.$router.replace({ |
| | | query: { ...this.$route.query, id: this.form.id } |
| | | }); |
| | | } |
| | | } else { |
| | | this.$message.error("保存失败:" + (response.msg || "未知错误")); |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | } catch (error) { |
| | | console.error("保存失败:", error); |
| | | this.$message.error("保存失败"); |
| | | }) |
| | | .finally(() => { |
| | | } finally { |
| | | this.saveLoading = false; |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | // 保存分配记录 |
| | | handleSaveAllocation() { |
| | | async handleSaveAllocation() { |
| | | if (!this.form.id) { |
| | | this.$message.warning("请先保存基本信息"); |
| | | return; |
| | | } |
| | | |
| | | this.saveLoading = true; |
| | | saveAllocationRecords(this.form.id, this.allocationData.records) |
| | | .then(response => { |
| | | try { |
| | | const saveData = { |
| | | ...this.form, |
| | | attachments: this.attachments, |
| | | serviceDonateorganList: |
| | | this.allocationData.serviceDonateorganList || [] |
| | | }; |
| | | |
| | | const response = await allocationedit(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | this.$message.success("分配记录保存成功"); |
| | | } else { |
| | | this.$message.error( |
| | | "保存分配记录失败:" + (response.msg || "未知错误") |
| | | ); |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | } catch (error) { |
| | | console.error("保存分配记录失败:", error); |
| | | this.$message.error("保存分配记录失败"); |
| | | }) |
| | | .finally(() => { |
| | | } finally { |
| | | this.saveLoading = false; |
| | | }); |
| | | } |
| | | }, |
| | | // 确认完成分配 |
| | | handleConfirmAllocation() { |
| | | async handleConfirmAllocation() { |
| | | if (this.incompleteRecords > 0) { |
| | | this.$message.warning("请先完善所有分配记录的信息"); |
| | | return; |
| | |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | .then(async () => { |
| | | this.confirmLoading = true; |
| | | this.form.allocationStatus = "allocated"; |
| | | this.form.allocationStatus = "1"; |
| | | this.form.allocationTime = new Date() |
| | | .toISOString() |
| | | .replace("T", " ") |
| | | .substring(0, 19); |
| | | |
| | | updateOrganAllocation(this.form) |
| | | .then(response => { |
| | | try { |
| | | const saveData = { |
| | | ...this.form, |
| | | attachments: this.attachments, |
| | | serviceDonateorganList: |
| | | this.allocationData.serviceDonateorganList || [] |
| | | }; |
| | | |
| | | const response = await allocationedit(saveData); |
| | | |
| | | if (response.code === 200) { |
| | | this.$message.success("器官分配已完成"); |
| | | } else { |
| | | this.$message.error( |
| | | "确认分配失败:" + (response.msg || "未知错误") |
| | | ); |
| | | this.form.allocationStatus = "0"; |
| | | this.form.allocationTime = ""; |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | } catch (error) { |
| | | console.error("确认分配失败:", error); |
| | | this.$message.error("确认分配失败"); |
| | | }) |
| | | .finally(() => { |
| | | this.form.allocationStatus = "0"; |
| | | this.form.allocationTime = ""; |
| | | } finally { |
| | | this.confirmLoading = false; |
| | | }); |
| | | } |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | // 上传附件 |
| | | handleUploadAttachment() { |
| | | // 附件上传逻辑 |
| | | this.$message.info("附件上传功能"); |
| | | |
| | | // 附件相关方法 |
| | | /** 附件变化处理 */ |
| | | handleAttachmentChange(fileList) { |
| | | this.attachmentFileList = fileList; |
| | | }, |
| | | // 预览附件 |
| | | handlePreviewAttachment(attachment) { |
| | | // 附件预览逻辑 |
| | | this.$message.info("附件预览功能"); |
| | | }, |
| | | // 下载附件 |
| | | handleDownloadAttachment(attachment) { |
| | | // 附件下载逻辑 |
| | | this.$message.info("附件下载功能"); |
| | | }, |
| | | // 删除附件 |
| | | handleRemoveAttachment(attachment) { |
| | | this.$confirm("确定要删除这个附件吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | |
| | | /** 附件移除处理 */ |
| | | handleAttachmentRemove(file) { |
| | | if (file.url) { |
| | | const index = this.attachments.findIndex( |
| | | item => item.path === file.url || item.fileUrl === file.url |
| | | ); |
| | | if (index > -1) { |
| | | this.attachments.splice(index, 1); |
| | | this.$message.success("附件删除成功"); |
| | | }) |
| | | .catch(() => {}); |
| | | } |
| | | } |
| | | }, |
| | | // 获取文件图标 |
| | | getFileIcon(fileName) { |
| | | const ext = fileName |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | const iconMap = { |
| | | pdf: "el-icon-document", |
| | | doc: "el-icon-document", |
| | | docx: "el-icon-document", |
| | | xls: "el-icon-document", |
| | | xlsx: "el-icon-document", |
| | | jpg: "el-icon-picture", |
| | | jpeg: "el-icon-picture", |
| | | png: "el-icon-picture" |
| | | |
| | | /** 上传成功处理 */ |
| | | 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") |
| | | }; |
| | | return iconMap[ext] || "el-icon-document"; |
| | | |
| | | if (!Array.isArray(this.attachments)) { |
| | | this.attachments = []; |
| | | } |
| | | |
| | | this.attachments.push(attachmentObj); |
| | | this.attachmentFileList = fileList; |
| | | this.$message.success("文件上传成功"); |
| | | } |
| | | }, |
| | | // 获取文件类型 |
| | | |
| | | /** 上传错误处理 */ |
| | | 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, |
| | | fileUrl: file.path || file.fileUrl, |
| | | fileType: this.getFileType(file.fileName) |
| | | }; |
| | | // this.filePreviewTitle = file.fileName; |
| | | this.filePreviewVisible = true; |
| | | }, |
| | | handleDownloadAttachment(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("文件路径不存在,无法下载"); |
| | | } |
| | | }, |
| | | |
| | | /** 获取文件类型 */ |
| | | getFileType(fileName) { |
| | | const ext = fileName |
| | | if (!fileName) return "other"; |
| | | const extension = fileName |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | const typeMap = { |
| | | pdf: "PDF", |
| | | doc: "DOC", |
| | | docx: "DOCX", |
| | | xls: "XLS", |
| | | xlsx: "XLSX", |
| | | jpg: "JPG", |
| | | jpeg: "JPEG", |
| | | png: "PNG" |
| | | }; |
| | | return typeMap[ext] || ext.toUpperCase(); |
| | | 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"; |
| | | }, |
| | | // 文件大小格式化 |
| | | formatFileSize(size) { |
| | | if (size === 0) return "0 B"; |
| | | |
| | | /** 获取文件图标颜色 */ |
| | | getFileIconColor(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const colorMap = { |
| | | image: "#67C23A", |
| | | pdf: "#F56C6C", |
| | | office: "#409EFF", |
| | | other: "#909399" |
| | | }; |
| | | return colorMap[type] || "#909399"; |
| | | }, |
| | | |
| | | /** 获取文件标签类型 */ |
| | | getFileTagType(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const typeMap = { |
| | | image: "success", |
| | | pdf: "danger", |
| | | office: "primary", |
| | | other: "info" |
| | | }; |
| | | return typeMap[type] || "info"; |
| | | }, |
| | | |
| | | /** 获取文件类型文本 */ |
| | | getFileTypeText(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const textMap = { |
| | | image: "图片", |
| | | pdf: "PDF", |
| | | office: "文档", |
| | | other: "其他" |
| | | }; |
| | | return textMap[type] || "未知"; |
| | | }, |
| | | |
| | | /** 检查是否可预览 */ |
| | | isPreviewable(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | return ["image", "pdf"].includes(type); |
| | | }, |
| | | |
| | | /** 获取文件扩展名 */ |
| | | getFileExtension(filename) { |
| | | return filename |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | }, |
| | | |
| | | /** 格式化文件大小 */ |
| | | formatFileSize(bytes) { |
| | | if (!bytes || bytes === 0) return "0 B"; |
| | | const k = 1024; |
| | | const sizes = ["B", "KB", "MB", "GB"]; |
| | | const i = Math.floor(Math.log(size) / Math.log(k)); |
| | | return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; |
| | | const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| | | return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; |
| | | }, |
| | | // 时间格式化 |
| | | parseTime(time) { |
| | | if (!time) return ""; |
| | | const date = new Date(time); |
| | | return `${date.getFullYear()}-${(date.getMonth() + 1) |
| | | .toString() |
| | | .padStart(2, "0")}-${date |
| | | .getDate() |
| | | .toString() |
| | | .padStart(2, "0")} ${date |
| | | .getHours() |
| | | .toString() |
| | | .padStart(2, "0")}:${date |
| | | .getMinutes() |
| | | .toString() |
| | | .padStart(2, "0")}`; |
| | | |
| | | /** 日期时间格式化 */ |
| | | formatDateTime(dateTime) { |
| | | if (!dateTime) return ""; |
| | | try { |
| | | const date = new Date(dateTime); |
| | | if (isNaN(date.getTime())) return dateTime; |
| | | const year = date.getFullYear(); |
| | | const month = String(date.getMonth() + 1).padStart(2, "0"); |
| | | const day = String(date.getDate()).padStart(2, "0"); |
| | | const hours = String(date.getHours()).padStart(2, "0"); |
| | | const minutes = String(date.getMinutes()).padStart(2, "0"); |
| | | return `${year}-${month}-${day} ${hours}:${minutes}`; |
| | | } catch (error) { |
| | | return dateTime; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | |
| | | margin-bottom: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
| | | padding: 20px; |
| | | background: #fafafa; |
| | | } |
| | | |
| | | .attachment-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | margin-bottom: 16px; |
| | | padding-bottom: 8px; |
| | | border-bottom: 1px solid #ebeef5; |
| | | } |
| | | |
| | | .attachment-title { |
| | | font-weight: 600; |
| | | color: #303133; |
| | | } |
| | | |
| | | .attachment-tip { |
| | | font-size: 12px; |
| | | color: #909399; |
| | | margin-left: auto; |
| | | } |
| | | |
| | | .attachment-list { |
| | | margin-top: 16px; |
| | | } |
| | | |
| | | .list-title { |
| | | font-weight: bold; |
| | | margin-bottom: 12px; |
| | | color: #303133; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .file-name { |
| | | font-size: 13px; |
| | | margin-left: 8px; |
| | | } |
| | | |
| | | .detail-title { |
| | |
| | | } |
| | | |
| | | .stat-label { |
| | | /* font-size: 12px; */ |
| | | opacity: 0.9; |
| | | |
| | | /* color: #606266; */ |
| | | margin-bottom: 5px; |
| | | } |
| | | |
| | | .stat-value { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | /* color: #303133; */ |
| | | } |
| | | |
| | | /* 空状态样式 */ |