From 57bcaecc90a707b739c6b2cc341810a278c55397 Mon Sep 17 00:00:00 2001 From: cxc Date: Thu, 15 Dec 2022 17:30:55 +0800 Subject: [PATCH] right panel --- jsconfig.json | 10 + public/preview.html | 95 +++ src/assets/styles/mixin.scss | 46 +- src/utils/generator/config.js | 4 +- src/utils/generator/html.js | 556 ++++++++++-------- src/utils/generator/js.js | 327 ++++++---- src/utils/generator/render.jsx | 246 ++++---- src/utils/generator/slots/el-button.jsx | 8 +- .../generator/slots/el-checkbox-group.jsx | 28 +- src/utils/generator/slots/el-input.jsx | 12 +- src/utils/generator/slots/el-radio-group.jsx | 26 +- src/utils/generator/slots/el-select.jsx | 2 +- src/utils/generator/slots/el-upload.jsx | 29 +- src/utils/loadBeautifier.js | 1 - src/views/tool/build/CodeTypeDialog.vue | 163 +++-- src/views/tool/build/DraggableItem.jsx | 74 ++- src/views/tool/build/FormDrawer.vue | 394 ++++++------- src/views/tool/build/JsonDrawer.vue | 3 +- src/views/tool/build/ResourceDialog.vue | 65 +- src/views/tool/build/RightPanel.vue | 149 ++--- src/views/tool/build/TreeNodeDialog.vue | 15 +- src/views/tool/build/index.vue | 301 ++++------ vite/plugins/index.js | 1 + 23 files changed, 1425 insertions(+), 1130 deletions(-) create mode 100644 jsconfig.json create mode 100644 public/preview.html diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..0b68bcb --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + // ... + "types": ["element-plus/global"], + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/public/preview.html b/public/preview.html new file mode 100644 index 0000000..abd94c0 --- /dev/null +++ b/public/preview.html @@ -0,0 +1,95 @@ + + + + + + + + + form-generator-preview + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 64d9cf6..791c743 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -44,23 +44,51 @@ border-bottom: $color-border-style; border-left: $transparent-border-style; border-right: $transparent-border-style; - } - - @else if $direction==right { + } @else if $direction==right { border-left: $color-border-style; border-top: $transparent-border-style; border-bottom: $transparent-border-style; - } - - @else if $direction==down { + } @else if $direction==down { border-top: $color-border-style; border-left: $transparent-border-style; border-right: $transparent-border-style; - } - - @else if $direction==left { + } @else if $direction==left { border-right: $color-border-style; border-top: $transparent-border-style; border-bottom: $transparent-border-style; } } + +@mixin action-bar { + .action-bar { + height: 33px; + background: #f2fafb; + padding: 0 15px; + box-sizing: border-box; + + .bar-btn { + display: inline-block; + padding: 0 6px; + line-height: 32px; + color: #8285f5; + cursor: pointer; + font-size: 14px; + user-select: none; + & i { + font-size: 20px; + } + &:hover { + color: #4348d4; + } + } + .bar-btn + .bar-btn { + margin-left: 8px; + } + .delete-btn { + color: #f56c6c; + &:hover { + color: #ea0b30; + } + } + } +} diff --git a/src/utils/generator/config.js b/src/utils/generator/config.js index 4599d62..84d34fe 100644 --- a/src/utils/generator/config.js +++ b/src/utils/generator/config.js @@ -290,10 +290,12 @@ export const selectComponents = [ { label: "选项一", value: 1, + disabled: false, }, { label: "选项二", value: 2, + disabled: false, }, ], }, @@ -554,7 +556,7 @@ export const layoutComponents = [ default: "主要按钮", }, type: "primary", - icon: "el-icon-search", + icon: "search", round: false, size: "default", plain: false, diff --git a/src/utils/generator/html.js b/src/utils/generator/html.js index 44f6815..ef58294 100644 --- a/src/utils/generator/html.js +++ b/src/utils/generator/html.js @@ -1,8 +1,8 @@ /* eslint-disable max-len */ -import ruleTrigger from './ruleTrigger' +import ruleTrigger from "./ruleTrigger"; -let confGlobal -let someSpanIsNot24 +let confGlobal; +let someSpanIsNot24; export function dialogWrapper(str) { return ` @@ -11,7 +11,7 @@ export function dialogWrapper(str) { 取消 确定 - ` + `; } export function vueTemplate(str) { @@ -19,53 +19,57 @@ export function vueTemplate(str) {
${str}
- ` + `; } -export function vueScript(str) { - return `` + `; } export function cssStyle(cssStr) { return `` + `; } function buildFormTemplate(scheme, child, type) { - let labelPosition = '' - if (scheme.labelPosition !== 'right') { - labelPosition = `label-position="${scheme.labelPosition}"` + let labelPosition = ""; + if (scheme.labelPosition !== "right") { + labelPosition = `label-position="${scheme.labelPosition}"`; } - const disabled = scheme.disabled ? `:disabled="${scheme.disabled}"` : '' - let str = ` + const disabled = scheme.disabled ? `:disabled="${scheme.disabled}"` : ""; + let str = ` ${child} ${buildFromBtns(scheme, type)} - ` + `; if (someSpanIsNot24) { str = ` ${str} - ` + `; } - return str + return str; } function buildFromBtns(scheme, type) { - let str = '' - if (scheme.formBtns && type === 'file') { + let str = ""; + if (scheme.formBtns && type === "file") { str = ` 提交 重置 - ` + `; if (someSpanIsNot24) { str = ` ${str} - ` + `; } } - return str + return str; } // span不为24的用el-col包裹 @@ -73,304 +77,360 @@ function colWrapper(scheme, str) { if (someSpanIsNot24 || scheme.__config__.span !== 24) { return ` ${str} - ` + `; } - return str + return str; } const layouts = { colFormItem(scheme) { - const config = scheme.__config__ - let labelWidth = '' - let label = `label="${config.label}"` + const config = scheme.__config__; + let labelWidth = ""; + let label = `label="${config.label}"`; if (config.labelWidth && config.labelWidth !== confGlobal.labelWidth) { - labelWidth = `label-width="${config.labelWidth}px"` + labelWidth = `label-width="${config.labelWidth}px"`; } if (config.showLabel === false) { - labelWidth = 'label-width="0"' - label = '' + labelWidth = 'label-width="0"'; + label = ""; } - const required = !ruleTrigger[config.tag] && config.required ? 'required' : '' - const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null + const required = + !ruleTrigger[config.tag] && config.required ? "required" : ""; + const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null; let str = ` ${tagDom} - ` - str = colWrapper(scheme, str) - return str + `; + str = colWrapper(scheme, str); + return str; }, rowFormItem(scheme) { - const config = scheme.__config__ - const type = scheme.type === 'default' ? '' : `type="${scheme.type}"` - const justify = scheme.type === 'default' ? '' : `justify="${scheme.justify}"` - const align = scheme.type === 'default' ? '' : `align="${scheme.align}"` - const gutter = scheme.gutter ? `:gutter="${scheme.gutter}"` : '' - const children = config.children.map(el => layouts[el.__config__.layout](el)) + const config = scheme.__config__; + const type = scheme.type === "default" ? "" : `type="${scheme.type}"`; + const justify = + scheme.type === "default" ? "" : `justify="${scheme.justify}"`; + const align = scheme.type === "default" ? "" : `align="${scheme.align}"`; + const gutter = scheme.gutter ? `:gutter="${scheme.gutter}"` : ""; + const children = config.children.map((el) => + layouts[el.__config__.layout](el) + ); let str = ` - ${children.join('\n')} - ` - str = colWrapper(scheme, str) - return str - } -} + ${children.join("\n")} + `; + str = colWrapper(scheme, str); + return str; + }, +}; const tags = { - 'el-button': el => { - const { - tag, disabled - } = attrBuilder(el) - const type = el.type ? `type="${el.type}"` : '' - const icon = el.icon ? `icon="${el.icon}"` : '' - const round = el.round ? 'round' : '' - const size = el.size ? `size="${el.size}"` : '' - const plain = el.plain ? 'plain' : '' - const circle = el.circle ? 'circle' : '' - let child = buildElButtonChild(el) + "el-button": (el) => { + const { tag, disabled } = attrBuilder(el); + const type = el.type ? `type="${el.type}"` : ""; + const icon = el.icon ? `icon="${el.icon}"` : ""; + const round = el.round ? "round" : ""; + const size = el.size ? `size="${el.size}"` : ""; + const plain = el.plain ? "plain" : ""; + const circle = el.circle ? "circle" : ""; + let child = buildElButtonChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${type} ${icon} ${round} ${size} ${plain} ${disabled} ${circle}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${type} ${icon} ${round} ${size} ${plain} ${disabled} ${circle}>${child}`; }, - 'el-input': el => { - const { - tag, disabled, vModel, clearable, placeholder, width - } = attrBuilder(el) - const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : '' - const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : '' - const readonly = el.readonly ? 'readonly' : '' - const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : '' - const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : '' - const showPassword = el['show-password'] ? 'show-password' : '' - const type = el.type ? `type="${el.type}"` : '' - const autosize = el.autosize && el.autosize.minRows - ? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"` - : '' - let child = buildElInputChild(el) + "el-input": (el) => { + const { tag, disabled, vModel, clearable, placeholder, width } = + attrBuilder(el); + const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : ""; + const showWordLimit = el["show-word-limit"] ? "show-word-limit" : ""; + const readonly = el.readonly ? "readonly" : ""; + const prefixIcon = el["prefix-icon"] + ? `prefix-icon='${el["prefix-icon"]}'` + : ""; + const suffixIcon = el["suffix-icon"] + ? `suffix-icon='${el["suffix-icon"]}'` + : ""; + const showPassword = el["show-password"] ? "show-password" : ""; + const type = el.type ? `type="${el.type}"` : ""; + const autosize = + el.autosize && el.autosize.minRows + ? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"` + : ""; + let child = buildElInputChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}`; }, - 'el-input-number': el => { - const { - tag, disabled, vModel, placeholder - } = attrBuilder(el) - const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : '' - const min = el.min ? `:min='${el.min}'` : '' - const max = el.max ? `:max='${el.max}'` : '' - const step = el.step ? `:step='${el.step}'` : '' - const stepStrictly = el['step-strictly'] ? 'step-strictly' : '' - const precision = el.precision ? `:precision='${el.precision}'` : '' + "el-input-number": (el) => { + const { tag, disabled, vModel, placeholder } = attrBuilder(el); + const controlsPosition = el["controls-position"] + ? `controls-position=${el["controls-position"]}` + : ""; + const min = el.min ? `:min='${el.min}'` : ""; + const max = el.max ? `:max='${el.max}'` : ""; + const step = el.step ? `:step='${el.step}'` : ""; + const stepStrictly = el["step-strictly"] ? "step-strictly" : ""; + const precision = el.precision ? `:precision='${el.precision}'` : ""; - return `<${tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}>` + return `<${tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}>`; }, - 'el-select': el => { - const { - tag, disabled, vModel, clearable, placeholder, width - } = attrBuilder(el) - const filterable = el.filterable ? 'filterable' : '' - const multiple = el.multiple ? 'multiple' : '' - let child = buildElSelectChild(el) + "el-select": (el) => { + const { tag, disabled, vModel, clearable, placeholder, width } = + attrBuilder(el); + const filterable = el.filterable ? "filterable" : ""; + const multiple = el.multiple ? "multiple" : ""; + let child = buildElSelectChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}`; }, - 'el-radio-group': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const size = `size="${el.size}"` - let child = buildElRadioGroupChild(el) + "el-radio-group": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const size = `size="${el.size}"`; + let child = buildElRadioGroupChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${vModel} ${size} ${disabled}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${vModel} ${size} ${disabled}>${child}`; }, - 'el-checkbox-group': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const size = `size="${el.size}"` - const min = el.min ? `:min="${el.min}"` : '' - const max = el.max ? `:max="${el.max}"` : '' - let child = buildElCheckboxGroupChild(el) + "el-checkbox-group": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const size = `size="${el.size}"`; + const min = el.min ? `:min="${el.min}"` : ""; + const max = el.max ? `:max="${el.max}"` : ""; + let child = buildElCheckboxGroupChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}`; }, - 'el-switch': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : '' - const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : '' - const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : '' - const inactiveColor = el['inactive-color'] ? `inactive-color="${el['inactive-color']}"` : '' - const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : '' - const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : '' + "el-switch": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const activeText = el["active-text"] + ? `active-text="${el["active-text"]}"` + : ""; + const inactiveText = el["inactive-text"] + ? `inactive-text="${el["inactive-text"]}"` + : ""; + const activeColor = el["active-color"] + ? `active-color="${el["active-color"]}"` + : ""; + const inactiveColor = el["inactive-color"] + ? `inactive-color="${el["inactive-color"]}"` + : ""; + const activeValue = + el["active-value"] !== true + ? `:active-value='${JSON.stringify(el["active-value"])}'` + : ""; + const inactiveValue = + el["inactive-value"] !== false + ? `:inactive-value='${JSON.stringify(el["inactive-value"])}'` + : ""; - return `<${tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}>` + return `<${tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}>`; }, - 'el-cascader': el => { - const { - tag, disabled, vModel, clearable, placeholder, width - } = attrBuilder(el) - const options = el.options ? `:options="${el.__vModel__}Options"` : '' - const props = el.props ? `:props="${el.__vModel__}Props"` : '' - const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"' - const filterable = el.filterable ? 'filterable' : '' - const separator = el.separator === '/' ? '' : `separator="${el.separator}"` + "el-cascader": (el) => { + const { tag, disabled, vModel, clearable, placeholder, width } = + attrBuilder(el); + const options = el.options ? `:options="${el.__vModel__}Options"` : ""; + const props = el.props ? `:props="${el.__vModel__}Props"` : ""; + const showAllLevels = el["show-all-levels"] + ? "" + : ':show-all-levels="false"'; + const filterable = el.filterable ? "filterable" : ""; + const separator = el.separator === "/" ? "" : `separator="${el.separator}"`; - return `<${tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}>` + return `<${tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}>`; }, - 'el-slider': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const min = el.min ? `:min='${el.min}'` : '' - const max = el.max ? `:max='${el.max}'` : '' - const step = el.step ? `:step='${el.step}'` : '' - const range = el.range ? 'range' : '' - const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : '' + "el-slider": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const min = el.min ? `:min='${el.min}'` : ""; + const max = el.max ? `:max='${el.max}'` : ""; + const step = el.step ? `:step='${el.step}'` : ""; + const range = el.range ? "range" : ""; + const showStops = el["show-stops"] + ? `:show-stops="${el["show-stops"]}"` + : ""; - return `<${tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}>` + return `<${tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}>`; }, - 'el-time-picker': el => { - const { - tag, disabled, vModel, clearable, placeholder, width - } = attrBuilder(el) - const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : '' - const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : '' - const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : '' - const isRange = el['is-range'] ? 'is-range' : '' - const format = el.format ? `format="${el.format}"` : '' - const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : '' - const pickerOptions = el['picker-options'] ? `:picker-options='${JSON.stringify(el['picker-options'])}'` : '' + "el-time-picker": (el) => { + const { tag, disabled, vModel, clearable, placeholder, width } = + attrBuilder(el); + const startPlaceholder = el["start-placeholder"] + ? `start-placeholder="${el["start-placeholder"]}"` + : ""; + const endPlaceholder = el["end-placeholder"] + ? `end-placeholder="${el["end-placeholder"]}"` + : ""; + const rangeSeparator = el["range-separator"] + ? `range-separator="${el["range-separator"]}"` + : ""; + const isRange = el["is-range"] ? "is-range" : ""; + const format = el.format ? `format="${el.format}"` : ""; + const valueFormat = el["value-format"] + ? `value-format="${el["value-format"]}"` + : ""; + const pickerOptions = el["picker-options"] + ? `:picker-options='${JSON.stringify(el["picker-options"])}'` + : ""; - return `<${tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}>` + return `<${tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}>`; }, - 'el-date-picker': el => { - const { - tag, disabled, vModel, clearable, placeholder, width - } = attrBuilder(el) - const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : '' - const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : '' - const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : '' - const format = el.format ? `format="${el.format}"` : '' - const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : '' - const type = el.type === 'date' ? '' : `type="${el.type}"` - const readonly = el.readonly ? 'readonly' : '' + "el-date-picker": (el) => { + const { tag, disabled, vModel, clearable, placeholder, width } = + attrBuilder(el); + const startPlaceholder = el["start-placeholder"] + ? `start-placeholder="${el["start-placeholder"]}"` + : ""; + const endPlaceholder = el["end-placeholder"] + ? `end-placeholder="${el["end-placeholder"]}"` + : ""; + const rangeSeparator = el["range-separator"] + ? `range-separator="${el["range-separator"]}"` + : ""; + const format = el.format ? `format="${el.format}"` : ""; + const valueFormat = el["value-format"] + ? `value-format="${el["value-format"]}"` + : ""; + const type = el.type === "date" ? "" : `type="${el.type}"`; + const readonly = el.readonly ? "readonly" : ""; - return `<${tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}>` + return `<${tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}>`; }, - 'el-rate': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const max = el.max ? `:max='${el.max}'` : '' - const allowHalf = el['allow-half'] ? 'allow-half' : '' - const showText = el['show-text'] ? 'show-text' : '' - const showScore = el['show-score'] ? 'show-score' : '' + "el-rate": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const max = el.max ? `:max='${el.max}'` : ""; + const allowHalf = el["allow-half"] ? "allow-half" : ""; + const showText = el["show-text"] ? "show-text" : ""; + const showScore = el["show-score"] ? "show-score" : ""; - return `<${tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}>` + return `<${tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}>`; }, - 'el-color-picker': el => { - const { tag, disabled, vModel } = attrBuilder(el) - const size = `size="${el.size}"` - const showAlpha = el['show-alpha'] ? 'show-alpha' : '' - const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : '' + "el-color-picker": (el) => { + const { tag, disabled, vModel } = attrBuilder(el); + const size = `size="${el.size}"`; + const showAlpha = el["show-alpha"] ? "show-alpha" : ""; + const colorFormat = el["color-format"] + ? `color-format="${el["color-format"]}"` + : ""; - return `<${tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}>` + return `<${tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}>`; }, - 'el-upload': el => { - const { tag } = el.__config__ - const disabled = el.disabled ? ':disabled=\'true\'' : '' - const action = el.action ? `:action="${el.__vModel__}Action"` : '' - const multiple = el.multiple ? 'multiple' : '' - const listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : '' - const accept = el.accept ? `accept="${el.accept}"` : '' - const name = el.name !== 'file' ? `name="${el.name}"` : '' - const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : '' - const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"` - const fileList = `:file-list="${el.__vModel__}fileList"` - const ref = `ref="${el.__vModel__}"` - let child = buildElUploadChild(el) + "el-upload": (el) => { + const { tag } = el.__config__; + const disabled = el.disabled ? ":disabled='true'" : ""; + const action = el.action ? `:action="${el.__vModel__}Action"` : ""; + const multiple = el.multiple ? "multiple" : ""; + const listType = + el["list-type"] !== "text" ? `list-type="${el["list-type"]}"` : ""; + const accept = el.accept ? `accept="${el.accept}"` : ""; + const name = el.name !== "file" ? `name="${el.name}"` : ""; + const autoUpload = + el["auto-upload"] === false ? ':auto-upload="false"' : ""; + const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"`; + const fileList = `:file-list="${el.__vModel__}fileList"`; + const ref = `ref="${el.__vModel__}"`; + let child = buildElUploadChild(el); - if (child) child = `\n${child}\n` // 换行 - return `<${tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}` + if (child) child = `\n${child}\n`; // 换行 + return `<${tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}`; }, - tinymce: el => { - const { tag, vModel, placeholder } = attrBuilder(el) - const height = el.height ? `:height="${el.height}"` : '' - const branding = el.branding ? `:branding="${el.branding}"` : '' - return `<${tag} ${vModel} ${placeholder} ${height} ${branding}>` - } -} + tinymce: (el) => { + const { tag, vModel, placeholder } = attrBuilder(el); + const height = el.height ? `:height="${el.height}"` : ""; + const branding = el.branding ? `:branding="${el.branding}"` : ""; + return `<${tag} ${vModel} ${placeholder} ${height} ${branding}>`; + }, +}; function attrBuilder(el) { return { tag: el.__config__.tag, vModel: `v-model="${confGlobal.formModel}.${el.__vModel__}"`, - clearable: el.clearable ? 'clearable' : '', - placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '', - width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '', - disabled: el.disabled ? ':disabled=\'true\'' : '' - } + clearable: el.clearable ? "clearable" : "", + placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : "", + width: el.style && el.style.width ? ":style=\"{width: '100%'}\"" : "", + disabled: el.disabled ? ":disabled='true'" : "", + }; } // el-buttin 子级 function buildElButtonChild(scheme) { - const children = [] - const slot = scheme.__slot__ || {} + const children = []; + const slot = scheme.__slot__ || {}; if (slot.default) { - children.push(slot.default) + children.push(slot.default); } - return children.join('\n') + return children.join("\n"); } // el-input 子级 function buildElInputChild(scheme) { - const children = [] - const slot = scheme.__slot__ + const children = []; + const slot = scheme.__slot__; if (slot && slot.prepend) { - children.push(``) + children.push(``); } if (slot && slot.append) { - children.push(``) + children.push(``); } - return children.join('\n') + return children.join("\n"); } // el-select 子级 function buildElSelectChild(scheme) { - const children = [] - const slot = scheme.__slot__ + const children = []; + const slot = scheme.__slot__; if (slot && slot.options && slot.options.length) { - children.push(``) + children.push( + `` + ); } - return children.join('\n') + return children.join("\n"); } // el-radio-group 子级 function buildElRadioGroupChild(scheme) { - const children = [] - const slot = scheme.__slot__ - const config = scheme.__config__ + const children = []; + const slot = scheme.__slot__; + const config = scheme.__config__; if (slot && slot.options && slot.options.length) { - const tag = config.optionType === 'button' ? 'el-radio-button' : 'el-radio' - const border = config.border ? 'border' : '' - children.push(`<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}`) + const tag = config.optionType === "button" ? "el-radio-button" : "el-radio"; + const border = config.border ? "border" : ""; + children.push( + `<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}` + ); } - return children.join('\n') + return children.join("\n"); } // el-checkbox-group 子级 function buildElCheckboxGroupChild(scheme) { - const children = [] - const slot = scheme.__slot__ - const config = scheme.__config__ + const children = []; + const slot = scheme.__slot__; + const config = scheme.__config__; if (slot && slot.options && slot.options.length) { - const tag = config.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox' - const border = config.border ? 'border' : '' - children.push(`<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}`) + const tag = + config.optionType === "button" ? "el-checkbox-button" : "el-checkbox"; + const border = config.border ? "border" : ""; + children.push( + `<${tag} v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}` + ); } - return children.join('\n') + return children.join("\n"); } // el-upload 子级 function buildElUploadChild(scheme) { - const list = [] - const config = scheme.__config__ - if (scheme['list-type'] === 'picture-card') list.push('') - else list.push(`${config.buttonText}`) - if (config.showTip) list.push(`
只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${scheme.accept}文件
`) - return list.join('\n') + const list = []; + const config = scheme.__config__; + if (scheme["list-type"] === "picture-card") + list.push(''); + else + list.push( + `${config.buttonText}` + ); + if (config.showTip) + list.push( + `
只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${scheme.accept}文件
` + ); + return list.join("\n"); } /** @@ -379,21 +439,23 @@ function buildElUploadChild(scheme) { * @param {String} type 生成类型，文件或弹窗等 */ export function makeUpHtml(formConfig, type) { - const htmlList = [] - confGlobal = formConfig + const htmlList = []; + confGlobal = formConfig; // 判断布局是否都沾满了24个栅格，以备后续简化代码结构 - someSpanIsNot24 = formConfig.fields.some(item => item.__config__.span !== 24) + someSpanIsNot24 = formConfig.fields.some( + (item) => item.__config__.span !== 24 + ); // 遍历渲染每个组件成html - formConfig.fields.forEach(el => { - htmlList.push(layouts[el.__config__.layout](el)) - }) - const htmlStr = htmlList.join('\n') + formConfig.fields.forEach((el) => { + htmlList.push(layouts[el.__config__.layout](el)); + }); + const htmlStr = htmlList.join("\n"); // 将组件代码放进form标签 - let temp = buildFormTemplate(formConfig, htmlStr, type) + let temp = buildFormTemplate(formConfig, htmlStr, type); // dialog标签包裹代码 - if (type === 'dialog') { - temp = dialogWrapper(temp) + if (type === "dialog") { + temp = dialogWrapper(temp); } - confGlobal = null - return temp + confGlobal = null; + return temp; } diff --git a/src/utils/generator/js.js b/src/utils/generator/js.js index c4b2a57..6f60930 100644 --- a/src/utils/generator/js.js +++ b/src/utils/generator/js.js @@ -1,17 +1,17 @@ -import { isArray } from 'util' -import { exportDefault, titleCase, deepClone } from '@/utils/index' -import ruleTrigger from './ruleTrigger' +// import { Array.isArray } from 'util' +import { exportDefault, titleCase, deepClone } from "@/utils/index"; +import ruleTrigger from "./ruleTrigger"; const units = { - KB: '1024', - MB: '1024 / 1024', - GB: '1024 / 1024 / 1024' -} -let confGlobal + KB: "1024", + MB: "1024 / 1024", + GB: "1024 / 1024 / 1024", +}; +let confGlobal; const inheritAttrs = { - file: '', - dialog: 'inheritAttrs: false,' -} + file: "", + dialog: "inheritAttrs: false,", +}; /** * 组装js 【入口函数】 @@ -19,212 +19,263 @@ const inheritAttrs = { * @param {String} type 生成类型，文件或弹窗等 */ export function makeUpJs(formConfig, type) { - confGlobal = formConfig = deepClone(formConfig) - const dataList = [] - const ruleList = [] - const optionsList = [] - const propsList = [] - const methodList = mixinMethod(type) - const uploadVarList = [] - const created = [] - - formConfig.fields.forEach(el => { - buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created) - }) + confGlobal = formConfig = deepClone(formConfig); + const dataList = []; + const ruleList = []; + const optionsList = []; + const propsList = []; + const methodList = mixinMethod(type); + const uploadVarList = []; + const created = []; + formConfig.fields.forEach((el) => { + buildAttributes( + el, + dataList, + ruleList, + optionsList, + methodList, + propsList, + uploadVarList, + created + ); + }); + console.log( + dataList, + ruleList, + optionsList, + methodList, + propsList, + uploadVarList, + created + ); const script = buildexport( formConfig, type, - dataList.join('\n'), - ruleList.join('\n'), - optionsList.join('\n'), - uploadVarList.join('\n'), - propsList.join('\n'), - methodList.join('\n'), - created.join('\n') - ) - confGlobal = null - return script + dataList.join("\n"), + ruleList.join("\n"), + optionsList.join("\n"), + uploadVarList.join("\n"), + propsList.join("\n"), + methodList.join("\n"), + created.join("\n") + ); + confGlobal = null; + return script; } // 构建组件属性 -function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created) { - const config = scheme.__config__ - const slot = scheme.__slot__ - buildData(scheme, dataList) - buildRules(scheme, ruleList) +function buildAttributes( + scheme, + dataList, + ruleList, + optionsList, + methodList, + propsList, + uploadVarList, + created +) { + const config = scheme.__config__; + const slot = scheme.__slot__; + buildData(scheme, dataList); + buildRules(scheme, ruleList); // 特殊处理options属性 if (scheme.options || (slot && slot.options && slot.options.length)) { - buildOptions(scheme, optionsList) - if (config.dataType === 'dynamic') { - const model = `${scheme.__vModel__}Options` - const options = titleCase(model) - const methodName = `get${options}` - buildOptionMethod(methodName, model, methodList, scheme) - callInCreated(methodName, created) + buildOptions(scheme, optionsList); + if (config.dataType === "dynamic") { + const model = `${scheme.__vModel__}Options`; + const options = titleCase(model); + const methodName = `get${options}`; + buildOptionMethod(methodName, model, methodList, scheme); + callInCreated(methodName, created); } } // 处理props if (scheme.props && scheme.props.props) { - buildProps(scheme, propsList) + buildProps(scheme, propsList); } // 处理el-upload的action - if (scheme.action && config.tag === 'el-upload') { + if (scheme.action && config.tag === "el-upload") { uploadVarList.push( `${scheme.__vModel__}Action: '${scheme.action}', ${scheme.__vModel__}fileList: [],` - ) - methodList.push(buildBeforeUpload(scheme)) + ); + methodList.push(buildBeforeUpload(scheme)); // 非自动上传时，生成手动上传的函数 - if (!scheme['auto-upload']) { - methodList.push(buildSubmitUpload(scheme)) + if (!scheme["auto-upload"]) { + methodList.push(buildSubmitUpload(scheme)); } } // 构建子级组件属性 if (config.children) { - config.children.forEach(item => { - buildAttributes(item, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created) - }) + config.children.forEach((item) => { + buildAttributes( + item, + dataList, + ruleList, + optionsList, + methodList, + propsList, + uploadVarList, + created + ); + }); } } // 在Created调用函数 function callInCreated(methodName, created) { - created.push(`this.${methodName}()`) + created.push(`this.${methodName}()`); } // 混入处理函数 function mixinMethod(type) { - const list = []; const - minxins = { - file: confGlobal.formBtns ? { - submitForm: `submitForm() { - this.$refs['${confGlobal.formRef}'].validate(valid => { + const list = []; + const minxins = { + file: confGlobal.formBtns + ? { + submitForm: `const submitForm = () => { + ${confGlobal.formRef}.value.validate(valid => { if(!valid) return // TODO 提交表单 }) + }`, + resetForm: `const resetForm = () => { + ${confGlobal.formRef}.value.resetFields() + }`, + } + : null, + dialog: { + onOpen: "const onOpen = () => {},", + onClose: `const onClose = () => { + ${confGlobal.formRef}.value.resetFields() },`, - resetForm: `resetForm() { - this.$refs['${confGlobal.formRef}'].resetFields() - },` - } : null, - dialog: { - onOpen: 'onOpen() {},', - onClose: `onClose() { - this.$refs['${confGlobal.formRef}'].resetFields() - },`, - close: `close() { + close: `const close = () => { this.$emit('update:visible', false) },`, - handelConfirm: `handelConfirm() { - this.$refs['${confGlobal.formRef}'].validate(valid => { + handelConfirm: `const handelConfirm = () => { + ${confGlobal.formRef}.value.validate(valid => { if(!valid) return this.close() }) - },` - } - } + },`, + }, + }; - const methods = minxins[type] + const methods = minxins[type]; if (methods) { - Object.keys(methods).forEach(key => { - list.push(methods[key]) - }) + Object.keys(methods).forEach((key) => { + list.push(methods[key]); + }); } - return list + return list; } // 构建data function buildData(scheme, dataList) { - const config = scheme.__config__ - if (scheme.__vModel__ === undefined) return - const defaultValue = JSON.stringify(config.defaultValue) - dataList.push(`${scheme.__vModel__}: ${defaultValue},`) + const config = scheme.__config__; + if (scheme.__vModel__ === undefined) return; + const defaultValue = JSON.stringify(config.defaultValue); + dataList.push(`${scheme.__vModel__}: ${defaultValue},`); } // 构建校验规则 function buildRules(scheme, ruleList) { - const config = scheme.__config__ - if (scheme.__vModel__ === undefined) return - const rules = [] + const config = scheme.__config__; + if (scheme.__vModel__ === undefined) return; + const rules = []; if (ruleTrigger[config.tag]) { if (config.required) { - const type = isArray(config.defaultValue) ? 'type: \'array\',' : '' - let message = isArray(config.defaultValue) ? `请至少选择一个${config.label}` : scheme.placeholder - if (message === undefined) message = `${config.label}不能为空` - rules.push(`{ required: true, ${type} message: '${message}', trigger: '${ruleTrigger[config.tag]}' }`) + const type = Array.isArray(config.defaultValue) ? "type: 'array'," : ""; + let message = Array.isArray(config.defaultValue) + ? `请至少选择一个${config.label}` + : scheme.placeholder; + if (message === undefined) message = `${config.label}不能为空`; + rules.push( + `{ required: true, ${type} message: '${message}', trigger: '${ + ruleTrigger[config.tag] + }' }` + ); } - if (config.regList && isArray(config.regList)) { - config.regList.forEach(item => { + if (config.regList && Array.isArray(config.regList)) { + config.regList.forEach((item) => { if (item.pattern) { rules.push( - `{ pattern: ${eval(item.pattern)}, message: '${item.message}', trigger: '${ruleTrigger[config.tag]}' }` - ) + `{ pattern: ${eval(item.pattern)}, message: '${ + item.message + }', trigger: '${ruleTrigger[config.tag]}' }` + ); } - }) + }); } - ruleList.push(`${scheme.__vModel__}: [${rules.join(',')}],`) + ruleList.push(`${scheme.__vModel__}: [${rules.join(",")}],`); } } // 构建options function buildOptions(scheme, optionsList) { - if (scheme.__vModel__ === undefined) return + if (scheme.__vModel__ === undefined) return; // el-cascader直接有options属性，其他组件都是定义在slot中，所以有两处判断 - let { options } = scheme - if (!options) options = scheme.__slot__.options - if (scheme.__config__.dataType === 'dynamic') { options = [] } - const str = `${scheme.__vModel__}Options: ${JSON.stringify(options)},` - optionsList.push(str) + let { options } = scheme; + if (!options) options = scheme.__slot__.options; + if (scheme.__config__.dataType === "dynamic") { + options = []; + } + const str = `${scheme.__vModel__}Options: ${JSON.stringify(options)},`; + optionsList.push(str); } function buildProps(scheme, propsList) { - const str = `${scheme.__vModel__}Props: ${JSON.stringify(scheme.props.props)},` - propsList.push(str) + const str = `${scheme.__vModel__}Props: ${JSON.stringify( + scheme.props.props + )},`; + propsList.push(str); } // el-upload的BeforeUpload function buildBeforeUpload(scheme) { - const config = scheme.__config__ - const unitNum = units[config.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const - returnList = [] + const config = scheme.__config__; + const unitNum = units[config.sizeUnit]; + let rightSizeCode = ""; + let acceptCode = ""; + const returnList = []; if (config.fileSize) { rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${config.fileSize} if(!isRightSize){ this.$message.error('文件大小超过 ${config.fileSize}${config.sizeUnit}') - }` - returnList.push('isRightSize') + }`; + returnList.push("isRightSize"); } if (scheme.accept) { acceptCode = `let isAccept = new RegExp('${scheme.accept}').test(file.type) if(!isAccept){ this.$message.error('应该选择${scheme.accept}类型的文件') - }` - returnList.push('isAccept') + }`; + returnList.push("isAccept"); } const str = `${scheme.__vModel__}BeforeUpload(file) { ${rightSizeCode} ${acceptCode} - return ${returnList.join('&&')} - },` - return returnList.length ? str : '' + return ${returnList.join("&&")} + },`; + return returnList.length ? str : ""; } // el-upload的submit function buildSubmitUpload(scheme) { const str = `submitUpload() { this.$refs['${scheme.__vModel__}'].submit() - },` - return str + },`; + return str; } function buildOptionMethod(methodName, model, methodList, scheme) { - const config = scheme.__config__ + const config = scheme.__config__; const str = `${methodName}() { // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的 this.$axios({ @@ -234,12 +285,42 @@ function buildOptionMethod(methodName, model, methodList, scheme) { var { data } = resp this.${model} = data.${config.dataKey} }) - },` - methodList.push(str) + },`; + methodList.push(str); } // js整体拼接 -function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods, created) { +function buildexport( + conf, + type, + data, + rules, + selectOptions, + uploadVar, + props, + methods, + created +) { + const newStr = ` +import { ref, reactive, toRefs } from "vue"; + +const data = reactive({ + ${conf.formModel}: { + ${data} + }, + ${conf.formRules}: { + ${rules} + }, +}) + +const { ${conf.formModel}, ${conf.formRules} } = toRefs(data); +const ${confGlobal.formRef} = ref(); +${methods} + +${created} +`; + return newStr; + const str = `${exportDefault}{ ${inheritAttrs[type]} components: {}, @@ -266,6 +347,6 @@ function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, m methods: { ${methods} } -}` - return str +}`; + return str; } diff --git a/src/utils/generator/render.jsx b/src/utils/generator/render.jsx index 4629a43..927ea45 100644 --- a/src/utils/generator/render.jsx +++ b/src/utils/generator/render.jsx @@ -1,33 +1,39 @@ import { deepClone } from "@/utils/index"; import { - ElButton, - ElColorPicker, - ElDatePicker, - ElInput, - ElInputNumber, - ElRate, ElRow, - ElSelect, + ElRate, + ElInput, ElSlider, + ElSelect, + ElButton, ElSwitch, - ElTimePicker, ElUpload, + ElCascader, + ElDatePicker, + ElTimePicker, + ElRadioGroup, + ElColorPicker, + ElInputNumber, + ElCheckboxGroup, } from "element-plus"; import { h, defineComponent } from "vue"; -// import "element-plus/es/components/input"; + const formComponentsMap = { + "el-row": ElRow, + "el-rate": ElRate, "el-input": ElInput, - "el-input-number": ElInputNumber, "el-switch": ElSwitch, "el-select": ElSelect, - "el-time-picker": ElTimePicker, - "el-color-picker": ElColorPicker, - "el-date-picker": ElDatePicker, - "el-button": ElButton, - "el-row": ElRow, - "el-slider": ElSlider, - "el-rate": ElRate, "el-upload": ElUpload, + "el-button": ElButton, + "el-slider": ElSlider, + "el-cascader": ElCascader, + "el-time-picker": ElTimePicker, + "el-radio-group": ElRadioGroup, + "el-date-picker": ElDatePicker, + "el-input-number": ElInputNumber, + "el-color-picker": ElColorPicker, + "el-checkbox-group": ElCheckboxGroup, }; const componentChild = {}; @@ -46,11 +52,7 @@ keys.forEach((key) => { function vModel(dataObject, defaultValue) { dataObject.props.value = defaultValue; - // dataObject.onInput = (val) => { - // this.$emit("input", val); - // }; dataObject.on.input = (val) => { - console.log(val, "input"); this.$emit("input", val); }; dataObject.on.change = (val) => { @@ -59,13 +61,13 @@ function vModel(dataObject, defaultValue) { }; } -function mountSlotFiles(h, confClone, children) { +function mountSlotFiles(confClone, children) { const childObjs = componentChild[confClone.__config__.tag]; if (childObjs) { Object.keys(childObjs).forEach((key) => { const childFunc = childObjs[key]; if (confClone.__slot__ && confClone.__slot__[key]) { - children.push(childFunc(h, confClone, key)); + children.push(childFunc(confClone, key)); } }); } @@ -172,105 +174,141 @@ export default defineComponent({ required: true, }, }, + data() { + return { + arr: [], + tempTime: "", + }; + }, emits: ["input"], + // setup(props, { slots, emit }) { + // const dataObject = makeDataObject(); + // const confClone = deepClone(props.conf); + // // const children = [this.$slots.default] || []; + // console.log(slots, "slots"); + // const children = []; + // // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码 + // mountSlotFiles(h, confClone, children); + + // // 将字符串类型的事件，发送为消息 + // emitEvents(emit, confClone); + // setTimeout(() => { + // emit("input", "4ww3243"); + // }, 3000); + // // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）” + // const update = (val) => { + // console.log(val, "update"); + // emit("input", val); + // }; + // buildDataObject(update, confClone, dataObject); + + // const Tag = formComponentsMap[props.conf.__config__.tag]; + + // return () => ( + // + // {children} + // + // ); + // }, render() { const dataObject = makeDataObject(); - const confClone = deepClone(this.conf); - - // const children = [this.$slots.default] || []; + const confClone = deepClone(this.$props.conf); const children = []; // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码 - mountSlotFiles(h, confClone, children); - + mountSlotFiles(confClone, children); // 将字符串类型的事件，发送为消息 emitEvents.call(this, confClone); // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）” buildDataObject.call(this, confClone, dataObject); console.log(dataObject); - // return () => h("el-input", dataObject.attrs); - - const Tag = formComponentsMap[this.conf.__config__.tag]; + const Tag = formComponentsMap[this.$props.conf.__config__.tag]; return ( {children} ); - - return ( - <> - {tag == "el-input" ? ( - - {children} - - ) : tag == "el-input-number" ? ( - - {children} - - ) : tag == "el-slider" ? ( - - {children} - - ) : tag == "el-time-picker" ? ( - - ) : tag === "el-switch" ? ( - - ) : tag === "el-color-picker" ? ( - - ) : tag === "el-button" ? ( - - {children[1]} - - ) : tag === "el-select" ? ( - - {children} - - ) : tag === "el-date-picker" ? ( - - {children} - - ) : null} - - ); }, + // render() { + + // return ( + // <> + // {tag == "el-input" ? ( + // + // {children} + // + // ) : tag == "el-input-number" ? ( + // + // {children} + // + // ) : tag == "el-slider" ? ( + // + // {children} + // + // ) : tag == "el-time-picker" ? ( + // + // ) : tag === "el-switch" ? ( + // + // ) : tag === "el-color-picker" ? ( + // + // ) : tag === "el-button" ? ( + // + // {children[1]} + // + // ) : tag === "el-select" ? ( + // + // {children} + // + // ) : tag === "el-date-picker" ? ( + // + // {children} + // + // ) : null} + // + // ); + // }, }); diff --git a/src/utils/generator/slots/el-button.jsx b/src/utils/generator/slots/el-button.jsx index a2d9684..a96a3b5 100644 --- a/src/utils/generator/slots/el-button.jsx +++ b/src/utils/generator/slots/el-button.jsx @@ -1,5 +1,5 @@ export default { - default(h, conf, key) { - return conf.__slot__[key] - } -} + default(conf, key) { + return conf.__slot__[key]; + }, +}; diff --git a/src/utils/generator/slots/el-checkbox-group.jsx b/src/utils/generator/slots/el-checkbox-group.jsx index 0a85c8e..a58d5c6 100644 --- a/src/utils/generator/slots/el-checkbox-group.jsx +++ b/src/utils/generator/slots/el-checkbox-group.jsx @@ -1,13 +1,21 @@ export default { - options(h, conf, key) { - const list = [] - conf.__slot__.options.forEach(item => { - if (conf.__config__.optionType === 'button') { - list.push({item.label}) + options(conf, key) { + const list = []; + conf.__slot__.options.forEach((item) => { + if (conf.__config__.optionType === "button") { + list.push( + + {item.label} + + ); } else { - list.push({item.label}) + list.push( + + {item.label} + + ); } - }) - return list - } -} + }); + return list; + }, +}; diff --git a/src/utils/generator/slots/el-input.jsx b/src/utils/generator/slots/el-input.jsx index 8bd02db..2e24f20 100644 --- a/src/utils/generator/slots/el-input.jsx +++ b/src/utils/generator/slots/el-input.jsx @@ -1,8 +1,8 @@ export default { - prepend(h, conf, key) { - return + prepend(conf, key) { + return ; }, - append(h, conf, key) { - return - } -} + append(conf, key) { + return ; + }, +}; diff --git a/src/utils/generator/slots/el-radio-group.jsx b/src/utils/generator/slots/el-radio-group.jsx index c78506f..9a85c33 100644 --- a/src/utils/generator/slots/el-radio-group.jsx +++ b/src/utils/generator/slots/el-radio-group.jsx @@ -1,13 +1,19 @@ export default { - options(h, conf, key) { - const list = [] - conf.__slot__.options.forEach(item => { - if (conf.__config__.optionType === 'button') { - list.push({item.label}) + options(conf, key) { + const list = []; + conf.__slot__.options.forEach((item) => { + if (conf.__config__.optionType === "button") { + list.push( + {item.label} + ); } else { - list.push({item.label}) + list.push( + + {item.label} + + ); } - }) - return list - } -} + }); + return list; + }, +}; diff --git a/src/utils/generator/slots/el-select.jsx b/src/utils/generator/slots/el-select.jsx index 0ab5d9e..1d8011e 100644 --- a/src/utils/generator/slots/el-select.jsx +++ b/src/utils/generator/slots/el-select.jsx @@ -1,5 +1,5 @@ export default { - options(h, conf, key) { + options(conf, key) { const list = []; conf.__slot__.options.forEach((item) => { list.push( diff --git a/src/utils/generator/slots/el-upload.jsx b/src/utils/generator/slots/el-upload.jsx index 8ce3c35..1903d0c 100644 --- a/src/utils/generator/slots/el-upload.jsx +++ b/src/utils/generator/slots/el-upload.jsx @@ -1,17 +1,24 @@ export default { - 'list-type': (h, conf, key) => { - const list = [] - const config = conf.__config__ - if (conf['list-type'] === 'picture-card') { - list.push() + "list-type": (conf, key) => { + const list = []; + const config = conf.__config__; + if (conf["list-type"] === "picture-card") { + list.push(); } else { - list.push({config.buttonText}) + list.push( + + {config.buttonText} + + ); } if (config.showTip) { list.push( -
只能上传不超过 {config.fileSize}{config.sizeUnit} 的{conf.accept}文件
- ) +
+ 只能上传不超过 {config.fileSize} + {config.sizeUnit} 的{conf.accept}文件 +
+ ); } - return list - } -} + return list; + }, +}; diff --git a/src/utils/loadBeautifier.js b/src/utils/loadBeautifier.js index e4a094c..e5c3e3b 100644 --- a/src/utils/loadBeautifier.js +++ b/src/utils/loadBeautifier.js @@ -22,7 +22,6 @@ export default function loadBeautifier(cb) { loadScript(beautifierUrl, () => { loading.close(); // eslint-disable-next-line no-undef - console.log(beautifier); beautifierObj = beautifier; cb(beautifierObj); }); diff --git a/src/views/tool/build/CodeTypeDialog.vue b/src/views/tool/build/CodeTypeDialog.vue index b5c2e2e..a9cf0a4 100644 --- a/src/views/tool/build/CodeTypeDialog.vue +++ b/src/views/tool/build/CodeTypeDialog.vue @@ -5,16 +5,15 @@ width="500px" :close-on-click-modal="false" :modal-append-to-body="false" - v-on="$listeners" @open="onOpen" @close="onClose" > @@ -31,76 +30,116 @@ - + + +
- - 取消 - - - 确定 - + 取消 + 确定
+ + + diff --git a/src/views/tool/build/DraggableItem.jsx b/src/views/tool/build/DraggableItem.jsx index d20a242..de04822 100644 --- a/src/views/tool/build/DraggableItem.jsx +++ b/src/views/tool/build/DraggableItem.jsx @@ -37,13 +37,13 @@ const components = { const layouts = { colFormItem( // h, - currentItem, - index, - list + currentItem + // index, + // list ) { const { onActiveItem } = this.$attrs; const config = currentItem.__config__; - console.log(arguments, "argu"); + // console.log(arguments, "argu"); const child = renderChildren.apply(this, arguments); let className = this.activeId === config.formId @@ -53,7 +53,7 @@ const layouts = { className += " unfocus-bordered"; let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null; if (config.showLabel === false) labelWidth = "0"; - console.log(child); + // console.log(child); return ( { - console.log(event); - // console.log(this.currentItem.__config__.defaultValue); + // console.log(event); + // // console.log(this.currentItem.__config__.defaultValue); // this.$set(config, "defaultValue", event); - // console.log(this.currentItem.__config__.defaultValue); + // // console.log(this.currentItem.__config__.defaultValue); this.currentItem.__config__.defaultValue = event; // config.defaultValue = event; // config.defaultValue = event; @@ -90,12 +90,13 @@ const layouts = { }, rowFormItem( // h, - currentItem, - index, - list + currentItem + // index, + // list ) { const { onActiveItem } = this.$attrs; const config = currentItem.__config__; + // console.log(config); const className = this.activeId === config.formId ? "drawing-row-item active-from-item" @@ -113,7 +114,6 @@ const layouts = { ); } - console.log(child, "row"); return ( {config.componentName} {{ - item: () => child, + item: ({ element, index }) => { + const layout = layouts[element.__config__.layout]; + if (layout) { + return layout.call( + this, + element, + index, + element.__config__.children + ); + } + return layoutIsNotFound.call(this); + }, }} {components.itemBtns.apply(this, arguments)} @@ -144,9 +160,9 @@ const layouts = { }, raw( // h, - currentItem, - index, - list + currentItem + // index, + // list ) { const config = currentItem.__config__; const child = renderChildren.apply(this, arguments); @@ -155,8 +171,9 @@ const layouts = { key={config.renderKey} conf={currentItem} onInput={(event) => { - // this.$set(config, "defaultValue", event); - // console.log(this.currentItem.__config__.defaultValue); + // console.log(event, "oninput"); + // // this.$set(config, "defaultValue", event); + // // console.log(this.currentItem.__config__.defaultValue); this.currentItem.__config__.defaultValue = event; }} > @@ -167,20 +184,21 @@ const layouts = { }; function renderChildren( - // h, - currentItem, - index, - list + // // h, + currentItem + // // index, + // // list ) { const config = currentItem.__config__; - console.log(config, "config"); + // // console.log(config, "config"); if (!Array.isArray(config.children)) return null; return config.children.map((el, i) => { const layout = layouts[el.__config__.layout]; + // console.log(el.__config__.layout, `row's child`); if (layout) { return layout.call( this, - // h, + // // h, el, i, config.children @@ -207,14 +225,14 @@ export default defineComponent({ }, }, render() { - // console.log(this.currentItem.__config__.layout); + // // console.log(this.currentItem.__config__.layout); const layout = layouts[this.currentItem.__config__.layout]; - // console.log(this.currentItem); - console.log(layout, "layout"); + // // console.log(this.currentItem); + // // console.log(layout, "layout"); if (layout) { return layout.call( this, - // h, + // // h, this.currentItem, this.index, this.drawingList diff --git a/src/views/tool/build/FormDrawer.vue b/src/views/tool/build/FormDrawer.vue index b148715..75d8fb9 100644 --- a/src/views/tool/build/FormDrawer.vue +++ b/src/views/tool/build/FormDrawer.vue @@ -1,11 +1,6 @@ - diff --git a/src/views/tool/build/RightPanel.vue b/src/views/tool/build/RightPanel.vue index a824bec..5ba9cc6 100644 --- a/src/views/tool/build/RightPanel.vue +++ b/src/views/tool/build/RightPanel.vue @@ -193,7 +193,7 @@ label="默认值" > @@ -203,7 +203,7 @@ label="至少应选" > @@ -404,7 +404,7 @@ label="关闭值" > @@ -545,7 +545,7 @@ @@ -671,15 +671,30 @@ :data="activeData.options" node-key="id" :expand-on-click-node="false" - :render-content="renderContent" - /> + > + + +
@@ -1010,22 +1025,24 @@
- +