yuliang
/
yvan-rcs-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(runtime): 初始化全局配置并测试 DataForm 组件 

- 在 main.ts 中添加 initGlobalConfig 和 initGlobalConfigWithRuntime 初始化函数
- 在 DataForm01.vue 中注册 DataForm 组件并创建测试按钮
- 实现了将 reactive 数据转换为普通对象并传递给对话框的功能
master
lizw-2015 7 months ago
parent
96195f453b
commit
c72f11cc5b
2 changed files with 105 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/main.ts
  2. 159
      src/pages/DataForm01.vue

5
src/main.ts
View File

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

159
src/pages/DataForm01.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save