ui.zip1111111111111111111

/* eslint-disable max-len */ import { trigger } from './config' let confGlobal let someSpanIsNot24 export function dialogWrapper(str) { return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title"> ${str} <div slot="footer"> <el-button @click="close">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </div> </el-dialog>` } export function vueTemplate(str) { return `<template> <div> ${str} </div> </template>` } export function vueScript(str) { return `<script> ${str} </script>` } export function cssStyle(cssStr) { return `<style> ${cssStr} </style>` } function buildFormTemplate(conf, child, type) { let labelPosition = '' if (conf.labelPosition !== 'right') { labelPosition = `label-position="${conf.labelPosition}"` } 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}> ${child} ${buildFromBtns(conf, type)} </el-form>` if (someSpanIsNot24) { str = `<el-row :gutter="${conf.gutter}"> ${str} </el-row>` } return str } function buildFromBtns(conf, type) { let str = '' if (conf.formBtns && type === 'file') { str = `<el-form-item size="large"> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item>` if (someSpanIsNot24) { str = `<el-col :span="24"> ${str} </el-col>` } } return str } // span不为24的用el-col包裹 function colWrapper(element, str) { if (someSpanIsNot24 || element.span !== 24) { return `<el-col :span="${element.span}"> ${str} </el-col>` } return str } const layouts = { colFormItem(element) { let labelWidth = '' if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) { labelWidth = `label-width="${element.labelWidth}px"` } const required = !trigger[element.tag] && element.required ? 'required' : '' const tagDom = tags[element.tag] ? tags[element.tag](element) : null let str = `<el-form-item ${labelWidth} label="${element.label}" prop="${element.vModel}" ${required}> ${tagDom} </el-form-item>` str = colWrapper(element, str) return str }, rowFormItem(element) { const type = element.type === 'default' ? '' : `type="${element.type}"` 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)) let str = `<el-row ${type} ${justify} ${align} ${gutter}> ${children.join('\n')} </el-row>` str = colWrapper(element, str) return str } } const tags = { 'el-button': el => { const { tag, disabled } = attrBuilder(el) const type = el.type ? `type="${el.type}"` : '' const icon = el.icon ? `icon="${el.icon}"` : '' const size = el.size ? `size="${el.size}"` : '' let child = buildElButtonChild(el) if (child) child = `\n${child}\n` // 换行 return `<${el.tag} ${type} ${icon} ${size} ${disabled}>${child}</${el.tag}>` }, 'el-input': el => { const { disabled, vModel, clearable, placeholder, width } = attrBuilder(el) const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : '' const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : '' const readonly = el.readonly ? 'readonly' : '' const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : '' const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : '' const showPassword = el['show-password'] ? 'show-password' : '' const type = el.type ? `type="${el.type}"` : '' const autosize = el.autosize && el.autosize.minRows ? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"` : '' let child = buildElInputChild(el) if (child) child = `\n${child}\n` // 换行 return `<${el.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${el.tag}>` }, 'el-input-number': el => { const { disabled, vModel, placeholder } = attrBuilder(el) const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : '' const min = el.min ? `:min='${el.min}'` : '' const max = el.max ? `:max='${el.max}'` : '' const step = el.step ? `:step='${el.step}'` : '' const stepStrictly = el['step-strictly'] ? 'step-strictly' : '' const precision = el.precision ? `:precision='${el.precision}'` : '' return `<${el.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${el.tag}>` }, 'el-select': el => { const { disabled, vModel, clearable, placeholder, width } = attrBuilder(el) const filterable = el.filterable ? 'filterable' : '' const multiple = el.multiple ? 'multiple' : '' let child = buildElSelectChild(el) if (child) child = `\n${child}\n` // 换行 return `<${el.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${el.tag}>` }, 'el-radio-group': el => { const { disabled, vModel } = attrBuilder(el) const size = `size="${el.size}"` let child = buildElRadioGroupChild(el) if (child) child = `\n${child}\n` // 换行 return `<${el.tag} ${vModel} ${size} ${disabled}>${child}</${el.tag}>` }, 'el-checkbox-group': el => { const { disabled, vModel } = attrBuilder(el) const size = `size="${el.size}"` const min = el.min ? `:min="${el.min}"` : '' const max = el.max ? `:max="${el.max}"` : '' let child = buildElCheckboxGroupChild(el) if (child) child = `\n${child}\n` // 换行 return `<${el.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${el.tag}>` }, 'el-switch': el => { const { disabled, vModel } = attrBuilder(el) const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : '' const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : '' const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : '' const inactiveColor = el['inactive-color'] ? `inactive-color="${el['inactive-color']}"` : '' const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : '' const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : '' return `<${el.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${el.tag}>` }, '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 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}></${el.tag}>` }, 'el-slider': el => { const { disabled, vModel } = attrBuilder(el) const min = el.min ? `:min='${el.min}'` : '' const max = el.max ? `:max='${el.max}'` : '' const step = el.