运行

• 确保已经安装 node.js 10+
• 首次下载项目后，安装项目依赖：

yarn

或

npm install

• 本地开发

npm run dev

• 构建

npm run lib

@digitalzz/x-render-vue

Getting Started

Install dependencies,

npm i @digitalzz/x-render-vue -S

or

yarn add @digitalzz/x-render-vue

提示: 此套组件主要用于对接表单系统

Usage

// 需要依赖 element-ui

// 全部引入
import XRenderVue from "@digitalzz/x-render-vue";
import "@digitalzz/x-render-vue/lib/index.css";
Vue.use(XRenderVue);

// 获取单个引入
import XRenderVue from "@digitalzz/x-render-vue";
import "@digitalzz/x-render-vue/lib/index.css";
const { FormRender, Generator, TableRender } = XRenderVue;
Vue.use(FormRender);
Vue.use(Generator);
Vue.use(TableRender);

Example

Generator

Generator Attributes

参数	说明	类型	默认值	必填
creator	创建者	string	-	否
create-url	创建表单的接口	string	-	否
deploy-url	发布表单的接口	string	-	否
callback	触发 submit 的回调函数	function	-	否
show-form	是否展示下方的 form 表单	boolean	true	否
drawing-default	默认选择的表单，修改会重新渲染格式查看 json)	object	-	否
form-default	下方的表单信息字段值，修改会重新渲染	object	-	否
show-ok	是否展示确定按钮	boolean	true	否
show-cancel	是否展示取消按钮	boolean	true	否
on-cancel	点击取消执行	boolean	true	否
cancel-text	取消按钮展示的文案	string	取消	否
ok-text	确定按钮展示的文案	string	确定	否

Generator Methods

方法名	说明	参数	返回值
submit	提交选择的表单到后端的函数，提交之前会进行校验，校验成功之后，如果添加了“create-url，deploy-url”参数且“show-form”为 true 会直接调用创建和发布接口，之后调用 callback 函数，其中的参数为发布后的服务端返回的值，如果上述三项有一项不可用则不调用接口直接执行 callback 函数，其中参数为选择的表单组件的值，其值已处理	-	promise
resetForm	重置表单信息的值	-	viod

CODE

 <generator
      ref="generator"
      creator="creator" // 创建者
      :create-url="`**/form/meta/create`" // 创建表单的接口（非必填）
      :deploy-url="`**/form/meta/deploy`" // 发布表单的接口（非必填）
      :callback="callback" // 提交后的回调函数
      :drawing-default="data" // 默认展示表单组件
        :show-form="true" // 是否展示下方的form表单（包括‘表英文名称’，‘表中文名称’，‘备注’）
    >
 </generator>

FormRender

FormRender Attributes

参数	说明	类型	默认值	必填
formily-json	表单配置数据(格式参考 form generator 中的查看 json)	object	-	否
show-reset	是否展示重置按钮	boolean	true	否
show-ok	是否展示提交按钮	boolean	true	否
reset-text	重置按钮展示的文案	string	重置	否
ok-text	提交按钮展示的文案	string	提交	否
default-value	表单默认值，修改会重新渲染	object	{}	否

FormRender Event

事件名称	说明	回调参数
onOk	showOk 为 true 的点击提交，校验成功之后执行的函数	表单填写的值

FormRender Methods

方法名	说明	参数	返回值
validate	用于校验数据的填写，如果校验通过则 resove 填写的数据，校验失败则 reject 校验失败的字段信息	-	promise
reset	重置数据	-	-
setFieldsValue	设置表单的值	object	promise

CODE

 <form-render ref="parser" :formily-json="formilyJson" />

TableRender Attributes

参数	说明	类型	默认值	必填
meta-get-url	获取表信息的接口	string	-	是
meta-get-method	表信息接口的请求方式	string	post	否
dataG-get-url	获取表中数据的接口	string	-	是
show-action	是否展示操作栏	boolean	false	否

TableRender Event

事件名称	说明	回调参数
onHandleParams	外部处理获取数据的入参，其中有三个形参，第一个为预处理的数据，第二个为库表的名称，各三个为可执行的回调函数，将处理过的数据作为实参执行回调函数	data, entityName, callback

TableRender Methods

方法名	说明	参数	返回值
getData	获取数据的方法，删除或者更新数据可通过执行该函数	-	viod

TableRender Slot

name	说明
action	操作栏插入的内容，show-action 为 true 时可用

CODE

   <table-render
      :metaGetUrl="metaGetUrl"
      :dataGetUrl="dataGetUrl"
    ></table-render>