给form-generator 添加树tree

给form-generator 添加树tree

form-generator是一个非常好用的前端表单生成器，但其中表单组件中没有tree，今天弄了半天，终于给加上了。

先看添加自定义组件的说明

原说明文档
一定要重视阅读原作者给出的文档。

将组件添加到表单设计器

给左侧组件菜单添加树图标

按文档中的指引，先“在文件src\components\generator\config.js中添加一个布局型组件”，如下图
#pic_center =30x30)

代码，这里我偷懒了，直接找到上面的“级联选择”给CV下来的，其中的属性值要按elementUI中的规定去写。

...
export const layoutComponents = [
  ...,
 {
    __config__: {
      label: '树',
      url: 'http://localhost:8080/system/dept/treeselect2',   //默认测试接口
      method: 'get',
      dataPath: 'data',   //数据在response.data中
      dataConsumer: 'data',  //树组件接收数据的属性  
      showLabel: true,
      labelWidth: 50,
      tag: 'el-tree',
      tagIcon: 'cascader',
      layout: 'colFormItem',
      defaultValue: [],
      dataType: 'dynamic',
      span: 24,
      required: true,
      regList: [],
      changeTag: true,
      document: 'https://element.faas.ele.me/#/zh-CN/component/tree'
    },
    options: [{   //静态测试数据
      id: 1,
      value: 1,
      label: '选项1',
      children: [{
        id: 2,
        value: 2,
        label: '选项1-1'
      }]
    }],
    placeholder: '请选择',
    style: {width: '100%'},
    props: {
      props: {
        multiple: false,
        label: 'label',    //树节点标签对应返回数据中的字段
        value: 'id',    //树节点值对应返回数据中的字段
        children: 'children'    ///树节点的子节点对应返回数据中的字段
      }
    },    
    'default-expand-all': true,   //是否默认全开
    'show-checkbox': true,    //是否显示checkbox
    disabled: false,
    clearable: true,
    filterable: false,
    separator: '/'
  },
]

右侧添加属性控制

根据文档指引，“在src\views\index\RightPanel.vue中添加相应的编辑表单项”，如下图。

这里，我还是找到跟“级联选择”一样的地方，在上面改的。

<template v-if="['el-cascader', 'el-table', 'el-tree'].includes(activeData.__config__.tag)">
            <el-divider>选项</el-divider>
            <el-form-item v-if="activeData.__config__.dataType" label="数据类型">
              <el-radio-group v-model="activeData.__config__.dataType" size="small">
                <el-radio-button label="dynamic">
                  动态数据
                </el-radio-button>
                <el-radio-button label="static">
                  静态数据
                </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <template v-if="activeData.__config__.dataType === 'dynamic'">
              <el-form-item label="接口地址">
                <el-input
                  v-model="activeData.__config__.url"
                  :title="activeData.__config__.url"
                  placeholder="请输入接口地址"
                  clearable
                  @blur="$emit('fetch-data', activeData)"
                >
                  <el-select
                    slot="prepend"
                    v-model="activeData.__config__.method"
                    :style="{width: '85px'}"
                    @change="$emit('fetch-data', activeData)"
                  >
                    <el-option label="get" value="get" />
                    <el-option label="post" value="post" />
                    <el-option label="put" value="put" />
                    <el-option label="delete" value="delete" />
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="数据位置">
                <el-input
                  v-model="activeData.__config__.dataPath"
                  placeholder="请输入数据位置"
                  @blur="$emit('fetch-data', activeData)"
                />
              </el-form-item>

              <template v-if="activeData.props && activeData.props.props">
                <el-form-item label="标签键名">
                  <el-input v-model="activeData.props.props.label" placeholder="请输入标签键名" />
                </el-form-item>
                <el-form-item label="值键名">
                  <el-input v-model="activeData.props.props.value" placeholder="请输入值键名" />
                </el-form-item>
                <el-form-item label="子级键名">
                  <el-input v-model="activeData.props.props.children" placeholder="请输入子级键名" />
                </el-form-item>
              </template>
            </template>

            <!-- 级联选择静态树 -->
            <el-tree
              v-if="activeData.__config__.dataType === 'static'"
              draggable
              :data="activeData.options"
              node-key="id"
              :expand-on-click-node="false"
              :render-content="renderContent"
            />
            <div v-if="activeData.__config__.dataType === 'static'" style="margin-left: 20px">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addTreeItem"
              >
                添加父级
              </el-button>
            </div>
            <el-divider />
          </template>

          <el-form-item v-if="activeData.__config__.optionType !== undefined" label="选项样式">
            <el-radio-group v-model="activeData.__config__.optionType">
              <el-radio-button label="default">
                默认
              </el-radio-button>
              <el-radio-button label="button">
                按钮
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
            <el-color-picker v-model="activeData['active-color']" />
          </el-form-item>
          <el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
            <el-color-picker v-model="activeData['inactive-color']" />
          </el-form-item>

          <el-form-item v-if="activeData.__config__.showLabel !== undefined
            && activeData.__config__.labelWidth !== undefined" label="显示标签"
          >
            <el-switch v-model="activeData.__config__.showLabel" />
          </el-form-item>
          <el-form-item v-if="activeData.branding !== undefined" label="品牌烙印">
            <el-switch v-model="activeData.branding" @input="changeRenderKey" />
          </el-form-item>
          <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
            <el-switch v-model="activeData['allow-half']" />
          </el-form-item>
          
          <el-form-item v-if="activeData['default-expand-all'] !== undefined" label="节点全部展开">
            <el-switch v-model="activeData['default-expand-all']" />
          </el-form-item>

完成后的样子

从左侧下方把刚才添加的树拖进中间位置，直接就出现了图中的效果了。

其他功能还在摸索中……