表单构建布局型组件新增按钮

ruoyi-ui/src/utils/generator/config.js

@@ -406,6 +406,21 @@ export const layoutComponents = [
     layoutTree: true,
     children: [],
     document: 'https://element.eleme.cn/#/zh-CN/component/layout'
+  },
+  {
+    layout: 'colFormItem',
+    label: '按钮',
+    changeTag: true,
+    labelWidth: null,
+    tag: 'el-button',
+    tagIcon: 'button',
+    span: 24,
+    default: '主要按钮',
+    type: 'primary',
+    icon: 'el-icon-search',
+    size: 'medium',
+    disabled: false,
+    document: 'https://element.eleme.cn/#/zh-CN/component/button'
   }
 ]
 

ruoyi-ui/src/utils/generator/html.js

@@ -107,6 +107,18 @@ const layouts = {
 }
 
 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
@@ -272,6 +284,15 @@ function attrBuilder(el) {
   }
 }
 
+// el-buttin 子级
+function buildElButtonChild(conf) {
+  const children = []
+  if (conf.default) {
+    children.push(conf.default)
+  }
+  return children.join('\n')
+}
+
 // el-input innerHTML
 function buildElInputChild(conf) {
   const children = []

ruoyi-ui/src/utils/generator/render.js

@@ -26,6 +26,11 @@ function vModel(self, dataObject, defaultValue) {
 }
 
 const componentChild = {
+  'el-button': {
+    default(h, conf, key) {
+      return conf[key]
+    },
+  },
   'el-input': {
     prepend(h, conf, key) {
       return <template slot="prepend">{conf[key]}</template>