@jdlinker/utils

import { isNotNull } from './util'; import { genVue2JS } from './vue2js-generator'; import { beautifierOpts } from './beautifierLoader'; import { genVue3JS } from './vue3js-generator'; export function buildClassAttr(ctn, defaultClass) { const cop = ctn.options; let gridClassArray = []; !!defaultClass && gridClassArray.push(defaultClass); !!cop.customClass && cop.customClass.length > 0 && gridClassArray.push(cop.customClass.join(' ')); return gridClassArray.length > 0 ? `class="${gridClassArray.join(' ')}"` : ''; } const containerTemplates = { //容器组件属性 grid: (ctn, formConfig) => { // @ts-ignore const gridClassAttr = buildClassAttr(ctn); const gridTemplate = `<el-row ${gridClassAttr}> ${ctn.cols .map((col) => { const colOpt = col.options; const spanAttr = !!colOpt.responsive ? '' : `:span="${colOpt.span}"`; const mdAttr = !colOpt.responsive ? '' : `:md="${colOpt.md}"`; const smAttr = !colOpt.responsive ? '' : `:sm="${colOpt.sm}"`; const xsAttr = !colOpt.responsive ? '' : `:xs="${colOpt.xs}"`; const offsetAttr = !!colOpt.offset ? `:offset="${colOpt.offset}"` : ''; const pushAttr = !!colOpt.push ? `:push="${colOpt.push}"` : ''; const pullAttr = !!colOpt.pull ? `:pull="${colOpt.pull}"` : ''; const colClassAttr = buildClassAttr(col, 'grid-cell'); return `<el-col ${spanAttr} ${mdAttr} ${smAttr} ${xsAttr} ${offsetAttr} ${pushAttr} ${pullAttr} ${colClassAttr}> ${col.widgetList .map((cw) => { if (cw.category === 'container') { return buildContainerWidget(cw, formConfig); } else { return buildFieldWidget(cw, formConfig); } }) .join('')} </el-col>`; }) .join('')} </el-row>`; return gridTemplate; }, table: (ctn, formConfig) => { const tableClassAttr = buildClassAttr(ctn, 'table-layout'); const tableTemplate = `<div class="table-container"> <table ${tableClassAttr}><tbody> ${ctn.rows .map((tr) => { return `<tr>${tr.cols .filter((td) => !td.merged) .map((td) => { const tdOpt = td.options; const tdClassAttr = buildClassAttr(td, 'table-cell'); const colspanAttr = !isNaN(tdOpt.colspan) && tdOpt.colspan !== 1 ? `colspan="${tdOpt.colspan}"` : ''; const rowspanAttr = !isNaN(tdOpt.rowspan) && tdOpt.rowspan !== 1 ? `rowspan="${tdOpt.rowspan}"` : ''; let tdStyleArray = []; !!tdOpt.cellWidth && tdStyleArray.push('width: ' + tdOpt.cellWidth + ' !important'); !!tdOpt.cellHeight && tdStyleArray.push('height: ' + tdOpt.cellHeight + ' !important'); let tdStyleAttr = tdStyleArray.length > 0 ? `style="${tdStyleArray.join(';')}"` : ''; return `<td ${tdClassAttr} ${colspanAttr} ${rowspanAttr} ${tdStyleAttr}>${td.widgetList .map((tw) => { if (tw.category === 'container') { return buildContainerWidget(tw, formConfig); } else { return buildFieldWidget(tw, formConfig); } }) .join('')} </td>`; }) .join('')}</tr>`; }) .join('')} </tbody></table> </div>`; return tableTemplate; }, tab: (ctn, formConfig) => { // @ts-ignore const tabClassAttr = buildClassAttr(ctn); const vModel = ctn.tabs && ctn.tabs.length > 0 ? `v-model:value="${ctn.options.name}ActiveTab"` : ''; const tabTemplate = `<div class="tab-container"> <el-tabs ${vModel} type="${ctn.displayType}" ${tabClassAttr}> ${ctn.tabs .map((tab) => { const tabOpt = tab.options; const disabledAttr = tabOpt.disabled === true ? `disabled` : ''; return `<el-tab-pane name="${tabOpt.name}" label="${tabOpt.label}" ${disabledAttr}> ${tab.widgetList .map((tw) => { if (tw.category === 'container') { return buildContainerWidget(tw, formConfig); } else { return buildFieldWidget(tw, formConfig); } }) .join('')}</el-tab-pane>`; }) .join('')} </el-tabs> </div>`; return tabTemplate; }, 'sub-form': (ctn, formConfig) => { //TODO: } }; export function buildContainerWidget(widget, formConfig) { return containerTemplates[widget.type] ? containerTemplates[widget.type](widget, formConfig) : null; } function getElAttrs(widget, formConfig) { //获取El组件属性 let wop = widget.options; return { vModel: `v-model:value="${formConfig.modelName}.${wop.name}"`, readonly: wop.readonly ? `readonly="true"` : '', disabled: wop.disabled ? `:disabled="true"` : '', size: !!wop.size ? `size="${wop.size}"` : '', type: !!wop.type ? `type="${wop.type === 'number' ? 'text' : wop.type}"` : '', showPassword: !!wop.showPassword ? `:show-password="${wop.showPassword}"` : '', placeholder: !!wop.placeholder ? `placeholder="${wop.placeholder}"` : '', rows: isNotNull(wop.rows) && !isNaN(wop.rows) ? `rows="${wop.rows}"` : '', clearable: !!wop.clearable ? 'clearable' : '', minlength: isNotNull(wop.minLength) && !isNaN(wop.minLength) ? `:minlength="${wop.minLength}"` : '', maxlength: isNotNull(wop.maxLength) && !isNaN(wop.maxLength) ? `:maxlength="${wop.maxLength}"` : '', showWordLimit: !!wop.showWordLimit ? `:show-word-limit="true"` : '', prefixIcon: !!wop.prefixIcon ? `prefix-icon="${wop.prefixIcon}"` : '', suffixIcon: !!wop.suffixIcon ? `suffix-icon="${wop.suffixIcon}"` : '', controlsPosition: wop.controlsPosition === 'right' ? `controls-position="right"` : '', min: isNotNull(wop.min) && !isNaN(wop.min) ? `:min="${wop.min}"` : '', max: isNotNull(wop.max) && !isNaN(wop.max) ? `:max="${wop.max}"` : '', precision: isNotNull(wop.precision) && !isNaN(wop.precision) ? `:precision="${wop.precision}"` : '', step: isNotNull(wop.step) && !isNaN(wop.step) ? `:step="${wop.step}"` : '', filterable: !!wop.filterable ? `filterable` : '', allowCreate: !!wop.allowCreate ? `allow-create` : '', defaultFirstOption: !!wop.filterable && !!wop.allowCreate ? `default-first-option` : '', multiple: !!wop.multiple ? `multiple` : '', multipleLimit: !isNaN(wop.multipleLimit) && wop.multipleLimit > 0 ? `:multiple-limit="${wop.multipleLimit}"` : '', automaticDropdown: !!wop.automaticDropdown ? `automatic-dropdown` : '', remote: !!wop.remote ? `remote` : '', format: !!wop.format ? `format="${wop.format}"` : '', valueFormat: !!wop.valueFormat ? `value-format="${wop.valueFormat}"` : '', editable: !!wop.editable ? `:editable="${wop.editable}"` : '', startPlaceholder: !!wop.startPlaceholder ? `start-placeholder="${wop.startPlaceholder}"` : '', endPlaceholder: !!wop.endPlaceholder ? `end-placeholder="${wop.endPlaceholder}"` : '', activeText: !!wop.activeText ? `active-text="${wop.activeText}"` : '', inactiveText: !!wop.inactiveText ? `inactive-text="${wop.inactiveText}"` : '', activeColor: !!wop.activeColor ? `active-color="${wop.activeColor}"` : '', inactiveColor: !!wop.inactiveColor ? `inactive-color="${wop.inactiveColor}"` : '', switchWidth: !isNaN(wop.switchWidth) && wop.switchWidth !== 40 ? `:width="${wop.switchWidth}"` : '', rateMax: !isNaN(wop.max) && wop.max !== 5 ? `:max="${wop.max}"` : '', lowThreshold: !isNaN(wop.lowThreshold) && wop.lowThreshold !== 2 ? `:low-threshold="${wop.lowThreshold}"` : '', highThreshold: !isNaN(wop.highThreshold) && wop.highThreshold !== 4 ? `:high-threshold="${wop.highThreshold}"` : '', allowHalf: !!wop.allowHalf ? `allow-half` : '', showText: !!wop.showText ? `show-text` : '', showScore: !!wop.showScore ? `show-score` : '', sliderMin: !isNaN(wop.min) && wop.min !== 0 ? `:min="${wop.min}"` : '', sliderMax: !isNaN(wop.max) && wop.max !== 100 ? `:max="${wop.max}"` : '', sliderStep: !isNaN(wop.step) && wop.step !== 1 ? `:step="${wop.step}"` : '', sliderRange: !!wop.range ? `range` : '', sliderVertical: !!wop.vertical ? `vertical` : '', uploadAction: !!wop.uploadURL ? `action="${wop.uploadURL}"` : '', withCredentials: !!wop.withCredentials ? `with-credentials` : '', multipleSelect: !!wop.multipleSelect ? `multiple` : '', showFileList: !!wop.showFileList ? `show-file-list` : '', limit: !isNaN(wop.limit) ? `:limit="${wop.limit}"` : '', uploadTipSlotChild: !!wop.uploadTip ? `<template #tip><div class="el-upload__tip">${wop.uploadTip}</div></template>` : '', pictureUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`, fileUploadIconChild: `<template #default><i class="el-icon-plus"></i></template>`, buttonType: !!wop.type ? `type="${wop.type}"` : '', buttonPlain: !!wop.plain ? `plain` : '', buttonRound: !!wop.round ? `round` : '', buttonCircle: !!wop.circle ? `circle` : '', buttonIcon: !!wop.icon ? `icon="${wop.icon}"` : '', contentPosition: !!wop.contentPosition && wop.contentPosition !== 'center' ? `content-position="${wop.contentPosition}"` : '', appendButtonChild: !!wop.appendButton ? `<template #append><el-button class="${wop.buttonIcon}" ${!!wop.appendButtonDisabled ? 'disabled' : ''}></el-button></template>` : '' }; } function buildRadioChildren(widget, formConfig) { let wop = widget.options; const childTag = !!wop.buttonStyle ? 'el-radio-button' : 'el-radio'; const borderAttr = !!wop.border ? `border` : ''; const styleAttr = `style="{display: ${wop.displayStyle}}"`; return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.value" :disabled="item.disabled" ${borderAttr} ${styleAttr}>{{item.label}}</${childTag}>`; } function buildCheckboxChildren(widget, formConfig) { let wop = widget.options; const childTag = !!wop.buttonStyle ? 'el-checkbox-button' : 'el-checkbox'; const borderAttr = !!wop.border ? `border` : ''; const styleAttr = `style="{display: ${wop.displayStyle}}"`; return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.value" :disabled="item.disabled" ${borderAttr} ${styleAttr}>{{item.label}}</${childTag}>`; } function buildSelectChildren(widget, formConfig) { let wop = widget.options; const childTag = 'el-option'; return `<${childTag} v-for="(item, index) in ${wop.name}Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></${childTag}>`; } const elTemplates = { //字段组件属性 input: (widget, formConfig) => { const { vModel, readonly, disabled, size, type, showPassword, placeholder, clearable, minlength, maxlength, showWordLimit, prefixIcon, suffixIcon, appendButtonChild } = getElAttrs(widget, formConfig); return `<el-input ${vModel} ${readonly} ${disabled} ${size} ${type} ${showPassword} ${placeholder} ${clearable} ${minlength} ${maxlength} ${showWordLimit} ${prefixIcon} ${suffixIcon}>${appendButtonChild}</el-input>`; }, textarea: (widget, formConfig) => { const { vModel, readonly, disabled, size, type, showPassword, placeholder, rows, clearable, minlength, maxlength, showWordLimit } = getElAttrs(widget, formConfig); return `<el-input type="textarea" ${vModel} ${readonly} ${disabled} ${size} ${type} ${showPassword} ${placeholder} ${rows} ${clearable} ${minlength} ${maxlength} ${showWordLimit}></el-input>`; }, number: (widget, formConfig) => { const { vModel, disabled, size, type, showPassword, placeholder, controlsPosition, min, max, precision, step } = getElAttrs( widget, formConfig ); return `<el-input-number ${vModel} class="full-width-input" ${disabled} ${size} ${type} ${showPassword} ${placeholder} ${controlsPosition} ${min} ${max} ${precision} ${step}></el-input-number>`; }, radio: (widget, formConfig) => { const { vModel, disabled, size } = getElAttrs(widget, formConfig); const radioOptions = buildRadioChildren(widget, formConfig); return `<el-radio-group ${vModel} ${disabled} ${size}>${radioOptions}</el-radio-group>`; }, checkbox: (widget, formConfig) => { const { vModel, disabled, size } = getElAttrs(widget, formConfig); const checkboxOptions = buildCheckboxChildren(widget, formConfig); return `<el-checkbox-group ${vModel} ${disabled} ${size}>${checkboxOptions}</el-checkbox-group>`; }, select: (widget, formConfig) => { const { vModel, disabled, size, clearable, filterable, allowCreate, defaultFirstOption, automaticDropdown, multiple, multipleLimit, remote, placeholder } = getElAttrs(widget, formConfig); const selectOptions = buildSelectChildren(widget, formConfig); return `<el-select ${vModel} class="full-width-input" ${disabled} ${size} ${clearable} ${filterable} ${allowCreate} ${defaultFirstOption} ${automaticDropdown} ${multiple} ${multipleLimit} ${placeholder} ${remote}>${selectOptions}</el-select>`; }, time: (widget, formConfig) => { const { vModel, readonly, disabled, size, placeholder, clearable, format, editable } = getElAttrs(widget, formConfig); return `<el-time-picker ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format} value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-time-picker>`; }, 'time-range': (widget, formConfig) => { const { vModel, readonly, disabled, size, startPlaceholder, endPlaceholder, clearable, format, editable } = getElAttrs(widget, formConfig); return `<el-time-picker is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format} value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-time-picker>`; }, date: (widget, formConfig) => { const { vModel, readonly, disabled, size, type, placeholder, clearable, format, valueFormat, editable } = getElAttrs(widget, formConfig); return `<el-date-picker ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format} ${valueFormat} ${placeholder} ${clearable} ${editable}></el-date-picker>`; }, 'date-range': (widget, formConfig) => { const { vModel, readonly, disabled, size, type, startPlaceholder, endPlaceholder, clearable, format, valueFormat, editable } = getElAttrs( widget, formConfig ); return `<el-date-picker is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format} ${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-date-picker>`; }, switch: (widget, formConfig) => { const { vModel, disabled, activeText, inactiveText, activeColor, inactiveColor, switchWidth } = getElAttrs(widget, formConfig); return `<el-switch ${vModel} ${disabled} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${switchWidth}></el-switch>`; }, rate: (widget, formConfig) => { const { vModel, disabled, rateMax, lowThreshold, highThreshold, allowHalf, showText, showScore } = getElAttrs(widget, formConfig); return `<el-rate ${vModel} ${disabled} ${rateMax} ${lowThreshold} ${highThreshold} ${allowHalf} ${showText} ${showScore}></el-rate>`; }, color: (widget, formConfig) => { const { vModel, disabled, size } = getElAttrs(widget, formConfig); return `<el-color-picker ${vModel} ${disabled} ${size}></el-color-picker>`; }, slider: (widget, formConfig) => { const { vModel, disabled, sliderMin, sliderMax, sliderStep, sliderRange, sliderVertical } = getElAttrs(widget, formConfig); return `<el-slider ${vModel} ${disabled} ${sliderMin} ${sliderMax} ${sliderStep} ${sliderRange} ${sliderVertical}></el-slider>`; }, 'picture-upload': (widget, formConfig) => { const { vModel, disabled, uploadAction, withCredentials, multipleSelect, showFileList, limit, uploadTipSlotChild, pictureUploadIconChild } = getElAttrs(widget, formConfig); let wop = widget.options; return `<el-upload :file-list="${wop.name}FileList" :headers="${wop.name}UploadHeaders" :data="${wop.name}UploadData" ${disabled} ${uploadAction} list-type="picture-card" ${withCredentials} ${multipleSelect} ${showFileList} ${limit}>${uploadTipSlotChild} ${pictureUploadIconChild}</el-upload>`; }, 'file-upload': (widget, formConfig) => { const { vModel, disabled, uploadAction, withCredentials, multipleSelect, showFileList, limit, uploadTipSlotChild, fileUploadIconChild } = getElAttrs(widget, formConfig); let wop = widget.options; return `<el-upload :file-list="${wop.name}FileList" :headers="${wop.name}UploadHeaders" :data="${wop.name}UploadData" ${disabled} ${uploadAction} list-type="picture-card" ${withCredentials} ${multipleSelect} ${showFileList} ${limit}>${uploadTipSlotChild} ${fileUploadIconChild}</el-upload>`; }, 'rich-editor': (widget, formConfig) => { const { vModel, disabled, placeholder } = getElAttrs(widget, formConfig); return `<vue-editor ${vModel} ${disabled} ${placeholder}></vue-editor>`; }, cascader: (widget, formConfig) => { const { vModel, disabled, size, clearable, filterable, placeholder } = getElAttrs(widget, formConfig); let wop = widget.options; const optionsAttr = `:options="${wop.name}Options"`; return `<el-cascader ${vModel} class="full-width-input" ${optionsAttr} ${disabled} ${size} ${clearable} ${filterable} ${placeholder}></el-cascader>`; }, 'static-text': (widget, formConfig) => { return `<div>${widget.options.textContent}</div>`; }, 'html-text': (widget, formConfig) => { return `<div v-html="${widget.options.htmlContent}"></div>`; }, button: (widget, formConfig) => { const { buttonType, buttonPlain, buttonRound, buttonCircle, buttonIcon, disabled } = getElAttrs(widget, formConfig); return `<el-button ${buttonType} ${buttonPlain} ${buttonRound} ${buttonCircle} ${buttonIcon} ${disabled}>${widget.options.label}</el-button>`; }, divider: (widget, formConfig) => { const { contentPosition } = getElAttrs(widget, formConfig); return `<el-divider direction="horizontal" ${contentPosition}></el-divider>`; } }; export function buildFieldWidget(widget, formConfig) { let wop = widget.options; const label = wop.labelHidden ? '' : wop.label; const labelWidthAttr = wop.labelHidden ? `label-width="0"` : !!wop.labelWidth ? `label-width="${wop.labelWidth}px"` : ''; const labelTooltipAttr = wop.labelTooltip ? `title="${wop.labelTooltip}"` : ''; const propAttr = `prop="${wop.name}"`; let classArray = []; !!wop.required && classArray.push('required'); !!wop.customClass && wop.customClass.length > 0 && classArray.push(wop.customClass.join(' ')); if (!!wop.labelAlign) { wop.labelAlign !== 'label-left-align' && classArray.push(wop.labelAlign); } else if (!!widget.formItemFlag) { //classArray.push(formConfig.labelAlign || 'label-left-align') formConfig.labelAlign !== 'label-left-align' && classArray.push(formConfig.labelAlign); } if (!widget.formItemFlag) { classArray.push('static-content-item'); } const classAttr = classArray.length > 0 ? `class="${classArray.join(' ')}"` : ''; let customLabelDom = `<template #label><span class="custom-label">${ wop.labelIconPosition === 'front' ? !!wop.labelTooltip ? `<el-tooltip content="${wop.labelTooltip}" effect="light"><i class="${wop.labelIconClass}"></i></el-tooltip>${wop.label}` : `<i class="${wop.labelIconClass}"></i>${wop.label}` : !!wop.labelTooltip ? `${wop.label}<el-tooltip content="${wop.labelTooltip}" effect="light"><i class="${wop.labelIconClass}"></i></el-tooltip>` : `${wop.label}<i class="${wop.labelIconClass}"></i>` } </span></template>`; !wop.labelIconClass && (customLabelDom = ''); const fwDom = elTemplates[widget.type] ? elTemplates[widget.type](widget, formConfig) : null; const isFormItem = !!widget.formItemFlag; const vShowAttr = !!wop.hidden ? `v-show="false"` : ''; return isFormItem ? `<el-form-item label="${label}" ${labelWidthAttr} ${labelTooltipAttr} ${propAttr} ${classAttr}> ${customLabelDom} ${fwDom} </el-form-item>` : `<div ${classAttr} ${vShowAttr}>${fwDom}</div>`; } function genTemplate(formConfig, widgetList, vue3Flag = false) { const submitAttr = !!vue3Flag ? `@submit.prevent` : `@submit.native.prevent`; let childrenList = []; widgetList.forEach((wgt) => { if (wgt.category === 'container') { childrenList.push(buildContainerWidget(wgt, formConfig)); } else { childrenList.push(buildFieldWidget(wgt, formConfig)); } }); const formTemplate = ` <el-form :model="${formConfig.modelName}" ref="${formConfig.refName}" :rules="${formConfig.rulesName}" label-position="${formConfig.labelPosition}" label-width="${formConfig.labelWidth}px" size="${formConfig.size || 'default'}" ${submitAttr}> ${!!childrenList ? childrenList.join('\n') : ''} </el-form>`; return formTemplate; } const genGlobalCSS = function (formConfig) { const globalCssTemplate = ` .el-input-number.full-width-input, .el-cascader.full-width-input { width: 100% !important; } .el-form-item--medium { .el-radio { line-height: 36px !important; } .el-rate{ margin-top: 8px; } } .el-form-item--small { .el-radio { line-height: 32px !important; } .el-rate{ margin-top: 6px; } } .el-form-item--mini { .el-radio { line-height: 28px !important; } .el-rate{ margin-top: 4px; } } .clear-fix:before, .clear-fix:after { display: table; content: ""; } .clear-fix:after { clear: both; } .float-right { float: right; } ${formConfig.cssCode}`; return globalCssTemplate; }; const genScopedCSS = function (formConfig, vue3Flag = false) { //const vDeep = !!vue3Flag ? `::v-deep` : `:deep` const cssTemplate = ` div.table-container { table.table-layout { width: 100%; table-layout: fixed; border-collapse: collapse; td.table-cell { display: table-cell; height: 36px; border: 1px solid #e1e2e3; } } } div.tab-container { } .label-left-align ${!!vue3Flag ? `:deep(.el-form-item__label)` : `::v-deep .el-form-item__label`} { text-align: left; } .label-center-align ${!!vue3Flag ? `:deep(.el-form-item__label)` : `::v-deep .el-form-item__label`} { text-align: center; } .label-right-align ${!!vue3Flag ? `:deep(.el-form-item__label)` : `::v-deep .el-form-item__label`} { text-align: right; } .custom-label { } .static-content-item { min-height: 20px; display: flex; align-items: center; ${!!vue3Flag ? `:deep(.el-divider--horizontal)` : `::v-deep .el-divider--horizontal`} { margin: 0; } }`; return cssTemplate; }; /** * 注册容器组件的代码生成器 * @param containerType 容器类型，必须唯一 * @param ctGenerator 代码生成器函数，接收两个参数(containerWidget, formConfig)，返回生成的容器组件代码 */ export const registerCWGenerator = function (containerType, ctGenerator) { containerTemplates[containerType] = ctGenerator; }; /** * 注册字段组件的代码生成器 * @param fieldType 字段类型，必须唯一 * @param ftGenerator 代码生成器函数，接收两个参数(fieldWidget, formConfig)，返回生成的字段组件代码 */ export const registerFWGenerator = function (fieldType, ftGenerator) { elTemplates[fieldType] = ftGenerator; }; export const genSFC = function (formConfig, widgetList, beautifier, vue3Flag = false) { const html = beautifier.html(genTemplate(formConfig, widgetList, vue3Flag), beautifierOpts.html); const js = beautifier.js(!!vue3Flag ? genVue3JS(formConfig, widgetList) : genVue2JS(formConfig, widgetList), beautifierOpts.js); const globalCss = beautifier.css(genGlobalCSS(formConfig), beautifierOpts.css); const scopedCss = beautifier.css(genScopedCSS(formConfig, vue3Flag), beautifierOpts.css); return ` <template> ${html} </template> <script> ${js} </script> <style lang="less"> ${globalCss} </style> <style lang="less" scoped> ${scopedCss} </style>`; };