update:更新

src/app-register.ts

@@ -137,6 +137,7 @@ import AppIndexOrgSelect from './components/layout-element/index/app-index-org-s
 import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
 import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue';
 import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
+import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -288,5 +289,6 @@ export const AppComponents = {
         v.component('app-index-user-info', AppIndexUserInfo);
         v.component('app-ctrl-pos', AppCtrlPos);
         v.component('app-preset-button',AppPresetButton);
+        v.component('app-field-image-dynamic', AppFieldImageDynamic);
     },
 };
\ No newline at end of file

src/components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue

+<template>
+    <div :class="{'app-field-image-dynamic':true,[cssClass]:cssClass?true:false}">
+        <img :style="cssStyle" :src="imgUrl" />
+    </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
+import { ImgurlBase64 } from '@/utils';
+import { Environment } from "@/environments/environment";
+@Component({})
+export default class AppFieldImageDynamic extends Vue {
+
+    /**
+     * 输入值
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+    @Prop() public value: any;
+
+    /**
+     * 样式
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+    @Prop() public cssStyle?: string;
+
+    /**
+     * 样式表类名
+     *
+     * @type {string}
+     * @memberof AppRawItemImage
+     */
+     @Prop({default:''}) public cssClass: string;
+
+    /**
+     * 动态图片路径
+     *
+     * @memberof AppPresetRawitem
+     */
+    protected dynaImgUrl: string = '';
+
+    /**
+    * 下载文件路径
+    *
+    * @memberof AppPresetRawitem
+    */
+    public downloadUrl = Environment.ExportFile;
+
+    /**
+     * 图片路径
+     *
+     * @memberof AppPresetRawitem
+     */
+    get imgUrl(): string {
+        return this.dynaImgUrl;
+    }
+
+    created() {
+        this.handleDynaImg();
+    }
+
+    /**
+    * 处理动态图片
+    *
+    * @memberof AppPresetRawitem
+    */
+    protected handleDynaImg() {
+        if (this.value && typeof this.value == "string") {
+            // 默认识别文件对象形式，识别失败则为全路径模式
+            try {
+                const _files = JSON.parse(this.value);
+                const file = _files instanceof Array ? _files[0] : null;
+                const url =
+                    file && file.id ? `${this.downloadUrl}/${file.id}` : "";
+                ImgurlBase64.getInstance()
+                    .getImgURLOfBase64(url)
+                    .then((res: any) => {
+                        this.dynaImgUrl = res;
+                    });
+            } catch (error) {
+                this.dynaImgUrl = this.value;
+            }
+        }
+    }
+}
+</script>
+<style lang = "less">
+@import './app-field-image-dynamic.less';
+</style>
\ No newline at end of file

src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue

@@ -18,19 +18,50 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 @Component({})
 export default class AppCarousel extends Vue {
+    /**
+     * 父项所有数据
+     *
+     * @type {*}
+     * @memberof AppPresetCarousel
+     */
+     @Prop() public contextData?: any;
+
     /**
      * @description 轮播图数据
      * @param {*}
      * @memberof AppCarousel
      */
-    @Prop() public data?: any;
+    @Prop() public value?: any;
 
     /**
      * @description 轮播图样式
      * @param {*}
      * @memberof AppCarousel
      */
-    @Prop() public rawstyle?: any;
+    @Prop() public cssStyle?: any;
+    
+        /**
+     * @description 样式表
+     * @param {*}
+     * @memberof AppCarousel
+     */
+     @Prop() public cssClass?: any;
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppCarousel
+     */
+     @Prop() public name!: string;
+
+    /**
+     * 类型
+     *
+     * @type {string}
+     * @memberof AppCarousel
+     */
+    @Prop() public type?: string;
 
     /**
      * @description 轮播图图片所有项数据
@@ -64,7 +95,7 @@ export default class AppCarousel extends Vue {
      * @memberof AppCarousel
      */
     created() {
-        this.handleSwipData(this.data);
+        this.handleSwipData(this.value);
     }
 
      /**
@@ -81,7 +112,7 @@ export default class AppCarousel extends Vue {
                 this.swipeData = data.slice(0, -2);
                 this.swipeConfig = this.setSwipeConfig(data.slice(-2));
             } else {
-                this.swipeData = this.data;
+                this.swipeData = data;
                 this.swipeConfig = this.setSwipeConfig(data);
             }
         }

src/utils/index.ts

@@ -12,3 +12,4 @@ export { UIActionTool } from './uiaction-tool/uiaction-tool';
 export { LoadAppData } from './load-app-data/load-app-data';
 export { Interceptors } from './interceptor/interceptor';
 export { StudioActionUtil } from './studio-action/StudioActionUtil';
+export { ImgurlBase64 } from './util/imgurl-base64';
\ No newline at end of file

src/utils/util/imgurl-base64.ts

+
+import axios from 'axios';
+
+export class ImgurlBase64{
+    /**
+     * 单例变量声明
+     *
+     * @memberof ImgurlBase64
+     */
+    private static imgurlBase64: ImgurlBase64;
+
+    /**
+     * 图片缓存(加载中)
+     *
+     * @type {Map<string,any>}
+     * @memberof ImgurlBase64
+     */
+     public static imgCache: Map<string, any> = new Map();
+
+     /**
+      * 图片缓存(已完成)
+      *
+      * @type {Map<string,any>}
+      * @memberof ImgurlBase64
+      */
+     public static imgCached: Map<string, any> = new Map();
+
+    /**
+     * 获取 ImgurlBase64 单例对象
+     *
+     * @memberof ImgurlBase64
+     */
+     public static getInstance() {
+        if (!this.imgurlBase64) {
+            this.imgurlBase64 = new ImgurlBase64();
+        }
+        return this.imgurlBase64;
+    }
+
+    /**
+     * 手动获取图片
+     * 
+     * 
+     * @param url 图片url路径
+     * @returns 
+     */
+    public async getImgURLOfBase64(url: string) {
+        return new Promise((resolve, reject) => {
+            let img = '/';
+            // 富文本CV上传图片与鼠标移出抛值冲突问题,上传成功回调还没执行时就抛值
+            var reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
+            if (reg.test(url)) {
+                return resolve(url);
+            }
+            // 缓存中有从缓存中拿
+            if (ImgurlBase64.imgCached.get(url)) {
+                let img = ImgurlBase64.imgCached.get(url);
+                resolve(img);
+            }
+            const callback: Function = (url: string, promise: Promise<any>) => {
+                promise.then((response: any) => {
+                    if (response && response.status === 200 && response.data) {
+                        // 获取文件名
+                        const disposition = response.headers['content-disposition'];
+                        const filename = disposition.split('filename=')[1];
+                        let type = 'image/png';
+                        if (filename && filename.indexOf('.') > 0) {
+                            const start = filename.lastIndexOf('.');
+                            const expandedName = filename.substring(start + 1);
+                            if (expandedName.match(/(bmp|jpg|jpeg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp)/gi) != null) {
+                                type = 'image/' + expandedName;
+                            } else {
+                                resolve(img);
+                            }
+                        }
+                        let blob = new Blob([response.data],{type: type});
+                        this.blobToBase64(blob).then((res) => {
+                            // 转化后的base64
+                            img = `${res}`;
+                            // 缓存图片
+                            ImgurlBase64.imgCached.set(url, img);
+                            resolve(img);
+                        })
+                    } else {
+                        resolve(img);
+                    }
+                }).catch((result: any) => {
+                    return resolve(img);
+                })
+            }
+            // 加载中
+            if (ImgurlBase64.imgCache.get(url)) {
+                callback(url, ImgurlBase64.imgCache.get(url));
+            } else {
+                let _url = url;
+                if (!Object.is('/', _url.substring(0,1))) {
+                    _url = '/'+_url;
+                }
+                let result:Promise<any> = axios({method: 'get', url: _url, responseType: 'blob'});
+                ImgurlBase64.imgCache.set(url, result);
+                callback(url, result);
+            }
+        });
+    }
+
+    /**
+     * 将blob转为base64
+     * 
+     * 
+     * @param blob blob对象
+     * @returns 
+     */
+    public blobToBase64(blob: any) {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = (e: any) => {
+                resolve(e.target.result);
+            };
+            // readAsDataURL
+            fileReader.readAsDataURL(blob);
+            fileReader.onerror = () => {
+                reject(new Error('blobToBase64 error'));
+            };
+        });
+    }
+}
\ No newline at end of file