company/packages/components/plugins/modal.ts

import { createApp, h } from 'vue'
import ModalComponent from '../src/components/Modal/ModalComponent.vue'
import ModalFormComponent from '../src/components/Modal/ModalFormComponent.vue'
import ModalSelectTableComponent from '../src/components/Modal/ModalSelectionTableComponent.vue'
interface SearchFormProps {
  inputs: any[]
  showDefaultBtns?: boolean
  value?: object
  extraBtns?: Array<any>
  layout?: string
}
interface SearchTableProps {
  columns: any[]
  rowKey?: string
  tableProps?: object
  tableEvents?: object
  requestData: Function
  defaultPageSize?: number
  defaultPageSizeOptions?: Array<string>
  pagination?: boolean
  defaultDataSource?: Array<object>
  disableScroll?: boolean
  autoHeight?: boolean
  inModal?: boolean
  autoScrollX?: boolean
  popupScroll?: number
}

interface ModalProps {
  [key: string]: any
  title?: string
  modalProps?: object
  onOK?: Function
}
export function openModal(contentComp: any, modalProps: ModalProps, contentProps?: any = {}) {
  const newElement = document.createElement('div')
  document.getElementById('app')?.appendChild(newElement)
  const app = createApp({
    setup() {
      return () => {
        return h(ModalComponent, {
          isComp: contentComp,
          title: '弹框',
          props: {
            cancelText: '取消',
            okText: '确定',
            destroyOnClose: true,
            onCancel: () => {
              app.unmount()
            },
            ...modalProps
          },
          contentProps: {
            ...contentProps
          }
        })
      }
    }
  })
  app.mount(newElement)
}
export function openModalForm(modalProps: ModalProps, contentProps: any) {
  const newElement = document.createElement('div')
  document.getElementById('app')?.appendChild(newElement)
  const app = createApp({
    setup() {
      return () => {
        return h(ModalFormComponent, {
          title: '弹框',
          layout: 'horizontal',
          modalProps: { cancelText: '取消', okText: '确定', destroyOnClose: true, ...modalProps },
          contentProps: { value: contentProps?.value ?? {}, ...contentProps }
        })
      }
    }
  })
  app.mount(newElement)
}
export function openModalSelectTable(
  modalProps: ModalProps,
  contentProps: SearchFormProps & SearchTableProps
) {
  const newElement = document.createElement('div')
  document.getElementById('app')?.appendChild(newElement)
  const app = createApp({
    setup() {
      return () => {
        return h(ModalSelectTableComponent, {
          title: '弹框',
          modalProps: { cancelText: '取消', okText: '确定', destroyOnClose: true, ...modalProps },
          searchFormProps: {
            inputs: contentProps?.inputs,
            showDefaultBtns: contentProps?.showDefaultBtns ?? true,
            value: contentProps?.value,
            extraBtns: contentProps?.extraBtns,
            layout: contentProps?.layout ?? 'inline'
          },
          searchTableProps: {
            columns: contentProps.columns,
            rowKey: contentProps.rowKey,
            tableProps: contentProps?.tableProps,
            tableEvents: contentProps.tableEvents,
            requestData: contentProps.requestData,
            defaultPageSize: contentProps.defaultPageSize,
            defaultPageSizeOptions: contentProps.defaultPageSizeOptions,
            pagination: contentProps.pagination,
            defaultDataSource: contentProps.defaultDataSource,
            disableScroll: contentProps.disableScroll,
            autoHeight: contentProps.autoHeight,
            inModal: contentProps.inModal,
            autoScrollX: contentProps.autoScrollX,
            popupScroll: contentProps.popupScroll
          },
          onSearch: modalProps?.onSearch
        })
      }
    }
  })
  app.mount(newElement)
}