hospital模块更改logo上传

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>