Skip to content

S
sts网站
Commit a29201a2 authored by 稚屿's avatar 稚屿
Browse files
Options

修正单词拼写错误

parent 612c4293
Hide whitespace changes
Inline Side-by-side
Showing with 1662 additions and 1662 deletions
ruoyi-ui/src/utils/generator/drawingDefalut.js → ruoyi-ui/src/utils/generator/drawingDefault.js
View file @ a29201a2
export default [ export default [
{ {
layout: 'colFormItem', layout: 'colFormItem',
tagIcon: 'input', tagIcon: 'input',
label: '手机号', label: '手机号',
vModel: 'mobile', vModel: 'mobile',
formId: 6, formId: 6,
tag: 'el-input', tag: 'el-input',
placeholder: '请输入手机号', placeholder: '请输入手机号',
defaultValue: '', defaultValue: '',
span: 24, span: 24,
style: { width: '100%' }, style: { width: '100%' },
clearable: true, clearable: true,
prepend: '', prepend: '',
append: '', append: '',
'prefix-icon': 'el-icon-mobile', 'prefix-icon': 'el-icon-mobile',
'suffix-icon': '', 'suffix-icon': '',
maxlength: 11, maxlength: 11,
'show-word-limit': true, 'show-word-limit': true,
readonly: false, readonly: false,
disabled: false, disabled: false,
required: true, required: true,
changeTag: true, changeTag: true,
regList: [{ regList: [{
pattern: '/^1(3|4|5|7|8|9)\\d{9}$/', pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
message: '手机号格式错误' message: '手机号格式错误'
}] }]
} }
] ]
ruoyi-ui/src/utils/generator/html.js
View file @ a29201a2
/* eslint-disable max-len */ /* eslint-disable max-len */
import { trigger } from './config' import { trigger } from './config'
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 Titile"> return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title">
${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="handelConfirm">确定</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button>
</div> </div>
</el-dialog>` </el-dialog>`
} }
export function vueTemplate(str) { export function vueTemplate(str) {
return `<template> return `<template>
<div> <div>
${str} ${str}
</div> </div>
</template>` </template>`
} }
export function vueScript(str) { export function vueScript(str) {
return `<script> return `<script>
${str} ${str}
</script>` </script>`
} }
export function cssStyle(cssStr) { export function cssStyle(cssStr) {
return `<style> return `<style>
${cssStr} ${cssStr}
</style>` </style>`
} }
function buildFormTemplate(conf, child, type) { function buildFormTemplate(conf, child, type) {
let labelPosition = '' let labelPosition = ''
if (conf.labelPosition !== 'right') { if (conf.labelPosition !== 'right') {
labelPosition = `label-position="${conf.labelPosition}"` labelPosition = `label-position="${conf.labelPosition}"`
} }
const disabled = conf.disabled ? `:disabled="${conf.disabled}"` : '' const disabled = conf.disabled ? `:disabled="${conf.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="${conf.formRef}" :model="${conf.formModel}" :rules="${conf.formRules}" size="${conf.size}" ${disabled} label-width="${conf.labelWidth}px" ${labelPosition}>
${child} ${child}
${buildFromBtns(conf, type)} ${buildFromBtns(conf, type)}
</el-form>` </el-form>`
if (someSpanIsNot24) { if (someSpanIsNot24) {
str = `<el-row :gutter="${conf.gutter}"> str = `<el-row :gutter="${conf.gutter}">
${str} ${str}
</el-row>` </el-row>`
} }
return str return str
} }
function buildFromBtns(conf, type) { function buildFromBtns(conf, type) {
let str = '' let str = ''
if (conf.formBtns && type === 'file') { if (conf.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>
</el-form-item>` </el-form-item>`
if (someSpanIsNot24) { if (someSpanIsNot24) {
str = `<el-col :span="24"> str = `<el-col :span="24">
${str} ${str}
</el-col>` </el-col>`
} }
} }
return str return str
} }
// span不为24的用el-col包裹 // span不为24的用el-col包裹
function colWrapper(element, str) { function colWrapper(element, str) {
if (someSpanIsNot24 || element.span !== 24) { if (someSpanIsNot24 || element.span !== 24) {
return `<el-col :span="${element.span}"> return `<el-col :span="${element.span}">
${str} ${str}
</el-col>` </el-col>`
} }
return str return str
} }
const layouts = { const layouts = {
colFormItem(element) { colFormItem(element) {
let labelWidth = '' let labelWidth = ''
if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) { if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) {
labelWidth = `label-width="${element.labelWidth}px"` labelWidth = `label-width="${element.labelWidth}px"`
} }
const required = !trigger[element.tag] && element.required ? 'required' : '' const required = !trigger[element.tag] && element.required ? 'required' : ''
const tagDom = tags[element.tag] ? tags[element.tag](element) : null const tagDom = tags[element.tag] ? tags[element.tag](element) : null
let str = `<el-form-item ${labelWidth} label="${element.label}" prop="${element.vModel}" ${required}> let str = `<el-form-item ${labelWidth} label="${element.label}" prop="${element.vModel}" ${required}>
${tagDom} ${tagDom}
</el-form-item>` </el-form-item>`
str = colWrapper(element, str) str = colWrapper(element, str)
return str return str
}, },
rowFormItem(element) { rowFormItem(element) {
const type = element.type === 'default' ? '' : `type="${element.type}"` const type = element.type === 'default' ? '' : `type="${element.type}"`
const justify = element.type === 'default' ? '' : `justify="${element.justify}"` const justify = element.type === 'default' ? '' : `justify="${element.justify}"`
const align = element.type === 'default' ? '' : `align="${element.align}"` const align = element.type === 'default' ? '' : `align="${element.align}"`
const gutter = element.gutter ? `gutter="${element.gutter}"` : '' const gutter = element.gutter ? `gutter="${element.gutter}"` : ''
const children = element.children.map(el => layouts[el.layout](el)) const children = element.children.map(el => layouts[el.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(element, str)
return str return str
} }
} }
const tags = { const tags = {
'el-button': el => { 'el-button': el => {
const { const {
tag, disabled tag, disabled
} = 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 size = el.size ? `size="${el.size}"` : '' const size = el.size ? `size="${el.size}"` : ''
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 `<${el.tag} ${type} ${icon} ${size} ${disabled}>${child}</${el.tag}>`
}, },
'el-input': el => { 'el-input': el => {
const { const {
disabled, vModel, clearable, placeholder, width 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' : ''
const readonly = el.readonly ? 'readonly' : '' const readonly = el.readonly ? 'readonly' : ''
const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : '' const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : ''
const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : '' const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : ''
const showPassword = el['show-password'] ? 'show-password' : '' const showPassword = el['show-password'] ? 'show-password' : ''
const type = el.type ? `type="${el.type}"` : '' const type = el.type ? `type="${el.type}"` : ''
const autosize = el.autosize && el.autosize.minRows const autosize = el.autosize && el.autosize.minRows
? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"` ? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"`
: '' : ''
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 `<${el.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${el.tag}>`
}, },
'el-input-number': el => { 'el-input-number': el => {
const { disabled, vModel, placeholder } = attrBuilder(el) const { 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}'` : ''
const step = el.step ? `:step='${el.step}'` : '' const step = el.step ? `:step='${el.step}'` : ''
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 `<${el.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${el.tag}>`
}, },
'el-select': el => { 'el-select': el => {
const { const {
disabled, vModel, clearable, placeholder, width 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 `<${el.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${el.tag}>`
}, },
'el-radio-group': el => { 'el-radio-group': el => {
const { disabled, vModel } = attrBuilder(el) const { 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 `<${el.tag} ${vModel} ${size} ${disabled}>${child}</${el.tag}>`
}, },
'el-checkbox-group': el => { 'el-checkbox-group': el => {
const { disabled, vModel } = attrBuilder(el) const { 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 `<${el.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${el.tag}>`
}, },
'el-switch': el => { 'el-switch': el => {
const { disabled, vModel } = attrBuilder(el) const { 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']}"` : ''
const inactiveColor = el['inactive-color'] ? `inactive-color="${el['inactive-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 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 `<${el.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${el.tag}>`
}, },
'el-cascader': el => { 'el-cascader': el => {
const { const {
disabled, vModel, clearable, placeholder, width 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 `<${el.tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}></${el.tag}>`
}, },
'el-slider': el => { 'el-slider': el => {
const { disabled, vModel } = attrBuilder(el) const { 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 `<${el.tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}></${el.tag}>`
}, },
'el-time-picker': el => { 'el-time-picker': el => {
const { const {
disabled, vModel, clearable, placeholder, width 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']}"` : ''
const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : '' const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
const isRange = el['is-range'] ? 'is-range' : '' const isRange = el['is-range'] ? 'is-range' : ''
const format = el.format ? `format="${el.format}"` : '' const format = el.format ? `format="${el.format}"` : ''
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 `<${el.tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}></${el.tag}>`
}, },
'el-date-picker': el => { 'el-date-picker': el => {
const { const {
disabled, vModel, clearable, placeholder, width 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']}"` : ''
const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : '' const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
const format = el.format ? `format="${el.format}"` : '' const format = el.format ? `format="${el.format}"` : ''
const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : '' const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
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 `<${el.tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}></${el.tag}>`
}, },
'el-rate': el => { 'el-rate': el => {
const { disabled, vModel } = attrBuilder(el) const { 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 `<${el.tag} ${vModel} ${allowHalf} ${showText} ${showScore} ${disabled}></${el.tag}>`
}, },
'el-color-picker': el => { 'el-color-picker': el => {
const { disabled, vModel } = attrBuilder(el) const { 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 `<${el.tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}></${el.tag}>`
}, },
'el-upload': el => { 'el-upload': el => {
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 `<${el.tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${el.tag}>`
} }
} }
function attrBuilder(el) { function attrBuilder(el) {
return { return {
vModel: `v-model="${confGlobal.formModel}.${el.vModel}"`, 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%\'}"' : '',
disabled: el.disabled ? ':disabled=\'true\'' : '' disabled: el.disabled ? ':disabled=\'true\'' : ''
} }
} }
// el-buttin 子级 // el-buttin 子级
function buildElButtonChild(conf) { function buildElButtonChild(conf) {
const children = [] const children = []
if (conf.default) { if (conf.default) {
children.push(conf.default) children.push(conf.default)
} }
return children.join('\n') return children.join('\n')
} }
// el-input innerHTML // el-input innerHTML
function buildElInputChild(conf) { function buildElInputChild(conf) {
const children = [] const children = []
if (conf.prepend) { if (conf.prepend) {
children.push(`<template slot="prepend">${conf.prepend}</template>`) children.push(`<template slot="prepend">${conf.prepend}</template>`)
} }
if (conf.append) { if (conf.append) {
children.push(`<template slot="append">${conf.append}</template>`) children.push(`<template slot="append">${conf.append}</template>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElSelectChild(conf) { function buildElSelectChild(conf) {
const children = [] const children = []
if (conf.options && conf.options.length) { if (conf.options && conf.options.length) {
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>`) 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>`)
} }
return children.join('\n') return children.join('\n')
} }
function buildElRadioGroupChild(conf) { function buildElRadioGroupChild(conf) {
const children = [] const children = []
if (conf.options && conf.options.length) { if (conf.options && conf.options.length) {
const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio' const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio'
const border = conf.border ? 'border' : '' const border = conf.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`) children.push(`<${tag} v-for="(item, index) in ${conf.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) { function buildElCheckboxGroupChild(conf) {
const children = [] const children = []
if (conf.options && conf.options.length) { if (conf.options && conf.options.length) {
const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox' const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
const border = conf.border ? 'border' : '' const border = conf.border ? 'border' : ''
children.push(`<${tag} v-for="(item, index) in ${conf.vModel}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`) children.push(`<${tag} v-for="(item, index) in ${conf.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) { function buildElUploadChild(conf) {
const list = [] const list = []
if (conf['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>') if (conf['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>')
else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${conf.buttonText}</el-button>`) else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${conf.buttonText}</el-button>`)
if (conf.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${conf.fileSize}${conf.sizeUnit} 的${conf.accept}文件</div>`) if (conf.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${conf.fileSize}${conf.sizeUnit} 的${conf.accept}文件</div>`)
return list.join('\n') return list.join('\n')
} }
export function makeUpHtml(conf, type) { export function makeUpHtml(conf, type) {
const htmlList = [] const htmlList = []
confGlobal = conf confGlobal = conf
someSpanIsNot24 = conf.fields.some(item => item.span !== 24) someSpanIsNot24 = conf.fields.some(item => item.span !== 24)
conf.fields.forEach(el => { conf.fields.forEach(el => {
htmlList.push(layouts[el.layout](el)) htmlList.push(layouts[el.layout](el))
}) })
const htmlStr = htmlList.join('\n') const htmlStr = htmlList.join('\n')
let temp = buildFormTemplate(conf, htmlStr, type) let temp = buildFormTemplate(conf, htmlStr, type)
if (type === 'dialog') { if (type === 'dialog') {
temp = dialogWrapper(temp) temp = dialogWrapper(temp)
} }
confGlobal = null confGlobal = null
return temp return temp
} }
ruoyi-ui/src/utils/generator/js.js
View file @ a29201a2
import { isArray } from 'util' import { isArray } from 'util'
import { exportDefault, titleCase } from '@/utils/index' import { exportDefault, titleCase } from '@/utils/index'
import { trigger } from './config' import { trigger } from './config'
const units = { const units = {
KB: '1024', KB: '1024',
MB: '1024 / 1024', MB: '1024 / 1024',
GB: '1024 / 1024 / 1024' GB: '1024 / 1024 / 1024'
} }
let confGlobal let confGlobal
const inheritAttrs = { const inheritAttrs = {
file: '', file: '',
dialog: 'inheritAttrs: false,' dialog: 'inheritAttrs: false,'
} }
export function makeUpJs(conf, type) { export function makeUpJs(conf, type) {
confGlobal = conf = JSON.parse(JSON.stringify(conf)) confGlobal = conf = JSON.parse(JSON.stringify(conf))
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 = []
conf.fields.forEach(el => { conf.fields.forEach(el => {
buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
}) })
const script = buildexport( const script = buildexport(
conf, conf,
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')
) )
confGlobal = null confGlobal = null
return script return script
} }
function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) { function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) {
buildData(el, dataList) buildData(el, dataList)
buildRules(el, ruleList) buildRules(el, ruleList)
if (el.options && el.options.length) { if (el.options && el.options.length) {
buildOptions(el, optionsList) buildOptions(el, optionsList)
if (el.dataType === 'dynamic') { if (el.dataType === 'dynamic') {
const model = `${el.vModel}Options` const model = `${el.vModel}Options`
const options = titleCase(model) const options = titleCase(model)
buildOptionMethod(`get${options}`, model, methodList) buildOptionMethod(`get${options}`, model, methodList)
} }
} }
if (el.props && el.props.props) { if (el.props && el.props.props) {
buildProps(el, propsList) buildProps(el, propsList)
} }
if (el.action && el.tag === 'el-upload') { if (el.action && el.tag === 'el-upload') {
uploadVarList.push( uploadVarList.push(
`${el.vModel}Action: '${el.action}', `${el.vModel}Action: '${el.action}',
${el.vModel}fileList: [],` ${el.vModel}fileList: [],`
) )
methodList.push(buildBeforeUpload(el)) methodList.push(buildBeforeUpload(el))
if (!el['auto-upload']) { if (!el['auto-upload']) {
methodList.push(buildSubmitUpload(el)) methodList.push(buildSubmitUpload(el))
} }
} }
if (el.children) { if (el.children) {
el.children.forEach(el2 => { el.children.forEach(el2 => {
buildAttributes(el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) buildAttributes(el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
}) })
} }
} }
function mixinMethod(type) { function mixinMethod(type) {
const list = []; const const list = []; const
minxins = { minxins = {
file: confGlobal.formBtns ? { file: confGlobal.formBtns ? {
submitForm: `submitForm() { submitForm: `submitForm() {
this.$refs['${confGlobal.formRef}'].validate(valid => { this.$refs['${confGlobal.formRef}'].validate(valid => {
if(!valid) return if(!valid) return
// TODO 提交表单 // TODO 提交表单
}) })
},`, },`,
resetForm: `resetForm() { resetForm: `resetForm() {
this.$refs['${confGlobal.formRef}'].resetFields() this.$refs['${confGlobal.formRef}'].resetFields()
},` },`
} : null, } : null,
dialog: { dialog: {
onOpen: 'onOpen() {},', onOpen: 'onOpen() {},',
onClose: `onClose() { onClose: `onClose() {
this.$refs['${confGlobal.formRef}'].resetFields() this.$refs['${confGlobal.formRef}'].resetFields()
},`, },`,
close: `close() { close: `close() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
},`, },`,
handelConfirm: `handelConfirm() { handleConfirm: `handleConfirm() {
this.$refs['${confGlobal.formRef}'].validate(valid => { this.$refs['${confGlobal.formRef}'].validate(valid => {
if(!valid) return if(!valid) return
this.close() this.close()
}) })
},` },`
} }
} }
const methods = minxins[type] const methods = minxins[type]
if (methods) { if (methods) {
Object.keys(methods).forEach(key => { Object.keys(methods).forEach(key => {
list.push(methods[key]) list.push(methods[key])
}) })
} }
return list return list
} }
function buildData(conf, dataList) { function buildData(conf, dataList) {
if (conf.vModel === undefined) return if (conf.vModel === undefined) return
let defaultValue let defaultValue
if (typeof (conf.defaultValue) === 'string' && !conf.multiple) { if (typeof (conf.defaultValue) === 'string' && !conf.multiple) {
defaultValue = `'${conf.defaultValue}'` defaultValue = `'${conf.defaultValue}'`
} else { } else {
defaultValue = `${JSON.stringify(conf.defaultValue)}` defaultValue = `${JSON.stringify(conf.defaultValue)}`
} }
dataList.push(`${conf.vModel}: ${defaultValue},`) dataList.push(`${conf.vModel}: ${defaultValue},`)
} }
function buildRules(conf, ruleList) { function buildRules(conf, ruleList) {
if (conf.vModel === undefined) return if (conf.vModel === undefined) return
const rules = [] const rules = []
if (trigger[conf.tag]) { if (trigger[conf.tag]) {
if (conf.required) { if (conf.required) {
const type = isArray(conf.defaultValue) ? 'type: \'array\',' : '' const type = isArray(conf.defaultValue) ? 'type: \'array\',' : ''
let message = isArray(conf.defaultValue) ? `请至少选择一个${conf.vModel}` : conf.placeholder let message = isArray(conf.defaultValue) ? `请至少选择一个${conf.vModel}` : conf.placeholder
if (message === undefined) message = `${conf.label}不能为空` if (message === undefined) message = `${conf.label}不能为空`
rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.tag]}' }`) rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.tag]}' }`)
} }
if (conf.regList && isArray(conf.regList)) { if (conf.regList && isArray(conf.regList)) {
conf.regList.forEach(item => { conf.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: '${trigger[conf.tag]}' }`)
} }
}) })
} }
ruleList.push(`${conf.vModel}: [${rules.join(',')}],`) ruleList.push(`${conf.vModel}: [${rules.join(',')}],`)
} }
} }
function buildOptions(conf, optionsList) { function buildOptions(conf, optionsList) {
if (conf.vModel === undefined) return if (conf.vModel === undefined) return
if (conf.dataType === 'dynamic') { conf.options = [] } if (conf.dataType === 'dynamic') { conf.options = [] }
const str = `${conf.vModel}Options: ${JSON.stringify(conf.options)},` const str = `${conf.vModel}Options: ${JSON.stringify(conf.options)},`
optionsList.push(str) optionsList.push(str)
} }
function buildProps(conf, propsList) { function buildProps(conf, propsList) {
if (conf.dataType === 'dynamic') { if (conf.dataType === 'dynamic') {
conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey) conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey)
conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey) conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey)
conf.childrenKey !== 'children' && (conf.props.props.children = conf.childrenKey) conf.childrenKey !== 'children' && (conf.props.props.children = conf.childrenKey)
} }
const str = `${conf.vModel}Props: ${JSON.stringify(conf.props.props)},` const str = `${conf.vModel}Props: ${JSON.stringify(conf.props.props)},`
propsList.push(str) propsList.push(str)
} }
function buildBeforeUpload(conf) { function buildBeforeUpload(conf) {
const unitNum = units[conf.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const const unitNum = units[conf.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const
returnList = [] returnList = []
if (conf.fileSize) { if (conf.fileSize) {
rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize} rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize}
if(!isRightSize){ if(!isRightSize){
this.$message.error('文件大小超过 ${conf.fileSize}${conf.sizeUnit}') this.$message.error('文件大小超过 ${conf.fileSize}${conf.sizeUnit}')
}` }`
returnList.push('isRightSize') returnList.push('isRightSize')
} }
if (conf.accept) { if (conf.accept) {
acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type) acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type)
if(!isAccept){ if(!isAccept){
this.$message.error('应该选择${conf.accept}类型的文件') this.$message.error('应该选择${conf.accept}类型的文件')
}` }`
returnList.push('isAccept') returnList.push('isAccept')
} }
const str = `${conf.vModel}BeforeUpload(file) { const str = `${conf.vModel}BeforeUpload(file) {
${rightSizeCode} ${rightSizeCode}
${acceptCode} ${acceptCode}
return ${returnList.join('&&')} return ${returnList.join('&&')}
},` },`
return returnList.length ? str : '' return returnList.length ? str : ''
} }
function buildSubmitUpload(conf) { function buildSubmitUpload(conf) {
const str = `submitUpload() { const str = `submitUpload() {
this.$refs['${conf.vModel}'].submit() this.$refs['${conf.vModel}'].submit()
},` },`
return str return str
} }
function buildOptionMethod(methodName, model, methodList) { function buildOptionMethod(methodName, model, methodList) {
const str = `${methodName}() { const str = `${methodName}() {
// TODO 发起请求获取数据 // TODO 发起请求获取数据
this.${model} this.${model}
},` },`
methodList.push(str) methodList.push(str)
} }
function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) { function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) {
const str = `${exportDefault}{ const str = `${exportDefault}{
${inheritAttrs[type]} ${inheritAttrs[type]}
components: {}, components: {},
props: [], props: [],
data () { data () {
return { return {
${conf.formModel}: { ${conf.formModel}: {
${data} ${data}
}, },
${conf.formRules}: { ${conf.formRules}: {
${rules} ${rules}
}, },
${uploadVar} ${uploadVar}
${selectOptions} ${selectOptions}
${props} ${props}
} }
}, },
computed: {}, computed: {},
watch: {}, watch: {},
created () {}, created () {},
mounted () {}, mounted () {},
methods: { methods: {
${methods} ${methods}
} }
}` }`
return str return str
} }
ruoyi-ui/src/views/tool/build/CodeTypeDialog.vue
View file @ a29201a2
<template> <template>
<div> <div>
<el-dialog <el-dialog
v-bind="$attrs" v-bind="$attrs"
width="500px" width="500px"
:close-on-click-modal="false" :close-on-click-modal="false"
:modal-append-to-body="false" :modal-append-to-body="false"
v-on="$listeners" v-on="$listeners"
@open="onOpen" @open="onOpen"
@close="onClose" @close="onClose"
> >
<el-row :gutter="15"> <el-row :gutter="15">
<el-form <el-form
ref="elForm" ref="elForm"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
size="medium" size="medium"
label-width="100px" label-width="100px"
> >
<el-col :span="24"> <el-col :span="24">
<el-form-item label="生成类型" prop="type"> <el-form-item label="生成类型" prop="type">
<el-radio-group v-model="formData.type"> <el-radio-group v-model="formData.type">
<el-radio-button <el-radio-button
v-for="(item, index) in typeOptions" v-for="(item, index) in typeOptions"
:key="index" :key="index"
:label="item.value" :label="item.value"
:disabled="item.disabled" :disabled="item.disabled"
> >
{{ item.label }} {{ item.label }}
</el-radio-button> </el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="showFileName" label="文件名" prop="fileName"> <el-form-item v-if="showFileName" label="文件名" prop="fileName">
<el-input v-model="formData.fileName" placeholder="请输入文件名" clearable /> <el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
</el-row> </el-row>
<div slot="footer"> <div slot="footer">
<el-button @click="close"> <el-button @click="close">
取消 取消
</el-button> </el-button>
<el-button type="primary" @click="handelConfirm"> <el-button type="primary" @click="handleConfirm">
确定 确定
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
inheritAttrs: false, inheritAttrs: false,
props: ['showFileName'], props: ['showFileName'],
data() { data() {
return { return {
formData: { formData: {
fileName: undefined, fileName: undefined,
type: 'file' type: 'file'
}, },
rules: { rules: {
fileName: [{ fileName: [{
required: true, required: true,
message: '请输入文件名', message: '请输入文件名',
trigger: 'blur' trigger: 'blur'
}], }],
type: [{ type: [{
required: true, required: true,
message: '生成类型不能为空', message: '生成类型不能为空',
trigger: 'change' trigger: 'change'
}] }]
}, },
typeOptions: [{ typeOptions: [{
label: '页面', label: '页面',
value: 'file' value: 'file'
}, { }, {
label: '弹窗', label: '弹窗',
value: 'dialog' value: 'dialog'
}] }]
} }
}, },
computed: { computed: {
}, },
watch: {}, watch: {},
mounted() {}, mounted() {},
methods: { methods: {
onOpen() { onOpen() {
if (this.showFileName) { if (this.showFileName) {
this.formData.fileName = `${+new Date()}.vue` this.formData.fileName = `${+new Date()}.vue`
} }
}, },
onClose() { onClose() {
}, },
close(e) { close(e) {
this.$emit('update:visible', false) this.$emit('update:visible', false)
}, },
handelConfirm() { handleConfirm() {
this.$refs.elForm.validate(valid => { this.$refs.elForm.validate(valid => {
if (!valid) return if (!valid) return
this.$emit('confirm', { ...this.formData }) this.$emit('confirm', { ...this.formData })
this.close() this.close()
}) })
} }
} }
} }
</script> </script>
ruoyi-ui/src/views/tool/build/TreeNodeDialog.vue
View file @ a29201a2
<template> <template>
<div> <div>
<el-dialog <el-dialog
v-bind="$attrs" v-bind="$attrs"
:close-on-click-modal="false" :close-on-click-modal="false"
:modal-append-to-body="false" :modal-append-to-body="false"
v-on="$listeners" v-on="$listeners"
@open="onOpen" @open="onOpen"
@close="onClose" @close="onClose"
> >
<el-row :gutter="0"> <el-row :gutter="0">
<el-form <el-form
ref="elForm" ref="elForm"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
size="small" size="small"
label-width="100px" label-width="100px"
> >
<el-col :span="24"> <el-col :span="24">
<el-form-item <el-form-item
label="选项名" label="选项名"
prop="label" prop="label"
> >
<el-input <el-input
v-model="formData.label" v-model="formData.label"
placeholder="请输入选项名" placeholder="请输入选项名"
clearable clearable
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item <el-form-item
label="选项值" label="选项值"
prop="value" prop="value"
> >
<el-input <el-input
v-model="formData.value" v-model="formData.value"
placeholder="请输入选项值" placeholder="请输入选项值"
clearable clearable
> >
<el-select <el-select
slot="append" slot="append"
v-model="dataType" v-model="dataType"
:style="{width: '100px'}" :style="{width: '100px'}"
> >
<el-option <el-option
v-for="(item, index) in dataTypeOptions" v-for="(item, index) in dataTypeOptions"
:key="index" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
:disabled="item.disabled" :disabled="item.disabled"
/> />
</el-select> </el-select>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form> </el-form>
</el-row> </el-row>
<div slot="footer"> <div slot="footer">
<el-button <el-button
type="primary" type="primary"
@click="handelConfirm" @click="handleConfirm"
> >
确定 确定
</el-button> </el-button>
<el-button @click="close"> <el-button @click="close">
取消 取消
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { isNumberStr } from '@/utils/index' import { isNumberStr } from '@/utils/index'
export default { export default {
components: {}, components: {},
inheritAttrs: false, inheritAttrs: false,
props: [], props: [],
data() { data() {
return { return {
id: 100, id: 100,
formData: { formData: {
label: undefined, label: undefined,
value: undefined value: undefined
}, },
rules: { rules: {
label: [ label: [
{ {
required: true, required: true,
message: '请输入选项名', message: '请输入选项名',
trigger: 'blur' trigger: 'blur'
} }
], ],
value: [ value: [
{ {
required: true, required: true,
message: '请输入选项值', message: '请输入选项值',
trigger: 'blur' trigger: 'blur'
} }
] ]
}, },
dataType: 'string', dataType: 'string',
dataTypeOptions: [ dataTypeOptions: [
{ {
label: '字符串', label: '字符串',
value: 'string' value: 'string'
}, },
{ {
label: '数字', label: '数字',
value: 'number' value: 'number'
} }
] ]
} }
}, },
computed: {}, computed: {},
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
'formData.value': function (val) { 'formData.value': function (val) {
this.dataType = isNumberStr(val) ? 'number' : 'string' this.dataType = isNumberStr(val) ? 'number' : 'string'
} }
}, },
created() {}, created() {},
mounted() {}, mounted() {},
methods: { methods: {
onOpen() { onOpen() {
this.formData = { this.formData = {
label: undefined, label: undefined,
value: undefined value: undefined
} }
}, },
onClose() {}, onClose() {},
close() { close() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
}, },
handelConfirm() { handleConfirm() {
this.$refs.elForm.validate(valid => { this.$refs.elForm.validate(valid => {
if (!valid) return if (!valid) return
if (this.dataType === 'number') { if (this.dataType === 'number') {
this.formData.value = parseFloat(this.formData.value) this.formData.value = parseFloat(this.formData.value)
} }
this.formData.id = this.id++ this.formData.id = this.id++
this.$emit('commit', this.formData) this.$emit('commit', this.formData)
this.close() this.close()
}) })
} }
} }
} }
</script> </script>
ruoyi-ui/src/views/tool/build/index.vue
View file @ a29201a2
<template> <template>
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board">
<div class="logo-wrapper"> <div class="logo-wrapper">
<div class="logo"> <div class="logo">
<img :src="logo" alt="logo"> Form Generator <img :src="logo" alt="logo"> Form Generator
</div> </div>
</div> </div>
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
<div class="components-title"> <div class="components-title">
<svg-icon icon-class="component" />输入型组件 <svg-icon icon-class="component" />输入型组件
</div> </div>
<draggable <draggable
class="components-draggable" class="components-draggable"
:list="inputComponents" :list="inputComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent" :clone="cloneComponent"
draggable=".components-item" draggable=".components-item"
:sort="false" :sort="false"
@end="onEnd" @end="onEnd"
> >
<div <div
v-for="(element, index) in inputComponents" :key="index" class="components-item" v-for="(element, index) in inputComponents" :key="index" class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
<svg-icon :icon-class="element.tagIcon" /> <svg-icon :icon-class="element.tagIcon" />
{{ element.label }} {{ element.label }}
</div> </div>
</div> </div>
</draggable> </draggable>
<div class="components-title"> <div class="components-title">
<svg-icon icon-class="component" />选择型组件 <svg-icon icon-class="component" />选择型组件
</div> </div>
<draggable <draggable
class="components-draggable" class="components-draggable"
:list="selectComponents" :list="selectComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent" :clone="cloneComponent"
draggable=".components-item" draggable=".components-item"
:sort="false" :sort="false"
@end="onEnd" @end="onEnd"
> >
<div <div
v-for="(element, index) in selectComponents" v-for="(element, index) in selectComponents"
:key="index" :key="index"
class="components-item" class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
<svg-icon :icon-class="element.tagIcon" /> <svg-icon :icon-class="element.tagIcon" />
{{ element.label }} {{ element.label }}
</div> </div>
</div> </div>
</draggable> </draggable>
<div class="components-title"> <div class="components-title">
<svg-icon icon-class="component" /> 布局型组件 <svg-icon icon-class="component" /> 布局型组件
</div> </div>
<draggable <draggable
class="components-draggable" :list="layoutComponents" class="components-draggable" :list="layoutComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" :group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
draggable=".components-item" :sort="false" @end="onEnd" draggable=".components-item" :sort="false" @end="onEnd"
> >
<div <div
v-for="(element, index) in layoutComponents" :key="index" class="components-item" v-for="(element, index) in layoutComponents" :key="index" class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
<svg-icon :icon-class="element.tagIcon" /> <svg-icon :icon-class="element.tagIcon" />
{{ element.label }} {{ element.label }}
</div> </div>
</div> </div>
</draggable> </draggable>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="center-board"> <div class="center-board">
<div class="action-bar"> <div class="action-bar">
<el-button icon="el-icon-download" type="text" @click="download"> <el-button icon="el-icon-download" type="text" @click="download">
导出vue文件 导出vue文件
</el-button> </el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy"> <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
复制代码 复制代码
</el-button> </el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty"> <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
清空 清空
</el-button> </el-button>
</div> </div>
<el-scrollbar class="center-scrollbar"> <el-scrollbar class="center-scrollbar">
<el-row class="center-board-row" :gutter="formConf.gutter"> <el-row class="center-board-row" :gutter="formConf.gutter">
<el-form <el-form
:size="formConf.size" :size="formConf.size"
:label-position="formConf.labelPosition" :label-position="formConf.labelPosition"
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'" :label-width="formConf.labelWidth + 'px'"
> >
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"> <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
<draggable-item <draggable-item
v-for="(element, index) in drawingList" v-for="(element, index) in drawingList"
:key="element.renderKey" :key="element.renderKey"
:drawing-list="drawingList" :drawing-list="drawingList"
:element="element" :element="element"
:index="index" :index="index"
:active-id="activeId" :active-id="activeId"
:form-conf="formConf" :form-conf="formConf"
@activeItem="activeFormItem" @activeItem="activeFormItem"
@copyItem="drawingItemCopy" @copyItem="drawingItemCopy"
@deleteItem="drawingItemDelete" @deleteItem="drawingItemDelete"
/> />
</draggable> </draggable>
<div v-show="!drawingList.length" class="empty-info"> <div v-show="!drawingList.length" class="empty-info">
从左侧拖入或点选组件进行表单设计 从左侧拖入或点选组件进行表单设计
</div> </div>
</el-form> </el-form>
</el-row> </el-row>
</el-scrollbar> </el-scrollbar>
</div> </div>
<right-panel <right-panel
:active-data="activeData" :active-data="activeData"
:form-conf="formConf" :form-conf="formConf"
:show-field="!!drawingList.length" :show-field="!!drawingList.length"
@tag-change="tagChange" @tag-change="tagChange"
/> />
<code-type-dialog <code-type-dialog
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
title="选择生成类型" title="选择生成类型"
:show-file-name="showFileName" :show-file-name="showFileName"
@confirm="generate" @confirm="generate"
/> />
<input id="copyNode" type="hidden"> <input id="copyNode" type="hidden">
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import beautifier from 'js-beautify' import beautifier from 'js-beautify'
import ClipboardJS from 'clipboard' import ClipboardJS from 'clipboard'
import render from '@/utils/generator/render' import render from '@/utils/generator/render'
import RightPanel from './RightPanel' import RightPanel from './RightPanel'
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config' import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config'
import { beautifierConf, titleCase } from '@/utils/index' import { beautifierConf, titleCase } from '@/utils/index'
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html' import { makeUpHtml, vueTemplate, vueScript, cssStyle } 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 drawingDefalut from '@/utils/generator/drawingDefalut' import drawingDefault from '@/utils/generator/drawingDefault'
import logo from '@/assets/logo/logo.png' import logo from '@/assets/logo/logo.png'
import CodeTypeDialog from './CodeTypeDialog' import CodeTypeDialog from './CodeTypeDialog'
import DraggableItem from './DraggableItem' import DraggableItem from './DraggableItem'
let oldActiveId let oldActiveId
let tempActiveData let tempActiveData
export default { export default {
components: { components: {
draggable, draggable,
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem DraggableItem
}, },
data() { data() {
return { return {
logo, logo,
idGlobal: 100, idGlobal: 100,
formConf, formConf,
inputComponents, inputComponents,
selectComponents, selectComponents,
layoutComponents, layoutComponents,
labelWidth: 100, labelWidth: 100,
drawingList: drawingDefalut, drawingList: drawingDefault,
drawingData: {}, drawingData: {},
activeId: drawingDefalut[0].formId, activeId: drawingDefault[0].formId,
drawerVisible: false, drawerVisible: false,
formData: {}, formData: {},
dialogVisible: false, dialogVisible: false,
generateConf: null, generateConf: null,
showFileName: false, showFileName: false,
activeData: drawingDefalut[0] activeData: drawingDefault[0]
} }
}, },
created() { created() {
// 防止 firefox 下 拖拽 会新打卡一个选项卡 // 防止 firefox 下 拖拽 会新打卡一个选项卡
document.body.ondrop = event => { document.body.ondrop = event => {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
} }
}, },
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) { 'activeData.label': function (val, oldVal) {
if ( if (
this.activeData.placeholder === undefined this.activeData.placeholder === undefined
|| !this.activeData.tag || !this.activeData.tag
|| oldActiveId !== this.activeId || oldActiveId !== this.activeId
) { ) {
return return
} }
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
}, },
activeId: { activeId: {
handler(val) { handler(val) {
oldActiveId = val oldActiveId = val
}, },
immediate: true immediate: true
} }
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS('#copyNode', {
text: trigger => { text: trigger => {
const codeStr = this.generateCode() const codeStr = this.generateCode()
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '代码已复制到剪切板，可粘贴。', message: '代码已复制到剪切板，可粘贴。',
type: 'success' type: 'success'
}) })
return codeStr return codeStr
} }
}) })
clipboard.on('error', e => { clipboard.on('error', e => {
this.$message.error('代码复制失败') this.$message.error('代码复制失败')
}) })
}, },
methods: { methods: {
activeFormItem(element) { activeFormItem(element) {
this.activeData = element this.activeData = element
this.activeId = element.formId this.activeId = element.formId
}, },
onEnd(obj, a) { onEnd(obj, a) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData
this.activeId = this.idGlobal this.activeId = this.idGlobal
} }
}, },
addComponent(item) { addComponent(item) {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item)
this.drawingList.push(clone) this.drawingList.push(clone)
this.activeFormItem(clone) this.activeFormItem(clone)
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin)) const clone = JSON.parse(JSON.stringify(origin))
clone.formId = ++this.idGlobal clone.formId = ++this.idGlobal
clone.span = formConf.span clone.span = formConf.span
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
if (!clone.layout) clone.layout = 'colFormItem' if (!clone.layout) clone.layout = 'colFormItem'
if (clone.layout === 'colFormItem') { if (clone.layout === 'colFormItem') {
clone.vModel = `field${this.idGlobal}` clone.vModel = `field${this.idGlobal}`
clone.placeholder !== undefined && (clone.placeholder += clone.label) clone.placeholder !== undefined && (clone.placeholder += clone.label)
tempActiveData = clone tempActiveData = clone
} else if (clone.layout === 'rowFormItem') { } else if (clone.layout === 'rowFormItem') {
delete clone.label delete clone.label
clone.componentName = `row${this.idGlobal}` clone.componentName = `row${this.idGlobal}`
clone.gutter = this.formConf.gutter clone.gutter = this.formConf.gutter
tempActiveData = clone tempActiveData = clone
} }
return tempActiveData return tempActiveData
}, },
AssembleFormData() { AssembleFormData() {
this.formData = { this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)), fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf ...this.formConf
} }
}, },
generate(data) { generate(data) {
const func = this[`exec${titleCase(this.operationType)}`] const func = this[`exec${titleCase(this.operationType)}`]
this.generateConf = data this.generateConf = data
func && func(data) func && func(data)
}, },
execRun(data) { execRun(data) {
this.AssembleFormData() this.AssembleFormData()
this.drawerVisible = true this.drawerVisible = true
}, },
execDownload(data) { execDownload(data) {
const codeStr = this.generateCode() const codeStr = this.generateCode()
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
this.$download.saveAs(blob, data.fileName) this.$download.saveAs(blob, data.fileName)
}, },
execCopy(data) { execCopy(data) {
document.getElementById('copyNode').click() document.getElementById('copyNode').click()
}, },
empty() { empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then( this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
() => { () => {
this.drawingList = [] this.drawingList = []
} }
) )
}, },
drawingItemCopy(item, parent) { drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item)) let clone = JSON.parse(JSON.stringify(item))
clone = this.createIdAndKey(clone) clone = this.createIdAndKey(clone)
parent.push(clone) parent.push(clone)
this.activeFormItem(clone) this.activeFormItem(clone)
}, },
createIdAndKey(item) { createIdAndKey(item) {
item.formId = ++this.idGlobal item.formId = ++this.idGlobal
item.renderKey = +new Date() item.renderKey = +new Date()
if (item.layout === 'colFormItem') { if (item.layout === 'colFormItem') {
item.vModel = `field${this.idGlobal}` item.vModel = `field${this.idGlobal}`
} else if (item.layout === 'rowFormItem') { } else if (item.layout === 'rowFormItem') {
item.componentName = `row${this.idGlobal}` item.componentName = `row${this.idGlobal}`
} }
if (Array.isArray(item.children)) { if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem)) item.children = item.children.map(childItem => this.createIdAndKey(childItem))
} }
return item return item
}, },
drawingItemDelete(index, parent) { drawingItemDelete(index, parent) {
parent.splice(index, 1) parent.splice(index, 1)
this.$nextTick(() => { this.$nextTick(() => {
const len = this.drawingList.length const len = this.drawingList.length
if (len) { if (len) {
this.activeFormItem(this.drawingList[len - 1]) this.activeFormItem(this.drawingList[len - 1])
} }
}) })
}, },
generateCode() { generateCode() {
const { type } = this.generateConf const { type } = this.generateConf
this.AssembleFormData() this.AssembleFormData()
const script = vueScript(makeUpJs(this.formData, type)) const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type)) const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData)) const css = cssStyle(makeUpCss(this.formData))
return beautifier.html(html + script + css, beautifierConf.html) return beautifier.html(html + script + css, beautifierConf.html)
}, },
download() { download() {
this.dialogVisible = true this.dialogVisible = true
this.showFileName = true this.showFileName = true
this.operationType = 'download' this.operationType = 'download'
}, },
run() { run() {
this.dialogVisible = true this.dialogVisible = true
this.showFileName = false this.showFileName = false
this.operationType = 'run' this.operationType = 'run'
}, },
copy() { copy() {
this.dialogVisible = true this.dialogVisible = true
this.showFileName = false this.showFileName = false
this.operationType = 'copy' this.operationType = 'copy'
}, },
tagChange(newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag)
newTag.vModel = this.activeData.vModel newTag.vModel = this.activeData.vModel
newTag.formId = this.activeId newTag.formId = this.activeId
newTag.span = this.activeData.span newTag.span = this.activeData.span
delete this.activeData.tag delete this.activeData.tag
delete this.activeData.tagIcon delete this.activeData.tagIcon
delete this.activeData.document delete this.activeData.document
Object.keys(newTag).forEach(key => { Object.keys(newTag).forEach(key => {
if (this.activeData[key] !== undefined if (this.activeData[key] !== undefined
&& typeof this.activeData[key] === typeof newTag[key]) { && typeof this.activeData[key] === typeof newTag[key]) {
newTag[key] = this.activeData[key] newTag[key] = this.activeData[key]
} }
}) })
this.activeData = newTag this.activeData = newTag
this.updateDrawingList(newTag, this.drawingList) this.updateDrawingList(newTag, this.drawingList)
}, },
updateDrawingList(newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId) const index = list.findIndex(item => item.formId === this.activeId)
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag) list.splice(index, 1, newTag)
} else { } else {
list.forEach(item => { list.forEach(item => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
}) })
} }
} }
} }
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
body, html{ body, html{
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #fff; background: #fff;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
} }
input, textarea{ input, textarea{
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
} }
.editor-tabs{ .editor-tabs{
background: #121315; background: #121315;
.el-tabs__header{ .el-tabs__header{
margin: 0; margin: 0;
border-bottom-color: #121315; border-bottom-color: #121315;
.el-tabs__nav{ .el-tabs__nav{
border-color: #121315; border-color: #121315;
} }
} }
.el-tabs__item{ .el-tabs__item{
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
color: #888a8e; color: #888a8e;
border-left: 1px solid #121315 !important; border-left: 1px solid #121315 !important;
background: #363636; background: #363636;
margin-right: 5px; margin-right: 5px;
user-select: none; user-select: none;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active{
background: #1e1e1e; background: #1e1e1e;
border-bottom-color: #1e1e1e!important; border-bottom-color: #1e1e1e!important;
color: #fff; color: #fff;
} }
.el-icon-edit{ .el-icon-edit{
color: #f1fa8c; color: #f1fa8c;
} }
.el-icon-document{ .el-icon-document{
color: #a95812; color: #a95812;
} }
} }
// home // home
.right-scrollbar { .right-scrollbar {
.el-scrollbar__view { .el-scrollbar__view {
padding: 12px 18px 15px 15px; padding: 12px 18px 15px 15px;
} }
} }
.left-scrollbar .el-scrollbar__wrap { .left-scrollbar .el-scrollbar__wrap {
box-sizing: border-box; box-sizing: border-box;
overflow-x: hidden !important; overflow-x: hidden !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.center-tabs{ .center-tabs{
.el-tabs__header{ .el-tabs__header{
margin-bottom: 0!important; margin-bottom: 0!important;
} }
.el-tabs__item{ .el-tabs__item{
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
.el-tabs__nav{ .el-tabs__nav{
width: 100%; width: 100%;
} }
} }
.reg-item{ .reg-item{
padding: 12px 6px; padding: 12px 6px;
background: #f8f8f8; background: #f8f8f8;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
.close-btn{ .close-btn{
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -6px;
display: block; display: block;
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border-radius: 50%; border-radius: 50%;
color: #fff; color: #fff;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
&:hover{ &:hover{
background: rgba(210, 23, 23, 0.5) background: rgba(210, 23, 23, 0.5)
} }
} }
& + .reg-item{ & + .reg-item{
margin-top: 18px; margin-top: 18px;
} }
} }
.action-bar{ .action-bar{
& .el-button+.el-button { & .el-button+.el-button {
margin-left: 15px; margin-left: 15px;
} }
& i { & i {
font-size: 20px; font-size: 20px;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: -1px; top: -1px;
} }
} }
.custom-tree-node{ .custom-tree-node{
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
.node-operation{ .node-operation{
float: right; float: right;
} }
i[class*="el-icon"] + i[class*="el-icon"]{ i[class*="el-icon"] + i[class*="el-icon"]{
margin-left: 6px; margin-left: 6px;
} }
.el-icon-plus{ .el-icon-plus{
color: #409EFF; color: #409EFF;
} }
.el-icon-delete{ .el-icon-delete{
color: #157a0c; color: #157a0c;
} }
} }
.left-scrollbar .el-scrollbar__view{ .left-scrollbar .el-scrollbar__view{
overflow-x: hidden; overflow-x: hidden;
} }
.el-rate{ .el-rate{
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
} }
.el-upload__tip{ .el-upload__tip{
line-height: 1.2; line-height: 1.2;
} }
$selectedColor: #f6f7ff; $selectedColor: #f6f7ff;
$lighterBlue: #409EFF; $lighterBlue: #409EFF;
.container { .container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.components-list { .components-list {
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
.components-item { .components-item {
display: inline-block; display: inline-block;
width: 48%; width: 48%;
margin: 1%; margin: 1%;
transition: transform 0ms !important; transition: transform 0ms !important;
} }
} }
.components-draggable{ .components-draggable{
padding-bottom: 20px; padding-bottom: 20px;
} }
.components-title{ .components-title{
font-size: 14px; font-size: 14px;
color: #222; color: #222;
margin: 6px 2px; margin: 6px 2px;
.svg-icon{ .svg-icon{
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
} }
.components-body { .components-body {
padding: 8px 10px; padding: 8px 10px;
background: $selectedColor; background: $selectedColor;
font-size: 12px; font-size: 12px;
cursor: move; cursor: move;
border: 1px dashed $selectedColor; border: 1px dashed $selectedColor;
border-radius: 3px; border-radius: 3px;
.svg-icon{ .svg-icon{
color: #777; color: #777;
font-size: 15px; font-size: 15px;
} }
&:hover { &:hover {
border: 1px dashed #787be8; border: 1px dashed #787be8;
color: #787be8; color: #787be8;
.svg-icon { .svg-icon {
color: #787be8; color: #787be8;
} }
} }
} }
.left-board { .left-board {
width: 260px; width: 260px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
.left-scrollbar{ .left-scrollbar{
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
} }
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
border-left: 1px solid #f1e8e8; border-left: 1px solid #f1e8e8;
border-right: 1px solid #f1e8e8; border-right: 1px solid #f1e8e8;
box-sizing: border-box; box-sizing: border-box;
} }
.center-board { .center-board {
height: 100vh; height: 100vh;
width: auto; width: auto;
margin: 0 350px 0 260px; margin: 0 350px 0 260px;
box-sizing: border-box; box-sizing: border-box;
} }
.empty-info{ .empty-info{
position: absolute; position: absolute;
top: 46%; top: 46%;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: #ccb1ea; color: #ccb1ea;
letter-spacing: 4px; letter-spacing: 4px;
} }
.action-bar{ .action-bar{
position: relative; position: relative;
height: 42px; height: 42px;
text-align: right; text-align: right;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box;; box-sizing: border-box;;
border: 1px solid #f1e8e8; border: 1px solid #f1e8e8;
border-top: none; border-top: none;
border-left: none; border-left: none;
.delete-btn{ .delete-btn{
color: #F56C6C; color: #F56C6C;
} }
} }
.logo-wrapper{ .logo-wrapper{
position: relative; position: relative;
height: 42px; height: 42px;
background: #fff; background: #fff;
border-bottom: 1px solid #f1e8e8; border-bottom: 1px solid #f1e8e8;
box-sizing: border-box; box-sizing: border-box;
} }
.logo{ .logo{
position: absolute; position: absolute;
left: 12px; left: 12px;
top: 6px; top: 6px;
line-height: 30px; line-height: 30px;
color: #00afff; color: #00afff;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
white-space: nowrap; white-space: nowrap;
> img{ > img{
width: 30px; width: 30px;
height: 30px; height: 30px;
vertical-align: top; vertical-align: top;
} }
.github{ .github{
display: inline-block; display: inline-block;
vertical-align: sub; vertical-align: sub;
margin-left: 15px; margin-left: 15px;
> img{ > img{
height: 22px; height: 22px;
} }
} }
} }
.center-board-row { .center-board-row {
padding: 12px 12px 15px 12px; padding: 12px 12px 15px 12px;
box-sizing: border-box; box-sizing: border-box;
& > .el-form { & > .el-form {
// 69 = 12+15+42 // 69 = 12+15+42
height: calc(100vh - 69px); height: calc(100vh - 69px);
} }
} }
.drawing-board { .drawing-board {
height: 100%; height: 100%;
position: relative; position: relative;
.components-body { .components-body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 0; font-size: 0;
} }
.sortable-ghost { .sortable-ghost {
position: relative; position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
&::before { &::before {
content: " "; content: " ";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
height: 3px; height: 3px;
background: rgb(89, 89, 223); background: rgb(89, 89, 223);
z-index: 2; z-index: 2;
} }
} }
.components-item.sortable-ghost { .components-item.sortable-ghost {
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: $selectedColor; background-color: $selectedColor;
} }
.active-from-item { .active-from-item {
& > .el-form-item{ & > .el-form-item{
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy, & > .drawing-item-delete{
display: initial; display: initial;
} }
& > .component-name{ & > .component-name{
color: $lighterBlue; color: $lighterBlue;
} }
} }
.el-form-item{ .el-form-item{
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.drawing-item{ .drawing-item{
position: relative; position: relative;
cursor: move; cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child { &.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc; border: 1px dashed #ccc;
} }
.el-form-item{ .el-form-item{
padding: 12px 10px; padding: 12px 10px;
} }
} }
.drawing-row-item{ .drawing-row-item{
position: relative; position: relative;
cursor: move; cursor: move;
box-sizing: border-box; box-sizing: border-box;
border: 1px dashed #ccc; border: 1px dashed #ccc;
border-radius: 3px; border-radius: 3px;
padding: 0 2px; padding: 0 2px;
margin-bottom: 15px; margin-bottom: 15px;
.drawing-row-item { .drawing-row-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
.el-col{ .el-col{
margin-top: 22px; margin-top: 22px;
} }
.el-form-item{ .el-form-item{
margin-bottom: 0; margin-bottom: 0;
} }
.drag-wrapper{ .drag-wrapper{
min-height: 80px; min-height: 80px;
} }
&.active-from-item{ &.active-from-item{
border: 1px dashed $lighterBlue; border: 1px dashed $lighterBlue;
} }
.component-name{ .component-name{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 12px; font-size: 12px;
color: #bbb; color: #bbb;
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-row-item{ .drawing-item, .drawing-row-item{
&:hover { &:hover {
& > .el-form-item{ & > .el-form-item{
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy, & > .drawing-item-delete{
display: initial; display: initial;
} }
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy, & > .drawing-item-delete{
display: none; display: none;
position: absolute; position: absolute;
top: -10px; top: -10px;
width: 22px; width: 22px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
border-radius: 50%; border-radius: 50%;
font-size: 12px; font-size: 12px;
border: 1px solid; border: 1px solid;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
& > .drawing-item-copy{ & > .drawing-item-copy{
right: 56px; right: 56px;
border-color: $lighterBlue; border-color: $lighterBlue;
color: $lighterBlue; color: $lighterBlue;
background: #fff; background: #fff;
&:hover{ &:hover{
background: $lighterBlue; background: $lighterBlue;
color: #fff; color: #fff;
} }
} }
& > .drawing-item-delete{ & > .drawing-item-delete{
right: 24px; right: 24px;
border-color: #F56C6C; border-color: #F56C6C;
color: #F56C6C; color: #F56C6C;
background: #fff; background: #fff;
&:hover{ &:hover{
background: #F56C6C; background: #F56C6C;
color: #fff; color: #fff;
} }
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment