BruceSun
/
SAMS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 解决表单设计器数据缓存问题

rf
tony 2022-12-17 10:43:11 +08:00
parent 2f5fed6f44
commit 683528d5dd
14 changed files with 343 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
ruoyi-ui/public/preview.html 100644
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>form-generator-preview</title>
<link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
<style>
body{
margin: 0;
padding: 0;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
height: calc(100vh - 33px);
padding: 12px;
box-sizing: border-box;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
input, textarea{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
</style>
</head>
<body>
<noscript>
<strong>抱歉，javascript被禁用，请开启后重试。</strong>
</noscript>
<div id="previewApp"></div>
</body>
</html>

4
ruoyi-ui/src/components/parser/Parser.vue
View File

@ -1,6 +1,6 @@
<script> <script>
import { deepClone } from '@/utils/index' import { deepClone } from '../../utils/index'
import render from '@/components/render/render.js' import render from '../render/render.js'
const ruleTrigger = { const ruleTrigger = {
'el-input': 'blur', 'el-input': 'blur',

38
ruoyi-ui/src/components/tinymce/example/Index.vue
View File

@ -1,38 +0,0 @@
<template>
<div>
<Tinymce v-model="defaultValue" :height="300" placeholder="在这里输入文字" />
</div>
</template>
<script>
import Tinymce from '../index.vue'
export default {
components: {
Tinymce
},
props: {
},
data() {
return {
defaultValue: '<p>配置文档参阅：http://tinymce.ax-z.cn</p>'
}
},
computed: {
},
watch: {
},
created() {
},
mounted() {
},
methods: {
}
}
</script>

4
ruoyi-ui/src/styles/index.scss
View File

@ -1,4 +1,4 @@
$editorTabsborderColor: #121315; $editorTabsborderColor: #5a9d6d;
body, html{ body, html{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -138,4 +138,4 @@ input, textarea{
} }
.el-upload__tip{ .el-upload__tip{
line-height: 1.2; line-height: 1.2;
} }

8
ruoyi-ui/src/styles/mixin.scss
View File

@ -1,10 +1,10 @@
@mixin action-bar { @mixin action-bar {
.action-bar { .action-bar {
height: 33px; height: 39px;
background: #f2fafb; background: #f5f7fa;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
.bar-btn { .bar-btn {
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
@ -30,4 +30,4 @@
} }
} }
} }
} }

36
ruoyi-ui/src/utils/generator/css.js
View File

@ -1,18 +1,18 @@
const styles = { const styles = {
'el-rate': '.el-rate{display: inline-block; vertical-align: text-top;}', 'el-rate': '.el-rate{display: inline-block; vertical-align: text-top;}',
'el-upload': '.el-upload__tip{line-height: 1.2;}' 'el-upload': '.el-upload__tip{line-height: 1.2;}'
} }
function addCss(cssList, el) { function addCss(cssList, el) {
const css = styles[el.tag] const css = styles[el.__config__.tag]
css && cssList.indexOf(css) === -1 && cssList.push(css) css && cssList.indexOf(css) === -1 && cssList.push(css)
if (el.children) { if (el.__config__.children) {
el.children.forEach(el2 => addCss(cssList, el2)) el.__config__.children.forEach(el2 => addCss(cssList, el2))
} }
} }
export function makeUpCss(conf) { export function makeUpCss(conf) {
const cssList = [] const cssList = []
conf.fields.forEach(el => addCss(cssList, el)) conf.fields.forEach(el => addCss(cssList, el))
return cssList.join('\n') return cssList.join('\n')
} }

230
ruoyi-ui/src/utils/generator/html.js
View File

@ -1,15 +1,15 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
import { trigger } from './config' import ruleTrigger from './ruleTrigger'
let confGlobal let confGlobal
let someSpanIsNot24 let someSpanIsNot24
export function dialogWrapper(str) { export function dialogWrapper(str) {
return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title"> return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile">
${str} ${str}
<div slot="footer"> <div slot="footer">
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button> <el-button type="primary" @click="handelConfirm">确定</el-button>
</div> </div>
</el-dialog>` </el-dialog>`
} }
@ -34,27 +34,27 @@ export function cssStyle(cssStr) {
</style>` </style>`
} }
function buildFormTemplate(conf, child, type) { function buildFormTemplate(scheme, child, type) {
let labelPosition = '' let labelPosition = ''
if (conf.labelPosition !== 'right') { if (scheme.labelPosition !== 'right') {
labelPosition = `label-position="${conf.labelPosition}"` labelPosition = `label-position="${scheme.labelPosition}"`
} }
const disabled = conf.disabled ? `:disabled="${conf.disabled}"` : '' const disabled = scheme.disabled ? `:disabled="${scheme.disabled}"` : ''
let str = `<el-form ref="${conf.formRef}" :model="${conf.formModel}" :rules="${conf.formRules}" size="${conf.size}" ${disabled} label-width="${conf.labelWidth}px" ${labelPosition}> let str = `<el-form ref="${scheme.formRef}" :model="${scheme.formModel}" :rules="${scheme.formRules}" size="${scheme.size}" ${disabled} label-width="${scheme.labelWidth}px" ${labelPosition}>
${child} ${child}
${buildFromBtns(conf, type)} ${buildFromBtns(scheme, type)}
</el-form>` </el-form>`
if (someSpanIsNot24) { if (someSpanIsNot24) {
str = `<el-row :gutter="${conf.gutter}"> str = `<el-row :gutter="${scheme.gutter}">
${str} ${str}
</el-row>` </el-row>`
} }
return str return str
} }
function buildFromBtns(conf, type) { function buildFromBtns(scheme, type) {
let str = '' let str = ''
if (conf.formBtns && type === 'file') { if (scheme.formBtns && type === 'file') {
str = `<el-form-item size="large"> str = `<el-form-item size="large">
<el-button type="primary" @click="submitForm">提交</el-button> <el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button> <el-button @click="resetForm">重置</el-button>
@ -69,9 +69,9 @@ function buildFromBtns(conf, type) {
} }
// span不为24的用el-col包裹 // span不为24的用el-col包裹
function colWrapper(element, str) { function colWrapper(scheme, str) {
if (someSpanIsNot24 || element.span !== 24) { if (someSpanIsNot24 || scheme.__config__.span !== 24) {
return `<el-col :span="${element.span}"> return `<el-col :span="${scheme.__config__.span}">
${str} ${str}
</el-col>` </el-col>`
} }
@ -79,29 +79,36 @@ function colWrapper(element, str) {
} }
const layouts = { const layouts = {
colFormItem(element) { colFormItem(scheme) {
const config = scheme.__config__
let labelWidth = '' let labelWidth = ''
if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) { let label = `label="${config.label}"`
labelWidth = `label-width="${element.labelWidth}px"` if (config.labelWidth && config.labelWidth !== confGlobal.labelWidth) {
labelWidth = `label-width="${config.labelWidth}px"`
} }
const required = !trigger[element.tag] && element.required ? 'required' : '' if (config.showLabel === false) {
const tagDom = tags[element.tag] ? tags[element.tag](element) : null labelWidth = 'label-width="0"'
let str = `<el-form-item ${labelWidth} label="${element.label}" prop="${element.vModel}" ${required}> label = ''
}
const required = !ruleTrigger[config.tag] && config.required ? 'required' : ''
const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null
let str = `<el-form-item ${labelWidth} ${label} prop="${scheme.__vModel__}" ${required}>
${tagDom} ${tagDom}
</el-form-item>` </el-form-item>`
str = colWrapper(element, str) str = colWrapper(scheme, str)
return str return str
}, },
rowFormItem(element) { rowFormItem(scheme) {
const type = element.type === 'default' ? '' : `type="${element.type}"` const config = scheme.__config__
const justify = element.type === 'default' ? '' : `justify="${element.justify}"` const type = scheme.type === 'default' ? '' : `type="${scheme.type}"`
const align = element.type === 'default' ? '' : `align="${element.align}"` const justify = scheme.type === 'default' ? '' : `justify="${scheme.justify}"`
const gutter = element.gutter ? `gutter="${element.gutter}"` : '' const align = scheme.type === 'default' ? '' : `align="${scheme.align}"`
const children = element.children.map(el => layouts[el.layout](el)) const gutter = scheme.gutter ? `:gutter="${scheme.gutter}"` : ''
const children = config.children.map(el => layouts[el.__config__.layout](el))
let str = `<el-row ${type} ${justify} ${align} ${gutter}> let str = `<el-row ${type} ${justify} ${align} ${gutter}>
${children.join('\n')} ${children.join('\n')}
</el-row>` </el-row>`
str = colWrapper(element, str) str = colWrapper(scheme, str)
return str return str
} }
} }
@ -113,15 +120,18 @@ const tags = {
} = attrBuilder(el) } = attrBuilder(el)
const type = el.type ? `type="${el.type}"` : '' const type = el.type ? `type="${el.type}"` : ''
const icon = el.icon ? `icon="${el.icon}"` : '' const icon = el.icon ? `icon="${el.icon}"` : ''
const round = el.round ? 'round' : ''
const size = el.size ? `size="${el.size}"` : '' const size = el.size ? `size="${el.size}"` : ''
const plain = el.plain ? 'plain' : ''
const circle = el.circle ? 'circle' : ''
let child = buildElButtonChild(el) let child = buildElButtonChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${type} ${icon} ${size} ${disabled}>${child}</${el.tag}>` return `<${tag} ${type} ${icon} ${round} ${size} ${plain} ${disabled} ${circle}>${child}</${tag}>`
}, },
'el-input': el => { 'el-input': el => {
const { const {
disabled, vModel, clearable, placeholder, width tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el) } = attrBuilder(el)
const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : '' const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : ''
const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : '' const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : ''
@ -136,10 +146,12 @@ const tags = {
let child = buildElInputChild(el) let child = buildElInputChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${el.tag}>` return `<${tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${tag}>`
}, },
'el-input-number': el => { 'el-input-number': el => {
const { disabled, vModel, placeholder } = attrBuilder(el) const {
tag, disabled, vModel, placeholder
} = attrBuilder(el)
const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : '' const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : ''
const min = el.min ? `:min='${el.min}'` : '' const min = el.min ? `:min='${el.min}'` : ''
const max = el.max ? `:max='${el.max}'` : '' const max = el.max ? `:max='${el.max}'` : ''
@ -147,39 +159,39 @@ const tags = {
const stepStrictly = el['step-strictly'] ? 'step-strictly' : '' const stepStrictly = el['step-strictly'] ? 'step-strictly' : ''
const precision = el.precision ? `:precision='${el.precision}'` : '' const precision = el.precision ? `:precision='${el.precision}'` : ''
return `<${el.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${tag}>`
}, },
'el-select': el => { 'el-select': el => {
const { const {
disabled, vModel, clearable, placeholder, width tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el) } = attrBuilder(el)
const filterable = el.filterable ? 'filterable' : '' const filterable = el.filterable ? 'filterable' : ''
const multiple = el.multiple ? 'multiple' : '' const multiple = el.multiple ? 'multiple' : ''
let child = buildElSelectChild(el) let child = buildElSelectChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${el.tag}>` return `<${tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${tag}>`
}, },
'el-radio-group': el => { 'el-radio-group': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"` const size = `size="${el.size}"`
let child = buildElRadioGroupChild(el) let child = buildElRadioGroupChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${vModel} ${size} ${disabled}>${child}</${el.tag}>` return `<${tag} ${vModel} ${size} ${disabled}>${child}</${tag}>`
}, },
'el-checkbox-group': el => { 'el-checkbox-group': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"` const size = `size="${el.size}"`
const min = el.min ? `:min="${el.min}"` : '' const min = el.min ? `:min="${el.min}"` : ''
const max = el.max ? `:max="${el.max}"` : '' const max = el.max ? `:max="${el.max}"` : ''
let child = buildElCheckboxGroupChild(el) let child = buildElCheckboxGroupChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${el.tag}>` return `<${tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${tag}>`
}, },
'el-switch': el => { 'el-switch': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : '' const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : ''
const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : '' const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : ''
const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : '' const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : ''
@ -187,33 +199,33 @@ const tags = {
const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : '' 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'])}'` : '' const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : ''
return `<${el.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${tag}>`
}, },
'el-cascader': el => { 'el-cascader': el => {
const { const {
disabled, vModel, clearable, placeholder, width tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el) } = attrBuilder(el)
const options = el.options ? `:options="${el.vModel}Options"` : '' const options = el.options ? `:options="${el.__vModel__}Options"` : ''
const props = el.props ? `:props="${el.vModel}Props"` : '' const props = el.props ? `:props="${el.__vModel__}Props"` : ''
const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"' const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"'
const filterable = el.filterable ? 'filterable' : '' const filterable = el.filterable ? 'filterable' : ''
const separator = el.separator === '/' ? '' : `separator="${el.separator}"` const separator = el.separator === '/' ? '' : `separator="${el.separator}"`
return `<${el.tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}></${tag}>`
}, },
'el-slider': el => { 'el-slider': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const min = el.min ? `:min='${el.min}'` : '' const min = el.min ? `:min='${el.min}'` : ''
const max = el.max ? `:max='${el.max}'` : '' const max = el.max ? `:max='${el.max}'` : ''
const step = el.step ? `:step='${el.step}'` : '' const step = el.step ? `:step='${el.step}'` : ''
const range = el.range ? 'range' : '' const range = el.range ? 'range' : ''
const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : '' const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : ''
return `<${el.tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}></${el.tag}>` return `<${tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}></${tag}>`
}, },
'el-time-picker': el => { 'el-time-picker': el => {
const { const {
disabled, vModel, clearable, placeholder, width tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el) } = attrBuilder(el)
const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : '' const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : '' const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
@ -223,11 +235,11 @@ const tags = {
const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : '' const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
const pickerOptions = el['picker-options'] ? `:picker-options='${JSON.stringify(el['picker-options'])}'` : '' const pickerOptions = el['picker-options'] ? `:picker-options='${JSON.stringify(el['picker-options'])}'` : ''
return `<${el.tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}></${tag}>`
}, },
'el-date-picker': el => { 'el-date-picker': el => {
const { const {
disabled, vModel, clearable, placeholder, width tag, disabled, vModel, clearable, placeholder, width
} = attrBuilder(el) } = attrBuilder(el)
const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : '' const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : '' const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
@ -237,46 +249,54 @@ const tags = {
const type = el.type === 'date' ? '' : `type="${el.type}"` const type = el.type === 'date' ? '' : `type="${el.type}"`
const readonly = el.readonly ? 'readonly' : '' const readonly = el.readonly ? 'readonly' : ''
return `<${el.tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}></${el.tag}>` return `<${tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}></${tag}>`
}, },
'el-rate': el => { 'el-rate': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const max = el.max ? `:max='${el.max}'` : '' const max = el.max ? `:max='${el.max}'` : ''
const allowHalf = el['allow-half'] ? 'allow-half' : '' const allowHalf = el['allow-half'] ? 'allow-half' : ''
const showText = el['show-text'] ? 'show-text' : '' const showText = el['show-text'] ? 'show-text' : ''
const showScore = el['show-score'] ? 'show-score' : '' const showScore = el['show-score'] ? 'show-score' : ''
return `<${el.tag} ${vModel} ${allowHalf} ${showText} ${showScore} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}></${tag}>`
}, },
'el-color-picker': el => { 'el-color-picker': el => {
const { disabled, vModel } = attrBuilder(el) const { tag, disabled, vModel } = attrBuilder(el)
const size = `size="${el.size}"` const size = `size="${el.size}"`
const showAlpha = el['show-alpha'] ? 'show-alpha' : '' const showAlpha = el['show-alpha'] ? 'show-alpha' : ''
const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : '' const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : ''
return `<${el.tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}></${el.tag}>` return `<${tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}></${tag}>`
}, },
'el-upload': el => { 'el-upload': el => {
const { tag } = el.__config__
const disabled = el.disabled ? ':disabled=\'true\'' : '' const disabled = el.disabled ? ':disabled=\'true\'' : ''
const action = el.action ? `:action="${el.vModel}Action"` : '' const action = el.action ? `:action="${el.__vModel__}Action"` : ''
const multiple = el.multiple ? 'multiple' : '' const multiple = el.multiple ? 'multiple' : ''
const listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : '' const listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : ''
const accept = el.accept ? `accept="${el.accept}"` : '' const accept = el.accept ? `accept="${el.accept}"` : ''
const name = el.name !== 'file' ? `name="${el.name}"` : '' const name = el.name !== 'file' ? `name="${el.name}"` : ''
const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : '' const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : ''
const beforeUpload = `:before-upload="${el.vModel}BeforeUpload"` const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"`
const fileList = `:file-list="${el.vModel}fileList"` const fileList = `:file-list="${el.__vModel__}fileList"`
const ref = `ref="${el.vModel}"` const ref = `ref="${el.__vModel__}"`
let child = buildElUploadChild(el) let child = buildElUploadChild(el)
if (child) child = `\n${child}\n` // 换行 if (child) child = `\n${child}\n` // 换行
return `<${el.tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${el.tag}>` return `<${tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${tag}>`
},
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}></${tag}>`
} }
} }
function attrBuilder(el) { function attrBuilder(el) {
return { return {
vModel: `v-model="${confGlobal.formModel}.${el.vModel}"`, tag: el.__config__.tag,
vModel: `v-model="${confGlobal.formModel}.${el.__vModel__}"`,
clearable: el.clearable ? 'clearable' : '', clearable: el.clearable ? 'clearable' : '',
placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '', placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '',
width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '', width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '',
@ -285,72 +305,92 @@ function attrBuilder(el) {
} }
// el-buttin 子级 // el-buttin 子级
function buildElButtonChild(conf) { function buildElButtonChild(scheme) {
const children = [] const children = []
if (conf.default) { const slot = scheme.__slot__ || {}
children.push(conf.default) if (slot.default) {
children.push(slot.default)
} }
return children.join('\n') return children.join('\n')
} }
// el-input innerHTML // el-input 子级
function buildElInputChild(conf) { function buildElInputChild(scheme) {
const children = [] const children = []
if (conf.prepend) { const slot = scheme.__slot__
children.push(`<template slot="prepend">${conf.prepend}</template>`) if (slot && slot.prepend) {
children.push(`<template slot="prepend">${slot.prepend}</template>`)
} }
if (conf.append) { if (slot && slot.append) {
children.push(`<template slot="append">${conf.append}</template>`) children.push(`<template slot="append">${slot.append}</template>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElSelectChild(conf) { // el-select 子级
function buildElSelectChild(scheme) {
const children = [] const children = []
if (conf.options && conf.options.length) { const slot = scheme.__slot__
children.push(`<el-option v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>`) if (slot && slot.options && slot.options.length) {
children.push(`<el-option v-for="(item, index) in ${scheme.__vModel__}Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElRadioGroupChild(conf) { // el-radio-group 子级
function buildElRadioGroupChild(scheme) {
const children = [] const children = []
if (conf.options && conf.options.length) { const slot = scheme.__slot__
const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio' const config = scheme.__config__
const border = conf.border ? 'border' : '' if (slot && slot.options && slot.options.length) {
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`) 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}}</${tag}>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElCheckboxGroupChild(conf) { // el-checkbox-group 子级
function buildElCheckboxGroupChild(scheme) {
const children = [] const children = []
if (conf.options && conf.options.length) { const slot = scheme.__slot__
const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox' const config = scheme.__config__
const border = conf.border ? 'border' : '' if (slot && slot.options && slot.options.length) {
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`) 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}}</${tag}>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElUploadChild(conf) { // el-upload 子级
function buildElUploadChild(scheme) {
const list = [] const list = []
if (conf['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>') const config = scheme.__config__
else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${conf.buttonText}</el-button>`) if (scheme['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>')
if (conf.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${conf.fileSize}${conf.sizeUnit} 的${conf.accept}文件</div>`) else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${config.buttonText}</el-button>`)
if (config.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${config.fileSize}${config.sizeUnit} 的${scheme.accept}文件</div>`)
return list.join('\n') return list.join('\n')
} }
export function makeUpHtml(conf, type) { /**
* 组装html代码。【入口函数】
* @param {Object} formConfig 整个表单配置
* @param {String} type 生成类型，文件或弹窗等
*/
export function makeUpHtml(formConfig, type) {
const htmlList = [] const htmlList = []
confGlobal = conf confGlobal = formConfig
someSpanIsNot24 = conf.fields.some(item => item.span !== 24) // 判断布局是否都沾满了24个栅格，以备后续简化代码结构
conf.fields.forEach(el => { someSpanIsNot24 = formConfig.fields.some(item => item.__config__.span !== 24)
htmlList.push(layouts[el.layout](el)) // 遍历渲染每个组件成html
formConfig.fields.forEach(el => {
htmlList.push(layouts[el.__config__.layout](el))
}) })
const htmlStr = htmlList.join('\n') const htmlStr = htmlList.join('\n')
// 将组件代码放进form标签
let temp = buildFormTemplate(conf, htmlStr, type) let temp = buildFormTemplate(formConfig, htmlStr, type)
// dialog标签包裹代码
if (type === 'dialog') { if (type === 'dialog') {
temp = dialogWrapper(temp) temp = dialogWrapper(temp)
} }

189
ruoyi-ui/src/utils/generator/js.js
View File

@ -1,6 +1,6 @@
import { isArray } from 'util' import { isArray } from 'util'
import { exportDefault, titleCase } from '@/utils/index' import { exportDefault, titleCase, deepClone } from '../../utils/index'
import { trigger } from './config' import ruleTrigger from './ruleTrigger'
const units = { const units = {
KB: '1024', KB: '1024',
@ -13,69 +13,91 @@ const inheritAttrs = {
dialog: 'inheritAttrs: false,' dialog: 'inheritAttrs: false,'
} }
/**
export function makeUpJs(conf, type) { * 组装js 【入口函数】
confGlobal = conf = JSON.parse(JSON.stringify(conf)) * @param {Object} formConfig 整个表单配置
* @param {String} type 生成类型，文件或弹窗等
*/
export function makeUpJs(formConfig, type) {
confGlobal = formConfig = deepClone(formConfig)
const dataList = [] const dataList = []
const ruleList = [] const ruleList = []
const optionsList = [] const optionsList = []
const propsList = [] const propsList = []
const methodList = mixinMethod(type) const methodList = mixinMethod(type)
const uploadVarList = [] const uploadVarList = []
const created = []
conf.fields.forEach(el => { formConfig.fields.forEach(el => {
buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created)
}) })
const script = buildexport( const script = buildexport(
conf, formConfig,
type, type,
dataList.join('\n'), dataList.join('\n'),
ruleList.join('\n'), ruleList.join('\n'),
optionsList.join('\n'), optionsList.join('\n'),
uploadVarList.join('\n'), uploadVarList.join('\n'),
propsList.join('\n'), propsList.join('\n'),
methodList.join('\n') methodList.join('\n'),
created.join('\n')
) )
confGlobal = null confGlobal = null
return script return script
} }
function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) { // 构建组件属性
buildData(el, dataList) function buildAttributes(scheme, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created) {
buildRules(el, ruleList) const config = scheme.__config__
const slot = scheme.__slot__
buildData(scheme, dataList)
buildRules(scheme, ruleList)
if (el.options && el.options.length) { // 特殊处理options属性
buildOptions(el, optionsList) if (scheme.options || (slot && slot.options && slot.options.length)) {
if (el.dataType === 'dynamic') { buildOptions(scheme, optionsList)
const model = `${el.vModel}Options` if (config.dataType === 'dynamic') {
const model = `${scheme.__vModel__}Options`
const options = titleCase(model) const options = titleCase(model)
buildOptionMethod(`get${options}`, model, methodList) const methodName = `get${options}`
buildOptionMethod(methodName, model, methodList, scheme)
callInCreated(methodName, created)
} }
} }
if (el.props && el.props.props) { // 处理props
buildProps(el, propsList) if (scheme.props && scheme.props.props) {
buildProps(scheme, propsList)
} }
if (el.action && el.tag === 'el-upload') { // 处理el-upload的action
if (scheme.action && config.tag === 'el-upload') {
uploadVarList.push( uploadVarList.push(
`${el.vModel}Action: '${el.action}', `${scheme.__vModel__}Action: '${scheme.action}',
${el.vModel}fileList: [],` ${scheme.__vModel__}fileList: [],`
) )
methodList.push(buildBeforeUpload(el)) methodList.push(buildBeforeUpload(scheme))
if (!el['auto-upload']) { // 非自动上传时，生成手动上传的函数
methodList.push(buildSubmitUpload(el)) if (!scheme['auto-upload']) {
methodList.push(buildSubmitUpload(scheme))
} }
} }
if (el.children) { // 构建子级组件属性
el.children.forEach(el2 => { if (config.children) {
buildAttributes(el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) config.children.forEach(item => {
buildAttributes(item, dataList, ruleList, optionsList, methodList, propsList, uploadVarList, created)
}) })
} }
} }
// 在Created调用函数
function callInCreated(methodName, created) {
created.push(`this.${methodName}()`)
}
// 混入处理函数
function mixinMethod(type) { function mixinMethod(type) {
const list = []; const const list = []; const
minxins = { minxins = {
@ -98,7 +120,7 @@ function mixinMethod(type) {
close: `close() { close: `close() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
},`, },`,
handleConfirm: `handleConfirm() { handelConfirm: `handelConfirm() {
this.$refs['${confGlobal.formRef}'].validate(valid => { this.$refs['${confGlobal.formRef}'].validate(valid => {
if(!valid) return if(!valid) return
this.close() this.close()
@ -117,73 +139,75 @@ function mixinMethod(type) {
return list return list
} }
function buildData(conf, dataList) { // 构建data
if (conf.vModel === undefined) return function buildData(scheme, dataList) {
let defaultValue const config = scheme.__config__
if (typeof (conf.defaultValue) === 'string' && !conf.multiple) { if (scheme.__vModel__ === undefined) return
defaultValue = `'${conf.defaultValue}'` const defaultValue = JSON.stringify(config.defaultValue)
} else { dataList.push(`${scheme.__vModel__}: ${defaultValue},`)
defaultValue = `${JSON.stringify(conf.defaultValue)}`
}
dataList.push(`${conf.vModel}: ${defaultValue},`)
} }
function buildRules(conf, ruleList) { // 构建校验规则
if (conf.vModel === undefined) return function buildRules(scheme, ruleList) {
const config = scheme.__config__
if (scheme.__vModel__ === undefined) return
const rules = [] const rules = []
if (trigger[conf.tag]) { if (ruleTrigger[config.tag]) {
if (conf.required) { if (config.required) {
const type = isArray(conf.defaultValue) ? 'type: \'array\',' : '' const type = isArray(config.defaultValue) ? 'type: \'array\',' : ''
let message = isArray(conf.defaultValue) ? `请至少选择一个${conf.vModel}` : conf.placeholder let message = isArray(config.defaultValue) ? `请至少选择一个${config.label}` : scheme.placeholder
if (message === undefined) message = `${conf.label}不能为空` if (message === undefined) message = `${config.label}不能为空`
rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.tag]}' }`) rules.push(`{ required: true, ${type} message: '${message}', trigger: '${ruleTrigger[config.tag]}' }`)
} }
if (conf.regList && isArray(conf.regList)) { if (config.regList && isArray(config.regList)) {
conf.regList.forEach(item => { config.regList.forEach(item => {
if (item.pattern) { if (item.pattern) {
rules.push(`{ pattern: ${eval(item.pattern)}, message: '${item.message}', trigger: '${trigger[conf.tag]}' }`) rules.push(
`{ pattern: ${eval(item.pattern)}, message: '${item.message}', trigger: '${ruleTrigger[config.tag]}' }`
)
} }
}) })
} }
ruleList.push(`${conf.vModel}: [${rules.join(',')}],`) ruleList.push(`${scheme.__vModel__}: [${rules.join(',')}],`)
} }
} }
function buildOptions(conf, optionsList) { // 构建options
if (conf.vModel === undefined) return function buildOptions(scheme, optionsList) {
if (conf.dataType === 'dynamic') { conf.options = [] } if (scheme.__vModel__ === undefined) return
const str = `${conf.vModel}Options: ${JSON.stringify(conf.options)},` // 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) optionsList.push(str)
} }
function buildProps(conf, propsList) { function buildProps(scheme, propsList) {
if (conf.dataType === 'dynamic') { const str = `${scheme.__vModel__}Props: ${JSON.stringify(scheme.props.props)},`
conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey)
conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey)
conf.childrenKey !== 'children' && (conf.props.props.children = conf.childrenKey)
}
const str = `${conf.vModel}Props: ${JSON.stringify(conf.props.props)},`
propsList.push(str) propsList.push(str)
} }
function buildBeforeUpload(conf) { // el-upload的BeforeUpload
const unitNum = units[conf.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const function buildBeforeUpload(scheme) {
const config = scheme.__config__
const unitNum = units[config.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const
returnList = [] returnList = []
if (conf.fileSize) { if (config.fileSize) {
rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize} rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${config.fileSize}
if(!isRightSize){ if(!isRightSize){
this.$message.error('文件大小超过 ${conf.fileSize}${conf.sizeUnit}') this.$message.error('文件大小超过 ${config.fileSize}${config.sizeUnit}')
}` }`
returnList.push('isRightSize') returnList.push('isRightSize')
} }
if (conf.accept) { if (scheme.accept) {
acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type) acceptCode = `let isAccept = new RegExp('${scheme.accept}').test(file.type)
if(!isAccept){ if(!isAccept){
this.$message.error('应该选择${conf.accept}类型的文件') this.$message.error('应该选择${scheme.accept}类型的文件')
}` }`
returnList.push('isAccept') returnList.push('isAccept')
} }
const str = `${conf.vModel}BeforeUpload(file) { const str = `${scheme.__vModel__}BeforeUpload(file) {
${rightSizeCode} ${rightSizeCode}
${acceptCode} ${acceptCode}
return ${returnList.join('&&')} return ${returnList.join('&&')}
@ -191,22 +215,31 @@ function buildBeforeUpload(conf) {
return returnList.length ? str : '' return returnList.length ? str : ''
} }
function buildSubmitUpload(conf) { // el-upload的submit
function buildSubmitUpload(scheme) {
const str = `submitUpload() { const str = `submitUpload() {
this.$refs['${conf.vModel}'].submit() this.$refs['${scheme.__vModel__}'].submit()
},` },`
return str return str
} }
function buildOptionMethod(methodName, model, methodList) { function buildOptionMethod(methodName, model, methodList, scheme) {
const config = scheme.__config__
const str = `${methodName}() { const str = `${methodName}() {
// TODO 发起请求获取数据 // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
this.${model} this.$axios({
method: '${config.method}',
url: '${config.url}'
}).then(resp => {
var { data } = resp
this.${model} = data.${config.dataPath}
})
},` },`
methodList.push(str) methodList.push(str)
} }
function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) { // js整体拼接
function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods, created) {
const str = `${exportDefault}{ const str = `${exportDefault}{
${inheritAttrs[type]} ${inheritAttrs[type]}
components: {}, components: {},
@ -226,7 +259,9 @@ function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, m
}, },
computed: {}, computed: {},
watch: {}, watch: {},
created () {}, created () {
${created}
},
mounted () {}, mounted () {},
methods: { methods: {
${methods} ${methods}

16
ruoyi-ui/src/utils/generator/ruleTrigger.js 100644
View File

@ -0,0 +1,16 @@
/**
* 用于生成表单校验，指定正则规则的触发方式。
* 未在此处声明无触发方式的组件将不生成rule！！
*/
export default {
'el-input': 'blur',
'el-input-number': 'blur',
'el-select': 'change',
'el-radio-group': 'change',
'el-checkbox-group': 'change',
'el-cascader': 'change',
'el-time-picker': 'change',
'el-date-picker': 'change',
'el-rate': 'change',
tinymce: 'blur'
}

19
ruoyi-ui/src/views/tool/build/FormDrawer.vue
View File

@ -9,7 +9,7 @@
<i class="el-icon-setting" /> <i class="el-icon-setting" />
</el-badge> </el-badge>
</div> </div>
<el-tabs v-model="activeTab" type="card" class="editor-tabs"> <el-tabs v-model="activeTab" type="border-card" class="editor-tabs">
<el-tab-pane name="html"> <el-tab-pane name="html">
<span slot="label"> <span slot="label">
<i v-if="activeTab==='html'" class="el-icon-edit" /> <i v-if="activeTab==='html'" class="el-icon-edit" />
@ -32,9 +32,9 @@
</span> </span>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div v-show="activeTab==='html'" id="editorHtml" class="tab-editor" /> <div v-show="activeTab==='html'" style="margin-top: 8px" id="editorHtml" class="tab-editor" />
<div v-show="activeTab==='js'" id="editorJs" class="tab-editor" /> <div v-show="activeTab==='js'" style="margin-top: 8px" id="editorJs" class="tab-editor" />
<div v-show="activeTab==='css'" id="editorCss" class="tab-editor" /> <div v-show="activeTab==='css'" style="margin-top: 8px" id="editorCss" class="tab-editor" />
</el-col> </el-col>
<el-col :md="24" :lg="12" class="right-preview"> <el-col :md="24" :lg="12" class="right-preview">
<div class="action-bar" :style="{'text-align': 'left'}"> <div class="action-bar" :style="{'text-align': 'left'}">
@ -60,9 +60,10 @@
ref="previewPage" ref="previewPage"
class="result-wrapper" class="result-wrapper"
frameborder="0" frameborder="0"
src="preview.html" :src="url"
@load="iframeLoad" @load="iframeLoad"
/> />
<!-- <i-frame v-show="isIframeLoaded" :src="url" />-->
<div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" /> <div v-show="!isIframeLoaded" v-loading="true" class="result-wrapper" />
</el-col> </el-col>
</el-row> </el-row>
@ -76,6 +77,7 @@
</div> </div>
</template> </template>
<script> <script>
import iFrame from "@/components/iFrame/index";
import { parse } from '@babel/parser' import { parse } from '@babel/parser'
import ClipboardJS from 'clipboard' import ClipboardJS from 'clipboard'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
@ -84,7 +86,7 @@ import {
} from '@/utils/generator/html' } from '@/utils/generator/html'
import { makeUpJs } from '@/utils/generator/js' import { makeUpJs } from '@/utils/generator/js'
import { makeUpCss } from '@/utils/generator/css' import { makeUpCss } from '@/utils/generator/css'
import { exportDefault, beautifierConf, titleCase } from '@/utils/index' import { exportDefault, beautifierConf, titleCase } from '@/utils'
import ResourceDialog from './ResourceDialog' import ResourceDialog from './ResourceDialog'
import loadMonaco from '@/utils/loadMonaco' import loadMonaco from '@/utils/loadMonaco'
import loadBeautifier from '@/utils/loadBeautifier' import loadBeautifier from '@/utils/loadBeautifier'
@ -103,7 +105,7 @@ let beautifier
let monaco let monaco
export default { export default {
components: { ResourceDialog }, components: { ResourceDialog,iFrame },
props: ['formData', 'generateConf'], props: ['formData', 'generateConf'],
data() { data() {
return { return {
@ -118,7 +120,8 @@ export default {
resourceVisible: false, resourceVisible: false,
scripts: [], scripts: [],
links: [], links: [],
monaco: null monaco: null,
url: "/preview.html",
} }
}, },
computed: { computed: {

2
ruoyi-ui/src/views/tool/build/ResourceDialog.vue
View File

@ -60,7 +60,7 @@
</div> </div>
</template> </template>
<script> <script>
import { deepClone } from '@/utils/index' import { deepClone } from '@/utils'
export default { export default {
components: {}, components: {},

2
ruoyi-ui/src/views/tool/build/RightPanel.vue
View File

@ -651,7 +651,7 @@
<script> <script>
import { isArray } from 'util' import { isArray } from 'util'
import TreeNodeDialog from './TreeNodeDialog' import TreeNodeDialog from './TreeNodeDialog'
import { isNumberStr } from '@/utils/index' import { isNumberStr } from '@/utils'
import IconsDialog from './IconsDialog' import IconsDialog from './IconsDialog'
import { import {
inputComponents, selectComponents, layoutComponents inputComponents, selectComponents, layoutComponents

2
ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue
View File

@ -71,7 +71,7 @@
</div> </div>
</template> </template>
<script> <script>
import { isNumberStr } from '@/utils/index' import { isNumberStr } from '@/utils'
import { getTreeNodeId, saveTreeNodeId } from '@/utils/db' import { getTreeNodeId, saveTreeNodeId } from '@/utils/db'
const id = getTreeNodeId() const id = getTreeNodeId()

6
ruoyi-ui/src/views/tool/build/index.vue
View File

@ -41,9 +41,9 @@
<div class="center-board"> <div class="center-board">
<div class="action-bar"> <div class="action-bar">
<el-button icon="el-icon-video-play" type="text" @click="run"> <!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
运行 <!-- 运行-->
</el-button> <!-- </el-button>-->
<el-button icon="el-icon-plus" type="text" @click="handleForm"> <el-button icon="el-icon-plus" type="text" @click="handleForm">
保存 保存
</el-button> </el-button>