mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
feat(playground): 新增表单编辑器
This commit is contained in:
roymondchen
parent
ba2f1e5ac5
commit
cf72039ff1
266
playground/src/configs/formDsl.ts
Normal file
266
playground/src/configs/formDsl.ts
Normal file
@ -0,0 +1,266 @@
|
||||
export default [
|
||||
{
|
||||
text: '文本',
|
||||
name: 'text',
|
||||
tooltip: (vm: any, { model }: any) => model.text,
|
||||
extra: (vm: any, { model }: any) => `${model.text}extra`,
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
text: 'checkbox',
|
||||
name: 'option',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0,
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
displayText: '链接',
|
||||
text: 'link',
|
||||
name: 'link',
|
||||
href: '',
|
||||
tooltip: 'element-ui',
|
||||
},
|
||||
{
|
||||
type: 'display',
|
||||
text: '展示',
|
||||
name: 'display',
|
||||
initValue: 'display',
|
||||
tooltip: 'hello',
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
text: '计数器',
|
||||
name: 'number',
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
text: '输入框',
|
||||
name: 'textarea1',
|
||||
},
|
||||
{
|
||||
type: 'datetime',
|
||||
text: '日期',
|
||||
name: 'datetime',
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
text: '开关',
|
||||
name: 'switch',
|
||||
filter: 'number',
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
type: 'daterange',
|
||||
text: '日期范围',
|
||||
name: 'daterange',
|
||||
// names: ['one', 'two'],
|
||||
},
|
||||
{
|
||||
type: 'time',
|
||||
text: '日期选择',
|
||||
name: 'time',
|
||||
},
|
||||
{
|
||||
type: 'colorPicker',
|
||||
text: '取色器',
|
||||
name: 'colorPicker',
|
||||
},
|
||||
{
|
||||
type: 'checkbox-group',
|
||||
text: '选项组',
|
||||
name: 'checkGroup',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
text: 'one',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: 'two',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'radio-group',
|
||||
text: '单选框',
|
||||
name: 'radioGroup',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
text: 'one',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: 'two',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
text: '级联选择',
|
||||
placeholder: 'test',
|
||||
name: 'cascader',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'one',
|
||||
children: [
|
||||
{
|
||||
value: 3,
|
||||
label: 'three',
|
||||
children: [
|
||||
{
|
||||
value: 8,
|
||||
label: 'eight',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'four',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: 'six',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'two',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: 'five',
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
label: 'seven',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'dynamic-field',
|
||||
name: 'dynamic-field',
|
||||
dynamicKey: 'textarea',
|
||||
text: '动态表单',
|
||||
returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
items: [
|
||||
{
|
||||
type: 'date',
|
||||
text: '日期',
|
||||
name: 'date',
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
text: '多选框',
|
||||
name: 'checkbox',
|
||||
tooltip: '分组xxxxxxxxxxxx',
|
||||
extra: 'extra',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'fieldset',
|
||||
name: 'fieldset',
|
||||
legend: '分组',
|
||||
extra: 'extra',
|
||||
checkbox: true,
|
||||
expand: 'checkbox',
|
||||
// schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||
items: [
|
||||
{
|
||||
type: 'select',
|
||||
text: '下拉选项',
|
||||
name: 'select',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'table',
|
||||
name: 'table',
|
||||
defautSort: { prop: 'name', order: 'descending' },
|
||||
extra: 'extra',
|
||||
itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
|
||||
items: [
|
||||
{
|
||||
label: 'id',
|
||||
name: 'id',
|
||||
sortable: true,
|
||||
tooltip: '分组xxxxxxxxxxxx',
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'groupList',
|
||||
name: 'groupList',
|
||||
extra: '分组xxxxxxxxxxxx',
|
||||
itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
|
||||
items: [
|
||||
{
|
||||
text: 'id',
|
||||
name: 'id',
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: 'panel',
|
||||
title: 'panel',
|
||||
extra: 'panel',
|
||||
schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||
items: [
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: 'step',
|
||||
items: [
|
||||
{
|
||||
name: 'step1',
|
||||
title: 'step1',
|
||||
items: [
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'step2',
|
||||
title: 'step2',
|
||||
items: [
|
||||
{
|
||||
text: '名称2',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -105,6 +105,11 @@ const menu: MenuBarData = {
|
||||
text: 'Form Playground',
|
||||
handler: () => router.push('form'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Form Editor Playground',
|
||||
handler: () => router.push('form-editor'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Table Playground',
|
||||
|
||||
@ -35,6 +35,7 @@ import { MenuButton } from '@tmagic/editor';
|
||||
import { MForm } from '@tmagic/form';
|
||||
|
||||
import NavMenu from '../components/NavMenu.vue';
|
||||
import formDsl from '../configs/formDsl';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
@ -94,272 +95,7 @@ const lastVersion = ref({
|
||||
colorPicker: '#000000',
|
||||
});
|
||||
|
||||
const config = ref([
|
||||
{
|
||||
text: '文本',
|
||||
name: 'text',
|
||||
tooltip: (vm: any, { model }: any) => model.text,
|
||||
extra: (vm: any, { model }: any) => `${model.text}extra`,
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
text: 'checkbox',
|
||||
name: 'option',
|
||||
activeValue: 1,
|
||||
inactiveValue: 0,
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
displayText: '链接',
|
||||
text: 'link',
|
||||
name: 'link',
|
||||
href: '',
|
||||
tooltip: 'element-ui',
|
||||
},
|
||||
{
|
||||
type: 'display',
|
||||
text: '展示',
|
||||
name: 'display',
|
||||
initValue: 'display',
|
||||
tooltip: 'hello',
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
text: '计数器',
|
||||
name: 'number',
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
text: '输入框',
|
||||
name: 'textarea1',
|
||||
},
|
||||
{
|
||||
type: 'datetime',
|
||||
text: '日期',
|
||||
name: 'datetime',
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
text: '开关',
|
||||
name: 'switch',
|
||||
filter: 'number',
|
||||
defaultValue: 1,
|
||||
},
|
||||
{
|
||||
type: 'daterange',
|
||||
text: '日期范围',
|
||||
name: 'daterange',
|
||||
// names: ['one', 'two'],
|
||||
},
|
||||
{
|
||||
type: 'time',
|
||||
text: '日期选择',
|
||||
name: 'time',
|
||||
},
|
||||
{
|
||||
type: 'colorPicker',
|
||||
text: '取色器',
|
||||
name: 'colorPicker',
|
||||
},
|
||||
{
|
||||
type: 'checkbox-group',
|
||||
text: '选项组',
|
||||
name: 'checkGroup',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
text: 'one',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: 'two',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'radio-group',
|
||||
text: '单选框',
|
||||
name: 'radioGroup',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
text: 'one',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: 'two',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'cascader',
|
||||
text: '级联选择',
|
||||
placeholder: 'test',
|
||||
name: 'cascader',
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'one',
|
||||
children: [
|
||||
{
|
||||
value: 3,
|
||||
label: 'three',
|
||||
children: [
|
||||
{
|
||||
value: 8,
|
||||
label: 'eight',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'four',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: 'six',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'two',
|
||||
children: [
|
||||
{
|
||||
value: 5,
|
||||
label: 'five',
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
label: 'seven',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'dynamic-field',
|
||||
name: 'dynamic-field',
|
||||
dynamicKey: 'textarea',
|
||||
text: '动态表单',
|
||||
returnFields: () => [{ name: 'one', label: 'number', defaultValue: 'yes' }],
|
||||
},
|
||||
{
|
||||
type: 'row',
|
||||
items: [
|
||||
{
|
||||
type: 'date',
|
||||
text: '日期',
|
||||
name: 'date',
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
text: '多选框',
|
||||
name: 'checkbox',
|
||||
tooltip: '分组xxxxxxxxxxxx',
|
||||
extra: 'extra',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'fieldset',
|
||||
name: 'fieldset',
|
||||
legend: '分组',
|
||||
extra: 'extra',
|
||||
checkbox: true,
|
||||
expand: 'checkbox',
|
||||
// schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||
items: [
|
||||
{
|
||||
type: 'select',
|
||||
text: '下拉选项',
|
||||
name: 'select',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'table',
|
||||
name: 'table',
|
||||
defautSort: { prop: 'name', order: 'descending' },
|
||||
extra: 'extra',
|
||||
itemExtra: (vm: any, { model }: any): any => `${model.text}itemExtra`,
|
||||
items: [
|
||||
{
|
||||
label: 'id',
|
||||
name: 'id',
|
||||
sortable: true,
|
||||
tooltip: '分组xxxxxxxxxxxx',
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'groupList',
|
||||
name: 'groupList',
|
||||
extra: '分组xxxxxxxxxxxx',
|
||||
itemExtra: (vm: any, { model }: any) => `${model.name}extra`,
|
||||
items: [
|
||||
{
|
||||
text: 'id',
|
||||
name: 'id',
|
||||
rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
|
||||
},
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: 'panel',
|
||||
title: 'panel',
|
||||
extra: 'panel',
|
||||
schematic: 'https://vfiles.gtimg.cn/vupload/20210329/9712631617027075445.png',
|
||||
items: [
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: 'step',
|
||||
items: [
|
||||
{
|
||||
name: 'step1',
|
||||
title: 'step1',
|
||||
items: [
|
||||
{
|
||||
text: '名称',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'step2',
|
||||
title: 'step2',
|
||||
items: [
|
||||
{
|
||||
text: '名称2',
|
||||
name: 'name',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const config = ref(formDsl);
|
||||
|
||||
const initValue = ref({
|
||||
text: '文本',
|
||||
@ -379,6 +115,11 @@ const menu: MenuButton[] = [
|
||||
text: 'Editor Playground',
|
||||
handler: () => router.push('/'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Form Editor Playground',
|
||||
handler: () => router.push('form-editor'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Table Playground',
|
||||
|
||||
166
playground/src/pages/FormEditor.vue
Normal file
166
playground/src/pages/FormEditor.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<TMagicEditor
|
||||
v-model="config"
|
||||
:menu="menu"
|
||||
:sidebar="sidebar"
|
||||
:component-group-list="componentGroupList"
|
||||
:render-type="RenderType.NATIVE"
|
||||
:render="render"
|
||||
:can-select="canSelect"
|
||||
:update-drag-el="updateDragEl"
|
||||
:stage-rect="{ width: 'calc(100% - 70px)', height: '100%' }"
|
||||
>
|
||||
<template #layer-node-label="{ data }">
|
||||
{{ data.text || data.name || 'container' }}
|
||||
</template>
|
||||
</TMagicEditor>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { createApp, nextTick, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Document } from '@element-plus/icons-vue';
|
||||
|
||||
import { ComponentGroup, MenuBarData, SideBarData, TMagicEditor, traverseNode, uiService } from '@tmagic/editor';
|
||||
import MagicForm, { MForm } from '@tmagic/form';
|
||||
import { MApp, MNode, NodeType } from '@tmagic/schema';
|
||||
import { getOffset, RenderType, RuntimeWindow, TargetElement } from '@tmagic/stage';
|
||||
import { guid } from '@tmagic/utils';
|
||||
|
||||
import formDsl from '../configs/formDsl';
|
||||
|
||||
formDsl.forEach((item) => {
|
||||
traverseNode<any>(item, (item) => {
|
||||
item.id = `${item.type}_${guid()}`;
|
||||
item.style = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
position: 'relative',
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const config = ref<MApp>({
|
||||
type: NodeType.ROOT,
|
||||
id: 'app_form',
|
||||
items: [
|
||||
{
|
||||
type: NodeType.PAGE,
|
||||
id: 'page_form',
|
||||
layout: 'relative',
|
||||
items: formDsl as unknown as MNode[],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const render = () => {
|
||||
const el = globalThis.document.createElement('div');
|
||||
el.style.position = 'relative';
|
||||
createApp(MForm, {
|
||||
config: formDsl,
|
||||
initValues: {},
|
||||
})
|
||||
.use(MagicForm)
|
||||
.mount(el);
|
||||
|
||||
nextTick(() => {
|
||||
(globalThis as unknown as RuntimeWindow).magic.onPageElUpdate(el);
|
||||
uiService.set('showRule', false);
|
||||
});
|
||||
|
||||
return el;
|
||||
};
|
||||
|
||||
const updateDragEl = (el: TargetElement, target: TargetElement, container: HTMLElement) => {
|
||||
const { left, top } = getOffset(container);
|
||||
el.style.left = `${globalThis.parseFloat(el.style.left) - left}px`;
|
||||
el.style.top = `${globalThis.parseFloat(el.style.top) - top}px`;
|
||||
};
|
||||
|
||||
const componentGroupList: ComponentGroup[] = [
|
||||
{
|
||||
title: '容器',
|
||||
items: [
|
||||
{
|
||||
text: '普通容器',
|
||||
type: 'container',
|
||||
data: {
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '表格',
|
||||
type: 'table',
|
||||
data: {
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '组列表',
|
||||
type: 'group-list',
|
||||
data: {
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '面板',
|
||||
type: 'panel',
|
||||
data: {
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '行',
|
||||
type: 'row',
|
||||
data: {
|
||||
items: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const menu: MenuBarData = {
|
||||
left: [
|
||||
{
|
||||
type: 'text',
|
||||
text: '魔方',
|
||||
},
|
||||
],
|
||||
center: ['delete', 'undo', 'redo', 'zoom'],
|
||||
right: [
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Editor Playground',
|
||||
handler: () => router.push('/'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Form Playground',
|
||||
handler: () => router.push('form'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Table Playground',
|
||||
handler: () => router.push('table'),
|
||||
},
|
||||
'/',
|
||||
{
|
||||
type: 'button',
|
||||
icon: Document,
|
||||
tooltip: '源码',
|
||||
handler: (service) => service?.uiService.set('showSrc', !service?.uiService.get('showSrc')),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const sidebar: SideBarData = {
|
||||
type: 'tabs',
|
||||
status: '组件',
|
||||
items: ['component-list', 'layer'],
|
||||
};
|
||||
|
||||
const canSelect = (el: HTMLElement) => el.classList.contains('m-form-container');
|
||||
</script>
|
||||
@ -60,6 +60,11 @@ const menu: MenuButton[] = [
|
||||
text: 'Editor Playground',
|
||||
handler: () => router.push('/'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Form Editor Playground',
|
||||
handler: () => router.push('form-editor'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
text: 'Form Playground',
|
||||
|
||||
@ -20,11 +20,13 @@ import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
import Editor from './pages/Editor.vue';
|
||||
import Form from './pages/Form.vue';
|
||||
import FormEditor from './pages/FormEditor.vue';
|
||||
import Table from './pages/Table.vue';
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: Editor },
|
||||
{ path: '/form', component: Form },
|
||||
{ path: '/form-editor', component: FormEditor },
|
||||
{ path: '/table', component: Table },
|
||||
];
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user