<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"
|
:disabled="form.recordstate === 'completed'"
|
:loading="confirmLoading"
|
>
|
完成利用
|
</el-button>
|
</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="receivingunit">
|
<el-input
|
v-model="form.receivingunit"
|
placeholder="请输入接收单位"
|
:disabled="form.isbodydonation !== '1'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<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%"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="登记人" prop="createBy">
|
<el-input v-model="form.createBy" readonly />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="登记时间" prop="createTime">
|
<el-date-picker
|
v-model="form.createTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
readonly
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!-- 器官利用记录部分 - 整合受者详情 -->
|
<el-card class="utilization-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官利用记录</span>
|
<div style="float: right;">
|
<el-tag :type="getStatusTagType(form.recordstate)">
|
{{ getStatusText(form.recordstate) }}
|
</el-tag>
|
</div>
|
</div>
|
|
<el-form
|
ref="utilizationForm"
|
:rules="utilizationRules"
|
:model="utilizationData"
|
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.recordstate === 'completed'"
|
>
|
{{ dict.label }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col>
|
<el-form-item>
|
<el-table
|
:data="utilizationData.serviceDonatecomporganList"
|
v-loading="loading"
|
border
|
style="width: 100%"
|
:row-class-name="getOrganRowClassName"
|
:expand-row-keys="expandedRows"
|
@expand-change="handleExpandChange"
|
row-key="organno"
|
>
|
<el-table-column type="expand" width="60">
|
<template slot-scope="scope">
|
<!-- 展开行内容 - 受者详细信息 -->
|
<div class="recipient-detail-expand">
|
<div class="recipient-header">
|
<span class="recipient-title">受者详细信息</span>
|
<el-tag
|
v-if="scope.row.transplantstate === '1'"
|
type="success"
|
size="small"
|
>
|
已移植
|
</el-tag>
|
<el-tag
|
v-else-if="scope.row.transplantstate === '0'"
|
type="warning"
|
size="small"
|
>
|
未移植
|
</el-tag>
|
<el-tag v-else type="info" size="small">
|
移植中
|
</el-tag>
|
</div>
|
|
<el-form
|
:model="scope.row"
|
label-width="140px"
|
class="recipient-form"
|
>
|
<!-- 基本信息部分 -->
|
<div class="form-section">
|
<h4 class="section-title">基本信息</h4>
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="受者姓名">
|
<el-input
|
v-model="scope.row.name"
|
placeholder="请输入受者姓名"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="出生日期">
|
<el-date-picker
|
v-model="scope.row.birthday"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择出生日期"
|
style="width: 100%"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="性别">
|
<el-select
|
v-model="scope.row.sex"
|
placeholder="请选择性别"
|
style="width: 100%"
|
:disabled="form.recordstate === 'completed'"
|
>
|
<el-option label="男" value="0" />
|
<el-option label="女" value="1" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="年龄">
|
<el-input
|
v-model="scope.row.age"
|
placeholder="年龄"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="证件类型">
|
<el-select
|
v-model="scope.row.idcardtype"
|
placeholder="请选择证件类型"
|
style="width: 100%"
|
:disabled="form.recordstate === 'completed'"
|
>
|
<el-option label="身份证" value="1" />
|
<el-option label="护照" value="2" />
|
<el-option label="军官证" value="3" />
|
<el-option label="其他" value="4" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="证件号码">
|
<el-input
|
v-model="scope.row.idcardno"
|
placeholder="证件号码"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 联系信息部分 -->
|
<div class="form-section">
|
<h4 class="section-title">联系信息</h4>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="移植中心名称">
|
<el-input
|
v-model="scope.row.hospitalname"
|
placeholder="请输入移植中心名称"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话">
|
<el-input
|
v-model="scope.row.phone"
|
placeholder="联系电话"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="现住地址">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="scope.row.residenceaddress"
|
placeholder="请输入详细地址"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 移植信息部分 -->
|
<div
|
class="form-section"
|
v-if="scope.row.transplantstate === '1'"
|
>
|
<h4 class="section-title">移植信息</h4>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="移植时间">
|
<el-date-picker
|
v-model="scope.row.transplanttime"
|
type="datetime"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="选择移植日期"
|
style="width: 100%"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="移植医生">
|
<el-input
|
v-model="scope.row.transplantdoct"
|
placeholder="请输入移植医生"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
|
<!-- 未移植原因 -->
|
<div
|
class="form-section"
|
v-if="scope.row.transplantstate === '0'"
|
>
|
<h4 class="section-title">未移植信息</h4>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="未移植原因">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="scope.row.abandonreason"
|
placeholder="请输入未移植原因"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="器官名称"
|
align="center"
|
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" prop="caseNo">
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.caseNo"
|
placeholder="系统编号"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植医院"
|
align="center"
|
width="260"
|
prop="hospitalno"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.hospitalno"
|
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>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植状态"
|
align="center"
|
prop="transplantstate"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.transplantstate"
|
placeholder="请选择移植状态"
|
style="width: 100%"
|
@change="handleTransplantStatusChange(scope.row, $event)"
|
>
|
<el-option
|
v-for="dict in transplantStatusList"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植时间"
|
align="center"
|
width="220"
|
prop="transplanttime"
|
>
|
<template slot-scope="scope">
|
<el-date-picker
|
clearable
|
size="small"
|
style="width: 100%"
|
v-model="scope.row.transplanttime"
|
type="datetime"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="选择移植时间"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植医生"
|
align="center"
|
prop="transplantdoct"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.transplantdoct"
|
placeholder="医师姓名"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="受者姓名" align="center" prop="name">
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.name"
|
placeholder="受者姓名"
|
:disabled="form.recordstate === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
align="center"
|
class-name="small-padding fixed-width"
|
v-if="form.recordstate !== 'completed'"
|
>
|
<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-row>
|
|
<!-- 统计信息 -->
|
|
<div
|
v-if="
|
!utilizationData.serviceDonatecomporganList ||
|
utilizationData.serviceDonatecomporganList.length == 0
|
"
|
class="empty-utilization"
|
>
|
<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="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'"
|
>
|
<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="请选择移植医院"
|
style="width: 100%"
|
>
|
<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-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-dialog>
|
|
<!-- 文件预览对话框 -->
|
<FilePreviewDialog
|
:visible="filePreviewVisible"
|
:file="currentPreviewFile"
|
@close="filePreviewVisible = false"
|
@download="handleDownloadAttachment"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
completionList,
|
completionadd,
|
completionedit
|
} from "@/api/businessApi";
|
import UploadAttachment from "@/components/UploadAttachment"; // 新增导入
|
import FilePreviewDialog from "@/components/FilePreviewDialog"; // 新增导入
|
import CaseBasicInfo from "@/components/CaseBasicInfo";
|
import dayjs from "dayjs"; // 新增导入，用于时间处理
|
|
export default {
|
name: "OrganUtilizationDetail",
|
components: {
|
UploadAttachment,
|
FilePreviewDialog,
|
CaseBasicInfo
|
},
|
dicts: ["sys_BloodType", "sys_Organ", "sys_0_1"],
|
data() {
|
return {
|
caseId: null,
|
|
// 表单数据 - 根据接口参数调整
|
form: {
|
id: undefined,
|
infoid: undefined,
|
inpatientno: "",
|
recordstate: "pending",
|
caseNo: "",
|
donorno: "",
|
treatmenthospitalname: "",
|
treatmenthospitalno: "",
|
sex: "",
|
name: "",
|
age: "",
|
bloodtype: "",
|
idcardno: "",
|
diagnosisname: "",
|
completetime: "",
|
responsibleuserid: "",
|
responsibleusername: "",
|
coordinateduserido: "",
|
coordinatedusernameo: "",
|
coordinateduseridt: "",
|
coordinatedusernamet: "",
|
assessannex: "",
|
donateorgan: "",
|
isbodydonation: "0",
|
receivingunit: "",
|
createBy: "",
|
createTime: "",
|
updateBy: "",
|
updateTime: "",
|
attachments: []
|
},
|
// 表单验证规则
|
rules: {
|
name: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
diagnosisname: [
|
{ required: true, message: "疾病诊断不能为空", trigger: "blur" }
|
],
|
donorno: [
|
{ required: true, message: "捐献者编号不能为空", trigger: "blur" }
|
]
|
},
|
// 利用记录验证规则
|
utilizationRules: {},
|
// 保存加载状态
|
saveLoading: false,
|
confirmLoading: false,
|
// 加载状态
|
loading: false,
|
// 选中的器官
|
selectedOrgans: [],
|
// 医院列表
|
hospitalList: [],
|
// 移植状态列表
|
transplantStatusList: [
|
{ value: "1", label: "已移植" },
|
{ value: "0", label: "未移植" },
|
{ value: "2", label: "移植中" }
|
],
|
// 利用记录数据
|
utilizationData: {
|
serviceDonatecomporganList: []
|
},
|
// 随访记录数据
|
followupData: {
|
records: []
|
},
|
// 附件数据
|
attachments: [],
|
// 展开的行keys
|
expandedRows: [],
|
// 编辑对话框
|
editDialogVisible: false,
|
currentRecord: {},
|
currentEditIndex: -1,
|
// 附件相关配置 - 新增
|
attachmentFileList: [],
|
attachmentLimit: 10,
|
attachmentAccept:
|
".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
|
|
// 文件预览相关 - 新增
|
filePreviewVisible: false,
|
currentPreviewFile: null,
|
currentFollowup: {},
|
isEditingFollowup: false
|
};
|
},
|
computed: {
|
// 当前用户信息
|
currentUser() {
|
return JSON.parse(sessionStorage.getItem("user") || "{}");
|
},
|
// 已移植数量
|
transplantedCount() {
|
if (!this.utilizationData.serviceDonatecomporganList) return 0;
|
return this.utilizationData.serviceDonatecomporganList.filter(
|
record => record.transplantstate === "1"
|
).length;
|
},
|
// 唯一医院数量
|
uniqueHospitals() {
|
if (!this.utilizationData.serviceDonatecomporganList) return 0;
|
const hospitals = this.utilizationData.serviceDonatecomporganList
|
.map(record => record.hospitalno)
|
.filter(Boolean);
|
return new Set(hospitals).size;
|
},
|
// 获取器官字典
|
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: {
|
// 初始化数据
|
initData() {
|
this.caseId = this.$route.query.infoid;
|
|
if (!this.caseId) {
|
this.$message.error("缺少必要的路由参数 infoid");
|
this.$router.back();
|
return;
|
}
|
|
this.form.infoid = this.caseId;
|
this.form.createBy =
|
this.currentUser.username || this.currentUser.name || "当前用户";
|
this.form.createTime = new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
|
this.generateDonorNo();
|
this.getDetail();
|
this.getHospitalData();
|
},
|
|
// 生成捐献者编号
|
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);
|
},
|
|
// 获取详情
|
async getDetail() {
|
this.loading = true;
|
try {
|
const response = await completionList({ infoid: this.caseId });
|
if (
|
response.code === 200 &&
|
response.data &&
|
response.data.length > 0
|
) {
|
const data = response.data[0];
|
// 填充表单数据
|
Object.assign(this.form, data);
|
|
// 处理捐献器官字段
|
if (data.donateorgan) {
|
const organArray = Array.isArray(data.donateorgan)
|
? data.donateorgan
|
: (data.donateorgan || "").split(",").filter(item => item);
|
this.selectedOrgans = organArray;
|
}
|
|
// 处理器官利用记录
|
if (data.serviceDonatecomporganList) {
|
this.utilizationData.serviceDonatecomporganList = Array.isArray(
|
data.serviceDonatecomporganList
|
)
|
? data.serviceDonatecomporganList.map(record => ({
|
...record,
|
transplantstate: record.transplantstate
|
? record.transplantstate.toString()
|
: "1"
|
}))
|
: [];
|
}
|
|
// 初始化附件
|
if (this.form.assessannex) {
|
this.form.attachments = JSON.parse(this.form.assessannex);
|
this.attachments = Array.isArray(this.form.attachments)
|
? [...this.form.attachments]
|
: [];
|
}
|
|
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: "武汉同济医院" },
|
{ 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
|
);
|
|
// 处理互斥逻辑
|
this.handleExclusiveSelections(selectedValues);
|
|
// 更新捐献器官字段
|
this.form.donateorgan = selectedValues.join(",");
|
|
// 新增选择的器官
|
selectedValues.forEach(organValue => {
|
if (!currentOrganValues.includes(organValue)) {
|
this.createOrganRecord(organValue);
|
}
|
});
|
|
// 移除取消选择的器官
|
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;
|
}
|
}
|
}
|
);
|
},
|
|
// 处理互斥选择
|
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) {
|
const organName = this.getOrganLabel(organValue);
|
|
this.utilizationData.serviceDonatecomporganList.push({
|
organname: organName,
|
organno: organValue,
|
caseNo: "",
|
hospitalno: "",
|
hospitalname: "",
|
name: "",
|
transplantdoct: "",
|
transplanttime: "",
|
transplantstate: "1",
|
abandonreason: "",
|
sex: "",
|
age: "",
|
birthday: "",
|
phone: "",
|
residenceaddress: "",
|
residenceprovince: "",
|
residenceprovincename: "",
|
residencecity: "",
|
residencecityname: "",
|
residencetown: "",
|
residencetownname: "",
|
residencecommunity: "",
|
residencecommunityname: "",
|
residencecountycode: "",
|
residencecountyname: "",
|
idcardtype: "",
|
idcardno: "",
|
ageunit: ""
|
});
|
},
|
|
// 根据字典value获取label
|
getOrganLabel(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") {
|
// 如果状态为未移植，清除相关字段
|
// row.transplanttime = "";
|
// row.transplantdoct = "";
|
// row.hospitalno = "";
|
// row.hospitalname = "";
|
} 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;
|
}
|
},
|
|
// 删除器官记录
|
handleRemoveOrgan(index) {
|
this.$confirm("确认删除这条器官记录吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
const organno = this.utilizationData.serviceDonatecomporganList[index]
|
.organno;
|
this.utilizationData.serviceDonatecomporganList.splice(index, 1);
|
|
// 从选中的器官中移除
|
const idx = this.selectedOrgans.indexOf(organno);
|
if (idx > -1) {
|
this.selectedOrgans.splice(idx, 1);
|
}
|
|
this.$message.success("器官记录删除成功");
|
})
|
.catch(() => {});
|
},
|
|
// 器官行样式
|
getOrganRowClassName({ row }) {
|
if (
|
row.transplantstate === "1" &&
|
(!row.caseNo || !row.hospitalno || !row.name || !row.transplanttime)
|
) {
|
return "warning-row";
|
}
|
if (row.transplantstate === "0" && !row.abandonreason) {
|
return "warning-row";
|
}
|
return "";
|
},
|
|
// 获取状态标签类型
|
getStatusTagType(status) {
|
const typeMap = {
|
completed: "success",
|
processing: "warning",
|
pending: "info"
|
};
|
return typeMap[status] || "info";
|
},
|
|
// 获取状态文本
|
getStatusText(status) {
|
const textMap = {
|
completed: "已完成",
|
processing: "进行中",
|
pending: "待处理"
|
};
|
return textMap[status] || "未知";
|
},
|
|
// 获取随访类型标签
|
getFollowupTypeTag(type) {
|
const typeMap = {
|
routine: "success",
|
emergency: "danger",
|
special: "warning"
|
};
|
return typeMap[type] || "info";
|
},
|
|
// 获取随访类型文本
|
getFollowupTypeText(type) {
|
const textMap = {
|
routine: "常规随访",
|
emergency: "紧急随访",
|
special: "特殊随访"
|
};
|
return textMap[type] || "未知";
|
},
|
|
// 保存基本信息
|
async handleSave() {
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
this.saveLoading = true;
|
try {
|
const saveData = {
|
...this.form,
|
assessannex: JSON.stringify(this.attachments),
|
donateorgan: this.selectedOrgans.join(","),
|
serviceDonatecomporganList:
|
this.utilizationData.serviceDonatecomporganList || []
|
};
|
|
const apiMethod = this.form.id ? completionedit : completionadd;
|
const response = await apiMethod(saveData);
|
|
if (response.code === 200) {
|
this.$message.success("保存成功");
|
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) {
|
console.error("保存失败:", error);
|
this.$message.error("保存失败");
|
} finally {
|
this.saveLoading = false;
|
}
|
}
|
});
|
},
|
|
// 保存利用记录
|
async handleSaveUtilization() {
|
if (
|
!this.utilizationData.serviceDonatecomporganList ||
|
this.utilizationData.serviceDonatecomporganList.length === 0
|
) {
|
this.$message.warning("请先添加利用记录");
|
return;
|
}
|
|
this.saveLoading = true;
|
try {
|
const saveData = {
|
...this.form,
|
attachments: this.attachments,
|
donateorgan: this.selectedOrgans.join(","),
|
serviceDonatecomporganList:
|
this.utilizationData.serviceDonatecomporganList || []
|
};
|
|
const response = await completionedit(saveData);
|
|
if (response.code === 200) {
|
this.$message.success("利用记录保存成功");
|
} else {
|
this.$message.error(
|
"保存利用记录失败：" + (response.msg || "未知错误")
|
);
|
}
|
} catch (error) {
|
console.error("保存利用记录失败:", error);
|
this.$message.error("保存利用记录失败");
|
} finally {
|
this.saveLoading = false;
|
}
|
},
|
|
// 确认完成利用
|
async handleConfirmUtilization() {
|
// 检查利用记录是否完整
|
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") {
|
return !record.abandonreason;
|
}
|
return false;
|
}
|
);
|
|
if (incompleteRecords.length > 0) {
|
this.$message.warning("请先完善所有利用记录的信息");
|
return;
|
}
|
|
this.$confirm("确认完成器官利用吗？完成后将无法修改利用信息。", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(async () => {
|
this.confirmLoading = true;
|
this.form.recordstate = "completed";
|
this.form.completetime =
|
this.form.completetime ||
|
new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
|
try {
|
const saveData = {
|
...this.form,
|
attachments: this.attachments,
|
donateorgan: this.selectedOrgans.join(","),
|
serviceDonatecomporganList:
|
this.utilizationData.serviceDonatecomporganList || []
|
};
|
|
const response = await completionedit(saveData);
|
|
if (response.code === 200) {
|
this.$message.success("器官利用已完成");
|
} else {
|
this.$message.error(
|
"确认利用失败：" + (response.msg || "未知错误")
|
);
|
this.form.recordstate = "pending";
|
this.form.completetime = "";
|
}
|
} catch (error) {
|
console.error("确认利用失败:", error);
|
this.$message.error("确认利用失败");
|
this.form.recordstate = "pending";
|
this.form.completetime = "";
|
} finally {
|
this.confirmLoading = false;
|
}
|
})
|
.catch(() => {});
|
},
|
|
// 完成利用
|
handleComplete() {
|
this.handleConfirmUtilization();
|
},
|
|
// 保存随访记录
|
handleSaveFollowup() {
|
if (!this.currentFollowup.organNo) {
|
this.$message.warning("请选择器官");
|
return;
|
}
|
|
if (!this.currentFollowup.followupTime) {
|
this.$message.warning("请选择随访时间");
|
return;
|
}
|
|
this.saveLoading = true;
|
|
// 获取器官名称
|
const organRecord = this.utilizationData.serviceDonatecomporganList.find(
|
item => item.organno === this.currentFollowup.organNo
|
);
|
const organName = organRecord ? organRecord.organname : "";
|
|
const followupData = {
|
...this.currentFollowup,
|
organName: organName,
|
utilizationId: this.form.id
|
};
|
|
// TODO: 替换为实际的随访记录保存接口
|
setTimeout(() => {
|
if (this.isEditingFollowup) {
|
// 更新现有记录
|
const index = this.followupData.records.findIndex(
|
item => item.id === this.currentFollowup.id
|
);
|
if (index !== -1) {
|
this.followupData.records[index] = {
|
...followupData,
|
id: this.currentFollowup.id
|
};
|
}
|
} else {
|
// 添加新记录
|
this.followupData.records.push({ ...followupData, id: Date.now() });
|
}
|
this.$message.success("随访记录保存成功");
|
this.followupDialogVisible = false;
|
this.saveLoading = false;
|
}, 1000);
|
},
|
/** 附件变化处理 */
|
handleAttachmentChange(fileList) {
|
this.attachmentFileList = 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) {
|
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 lang="scss" scoped>
|
.organ-utilization-detail {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.detail-card,
|
.utilization-card,
|
.followup-card,
|
.attachment-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border: 1px solid #e4e7ed;
|
}
|
|
/* 新增附件头部样式 */
|
.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;
|
font-size: 16px;
|
}
|
|
.attachment-tip {
|
font-size: 12px;
|
color: #909399;
|
margin-left: auto;
|
}
|
|
.attachment-list {
|
margin-top: 20px;
|
}
|
|
.list-title {
|
font-weight: bold;
|
margin-bottom: 12px;
|
color: #303133;
|
font-size: 14px;
|
}
|
|
.file-name {
|
font-size: 13px;
|
margin-left: 8px;
|
color: #606266;
|
}
|
|
/* 文件图标样式 */
|
.el-icon-document {
|
font-size: 16px;
|
vertical-align: middle;
|
}
|
|
/* 保持原有样式 */
|
.detail-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
line-height: 1.4;
|
}
|
|
/* 表格整体样式 */
|
:deep(.el-table) {
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
|
:deep(.el-table th) {
|
background-color: #f5f7fa;
|
color: #606266;
|
font-weight: 600;
|
}
|
|
:deep(.el-table .cell) {
|
padding: 12px 8px;
|
line-height: 1.5;
|
}
|
|
/* 斑马纹表格行 */
|
:deep(.el-table__row.warning-row) {
|
background-color: #fdf6ec;
|
}
|
|
:deep(.el-table__row.default-row) {
|
background-color: #f0f9ff;
|
}
|
|
/* 鼠标悬停效果 */
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
background-color: #f5f7fa !important;
|
}
|
|
/* 统计信息样式 */
|
.utilization-stats {
|
margin-top: 20px;
|
padding: 15px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 8px;
|
color: white;
|
}
|
|
.stat-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 10px;
|
text-align: center;
|
}
|
|
.stat-label {
|
font-size: 12px;
|
opacity: 0.9;
|
margin-bottom: 5px;
|
color: rgba(255, 255, 255, 0.9);
|
}
|
|
.stat-value {
|
font-size: 18px;
|
font-weight: bold;
|
color: white;
|
}
|
|
/* 展开行样式 */
|
.recipient-detail-expand {
|
padding: 20px;
|
background: #fafafa;
|
border-radius: 8px;
|
margin: 10px 0;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.recipient-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding-bottom: 15px;
|
border-bottom: 2px solid #e4e7ed;
|
}
|
|
.recipient-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
/* 表单部分样式 */
|
.recipient-form {
|
background: white;
|
padding: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
}
|
|
/* 表单部分标题 */
|
.form-section {
|
margin-bottom: 25px;
|
padding-bottom: 20px;
|
border-bottom: 1px solid #f0f0f0;
|
|
&:last-child {
|
margin-bottom: 0;
|
padding-bottom: 0;
|
border-bottom: none;
|
}
|
}
|
|
.section-title {
|
font-size: 15px;
|
font-weight: 600;
|
color: #409eff;
|
margin: 0 0 15px 0;
|
padding-left: 10px;
|
border-left: 4px solid #409eff;
|
line-height: 1.2;
|
}
|
|
/* 表单行间距 */
|
:deep(.el-form-item) {
|
margin-bottom: 20px;
|
|
.el-form-item__label {
|
font-weight: 500;
|
color: #606266;
|
padding-right: 10px;
|
}
|
|
.el-form-item__content {
|
line-height: 1.5;
|
}
|
}
|
|
/* 表单输入框样式 */
|
:deep(.el-input__inner) {
|
height: 36px;
|
line-height: 36px;
|
border-radius: 4px;
|
transition: all 0.3s ease;
|
|
&:focus {
|
border-color: #409eff;
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
}
|
|
&:disabled {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
}
|
|
/* 文本域样式 */
|
:deep(.el-textarea__inner) {
|
min-height: 80px;
|
border-radius: 4px;
|
transition: all 0.3s ease;
|
|
&:focus {
|
border-color: #409eff;
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
}
|
|
&:disabled {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
}
|
|
/* 选择框样式 */
|
:deep(.el-select) {
|
width: 100%;
|
|
.el-input__inner {
|
border-radius: 4px;
|
}
|
|
&.is-disabled {
|
.el-input__inner {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
}
|
}
|
}
|
|
/* 日期选择器样式 */
|
:deep(.el-date-editor) {
|
width: 100%;
|
|
&.el-input__inner {
|
border-radius: 4px;
|
}
|
|
&.is-disabled {
|
.el-input__inner {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
}
|
}
|
}
|
|
/* 响应式调整 */
|
@media (max-width: 768px) {
|
.recipient-detail-expand {
|
padding: 15px;
|
}
|
|
.recipient-form {
|
padding: 15px;
|
}
|
.attachment-header {
|
flex-wrap: wrap;
|
}
|
|
.attachment-tip {
|
width: 100%;
|
margin-top: 8px;
|
margin-left: 0;
|
}
|
.form-section {
|
margin-bottom: 20px;
|
padding-bottom: 15px;
|
}
|
|
:deep(.el-form-item) {
|
margin-bottom: 15px;
|
}
|
|
.section-title {
|
font-size: 14px;
|
margin-bottom: 12px;
|
}
|
}
|
|
:deep(.el-divider) {
|
margin: 20px 0;
|
background-color: #e4e7ed;
|
}
|
|
/* 表单标签和输入框样式 */
|
:deep(.el-form-item__label) {
|
font-weight: 500;
|
color: #606266;
|
}
|
|
:deep(.el-input__inner:focus) {
|
border-color: #409eff;
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
}
|
|
/* 按钮样式优化 */
|
:deep(.el-button--primary) {
|
background: linear-gradient(135deg, #409eff 0%, #3375e0 100%);
|
border: none;
|
border-radius: 4px;
|
transition: all 0.3s ease;
|
}
|
|
:deep(.el-button--primary:hover) {
|
transform: translateY(-1px);
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
}
|
|
/* 底部操作按钮 */
|
.dialog-footer {
|
margin-top: 20px;
|
text-align: center;
|
padding-top: 20px;
|
border-top: 1px solid #e4e7ed;
|
}
|
|
.dialog-footer .el-button {
|
margin: 0 10px;
|
min-width: 120px;
|
}
|
|
/* 空状态样式 */
|
.empty-utilization {
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
background: #fafafa;
|
border-radius: 4px;
|
margin: 20px 0;
|
}
|
|
/* 文件信息样式 */
|
.file-info {
|
display: flex;
|
align-items: center;
|
padding: 5px 0;
|
}
|
|
.file-info i {
|
font-size: 18px;
|
margin-right: 10px;
|
}
|
|
/* 平板设备适配 */
|
@media (max-width: 1024px) {
|
.organ-utilization-detail {
|
padding: 15px;
|
}
|
|
:deep(.el-col) {
|
margin-bottom: 10px;
|
}
|
}
|
|
/* 手机设备适配 */
|
|
/* 超小屏幕设备 */
|
@media (max-width: 480px) {
|
.organ-utilization-detail {
|
padding: 5px;
|
}
|
|
:deep(.el-card__header) {
|
padding: 10px 15px;
|
}
|
}
|
</style>
|
