| | |
| | | <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"> |
| | |
| | | <el-button |
| | | type="success" |
| | | @click="handleComplete" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | :disabled="form.recordstate === 'completed'" |
| | | :loading="confirmLoading" |
| | | > |
| | | 完成利用 |
| | | </el-button> |
| | |
| | | |
| | | <el-form :model="form" ref="form" :rules="rules" label-width="120px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="住院号" prop="hospitalNo"> |
| | | <el-input v-model="form.hospitalNo" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="住院号" prop="caseNo"> |
| | | <el-input v-model="form.caseNo" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="捐献者姓名" prop="donorName"> |
| | | <el-input v-model="form.donorName" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="性别" prop="gender"> |
| | | <el-select v-model="form.gender" style="width: 100%"> |
| | | <el-option label="男" value="0" /> |
| | | <el-option label="女" value="1" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="年龄" prop="age"> |
| | | <el-input v-model="form.age" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="出生日期" prop="birthDate"> |
| | | <el-date-picker |
| | | v-model="form.birthDate" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="疾病诊断" prop="diagnosis"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="2" |
| | | v-model="form.diagnosis" |
| | | placeholder="请输入疾病诊断信息" |
| | | /> |
| | | </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%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-form-item align="left" label="遗体捐献" prop="isBodyDonation"> |
| | | <el-radio-group v-model="form.isBodyDonation"> |
| | | <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" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="18"> |
| | | <el-form-item align="left" label="接收单位" prop="receivingUnit"> |
| | | <el-form-item align="left" label="接收单位" prop="receivingunit"> |
| | | <el-input |
| | | v-model="form.receivingUnit" |
| | | v-model="form.receivingunit" |
| | | placeholder="请输入接收单位" |
| | | :disabled="form.isBodyDonation !== '1'" |
| | | :disabled="form.isbodydonation !== '1'" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <el-form-item label="负责人" prop="responsibleUserId"> |
| | | <el-select |
| | | v-model="form.responsibleUserId" |
| | | placeholder="请选择负责人" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in leaderList" |
| | | :key="item.reportNo" |
| | | :label="item.reportName" |
| | | :value="item.reportNo" |
| | | /> |
| | | </el-select> |
| | | <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="coordinatedUserId1"> |
| | | <el-select |
| | | v-model="form.coordinatedUserId1" |
| | | placeholder="请选择协调员" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in coordinatorList" |
| | | :key="item.reportNo" |
| | | :label="item.reportName" |
| | | :value="item.reportNo" |
| | | /> |
| | | </el-select> |
| | | <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="coordinatedUserId2"> |
| | | <el-select |
| | | v-model="form.coordinatedUserId2" |
| | | placeholder="请选择协调员" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="item in coordinatorList" |
| | | :key="item.reportNo" |
| | | :label="item.reportName" |
| | | :value="item.reportNo" |
| | | /> |
| | | </el-select> |
| | | <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="completionTime"> |
| | | <el-form-item label="完成时间" prop="completetime"> |
| | | <el-date-picker |
| | | v-model="form.completionTime" |
| | | v-model="form.completetime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | | :disabled="form.utilizationStatus !== 'completed'" |
| | | :disabled="form.recordstate === 'completed'" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记人" prop="registrant"> |
| | | <el-input v-model="form.registrant" /> |
| | | <el-form-item label="登记人" prop="createBy"> |
| | | <el-input v-model="form.createBy" readonly /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="登记时间" prop="registrationTime"> |
| | | <el-form-item label="登记时间" prop="createTime"> |
| | | <el-date-picker |
| | | v-model="form.registrationTime" |
| | | v-model="form.createTime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | |
| | | </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.utilizationStatus)"> |
| | | {{ getStatusText(form.utilizationStatus) }} |
| | | <el-tag :type="getStatusTagType(form.recordstate)"> |
| | | {{ getStatusText(form.recordstate) }} |
| | | </el-tag> |
| | | </div> |
| | | </div> |
| | |
| | | <el-row> |
| | | <el-col> |
| | | <el-form-item label-width="100px" label="移植器官"> |
| | | <el-checkbox-group v-model="selectedOrgans" @change="handleOrganSelectionChange"> |
| | | <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.utilizationStatus === 'completed'" |
| | | :disabled="form.recordstate === 'completed'" |
| | | > |
| | | {{ dict.label }} |
| | | </el-checkbox> |
| | |
| | | <el-col> |
| | | <el-form-item> |
| | | <el-table |
| | | :data="utilizationData.records" |
| | | :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" |
| | | width="120" |
| | | prop="organName" |
| | | prop="organname" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.organName" |
| | | v-model="scope.row.organname" |
| | | placeholder="器官名称" |
| | | :disabled="true" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="系统编号" |
| | | align="center" |
| | | width="120" |
| | | prop="caseNo" |
| | | > |
| | | <el-table-column label="系统编号" align="center" prop="caseNo"> |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.caseNo" |
| | | placeholder="系统编号" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <el-table-column |
| | | label="移植医院" |
| | | align="center" |
| | | width="200" |
| | | prop="hospitalNo" |
| | | width="260" |
| | | prop="hospitalno" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-select |
| | | v-model="scope.row.hospitalNo" |
| | | v-model="scope.row.hospitalno" |
| | | placeholder="请选择移植医院" |
| | | style="width: 100%" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | @change="handleHospitalChange(scope.row, $event)" |
| | | > |
| | | <el-option |
| | |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="受体姓氏" |
| | | align="center" |
| | | width="120" |
| | | prop="recipientName" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.recipientName" |
| | | placeholder="受体姓氏" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="移植负责人" |
| | | align="center" |
| | | width="120" |
| | | prop="transplantDoctor" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-input |
| | | v-model="scope.row.transplantDoctor" |
| | | placeholder="医师姓名" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="移植时间" |
| | | align="center" |
| | | width="150" |
| | | prop="transplantTime" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-date-picker |
| | | clearable |
| | | size="small" |
| | | style="width: 100%" |
| | | v-model="scope.row.transplantTime" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="选择移植时间" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="移植状态" |
| | | align="center" |
| | | width="120" |
| | | prop="transplantStatus" |
| | | prop="transplantstate" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-select |
| | | v-model="scope.row.transplantStatus" |
| | | v-model="scope.row.transplantstate" |
| | | placeholder="请选择移植状态" |
| | | style="width: 100%" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | @change="handleTransplantStatusChange(scope.row, $event)" |
| | | > |
| | | <el-option |
| | | v-for="dict in transplantStatusList" |
| | |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | label="说明" |
| | | label="移植时间" |
| | | align="center" |
| | | prop="abandonReason" |
| | | min-width="200" |
| | | 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 |
| | | type="textarea" |
| | | clearable |
| | | v-model="scope.row.abandonReason" |
| | | placeholder="请输入弃用说明" |
| | | :disabled="form.utilizationStatus === 'completed'" |
| | | 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" |
| | | width="120" |
| | | class-name="small-padding fixed-width" |
| | | v-if="form.utilizationStatus !== 'completed'" |
| | | v-if="form.recordstate !== 'completed'" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | |
| | | > |
| | | 编辑 |
| | | </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-col> |
| | | </el-row> |
| | | |
| | | <!-- 利用统计信息 --> |
| | | <div class="utilization-stats" v-if="utilizationData.records.length > 0"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">已利用器官:</span> |
| | | <span class="stat-value">{{ utilizationData.records.length }} 个</span> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <div class="stat-item"> |
| | | <span class="stat-label">待完善信息:</span> |
| | | <span class="stat-value">{{ incompleteRecords }} 个</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"> |
| | | <el-tag :type="getStatusTagType(form.utilizationStatus)"> |
| | | {{ getStatusText(form.utilizationStatus) }} |
| | | </el-tag> |
| | | </span> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <!-- 统计信息 --> |
| | | |
| | | <div v-else class="empty-utilization"> |
| | | <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> |
| | | |
| | | <div class="dialog-footer" v-if="form.utilizationStatus !== 'completed'"> |
| | | <el-button |
| | | type="primary" |
| | | @click="handleSaveUtilization" |
| | | :loading="saveLoading" |
| | | :disabled="utilizationData.records.length === 0" |
| | | > |
| | | 保存利用记录 |
| | | </el-button> |
| | | <el-button |
| | | type="success" |
| | | @click="handleConfirmUtilization" |
| | | :loading="confirmLoading" |
| | | :disabled="incompleteRecords > 0" |
| | | > |
| | | 确认完成利用 |
| | | </el-button> |
| | | </div> |
| | | </el-card> |
| | | |
| | | <!-- 受者详细信息部分 --> |
| | | <el-card class="recipient-card" v-if="utilizationData.records.length > 0"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">受者详细信息</span> |
| | | </div> |
| | | |
| | | <el-tabs v-model="activeRecipientTab" type="card"> |
| | | <el-tab-pane |
| | | v-for="record in utilizationData.records" |
| | | :key="record.organNo" |
| | | :label="record.organName" |
| | | :name="record.organNo" |
| | | > |
| | | <el-form :model="record" label-width="140px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="受者姓名"> |
| | | <el-input v-model="record.recipientName" placeholder="请输入受者姓名" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="出生年月"> |
| | | <el-date-picker |
| | | v-model="record.recipientBirthDate" |
| | | type="month" |
| | | value-format="yyyy-MM" |
| | | placeholder="选择出生年月" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="性别"> |
| | | <el-select v-model="record.recipientGender" placeholder="请选择性别" style="width: 100%"> |
| | | <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="12"> |
| | | <el-form-item label="移植中心名称"> |
| | | <el-input v-model="record.transplantCenter" placeholder="请输入移植中心名称" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="所在地"> |
| | | <el-input v-model="record.location" placeholder="请输入所在地" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="移植日期"> |
| | | <el-date-picker |
| | | v-model="record.transplantTime" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | placeholder="选择移植日期" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="原发病"> |
| | | <el-input v-model="record.originalDisease" placeholder="请输入原发病" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="检测指标"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="3" |
| | | v-model="record.testIndicators" |
| | | placeholder="请输入各类必要的检测指标" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </el-card> |
| | | |
| | | <!-- 随访记录部分 --> |
| | | <el-card class="followup-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">随访记录</span> |
| | | <el-button |
| | | type="primary" |
| | | size="mini" |
| | | icon="el-icon-plus" |
| | | @click="handleAddFollowup" |
| | | style="float: right;" |
| | | > |
| | | 新增随访 |
| | | </el-button> |
| | | </div> |
| | | |
| | | <el-table :data="followupData.records" v-loading="loading" border> |
| | | <el-table-column label="器官名称" align="center" width="120" prop="organName" /> |
| | | <el-table-column label="随访时间" align="center" width="160" prop="followupTime"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.followupTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="随访类型" align="center" width="100" prop="followupType"> |
| | | <template slot-scope="scope"> |
| | | <el-tag :type="getFollowupTypeTag(scope.row.followupType)"> |
| | | {{ getFollowupTypeText(scope.row.followupType) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="受者情况" align="center" prop="recipientCondition" min-width="200" show-overflow-tooltip /> |
| | | <el-table-column label="随访医生" align="center" width="120" prop="followupDoctor" /> |
| | | <el-table-column label="下次随访时间" align="center" width="160" prop="nextFollowupTime"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.nextFollowupTime || '-' }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" width="150"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-view" |
| | | @click="handleViewFollowup(scope.row)" |
| | | >查看</el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleEditFollowup(scope.row)" |
| | | >编辑</el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | style="color: #F56C6C;" |
| | | @click="handleDeleteFollowup(scope.row)" |
| | | >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | |
| | | <!-- 附件管理部分 --> |
| | | <!-- 附件管理部分 - 优化为完整功能 --> |
| | | <el-card class="attachment-card"> |
| | | <div slot="header" class="clearfix"> |
| | | <span class="detail-title">相关附件</span> |
| | | <el-button |
| | | type="primary" |
| | | size="mini" |
| | | icon="el-icon-upload" |
| | | @click="handleUploadAttachment" |
| | | <div class="attachment-header"> |
| | | <i class="el-icon-paperclip"></i> |
| | | <span class="attachment-title">相关附件</span> |
| | | <span class="attachment-tip" |
| | | >支持上传器官利用相关文件 (最多{{ attachmentLimit }}个)</span |
| | | > |
| | | 上传附件 |
| | | </el-button> |
| | | </div> |
| | | |
| | | <div class="attachment-list"> |
| | | <el-table :data="attachments" style="width: 100%"> |
| | | <el-table-column label="文件名称" min-width="200"> |
| | | <!-- 使用 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"> |
| | | <div class="file-info"> |
| | | <i :class="getFileIcon(scope.row.fileName)" style="margin-right: 8px; color: #409EFF;"></i> |
| | | <span>{{ scope.row.fileName }}</span> |
| | | </div> |
| | | <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" align="center"> |
| | | <el-table-column label="文件类型" width="100"> |
| | | <template slot-scope="scope"> |
| | | <el-tag size="small">{{ getFileType(scope.row.fileName) }}</el-tag> |
| | | <el-tag :type="getFileTagType(scope.row.fileName)" size="small"> |
| | | {{ getFileTypeText(scope.row.fileName) }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="文件大小" width="100" align="center"> |
| | | <el-table-column label="上传时间" width="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="160" align="center"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.uploadTime) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="150" align="center"> |
| | | <el-table-column label="操作" width="260" fixed="right"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-view" |
| | | @click="handlePreviewAttachment(scope.row)" |
| | | >预览</el-button> |
| | | type="primary" |
| | | @click="handlePreview(scope.row)" |
| | | :disabled="!isPreviewable(scope.row.fileName)" |
| | | > |
| | | 预览 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-download" |
| | | type="success" |
| | | @click="handleDownloadAttachment(scope.row)" |
| | | >下载</el-button> |
| | | > |
| | | 下载 |
| | | </el-button> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-delete" |
| | | style="color: #F56C6C;" |
| | | @click="handleRemoveAttachment(scope.row)" |
| | | >删除</el-button> |
| | | type="danger" |
| | | @click="handleRemoveAttachment(scope.$index)" |
| | | > |
| | | 删除 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="器官名称"> |
| | | <el-input v-model="currentRecord.organName" readonly /> |
| | | <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.transplantStatus" style="width: 100%"> |
| | | <el-select |
| | | v-model="currentRecord.transplantstate" |
| | | style="width: 100%" |
| | | > |
| | | <el-option |
| | | v-for="dict in transplantStatusList" |
| | | :key="dict.value" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item label="弃用说明" v-if="currentRecord.transplantStatus === '0'"> |
| | | <el-form-item |
| | | label="未移植原因" |
| | | v-if="currentRecord.transplantstate === '0'" |
| | | > |
| | | <el-input |
| | | type="textarea" |
| | | :rows="3" |
| | | v-model="currentRecord.abandonReason" |
| | | placeholder="请输入弃用的原因说明" |
| | | 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"> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <!-- 随访记录对话框 --> |
| | | <el-dialog |
| | | :title="followupDialogTitle" |
| | | :visible.sync="followupDialogVisible" |
| | | width="700px" |
| | | > |
| | | <el-form :model="currentFollowup" label-width="120px"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="器官名称"> |
| | | <el-select v-model="currentFollowup.organNo" style="width: 100%"> |
| | | <el-option |
| | | v-for="organ in utilizationData.records" |
| | | :key="organ.organNo" |
| | | :label="organ.organName" |
| | | :value="organ.organNo" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="随访类型"> |
| | | <el-select v-model="currentFollowup.followupType" style="width: 100%"> |
| | | <el-option label="常规随访" value="routine" /> |
| | | <el-option label="紧急随访" value="emergency" /> |
| | | <el-option label="特殊随访" value="special" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="随访时间"> |
| | | <el-date-picker |
| | | v-model="currentFollowup.followupTime" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="随访医生"> |
| | | <el-input v-model="currentFollowup.followupDoctor" placeholder="请输入随访医生" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-form-item label="受者情况"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="3" |
| | | v-model="currentFollowup.recipientCondition" |
| | | placeholder="请输入受者当前情况" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="用药情况"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="2" |
| | | v-model="currentFollowup.medicationSituation" |
| | | placeholder="请输入用药情况" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="检查结果"> |
| | | <el-input |
| | | type="textarea" |
| | | :rows="2" |
| | | v-model="currentFollowup.testResults" |
| | | placeholder="请输入检查结果" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="下次随访时间"> |
| | | <el-date-picker |
| | | v-model="currentFollowup.nextFollowupTime" |
| | | type="date" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 100%" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer"> |
| | | <el-button @click="followupDialogVisible = false">取消</el-button> |
| | | <el-button type="primary" @click="handleSaveFollowup">保存</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | <!-- 文件预览对话框 --> |
| | | <FilePreviewDialog |
| | | :visible="filePreviewVisible" |
| | | :file="currentPreviewFile" |
| | | @close="filePreviewVisible = false" |
| | | @download="handleDownloadAttachment" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getOrganUtilizationDetail, |
| | | updateOrganUtilization, |
| | | addOrganUtilization, |
| | | saveUtilizationRecords, |
| | | saveFollowupRecord, |
| | | getHospitalList, |
| | | getLeaderList, |
| | | getCoordinatorList |
| | | } from "./organUtilization"; |
| | | 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", |
| | | dicts: ["sys_user_sex", "sys_Organ", "sys_0_1"], |
| | | components: { |
| | | UploadAttachment, |
| | | FilePreviewDialog, |
| | | CaseBasicInfo |
| | | }, |
| | | dicts: ["sys_BloodType", "sys_Organ", "sys_0_1"], |
| | | data() { |
| | | return { |
| | | // 表单数据 |
| | | caseId: null, |
| | | |
| | | // 表单数据 - 根据接口参数调整 |
| | | form: { |
| | | id: undefined, |
| | | hospitalNo: "", |
| | | infoid: undefined, |
| | | inpatientno: "", |
| | | recordstate: "pending", |
| | | caseNo: "", |
| | | donorName: "", |
| | | gender: "", |
| | | donorno: "", |
| | | treatmenthospitalname: "", |
| | | treatmenthospitalno: "", |
| | | sex: "", |
| | | name: "", |
| | | age: "", |
| | | birthDate: "", |
| | | diagnosis: "", |
| | | utilizationStatus: "pending", |
| | | allocationTime: "", |
| | | registrant: "", |
| | | registrationTime: "", |
| | | isBodyDonation: "0", |
| | | receivingUnit: "", |
| | | responsibleUserId: "", |
| | | coordinatedUserId1: "", |
| | | coordinatedUserId2: "", |
| | | completionTime: "" |
| | | bloodtype: "", |
| | | idcardno: "", |
| | | diagnosisname: "", |
| | | completetime: "", |
| | | responsibleuserid: "", |
| | | responsibleusername: "", |
| | | coordinateduserido: "", |
| | | coordinatedusernameo: "", |
| | | coordinateduseridt: "", |
| | | coordinatedusernamet: "", |
| | | assessannex: "", |
| | | donateorgan: "", |
| | | isbodydonation: "0", |
| | | receivingunit: "", |
| | | createBy: "", |
| | | createTime: "", |
| | | updateBy: "", |
| | | updateTime: "", |
| | | attachments: [] |
| | | }, |
| | | // 表单验证规则 |
| | | rules: { |
| | | donorName: [ |
| | | name: [ |
| | | { required: true, message: "捐献者姓名不能为空", trigger: "blur" } |
| | | ], |
| | | diagnosis: [ |
| | | diagnosisname: [ |
| | | { required: true, message: "疾病诊断不能为空", trigger: "blur" } |
| | | ], |
| | | donorno: [ |
| | | { required: true, message: "捐献者编号不能为空", trigger: "blur" } |
| | | ] |
| | | }, |
| | | // 利用记录验证规则 |
| | |
| | | selectedOrgans: [], |
| | | // 医院列表 |
| | | hospitalList: [], |
| | | // 负责人列表 |
| | | leaderList: [], |
| | | // 协调员列表 |
| | | coordinatorList: [], |
| | | // 移植状态列表 |
| | | transplantStatusList: [ |
| | | { value: "1", label: "已移植" }, |
| | |
| | | ], |
| | | // 利用记录数据 |
| | | utilizationData: { |
| | | records: [] |
| | | serviceDonatecomporganList: [] |
| | | }, |
| | | // 随访记录数据 |
| | | followupData: { |
| | |
| | | }, |
| | | // 附件数据 |
| | | attachments: [], |
| | | // 当前激活的受者标签 |
| | | activeRecipientTab: "", |
| | | // 展开的行keys |
| | | expandedRows: [], |
| | | // 编辑对话框 |
| | | editDialogVisible: false, |
| | | currentRecord: {}, |
| | | currentEditIndex: -1, |
| | | // 随访对话框 |
| | | followupDialogVisible: false, |
| | | followupDialogTitle: "新增随访记录", |
| | | // 附件相关配置 - 新增 |
| | | attachmentFileList: [], |
| | | attachmentLimit: 10, |
| | | attachmentAccept: |
| | | ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt", |
| | | |
| | | // 文件预览相关 - 新增 |
| | | filePreviewVisible: false, |
| | | currentPreviewFile: null, |
| | | currentFollowup: {}, |
| | | isEditingFollowup: false |
| | | }; |
| | |
| | | currentUser() { |
| | | return JSON.parse(sessionStorage.getItem("user") || "{}"); |
| | | }, |
| | | // 不完整的记录数量 |
| | | incompleteRecords() { |
| | | return this.utilizationData.records.filter( |
| | | record => |
| | | !record.caseNo || |
| | | !record.hospitalNo || |
| | | !record.recipientName || |
| | | !record.transplantTime |
| | | // 已移植数量 |
| | | transplantedCount() { |
| | | if (!this.utilizationData.serviceDonatecomporganList) return 0; |
| | | return this.utilizationData.serviceDonatecomporganList.filter( |
| | | record => record.transplantstate === "1" |
| | | ).length; |
| | | }, |
| | | // 唯一医院数量 |
| | | uniqueHospitals() { |
| | | const hospitals = this.utilizationData.records |
| | | .map(record => record.hospitalNo) |
| | | 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() { |
| | | const id = this.$route.query.id; |
| | | if (id) { |
| | | this.getDetail(id); |
| | | } else { |
| | | this.generateCaseNo(); |
| | | this.form.registrant = this.currentUser.username || "当前用户"; |
| | | this.form.registrationTime = new Date() |
| | | 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.getHospitalData(); |
| | | this.getLeaderData(); |
| | | this.getCoordinatorData(); |
| | | }, |
| | | methods: { |
| | | // 生成住院号 |
| | | generateCaseNo() { |
| | | |
| | | this.generateDonorNo(); |
| | | this.getDetail(); |
| | | this.getHospitalData(); |
| | | }, |
| | | |
| | | // 生成捐献者编号 |
| | | generateDonorNo() { |
| | | const timestamp = Date.now().toString(); |
| | | this.form.hospitalNo = "D" + timestamp.slice(-6); |
| | | this.form.caseNo = "C" + timestamp.slice(-6); |
| | | this.form.donorno = "D" + timestamp.slice(-8); |
| | | this.form.caseNo = "CASE" + timestamp.slice(-6); |
| | | this.form.inpatientno = "IP" + timestamp.slice(-6); |
| | | }, |
| | | |
| | | // 获取详情 |
| | | getDetail(id) { |
| | | async getDetail() { |
| | | this.loading = true; |
| | | getOrganUtilizationDetail(id) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | this.form = response.data; |
| | | if (response.data.utilizationRecords) { |
| | | this.utilizationData.records = response.data.utilizationRecords; |
| | | this.selectedOrgans = response.data.utilizationRecords.map( |
| | | item => item.organNo |
| | | ); |
| | | if (this.utilizationData.records.length > 0) { |
| | | this.activeRecipientTab = this.utilizationData.records[0].organNo; |
| | | } |
| | | } |
| | | if (response.data.followupRecords) { |
| | | this.followupData.records = response.data.followupRecords; |
| | | } |
| | | 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; |
| | | } |
| | | this.loading = false; |
| | | }) |
| | | .catch(error => { |
| | | console.error("获取器官利用详情失败:", error); |
| | | this.loading = false; |
| | | this.$message.error("获取详情失败"); |
| | | }); |
| | | |
| | | // 处理器官利用记录 |
| | | 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; |
| | | } |
| | | }, |
| | | |
| | | // 获取医院数据 |
| | | getHospitalData() { |
| | | getHospitalList().then(response => { |
| | | if (response.code === 200) { |
| | | this.hospitalList = response.data; |
| | | } |
| | | }); |
| | | async getHospitalData() { |
| | | try { |
| | | // TODO: 替换为实际的医院列表接口 |
| | | // 暂时使用模拟数据 |
| | | this.hospitalList = [ |
| | | { hospitalNo: "H001", hospitalName: "北京协和医院" }, |
| | | { hospitalNo: "H002", hospitalName: "上海华山医院" }, |
| | | { hospitalNo: "H003", hospitalName: "上海瑞金医院" }, |
| | | { hospitalNo: "H004", hospitalName: "广州中山医院" }, |
| | | { hospitalNo: "H005", hospitalName: "武汉同济医院" }, |
| | | { hospitalNo: "H006", hospitalName: "成都华西医院" } |
| | | ]; |
| | | } catch (error) { |
| | | console.error("获取医院数据失败:", error); |
| | | this.$message.error("获取医院数据失败"); |
| | | } |
| | | }, |
| | | // 获取负责人数据 |
| | | getLeaderData() { |
| | | getLeaderList().then(response => { |
| | | if (response.code === 200) { |
| | | this.leaderList = response.data; |
| | | } |
| | | }); |
| | | }, |
| | | // 获取协调员数据 |
| | | getCoordinatorData() { |
| | | getCoordinatorList().then(response => { |
| | | if (response.code === 200) { |
| | | this.coordinatorList = response.data; |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 器官选择状态变化 |
| | | handleOrganSelectionChange(selectedValues) { |
| | | const currentOrganNos = this.utilizationData.records.map( |
| | | item => item.organNo |
| | | 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 (!currentOrganNos.includes(organValue)) { |
| | | const organInfo = this.dict.type.sys_Organ.find( |
| | | item => item.value === organValue |
| | | ); |
| | | if (organInfo) { |
| | | this.utilizationData.records.push({ |
| | | organName: organInfo.label, |
| | | organNo: organValue, |
| | | id: null, |
| | | utilizationId: this.form.id, |
| | | caseNo: "", |
| | | hospitalNo: "", |
| | | hospitalName: "", |
| | | recipientName: "", |
| | | transplantDoctor: "", |
| | | transplantTime: "", |
| | | transplantStatus: "1", |
| | | abandonReason: "", |
| | | recipientBirthDate: "", |
| | | recipientGender: "", |
| | | transplantCenter: "", |
| | | location: "", |
| | | originalDisease: "", |
| | | testIndicators: "" |
| | | }); |
| | | } |
| | | if (!currentOrganValues.includes(organValue)) { |
| | | this.createOrganRecord(organValue); |
| | | } |
| | | }); |
| | | |
| | | // 移除取消选择的器官 |
| | | this.utilizationData.records = this.utilizationData.records.filter( |
| | | this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter( |
| | | record => { |
| | | if (selectedValues.includes(record.organNo)) { |
| | | if (selectedValues.includes(record.organno)) { |
| | | return true; |
| | | } else { |
| | | if (record.id) { |
| | |
| | | } |
| | | ) |
| | | .then(() => { |
| | | this.utilizationData.records = this.utilizationData.records.filter( |
| | | r => r.organNo !== record.organNo |
| | | this.utilizationData.serviceDonatecomporganList = this.utilizationData.serviceDonatecomporganList.filter( |
| | | r => r.organno !== record.organno |
| | | ); |
| | | this.$message.success("删除成功"); |
| | | }) |
| | | .catch(() => { |
| | | this.selectedOrgans.push(record.organNo); |
| | | this.selectedOrgans.push(record.organno); |
| | | }); |
| | | return true; |
| | | } else { |
| | |
| | | } |
| | | ); |
| | | }, |
| | | |
| | | // 处理互斥选择 |
| | | handleExclusiveSelections(selectedValues) { |
| | | // 如果选择了"双肾"(假设字典值为C64),自动取消单独的"左肾"(C64L)和"右肾"(C64R)选择 |
| | | if (selectedValues.includes("C64")) { |
| | | this.selectedOrgans = selectedValues.filter( |
| | | item => item !== "C64L" && item !== "C64R" |
| | | ); |
| | | } |
| | | // 如果选择了"左肾"或"右肾",取消"双肾"选择 |
| | | else if ( |
| | | selectedValues.includes("C64L") || |
| | | selectedValues.includes("C64R") |
| | | ) { |
| | | this.selectedOrgans = selectedValues.filter(item => item !== "C64"); |
| | | } |
| | | |
| | | // 如果选择了"全肺"(假设字典值为C34),自动取消单独的"左肺"(C34L)和"右肺"(C34R)选择 |
| | | if (selectedValues.includes("C34")) { |
| | | this.selectedOrgans = selectedValues.filter( |
| | | item => item !== "C34L" && item !== "C34R" |
| | | ); |
| | | } |
| | | // 如果选择了"左肺"或"右肺",取消"全肺"选择 |
| | | else if ( |
| | | selectedValues.includes("C34L") || |
| | | selectedValues.includes("C34R") |
| | | ) { |
| | | this.selectedOrgans = selectedValues.filter(item => item !== "C34"); |
| | | } |
| | | }, |
| | | |
| | | // 创建器官记录 |
| | | createOrganRecord(organValue) { |
| | | 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; |
| | | 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.records.findIndex( |
| | | item => item.organNo === row.organNo |
| | | const index = this.utilizationData.serviceDonatecomporganList.findIndex( |
| | | item => item.organno === row.organno |
| | | ); |
| | | if (index !== -1) { |
| | | this.currentRecord = { ...row }; |
| | |
| | | this.editDialogVisible = true; |
| | | } |
| | | }, |
| | | |
| | | // 确认编辑 |
| | | handleEditConfirm() { |
| | | if (this.currentEditIndex !== -1) { |
| | | this.utilizationData.records[this.currentEditIndex] = { |
| | | 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.caseNo || |
| | | !row.hospitalNo || |
| | | !row.recipientName || |
| | | !row.transplantTime |
| | | 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", |
| | | in_progress: "warning", |
| | | processing: "warning", |
| | | pending: "info" |
| | | }; |
| | | return typeMap[status] || "info"; |
| | | }, |
| | | |
| | | // 获取状态文本 |
| | | getStatusText(status) { |
| | | const textMap = { |
| | | completed: "已完成", |
| | | in_progress: "进行中", |
| | | processing: "进行中", |
| | | pending: "待处理" |
| | | }; |
| | | return textMap[status] || "未知"; |
| | | }, |
| | | |
| | | // 获取随访类型标签 |
| | | getFollowupTypeTag(type) { |
| | | const typeMap = { |
| | |
| | | }; |
| | | return typeMap[type] || "info"; |
| | | }, |
| | | |
| | | // 获取随访类型文本 |
| | | getFollowupTypeText(type) { |
| | | const textMap = { |
| | |
| | | }; |
| | | return textMap[type] || "未知"; |
| | | }, |
| | | |
| | | // 保存基本信息 |
| | | handleSave() { |
| | | this.$refs.form.validate(valid => { |
| | | async handleSave() { |
| | | this.$refs.form.validate(async valid => { |
| | | if (valid) { |
| | | this.saveLoading = true; |
| | | const apiMethod = this.form.id |
| | | ? updateOrganUtilization |
| | | : addOrganUtilization; |
| | | try { |
| | | const saveData = { |
| | | ...this.form, |
| | | assessannex: JSON.stringify(this.attachments), |
| | | donateorgan: this.selectedOrgans.join(","), |
| | | serviceDonatecomporganList: |
| | | this.utilizationData.serviceDonatecomporganList || [] |
| | | }; |
| | | |
| | | apiMethod(this.form) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | this.$message.success("保存成功"); |
| | | if (!this.form.id) { |
| | | this.form.id = response.data.id; |
| | | this.$router.replace({ |
| | | query: { ...this.$route.query, id: this.form.id } |
| | | }); |
| | | } |
| | | 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 } |
| | | }); |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | console.error("保存失败:", error); |
| | | this.$message.error("保存失败"); |
| | | }) |
| | | .finally(() => { |
| | | this.saveLoading = false; |
| | | }); |
| | | } else { |
| | | this.$message.error("保存失败:" + (response.msg || "未知错误")); |
| | | } |
| | | } catch (error) { |
| | | console.error("保存失败:", error); |
| | | this.$message.error("保存失败"); |
| | | } finally { |
| | | this.saveLoading = false; |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 保存利用记录 |
| | | handleSaveUtilization() { |
| | | if (!this.form.id) { |
| | | this.$message.warning("请先保存基本信息"); |
| | | async handleSaveUtilization() { |
| | | if ( |
| | | !this.utilizationData.serviceDonatecomporganList || |
| | | this.utilizationData.serviceDonatecomporganList.length === 0 |
| | | ) { |
| | | this.$message.warning("请先添加利用记录"); |
| | | return; |
| | | } |
| | | |
| | | this.saveLoading = true; |
| | | saveUtilizationRecords(this.form.id, this.utilizationData.records) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | this.$message.success("利用记录保存成功"); |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | console.error("保存利用记录失败:", error); |
| | | this.$message.error("保存利用记录失败"); |
| | | }) |
| | | .finally(() => { |
| | | this.saveLoading = false; |
| | | }); |
| | | 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; |
| | | } |
| | | }, |
| | | |
| | | // 确认完成利用 |
| | | handleConfirmUtilization() { |
| | | if (this.incompleteRecords > 0) { |
| | | 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; |
| | | } |
| | |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | .then(async () => { |
| | | this.confirmLoading = true; |
| | | this.form.utilizationStatus = "completed"; |
| | | this.form.completionTime = new Date() |
| | | .toISOString() |
| | | .replace("T", " ") |
| | | .substring(0, 19); |
| | | this.form.recordstate = "completed"; |
| | | this.form.completetime = |
| | | this.form.completetime || |
| | | new Date() |
| | | .toISOString() |
| | | .replace("T", " ") |
| | | .substring(0, 19); |
| | | |
| | | updateOrganUtilization(this.form) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | this.$message.success("器官利用已完成"); |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | console.error("确认利用失败:", error); |
| | | this.$message.error("确认利用失败"); |
| | | }) |
| | | .finally(() => { |
| | | this.confirmLoading = false; |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | // 完成利用 |
| | | handleComplete() { |
| | | this.handleConfirmUtilization(); |
| | | }, |
| | | // 新增随访记录 |
| | | handleAddFollowup() { |
| | | this.followupDialogTitle = "新增随访记录"; |
| | | this.isEditingFollowup = false; |
| | | this.currentFollowup = { |
| | | organNo: this.utilizationData.records.length > 0 ? this.utilizationData.records[0].organNo : "", |
| | | followupTime: new Date().toISOString().replace("T", " ").substring(0, 19), |
| | | followupType: "routine", |
| | | recipientCondition: "", |
| | | medicationSituation: "", |
| | | testResults: "", |
| | | nextFollowupTime: "", |
| | | followupDoctor: "" |
| | | }; |
| | | this.followupDialogVisible = true; |
| | | }, |
| | | // 查看随访记录 |
| | | handleViewFollowup(record) { |
| | | this.currentFollowup = { ...record }; |
| | | this.followupDialogTitle = "查看随访记录"; |
| | | this.followupDialogVisible = true; |
| | | }, |
| | | // 编辑随访记录 |
| | | handleEditFollowup(record) { |
| | | this.followupDialogTitle = "编辑随访记录"; |
| | | this.isEditingFollowup = true; |
| | | this.currentFollowup = { ...record }; |
| | | this.followupDialogVisible = true; |
| | | }, |
| | | // 删除随访记录 |
| | | handleDeleteFollowup(record) { |
| | | this.$confirm("确定要删除这条随访记录吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | const index = this.followupData.records.findIndex( |
| | | item => item.id === record.id |
| | | ); |
| | | if (index !== -1) { |
| | | this.followupData.records.splice(index, 1); |
| | | this.$message.success("随访记录删除成功"); |
| | | 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.saveLoading = true; |
| | | |
| | | // 获取器官名称 |
| | | const organRecord = this.utilizationData.records.find( |
| | | item => item.organNo === this.currentFollowup.organNo |
| | | const organRecord = this.utilizationData.serviceDonatecomporganList.find( |
| | | item => item.organno === this.currentFollowup.organNo |
| | | ); |
| | | const organName = organRecord ? organRecord.organName : ""; |
| | | const organName = organRecord ? organRecord.organname : ""; |
| | | |
| | | const followupData = { |
| | | ...this.currentFollowup, |
| | |
| | | utilizationId: this.form.id |
| | | }; |
| | | |
| | | saveFollowupRecord(followupData) |
| | | .then(response => { |
| | | if (response.code === 200) { |
| | | if (this.isEditingFollowup) { |
| | | // 更新现有记录 |
| | | const index = this.followupData.records.findIndex( |
| | | item => item.id === this.currentFollowup.id |
| | | ); |
| | | if (index !== -1) { |
| | | this.followupData.records[index] = response.data; |
| | | } |
| | | } else { |
| | | // 添加新记录 |
| | | this.followupData.records.push(response.data); |
| | | } |
| | | this.$message.success("随访记录保存成功"); |
| | | this.followupDialogVisible = false; |
| | | // 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 |
| | | }; |
| | | } |
| | | }) |
| | | .catch(error => { |
| | | console.error("保存随访记录失败:", error); |
| | | this.$message.error("保存随访记录失败"); |
| | | }) |
| | | .finally(() => { |
| | | this.saveLoading = false; |
| | | }); |
| | | } else { |
| | | // 添加新记录 |
| | | this.followupData.records.push({ ...followupData, id: Date.now() }); |
| | | } |
| | | this.$message.success("随访记录保存成功"); |
| | | this.followupDialogVisible = false; |
| | | this.saveLoading = false; |
| | | }, 1000); |
| | | }, |
| | | // 上传附件 |
| | | handleUploadAttachment() { |
| | | this.$message.info("附件上传功能"); |
| | | /** 附件变化处理 */ |
| | | handleAttachmentChange(fileList) { |
| | | this.attachmentFileList = fileList; |
| | | }, |
| | | // 预览附件 |
| | | handlePreviewAttachment(attachment) { |
| | | this.$message.info("附件预览功能"); |
| | | }, |
| | | // 下载附件 |
| | | handleDownloadAttachment(attachment) { |
| | | this.$message.info("附件下载功能"); |
| | | }, |
| | | // 删除附件 |
| | | handleRemoveAttachment(attachment) { |
| | | this.$confirm("确定要删除这个附件吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | |
| | | /** 附件移除处理 */ |
| | | handleAttachmentRemove(file) { |
| | | if (file.url) { |
| | | const index = this.attachments.findIndex( |
| | | item => item.path === file.url || item.fileUrl === file.url |
| | | ); |
| | | if (index > -1) { |
| | | this.attachments.splice(index, 1); |
| | | this.$message.success("附件删除成功"); |
| | | }) |
| | | .catch(() => {}); |
| | | } |
| | | } |
| | | }, |
| | | // 获取文件图标 |
| | | getFileIcon(fileName) { |
| | | const ext = fileName |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | const iconMap = { |
| | | pdf: "el-icon-document", |
| | | doc: "el-icon-document", |
| | | docx: "el-icon-document", |
| | | xls: "el-icon-document", |
| | | xlsx: "el-icon-document", |
| | | jpg: "el-icon-picture", |
| | | jpeg: "el-icon-picture", |
| | | png: "el-icon-picture" |
| | | /** 上传成功处理 */ |
| | | handleUploadSuccess({ file, fileList, response }) { |
| | | if (response.code === 200) { |
| | | const attachmentObj = { |
| | | fileName: file.name, |
| | | path: response.fileUrl || file.url, |
| | | fileUrl: response.fileUrl || file.url, |
| | | fileType: this.getFileExtension(file.name), |
| | | fileSize: file.size, |
| | | uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss") |
| | | }; |
| | | |
| | | 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) |
| | | }; |
| | | return iconMap[ext] || "el-icon-document"; |
| | | this.filePreviewVisible = true; |
| | | }, |
| | | // 获取文件类型 |
| | | /** 文件下载 */ |
| | | handleDownloadAttachment(file) { |
| | | const fileUrl = file.path || file.fileUrl; |
| | | const fileName = file.fileName; |
| | | |
| | | if (fileUrl) { |
| | | const link = document.createElement("a"); |
| | | link.href = fileUrl; |
| | | link.download = fileName; |
| | | link.style.display = "none"; |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | this.$message.success("开始下载文件"); |
| | | } else { |
| | | this.$message.warning("文件路径不存在,无法下载"); |
| | | } |
| | | }, |
| | | |
| | | /** 获取文件类型 */ |
| | | getFileType(fileName) { |
| | | const ext = fileName |
| | | if (!fileName) return "other"; |
| | | const extension = fileName |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | const typeMap = { |
| | | pdf: "PDF", |
| | | doc: "DOC", |
| | | docx: "DOCX", |
| | | xls: "XLS", |
| | | xlsx: "XLSX", |
| | | jpg: "JPG", |
| | | jpeg: "JPEG", |
| | | png: "PNG" |
| | | }; |
| | | return typeMap[ext] || ext.toUpperCase(); |
| | | const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"]; |
| | | const pdfTypes = ["pdf"]; |
| | | const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"]; |
| | | if (imageTypes.includes(extension)) return "image"; |
| | | if (pdfTypes.includes(extension)) return "pdf"; |
| | | if (officeTypes.includes(extension)) return "office"; |
| | | return "other"; |
| | | }, |
| | | // 文件大小格式化 |
| | | formatFileSize(size) { |
| | | if (size === 0) return "0 B"; |
| | | |
| | | /** 获取文件图标颜色 */ |
| | | getFileIconColor(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const colorMap = { |
| | | image: "#67C23A", |
| | | pdf: "#F56C6C", |
| | | office: "#409EFF", |
| | | other: "#909399" |
| | | }; |
| | | return colorMap[type] || "#909399"; |
| | | }, |
| | | |
| | | /** 获取文件标签类型 */ |
| | | getFileTagType(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const typeMap = { |
| | | image: "success", |
| | | pdf: "danger", |
| | | office: "primary", |
| | | other: "info" |
| | | }; |
| | | return typeMap[type] || "info"; |
| | | }, |
| | | |
| | | /** 获取文件类型文本 */ |
| | | getFileTypeText(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | const textMap = { |
| | | image: "图片", |
| | | pdf: "PDF", |
| | | office: "文档", |
| | | other: "其他" |
| | | }; |
| | | return textMap[type] || "未知"; |
| | | }, |
| | | |
| | | /** 检查是否可预览 */ |
| | | isPreviewable(fileName) { |
| | | const type = this.getFileType(fileName); |
| | | return ["image", "pdf"].includes(type); |
| | | }, |
| | | |
| | | /** 获取文件扩展名 */ |
| | | getFileExtension(filename) { |
| | | return filename |
| | | .split(".") |
| | | .pop() |
| | | .toLowerCase(); |
| | | }, |
| | | |
| | | /** 格式化文件大小 */ |
| | | formatFileSize(bytes) { |
| | | if (!bytes || bytes === 0) return "0 B"; |
| | | const k = 1024; |
| | | const sizes = ["B", "KB", "MB", "GB"]; |
| | | const i = Math.floor(Math.log(size) / Math.log(k)); |
| | | return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; |
| | | const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| | | return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]; |
| | | }, |
| | | // 时间格式化 |
| | | parseTime(time) { |
| | | if (!time) return ""; |
| | | const date = new Date(time); |
| | | return `${date.getFullYear()}-${(date.getMonth() + 1) |
| | | .toString() |
| | | .padStart(2, "0")}-${date |
| | | .getDate() |
| | | .toString() |
| | | .padStart(2, "0")} ${date |
| | | .getHours() |
| | | .toString() |
| | | .padStart(2, "0")}:${date |
| | | .getMinutes() |
| | | .toString() |
| | | .padStart(2, "0")}`; |
| | | }, |
| | | // 提交归档 |
| | | handleSubmitArchive() { |
| | | this.$confirm("确认提交归档吗?归档后将无法修改数据。", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | this.$message.success("提交归档成功"); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | // 撤销归档 |
| | | handleRevokeArchive() { |
| | | this.$confirm("确认撤销归档吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | this.$message.success("撤销归档成功"); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | // 终止案例 |
| | | handleTerminateCase() { |
| | | this.$confirm("确认终止案例吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | this.$message.success("案例已终止"); |
| | | }) |
| | | .catch(() => {}); |
| | | }, |
| | | // 恢复案例 |
| | | handleRestoreCase() { |
| | | this.$confirm("确认恢复案例吗?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(() => { |
| | | this.$message.success("案例已恢复"); |
| | | }) |
| | | .catch(() => {}); |
| | | |
| | | /** 日期时间格式化 */ |
| | | 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; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | .detail-card, .utilization-card, .recipient-card, .followup-card, .attachment-card { |
| | | .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; |
| | | } |
| | |
| | | border-radius: 8px; |
| | | color: white; |
| | | } |
| | | |
| | | .stat-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | padding: 10px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 18px; |
| | | font-size: 12px; |
| | | opacity: 0.9; |
| | | margin-bottom: 5px; |
| | | color: rgba(255, 255, 255, 0.9); |
| | | } |
| | | |
| | | .stat-value { |
| | | font-size: 20px; |
| | | 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) { |
| | | border-radius: 4px; |
| | | transition: border-color 0.3s ease; |
| | | } |
| | | |
| | | :deep(.el-input__inner:focus) { |
| | | border-color: #409EFF; |
| | | 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%); |
| | | 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); |
| | | } |
| | | |
| | | /* 标签页样式 */ |
| | | :deep(.el-tabs__item) { |
| | | font-weight: 500; |
| | | } |
| | | :deep(.el-tabs__active-bar) { |
| | | background: linear-gradient(135deg, #409EFF 0%, #3375e0 100%); |
| | | } |
| | | /* 平板设备适配 */ |
| | | @media (max-width: 1024px) { |
| | | .organ-utilization-detail { |
| | | padding: 15px; |
| | | } |
| | | :deep(.el-col) { |
| | | margin-bottom: 10px; |
| | | } |
| | | /* 底部操作按钮 */ |
| | | .dialog-footer { |
| | | margin-top: 20px; |
| | | text-align: center; |
| | | padding-top: 20px; |
| | | border-top: 1px solid #e4e7ed; |
| | | } |
| | | |
| | | /* 手机设备适配 */ |
| | | @media (max-width: 768px) { |
| | | .organ-utilization-detail { |
| | | padding: 10px; |
| | | } |
| | | .detail-title { |
| | | font-size: 16px; |
| | | } |
| | | :deep(.el-table .cell) { |
| | | padding: 8px 4px; |
| | | font-size: 12px; |
| | | } |
| | | :deep(.el-form-item__label) { |
| | | font-size: 12px; |
| | | } |
| | | .dialog-footer .el-button { |
| | | margin: 0 10px; |
| | | min-width: 120px; |
| | | } |
| | | |
| | | /* 超小屏幕设备 */ |
| | | @media (max-width: 480px) { |
| | | .organ-utilization-detail { |
| | | padding: 5px; |
| | | } |
| | | :deep(.el-card__header) { |
| | | padding: 10px 15px; |
| | | } |
| | | } |
| | | /* 空状态样式 */ |
| | | .empty-utilization { |
| | | text-align: center; |
| | |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | /* 加载状态 */ |
| | | :deep(.el-loading-mask) { |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | /* 文件信息样式 */ |
| | | .file-info { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 5px 0; |
| | | } |
| | | |
| | | .file-info i { |
| | | font-size: 18px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | /* 动画效果 */ |
| | | .fade-enter-active, .fade-leave-active { |
| | | transition: opacity 0.3s ease; |
| | | /* 平板设备适配 */ |
| | | @media (max-width: 1024px) { |
| | | .organ-utilization-detail { |
| | | padding: 15px; |
| | | } |
| | | |
| | | :deep(.el-col) { |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .fade-enter, .fade-leave-to { |
| | | opacity: 0; |
| | | |
| | | /* 手机设备适配 */ |
| | | |
| | | /* 超小屏幕设备 */ |
| | | @media (max-width: 480px) { |
| | | .organ-utilization-detail { |
| | | padding: 5px; |
| | | } |
| | | |
| | | :deep(.el-card__header) { |
| | | padding: 10px 15px; |
| | | } |
| | | } |
| | | </style> |