支持多dialog打开（控制z-index）

src/tis_app_template_kt/src/components/Dialog/DialogPc.vue

@@ -1,159 +1,38 @@
 <template>
-    <VueDragResize v-show="centerDialogVisible" :isDraggable="isDraggable" parentLimitation :isResizable="isResizable"
-                   ref="dragEl"
-                   :parentW="parentW"
-                   :parentH="parentH" :minh="minh" :minw="minw"
-                   :z="400"
-                   :x="left"
-                   :y="top"
-                   :w="width"
-                   :h="height"
-                   v-on:resizing="resize"
-                   v-on:dragging="resize" class="drag-container">
-        <div class="header">
-            <span>{{DialogWidget && DialogWidget.name}}</span>
-            <div class="action">
-                <div class="maxsize" @click='onMaxSize'>最大化</div>
-                <div class="minisize" @click="minisize">最小化</div>
-                <div class="close" @click="onClose">关闭</div>
-            </div>
-        </div>
-        <component
-                   class="content"
-                   @onShow="onShow"
-                   @onClose="onClose"
-                   :is="DialogWidget && actives"></component>
-    </VueDragResize>
+  <div>
+    <Pc v-for="(dialog, index) in list" :key="dialog.component" :dialog="dialog" />
+  </div>
 </template>
 
 <script>
-    //import VueDragResize from "../vueDragResize/vue-drag-resize.vue";
-import VueDragResize from 'vue-drag-resize'
-    import {dialogMixins} from './dialogMixins'
-import bus from '../../tis/bus'
-
-    export default {
-        name: "DialogPc",
-        mixins: [dialogMixins],
-        components: {
-            VueDragResize,
-        },
-        computed: {
-            parentW() {
-                return window.outerWidth;
-            },
-            parentH() {
-                return window.outerHeight;
-            },
-            isDraggable() {
-                return true;
-            },
-            isResizable() {
-                return true;
-            },
-            isTitle() {
-                return true;
-            },
-            minh() {
-                return 40;
-            },
-            minw() {
-                return 280;
-            },
-        },
-        data() {
-
-            return {
-                isMax:false,
-                isDestory:false,
-                showSizeChoice: false,
-                curWidth:600,
-                curHeight:500,
-                width: Math.round(window.innerWidth * .6),
-                height: Math.round(window.innerHeight * .6),
-                top: Math.round(window.innerHeight * .2),
-                left: Math.round(window.innerWidth * .2),
-            };
-        },
-        methods: {
-            resize(newRect) {
-                this.width = newRect.width;
-                this.height = newRect.height;
-                this.top = newRect.top;
-                this.left = newRect.left;
-
-                this.curWidth = newRect.width;
-                this.curHeight = newRect.height;
-            },
-            onMaxSize(){
-              this.$refs.dragEl.$el.style.left = 0
-              this.$refs.dragEl.$el.style.top = 0
-              const $contentEl = this.$refs.dragEl.$el.firstChild
-              $contentEl.style.width = window.innerWidth + 'px'
-              $contentEl.style.height = window.innerHeight + 'px'
-              return;
-                this.isMax = !this.isMax;
-              this.left = 0
-              this.top = 0
-              this.$nextTick(() => {
-                this.width = window.innerWidth
-                this.height = window.innerHeight
-              })
-            },
-            minisize() {
-                this.centerDialogVisible = false;
-              this.$tis.minimizeComponent(this.actives)
-            },
-            onClose() {
-                this.centerDialogVisible = false;
-                this.$tis.closeComponent([this.actives]);
-            },
-            toggle() {
-                this.showSizeChoice = !this.showSizeChoice;
-            },
-            onChangeSize() {
-                this.resize({
-                    width: this.width,
-                    height: this.height,
-                    top: this.top,
-                    left: this.left,
-                });
-            },
-        }
+import Pc from './Pc'
+export default {
+  name: 'DialogPc',
+  components: { Pc },
+  data() {
+    return {
     }
-</script>
-
-<style lang="scss" scoped>
-    .header {
-
-        height: 40px;
-        background: rgba(0,0,0,.5);
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        color: white;
-        padding: 0 10px;
-        .action{
-            display: flex;
-
-            &>div{
-                margin: 0 5px;
-                cursor: pointer;
-            }
-        }
-    }
-    .content{
-        flex: 1;
-        overflow-y: auto;
-        background: #fff;
-        ::v-deep {
-          .footer:after {
-            content: '';
-            clear: both;
+  },
+  asyncComputed: {
+    list: {
+      async get() {
+        const list = this.$tis.getActivesByType('PopupWidget')
+        for (let component of list) {
+          if (typeof component.component === 'string') {
+            await this.$tis.loadComponent(component.component)
           }
         }
+
+        let newList = list.map(v => ({ component: v.component.name || v.component, status: v.status, name: v.name, zIndex: v.zIndex }))
+        console.log(newList, '---')
+        return newList
+      },
+      default() {
+        return []
+      }
     }
-    .drag-container {
-      border: 1px solid #ddd;
-    }
-</style>
+  },
+  methods: {
+  }
+}
+</script>

src/tis_app_template_kt/src/components/Dialog/Pc.vue

@@ -0,0 +1,171 @@
+<template>
+    <VueDragResize v-show="dialog.status !== 'minimize'" :isDraggable="isDraggable" parentLimitation :isResizable="isResizable"
+                   ref="dragEl"
+                   :parentW="parentW"
+                   :parentH="parentH" :minh="minh" :minw="minw"
+                   :z="dialog.zIndex"
+                   :x="left"
+                   :y="top"
+                   :w="width"
+                   :h="height"
+                   @click="activeComponent"
+                   v-on:resizing="resize"
+                   v-on:dragging="resize" class="drag-container">
+        <div class="header">
+            <span>{{dialog && dialog.name}}</span>
+            <div class="action">
+                <div class="maxsize" @click='onMaxSize'>最大化</div>
+                <div class="minisize" @click="minisize">最小化</div>
+                <div class="close" @click="onClose">关闭</div>
+            </div>
+        </div>
+        <component
+                   class="content"
+                   @onShow="onShow"
+                   @onClose="onClose"
+                   :is="dialog.component"></component>
+    </VueDragResize>
+</template>
+
+<script>
+    //import VueDragResize from "../vueDragResize/vue-drag-resize.vue";
+import VueDragResize from 'vue-drag-resize'
+    //import {dialogMixins} from './dialogMixins'
+
+    export default {
+      props: {
+        dialog: {
+          type: Object,
+          default: function () {
+            return {}
+          }
+        }
+      },
+        //mixins: [dialogMixins],
+        components: {
+            VueDragResize,
+        },
+        computed: {
+            parentW() {
+                return window.outerWidth;
+            },
+            parentH() {
+                return window.outerHeight;
+            },
+            isDraggable() {
+                return true;
+            },
+            isResizable() {
+                return true;
+            },
+            isTitle() {
+                return true;
+            },
+            minh() {
+                return 40;
+            },
+            minw() {
+                return 280;
+            },
+        },
+        data() {
+
+            return {
+                isMax:false,
+                isDestory:false,
+                showSizeChoice: false,
+                curWidth:600,
+                curHeight:500,
+                width: Math.round(window.innerWidth * .6),
+                height: Math.round(window.innerHeight * .6),
+                top: Math.round(window.innerHeight * .2),
+                left: Math.round(window.innerWidth * .2),
+            };
+        },
+        methods: {
+            resize(newRect) {
+                this.width = newRect.width;
+                this.height = newRect.height;
+                this.top = newRect.top;
+                this.left = newRect.left;
+
+                this.curWidth = newRect.width;
+                this.curHeight = newRect.height;
+            },
+            onMaxSize(){
+              this.$refs.dragEl.$el.style.left = 0
+              this.$refs.dragEl.$el.style.top = 0
+              const $contentEl = this.$refs.dragEl.$el.firstChild
+              $contentEl.style.width = window.innerWidth + 'px'
+              $contentEl.style.height = window.innerHeight + 'px'
+              return;
+                this.isMax = !this.isMax;
+              this.left = 0
+              this.top = 0
+              this.$nextTick(() => {
+                this.width = window.innerWidth
+                this.height = window.innerHeight
+              })
+            },
+            minisize() {
+              console.log(this.dialog)
+              this.$tis.minimizeComponent(this.dialog.component)
+            },
+            onClose() {
+                this.centerDialogVisible = false;
+                this.$tis.closeComponent([this.dialog.component]);
+            },
+            toggle() {
+                this.showSizeChoice = !this.showSizeChoice;
+            },
+            onChangeSize() {
+                this.resize({
+                    width: this.width,
+                    height: this.height,
+                    top: this.top,
+                    left: this.left,
+                });
+            },
+          onShow() {
+          },
+          activeComponent() {
+            this.$tis.activeComponent(this.dialog.component)
+          }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .header {
+
+        height: 40px;
+        background: rgba(0,0,0,.5);
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        color: white;
+        padding: 0 10px;
+        .action{
+            display: flex;
+
+            &>div{
+                margin: 0 5px;
+                cursor: pointer;
+            }
+        }
+    }
+    .content{
+        flex: 1;
+        overflow-y: auto;
+        background: #fff;
+        ::v-deep {
+          .footer:after {
+            content: '';
+            clear: both;
+          }
+        }
+    }
+    .drag-container {
+      border: 1px solid #ddd;
+    }
+</style>

src/tis_app_template_kt/src/tis/bus.js

@@ -1,6 +1,8 @@
 import Vue from "vue";
 import {registerApps} from './scriptsLoader/index'
 
+let dialogZIndex = 400
+
 // temp
 let curBaseUrl = ''
 const dev = process.env.NODE_ENV === 'development';
@@ -119,7 +121,12 @@ const bus = new Vue({
         }
 
         if (!this.actives.some(l => l.component === c.component)) {
-          //弹窗暂定为同一时间只能打开一个
+          //弹窗暂定为同一时间只能打开一个 "PopupWidget" 非dialog
+          // 计算z-index
+          if (!c.zIndex) {
+            c.zIndex = this.getNextDialogZIndex()
+          }
+
           if (c.type === 'dialog') {
             this.actives = [c];
           } else {
@@ -137,17 +144,44 @@ const bus = new Vue({
       console.log('actives变化状态', this.actives);
       this.menuStatusUpdate();
     },
+
+    getNextDialogZIndex() {
+      let zIndex = 0
+      for (let item of this.actives) {
+        if (item.zIndex && item.zIndex > zIndex) {
+          zIndex = item.zIndex
+        }
+      }
+      return zIndex > 0 ? zIndex + 1 : dialogZIndex
+    },
+
     // 最小化激活的弹窗
     minimizeComponent(component) {
       this.actives.forEach(c => {
         const comp = c.component.name || c.component
+        console.log(comp, component, c)
         if (comp === component) {
           c.status = 'minimize'
+          c.zIndex = 0
         }
       })
+      this.actives = [...this.actives]
+      console.log('after minimize', this.actives)
       this.menuStatusUpdate()
     },
 
+    // 激活窗口
+    activeComponent(component) {
+      const curComponent = this.actives.find(v => (c.component.name || c.component) === component)
+      const maxZIndex = Math.max.apply(Math, this.actives.map(function(o) { return o.zIndex; }))
+      const maxComponent = this.actives.find(v => v.zIndex === maxZIndex)
+      if (curComponent === maxComponent) return;
+
+      maxComponent.zIndex = curComponent.zIndex
+      curComponent.zIndex = maxZIndex
+      this.actives = [...this.actives]
+    },
+
     // 关闭组件
     closeComponent(components) {
       //修改layout中的状态