<template>
|
<div class="organ-allocation-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="handleConfirmAllocation"
|
:disabled="form.allocationStatus == '1'"
|
:loading="confirmLoading"
|
>
|
确认分配
|
</el-button>
|
</div>
|
</div>
|
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="分配状态" prop="allocationStatus">
|
<el-select
|
v-model="form.allocationStatus"
|
placeholder="请选择分配状态"
|
>
|
<el-option
|
v-for="dict in dict.type.organ_allocation_status || []"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="分配时间" prop="allocationTime">
|
<el-date-picker
|
v-model="form.allocationTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
:disabled="form.allocationStatus == '1'"
|
/>
|
</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" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="登记时间" prop="registrationTime">
|
<el-date-picker
|
v-model="form.registrationTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!-- 器官分配记录部分 -->
|
<el-card class="allocation-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官分配记录</span>
|
<div style="float: right;">
|
<el-tag
|
:type="
|
form.allocationStatus == '1'
|
? 'success'
|
: form.allocationStatus == '2'
|
? 'danger'
|
: 'warning'
|
"
|
>
|
{{
|
form.allocationStatus == "1"
|
? "已分配"
|
: form.allocationStatus == "2"
|
? "作废"
|
: "未分配"
|
}}
|
</el-tag>
|
</div>
|
</div>
|
|
<el-form
|
ref="allocationForm"
|
:rules="allocationRules"
|
:model="allocationData"
|
label-position="right"
|
>
|
<el-row>
|
<el-col>
|
<el-form-item label-width="100px" label="分配器官">
|
<el-checkbox-group
|
v-model="selectedOrgans"
|
@change="handleOrganSelectionChange"
|
>
|
<el-checkbox
|
v-for="dict in dict.type.sys_Organ || []"
|
:key="dict.value"
|
:label="dict.value"
|
:disabled="form.allocationStatus == '1'"
|
>
|
{{ dict.label }}
|
</el-checkbox>
|
</el-checkbox-group>
|
<el-input
|
v-if="showOtherInput"
|
v-model="otherOrganInput"
|
placeholder="请输入其他器官名称"
|
style="margin-top: 10px; width: 300px;"
|
:disabled="form.allocationStatus == '1'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col>
|
<el-form-item>
|
<el-table
|
:data="allocationData.serviceDonateorganList"
|
v-loading="loading"
|
border
|
style="width: 100%"
|
:row-class-name="getOrganRowClassName"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="60"
|
align="center"
|
fixed
|
></el-table-column>
|
|
<el-table-column
|
label="分配状态"
|
align="center"
|
width="100"
|
prop="allocationstatus"
|
fixed
|
>
|
<template slot-scope="scope">
|
<el-tag
|
:type="
|
getAllocationStatusTagType(scope.row.allocationstatus)
|
"
|
size="small"
|
>
|
{{ getAllocationStatusText(scope.row.allocationstatus) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="器官名称"
|
align="center"
|
width="120"
|
prop="organname"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.organname"
|
placeholder="器官名称"
|
:disabled="true"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="分配系统编号"
|
align="center"
|
width="150"
|
prop="caseno"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.caseno"
|
placeholder="分配系统编号"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="分配开始时间"
|
align="center"
|
width="180"
|
prop="applicanttime"
|
>
|
<template slot-scope="scope">
|
<el-date-picker
|
clearable
|
size="small"
|
style="width: 100%"
|
v-model="scope.row.applicanttime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择开始接收时间"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="分配接收时间"
|
align="center"
|
width="180"
|
prop="organgettime"
|
>
|
<template slot-scope="scope">
|
<el-date-picker
|
clearable
|
size="small"
|
style="width: 100%"
|
v-model="scope.row.organgettime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择分配接收时间"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="受体姓氏"
|
align="center"
|
width="120"
|
prop="name"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.name"
|
placeholder="受体姓氏"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植医院"
|
align="center"
|
width="200"
|
prop="transplanthospitalno"
|
>
|
<template slot-scope="scope">
|
<div>
|
<org-selecter
|
ref="tranHosSelect"
|
:org-type="'4'"
|
:dataList="dataList"
|
v-model="scope.row.transplanthospitalno"
|
style="width: 100%"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</div>
|
</template>
|
</el-table-column>
|
|
<!-- 修改template中的说明列 -->
|
<el-table-column
|
label="说明"
|
align="center"
|
prop="reallocationreason"
|
min-width="200"
|
>
|
<template slot-scope="scope">
|
<div v-if="scope.row.allocationstatus != '3'">
|
<el-input
|
type="textarea"
|
clearable
|
v-model="scope.row.reallocationreason"
|
placeholder="请输入说明"
|
:disabled="
|
form.allocationStatus == '1' ||
|
scope.row.allocationstatus == '3'
|
"
|
/>
|
</div>
|
<div v-else>
|
<!-- 重分配记录：显示详细查看按钮 -->
|
<el-button
|
v-if="scope.row.reallocationreason"
|
type="text"
|
size="small"
|
@click="handleViewRedistributionDetail(scope.row)"
|
style="color: #e6a23c;"
|
>
|
<i class="el-icon-document"></i>
|
查看重分配详情
|
</el-button>
|
<span v-else class="no-data">-</span>
|
|
<!-- 保留原有的工具提示（可移除或保留） -->
|
<el-tooltip
|
v-if="scope.row.redistributionInfo"
|
:content="
|
formatRedistributionTooltip(
|
scope.row.redistributionInfo
|
)
|
"
|
placement="top"
|
>
|
<el-button
|
type="text"
|
size="small"
|
style="margin-left: 5px;"
|
>
|
<i class="el-icon-info"></i>
|
</el-button>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
align="center"
|
width="120"
|
class-name="small-padding fixed-width"
|
v-if="form.allocationStatus !== '1'"
|
fixed="right"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-copy-document"
|
@click="handleRedistribution(scope.row)"
|
:disabled="
|
scope.row.allocationstatus == '3' || !scope.row.caseno
|
"
|
style="color: #e6a23c;"
|
>
|
{{
|
scope.row.allocationstatus == "3"
|
? "已重分配"
|
: "重分配"
|
}}
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 分配统计信息 -->
|
<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.serviceDonateorganList.length }} 个</span
|
>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">待审核:</span>
|
<span class="stat-value">{{ pendingReviewCount }} 个</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">涉及医院:</span>
|
<span class="stat-value">{{ uniqueHospitals }} 家</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">重分配:</span>
|
<span class="stat-value">{{ redistributedCount }} 个</span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<div v-else class="empty-allocation">
|
<el-empty description="暂无分配记录" :image-size="80">
|
<span>请先选择要分配的器官</span>
|
</el-empty>
|
</div>
|
</el-form>
|
</el-card>
|
|
<!-- 附件管理部分优化 -->
|
<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>
|
|
<!-- 使用 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="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="200" 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="redistributionDialogVisible"
|
width="500px"
|
@close="handleRedistributionDialogClose"
|
>
|
<el-form
|
:model="redistributionForm"
|
:rules="redistributionRules"
|
ref="redistributionFormRef"
|
label-width="100px"
|
>
|
<el-form-item label="原器官信息">
|
<el-input v-model="redistributionForm.organname" readonly />
|
</el-form-item>
|
<el-form-item label="重分配原因" prop="reason" required>
|
<el-input
|
type="textarea"
|
:rows="4"
|
v-model="redistributionForm.reason"
|
placeholder="请输入重分配原因"
|
/>
|
</el-form-item>
|
<el-form-item label="重分配时间" prop="redistributionTime" required>
|
<el-date-picker
|
v-model="redistributionForm.redistributionTime"
|
type="datetime"
|
placeholder="请选择重分配时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="重分配附件">
|
<UploadAttachment
|
ref="redistributionAttachmentUpload"
|
:file-list="redistributionAttachmentList"
|
:limit="5"
|
:accept="attachmentAccept"
|
:multiple="true"
|
@change="handleRedistributionChange"
|
@upload-success="handleRedistributionUploadSuccess"
|
@upload-error="handleRedistributionUploadError"
|
@remove="handleRedistributionAttachmentRemove"
|
/>
|
<div style="margin-top: 5px; font-size: 12px; color: #999;">
|
支持上传重分配相关文件 (最多5个)
|
</div>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="redistributionDialogVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click="handleRedistributionConfirm"
|
:loading="redistributionLoading"
|
>
|
确认重分配
|
</el-button>
|
</div>
|
</el-dialog>
|
<!-- 在template中添加重分配详情弹窗 -->
|
<el-dialog
|
title="重分配详情"
|
:visible.sync="redistributionDetailDialogVisible"
|
width="600px"
|
>
|
<div v-loading="redistributionDetailLoading">
|
<div v-if="currentRedistributionDetail" style="padding: 20px;">
|
<!-- 基本信息 -->
|
<el-descriptions title="重分配信息" :column="2" border>
|
<el-descriptions-item label="器官名称">
|
{{ currentRedistributionDetail.organname || "-" }}
|
</el-descriptions-item>
|
<el-descriptions-item label="操作人">
|
{{ currentRedistributionDetail.operator || "-" }}
|
</el-descriptions-item>
|
<el-descriptions-item label="操作时间">
|
{{
|
currentRedistributionDetail.operatorTime
|
? formatDateTime(currentRedistributionDetail.operatorTime)
|
: "-"
|
}}
|
</el-descriptions-item>
|
<el-descriptions-item label="重分配时间">
|
{{
|
currentRedistributionDetail.redistributionTime
|
? formatDateTime(
|
currentRedistributionDetail.redistributionTime
|
)
|
: "-"
|
}}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- 重分配原因 -->
|
<div style="margin-top: 20px;">
|
<div class="section-title">重分配原因</div>
|
<div
|
class="section-content"
|
style="padding: 10px; background: #f5f7fa; border-radius: 4px;"
|
>
|
{{ currentRedistributionDetail.reason || "无" }}
|
</div>
|
</div>
|
|
<!-- 重分配附件 -->
|
<div
|
style="margin-top: 20px;"
|
v-if="
|
currentRedistributionDetail.attachments &&
|
currentRedistributionDetail.attachments.length > 0
|
"
|
>
|
<div class="section-title">
|
重分配附件 ({{ currentRedistributionDetail.attachments.length }})
|
</div>
|
<div class="redistribution-attachments">
|
<el-table
|
:data="currentRedistributionDetail.attachments"
|
size="small"
|
style="width: 100%"
|
>
|
<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="150">
|
<template slot-scope="scope">
|
<span>{{
|
scope.row.uploadTime
|
? formatDateTime(scope.row.uploadTime)
|
: "-"
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="primary"
|
@click="handleRedistributionAttachmentPreview(scope.row)"
|
:disabled="!isPreviewable(scope.row.fileName)"
|
>
|
预览
|
</el-button>
|
<el-button
|
size="mini"
|
type="success"
|
@click="handleRedistributionAttachmentDownload(scope.row)"
|
>
|
下载
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div
|
v-else
|
style="margin-top: 20px; text-align: center; color: #909399;"
|
>
|
无重分配附件
|
</div>
|
</div>
|
</div>
|
<div slot="footer">
|
<el-button @click="redistributionDetailDialogVisible = false"
|
>关闭</el-button
|
>
|
</div>
|
</el-dialog>
|
<!-- 附件预览对话框 -->
|
<FilePreviewDialog
|
:visible="filePreviewVisible"
|
:file="currentPreviewFile"
|
@close="filePreviewVisible = false"
|
@download="handleDownloadAttachment"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
allocationList,
|
allocationadd,
|
allocationedit,
|
donateorganBaseinfoInfo
|
} from "@/api/businessApi";
|
import UploadAttachment from "@/components/UploadAttachment";
|
import FilePreviewDialog from "@/components/FilePreviewDialog";
|
import OrgSelecter from "@/views/project/components/orgselect";
|
import CaseBasicInfo from "@/components/CaseBasicInfo";
|
import dayjs from "dayjs";
|
|
export default {
|
name: "OrganAllocationDetail",
|
components: {
|
UploadAttachment,
|
OrgSelecter,
|
FilePreviewDialog,
|
CaseBasicInfo
|
},
|
dicts: [
|
"sys_BloodType",
|
"sys_DonationCategory",
|
"sys_RecordState",
|
"sys_Organ",
|
"organ_allocation_status"
|
],
|
data() {
|
return {
|
caseId: null,
|
// 重分配详情相关
|
redistributionDetailDialogVisible: false,
|
redistributionDetailLoading: false,
|
currentRedistributionDetail: null,
|
// 表单数据
|
form: {
|
id: undefined,
|
infoid: undefined,
|
donationcategory: "",
|
caseNo: "",
|
donorno: "",
|
treatmenthospitalname: "",
|
treatmenthospitalno: "",
|
sex: "",
|
name: "",
|
age: "",
|
bloodtype: "",
|
idcardno: "",
|
diagnosisname: "",
|
allocationStatus: "0", // 0:未分配；1：已分配；2作废
|
allocationTime: "",
|
registrationCode: "",
|
registrationName: "",
|
registrationTime: "",
|
attachments: [] // 添加附件字段
|
},
|
// 附件预览相关
|
attachmentPreviewVisible: false,
|
currentAttachmentList: [],
|
attachmentPreviewTitle: "",
|
dataList: [],
|
// 表单验证规则
|
rules: {
|
name: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
diagnosisname: [
|
{ required: true, message: "疾病诊断不能为空", trigger: "blur" }
|
]
|
},
|
// 分配记录验证规则
|
allocationRules: {},
|
// 重分配验证规则
|
redistributionRules: {
|
reason: [
|
{ required: true, message: "重分配原因不能为空", trigger: "blur" }
|
],
|
redistributionTime: [
|
{ required: true, message: "重分配时间不能为空", trigger: "blur" }
|
]
|
},
|
// 保存加载状态
|
saveLoading: false,
|
confirmLoading: false,
|
redistributionLoading: false,
|
// 加载状态
|
loading: false,
|
// 选中的器官（存储字典value）
|
selectedOrgans: [],
|
// 其他器官输入
|
otherOrganInput: "",
|
// 医院列表
|
hospitalList: [],
|
// 分配记录数据
|
allocationData: {
|
serviceDonateorganList: []
|
},
|
// 附件数据
|
attachments: [],
|
attachmentFileList: [],
|
// 附件相关配置
|
attachmentLimit: 10,
|
attachmentAccept:
|
".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
|
// 重分配对话框
|
redistributionDialogVisible: false,
|
redistributionForm: {
|
organname: "",
|
reason: "",
|
redistributionTime: ""
|
},
|
redistributionAttachmentList: [],
|
redistributionFormRef: null,
|
currentRedistributeRecord: null,
|
// 文件预览相关
|
filePreviewVisible: false,
|
currentPreviewFile: null,
|
filePreviewTitle: ""
|
};
|
},
|
computed: {
|
// 当前用户信息
|
currentUser() {
|
return JSON.parse(sessionStorage.getItem("user") || "{}");
|
},
|
// 不完整的记录数量
|
incompleteRecords() {
|
if (!this.allocationData.serviceDonateorganList) return 0;
|
return this.allocationData.serviceDonateorganList.filter(
|
record =>
|
!record.caseno ||
|
!record.applicanttime ||
|
!record.organgettime ||
|
!record.name ||
|
!record.transplanthospitalno
|
).length;
|
},
|
// 待审核记录数量
|
pendingReviewCount() {
|
if (!this.allocationData.serviceDonateorganList) return 0;
|
return this.allocationData.serviceDonateorganList.filter(
|
record => record.allocationstatus == "0"
|
).length;
|
},
|
// 重分配记录数量
|
redistributedCount() {
|
if (!this.allocationData.serviceDonateorganList) return 0;
|
return this.allocationData.serviceDonateorganList.filter(
|
record => record.allocationstatus == "3"
|
).length;
|
},
|
// 唯一医院数量
|
uniqueHospitals() {
|
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
|
},
|
// 分配状态字典映射
|
allocationStatusDict() {
|
return {
|
"0": { label: "提交分配", type: "info" },
|
"1": { label: "审核通过", type: "success" },
|
"2": { label: "审核拒绝", type: "danger" },
|
"3": { label: "重分配", type: "warning" }
|
};
|
}
|
},
|
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() {
|
this.caseId = this.$route.query.infoid;
|
this.initData();
|
},
|
methods: {
|
// 获取分配状态标签类型
|
getAllocationStatusTagType(status) {
|
const statusMap = this.allocationStatusDict;
|
return statusMap[status] ? statusMap[status].type : "info";
|
},
|
|
// 获取分配状态文本
|
getAllocationStatusText(status) {
|
const statusMap = this.allocationStatusDict;
|
return statusMap[status] ? statusMap[status].label : "未知状态";
|
},
|
|
// 查看重分配详情
|
handleViewRedistributionDetail(row) {
|
this.redistributionDetailLoading = true;
|
this.redistributionDetailDialogVisible = true;
|
|
try {
|
if (row.redistributionInfo) {
|
// 解析重分配信息
|
const redistributionInfo = JSON.parse(row.redistributionInfo);
|
this.currentRedistributionDetail = {
|
organname: row.organname || "-",
|
...redistributionInfo
|
};
|
} else {
|
this.currentRedistributionDetail = {
|
organname: row.organname || "-",
|
reason: "无重分配原因",
|
attachments: []
|
};
|
}
|
} catch (error) {
|
console.error("解析重分配信息失败:", error);
|
this.$message.error("重分配信息解析失败");
|
this.currentRedistributionDetail = {
|
organname: row.organname || "-",
|
reason: "重分配信息格式错误",
|
attachments: []
|
};
|
} finally {
|
this.redistributionDetailLoading = false;
|
}
|
},
|
|
// 预览重分配附件
|
handleRedistributionAttachmentPreview(file) {
|
this.currentPreviewFile = {
|
fileName: file.fileName,
|
fileUrl: file.path || file.fileUrl,
|
fileType: this.getFileType(file.fileName)
|
};
|
this.filePreviewVisible = true;
|
},
|
|
// 下载重分配附件
|
handleRedistributionAttachmentDownload(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("文件路径不存在，无法下载");
|
}
|
},
|
|
// 增强格式化工具提示方法
|
formatRedistributionTooltip(redistributionInfo) {
|
if (!redistributionInfo) return "";
|
try {
|
const info = JSON.parse(redistributionInfo);
|
let tooltip = `重分配原因: ${info.reason}\n重分配时间: ${info.redistributionTime}`;
|
|
// 添加附件信息
|
if (info.attachments && info.attachments.length > 0) {
|
tooltip += `\n\n附件(${info.attachments.length}个):`;
|
info.attachments.forEach((att, index) => {
|
tooltip += `\n${index + 1}. ${att.fileName}`;
|
});
|
}
|
|
return tooltip;
|
} catch (error) {
|
return redistributionInfo;
|
}
|
},
|
// 根据字典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, id);
|
} else {
|
this.generateDonorNo();
|
}
|
|
this.getHospitalData();
|
},
|
|
// 生成捐献者编号
|
generateDonorNo() {
|
const timestamp = Date.now().toString();
|
this.form.donorno = "D" + timestamp.slice(-8);
|
this.form.caseNo = "CASE" + timestamp.slice(-6);
|
},
|
|
// 解析 filePatch 字段
|
parseFilePatch(filePatch) {
|
if (!filePatch) {
|
this.form.attachments = [];
|
return;
|
}
|
|
try {
|
this.form.attachments = JSON.parse(filePatch);
|
} catch (error) {
|
console.error("解析 filePatch 字段失败:", error);
|
this.form.attachments = [];
|
}
|
},
|
|
// 获取详情
|
async getDetail(infoid, id) {
|
this.loading = true;
|
try {
|
const response = await allocationList({ infoid });
|
if (response.code == 200 && response.data && response.data.length > 0) {
|
const data = response.data[0];
|
|
data.allocationStatus = JSON.stringify(data.allocationStatus);
|
// 填充表单数据
|
Object.assign(this.form, data);
|
// 转换附件为集合
|
this.parseFilePatch(this.form.fileName);
|
|
// 初始化附件
|
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.map(item => {
|
// 确保每条记录都有分配状态字段，默认值为0
|
const allocationstatus = item.allocationstatus || "0";
|
let redistributionInfo = null;
|
|
// 解析重分配信息
|
if (allocationstatus == "3" && item.reallocationreason) {
|
try {
|
redistributionInfo = JSON.parse(item.reallocationreason);
|
console.log(redistributionInfo);
|
} catch (error) {
|
console.warn("解析重分配信息失败:", error);
|
redistributionInfo = item.reallocationreason;
|
}
|
}
|
|
return {
|
...item,
|
allocationstatus,
|
redistributionInfo: redistributionInfo
|
? JSON.stringify(redistributionInfo)
|
: null
|
};
|
})
|
: [];
|
|
// 更新选中的器官
|
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;
|
}
|
|
return null;
|
})
|
.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;
|
}
|
},
|
|
// 获取医院数据
|
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("获取医院数据失败");
|
}
|
},
|
|
// 器官选择状态变化
|
handleOrganSelectionChange(selectedValues) {
|
if (!this.allocationData.serviceDonateorganList) {
|
this.allocationData.serviceDonateorganList = [];
|
}
|
|
const currentOrganValues = this.allocationData.serviceDonateorganList.map(
|
item => item.organno
|
);
|
|
// 处理互斥逻辑（参考捐献决定页面）
|
this.handleExclusiveSelections(selectedValues);
|
|
// 新增选择的器官
|
selectedValues.forEach(organValue => {
|
if (!currentOrganValues.includes(organValue)) {
|
this.createOrganRecord(organValue);
|
}
|
});
|
|
// 移除取消选择的器官
|
this.allocationData.serviceDonateorganList = this.allocationData.serviceDonateorganList.filter(
|
record => {
|
if (selectedValues.includes(record.organno)) {
|
return true;
|
} else {
|
if (record.id) {
|
this.$confirm(
|
"删除器官分配数据后将无法恢复，您确认删除该条记录吗？",
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
)
|
.then(() => {
|
this.allocationData.serviceDonateorganList = this.allocationData.serviceDonateorganList.filter(
|
r => r.organno !== record.organno
|
);
|
this.$message.success("删除成功");
|
})
|
.catch(() => {
|
this.selectedOrgans.push(record.organno);
|
});
|
return true; // 等待用户确认
|
} else {
|
return false; // 直接删除新记录
|
}
|
}
|
}
|
);
|
},
|
|
// 处理互斥选择（参考捐献决定页面）
|
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: "",
|
organgettime: "",
|
name: "",
|
transplanthospitalno: "",
|
transplantHospitalName: "",
|
reallocationreason: "",
|
allocationstatus: "0", // 默认提交分配状态
|
redistributionInfo: null,
|
organState: 1
|
});
|
},
|
|
// 医院选择变化
|
handleHospitalChange(row, hospitalNo) {
|
const hospital = this.hospitalList.find(
|
item => item.hospitalNo == hospitalNo
|
);
|
if (hospital) {
|
row.transplantHospitalName = hospital.hospitalName;
|
}
|
},
|
|
// 重分配操作
|
handleRedistribution(row) {
|
this.currentRedistributeRecord = row;
|
this.redistributionForm.organname = row.organname;
|
this.redistributionForm.reason = "";
|
this.redistributionForm.redistributionTime = new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
this.redistributionAttachmentList = [];
|
this.redistributionDialogVisible = true;
|
},
|
|
// 重分配对话框关闭
|
handleRedistributionDialogClose() {
|
this.redistributionForm = {
|
organname: "",
|
reason: "",
|
redistributionTime: ""
|
};
|
this.redistributionAttachmentList = [];
|
this.currentRedistributeRecord = null;
|
},
|
|
// 重分配附件上传成功
|
handleRedistributionUploadSuccess({ 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")
|
};
|
console.log(11);
|
|
this.redistributionAttachmentList = fileList;
|
this.$message.success("重分配附件上传成功");
|
}
|
},
|
|
// 重分配附件上传错误
|
handleRedistributionUploadError({ file, fileList, error }) {
|
console.error("重分配附件上传失败:", error);
|
this.$message.error("重分配附件上传失败，请重试");
|
},
|
|
// 重分配附件移除
|
handleRedistributionAttachmentRemove(file) {
|
if (file.url) {
|
const index = this.redistributionAttachmentList.findIndex(
|
item => item.path == file.url || item.fileUrl == file.url
|
);
|
if (index > -1) {
|
this.redistributionAttachmentList.splice(index, 1);
|
}
|
}
|
},
|
|
// 确认重分配
|
async handleRedistributionConfirm() {
|
this.$refs.redistributionFormRef.validate(async valid => {
|
if (!valid) {
|
this.$message.warning("请完善重分配信息");
|
return;
|
}
|
console.log(1, this.redistributionAttachmentList);
|
|
this.redistributionLoading = true;
|
|
try {
|
// 构建重分配信息对象
|
const redistributionInfo = {
|
reason: this.redistributionForm.reason,
|
redistributionTime: this.redistributionForm.redistributionTime,
|
attachments: this.redistributionAttachmentList.map(att => ({
|
// fileName: att.fileName,
|
// path: att.path || att.fileUrl,
|
// fileUrl: att.path || att.fileUrl,
|
// fileType: this.getFileExtension(att.name),
|
// fileSize: att.fileSize,
|
// uploadTime: att.uploadTime
|
fileName: att.name,
|
path: att.url,
|
fileUrl: att.url,
|
fileType: this.getFileExtension(att.name),
|
fileSize: att.size,
|
uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
|
})),
|
|
operator: this.currentUser.username || this.currentUser.nickName,
|
operatorTime: new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19)
|
};
|
console.log(2, this.redistributionAttachmentList);
|
|
// 找到当前记录的索引
|
const currentIndex = this.allocationData.serviceDonateorganList.findIndex(
|
item => item == this.currentRedistributeRecord
|
);
|
|
if (currentIndex !== -1) {
|
// 1. 更新原记录的状态为3（重分配）并保存重分配信息
|
const originalRecord = { ...this.currentRedistributeRecord };
|
originalRecord.allocationstatus = "3";
|
originalRecord.reallocationreason = JSON.stringify(
|
redistributionInfo
|
);
|
originalRecord.redistributionInfo = JSON.stringify(
|
redistributionInfo
|
);
|
|
// 2. 创建新的记录
|
const newRecord = {
|
...this.currentRedistributeRecord,
|
id: null, // 新记录ID为空
|
allocationstatus: "0", // 新记录状态为提交分配
|
reallocationreason: "", // 清空重分配原因
|
redistributionInfo: null,
|
// 重置相关字段，但保留器官信息
|
caseno: "",
|
applicanttime: "",
|
organgettime: "",
|
name: "",
|
transplanthospitalno: "",
|
transplantHospitalName: ""
|
};
|
|
// 3. 在数组中插入新记录（在旧记录之后）
|
this.allocationData.serviceDonateorganList.splice(
|
currentIndex + 1,
|
0,
|
newRecord
|
);
|
// 4. 更新原记录
|
this.allocationData.serviceDonateorganList[
|
currentIndex
|
] = originalRecord;
|
|
// 5. 更新选中的器官列表
|
this.selectedOrgans.push(this.currentRedistributeRecord.organno);
|
|
this.$message.success("重分配操作成功完成");
|
this.redistributionDialogVisible = false;
|
} else {
|
this.$message.error("未找到对应的记录");
|
}
|
} catch (error) {
|
console.error("重分配操作失败:", error);
|
this.$message.error("重分配操作失败");
|
} finally {
|
this.redistributionLoading = false;
|
}
|
});
|
},
|
|
// 器官行样式
|
getOrganRowClassName({ row }) {
|
if (row.allocationstatus == "3") {
|
return "redistributed-row"; // 重分配记录样式
|
} else if (
|
!row.caseno ||
|
!row.applicanttime ||
|
!row.organgettime ||
|
!row.name ||
|
!row.transplanthospitalno
|
) {
|
return "warning-row"; // 信息不完整样式
|
} else if (row.allocationstatus == "0") {
|
return "pending-row"; // 待审核样式
|
}
|
return "";
|
},
|
|
// 构建 filePatch 字段
|
buildFilePatch() {
|
if (!this.attachments || this.attachments.length == 0) {
|
return "";
|
}
|
return JSON.stringify(this.attachments);
|
},
|
|
// 保存基本信息
|
async handleSave() {
|
this.$refs.form.validate(async valid => {
|
if (!valid) {
|
this.$message.warning("请完善表单信息");
|
return;
|
}
|
|
this.saveLoading = true;
|
try {
|
const saveData = {
|
...this.form,
|
serviceDonateorganList:
|
this.allocationData.serviceDonateorganList || []
|
};
|
|
// 确保每条记录都有分配状态
|
saveData.serviceDonateorganList.forEach(item => {
|
item.baseid = this.form.id;
|
item.infoid = this.form.infoid;
|
// 确保有分配状态字段
|
if (!item.allocationstatus) {
|
item.allocationstatus = "0";
|
}
|
// 如果是重分配记录，确保有重分配信息
|
if (item.allocationstatus == "3" && !item.reallocationreason) {
|
item.reallocationreason = item.redistributionInfo || "";
|
}
|
});
|
|
if (saveData.allocationStatus == 1 || !saveData.allocationStatus) {
|
saveData.allocationStatus = 2;
|
}
|
saveData.fileName = this.buildFilePatch();
|
|
const apiMethod = this.form.id ? allocationedit : allocationadd;
|
const response = await apiMethod(saveData);
|
|
if (response.code == 200) {
|
this.$message.success("保存成功");
|
if (!this.form.id && response.data) {
|
this.form.id = response.data;
|
}
|
} else {
|
this.$message.error("保存失败：" + (response.msg || "未知错误"));
|
}
|
} catch (error) {
|
console.error("保存失败:", error);
|
this.$message.error("保存失败");
|
} finally {
|
this.saveLoading = false;
|
}
|
});
|
},
|
|
// 确认完成分配
|
async handleConfirmAllocation() {
|
if (this.incompleteRecords > 0) {
|
this.$message.warning("请先完善所有分配记录的信息");
|
return;
|
}
|
|
this.$confirm("确认完成器官分配吗？完成后将无法修改分配信息。", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(async () => {
|
this.confirmLoading = true;
|
this.form.allocationStatus = "3";
|
this.form.allocationTime = new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
|
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) {
|
console.error("确认分配失败:", error);
|
this.$message.error("确认分配失败");
|
this.form.allocationStatus = "0";
|
this.form.allocationTime = "";
|
} finally {
|
this.confirmLoading = false;
|
}
|
})
|
.catch(() => {});
|
},
|
|
// 附件相关方法
|
/** 附件变化处理 */
|
handleAttachmentChange(fileList) {
|
this.attachmentFileList = fileList;
|
},
|
handleRedistributionChange(fileList) {
|
this.redistributionAttachmentList = fileList;
|
},
|
|
/** 附件移除处理 */
|
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("附件删除成功");
|
}
|
}
|
},
|
|
/** 上传成功处理 */
|
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("文件上传成功");
|
}
|
},
|
|
/** 上传错误处理 */
|
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.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) {
|
if (!fileName) return "other";
|
const extension = fileName
|
.split(".")
|
.pop()
|
.toLowerCase();
|
const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
|
const pdfTypes = ["pdf"];
|
const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
|
if (imageTypes.includes(extension)) return "image";
|
if (pdfTypes.includes(extension)) return "pdf";
|
if (officeTypes.includes(extension)) return "office";
|
return "other";
|
},
|
|
/** 获取文件图标颜色 */
|
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) {
|
console.log(filename, "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(bytes) / Math.log(k));
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
},
|
|
/** 日期时间格式化 */
|
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;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.organ-allocation-detail {
|
padding: 20px;
|
background-color: #f5f7fa;
|
}
|
|
.detail-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.allocation-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.attachment-card {
|
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 {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
/* 统计信息样式 */
|
.allocation-stats {
|
margin-top: 20px;
|
padding: 15px;
|
background: linear-gradient(135deg, #9eb7e5 0%, #53519c 100%);
|
border-radius: 8px;
|
color: white;
|
font-size: 18px;
|
}
|
|
.stat-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 10px;
|
}
|
|
.stat-label {
|
opacity: 0.9;
|
margin-bottom: 5px;
|
}
|
|
.stat-value {
|
font-size: 20px;
|
font-weight: bold;
|
}
|
/* 在style部分添加 */
|
.section-title {
|
font-weight: 600;
|
color: #303133;
|
margin-bottom: 8px;
|
font-size: 14px;
|
}
|
|
.section-content {
|
background: #f5f7fa;
|
padding: 12px;
|
border-radius: 4px;
|
border-left: 3px solid #e6a23c;
|
line-height: 1.6;
|
}
|
|
.redistribution-attachments {
|
margin-top: 10px;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
overflow: hidden;
|
}
|
|
/* 重分配详情表格样式 */
|
:deep(.redistribution-attachments .el-table) {
|
border: none;
|
}
|
|
:deep(.redistribution-attachments .el-table th) {
|
background-color: #f5f7fa;
|
color: #606266;
|
font-weight: 600;
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.redistribution-attachments {
|
overflow-x: auto;
|
}
|
}
|
/* 空状态样式 */
|
.empty-allocation {
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
}
|
|
/* 无数据样式 */
|
.no-data {
|
color: #909399;
|
font-style: italic;
|
}
|
|
/* 表格行样式 */
|
:deep(.redistributed-row) {
|
background-color: #fdf6ec;
|
opacity: 0.8;
|
}
|
|
:deep(.redistributed-row:hover) {
|
background-color: #faecd8;
|
opacity: 0.9;
|
}
|
|
:deep(.warning-row) {
|
background-color: #fff7e6;
|
}
|
|
:deep(.warning-row:hover) {
|
background-color: #ffecc2;
|
}
|
|
:deep(.pending-row) {
|
background-color: #f0f9ff;
|
}
|
|
:deep(.pending-row:hover) {
|
background-color: #e0f2ff;
|
}
|
|
/* 禁用状态的输入框样式 */
|
:deep(.el-input.is-disabled .el-input__inner) {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
|
:deep(.el-textarea.is-disabled .el-textarea__inner) {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
|
/* 重分配按钮样式 */
|
:deep(.el-button--text.is-disabled) {
|
color: #c0c4cc !important;
|
cursor: not-allowed;
|
}
|
|
/* 重分配信息提示框样式 */
|
:deep(.el-tooltip__popper) {
|
max-width: 300px;
|
white-space: pre-line;
|
line-height: 1.6;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.organ-allocation-detail {
|
padding: 10px;
|
}
|
|
.allocation-stats .el-col {
|
margin-bottom: 10px;
|
}
|
}
|
</style>
|
