视图消息组件完善

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

 <template>
+    <div class="app-alert">
+    <template v-if="items && items.length > 0">
+        <template v-for="(item, index) in items">
+            <template v-if="item.hasContent && !Object.is('POP', item.position)">
             <el-alert
-        v-if="hasContent"
-        v-show="showState"
-        :title="title"
-        :description="message"
-        :type="type"
-        :closable="closable"
-        @close="alertClose">
-        
+                :key="index"
+                v-show="item.showState"
+                :title="item.title"
+                :type="item.type"
+                :closable="item.closable"
+                @close="alertClose(item)">
+                <template slot>
+                    <span v-html="item.content"></span>
+                </template>
             </el-alert>
+            </template>
+        </template>
+    </template>
+    </div>
+
 </template>
 
 <script lang="ts">
@@ -40,55 +50,7 @@ export default class AppAlert extends Vue {
      * @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;
+    public items: any[]= [];
     
     /**
      * 视图消息服务
@@ -98,22 +60,6 @@ export default class AppAlert extends Vue {
      */
     public viewMessageService = ViewMessageService.getInstance();
 
-    /**
-     * 是否存在内容
-     * 
-     * @type {boolean}
-     * @memberof AppAlert
-     */
-    public hasContent: boolean = false;
-
-    /**
-     * 显示时长（秒）
-     * 
-     * @type {boolean}
-     * @memberof AppAlert
-     */
-    public duration: number = 3;
-
     /**
      * Vue生命周期
      * 
@@ -121,100 +67,92 @@ export default class AppAlert extends Vue {
      */
     public created() {
         this.getData().then((result:any) =>{
-            if(this.data) {
-                this.afterCreated();
+            if(!this.items) {
+                return;
             }
         })
     }
 
     /**
-     * 组件创建之前
+     * 获取视图消息对象
      * 
      * @memberof AppAlert
      */
-    public afterCreated() {
-        let flag: boolean = true;
-        //  不存在内容则不显示
-        if(!this.data.content && !this.data.title) {
-            return;
+    public async getData() {
+        let response: any = await this.viewMessageService.getViewMessageByTag(this.tag, null, null)
+        if(response && response.length > 0) {
+            response.forEach((item: any) => {
+                let tempData: any = JSON.parse(JSON.stringify(item));
+                if(!tempData.type) {
+                    tempData.type = "info";
                 }
-        this.hasContent = true;
-        //  视图消息是否支持删除
-        if(!this.data.isEnableRemove) {
-            this.closable = false;
+                //  判断是否存在内容
+                this.handleItemHasContent(tempData);
+                tempData.closable = tempData.isEnableRemove;
+                let flag = this.handleItemCloseMode(tempData);
+                this.handleItemPosition(tempData, flag);
+                this.items.push(tempData);
+            });
         } 
-        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;
+    public handleItemHasContent(data: any) {
+        data.hasContent = true;
+        if(!data.title && !data.content) {
+            data.hasContent = false;
         }
     }
 
     /**
-     * 处理关闭模式
+     * 处理数据关闭模式
      * 
-     * @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);
+    public handleItemCloseMode(data: any) {
+        let flag = true;
+        data.showState = true; 
+        if(data.closeMode || Object.is('0', data.closeMode)) {
+            if(data.closeMode == 1) {
+                const id = this.$store.getters.getViewMessage(data.codename);
                 if(id) {
-                    this.showState = false;
+                    data.showState = false;
                     flag = false;
                 }
             }
-            if(Object.is('notclose', this.data.closeMode)) {
-                this.closable = false;
+            if(Object.is('0', data.closeMode)) {
+                data.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;
+    public handleItemPosition(data: any, flag: boolean) {
+        if(data.position) {
+            if(flag && Object.is('POP', data.position)) {
+                const h = this.$createElement;
+                data.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,
+                        customClass: data.codename+","+data.closeMode,
+                        message: h('div',[
+                            h('p',data.title),
+                            h('p', data.content)
+                        ]), 
+                        type: data.type,
+                        showClose: data.closable,
                         onClose: this.alertClose,
                     })
                 }, 0)
-            } else {
-                this.title = this.data.title;
-                this.message = this.data.content;
-                this.type = this.data.type;
             }
         }
     }
@@ -224,9 +162,18 @@ export default class AppAlert extends Vue {
      * 
      * @memberof AppAlert
      */
-    public alertClose() {
-        if(this.data.closeMode && Object.is("default", this.data.closeMode)) {
-            const args = {tag: this.data.codename, id: this.data.id};
+    public alertClose(data: any) {
+        if(data.customClass) {
+            let tempArr: any[] = data.customClass.toString().split(',');
+            if(tempArr && tempArr.length > 0) {
+                if(Object.is("1", tempArr[1])) {
+                    const args = { tag: tempArr[0], id: data.customClass };
+                    this.$store.commit('addViewMessage', args);
+                }
+            } 
+        }
+        if(data.closeMode && data.closeMode == 1) {
+            const args = {tag: data.codename, id: data.id};
             this.$store.commit('addViewMessage', args);
         }
     }