diff --git a/ruoyi-ui/src/utils/generator/css.js b/ruoyi-ui/src/utils/generator/css.js index c1c62e60..7cb86e64 100644 --- a/ruoyi-ui/src/utils/generator/css.js +++ b/ruoyi-ui/src/utils/generator/css.js @@ -4,10 +4,10 @@ const styles = { } function addCss(cssList, el) { - const css = styles[el.tag] + const css = styles[el.__config__.tag] css && cssList.indexOf(css) === -1 && cssList.push(css) - if (el.children) { - el.children.forEach(el2 => addCss(cssList, el2)) + if (el.__config__.children) { + el.__config__.children.forEach(el2 => addCss(cssList, el2)) } } diff --git a/ruoyi-ui/src/utils/generator/html.js b/ruoyi-ui/src/utils/generator/html.js index 9bcc5361..ac7846cd 100644 --- a/ruoyi-ui/src/utils/generator/html.js +++ b/ruoyi-ui/src/utils/generator/html.js @@ -1,5 +1,5 @@ /* eslint-disable max-len */ -import { trigger } from './config' +import trigger from './ruleTrigger' let confGlobal let someSpanIsNot24 @@ -70,8 +70,8 @@ function buildFromBtns(conf, type) { // span不为24的用el-col包裹 function colWrapper(element, str) { - if (someSpanIsNot24 || element.span !== 24) { - return ` + if (someSpanIsNot24 || element.__config__.span !== 24) { + return ` ${str} ` } @@ -81,12 +81,12 @@ function colWrapper(element, str) { const layouts = { colFormItem(element) { let labelWidth = '' - if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) { - labelWidth = `label-width="${element.labelWidth}px"` + if (element.__config__.labelWidth && element.__config__.labelWidth !== confGlobal.labelWidth) { + labelWidth = `label-width="${element.__config__.labelWidth}px"` } - const required = !trigger[element.tag] && element.required ? 'required' : '' - const tagDom = tags[element.tag] ? tags[element.tag](element) : null - let str = ` + const required = !trigger[element.__config__.tag] && element.__config__.required ? 'required' : '' + const tagDom = tags[element.__config__.tag] ? tags[element.__config__.tag](element) : null + let str = ` ${tagDom} ` str = colWrapper(element, str) @@ -97,7 +97,7 @@ const layouts = { const justify = element.type === 'default' ? '' : `justify="${element.justify}"` const align = element.type === 'default' ? '' : `align="${element.align}"` const gutter = element.gutter ? `gutter="${element.gutter}"` : '' - const children = element.children.map(el => layouts[el.layout](el)) + const children = element.__config__.children.map(el => layouts[el.__config__.layout](el)) let str = ` ${children.join('\n')} ` @@ -117,7 +117,7 @@ const tags = { let child = buildElButtonChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${type} ${icon} ${size} ${disabled}>${child}` + return `<${el.__config__.tag} ${type} ${icon} ${size} ${disabled}>${child}` }, 'el-input': el => { const { @@ -136,7 +136,7 @@ const tags = { let child = buildElInputChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}` + return `<${el.__config__.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}` }, 'el-input-number': el => { const { disabled, vModel, placeholder } = attrBuilder(el) @@ -147,7 +147,7 @@ const tags = { const stepStrictly = el['step-strictly'] ? 'step-strictly' : '' const precision = el.precision ? `:precision='${el.precision}'` : '' - return `<${el.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}>` + return `<${el.__config__.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}>` }, 'el-select': el => { const { @@ -158,7 +158,7 @@ const tags = { let child = buildElSelectChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}` + return `<${el.__config__.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}` }, 'el-radio-group': el => { const { disabled, vModel } = attrBuilder(el) @@ -166,7 +166,7 @@ const tags = { let child = buildElRadioGroupChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${vModel} ${size} ${disabled}>${child}` + return `<${el.__config__.tag} ${vModel} ${size} ${disabled}>${child}` }, 'el-checkbox-group': el => { const { disabled, vModel } = attrBuilder(el) @@ -176,7 +176,7 @@ const tags = { let child = buildElCheckboxGroupChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}` + return `<${el.__config__.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}` }, 'el-switch': el => { const { disabled, vModel } = attrBuilder(el) @@ -187,19 +187,19 @@ const tags = { const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : '' const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : '' - return `<${el.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}>` + return `<${el.__config__.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}>` }, 'el-cascader': el => { const { disabled, vModel, clearable, placeholder, width } = attrBuilder(el) - const options = el.options ? `:options="${el.vModel}Options"` : '' - const props = el.props ? `:props="${el.vModel}Props"` : '' + const options = el.options ? `:options="${el.__vModel__}Options"` : '' + const props = el.props ? `:props="${el.__vModel__}Props"` : '' const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"' const filterable = el.filterable ? 'filterable' : '' const separator = el.separator === '/' ? '' : `separator="${el.separator}"` - return `<${el.tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}>` + return `<${el.__config__.tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}>` }, 'el-slider': el => { const { disabled, vModel } = attrBuilder(el) @@ -209,7 +209,7 @@ const tags = { const range = el.range ? 'range' : '' const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : '' - return `<${el.tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}>` + return `<${el.__config__.tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}>` }, 'el-time-picker': el => { const { @@ -223,7 +223,7 @@ const tags = { const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : '' 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}>` + return `<${el.__config__.tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}>` }, 'el-date-picker': el => { const { @@ -237,7 +237,7 @@ const tags = { const type = el.type === 'date' ? '' : `type="${el.type}"` const readonly = el.readonly ? 'readonly' : '' - return `<${el.tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}>` + return `<${el.__config__.tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}>` }, 'el-rate': el => { const { disabled, vModel } = attrBuilder(el) @@ -246,7 +246,7 @@ const tags = { const showText = el['show-text'] ? 'show-text' : '' const showScore = el['show-score'] ? 'show-score' : '' - return `<${el.tag} ${vModel} ${allowHalf} ${showText} ${showScore} ${disabled}>` + return `<${el.__config__.tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}>` }, 'el-color-picker': el => { const { disabled, vModel } = attrBuilder(el) @@ -254,29 +254,29 @@ const tags = { const showAlpha = el['show-alpha'] ? 'show-alpha' : '' const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : '' - return `<${el.tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}>` + return `<${el.__config__.tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}>` }, 'el-upload': el => { 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 listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : '' const accept = el.accept ? `accept="${el.accept}"` : '' const name = el.name !== 'file' ? `name="${el.name}"` : '' const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : '' - const beforeUpload = `:before-upload="${el.vModel}BeforeUpload"` - const fileList = `:file-list="${el.vModel}fileList"` - const ref = `ref="${el.vModel}"` + const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"` + const fileList = `:file-list="${el.__vModel__}fileList"` + const ref = `ref="${el.__vModel__}"` let child = buildElUploadChild(el) if (child) child = `\n${child}\n` // 换行 - return `<${el.tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}` + return `<${el.__config__.tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}` } } function attrBuilder(el) { return { - vModel: `v-model="${confGlobal.formModel}.${el.vModel}"`, + vModel: `v-model="${confGlobal.formModel}.${el.__vModel__}"`, clearable: el.clearable ? 'clearable' : '', placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '', width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '', @@ -287,8 +287,8 @@ function attrBuilder(el) { // el-buttin 子级 function buildElButtonChild(conf) { const children = [] - if (conf.default) { - children.push(conf.default) + if (conf.__config__.defaultValue) { + children.push(conf.__config__.defaultValue) } return children.join('\n') } @@ -296,39 +296,39 @@ function buildElButtonChild(conf) { // el-input innerHTML function buildElInputChild(conf) { const children = [] - if (conf.prepend) { - children.push(``) + if (conf.__slot__ && conf.__slot__.prepend) { + children.push(``) } - if (conf.append) { - children.push(``) + if (conf.__slot__ && conf.__slot__.append) { + children.push(``) } return children.join('\n') } function buildElSelectChild(conf) { const children = [] - if (conf.options && conf.options.length) { - children.push(``) + if (conf.__slot__.options && conf.__slot__.options.length) { + children.push(``) } return children.join('\n') } function buildElRadioGroupChild(conf) { const children = [] - if (conf.options && conf.options.length) { - const tag = conf.optionType === 'button' ? 'el-radio-button' : 'el-radio' - 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}}`) + if (conf.__slot__.options && conf.__slot__.options.length) { + const tag = conf.__config__.optionType === 'button' ? 'el-radio-button' : 'el-radio' + const border = conf.__config__.border ? 'border' : '' + children.push(`<${tag} v-for="(item, index) in ${conf.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}`) } return children.join('\n') } function buildElCheckboxGroupChild(conf) { const children = [] - if (conf.options && conf.options.length) { - const tag = conf.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox' - 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}}`) + if (conf.__slot__.options && conf.__slot__.options.length) { + const tag = conf.__config__.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox' + const border = conf.__config__.border ? 'border' : '' + children.push(`<${tag} v-for="(item, index) in ${conf.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}`) } return children.join('\n') } @@ -336,8 +336,8 @@ function buildElCheckboxGroupChild(conf) { function buildElUploadChild(conf) { const list = [] if (conf['list-type'] === 'picture-card') list.push('') - else list.push(`${conf.buttonText}`) - if (conf.showTip) list.push(`
只能上传不超过 ${conf.fileSize}${conf.sizeUnit} 的${conf.accept}文件
`) + else list.push(`${conf.__config__.buttonText}`) + if (conf.__config__.showTip) list.push(`
只能上传不超过 ${conf.__config__.fileSize}${conf.__config__.sizeUnit} 的${conf.accept}文件
`) return list.join('\n') } @@ -346,7 +346,7 @@ export function makeUpHtml(conf, type) { confGlobal = conf someSpanIsNot24 = conf.fields.some(item => item.span !== 24) conf.fields.forEach(el => { - htmlList.push(layouts[el.layout](el)) + htmlList.push(layouts[el.__config__.layout](el)) }) const htmlStr = htmlList.join('\n') @@ -357,3 +357,5 @@ export function makeUpHtml(conf, type) { confGlobal = null return temp } + + diff --git a/ruoyi-ui/src/utils/generator/js.js b/ruoyi-ui/src/utils/generator/js.js index 35e3e21a..4e82ba9a 100644 --- a/ruoyi-ui/src/utils/generator/js.js +++ b/ruoyi-ui/src/utils/generator/js.js @@ -1,6 +1,6 @@ import { isArray } from 'util' import { exportDefault, titleCase } from '@/utils/index' -import { trigger } from './config' +import trigger from './ruleTrigger' const units = { KB: '1024', @@ -45,12 +45,18 @@ function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsL buildData(el, dataList) buildRules(el, ruleList) - if (el.options && el.options.length) { - buildOptions(el, optionsList) - if (el.dataType === 'dynamic') { - const model = `${el.vModel}Options` - const options = titleCase(model) - buildOptionMethod(`get${options}`, model, methodList) + if (el.__slot__) { + if (el.__slot__.options && el.__slot__.options.length) { + buildOptions(el, optionsList) + } + } else { + if (el.options && el.options.length) { + buildOptions(el, optionsList) + if (el.__config__.dataType === 'dynamic') { + const model = `${el.__vModel__}Options` + const options = titleCase(model) + buildOptionMethod(`get${options}`, model, methodList) + } } } @@ -58,10 +64,10 @@ function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsL buildProps(el, propsList) } - if (el.action && el.tag === 'el-upload') { + if (el.action && el.__config__.tag === 'el-upload') { uploadVarList.push( - `${el.vModel}Action: '${el.action}', - ${el.vModel}fileList: [],` + `${el.__vModel__}Action: '${el.action}', + ${el.__vModel__}fileList: [],` ) methodList.push(buildBeforeUpload(el)) if (!el['auto-upload']) { @@ -69,8 +75,8 @@ function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsL } } - if (el.children) { - el.children.forEach(el2 => { + if (el.__config__.children) { + el.__config__.children.forEach(el2 => { buildAttributes(el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) }) } @@ -118,61 +124,62 @@ function mixinMethod(type) { } function buildData(conf, dataList) { - if (conf.vModel === undefined) return + if (conf.__vModel__ === undefined) return let defaultValue - if (typeof (conf.defaultValue) === 'string' && !conf.multiple) { - defaultValue = `'${conf.defaultValue}'` + if (typeof (conf.__config__.defaultValue) === 'string' && !conf.multiple) { + defaultValue = `'${conf.__config__.defaultValue}'` } else { - defaultValue = `${JSON.stringify(conf.defaultValue)}` + defaultValue = `${JSON.stringify(conf.__config__.defaultValue)}` } - dataList.push(`${conf.vModel}: ${defaultValue},`) + dataList.push(`${conf.__vModel__}: ${defaultValue},`) } function buildRules(conf, ruleList) { - if (conf.vModel === undefined) return + if (conf.__vModel__ === undefined) return const rules = [] - if (trigger[conf.tag]) { - if (conf.required) { - const type = isArray(conf.defaultValue) ? 'type: \'array\',' : '' - let message = isArray(conf.defaultValue) ? `请至少选择一个${conf.vModel}` : conf.placeholder - if (message === undefined) message = `${conf.label}不能为空` - rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.tag]}' }`) + if (trigger[conf.__config__.tag]) { + if (conf.__config__.required) { + const type = isArray(conf.__config__.defaultValue) ? 'type: \'array\',' : '' + let message = isArray(conf.__config__.defaultValue) ? `请至少选择一个${conf.__vModel__}` : conf.placeholder + if (message === undefined) message = `${conf.__config__.label}不能为空` + rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.__config__.tag]}' }`) } - if (conf.regList && isArray(conf.regList)) { - conf.regList.forEach(item => { + if (conf.__config__.regList && isArray(conf.__config__.regList)) { + conf.__config__.regList.forEach(item => { 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.__config__.tag]}' }`) } }) } - ruleList.push(`${conf.vModel}: [${rules.join(',')}],`) + ruleList.push(`${conf.__vModel__}: [${rules.join(',')}],`) } } function buildOptions(conf, optionsList) { - if (conf.vModel === undefined) return - if (conf.dataType === 'dynamic') { conf.options = [] } - const str = `${conf.vModel}Options: ${JSON.stringify(conf.options)},` + if (conf.__vModel__ === undefined) return + if (conf.__config__.dataType === 'dynamic') { conf.options = [] } + const options = conf.__config__.tag ==='el-cascader'?conf.options:conf.__slot__.options; + const str = `${conf.__vModel__}Options: ${JSON.stringify(options)},` optionsList.push(str) } function buildProps(conf, propsList) { - if (conf.dataType === 'dynamic') { + if (conf.__config__.dataType === 'dynamic') { 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)},` + const str = `${conf.__vModel__}Props: ${JSON.stringify(conf.props.props)},` propsList.push(str) } function buildBeforeUpload(conf) { - const unitNum = units[conf.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const + const unitNum = units[conf.__config__.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const returnList = [] - if (conf.fileSize) { - rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.fileSize} + if (conf.__config__.fileSize) { + rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.__config__.fileSize} if(!isRightSize){ - this.$message.error('文件大小超过 ${conf.fileSize}${conf.sizeUnit}') + this.$message.error('文件大小超过 ${conf.__config__.fileSize}${conf.__config__.sizeUnit}') }` returnList.push('isRightSize') } @@ -183,7 +190,7 @@ function buildBeforeUpload(conf) { }` returnList.push('isAccept') } - const str = `${conf.vModel}BeforeUpload(file) { + const str = `${conf.__vModel__}BeforeUpload(file) { ${rightSizeCode} ${acceptCode} return ${returnList.join('&&')} @@ -193,7 +200,7 @@ function buildBeforeUpload(conf) { function buildSubmitUpload(conf) { const str = `submitUpload() { - this.$refs['${conf.vModel}'].submit() + this.$refs['${conf.__vModel__}'].submit() },` return str }