x-render | 基于Antd Vue的表单表格设计器

// 在main.js引入
import XRender from 'x-render'
Vue.use(XRender)

<template>
  <x-render-form
    ref="xRenderForm"
    v-model="formData"
    v-bind="formConfig"
    @form-submit="formSubmitHandler"
    @change="formChangeHandler"
    @form-change="formDataChangeHandler"
    @custom-event="customEventHandler"
  ></x-render-form>
</template>

<script>
export default {
  name: 'XRenderForm',
  data() {
    return {
      // 表单数据
      formData: {}
    }
  },
  computed:{
      formConfig:{
        get(){
            return '{formconfig}'
        }
      }
  },
  methods: {
     /**
     *  表单提交事件
     * @param formData {Object} 表单数据
     */
    formSubmitHandler(formData){
        // todo ajax提交数据
    },
    /**
    *  表单发生变化事件
    * @param type {String} 组件类型
    * @param prop {String} 组件属性
    * @param value {[String|Number|Object|boolean]} 组件值
    * @param attrs {Object} 组件属性集合
    * @param formItem{Object} 属性集合
    */
    formChangeHandler({type,prop,value,attrs,formItem}){
        // todo 事件操作
        //  展示/隐藏表单项  this.$refs.xRenderForm.showComponents('prop','prop1') |  this.$refs.xRenderForm.hideComponents('prop','prop1')
        //  启用/禁用表单项  this.$refs.xRenderForm.enabledComponents('prop','prop1') |  this.$refs.xRenderForm.disabledComponents('prop','prop1')
    },
   /**
    * 表单数据发送变化事件
    * @param formData {Object} 表单数据
    */
    formDataChangeHandler(formData){
        // todo 事件操作
    },
   /**
    *  自定义事件统一处理
    * @param type {String} 组件类型
    * @param prop {String} 组件属性
    * @param value {[String|Number|Object|boolean]} 组件值
    * @param attrs {Object} 组件属性集合
    * @param formItem{Object} 属性集合
    * @param association{Object} 关联属性集合
    */
    customEventHandler({type,prop,value,attrs,formItem,association}){
          // todo 自定义事件操作
    }
  }
}
</script>

<template>
  <ant-table
    ref="antTable"
    :dataSource="dataSource"
    :loading="loading"
    v-bind="tableConfig"
    @table-change="tableChangeHandler"
    @table-page-change="pageChangeHandler"
    @table-selected="tableRowSelectedHandler"
  ></ant-table>
</template>

<script>
export default {
  name: 'antTable',
  data() {
    return {
      // 数据源
      dataSource: [],
      // 表格加载状态
      loading:false
    }
  },
  computed:{
      tableConfig:{
        get(){
            return {tableConfig}
        }
      }
  },
  methods: {
   /**
    *  表格行选中事件
    * @param pagination {Object} 分页对象
    * @param filters {Array} 过滤配置
    * @param sorter {Array} 排序配置
    * @param dataSource {Array} 数据
    * @param instance {Object} table实例对象
    */
    tableChangeHandler({pagination, filters, sorter, dataSource, instance}){
        // todo 事件操作
    },
   /**
    *  表格行选中事件
    * @param selectedRowKeys {Array} 选中的keys
    * @param selectedRows {Array} 选中的行
    * @param instance {Object} table实例对象
    */
    tableRowSelectedHandler({selectedRowKeys, selectedRows, instance}){
        // todo 事件操作
    },
    /**
    *  表单发生变化事件
    * @param current {Number} 当前页
    * @param pageSize {Number} 页大小
    * @param instance {Object} table实例对象
    */
    pageChangeHandler({current, pageSize, instance}){
        // todo 事件操作
    },
    /**
    *  自定义获取数据源
    */
   async getDataSource(){
        // 修改分页配置  current： 当前页面；pageSize：页大小；pageSizeOptions：分页配置；total：数据总数
        // this.$refs.antTable.changePage({current, pageSize, pageSizeOptions, total })

        // 添加选中的行的主键key
        // this.$refs.antTable.addSelectedKeys([1,2,3,4])

        const dataSourceUrl = '${url}'
        // 使用nuxtjs/axios请求数据
       // const data = await this.$axios.$get( dataSourceUrl )
       const data = await this.$axios.$get( dataSourceUrl )
       this.dataSource.splice(0, this.dataSource.length, ...data)
    }
  },
  mounted(){
      // 获取数据
       this.getDataSource()
  }
}
</script>

<XForm
  :comps="comps"
  :loading="loading"
  height="calc(100vh - 52px)"
  @save="handleSave"
/>

// 自定义组件
import XRenderCustomContainer from './components/CustomContainer'

computed: {
  comps: {
    get() {
      return [XRenderCustomContainer]
    }
  }
}

    {
        type: 组件类型
        prop: 组件属性
        value：组件值
        attrs: 组件属性集合
        formItem: formItem 属性集合
        event: 详细事件对象
    }

{
	fileId: '文件主键',
	name:'文件名称',
	type:'文件类型，png、jpg,doc,xls,ppt'
	url:'文件路径，文件预览、下载的路径'
}

import Vue from 'vue'
import XRender from 'x-render'
import axios from 'axios'

function getFileItem (item) {
  const downloadUrl = ''
  return {
    fileId: item.fileInfoId,
    name: item.fileName,
    type: item.fileExtension,
    url: `${downloadUrl}?fileId=${item.fileId}`
  }
}

Vue.use(XRender, {
  viewPdf ({ fileId }) {
    const pdfUrl = ''
    return axios.get(pdfUrl,{fileId},
      {
        responseType: 'blob'
      }
    )
  },
  removeFile ({ fileId }) {
    const removeFileUrl = ''
    return axios.delete(`${removeFileUrl}${fileId}`)
  },
  uploadFile ({ file, value }) {
    const addFileUrl = ''
    const formData = new FormData()
    formData.append('file', file) // 添加file表单数据
    formData.append('fileName', file.name) // 添加file表单数据
    return new Promise((resolve) => {
      axios.post(addFileUrl, formData).then((item) => {
        resolve(getFileItem(item))
      })
    })
  },
  listFile ({ value }) {
    return new Promise((resolve) => {
      const listFileUrl = ''
      axios.get(`${listFileUrl}`).then((data) => {
        const arr = []
        for (const item of data) {
          arr.push(getFileItem(item))
        }
        resolve(arr)
      })
    })
  }
})

<x-render-form>
  <div slot="XRenderUsername">username</div>
  <div slot="XRenderUserCard">userCard</div>
</x-render-form>