From e180f49ba502e776202ed8e7a296a0b07adc7c6b Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Tue, 23 Apr 2024 10:35:31 +0800
Subject: [PATCH] =?UTF-8?q?hospital=E6=A8=A1=E5=9D=97=E6=9B=B4=E6=94=B9log?=
 =?UTF-8?q?o=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/hospital/uploadLogo.vue | 58 ++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/views/system/hospital/uploadLogo.vue b/src/views/system/hospital/uploadLogo.vue
index 25b3909..d8e23d3 100644
--- a/src/views/system/hospital/uploadLogo.vue
+++ b/src/views/system/hospital/uploadLogo.vue
@@ -2,6 +2,7 @@
   <div class="upload-container">
     <el-upload
       class="upload-demo"
+      :class="{uploadDisabled:fileList.length > 0 ? true:false}"
       action
       :http-request="uploadFile"
       :before-upload="beforeUpload"
@@ -12,13 +13,37 @@
       :on-exceed="handleExceed"
       accept=".png,.jpg,.jpeg"
       v-if="!disabled"
+      list-type="picture-card"
     >
-      <el-button size="small" type="primary" :disabled="btnDisabled"
+      <!-- <el-button size="small" type="primary" :disabled="btnDisabled"
         >上传</el-button
       >
-      <span slot="tip" class="el-upload__tip">(只能上传png/jpg/jpeg文件)</span>
+      <span slot="tip" class="el-upload__tip">(只能上传png/jpg/jpeg文件)</span> -->
+      <i slot="default" class="el-icon-plus"></i>
+      <div slot="file" slot-scope="{file}">
+        <img
+          class="el-upload-list__item-thumbnail"
+          :src="`${OSSclientConfig.basePath}${file.url}`" 
+          alt=""
+          crossorigin="anonymous"
+        >
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </div>
     </el-upload>
-    <p
+    <!-- <p
       v-if="fileList.length > 0 && disabled"
       class="logoAMessage"
       @click.stop="handlePreview(fileList[0])"
@@ -26,7 +51,10 @@
     >
       <i class="el-icon-document"></i>
       <span>{{ fileList.length > 0 ? fileList[0].name : "" }}</span>
-    </p>
+    </p> -->
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="70%" :src="`${OSSclientConfig.basePath}${dialogImageUrl}`"  crossorigin="anonymous" alt="">
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -47,6 +75,8 @@ export default {
     return {
       fileList: [],
       btnDisabled: false,
+      dialogVisible: false,
+      dialogImageUrl: ''
     };
   },
   watch: {
@@ -149,6 +179,13 @@ export default {
         return false;
       }
     },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleRemove(file) {
+      this.fileList = [];
+    }
   },
 };
 </script>
@@ -168,4 +205,17 @@ export default {
   font-size: 12px;
   cursor: pointer;
 }
+.upload-container .uploadDisabled .el-upload--picture-card {
+  display: none;
+}
+.upload-container .el-upload--picture-card {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
+.upload-container .el-upload-list--picture-card .el-upload-list__item {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
 </style>