修复资产设置图片不显示

src/widget/ImageWidget.vue

@@ -2,25 +2,32 @@
   <div class="input-group">
     <div class="row">
       <span class="col-md-12">
-        <div
-          v-if="hasImage"
-          class="finish_room2"
-        >
+        <div v-if="hasImage" class="finish_room2">
           <div class="room_img">
-            <img :src="getImageSrc(imageSrc)" />
+            <!-- <img :src="getImageSrc(imageSrc)" /> -->
+            <AuthImage
+              :auth-src="Common.getThumbnailImageSrc(className, imageName)"
+              class="image img-thumbnail"
+              style="width: 78px; height: 78px"
+              @click="$refs.imagePreview.preview(className, imageName)"
+            />
           </div>
           <button
             v-if="!readonly"
             class="btn btn-danger"
             @click="emitFieldValue(null)"
-          >删除</button>
+          >
+            删除
+          </button>
         </div>
         <div v-else>
           <button
             class="btn btn-primary"
             :readonly="!readonly"
             @click="showUploadImageModal"
-          >添加图片</button>
+          >
+            添加图片
+          </button>
         </div>
       </span>
     </div>
@@ -29,29 +36,21 @@
       large="true"
       :show-ok-button="false"
       :show-canel-button="false"
-      @cancel="index=1"
+      @cancel="index = 1"
     >
-      <template #header>
-        添加图片
-      </template>
+      <template #header> 添加图片 </template>
       <ul class="nav nav-tabs">
-        <li
-          role="presentation"
-          :class="{'active':index==1}"
-        >
-          <a @click="index=1">上传文件</a>
+        <li role="presentation" :class="{ active: index == 1 }">
+          <a @click="index = 1">上传文件</a>
         </li>
-        <li
-          role="presentation"
-          :class="{'active':index==2}"
-        >
-          <a @click="index=2">扫描图片</a>
+        <li role="presentation" :class="{ active: index == 2 }">
+          <a @click="index = 2">扫描图片</a>
         </li>
       </ul>
       <br />
       <div class="row">
         <div class="col-md-12">
-          <span v-if="index==1">
+          <span v-if="index == 1">
             <Cropper
               :readonly="readonly"
               :uuid="uuid"
@@ -62,53 +61,54 @@
         </div>
       </div>
     </Modal>
+    <ImagePreview ref="imagePreview" />
     <Loading v-if="loading" />
   </div>
 </template>
 
 <script>
-import Common from '../common/Common.js';
+import Common from "../common/Common.js";
 
-import ImageService from './ImageService.js';
-import FileService from './FileService.js';
+import AuthImage from "./AuthImage.vue";
 
+import ImageService from "./ImageService.js";
+import FileService from "./FileService.js";
 
-import Cropper from './Cropper.vue';
-import { Notify } from 'pc-component-v3';
+import Cropper from "./Cropper.vue";
+import { Notify } from "pc-component-v3";
 
 export default {
-
   components: {
     Cropper,
+    AuthImage,
   },
 
-
   props: {
-    fieldValue:{
+    fieldValue: {
       type: Object,
-      default: function(){
+      default: function () {
         return null;
       },
     },
 
-    className:{
+    className: {
       type: String,
       default: null,
     },
-    readonly:{
+    readonly: {
       type: Boolean,
       default: null,
     },
-    patternJson:{
+    patternJson: {
       type: String,
       default: null,
     },
-    uuid:{
+    uuid: {
       type: String,
       default: null,
     },
   },
-  emits: ['valueChanged'],
+  emits: ["valueChanged"],
 
   data: function () {
     this.Common = Common;
@@ -121,32 +121,43 @@ export default {
   },
   computed: {
     /**
-         * 计算图片地址
-         * @return {String} 图片URL地址
-         */
-    imageSrc: function () {
-      var _self = this;
+     * 计算图片地址
+     * @return {String} 图片URL地址
+     */
+    imageName: function () {
       if (
         this.fieldValue != undefined &&
-                this.fieldValue.displayValue != undefined
+        this.fieldValue.displayValue != undefined
       ) {
         var imageName = this.fieldValue.displayValue[0];
-        return Common.getImageSrc(_self.className, imageName);
+        return imageName;
       } else {
-        return '';
+        return "";
       }
     },
+    // imageSrc: function () {
+    //   var _self = this;
+    //   if (
+    //     this.fieldValue != undefined &&
+    //     this.fieldValue.displayValue != undefined
+    //   ) {
+    //     var imageName = this.fieldValue.displayValue[0];
+    //     return Common.getImageSrc(_self.className, imageName);
+    //   } else {
+    //     return "";
+    //   }
+    // },
 
     /**
-         * 判断是否有图片
-         * @return {Boolean} 是否有图片
-         */
+     * 判断是否有图片
+     * @return {Boolean} 是否有图片
+     */
     hasImage: function () {
       if (
         this.fieldValue != undefined &&
-                this.fieldValue.displayValue != undefined &&
-                this.fieldValue.displayValue[0] != undefined &&
-                this.fieldValue.displayValue[0].length > 0
+        this.fieldValue.displayValue != undefined &&
+        this.fieldValue.displayValue[0] != undefined &&
+        this.fieldValue.displayValue[0].length > 0
       ) {
         return true;
       } else {
@@ -156,101 +167,110 @@ export default {
   },
   mounted: function () {
     //判断浏览器是否支持FileReader接口
-    if (typeof FileReader == 'undefined') {
-      Notify.error('提示', '当前浏览器不支持FileReader接口', false);
+    if (typeof FileReader == "undefined") {
+      Notify.error("提示", "当前浏览器不支持FileReader接口", false);
     }
   },
 
   methods: {
     /**
-         * 获取图片
-         */
+     * 获取图片
+     */
     getImageSrc: function (src) {
       return src;
     },
     /**
-         * 上传图片
-         */
+     * 上传图片
+     */
     uploadImage: function (dataURL) {
       var _self = this;
 
       var blobImg = FileService.dataURLToPngBlob(dataURL);
-      var nameImg = new Date().getTime() + '.png';
+      var nameImg = new Date().getTime() + ".png";
 
       var formData = new FormData();
-      formData.append('className', this.className);
-      formData.append('uploadImage', blobImg, nameImg);
-
-      this.loading=true;
-      ImageService.uploadImage(formData).then(data => {
-        _self.loading=false;
-        _self.addModal = false;
-
-        if (data.errorCode == 0) {
-          if(data.datas != null && data.datas.length > 0){
-            Notify.success(_self.$t('lang.Notify.prompt'), _self.$t('lang.ImageWidget.describe2'), 1500);
-            _self.emitFieldValue(data.datas[0]);
-          } 
-        }else{
-          Notify.success('图片上传失败', data.errorMessage, 1500);
+      formData.append("className", this.className);
+      formData.append("uploadImage", blobImg, nameImg);
+
+      this.loading = true;
+      ImageService.uploadImage(formData).then(
+        (data) => {
+          _self.loading = false;
+          _self.addModal = false;
+
+          if (data.errorCode == 0) {
+            if (data.datas != null && data.datas.length > 0) {
+              Notify.success(
+                _self.$t("lang.Notify.prompt"),
+                _self.$t("lang.ImageWidget.describe2"),
+                1500
+              );
+              _self.emitFieldValue(data.datas[0]);
+            }
+          } else {
+            Notify.success("图片上传失败", data.errorMessage, 1500);
+          }
+        },
+        (errorData) => {
+          _self.loading = false;
         }
-
-
-      }, errorData => {
-        _self.loading=false;
-      });
+      );
     },
     /**
-         * 上传图片
-         *  不裁剪压缩
-         * @param {Object} imageSrcs
-         * @author GuoZhiBo 20210520
-         */
+     * 上传图片
+     *  不裁剪压缩
+     * @param {Object} imageSrcs
+     * @author GuoZhiBo 20210520
+     */
     fileUpload: function (selectedFile) {
       var _self = this;
       var formData = new FormData();
-      formData.append('uploadImage', selectedFile);
-      formData.append('className', _self.className);
-      this.loading=true;
-      ImageService.uploadImage(formData).then(data => {
-        _self.loading=false;
-        _self.addModal = false;
-
-
-        if (data.errorCode == 0) {
-          if(data.datas != null && data.datas.length > 0){
-            Notify.success(_self.$t('lang.Notify.prompt'), _self.$t('lang.ImageWidget.describe2'), 1500);
-            _self.emitFieldValue(data.datas[0]);
-          } 
-        }else{
-          Notify.success('图片上传失败', data.errorMessage, 1500);
+      formData.append("uploadImage", selectedFile);
+      formData.append("className", _self.className);
+      this.loading = true;
+      ImageService.uploadImage(formData).then(
+        (data) => {
+          _self.loading = false;
+          _self.addModal = false;
+
+          if (data.errorCode == 0) {
+            if (data.datas != null && data.datas.length > 0) {
+              Notify.success(
+                _self.$t("lang.Notify.prompt"),
+                _self.$t("lang.ImageWidget.describe2"),
+                1500
+              );
+              _self.emitFieldValue(data.datas[0]);
+            }
+          } else {
+            Notify.success("图片上传失败", data.errorMessage, 1500);
+          }
+        },
+        (errorData) => {
+          _self.loading = false;
         }
-        
-
-      }, errorData => {
-        _self.loading=false;
-      });
+      );
     },
 
     /**
-         * 触发FieldValue发生改变
-         * @param {String} imageName 添加的图片名称
-         */
+     * 触发FieldValue发生改变
+     * @param {String} imageName 添加的图片名称
+     */
     emitFieldValue: function (imageName) {
       var newFieldValue = {
         displayValue: [],
-        fieldType: 'String',
+        fieldType: "String",
       };
       if (imageName != null) {
         newFieldValue.displayValue[0] = imageName;
       }
       this.index = 1;
-      this.$emit('valueChanged', newFieldValue);
+      this.$emit("valueChanged", newFieldValue);
     },
 
     /**
-         * 显示上传图片的模态框
-         */
+     * 显示上传图片的模态框
+     */
     showUploadImageModal: function () {
       this.addModal = true;
     },
@@ -260,84 +280,89 @@ export default {
 
 <style scoped>
 .input-group {
-    width: 100%;
+  width: 100%;
 }
 
 img {
-    max-width: 100%;
+  max-width: 100%;
+}
+.image {
+  width: 100%;
+}
+.img-thumbnail {
+  cursor: pointer;
 }
-
 /* Override Cropper's styles */
 .cropper-view-box,
 .cropper-face {
-    border-radius: 50%;
+  border-radius: 50%;
 }
 
 .finish_room {
-    width: 400px;
-    height: auto;
+  width: 400px;
+  height: auto;
 }
 
 .finish_room2 {
-    width: 100%;
-    height: auto;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    display: flex;
-    align-items: center;
+  width: 100%;
+  height: auto;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  display: flex;
+  align-items: center;
 }
 
 .finish_room2 .room_img {
-    width: 80px;
-    height: 80px;
-    margin-right: 10px;
-    position: relative;
-    overflow: hidden;
+  width: 80px;
+  height: 80px;
+  margin-right: 10px;
+  position: relative;
+  overflow: hidden;
 }
 
 .finish_room2 .room_img img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .finish_room2 > .room_img span {
-    position: absolute;
-    width: auto;
-    height: auto;
-    right: 5px;
-    bottom: 3px;
+  position: absolute;
+  width: auto;
+  height: auto;
+  right: 5px;
+  bottom: 3px;
 }
 
 .room_add_img {
-    width: 148px;
-    height: 98px;
-    border: 1px solid #e1e1e1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
+  width: 148px;
+  height: 98px;
+  border: 1px solid #e1e1e1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
 }
 
 .room_add_img > span:nth-child(1) {
-    margin-top: 20px;
-    width: 40px;
-    height: 40px;
-    overflow: hidden;
+  margin-top: 20px;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
 }
 
 .room_add_img > span:nth-child(2) {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .room_add_img input {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-    opacity: 0;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  opacity: 0;
 }
 </style>