From a6647dcefe7780633073f4fcb2c444e185e9a690 Mon Sep 17 00:00:00 2001 From: "shengwen.chen" Date: Fri, 18 Apr 2025 16:30:06 +0800 Subject: [PATCH] =?UTF-8?q?wip:=20=E6=A0=B9=E6=8D=AEmock=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E8=A1=A8=E5=8D=95=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .prettierrc.json | 2 +- src/components/RendererDom.vue | 68 ++++++++++++++ src/components/UseIcon.vue | 4 +- src/types/widgetsConfigInterface.ts | 35 ++++++-- src/utils/componentMap.ts | 16 ---- src/utils/melon.json | 122 +++++++++++++++++++++++--- src/utils/widgetsConfig.ts | 16 ++-- src/views/Home/subCom/LeftSide.vue | 3 +- src/views/Home/subCom/MainWrapper.vue | 20 ++++- 9 files changed, 240 insertions(+), 46 deletions(-) delete mode 100644 src/utils/componentMap.ts diff --git a/.prettierrc.json b/.prettierrc.json index 29a2402..226ab0c 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -2,5 +2,5 @@ "$schema": "https://json.schemastore.org/prettierrc", "semi": false, "singleQuote": true, - "printWidth": 100 + "printWidth": 180 } diff --git a/src/components/RendererDom.vue b/src/components/RendererDom.vue index e69de29..049090f 100644 --- a/src/components/RendererDom.vue +++ b/src/components/RendererDom.vue @@ -0,0 +1,68 @@ + + + diff --git a/src/components/UseIcon.vue b/src/components/UseIcon.vue index 8360407..0e138c1 100644 --- a/src/components/UseIcon.vue +++ b/src/components/UseIcon.vue @@ -13,5 +13,7 @@ const iconComponent = computed(() => { diff --git a/src/types/widgetsConfigInterface.ts b/src/types/widgetsConfigInterface.ts index 843cfa2..a054bd9 100644 --- a/src/types/widgetsConfigInterface.ts +++ b/src/types/widgetsConfigInterface.ts @@ -1,12 +1,31 @@ -export interface IContainerOption { +export interface IOption { + // 元素唯一标识符 name: string + // 隐藏状态 hidden: boolean - customClass: string + // 自定义类名 + customClass?: string + // 标签名称 + label?: string + // 默认值 + defaultValue?: string | boolean | number | [] + // 提示词 + placeholder?: string + // 选择项 + optionItems?: [] + // 行合并 + colspan?: number + // 列合并 + rowspan?: number } export type ICategory = 'container' | 'formItem' export interface IWidget { + // 元素唯一标识符 + key?: number + // 元素id + id?: string // 类别 category: ICategory // 类型 @@ -16,9 +35,15 @@ export interface IWidget { // 图标 icon: string // 子类 - rows?: [] + rows?: [{ cols: [IWidget] }] // 属性 - options: IContainerOption + options: IOption + // 子结构 + widgetList?: [] + // 单元格是否被合并 + merged?: boolean } - +export interface IWidgetJson { + widgetList: IWidget[] +} diff --git a/src/utils/componentMap.ts b/src/utils/componentMap.ts deleted file mode 100644 index 4f8ec07..0000000 --- a/src/utils/componentMap.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { - ElTable, - ElTableColumn, - ElInput, - ElForm, - ElFormItem -} from 'element-plus' - -export const componentMap: Record = { - 'el-table': ElTable, - 'el-table-column': ElTableColumn, - 'el-input': ElInput, - 'el-form': ElForm, - 'el-form-item': ElFormItem, -} \ No newline at end of file diff --git a/src/utils/melon.json b/src/utils/melon.json index 17cd4f6..01d064e 100644 --- a/src/utils/melon.json +++ b/src/utils/melon.json @@ -2,7 +2,7 @@ "key": 47004, "id": "table-61396", "category": "container", - "type": "el-table", + "type": "table", "displayName": "表格", "icon": "Monitor", "rows": [ @@ -10,14 +10,37 @@ "cols": [ { "key": 47005, - "id": "table-column-12332", + "id": "table-cell-12332", "category": "container", - "type": "el-table-column", + "type": "table-cell", "displayName": "子单元格", "icon": "Monitor", + "merged": false, + "widgetList": [ + { + "key": 47016, + "id": "input-12355", + "category": "formItem", + "type": "el-input", + "displayName": "输入框", + "icon": "Folder", + "options": { + "name": "input-12355", + "keyNameEnabled": false, + "keyName": "", + "label": "名称", + "labelAlign": "", + "type": "text", + "defaultValue": "", + "hidden": false, + "customClass": "", + "placeholder": "请输入名称" + } + } + ], "rows": [], "options": { - "name": "table-column-12332", + "name": "table-cell-12332", "cellWidth": "", "cellHeight": "", "colspan": 1, @@ -28,26 +51,27 @@ }, { "key": 47015, - "id": "table-column-12344", + "id": "table-cell-12344", "category": "container", - "type": "el-table-column", + "type": "table-cell", "displayName": "子单元格", "icon": "Monitor", + "merged": false, "widgetList": [ { "key": 47016, - "id": "input-12355", + "id": "input-12366", "category": "formItem", - "type": "el-input", + "type": "el-input-number", "displayName": "输入框", "icon": "Folder", "options": { - "name": "input-12355", + "name": "input-12366", "keyNameEnabled": false, "keyName": "", - "label": "input", + "label": "年龄", "labelAlign": "", - "type": "text", + "type": "number", "defaultValue": "", "hidden": false, "customClass": "" @@ -56,7 +80,7 @@ ], "rows": [], "options": { - "name": "table-column-12344", + "name": "table-cell-12344", "cellWidth": "", "cellHeight": "", "colspan": 1, @@ -66,6 +90,80 @@ } } ] + }, + { + "cols": [ + { + "key": 47015, + "id": "table-cell-12344", + "category": "container", + "type": "table-cell", + "displayName": "子单元格", + "icon": "Monitor", + "merged": false, + "widgetList": [ + { + "key": 47016, + "id": "radio-12377", + "category": "formItem", + "type": "el-radio", + "displayName": "单选框", + "icon": "Folder", + "options": { + "name": "input-12377", + "keyNameEnabled": false, + "keyName": "", + "label": "性别", + "labelAlign": "", + "type": "text", + "defaultValue": "1", + "hidden": false, + "customClass": "", + "optionItems": [ + { + "label": "男", + "value": "1" + }, + { + "label": "女", + "value": 2 + } + ] + } + } + ], + "rows": [], + "options": { + "name": "table-cell-12344", + "cellWidth": "", + "cellHeight": "", + "colspan": 2, + "rowspan": 1, + "wordBreak": false, + "customClass": "" + } + }, + { + "key": 47018, + "id": "table-cell-12399", + "category": "container", + "type": "table-cell", + "displayName": "子单元格", + "icon": "Monitor", + "merged": true, + "widgetList": [], + "rows": [], + "options": { + "name": "table-cell-12399", + "cellWidth": "", + "cellHeight": "", + "colspan": 2, + "rowspan": 1, + "wordBreak": false, + "customClass": "" + } + } + ] } ], "options": { diff --git a/src/utils/widgetsConfig.ts b/src/utils/widgetsConfig.ts index d322217..4155ece 100644 --- a/src/utils/widgetsConfig.ts +++ b/src/utils/widgetsConfig.ts @@ -6,11 +6,9 @@ export const containers: IWidget[] = [ type: 'el-table', displayName: '表格', icon: 'Monitor', - rows: [], options: { name: '', hidden: false, - customClass: '', } }, { @@ -18,11 +16,9 @@ export const containers: IWidget[] = [ type: 'el-table-column', displayName: '子单元格', icon: 'Monitor', - rows: [], options: { name: '', hidden: false, - customClass: '', } } ] @@ -37,7 +33,16 @@ export const basicFields: IWidget[] = [ options: { name: '', hidden: false, - customClass: '', + }, + }, + { + category: 'formItem', + type: 'el-input-number', + displayName: '数值输入框', + icon: 'Folder', + options: { + name: '', + hidden: false, }, }, { @@ -48,7 +53,6 @@ export const basicFields: IWidget[] = [ options: { name: '', hidden: false, - customClass: '', }, }, ] diff --git a/src/views/Home/subCom/LeftSide.vue b/src/views/Home/subCom/LeftSide.vue index 8504ae6..a445d28 100644 --- a/src/views/Home/subCom/LeftSide.vue +++ b/src/views/Home/subCom/LeftSide.vue @@ -37,8 +37,7 @@ const widgetJson = inject('widgetJson')