yz-dync-form

npm install element-ui -S
npm install vuedraggable -S
npm install yz-dync-form -S

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

import YzDyncForm from 'yz-dync-form'
import 'yz-dync-form/lib/styles/index.css'
// or 
import 'yz-dync-form/packages/styles/src/index.scss'

Vue.use(Element)
Vue.use(YzDyncForm)

// or
import {
  FormDesign,
  FormView,
  FormDialogView
  // ...
} from 'yz-dync-form'

Vue.use(FormDesign)
Vue.use(FormView)
Vue.use(FormDialogView)

<template>
  <yz-form-design
    :height="domHeight"
    :clone="clone"
    :data="formData"
    :custom-button="customButton"
    @submit="onSubmit"/>
</template>

<script>
export default {
  data() {
    return {
      domHeight: 600, //表单设计器整体高度

      formData: {
        form: {
          labelPosition: 'right',
          size: 'small'
        }, //表单配置属性
        rows: [{
          field: {
            type: 'text',
            prop: 'field0',
            label: '单行文本',
            required: true,
            _config: {
              type: 'text',
              clearable: true,
              placeholder: '请输入'
            }
          }
        }] //组件
      },

      //自定义按钮，Object为传单个按钮，Array为传多个按钮
      customButton: [{
        name: '关闭',
        type: 'danger',
        index: 0,
        onClick() {
          console.log('------close-----')
        }
      }
      }]
    }
  },
  methods: {
    clone(form) {
      // 表单配置自定义格式化
      return form
    },
    onSubmit(form) {
      console.log(form)
      //表单提交按钮点击事件
    }
  }
}
</script>

<template>
  <div>
    <!-- 普通表单查看 -->
    <yz-form-view :data="form" :rules="rules" />

    <!-- 自带Dialog表单查看 -->
    <yz-form-dialog-view :data="form" :rules="rules" v-bind="dialogProp">
      <template slot="title">
        <!-- dialog标题slot -->
      </template>

      <template slot="footer">
        <!-- dialog底部slot -->
      </template>
    </yz-form-dialog-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        //表单校验规则
      },
      form: {
        rows: [],
        //...
        //el-form配置属性
      },
      dialogProp: {
        //支持el-dialog所有配置属性
      }
    }
  }
}
</script>

import { configStore, config } from 'yz-dync-form/lib/core.js'

/**
 * 注册组件类别
 */
const groupIndex = 0 //参数可选，若定义则表示新增的组件类别所排序的位置
configStore.registerGroup({
  name: '组别名称',
  type: '组别编号（唯一）'
}, groupIndex)


/**
 * 注册组件 
 */
const groupType = '' //组别编号，可选值：input, select, layout, 自定义的组别编号
const component = {
  type: '组件唯一标识',
  icon: '组件图标class名称',
  name: '组件名称',
  tag: '渲染组件的标签，可以是字符串类型，也可以是一个函数，函数参数为组件默认属性，例如：e-input',
  default() { //组件默认属性
    return {}
  },
  render(h, field, model) {
    // 组件渲染函数。可选，不传则使用默认渲染函数，但是不传时，tag参数必填
    // 例子
    return h('el-input', {
      attrs: field[config.fieldConfigName],
      model: model
    })
  },
  renderChildren(h, field) {
    // 渲染子组件。可选，如果组件下有子组件，则必传，比如el-select下有el-option
    // 例子
    return (<el-option />)
  }
}
const sortable = true //是否重新排序，默认true，设置排序条件，可在组件中新增getOrder()方法，返回值越小排序越前
configStore.registerComponent(groupType, component, sortable)


/**
 * 注册组件render
 */
configStore.registerRender('组件唯一标识', (h, field, model) => {
  // 例子
  return h('el-input', {
    attrs: field[config.fieldConfigName],
    model: model
  })
})


/**
 * 注册组件属性配置页面
 */
import TextProp from 'yz-dync-form/packages/design/src/props/text'
configStore.registerPropertyComponent('组件唯一标识', TextProp) 

import { configStore, DataSource } from 'yz-dync-form/lib/core.js'

// 例子
import Custom from 'yz-dync-form/packages/design/src/datasource/custom'

class CustomDataSource extends DataSource {
  constructor() {
    super('数据源唯一标识', '数据源名称')
  }

  getPage() {
    //数据源配置页面
    return Custom
  }

  getData(config) {
    // config为数据源配置页面返回的配置项
    // ps: 返回结果咱不支持异步操作，需同步返回结果，后续再更新
    return {
      nameKey: 'label', 
      valueKey: 'value',
      datas: config //结果
    }
  }
}

const index = -1 //数据源的位置，系统默认注册了一个数据源
configStore.registerDataSource(new CustomDataSource(), index)