From 8e607cbaa2de0092c76622d12f80da19d3159f2f Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 31 Mar 2024 11:06:47 +0800
Subject: [PATCH] =?UTF-8?q?window=E6=8E=A7=E4=BB=B6=E5=A2=9E=E5=8A=A0form?=
 =?UTF-8?q?=E5=85=B3=E8=81=94=EF=BC=8C=E6=96=B9=E4=BE=BF=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/MockMenus.js                      |  8 +++
 src/components/common-form/index.vue   |  6 +-
 src/components/common-window/index.vue | 26 +++++++-
 src/components/utils/index.js          | 20 +++++-
 src/route/ToolsRoutes.js               |  4 ++
 src/views/tools/WindowForms.vue        | 87 ++++++++++++++++++++++++++
 6 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 src/views/tools/WindowForms.vue

diff --git a/mock/MockMenus.js b/mock/MockMenus.js
index 481209d..3ae6947 100644
--- a/mock/MockMenus.js
+++ b/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'
   }
 ]
 
diff --git a/src/components/common-form/index.vue b/src/components/common-form/index.vue
index cd78a94..0186b29 100644
--- a/src/components/common-form/index.vue
+++ b/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)
   }
 })
 
diff --git a/src/components/common-window/index.vue b/src/components/common-window/index.vue
index f6cbaa4..88a5307 100644
--- a/src/components/common-window/index.vue
+++ b/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) {
diff --git a/src/components/utils/index.js b/src/components/utils/index.js
index 176ea6a..bbb597c 100644
--- a/src/components/utils/index.js
+++ b/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
+  }
+}
diff --git a/src/route/ToolsRoutes.js b/src/route/ToolsRoutes.js
index bb3f6ce..8f33213 100644
--- a/src/route/ToolsRoutes.js
+++ b/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',
diff --git a/src/views/tools/WindowForms.vue b/src/views/tools/WindowForms.vue
new file mode 100644
index 0000000..676944a
--- /dev/null
+++ b/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>