window控件增加form关联，方便窗口使用

mock/MockMenus.js

@@ -90,6 +90,14 @@ const allMenus = [
     nameCn: '其他示例',
     nameEn: 'Others',
     menuUrl: '/tests'
+  },
+  {
+    id: 25,
+    parentId: 2,
+    iconCls: 'TipsAndUpdatesOutlined',
+    nameCn: '窗口表单示例',
+    nameEn: 'Window Forms',
+    menuUrl: '/window-forms'
   }
 ]
 

src/components/common-form/index.vue

@@ -87,9 +87,9 @@ defineExpose({
   form
 })
 onMounted(() => {
-  const windowFormRef = inject('commonWindowForm', null)
-  if (isRef(windowFormRef)) {
-    windowFormRef.value = form.value
+  const commonWindowRef = inject('commonWindow', null)
+  if (isRef(commonWindowRef)) {
+    commonWindowRef.value.addForm(form)
   }
 })
 

src/components/common-window/index.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { useVModel } from '@vueuse/core'
-import { computed, ref, provide } from 'vue'
+import { computed, ref, provide, unref } from 'vue'
 import { UPDATE_MODEL_EVENT } from 'element-plus'
+import { proxyMethod } from '@/components/utils'
 
 const props = defineProps({
   modelValue: {
@@ -91,8 +92,27 @@ const props = defineProps({
 })
 const emit = defineEmits([UPDATE_MODEL_EVENT])
 const showDialog = useVModel(props, 'modelValue', emit) // 自动响应v-model
-const windowForm = ref(null) // 如果common-window下面有common-form，注册到这里
-provide('commonWindowForm', windowForm)
+const windowForms = ref([]) // 如果common-window下面有common-form，注册到这里
+const commonWindow = ref({
+  showWindow: showDialog,
+  addForm (form) {
+    if (form && !windowForms.value.includes(form)) {
+      windowForms.value.push(form)
+    }
+  }
+})
+provide('commonWindow', commonWindow)
+const methods = ['validate', 'validateField', 'resetFields', 'clearValidate']
+const windowForm = computed(() => {
+  let result = windowForms.value[0]
+  if (windowForms.value.length > 1) {
+    result = methods.reduce((res, methodName) => {
+      res[methodName] = proxyMethod(windowForms.value, methodName)
+      return res
+    }, {})
+  }
+  return unref(result)
+})
 
 const okButtonClick = $event => {
   if (!props.okClick || props.okClick({ $event, form: windowForm.value }) !== false) {

src/components/utils/index.js

@@ -1,6 +1,6 @@
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import { $i18nBundle, $i18nKey } from '@/messages'
-import { isArray, isObject } from 'lodash'
+import { isArray, isObject, isFunction } from 'lodash'
 import dayjs from 'dayjs'
 
 export const getFrontendPage = (totalCount, pageSize, pageNumber = 1) => {
@@ -183,3 +183,19 @@ export const formatDay = (date, format) => {
   }
 }
 
+export const proxyMethod = (targets = [], methodName) => {
+  return (...args) => {
+    const results = []
+    for (let target of targets) {
+      target = unref(target)
+      const method = target[methodName]
+      if (isFunction(method)) {
+        results.push(method.call(target, ...args))
+      }
+    }
+    if (isObject(results[0]) && isFunction(results[0]?.then)) {
+      return Promise.all(results)
+    }
+    return results
+  }
+}

src/route/ToolsRoutes.js

@@ -10,6 +10,10 @@ export default [{
   path: '/tests',
   name: 'tests',
   component: () => import('@/views/tools/TestPage.vue')
+}, {
+  path: '/window-forms',
+  name: 'tests',
+  component: () => import('@/views/tools/WindowForms.vue')
 }, {
   path: '/tables',
   name: 'TablesBase',

src/views/tools/WindowForms.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from 'vue'
+import { defineFormOptions } from '@/components/utils'
+const showWindow = ref(false)
+
+const userModel = ref({
+  cert: {}
+})
+
+const formOptions1 = defineFormOptions([
+  {
+    label: '用户名',
+    prop: 'userName',
+    required: true
+  },
+  {
+    label: '密码',
+    prop: 'userPassword',
+    required: true
+  }
+])
+
+const formOptions2 = defineFormOptions([
+  {
+    label: '证件类别',
+    type: 'select',
+    prop: 'certType',
+    required: true,
+    children: [{
+      label: '身份证',
+      value: '1'
+    }, {
+      label: '护照',
+      value: '2'
+    }]
+  },
+  {
+    label: '证件号',
+    prop: 'certNumber',
+    required: true
+  }
+])
+
+const submitForm = ({ form }) => {
+  console.info('=============================', form)
+  form.validate(valid => {
+    console.info('======================valid', valid)
+  })
+  return false
+}
+
+</script>
+
+<template>
+  <el-container class="container-center">
+    <el-button
+      type="primary"
+      size="large"
+      @click="showWindow=!showWindow"
+    >
+      打开窗口
+    </el-button>
+    <common-window
+      v-model="showWindow"
+      :ok-click="submitForm"
+    >
+      <el-container class="flex-column container-center">
+        <common-form
+          class="form-edit-width-90"
+          :model="userModel"
+          :options="formOptions1"
+          :show-buttons="false"
+        />
+        <common-form
+          class="form-edit-width-90"
+          :model="userModel.cert"
+          :options="formOptions2"
+          :show-buttons="false"
+        />
+      </el-container>
+    </common-window>
+  </el-container>
+</template>
+
+<style scoped>
+
+</style>