From cf66f750505534fa76f94375067613fd2bd63d53 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Mon, 11 Mar 2024 14:19:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=99=AE=E9=80=9A=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E7=9A=84=E5=B1=95=E7=A4=BA=E6=94=B9=E5=88=B0tab=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/event/useEventBus.js         |   3 +-
 src/router/routes/basic.ts             |  33 ++++++
 src/views/secondDev/formCreatePage.vue | 141 +++++++++++++++++++++++++
 3 files changed, 176 insertions(+), 1 deletion(-)
 create mode 100644 src/views/secondDev/formCreatePage.vue

diff --git a/src/hooks/event/useEventBus.js b/src/hooks/event/useEventBus.js
index 0f7f146..73dd678 100644
--- a/src/hooks/event/useEventBus.js
+++ b/src/hooks/event/useEventBus.js
@@ -4,6 +4,7 @@ const bus = new mitt();
 export default function () {
     return {
         bus,
-        FLOW_PROCESSED: 'flow_processed'
+        FLOW_PROCESSED: 'flow_processed',
+        FORM_LIST_MODIFIED: 'form_list_modified'
     };
 }
diff --git a/src/router/routes/basic.ts b/src/router/routes/basic.ts
index 2f1f771..e40e01c 100644
--- a/src/router/routes/basic.ts
+++ b/src/router/routes/basic.ts
@@ -184,4 +184,37 @@ export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
             }
         }
     ]
+}, {
+    path: '/form/:module/:id',
+    name: 'SimpleForm',
+    meta: {
+        title: '表单'
+    },
+    component: LAYOUT,
+    children: [
+        {
+            path: 'createForm',
+            name: 'createForm',
+            component: () => import('/@/views/secondDev/formCreatePage.vue'),
+            meta: {
+                title: '新建表单'
+            }
+        },
+        {
+            path: 'updateForm',
+            name: 'updateForm',
+            component: () => import('/@/views/secondDev/formCreatePage.vue'),
+            meta: {
+                title: '更新表单'
+            }
+        },
+        {
+            path: 'viewForm',
+            name: 'viewForm',
+            component: () => import('/@/views/secondDev/formCreatePage.vue'),
+            meta: {
+                title: '查看表单'
+            }
+        }
+    ]
 }];
diff --git a/src/views/secondDev/formCreatePage.vue b/src/views/secondDev/formCreatePage.vue
new file mode 100644
index 0000000..8d6c294
--- /dev/null
+++ b/src/views/secondDev/formCreatePage.vue
@@ -0,0 +1,141 @@
+<template>
+    <div class="page-bg-wrap">
+        <div class="top-toolbar">
+            <a-space :size="10" wrap>
+                <a-button style="margin-right: 10px" @click="close">
+                    <slot name="icon">
+                        <close-outlined />
+                    </slot>
+                    关闭
+                </a-button>
+                <a-button v-if="mode != 'read'" type="primary" @click="handleSubmit">
+                    <slot name="icon">
+                        <check-circle-outlined />
+                    </slot>
+                    确认
+                </a-button>
+            </a-space>
+        </div>
+        <component :is="dynamicComponent" ref="formRef" :fromPage="FromPageType.MENU" @form-mounted="onFormMounted" />
+    </div>
+</template>
+
+<script setup>
+    import { useRouter } from 'vue-router';
+    import { FromPageType } from '/@/enums/workflowEnum';
+    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent } from 'vue';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { useI18n } from '/@/hooks/web/useI18n';
+    import { CheckCircleOutlined, StopOutlined, CloseOutlined } from '@ant-design/icons-vue';
+    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+    import useEventBus from '/@/hooks/event/useEventBus';
+
+    const dynamicComponent = ref(null);
+    const formType = ref('2'); // 0 新建 1 修改 2 查看
+    const formRef = ref();
+    const props = defineProps({});
+    const { bus, FORM_LIST_MODIFIED } = useEventBus();
+
+    const router = useRouter();
+    const { currentRoute } = router;
+
+    const { formPath } = currentRoute.value.query;
+    const pathArr = formPath.split('/');
+
+    const tabStore = useMultipleTabStore();
+    const formProps = ref(null);
+    const formId = ref(currentRoute.value?.params?.id);
+
+    const { notification } = useMessage();
+    const { t } = useI18n();
+    const hash = location.hash;
+    const mode = ref('read');
+    if (hash.indexOf('createForm') > 0) {
+        mode.value = 'create';
+    } else if (hash.indexOf('updateForm') > 0) {
+        mode.value = 'update';
+    } else if (hash.indexOf('viewForm') > 0) {
+        mode.value = 'view';
+    }
+
+    dynamicComponent.value = defineAsyncComponent({
+        loader: () => import(`./../../views/${pathArr[0]}/${pathArr[1]}/components/Form.vue`)
+    });
+
+    function onFormMounted(_formProps) {
+        formProps.value = _formProps;
+        setFormType();
+    }
+
+    async function setFormType() {
+        const _mode = mode.value;
+        if (_mode === 'create') {
+            return;
+        }
+        await nextTick();
+        if (_mode === 'view') {
+            await formRef.value.setDisabledForm();
+        }
+        await formRef.value.setFormDataFromId(formId.value);
+    }
+
+    function close() {
+        tabStore.closeTab(currentRoute.value, router);
+    }
+
+    async function handleSubmit() {
+        try {
+            const saveSuccess = await saveModal();
+            if (saveSuccess) {
+                notification.success({
+                    message: 'Tip',
+                    description: formType.value === '0' ? t('新增成功！') : t('修改成功！')
+                }); //提示消息
+                formRef.value.resetFields();
+                setTimeout(() => {
+                    bus.emit(FORM_LIST_MODIFIED, { path: formPath, mode });
+                    close();
+                }, 1000);
+            }
+        } finally {
+        }
+    }
+
+    async function saveModal() {
+        let saveSuccess = false;
+        const _mode = mode.value;
+        try {
+            const values = await formRef.value?.validate();
+            //添加隐藏组件
+            if (formProps.hiddenComponent?.length) {
+                formProps.hiddenComponent.forEach((component) => {
+                    values[component.bindField] = component.value;
+                });
+            }
+            if (values !== false) {
+                try {
+                    if (_mode === 'create') {
+                        saveSuccess = await formRef.value.add(values);
+                    } else {
+                        saveSuccess = await formRef.value.update({ values, rowId: formId.value });
+                    }
+                    return saveSuccess;
+                } catch (error) {}
+            }
+        } catch (error) {
+            console.error('saveModal Error: ', error);
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .page-bg-wrap {
+        background-color: #fff;
+    }
+
+    .top-toolbar {
+        min-height: 40px;
+        margin-bottom: 8px;
+        border-bottom: 1px solid #eee;
+    }
+</style>