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') {
-        const data = this.$refs.childCmpRef['okClick']()
-        if (data) {
-          this.onOk(data)
-        }
-      }
+        this.onOk(null)
     },
     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,10 +1,15 @@
 <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";
 
-const dataForm1 = reactive<DataFormProps>({
-    data: {
+window.globalConfig.componentManage.registerComponent("DataForm", DataForm);
+
+// 当前组件对象
+const instance = getCurrentInstance();
+
+const data = reactive({
     str: "abcABC",
     num_1: 123,
     checkbox_1: true,
@@ -58,7 +63,9 @@ const dataForm1 = reactive<DataFormProps>({
         "福满人间",
         "属性适用于 textarea 节点，并且只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最小行数和最大行数"
     ].join("\n"),
-    },
+});
+
+const dataForm1 = reactive<DataFormProps>({
     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>