From c4599aa279fd2f90b741608392e056fbae2282d5 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 20 八月 2026 17:16:54 +0800
Subject: [PATCH] 各表单布局调整
---
src/views/business/course/components/OrganProcurementStage.vue | 1044 +++++++++++++++------------------------------------------
1 files changed, 274 insertions(+), 770 deletions(-)
diff --git a/src/views/business/course/components/OrganProcurementStage.vue b/src/views/business/course/components/OrganProcurementStage.vue
index fe95cd1..a3e8163 100644
--- a/src/views/business/course/components/OrganProcurementStage.vue
+++ b/src/views/business/course/components/OrganProcurementStage.vue
@@ -1,5 +1,6 @@
<template>
<div class="organ-procurement-detail">
+ <!-- <case-basic-info :case-id="caseId" :show-attachment="true":column="3" /> -->
<!-- 鍩烘湰淇℃伅 -->
<el-card class="detail-card">
@@ -7,198 +8,32 @@
<span class="detail-title">鍣ㄥ畼鑾峰彇鍩烘湰淇℃伅</span>
</div>
- <el-form :model="form" ref="form" :rules="rules" label-width="120px">
- <!-- 鎵嬫湳鐩稿叧淇℃伅 -->
- <el-divider content-position="left">鎵嬫湳淇℃伅</el-divider>
+ <el-descriptions title="鎵嬫湳淇℃伅" :column="descriptionColumn" border size="small">
+ <el-descriptions-item label="鎵嬫湳鍖荤敓">{{ form.operationdoctor || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鎵嬫湳寮�濮嬫椂闂�">{{ form.operationbegtime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鎵嬫湳缁撴潫鏃堕棿">{{ form.operationendtime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鑵逛富鍔ㄨ剦鎻掔鏃堕棿">{{ form.abdominalaortacannulatime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鑵逛富鍔ㄨ剦鐏屾敞鏃堕棿">{{ form.abdominalaortaperfusiontime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="闂ㄩ潤鑴夋彃绠℃椂闂�">{{ form.portalveincannulatime || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="闂ㄩ潤鑴夌亴娉ㄦ椂闂�">{{ form.portalveinperfusiontime || '-' }}</el-descriptions-item>
+ </el-descriptions>
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="鎵嬫湳鍖荤敓" prop="operationdoctor">
- <el-input v-model="form.operationdoctor" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鎵嬫湳寮�濮嬫椂闂�" prop="operationbegtime">
- <el-date-picker
- v-model="form.operationbegtime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鎵嬫湳缁撴潫鏃堕棿" prop="operationendtime">
- <el-date-picker
- v-model="form.operationendtime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <el-descriptions title="鍗忚皟鍛樹俊鎭�" :column="descriptionColumn" border size="small">
+ <el-descriptions-item label="杩涙墜鏈鏃堕棿">{{ form.coordinatorInOperating || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍑烘墜鏈鏃堕棿">{{ form.coordinatorOutOperating || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鏄惁榛樺搥缂呮��">{{ form.isspendremember === 1 ? '鏄�' : form.isspendremember === 0 ? '鍚�' : '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鎭㈠閬椾綋浠">{{ form.isrestoreremains === 1 ? '鏄�' : form.isrestoreremains === 0 ? '鍚�' : '-' }}</el-descriptions-item>
+ </el-descriptions>
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item
- label="鑵逛富鍔ㄨ剦鎻掔鏃堕棿"
- prop="abdominalaortacannulatime"
- >
- <el-date-picker
- v-model="form.abdominalaortacannulatime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item
- label="鑵逛富鍔ㄨ剦鐏屾敞鏃堕棿"
- prop="abdominalaortaperfusiontime"
- >
- <el-date-picker
- v-model="form.abdominalaortaperfusiontime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- </el-row>
+ <el-descriptions title="璐熻矗浜轰俊鎭�" :column="descriptionColumn" border size="small">
+ <el-descriptions-item label="璐熻矗浜哄鍚�">{{ form.responsibleusername || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍗忚皟鍛樹竴">{{ form.coordinatedusernameo || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍗忚皟鍛樹簩">{{ form.coordinatedusernamet || '-' }}</el-descriptions-item>
+ </el-descriptions>
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="闂ㄩ潤鑴夋彃绠℃椂闂�" prop="portalveincannulatime">
- <el-date-picker
- v-model="form.portalveincannulatime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="闂ㄩ潤鑴夌亴娉ㄦ椂闂�" prop="portalveinperfusiontime">
- <el-date-picker
- v-model="form.portalveinperfusiontime"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 鍗忚皟鍛樹俊鎭� -->
- <el-divider content-position="left">鍗忚皟鍛樹俊鎭�</el-divider>
-
- <el-row :gutter="20">
- <!-- <el-col :span="8">
- <el-form-item label="鍗忚皟鍛樺鍚�" prop="coordinatorName">
- <el-input v-model="form.coordinatorName" />
- </el-form-item>
- </el-col> -->
- <el-col :span="8">
- <el-form-item label="杩涙墜鏈鏃堕棿" prop="coordinatorInOperating">
- <el-date-picker
- v-model="form.coordinatorInOperating"
- type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- style="width: 100%"
- />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鍑烘墜鏈鏃堕棿" prop="coordinatorOutOperating">
- <el-date-picker
- v-model="form.coordinatorOutOperating"
- 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="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-col :span="8">
- <el-form-item label="鏄惁榛樺搥缂呮��" prop="isspendremember">
- <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-col>
- <el-col :span="8">
- <el-form-item label="鎭㈠閬椾綋浠" prop="isrestoreremains">
- <el-select v-model="form.isrestoreremains" style="width: 100%">
- <el-option label="鏄�" :value="1" />
- <el-option label="鍚�" :value="0" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 璐熻矗浜轰俊鎭� -->
- <el-divider content-position="left">璐熻矗浜轰俊鎭�</el-divider>
-
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="璐熻矗浜哄鍚�" prop="responsibleusername">
- <el-input v-model="form.responsibleusername" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鍗忚皟鍛樹竴" prop="coordinatedusernameo">
- <el-input v-model="form.coordinatedusernameo" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="鍗忚皟鍛樹簩" prop="coordinatedusernamet">
- <el-input v-model="form.coordinatedusernamet" />
- </el-form-item>
- </el-col>
- </el-row>
-
- <!-- 鑾峰彇鏈烘瀯淇℃伅 -->
- <el-divider content-position="left">鑾峰彇鏈烘瀯淇℃伅</el-divider>
-
- <el-row :gutter="20">
- <el-col :span="8">
- <el-form-item label="鑾峰彇鏈烘瀯鍚嶇О" prop="gainhospitalname">
- <el-input
- v-model="form.gainhospitalname"
- placeholder="璇疯緭鍏ヨ幏鍙栨満鏋勫悕绉�"
- />
- </el-form-item>
- </el-col>
- <!-- <el-col :span="8">
- <el-form-item label="鎹愮尞缂栧彿" prop="gainhospitalno">
- <el-input
- v-model="form.gainhospitalno"
- placeholder="璇疯緭鍏ユ崘鐚紪鍙�"
- />
- </el-form-item>
- </el-col> -->
- </el-row>
- </el-form>
+ <el-descriptions title="鑾峰彇鏈烘瀯淇℃伅" :column="descriptionColumn" border size="small">
+ <el-descriptions-item label="鑾峰彇鏈烘瀯鍚嶇О">{{ form.gainhospitalname || '-' }}</el-descriptions-item>
+ </el-descriptions>
</el-card>
<!-- 鍣ㄥ畼鑾峰彇璁板綍閮ㄥ垎 -->
@@ -213,209 +48,29 @@
</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-descriptions title="鎹愮尞鍣ㄥ畼" :column="1" border size="small" style="margin-bottom: 16px;">
+ <el-descriptions-item label="鎹愮尞鍣ㄥ畼">
+ <template v-if="selectedOrgans && selectedOrgans.length">
+ <span v-for="(v, i) in selectedOrgans" :key="v">
+ {{ getOrganLabel(v) }}<span v-if="i < selectedOrgans.length - 1">銆�</span>
+ </span>
+ </template>
+ <template v-else>-</template>
+ </el-descriptions-item>
+ </el-descriptions>
- <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 :data="displayOrgans" v-loading="loading" border style="width: 100%">
+ <el-table-column label="鍣ㄥ畼鍚嶇О" align="center" prop="organname" />
+ <el-table-column label="鑾峰彇寮�濮嬫椂闂�" align="center" prop="organStartTime" />
+ <el-table-column label="鍣ㄥ畼绂讳綋鏃堕棿" align="center" prop="organgettime" />
+ <el-table-column label="鑾峰彇鍖婚櫌" align="center" prop="gainhospitalname" show-overflow-tooltip />
+ <el-table-column label="鑾峰彇鍖诲笀" align="center" prop="organgetdoct" />
+ <el-table-column label="璇存槑" align="center" prop="notgetreason" min-width="200" show-overflow-tooltip />
+ </el-table>
- <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>
+ <div v-if="!displayOrgans.length" class="empty-procurement">
+ <el-empty description="鏆傛棤鑾峰彇璁板綍" :image-size="80" />
+ </div>
</el-card>
<!-- 闄勪欢绠＄悊閮ㄥ垎 - 鍒嗙被Tab灞曠ず -->
@@ -424,253 +79,96 @@
<span class="detail-title">鐩稿叧闄勪欢</span>
</div>
- <!-- 涓婁紶鍖哄煙锛堟棤鍒嗙被閫夋嫨锛岀敱Tab鎺у埗锛� -->
- <div class="upload-wrapper">
- <UploadAttachment
- ref="uploadAttachment"
- :file-list="attachmentFileList"
- :limit="attachmentLimit"
- :accept="attachmentAccept"
- :multiple="true"
- @change="handleAttachmentChange"
- @upload-success="handleUploadSuccess"
- @upload-error="handleUploadError"
- @remove="handleAttachmentRemove"
- />
- <div style="font-size:12px; color:#909399; margin-top:4px;">
- 褰撳墠涓婁紶鍒嗙被锛�<el-tag size="small" type="info">{{
- activeTab === "鏈垎绫�" ? "鏈垎绫�" : activeTab
- }}</el-tag>
- 锛堝垏鎹� Tab 鍙敼鍙樹笂浼犲垎绫伙級
- </div>
- </div>
-
- <!-- 闄勪欢鍒楄〃 - 鍒嗙被Tab灞曠ず锛屾敮鎸佷慨鏀瑰垎绫� -->
- <div class="attachment-list" v-if="attachments && attachments.length > 0">
- <el-tabs v-model="activeTab" type="border-card">
- <el-tab-pane
- v-for="category in categories"
- :key="category"
- :label="category + '(' + getCategoryCount(category) + ')'"
- :name="category"
+ <!-- 闄勪欢鍒楄〃 - 鍒嗙被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"
+ >
+ <el-table
+ :data="getCategoryFiles(category)"
+ style="width: 100%"
+ size="small"
+ border
>
- <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>
- </el-tab-pane>
- </el-tabs>
- </div>
-
- <!-- 鏃犻檮浠舵椂鏄剧ず -->
- <div v-else style="text-align:center; padding:20px; color:#909399;">
- 鏆傛棤闄勪欢锛岃涓婁紶
- </div>
+ <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">
+ <span>{{ scope.row.fileType || '鏈垎绫�' }}</span>
+ </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="100" fixed="right">
+ <template #default="scope">
+ <el-button
+ size="mini"
+ type="primary"
+ @click="handlePreview(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="filePreviewTitle"
- :visible.sync="filePreviewVisible"
- width="800px"
- @close="filePreviewVisible = false"
- >
- <div v-if="currentPreviewFile">
- <div v-if="currentPreviewFile.fileType === 'image'">
- <img
- :src="currentPreviewFile.fileUrl"
- style="max-width: 100%; max-height: 500px;"
- />
- </div>
- <div v-else-if="currentPreviewFile.fileType === 'pdf'">
- <iframe
- :src="currentPreviewFile.fileUrl"
- width="100%"
- height="500px"
- ></iframe>
- </div>
- <div v-else>
- <p>涓嶆敮鎸侀瑙堟鏂囦欢绫诲瀷锛岃涓嬭浇鏌ョ湅</p>
- </div>
- </div>
- </el-dialog>
+ <FilePreviewDialog
+ :visible="previewVisible"
+ :file="currentPreviewFile"
+ @close="previewVisible = false"
+ @download="handleDownload"
+ />
</div>
</template>
<script>
import { witnessList, witnessadd, witnessedit } from "@/api/businessApi";
-import UploadAttachment from "@/components/UploadAttachment";
+import FilePreviewDialog from "@/components/FilePreviewDialog";
import CaseBasicInfo from "@/components/CaseBasicInfo";
+import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
+import readonlyDescriptionsMixin from "./readonlyDescriptionsMixin";
export default {
name: "OrganProcurementDetail",
components: {
- UploadAttachment,
+ FilePreviewDialog,
CaseBasicInfo
},
+ mixins: [readonlyDescriptionsMixin],
dicts: [
"sys_BloodType",
"Geta_hospital",
@@ -784,19 +282,22 @@
},
// 闄勪欢鏁版嵁
attachments: [],
- attachmentFileList: [],
- // 闄勪欢鐩稿叧閰嶇疆
- attachmentLimit: 10,
- attachmentAccept:
- ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+ // 涓婁紶鐩稿叧
+ uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
+ headers: {
+ Authorization: "Bearer " + getToken()
+ },
+ uploadDialogVisible: false,
+ uploadLoading: false,
+ tempFileList: [],
+ currentUploadCategory: "",
// 缂栬緫瀵硅瘽妗�
editDialogVisible: false,
currentRecord: {},
currentEditIndex: -1,
// 鏂囦欢棰勮鐩稿叧
- filePreviewVisible: false,
- currentPreviewFile: null,
- filePreviewTitle: ""
+ previewVisible: false,
+ currentPreviewFile: null
};
},
computed: {
@@ -854,22 +355,6 @@
return this.dict.type.sys_Organ || [];
}
},
- 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
- }
- },
created() {
this.caseId = this.infoid;
@@ -884,7 +369,7 @@
// 鍒濆鍖栨暟鎹�
initData() {
- const infoid = this.infoid;
+ const infoid = this.infoid;
if (!infoid) {
this.$message.error("缂哄皯蹇呰鐨勮矾鐢卞弬鏁� infoid");
@@ -939,19 +424,8 @@
fileType: item.fileType || "" // 榛樿绌哄瓧绗︿覆琛ㄧず鏈垎绫�
}));
this.form.attachments = this.attachments;
- // 鍚屾 attachmentFileList
- this.attachmentFileList = this.attachments.map(item => ({
- uid: item.id || Math.random(),
- name: item.fileName,
- url: item.path || item.fileUrl,
- fileSize: item.fileSize,
- uploadTime: item.uploadTime,
- status: "success",
- raw: item
- }));
} else {
this.attachments = [];
- this.attachmentFileList = [];
}
// 澶勭悊鎹愮尞鍣ㄥ畼瀛楁
@@ -1387,133 +861,163 @@
this.handleConfirmProcurement();
},
- // 闄勪欢鐩稿叧鏂规硶
- /** 闄勪欢鍙樺寲澶勭悊 */
- handleAttachmentChange(fileList) {
- this.attachmentFileList = fileList;
+ // ===== 闄勪欢鐩稿叧鏂规硶 =====
+ // 鎵撳紑涓婁紶瀵硅瘽妗�
+ openUploadDialog(category) {
+ this.currentUploadCategory = category;
+ this.tempFileList = [];
+ this.uploadDialogVisible = true;
+ this.$nextTick(() => {
+ if (this.$refs.uploadRef) {
+ this.$refs.uploadRef.clearFiles();
+ }
+ });
},
- /** 闄勪欢绉婚櫎澶勭悊 */
- handleAttachmentRemove(file) {
- // 鐩存帴璋冪敤鏂扮殑鍒犻櫎鏂规硶
- if (file.raw) {
- this.handleRemoveAttachmentByFile(file.raw);
- } else if (file.url) {
- const target = this.attachments.find(
- item => item.path === file.url || item.fileUrl === file.url
- );
- if (target) {
- this.handleRemoveAttachmentByFile(target);
- }
- }
-},
-
- /** 涓婁紶鎴愬姛澶勭悊 */
- handleUploadSuccess({ file, fileList, response }) {
- if (response.code === 200) {
- // 鏍规嵁褰撳墠婵�娲荤殑 Tab 鍐冲畾鍒嗙被锛堟湭鍒嗙被 Tab 瀵瑰簲绌哄瓧绗︿覆锛�
- const category = this.activeTab === '鏈垎绫�' ? '' : this.activeTab;
- const attachmentObj = {
- fileName: file.name,
- path: response.fileUrl || file.url,
- fileUrl: response.fileUrl || 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.attachmentFileList = fileList;
- this.$message.success('鏂囦欢涓婁紶鎴愬姛');
- }
-},
-// 鑾峰彇鏌愬垎绫荤殑鏂囦欢鏁伴噺
-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; // 鍙兘涓虹┖瀛楃涓�
- // 鍚屾鏇存柊 attachmentFileList
- const fileItem = this.attachmentFileList.find(
- f => f.raw === row || f.url === row.fileUrl
- );
- if (fileItem) {
- fileItem.raw.fileType = newVal;
- fileItem.fileType = newVal || '鏈垎绫�';
- }
- // 濡傛灉褰撳墠婵�娲荤殑tab娌℃湁鏂囦欢浜嗭紝鑷姩鍒囨崲鍒扮涓�涓湁鏂囦欢鐨則ab
- const currentTabHasFiles = this.getCategoryFiles(this.activeTab).length > 0;
- if (!currentTabHasFiles) {
- const firstCategory = this.categories[0];
- if (firstCategory) this.activeTab = firstCategory;
- }
- }
-},
-
-// 鎸夋枃浠跺璞″垹闄わ紙鐢ㄤ簬琛ㄦ牸涓殑鍒犻櫎鎸夐挳锛�
-handleRemoveAttachmentByFile(file) {
- const index = this.attachments.findIndex(item => item === file);
- if (index > -1) {
- this.attachments.splice(index, 1);
- // 鍚屾鍒犻櫎 attachmentFileList
- const fileIndex = this.attachmentFileList.findIndex(
- f => f.raw === file || f.url === file.fileUrl
- );
- if (fileIndex > -1) {
- this.attachmentFileList.splice(fileIndex, 1);
- }
- this.$message.success('闄勪欢鍒犻櫎鎴愬姛');
- }
-},
- /** 涓婁紶閿欒澶勭悊 */
- handleUploadError({ file, fileList, error }) {
- console.error("闄勪欢涓婁紶澶辫触:", error);
- this.$message.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+ // 涓婁紶鍓嶆牎楠�
+ 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(
+ "鏂囦欢鏍煎紡涓嶆敮鎸侊紝璇蜂笂浼爌df銆乯pg銆乸ng銆乨oc鎴杁ocx鏍煎紡鏂囦欢"
+ );
+ return false;
+ }
+ if (file.size > maxSize) {
+ this.$message.error("鏂囦欢澶у皬涓嶈兘瓒呰繃10MB");
+ return false;
+ }
+ return true;
},
- /** 鎵嬪姩鍒犻櫎闄勪欢 */
- handleRemoveAttachment(index) {
- this.attachments.splice(index, 1);
- this.attachmentFileList.splice(index, 1);
- this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+ // 鏂囦欢閫夋嫨鍙樺寲
+ 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.filePreviewTitle = file.fileName;
- this.filePreviewVisible = true;
+ this.previewVisible = true;
},
- /** 鏂囦欢涓嬭浇 */
+ // 鏂囦欢涓嬭浇
handleDownload(file) {
const fileUrl = file.path || file.fileUrl;
const fileName = file.fileName;
--
Gitblit v1.9.3