增加视图消息组和视图消息组件

src/app-register.ts

@@ -94,6 +94,8 @@ import DiskFileUpload from './components/disk-file-upload/disk-file-upload.vue'
 import AvueCustomForm  from './components/avue-custom-form/avue-custom-form.vue'
 import DiskImageUpload from './components/disk-image-upload/disk-image-upload.vue'
 import AppFormPart from './components/app-form-part/app-form-part.vue'
+import AppAlert from './components/app-alert/app-alert.vue'
+import AppAlertGroup from './components/app-alert-group/app-alert-group.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -203,5 +205,7 @@ export const AppComponents = {
         v.component('avue-custom-form', AvueCustomForm);
         v.component('disk-image-upload', DiskImageUpload);
         v.component('app-form-part', AppFormPart);
+        v.component('app-alert', AppAlert);
+        v.component('app-alert-group', AppAlertGroup);
     },
 };
\ No newline at end of file

src/components/app-alert-group/app-alert-group.vue

+<template>
+    <div class="app-alert-group">
+        <template  v-for="(item, index) in items">
+            <app-alert
+                :key="index"
+                :tag="item.tag"
+                :index="index"
+                :position="item.position"/>   
+        </template>
+    </div>
+
+</template>
+
+<script lang="ts">
+import {Vue, Component, Prop} from 'vue-property-decorator';
+import ViewMessageGroupService from '../../message/view-message-group-service';
+@Component({})
+export default class AppAlertGroup extends Vue {
+
+    /**
+     * 视图消息组服务
+     * 
+     * @type {any}
+     * @memberof AppAlertGroup
+     */
+    public viewMessageGroupService = ViewMessageGroupService.getInstance();
+
+    /**
+     * 视图消息组tag
+     * 
+     * @type {any}
+     * @memberof AppAlertGroup
+     */
+    @Prop() infoGroup: any;
+
+    /**
+     * 视图消息组显示位置
+     * 
+     * @type {any}
+     * @memberof AppAlertGroup
+     */
+    @Prop() position: any;
+
+    /**
+     * 当前位置视图消息集合
+     * 
+     * @type {any}
+     * @memberof AppAlertGroup
+     */
+    public items: any[] = [];
+
+    /**
+     * Vue生命周期
+     * 
+     * @memberof AppAlertGroup
+     */
+    public created() {
+        if(this.infoGroup) {
+            this.getItems();
+        }
+    }
+
+    /**
+     * 获取当前位置视图消息集合
+     * 
+     * @memberof AppAlertGroup
+     */
+    public getItems() {
+        this.viewMessageGroupService.getViewMessageDetailsByTag(this.infoGroup).then((response: any) => {
+            if(response) {
+                response.forEach((data: any) => {
+                    if(this.position && Object.is(this.position, data.position)) {
+                        this.items.push(data);
+                    }
+                    if(Object.is('TOP', this.position) && Object.is('POP', data.position)) {
+                        this.items.push(data);
+                    }
+                })  
+            } 
+        }).catch(error => {
+            console.log(error);
+        });
+    }
+}
+</script>
\ No newline at end of file

src/components/app-alert/app-alert.less

+.el-message {
+    .el-message__content {
+        .title {
+            padding-bottom: 10px;
+        }
+    }
+}
+
+.app-alert-group {
+    .el-alert {
+        margin: 5px 0px;
+    }
+}
\ No newline at end of file

src/components/app-alert/app-alert.vue

+<template>
+    <el-alert
+        v-if="hasContent"
+        v-show="showState"
+        :title="title"
+        :description="message"
+        :type="type"
+        :closable="closable"
+        @close="alertClose">
+        
+    </el-alert>
+</template>
+
+<script lang="ts">
+import {Vue, Component, Prop} from 'vue-property-decorator';
+import ViewMessageService from '../../message/view-message-service';
+
+@Component({})
+export default class AppAlert extends Vue {
+    
+    
+    /**
+     * 视图消息标识
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    @Prop() tag: any;
+
+    /**
+     * 显示位置
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    @Prop() position: any;
+
+    /**
+     * 视图消息显示次序
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    @Prop() index: any;
+    
+    /**
+     * 视图消息对象
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    public data: any = {};
+    
+    /**
+     * 视图消息标题
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    public title: string = '';
+
+    /**
+     * 视图消息内容
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    public message: string = '';
+
+    /**
+     * 视图消息类型
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    public type: string = '';
+
+    /**
+     * 视图消息关闭模式
+     * 
+     * @type {any}
+     * @memberof AppAlert
+     */
+    public closeMode: any = '';
+
+    /**
+     * 视图消息是否可关闭
+     * 
+     * @type {boolean}
+     * @memberof AppAlert
+     */
+    public closable: boolean = true;
+
+    /**
+     * 是否显示
+     * 
+     * @type {boolean}
+     * @memberof AppAlert
+     */
+    public showState: boolean = true;
+
+    /**
+     * 视图消息服务
+     * 
+     * @type {ViewMessageService}
+     * @memberof AppAlert
+     */
+    public viewMessageService = ViewMessageService.getInstance();
+
+    /**
+     * 是否存在内容
+     * 
+     * @type {boolean}
+     * @memberof AppAlert
+     */
+    public hasContent: boolean = true;
+
+    /**
+     * Vue生命周期
+     * 
+     * @memberof AppAlert
+     */
+    public created() {
+        this.getData().then((result:any) =>{
+            if(this.data) {
+                this.afterCreated();
+            }
+        })
+    }
+
+    /**
+     * 组件创建之前
+     * 
+     * @memberof AppAlert
+     */
+    public afterCreated() {
+        let flag: boolean = true;
+        //  不存在内容则不显示
+        if(!this.data.content && !this.data.title) {
+            this.hasContent = false;
+            return;
+        }
+        //  视图消息是否支持删除
+        if(!this.data.isEnableRemove) {
+            this.closable = false;
+        }
+        flag = this.handleCloseMode(flag);
+        this.handlePosition(flag);        
+    }
+
+    /**
+     * 获取视图消息对象
+     * 
+     * @memberof AppAlert
+     */
+    public async getData() {
+        let tempData: any;
+        let response: any = await this.viewMessageService.getViewMessageByTag(this.tag, null, null)
+        if(response) {
+            tempData = response[0];
+            if(tempData.type) {
+                if(Object.is('WARN', tempData.type)) {
+                    tempData.type = "warning";
+                }
+                if(Object.is("ERROR", tempData.type)) {
+                    tempData.type = "error";
+                }
+            } else {
+                tempData.type="info";
+            }
+            this.data= tempData;
+        }   
+    }
+
+    /**
+     * 处理关闭模式
+     * 
+     * @param flag 默认删除标记
+     * @memberof AppAlert
+     */
+    public handleCloseMode(flag: boolean) {
+        if(this.data.closeMode) {
+            if(Object.is('default', this.data.closeMode)) {
+                const id = this.$store.getters.getViewMessage(this.data.codename);
+                if(id) {
+                    this.showState = false;
+                    flag = false;
+                }
+            }
+            if(Object.is('notclose', this.data.closeMode)) {
+                this.closable = false;
+            }
+        }
+        return flag;
+    }
+
+    /**
+     * 处理显示位置
+     * 
+     * @memberof AppAlert
+     */
+    public handlePosition(flag: boolean) {
+        if(this.data.position) {
+            if(flag && Object.is('POP', this.data.position)) {
+                this.showState = false;
+                setTimeout(() => {
+                    this.$message({
+                        dangerouslyUseHTMLString: true,
+                        message: "<p class='title'><strong>"+ this.data.title + "</strong></p><p>" + this.data.content + "</p>",
+                        type: this.data.type,
+                        showClose: this.closable,
+                        onClose: this.alertClose,
+                    })
+                }, Number(this.index)*1000) 
+            } else {
+                this.title = this.data.title;
+                this.message = this.data.content;
+                this.type = this.data.type;
+            }
+        } 
+    }
+
+    /**
+     * 视图消息关闭
+     * 
+     * @memberof AppAlert
+     */
+    public alertClose() {
+        if(this.data.closeMode && Object.is("default", this.data.closeMode)) {
+            const args = {tag: this.data.codename, id: this.data.id};
+            this.$store.commit('addViewMessage', args);
+        }
+    }
+
+}
+</script>
+
+<style lang="less">
+@import './app-alert.less';
+</style>
\ No newline at end of file