瀏覽代碼

修复CURD窗口图片加载缓慢的问题。

YangZhiJie 2 年之前
父節點
當前提交
ac16ee8148

+ 1 - 0
.gitignore

@@ -1 +1,2 @@
 node_modules
+/dist

+ 1 - 1
src/routes/main_routes.js

@@ -54,7 +54,7 @@ const ContainerLayout = () => import(/* webpackChunkName: "component-test-1" */
 const DynamicImport = () => import(/* webpackChunkName: "component-test-2" */ '../../test/DynamicImport.vue');
 const Test = () => import(/* webpackChunkName: "component-test-4" */ '../../test/Test.vue');
 const Training = () => import(/* webpackChunkName: "component-test-5" */ '../../test/Training.vue');
-const PrintTemp = () => import(/* webpackChunkName: "component-test-5" */ '../customer/printTemp/index.vue');
+const PrintTemp = () => import(/* webpackChunkName: "component-test-6" */ '../customer/printTemp/index.vue');
 // const PrintTempStep1 = () => import(/* webpackChunkName: "component-test-5" */ '../customer/printTemp/step1.vue');
 // const PrintTempStep2 = () => import(/* webpackChunkName: "component-test-5" */ '../customer/printTemp/step2.vue');
 

+ 19 - 5
src/window/tabFormWidget/ImageListViewWidget.vue

@@ -6,7 +6,7 @@
       class="room_img"
     >
       <AuthImage
-        :auth-src="getImageSrc(item)"
+        :auth-src="getThumbnailImageSrc(item)"
         class="m-small-img"
         @click="previewImg(getImageSrc(item))"
       />
@@ -178,10 +178,10 @@ export default {
       this.$emit('valueChanged', _self.fieldValue);
     },
     /**
-         * 获取图片地址
-         * @param  {String} item 图片名称
-         * @return {String}      图片URL地址
-         */
+     * 获取图片地址
+     * @param  {String} item 图片名称
+     * @return {String}      图片URL地址
+     */
     getImageSrc: function (item) {
       var _self = this;
       if (item != undefined && item != null) {
@@ -190,6 +190,20 @@ export default {
         return '';
       }
     },
+
+    /**
+     * 获取图片缩略图地址
+     * @param  {String} item 图片名称
+     * @return {String}      图片URL地址
+     */
+    getThumbnailImageSrc: function(item){
+      var _self = this;
+      if (item != undefined && item != null) {
+        return Common.getThumbnailImageSrc(_self.className, item);
+      } else {
+        return '';
+      }
+    }
   },
 };
 </script>

+ 21 - 5
src/window/tabFormWidget/ImageListWidget.vue

@@ -10,7 +10,7 @@
           >
             <AuthImage
               class="m-small-img"
-              :auth-src="getImageSrc(item)"
+              :auth-src="getThumbnailImageSrc(item)"
               @click="previewImg(getImageSrc(item))"
             />
             <span
@@ -261,11 +261,12 @@ export default {
       this.$emit('valueChanged', _self.fieldValue);
       _self.show = false;
     },
+
     /**
-         * 获取图片地址
-         * @param  {String} item 图片名称
-         * @return {String}      图片URL地址
-         */
+     * 获取图片地址
+     * @param  {String} item 图片名称
+     * @return {String}      图片URL地址
+     */
     getImageSrc: function (item) {
       var _self = this;
       if (item != undefined && item != null) {
@@ -274,6 +275,21 @@ export default {
         return '';
       }
     },
+
+    /**
+     * 获取图片缩略图地址
+     * @param  {String} item 图片名称
+     * @return {String}      图片缩略图URL地址
+     */
+    getThumbnailImageSrc: function(item){
+      var _self = this;
+      if (item != undefined && item != null) {
+        return Common.getThumbnailImageSrc(_self.className, item);
+      } else {
+        return '';
+      }
+    },
+    
     toggleShow() {
       this.show = !this.show;
     },

+ 16 - 2
src/window/tabFormWidget/ImageViewWidget.vue

@@ -7,7 +7,7 @@
       <div class="room_img">
         <AuthImage
           class="m-small-img"
-          :auth-src="imageSrc"
+          :auth-src="imageThumbnailSrc"
           @click="previewImg(imageSrc)"
         />
       </div>
@@ -75,7 +75,9 @@ export default {
   },
 
   computed: {
-    // 图片的地址
+    /**
+     * 图片的地址
+     */
     imageSrc: function () {
       var _self = this;
       if (this.fieldValue != undefined && this.fieldValue.displayValue != undefined) {
@@ -85,6 +87,18 @@ export default {
         return '';
       }
     },
+    /**
+     * 图片缩略图的地址
+     */
+    imageThumbnailSrc: function () {
+      var _self = this;
+      if (this.fieldValue != undefined && this.fieldValue.displayValue != undefined) {
+        var imageName = this.fieldValue.displayValue[0];
+        return Common.getThumbnailImageSrc(_self.className, imageName);
+      } else {
+        return '';
+      }
+    },
 
     // 是否有图片
     hasImage: function () {

+ 3 - 9
src/window/tabFormWidget/ImageWidget.vue

@@ -4,7 +4,7 @@
       <span class="col-md-12">
         <div v-if="hasImage" class="finish_room2">
           <div class="room_img">
-            <AuthImage :auth-src="getImageSrc(imageSrc)" />
+            <AuthImage :auth-src="imageThumbnailSrc" />
           </div>
           <button
             v-if="!readonly"
@@ -135,14 +135,14 @@ export default {
      * 计算图片地址
      * @return {String} 图片URL地址
      */
-    imageSrc: function () {
+    imageThumbnailSrc: function () {
       var _self = this;
       if (
         this.fieldValue != undefined &&
         this.fieldValue.displayValue != undefined
       ) {
         var imageName = this.fieldValue.displayValue[0];
-        return Common.getImageSrc(_self.className, imageName);
+        return Common.getThumbnailImageSrc(_self.className, imageName);
       } else {
         return '';
       }
@@ -173,12 +173,6 @@ export default {
   },
 
   methods: {
-    /**
-     * 获取图片
-     */
-    getImageSrc: function (src) {
-      return src;
-    },
     /**
      * 上传图片
      */

+ 0 - 11
src/window/tabGridView/TabGridEdit.vue

@@ -1274,17 +1274,6 @@ export default {
       modelData.select= !currentStatus;
     },
 
-    /**
-     * 获取图片地址URL
-     * @return {void}
-     */
-    getImageSrc: function (imageName) {
-      var _self = this;
-      return Common.getThumbnailImageSrc(
-        _self.tab.tabDataSource.className,
-        imageName,
-      );
-    },
 
     /**
      * 全选/取消全选

+ 15 - 1
src/workflow/ImageListWidget.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-for="item in images" :key="item" class="room_img">
-      <AuthImage :auth-src="getImageSrc(item)" />
+      <AuthImage :auth-src="getThumbnailImageSrc(item)" />
 
       <span class="glyphicon glyphicon-trash" @click="removeImage(item)" />
     </div>
@@ -145,6 +145,20 @@ export default {
       }
     },
 
+    /**
+     * 获取图片缩略图地址
+     * @param  {String} item 图片名称
+     * @return {String}      图片URL地址
+     */
+    getThumbnailImageSrc: function(item){
+      var _self = this;
+      if (item != undefined && item != null) {
+        return Common.getThumbnailImageSrc(_self.className, item);
+      } else {
+        return '';
+      }
+    },
+
     /**
      * 获取图片路径供外部调用
      * @return {Array} 图片地址

+ 1 - 1
src/workflow/WorkflowSelectUser.vue

@@ -392,7 +392,7 @@ export default {
       if (imageName == undefined || imageName == '') {
         return '/static/assets/client-base-v4/image/no-image.png';
       }
-      return Common.getImageSrc(_self.className, imageName);
+      return Common.getThumbnailImageSrc(_self.className, imageName);
     },
 
     /**