<template>
|
<div class="organ-procurement-detail">
|
<case-basic-info :case-id="caseId" :show-attachment="true":column="3" />
|
|
<!-- 基本信息 -->
|
<el-card class="detail-card paper-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官获取基本信息</span>
|
</div>
|
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px" class="paper-form">
|
<!-- 手术相关信息 -->
|
<el-divider content-position="left">手术信息</el-divider>
|
|
<div class="form-row">
|
<el-form-item label="手术医生" prop="operationdoctor" class="col-1-3">
|
<el-input v-model="form.operationdoctor" />
|
</el-form-item>
|
<el-form-item label="手术开始时间" prop="operationbegtime" class="col-1-3">
|
<el-date-picker
|
v-model="form.operationbegtime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="手术结束时间" prop="operationendtime" class="col-1-3">
|
<el-date-picker
|
v-model="form.operationendtime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</div>
|
|
<div class="form-row">
|
<el-form-item
|
label="腹主动脉插管时间"
|
prop="abdominalaortacannulatime"
|
class="col-1-3"
|
>
|
<el-date-picker
|
v-model="form.abdominalaortacannulatime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item
|
label="腹主动脉灌注时间"
|
prop="abdominalaortaperfusiontime"
|
class="col-1-3"
|
>
|
<el-date-picker
|
v-model="form.abdominalaortaperfusiontime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</div>
|
|
<div class="form-row">
|
<el-form-item label="门静脉插管时间" prop="portalveincannulatime" class="col-1-3">
|
<el-date-picker
|
v-model="form.portalveincannulatime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="门静脉灌注时间" prop="portalveinperfusiontime" class="col-1-3">
|
<el-date-picker
|
v-model="form.portalveinperfusiontime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</div>
|
|
<!-- 协调员信息 -->
|
<el-divider content-position="left">协调员信息</el-divider>
|
|
<div class="form-row">
|
<!-- <el-col :span="8">
|
<el-form-item label="协调员姓名" prop="coordinatorName">
|
<el-input v-model="form.coordinatorName" />
|
</el-form-item>
|
</el-col> -->
|
<el-form-item label="进手术室时间" prop="coordinatorInOperating" class="col-1-3">
|
<el-date-picker
|
v-model="form.coordinatorInOperating"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
<el-form-item label="出手术室时间" prop="coordinatorOutOperating" class="col-1-3">
|
<el-date-picker
|
v-model="form.coordinatorOutOperating"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</div>
|
|
<div class="form-row">
|
<!-- <el-col :span="8">
|
<el-form-item label="协调员签字" prop="coordinatorSign">
|
<el-input v-model="form.coordinatorSign" />
|
</el-form-item>
|
</el-col> -->
|
<!-- <el-col :span="8">
|
<el-form-item label="获取时间" prop="coordinatorSignTime">
|
<el-date-picker
|
v-model="form.coordinatorSignTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col> -->
|
<el-form-item label="是否默哀缅怀" prop="isspendremember" class="col-1-3">
|
<el-select v-model="form.isspendremember" style="width: 100%">
|
<el-option label="是" :value="1" />
|
<el-option label="否" :value="0" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="恢复遗体仪容" prop="isrestoreremains" class="col-1-3">
|
<el-select v-model="form.isrestoreremains" style="width: 100%">
|
<el-option label="是" :value="1" />
|
<el-option label="否" :value="0" />
|
</el-select>
|
</el-form-item>
|
</div>
|
|
<!-- 负责人信息 -->
|
<el-divider content-position="left">负责人信息</el-divider>
|
|
<div class="form-row">
|
<el-form-item label="负责人姓名" prop="responsibleusername" class="col-1-3">
|
<el-input v-model="form.responsibleusername" />
|
</el-form-item>
|
<el-form-item label="协调员一" prop="coordinatedusernameo" class="col-1-3">
|
<el-input v-model="form.coordinatedusernameo" />
|
</el-form-item>
|
<el-form-item label="协调员二" prop="coordinatedusernamet" class="col-1-3">
|
<el-input v-model="form.coordinatedusernamet" />
|
</el-form-item>
|
</div>
|
|
<!-- 获取机构信息 -->
|
<el-divider content-position="left">获取机构信息</el-divider>
|
|
<div class="form-row">
|
<el-form-item label="获取机构名称" prop="gainhospitalname" class="col-1-3">
|
<el-input
|
v-model="form.gainhospitalname"
|
placeholder="请输入获取机构名称"
|
/>
|
</el-form-item>
|
<!-- <el-col :span="8">
|
<el-form-item label="捐献编号" prop="gainhospitalno">
|
<el-input
|
v-model="form.gainhospitalno"
|
placeholder="请输入捐献编号"
|
/>
|
</el-form-item>
|
</el-col> -->
|
</div>
|
</el-form>
|
</el-card>
|
|
<!-- 器官获取记录部分 -->
|
<el-card class="procurement-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官获取记录</span>
|
<div style="float: right;">
|
<dict-tag
|
:options="dict.type.Obtain_status"
|
:value="form.witnessState"
|
/>
|
</div>
|
</div>
|
|
<el-form
|
ref="procurementForm"
|
:rules="procurementRules"
|
:model="procurementData"
|
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"
|
>
|
{{ dict.label }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col>
|
<el-form-item>
|
<el-table
|
:data="displayOrgans"
|
v-loading="loading"
|
border
|
style="width: 100%"
|
:row-class-name="getOrganRowClassName"
|
>
|
<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="260"
|
prop="organStartTime"
|
>
|
<template slot-scope="scope">
|
<el-date-picker
|
clearable
|
size="small"
|
style="width: 100%"
|
v-model="scope.row.organStartTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择获取开始时间"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="器官离体时间"
|
align="center"
|
width="260"
|
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="选择器官离体时间"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="获取医院"
|
align="center"
|
width="300"
|
prop="gainhospitalname"
|
>
|
<!-- <template slot-scope="scope">
|
<el-select
|
v-model="scope.row.gainhospitalname"
|
placeholder="请选择获取医院"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in dict.type.Geta_hospital"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
></el-option>
|
|
</el-select>
|
</template> -->
|
<template slot-scope="scope">
|
<el-autocomplete
|
v-model="scope.row.gainhospitalname"
|
:fetch-suggestions="queryHospitalSearch"
|
placeholder="请选择或输入获取医院"
|
style="width: 100%"
|
clearable
|
></el-autocomplete>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="获取医师"
|
align="center"
|
width="150"
|
prop="organgetdoct"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.organgetdoct"
|
placeholder="获取医师"
|
/>
|
</template>
|
</el-table-column>
|
|
<!-- <el-table-column
|
label="获取状态"
|
align="center"
|
width="120"
|
prop="organstate"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.organstate"
|
placeholder="请选择获取状态"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="dict in dict.type.Obtain_status"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</template>
|
</el-table-column> -->
|
|
<el-table-column
|
label="说明"
|
align="center"
|
prop="notgetreason"
|
min-width="200"
|
>
|
<template slot-scope="scope">
|
<el-input
|
type="textarea"
|
clearable
|
v-model="scope.row.notgetreason"
|
placeholder="请输入未获取说明"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
align="center"
|
width="120"
|
class-name="small-padding fixed-width"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleEditProcurement(scope.row)"
|
>
|
编辑
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<div
|
v-if="!procurementData.serviceDonationwitnessorgans"
|
class="empty-procurement"
|
>
|
<el-empty description="暂无获取记录" :image-size="80">
|
<span>请先选择要获取的器官</span>
|
</el-empty>
|
</div>
|
</el-form>
|
</el-card>
|
|
<!-- 附件管理部分 - 分类Tab展示 -->
|
<el-card class="attachment-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">相关附件</span>
|
</div>
|
|
<!-- 附件列表 - 分类Tab展示，支持修改分类 -->
|
<el-tabs v-model="activeTab" type="border-card">
|
<el-tab-pane
|
v-for="category in categories"
|
:key="category"
|
:label="category + '(' + getCategoryCount(category) + ')'"
|
:name="category"
|
>
|
<div style="margin-bottom: 10px; text-align: right;">
|
<el-button
|
size="mini"
|
type="primary"
|
icon="el-icon-plus"
|
@click="openUploadDialog(category)"
|
>
|
添加附件
|
</el-button>
|
</div>
|
<el-table
|
:data="getCategoryFiles(category)"
|
style="width: 100%"
|
size="small"
|
border
|
>
|
<el-table-column label="文件名" min-width="180">
|
<template #default="scope">
|
<i
|
class="el-icon-document"
|
style="margin-right: 8px; color: #409EFF;"
|
></i>
|
<span class="file-name">{{ scope.row.fileName }}</span>
|
</template>
|
</el-table-column>
|
<!-- 可编辑分类下拉 -->
|
<el-table-column label="分类" width="150">
|
<template #default="scope">
|
<el-select
|
v-model="scope.row.fileType"
|
size="small"
|
@change="updateAttachmentCategory(scope.row, $event)"
|
placeholder="选择分类"
|
>
|
<el-option label="原表拍照" value="原表拍照" />
|
<el-option label="伦理审查材料" value="伦理审查材料" />
|
<el-option label="死亡判定材料" value="死亡判定材料" />
|
<el-option label="默哀仪式照片" value="默哀仪式照片" />
|
<el-option label="捐献见证视频" value="捐献见证视频" />
|
<el-option label="未分类" value="" />
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="文件类型" width="100">
|
<template #default="scope">
|
<el-tag size="small">{{
|
getFileTypeText(scope.row.fileName)
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="上传时间" width="160">
|
<template #default="scope">
|
<span>{{ formatDateTime(scope.row.uploadTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="文件大小" width="100">
|
<template #default="scope">
|
<span>{{ formatFileSize(scope.row.fileSize) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180" fixed="right">
|
<template #default="scope">
|
<el-button
|
size="mini"
|
type="primary"
|
@click="handlePreview(scope.row)"
|
>预览</el-button
|
>
|
<el-button
|
size="mini"
|
type="danger"
|
@click="handleRemoveAttachmentByFile(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div
|
v-if="getCategoryFiles(category).length === 0"
|
style="text-align:center; padding:20px; color:#909399;"
|
>
|
暂无附件
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
<div style="text-align: center; margin: 30px 0;">
|
<el-button type="primary" @click="handleSave" :loading="saveLoading">
|
保存
|
</el-button>
|
<el-button
|
type="success"
|
@click="handleProcure"
|
:loading="confirmLoading"
|
>
|
确认获取
|
</el-button>
|
</div>
|
<!-- 编辑获取记录对话框 -->
|
<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.organstate" style="width: 100%">
|
<el-option
|
v-for="dict in dict.type.Obtain_status"
|
: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="12">
|
<el-form-item label="获取医师">
|
<el-input
|
v-model="currentRecord.organgetdoct"
|
placeholder="请输入获取医师"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="助手">
|
<el-input
|
v-model="currentRecord.assistant"
|
placeholder="请输入助手姓名"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="获取护士">
|
<el-input
|
v-model="currentRecord.procurementNurse"
|
placeholder="请输入获取护士"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="手术室护士">
|
<el-input
|
v-model="currentRecord.operatingRoomNurse"
|
placeholder="请输入手术室护士"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="麻醉医生">
|
<el-input
|
v-model="currentRecord.anesthesiologist"
|
placeholder="请输入麻醉医生"
|
/>
|
</el-form-item>
|
|
<el-form-item label="未获取说明">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="currentRecord.notgetreason"
|
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>
|
|
<!-- 上传对话框 -->
|
<el-dialog
|
:title="`上传${currentUploadCategory}附件`"
|
:visible.sync="uploadDialogVisible"
|
width="480px"
|
:close-on-click-modal="false"
|
>
|
<el-upload
|
ref="uploadRef"
|
class="upload-demo"
|
drag
|
:action="uploadAction"
|
:headers="headers"
|
multiple
|
:file-list="tempFileList"
|
:before-upload="beforeUpload"
|
:on-change="handleFileChange"
|
:on-remove="handleTempRemove"
|
:on-success="handleUploadSuccess"
|
:auto-upload="false"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">
|
支持上传pdf、jpg、png、doc、docx格式文件，单个文件不超过10MB
|
</div>
|
</el-upload>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click="submitUpload"
|
:loading="uploadLoading"
|
:disabled="tempFileList.length === 0"
|
>
|
确认上传
|
</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 文件预览弹窗 -->
|
<FilePreviewDialog
|
:visible="previewVisible"
|
:file="currentPreviewFile"
|
@close="previewVisible = false"
|
@download="handleDownload"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
|
import FilePreviewDialog from "@/components/FilePreviewDialog";
|
import CaseBasicInfo from "@/components/CaseBasicInfo";
|
import { getToken } from "@/utils/auth";
|
import dayjs from "dayjs";
|
|
export default {
|
name: "OrganProcurementDetail",
|
components: {
|
FilePreviewDialog,
|
CaseBasicInfo
|
},
|
dicts: [
|
"sys_BloodType",
|
"Geta_hospital",
|
"sys_DonationCategory",
|
"sys_Organ",
|
"Obtain_status"
|
],
|
data() {
|
return {
|
caseId: null,
|
// 表单数据
|
form: {
|
id: undefined,
|
infoid: undefined,
|
name: "",
|
inpatientno: "",
|
witnessState: "2",
|
caseNo: "",
|
donorno: "",
|
treatmenthospitalname: "",
|
treatmenthospitalno: "",
|
sex: "",
|
age: "",
|
bloodtype: "",
|
idcardno: "",
|
diagnosisname: "",
|
coordinatorName: "",
|
gainhospitalno: "",
|
gainhospitalname: "",
|
deathtime: "",
|
deathreason: "",
|
deathjudgedocto: "",
|
deathjudgedoctt: "",
|
deathjudgeannex: "",
|
operationbegtime: "",
|
operationendtime: "",
|
operationdoctor: "",
|
isspendremember: 1,
|
isrestoreremains: 1,
|
rememberannex: "",
|
responsibleuserid: "",
|
responsibleusername: "",
|
coordinateduserido: "",
|
coordinatedusernameo: "",
|
coordinateduseridt: "",
|
coordinatedusernamet: "",
|
abdominalaortacannulatime: "",
|
abdominalaortaperfusiontime: "",
|
portalveincannulatime: "",
|
portalveinperfusiontime: "",
|
pulmonaryarterycannulatime: "",
|
pulmonaryarteryperfusiontime: "",
|
aortacannulatime: "",
|
aortaperfusiontime: "",
|
organdonation: "",
|
organdonationOther: "",
|
donationcategory: "",
|
coordinatorInOperating: "",
|
coordinatorOutOperating: "",
|
coordinatorSign: "",
|
coordinatorSignTime: "",
|
attachments: []
|
},
|
activeTab: "原表拍照", // 当前激活的附件分类Tab
|
presetCategories: [
|
"原表拍照",
|
"伦理审查材料",
|
"死亡判定材料",
|
"默哀仪式照片",
|
"捐献见证视频"
|
], // 预设分类
|
organExpansionMap: {
|
C64: { subItems: ["C64L", "C64R"], subNames: ["左肾", "右肾"] },
|
C34: { subItems: ["C34L", "C34R"], subNames: ["左肺", "右肺"] }
|
},
|
// 表单验证规则
|
rules: {
|
name: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
diagnosisname: [
|
{ required: true, message: "疾病诊断不能为空", trigger: "blur" }
|
],
|
donationcategory: [
|
{ required: true, message: "捐献类别不能为空", trigger: "change" }
|
],
|
operationdoctor: [
|
{ required: true, message: "手术医生不能为空", trigger: "blur" }
|
]
|
},
|
// 获取记录验证规则
|
procurementRules: {},
|
// 保存加载状态
|
saveLoading: false,
|
confirmLoading: false,
|
// 加载状态
|
loading: false,
|
// 选中的器官
|
selectedOrgans: [],
|
// 医院列表
|
hospitalList: [],
|
// 获取记录数据
|
procurementData: {
|
serviceDonationwitnessorgans: []
|
},
|
// 附件数据
|
attachments: [],
|
// 上传相关
|
uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
|
headers: {
|
Authorization: "Bearer " + getToken()
|
},
|
uploadDialogVisible: false,
|
uploadLoading: false,
|
tempFileList: [],
|
currentUploadCategory: "",
|
// 编辑对话框
|
editDialogVisible: false,
|
currentRecord: {},
|
currentEditIndex: -1,
|
// 文件预览相关
|
previewVisible: false,
|
currentPreviewFile: null
|
};
|
},
|
computed: {
|
// 当前用户信息
|
currentUser() {
|
return JSON.parse(sessionStorage.getItem("user") || "{}");
|
},
|
displayOrgans() {
|
return (this.procurementData.serviceDonationwitnessorgans || []).filter(
|
item => item.delFlag !== 1
|
);
|
},
|
categories() {
|
// 始终返回所有预设分类 + 未分类，无论是否有数据
|
return [
|
"原表拍照",
|
"伦理审查材料",
|
"死亡判定材料",
|
"默哀仪式照片",
|
"捐献见证视频",
|
"未分类"
|
];
|
},
|
organReverseMap() {
|
const map = {};
|
for (const key in this.organExpansionMap) {
|
const { subItems } = this.organExpansionMap[key];
|
subItems.forEach(item => {
|
map[item] = key;
|
});
|
}
|
return map;
|
},
|
// 不完整的记录数量
|
incompleteRecords() {
|
if (!this.procurementData.serviceDonationwitnessorgans) return 0;
|
return this.procurementData.serviceDonationwitnessorgans.filter(
|
record =>
|
!record.organStartTime ||
|
!record.organgettime ||
|
!record.gainhospitalno ||
|
!record.organgetdoct
|
).length;
|
},
|
// 唯一医院数量
|
uniqueHospitals() {
|
if (!this.procurementData.serviceDonationwitnessorgans) return 0;
|
const hospitals = this.procurementData.serviceDonationwitnessorgans
|
.map(record => record.gainhospitalno)
|
.filter(Boolean);
|
return new Set(hospitals).size;
|
},
|
// 获取器官字典
|
organDict() {
|
return this.dict.type.sys_Organ || [];
|
}
|
},
|
created() {
|
this.caseId = this.$route.query.infoid;
|
|
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.generateDonorNo();
|
|
if (infoid) {
|
this.getDetail(infoid);
|
}
|
|
this.getHospitalData();
|
},
|
getOrganNameByNo(organno) {
|
// 检查是否在映射的子项中
|
for (const key in this.organExpansionMap) {
|
const { subItems, subNames } = this.organExpansionMap[key];
|
const idx = subItems.indexOf(organno);
|
if (idx !== -1) {
|
return subNames[idx];
|
}
|
}
|
// 否则从字典中获取
|
return this.getOrganLabel(organno);
|
},
|
// 获取详情
|
async getDetail(infoid) {
|
this.loading = true;
|
try {
|
const response = await witnessList({ infoid });
|
if (
|
response.code === 200 &&
|
response.data &&
|
response.data.length > 0
|
) {
|
const data = response.data[0];
|
if (!data.witnessState || data.witnessState == 1) {
|
data.witnessState = "2";
|
}
|
|
// 填充表单数据
|
Object.assign(this.form, data);
|
|
// 初始化附件
|
if (this.form.deathjudgeannex) {
|
const parsed = JSON.parse(this.form.deathjudgeannex);
|
this.attachments = parsed.map(item => ({
|
...item,
|
fileType: item.fileType || "" // 默认空字符串表示未分类
|
}));
|
this.form.attachments = this.attachments;
|
} else {
|
this.attachments = [];
|
}
|
|
// 处理捐献器官字段
|
if (data.organdonation) {
|
const organArray = Array.isArray(data.organdonation)
|
? data.organdonation
|
: (data.organdonation || "").split(",").filter(item => item);
|
this.selectedOrgans = organArray;
|
this.form.organdonationOther = data.organdonationOther || "";
|
}
|
|
// 处理器官获取记录
|
if (data.serviceDonationwitnessorgans) {
|
this.procurementData.serviceDonationwitnessorgans = Array.isArray(
|
data.serviceDonationwitnessorgans
|
)
|
? data.serviceDonationwitnessorgans
|
: [];
|
}
|
|
this.$message.success("数据加载成功");
|
this.syncOrgansFromSelection();
|
} else {
|
this.$message.warning("未找到对应的器官获取数据");
|
}
|
} catch (error) {
|
console.error("获取器官获取详情失败:", error);
|
this.$message.error("获取详情失败");
|
} finally {
|
this.loading = false;
|
}
|
},
|
syncOrgansFromSelection() {
|
const records = this.procurementData.serviceDonationwitnessorgans || [];
|
const targetNos = [];
|
this.selectedOrgans.forEach(val => {
|
if (this.organExpansionMap[val]) {
|
targetNos.push(...this.organExpansionMap[val].subItems);
|
} else {
|
targetNos.push(val);
|
}
|
});
|
|
// 新增或恢复
|
targetNos.forEach(no => {
|
const existing = records.find(r => r.organno === no);
|
if (existing) {
|
if (existing.delFlag === 1) {
|
existing.delFlag = 0; // 恢复显示
|
}
|
} else {
|
records.push({
|
id: null,
|
organname: this.getOrganNameByNo(no),
|
organno: no,
|
organStartTime: "",
|
organgettime: "",
|
gainhospitalno: "",
|
gainhospitalname: "",
|
organgetdoct: "",
|
assistant: "",
|
procurementNurse: "",
|
operatingRoomNurse: "",
|
anesthesiologist: "",
|
organstate: "1",
|
notgetreason: "",
|
delFlag: 0
|
});
|
}
|
});
|
|
// （可选）如果加载时后端返回了 delFlag=1 的记录，但实际应该显示，强制重置
|
records.forEach(r => {
|
if (r.delFlag === 1) r.delFlag = 0;
|
});
|
|
this.form.organdonation = this.selectedOrgans.join(",");
|
},
|
// 获取医院数据
|
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("获取医院数据失败");
|
}
|
},
|
// 移植医院模糊搜索
|
queryHospitalSearch(queryString, cb) {
|
const hospitals = this.dict.type.Geta_hospital || [];
|
const results = queryString
|
? hospitals.filter(item =>
|
item.label.toLowerCase().includes(queryString.toLowerCase())
|
)
|
: hospitals;
|
|
// el-autocomplete 需要 value 字段
|
cb(results.map(item => ({ value: item.label })));
|
},
|
// 器官选择状态变化
|
async handleOrganSelectionChange(selectedValues) {
|
// 1. 处理互斥逻辑（修改 this.selectedOrgans）
|
this.handleExclusiveSelections(selectedValues);
|
|
const finalSelected = this.selectedOrgans;
|
const records = this.procurementData.serviceDonationwitnessorgans || [];
|
|
// 2. 构建目标器官编号列表（展开组合器官）
|
const targetOrganNos = [];
|
finalSelected.forEach(val => {
|
if (this.organExpansionMap[val]) {
|
targetOrganNos.push(...this.organExpansionMap[val].subItems);
|
} else {
|
targetOrganNos.push(val);
|
}
|
});
|
|
// 3. 新增或恢复目标器官记录（无弹窗）
|
targetOrganNos.forEach(no => {
|
const existing = records.find(r => r.organno === no);
|
if (existing) {
|
if (existing.delFlag === 1) {
|
existing.delFlag = 0; // 恢复显示
|
}
|
} else {
|
records.push({
|
id: null,
|
organname: this.getOrganNameByNo(no),
|
organno: no,
|
organStartTime: "",
|
organgettime: "",
|
gainhospitalno: "",
|
gainhospitalname: "",
|
organgetdoct: "",
|
assistant: "",
|
procurementNurse: "",
|
operatingRoomNurse: "",
|
anesthesiologist: "",
|
organstate: "1",
|
notgetreason: "",
|
delFlag: 0
|
});
|
}
|
});
|
|
// 4. 找出需要取消的记录（不在目标集合中）
|
const toRemove = records.filter(r => !targetOrganNos.includes(r.organno));
|
const toRemoveSaved = toRemove.filter(r => r.id); // 已保存，需确认
|
const toRemoveUnsaved = toRemove.filter(r => !r.id); // 未保存，直接移除
|
|
// 4.1 直接移除未保存的记录
|
toRemoveUnsaved.forEach(r => {
|
const idx = records.indexOf(r);
|
if (idx !== -1) records.splice(idx, 1);
|
});
|
|
// 4.2 处理已保存的记录：弹窗确认
|
if (toRemoveSaved.length > 0) {
|
const organNames = toRemoveSaved.map(r => r.organname).join("、");
|
try {
|
await this.$confirm(
|
`您确定要取消以下已保存的器官获取记录吗？\n${organNames}\n取消后，这些记录将从列表中移除（数据仍保留，可恢复）。`,
|
"提示",
|
{
|
confirmButtonText: "确定移除",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
);
|
// 用户确认：标记 delFlag=1
|
toRemoveSaved.forEach(r => {
|
r.delFlag = 1;
|
});
|
} catch (error) {
|
// 用户取消：恢复选中状态
|
const parentToRestore = new Set();
|
toRemoveSaved.forEach(r => {
|
const parent = this.organReverseMap[r.organno];
|
if (parent) {
|
parentToRestore.add(parent);
|
} else {
|
parentToRestore.add(r.organno);
|
}
|
});
|
parentToRestore.forEach(val => {
|
if (!this.selectedOrgans.includes(val)) {
|
this.selectedOrgans.push(val);
|
}
|
});
|
this.$message.info("已取消删除操作");
|
// 更新表单字段（保持一致性）
|
this.form.organdonation = this.selectedOrgans.join(",");
|
return; // 退出方法，避免继续执行
|
}
|
}
|
|
// 5. 更新表单字段
|
this.form.organdonation = this.selectedOrgans.join(",");
|
},
|
|
// 处理互斥选择
|
handleExclusiveSelections(selectedValues) {
|
// 双肾与左右肾互斥
|
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");
|
}
|
|
// 全肺与左右肺互斥
|
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.procurementData.serviceDonationwitnessorgans.push({
|
id: null,
|
organname: organName,
|
organno: organValue,
|
organStartTime: "",
|
organgettime: "",
|
gainhospitalno: "",
|
gainhospitalname: "",
|
organgetdoct: "",
|
assistant: "",
|
procurementNurse: "",
|
operatingRoomNurse: "",
|
anesthesiologist: "",
|
organstate: "1",
|
notgetreason: ""
|
});
|
},
|
|
// 医院选择变化
|
handleHospitalChange(row, hospitalNo) {
|
const hospital = this.hospitalList.find(
|
item => item.hospitalNo === hospitalNo
|
);
|
if (hospital) {
|
row.gainhospitalname = hospital.hospitalName;
|
}
|
},
|
// 编辑获取记录
|
handleEditProcurement(row) {
|
const index = this.procurementData.serviceDonationwitnessorgans.findIndex(
|
item => item.organno === row.organno
|
);
|
if (index !== -1) {
|
this.currentRecord = { ...row };
|
this.currentEditIndex = index;
|
this.editDialogVisible = true;
|
}
|
},
|
// 确认编辑
|
handleEditConfirm() {
|
if (this.currentEditIndex !== -1) {
|
this.procurementData.serviceDonationwitnessorgans[
|
this.currentEditIndex
|
] = {
|
...this.currentRecord
|
};
|
this.$message.success("获取记录更新成功");
|
this.editDialogVisible = false;
|
}
|
},
|
// 器官行样式
|
getOrganRowClassName({ row }) {
|
if (
|
!row.organStartTime ||
|
!row.organgettime ||
|
!row.gainhospitalno ||
|
!row.organgetdoct
|
) {
|
return "warning-row";
|
}
|
return "";
|
},
|
// 保存基本信息
|
async handleSave() {
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
this.saveLoading = true;
|
try {
|
console.log(this.procurementData.serviceDonationwitnessorgans);
|
|
const saveData = {
|
...this.form,
|
deathjudgeannex: JSON.stringify(this.attachments),
|
organdonation: this.selectedOrgans.join(","),
|
serviceDonationwitnessorganList:
|
this.procurementData.serviceDonationwitnessorgans || [],
|
serviceDonationwitnessorgans:
|
this.procurementData.serviceDonationwitnessorgans || []
|
};
|
console.log(saveData.serviceDonationwitnessorganList);
|
console.log(saveData.serviceDonationwitnessorgans);
|
|
const apiMethod = this.form.id ? witnessedit : witnessadd;
|
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 handleSaveProcurement() {
|
if (!this.form.id) {
|
this.$message.warning("请先保存基本信息");
|
return;
|
}
|
|
this.saveLoading = true;
|
try {
|
const saveData = {
|
...this.form,
|
attachments: this.attachments,
|
organdonation: this.selectedOrgans.join(","),
|
serviceDonationwitnessorgans:
|
this.procurementData.serviceDonationwitnessorgans || []
|
};
|
|
const response = await witnessedit(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 handleConfirmProcurement() {
|
if (this.incompleteRecords > 0) {
|
this.$message.warning("请先完善所有获取记录的信息");
|
return;
|
}
|
|
this.$confirm("确认完成器官获取吗？完成后将无法修改获取信息。", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(async () => {
|
this.confirmLoading = true;
|
this.form.witnessState = "3";
|
this.form.operationendtime =
|
this.form.operationendtime ||
|
new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
|
try {
|
const saveData = {
|
...this.form,
|
attachments: this.attachments,
|
organdonation: this.selectedOrgans.join(","),
|
serviceDonationwitnessorgans:
|
this.procurementData.serviceDonationwitnessorgans || []
|
};
|
|
const response = await witnessedit(saveData);
|
|
if (response.code === 200) {
|
this.$message.success("器官获取已完成");
|
} else {
|
this.$message.error(
|
"确认获取失败：" + (response.msg || "未知错误")
|
);
|
this.form.witnessState = "2";
|
this.form.operationendtime = "";
|
}
|
} catch (error) {
|
console.error("确认获取失败:", error);
|
this.$message.error("确认获取失败");
|
this.form.witnessState = "2";
|
this.form.operationendtime = "";
|
} finally {
|
this.confirmLoading = false;
|
}
|
})
|
.catch(() => {});
|
},
|
// 确认获取按钮别名
|
handleProcure() {
|
this.handleConfirmProcurement();
|
},
|
|
// ===== 附件相关方法 =====
|
// 打开上传对话框
|
openUploadDialog(category) {
|
this.currentUploadCategory = category;
|
this.tempFileList = [];
|
this.uploadDialogVisible = true;
|
this.$nextTick(() => {
|
if (this.$refs.uploadRef) {
|
this.$refs.uploadRef.clearFiles();
|
}
|
});
|
},
|
|
// 上传前校验
|
beforeUpload(file) {
|
const allowedTypes = [
|
"application/pdf",
|
"image/jpeg",
|
"image/png",
|
"application/msword",
|
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
|
];
|
const maxSize = 10 * 1024 * 1024;
|
const isTypeOk =
|
allowedTypes.includes(file.type) ||
|
file.name.endsWith(".pdf") ||
|
file.name.endsWith(".jpg") ||
|
file.name.endsWith(".jpeg") ||
|
file.name.endsWith(".png") ||
|
file.name.endsWith(".doc") ||
|
file.name.endsWith(".docx");
|
if (!isTypeOk) {
|
this.$message.error("文件格式不支持，请上传pdf、jpg、png、doc或docx格式文件");
|
return false;
|
}
|
if (file.size > maxSize) {
|
this.$message.error("文件大小不能超过10MB");
|
return false;
|
}
|
return true;
|
},
|
|
// 文件选择变化
|
handleFileChange(file, fileList) {
|
this.tempFileList = fileList;
|
},
|
|
// 临时移除
|
handleTempRemove(file, fileList) {
|
this.tempFileList = fileList;
|
},
|
|
// 上传成功处理
|
handleUploadSuccess(response, file, fileList) {
|
if (response.code !== 200) {
|
this.$message.error(response.msg || "上传失败");
|
return;
|
}
|
// 未分类对应空字符串，与展示/保存逻辑一致
|
const category = this.currentUploadCategory === "未分类" ? "" : this.currentUploadCategory;
|
const attachmentObj = {
|
fileName: file.name,
|
path: response.fileUrl || response.url || response.data || file.url,
|
fileUrl: response.fileUrl || response.url || response.data || file.url,
|
fileType: category,
|
fileSize: file.size,
|
uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
|
};
|
if (!Array.isArray(this.attachments)) {
|
this.attachments = [];
|
}
|
this.attachments.push(attachmentObj);
|
this.$message.success("文件上传成功");
|
this.uploadLoading = false;
|
this.uploadDialogVisible = false;
|
this.tempFileList = [];
|
},
|
|
// 提交上传
|
submitUpload() {
|
if (this.tempFileList.length === 0) {
|
this.$message.warning("请先选择要上传的文件");
|
return;
|
}
|
this.uploadLoading = true;
|
this.$refs.uploadRef.submit();
|
},
|
|
// 获取某分类的文件数量
|
getCategoryCount(category) {
|
return this.attachments.filter(item => {
|
const type = item.fileType || "";
|
if (category === "未分类") {
|
return !this.presetCategories.includes(type);
|
}
|
return type === category;
|
}).length;
|
},
|
|
// 获取某分类的文件列表
|
getCategoryFiles(category) {
|
return this.attachments.filter(item => {
|
const type = item.fileType || "";
|
if (category === "未分类") {
|
return !this.presetCategories.includes(type);
|
}
|
return type === category;
|
});
|
},
|
|
// 更新附件分类（下拉修改时触发）
|
updateAttachmentCategory(row, newVal) {
|
const target = this.attachments.find(item => item === row);
|
if (target) {
|
target.fileType = newVal;
|
const currentTabHasFiles = this.getCategoryFiles(this.activeTab).length > 0;
|
if (!currentTabHasFiles) {
|
const firstCategory = this.categories[0];
|
if (firstCategory) this.activeTab = firstCategory;
|
}
|
}
|
},
|
|
// 按文件对象删除（用于表格中的删除按钮）
|
handleRemoveAttachmentByFile(file) {
|
this.$confirm("确定要删除这个附件吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
const index = this.attachments.findIndex(item => item === file);
|
if (index > -1) {
|
this.attachments.splice(index, 1);
|
this.$message.success("附件删除成功");
|
}
|
})
|
.catch(() => {});
|
},
|
|
// 文件预览
|
handlePreview(file) {
|
this.currentPreviewFile = {
|
fileName: file.fileName,
|
fileUrl: file.path || file.fileUrl,
|
fileType: this.getFileType(file.fileName)
|
};
|
this.previewVisible = true;
|
},
|
|
// 文件下载
|
handleDownload(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 scoped>
|
.organ-procurement-detail {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.detail-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border: 1px solid #e4e7ed;
|
}
|
|
.procurement-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border: 1px solid #e4e7ed;
|
}
|
|
.attachment-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border: 1px solid #e4e7ed;
|
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;
|
line-height: 1.4;
|
}
|
|
/* 统计信息样式 */
|
.procurement-stats {
|
margin-top: 20px;
|
padding: 15px;
|
background: linear-gradient(135deg, #a6b2e7 0%, #8a66ad 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;
|
}
|
|
/* 空状态样式 */
|
.empty-procurement {
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
background: #fafafa;
|
border-radius: 4px;
|
margin: 20px 0;
|
}
|
|
/* 对话框底部按钮 */
|
.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;
|
}
|
|
/* 表格行样式 */
|
:deep(.warning-row) {
|
background-color: #fff7e6 !important;
|
}
|
|
:deep(.warning-row:hover) {
|
background-color: #ffecc2 !important;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.organ-procurement-detail {
|
padding: 10px;
|
}
|
|
.procurement-stats .el-col {
|
margin-bottom: 10px;
|
}
|
}
|
|
/* ===== 纸质表格网格样式 ===== */
|
.paper-card >>> .el-card__body {
|
padding: 16px;
|
}
|
|
.paper-form {
|
border-left: 1px solid #d0d3db;
|
background: #fff;
|
}
|
|
.paper-form >>> .form-row {
|
display: flex;
|
width: 100%;
|
border-top: 1px solid #d0d3db;
|
}
|
|
.paper-form >>> .el-form-item {
|
flex: 0 0 33.3333%;
|
display: flex;
|
margin: 0;
|
background: #fff;
|
border-right: 1px solid #d0d3db;
|
border-bottom: 1px solid #d0d3db;
|
}
|
.paper-form >>> .el-form-item::after,
|
.paper-form >>> .el-form-item::before {
|
display: none;
|
}
|
|
.paper-form >>> .col-1-3 { flex: 0 0 33.3333%; }
|
.paper-form >>> .col-half { flex: 0 0 50%; }
|
.paper-form >>> .col-2-3 { flex: 0 0 66.6666%; }
|
.paper-form >>> .col-full { flex: 0 0 100%; }
|
|
.paper-form >>> .el-form-item__label {
|
flex: 0 0 120px;
|
width: 120px !important;
|
float: none;
|
padding: 0 8px !important;
|
background: #ecf5ff;
|
border-right: 1px solid #d0d3db;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text-align: center;
|
font-size: 13px;
|
font-weight: 600;
|
color: #2c3038;
|
line-height: 1.3;
|
white-space: normal;
|
word-break: break-all;
|
}
|
.paper-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
|
color: #f56c6c;
|
margin-right: 2px;
|
}
|
|
.paper-form >>> .el-form-item__content {
|
flex: 1;
|
margin-left: 0 !important;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 6px 10px;
|
background: #fff;
|
min-height: 42px;
|
line-height: 1.4;
|
}
|
</style>
|
