From c72f11cc5beb78613d055345624e122231b2f574 Mon Sep 17 00:00:00 2001
From: lizw-2015 <1183409807@qq.com>
Date: Thu, 5 Jun 2025 18:18:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(runtime):=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E9=85=8D=E7=BD=AE=E5=B9=B6=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=20DataForm=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 main.ts 中添加 initGlobalConfig 和 initGlobalConfigWithRuntime 初始化函数
- 在 DataForm01.vue 中注册 DataForm 组件并创建测试按钮
- 实现了将 reactive 数据转换为普通对象并传递给对话框的功能
---
 src/main.ts              |   5 ++
 src/pages/DataForm01.vue | 159 +++++++++++++++++++++++++++++------------------
 2 files changed, 105 insertions(+), 59 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 4710dc8..b60708d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,8 @@ import router from './router'
 import * as webIndex from '@/components/webindex'
 import { directive, menusEvent, Vue3Menus } from 'vue3-menus'
 import ElementPlus from 'element-plus'
+import { initGlobalConfig } from "@ease-forge/shared";
+import { initGlobalConfigWithRuntime } from "@ease-forge/runtime";
 import System from '@/runtime/System'
 
 import 'ag-grid-community/styles/ag-grid.css'
@@ -13,6 +15,9 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'
 import 'element-plus/dist/index.css'
 import './main.less'
 
+initGlobalConfig();
+initGlobalConfigWithRuntime();
+
 const app = createApp(App)
 
 app.use(createPinia())
diff --git a/src/pages/DataForm01.vue b/src/pages/DataForm01.vue
index 1160450..a515fe8 100644
--- a/src/pages/DataForm01.vue
+++ b/src/pages/DataForm01.vue
@@ -1,64 +1,68 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, toRaw } from "vue";
 import { Format } from "@ease-forge/shared";
+import { createBlockComponent } from "@ease-forge/runtime";
 import DataForm, { type DataFormProps } from "@/components/data-form/DataForm.vue";
 
+window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
+
+const data = reactive({
+    str: "abcABC",
+    num_1: 123,
+    checkbox_1: true,
+    checkbox_group_1: ["v2"],
+    radio_1: false,
+    radio_group_1: "v2",
+    switch_1: false,
+    select_1: "006",
+    select_2: "006",
+    date_1: "2025-02-03",
+    date_2: Format.toDayjs("2025-02-03").toDate(),
+    time_1: "08:30:00",
+    time_select_1: "08:30:00",
+    cascader_1: ["wh"],
+    tree_select_1: "wh",
+    autocomplete: "汤磊",
+    tags_1: ["DEV"],
+    color_1: "#CA4343",
+    slider_1: 80,
+    rate_1: 3.5,
+    mentions_1: "abc @bj ABC",
+    transfer_1: ["v1", "v2"],
+    upload_1: [
+        {
+            name: 'image.png',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-2',
+            name: 'image.png',
+            status: 'done',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-3',
+            percent: 50,
+            name: 'image.png',
+            status: 'uploading',
+            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        },
+        {
+            uid: '-5',
+            name: 'image.png',
+            status: 'error',
+        },
+    ],
+    password: "2025fff",
+    textarea: [
+        "蛇衔春色千山秀",
+        "龙舞祥光万户新",
+        "福满人间",
+        "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
+    ].join("\n"),
+});
+
 const dataForm1 = reactive<DataFormProps>({
-    data: {
-        str: "abcABC",
-        num_1: 123,
-        checkbox_1: true,
-        checkbox_group_1: ["v2"],
-        radio_1: false,
-        radio_group_1: "v2",
-        switch_1: false,
-        select_1: "006",
-        select_2: "006",
-        date_1: "2025-02-03",
-        date_2: Format.toDayjs("2025-02-03").toDate(),
-        time_1: "08:30:00",
-        time_select_1: "08:30:00",
-        cascader_1: ["wh"],
-        tree_select_1: "wh",
-        autocomplete: "汤磊",
-        tags_1: ["DEV"],
-        color_1: "#CA4343",
-        slider_1: 80,
-        rate_1: 3.5,
-        mentions_1: "abc @bj ABC",
-        transfer_1: ["v1", "v2"],
-        upload_1: [
-            {
-                name: 'image.png',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-2',
-                name: 'image.png',
-                status: 'done',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-3',
-                percent: 50,
-                name: 'image.png',
-                status: 'uploading',
-                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-            },
-            {
-                uid: '-5',
-                name: 'image.png',
-                status: 'error',
-            },
-        ],
-        password: "2025fff",
-        textarea: [
-            "蛇衔春色千山秀",
-            "龙舞祥光万户新",
-            "福满人间",
-            "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
-        ].join("\n"),
-    },
     formFields: [
         {
             dataPath: 'str', label: '字符串', input: 'Input',
@@ -358,22 +362,59 @@ const dataForm1 = reactive<DataFormProps>({
     layout: "onlyLabelFixed",
 });
 
+const MyDataForm = createBlockComponent({
+    block: true,
+    type: "DataForm",
+    data: {
+        data: toRaw(data),
+    },
+    props: {
+        style: {
+            overflowY: "auto",
+        },
+        data: "{{ data }}",
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    },
+}, {
+    componentManage: window.globalConfig.componentManage,
+});
+
+function test() {
+    system.showDialog(MyDataForm, {
+        title: '模型查看器',
+        width: 950,
+        height: 400,
+        showClose: true,
+        showMax: true,
+        showCancelButton: false,
+        showOkButton: true,
+    }).then(() => {
+        console.log("data", data);
+    }).finally();
+}
+
 </script>
 
 <template>
+    <div>
+        <button @click="test">测试</button>
+    </div>
     <div class="flex-row-container" style="column-gap: 12px;height: calc(100% - 30px);">
         <DataForm
             class="flex-item-fixed"
             style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"
-            :data="dataForm1.data"
+            :data="data"
             :formFields="dataForm1.formFields"
             :columnCount="dataForm1.columnCount"
             :layout="dataForm1.layout"
             labelWidth="100px"
             inputWidth=""
-            :colon="true"
         />
-        <pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(dataForm1.data, null, 4) }}</pre>
+        <!--<MyDataForm class="flex-item-fixed" style="width: 900px;height: 100%; overflow-y: auto;border: 1px solid #ccc;padding: 6px"/>-->
+        <pre class="flex-item-fill" style="overflow-y: auto;" lang="json">{{ JSON.stringify(data, null, 4) }}</pre>
     </div>
     <div style="height: 24px;"/>
 </template>