Change dialog to multi-window mode (#1695)

Fixed Dropdown's z-index being below the dialog

src/stores/dialogStore.ts

@@ -2,52 +2,126 @@
 // Currently we need to bridge between legacy app code and Vue app with a Pinia store.
 
 import { defineStore } from 'pinia'
-import { ref, shallowRef, type Component, markRaw } from 'vue'
+import { ref, type Component, markRaw } from 'vue'
 
 interface DialogComponentProps {
   maximizable?: boolean
   onClose?: () => void
 }
 
-export const useDialogStore = defineStore('dialog', () => {
-  const isVisible = ref(false)
-  const title = ref('')
-  const headerComponent = shallowRef<Component | null>(null)
-  const component = shallowRef<Component | null>(null)
-  const props = ref<Record<string, any>>({})
-  const dialogComponentProps = ref<DialogComponentProps>({})
+interface DialogInstance {
+  key: string
+  visible: boolean
+  title?: string
+  headerComponent?: Component
+  component: Component
+  contentProps: Record<string, any>
+  dialogComponentProps: Record<string, any>
+}
 
-  function showDialog(options: {
+export const useDialogStore = defineStore('dialog', () => {
+  const dialogStack = ref<DialogInstance[]>([])
+
+  const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
+
+  function riseDialog(options: { key: string }) {
+    const dialogKey = options.key
+
+    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
+    if (index !== -1) {
+      const dialogs = dialogStack.value.splice(index, 1)
+      dialogStack.value.push(...dialogs)
+    }
+  }
+
+  function closeDialog(options?: { key: string }) {
+    if (!options) {
+      dialogStack.value.pop()
+      return
+    }
+
+    const dialogKey = options.key
+
+    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
+    if (index === -1) {
+      return
+    }
+    dialogStack.value.splice(index, 1)
+  }
+
+  function createDialog(options: {
+    key: string
     title?: string
     headerComponent?: Component
     component: Component
     props?: Record<string, any>
     dialogComponentProps?: DialogComponentProps
   }) {
-    isVisible.value = true
-    title.value = options.title ?? ''
-    headerComponent.value = options.headerComponent
-      ? markRaw(options.headerComponent)
-      : null
-    component.value = markRaw(options.component)
-    props.value = options.props || {}
-    dialogComponentProps.value = options.dialogComponentProps || {}
+    const dialog = {
+      key: options.key,
+      visible: true,
+      title: options.title,
+      headerComponent: options.headerComponent
+        ? markRaw(options.headerComponent)
+        : undefined,
+      component: markRaw(options.component),
+      contentProps: { ...options.props },
+      dialogComponentProps: {
+        maximizable: false,
+        modal: true,
+        closable: true,
+        closeOnEscape: true,
+        dismissableMask: true,
+        ...options.dialogComponentProps,
+        maximized: false,
+        onMaximize: () => {
+          dialog.dialogComponentProps.maximized = true
+        },
+        onUnmaximize: () => {
+          dialog.dialogComponentProps.maximized = false
+        },
+        onAfterHide: () => {
+          options.dialogComponentProps?.onClose?.()
+          closeDialog(dialog)
+        },
+        pt: {
+          root: {
+            onMousedown: () => {
+              riseDialog(dialog)
+            }
+          }
+        }
+      }
+    }
+    dialogStack.value.push(dialog)
+
+    return dialog
   }
 
-  function closeDialog() {
-    if (dialogComponentProps.value.onClose) {
-      dialogComponentProps.value.onClose()
+  function showDialog(options: {
+    key?: string
+    title?: string
+    headerComponent?: Component
+    component: Component
+    props?: Record<string, any>
+    dialogComponentProps?: DialogComponentProps
+  }) {
+    const dialogKey = options.key || genDialogKey()
+
+    let dialog = dialogStack.value.find((d) => d.key === dialogKey)
+
+    if (dialog) {
+      dialog.visible = true
+      riseDialog(dialog)
+    } else {
+      dialog = createDialog({ ...options, key: dialogKey })
     }
-    isVisible.value = false
+    return dialog
   }
 
   return {
-    isVisible,
-    title,
-    headerComponent,
-    component,
-    props,
-    dialogComponentProps,
+    dialogStack,
+    riseDialog,
     showDialog,
     closeDialog
   }