Merge remote-tracking branch 'origin/master'

src/components/ShowDialogWrap.vue

@@ -25,7 +25,6 @@
 </template>
 <script>
 import _ from 'lodash'
-import { markRaw } from 'vue'
 import ElementDialogResize from '@/components/element-dialog-resize'
 
 export default {
@@ -74,12 +73,7 @@ export default {
       })
     },
     onOkHandle() {
-      if (typeof this.$refs.childCmpRef['okClick'] === 'function') {
+        this.onOk(null)
-        const data = this.$refs.childCmpRef['okClick']()
-        if (data) {
-          this.onOk(data)
-        }
-      }
     },
     onClose() {
       this.isShow = false

src/components/data-form/DataForm.vue

@@ -461,7 +461,12 @@ export type {
 }
 
 .data-form :deep(.el-date-editor) {
-    --el-date-editor-width: unset;
+    --el-input-width: 100%;
+    --el-date-editor-width: 100%;
+}
+
+.data-form :deep(.el-cascader) {
+    width: 100%;
 }
 
 .data-form-row {

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())

src/pages/DataForm01.vue

@@ -1,64 +1,71 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { createVNode, getCurrentInstance, 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 instance = getCurrentInstance();
+
+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 +365,70 @@ const dataForm1 = reactive<DataFormProps>({
     layout: "onlyLabelFixed",
 });
 
+const MyDataForm = createBlockComponent({
+    block: true,
+    type: "DataForm",
+    data: {
+        data: toRaw(data),
+    },
+    props: {
+        style: {
+            overflowY: "auto",
+        },
+        // data: "{{ data }}",
+        data: toRaw(data),
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    },
+}, {
+    componentManage: window.globalConfig.componentManage,
+});
+
+function test() {
+    system.showDialog(createVNode(DataForm, {
+        style: {
+            overflowY: "auto",
+        },
+        data: toRaw(data),
+        formFields: dataForm1.formFields,
+        columnCount: dataForm1.columnCount,
+        layout: dataForm1.layout,
+        labelWidth: "100px",
+    }), {
+        title: '模型查看器',
+        width: 950,
+        height: 400,
+        showClose: true,
+        showMax: true,
+        showCancelButton: false,
+        showOkButton: true,
+    }).then(() => {
+        console.log("data", data);
+        // instance?.proxy.$forceUpdate();
+    }).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>