gc-starter-form-render

基于千行低代码的表单运行器

一、安装

$ npm install gc-starter-form-render

二、在千行框架中使用

在组件中引入运行器组件和样式

<template>
  <FormRun
    ref="FormRun"
    :form-code="formCode"
    :id="id"
    :disabledCodes="disabledCodes"
  />
</template>
<script>
  // 引入预览组件和样式css
  import { FormRun }  from 'gc-starter-form-render'
  import "gc-starter-form-render/lib/formRender.css"
  export default {
    components: {
      FormRun
    }
  }
</script>

参数

// 表单的code
formCode: {
  type: String,
  default: ''
},

// 主表的id
id: {
  type: [String, Number],
  default: ''
},
// 将要禁用的表单字段编码
disabledCodes: {
  type: Array,
  default: () => []
},
// 将要隐藏的表单字段编码
hiddenCodes:{
  type: Array,
  default: () => []
},
// 想要回显的字段编码code
itemCodes: {
  type: Array,
  default: () => []
},

// 表单的配置 除了通过formCode获取的表单配置外，还可以直接传入formConf进行表单配置
formConf: {
  type: Object,
  default: () => ({})
},

// 表单高度
height: {
  type: String,
  default: '100%'
}

最重要的参数就是formCode 和 id，disabledCodes

• formCode是表单的编码
• id是主表某条数据的id，编辑状态下传入可以回显数据，新增状态下不需要传入
• disabledCodes 是想要禁用的字段的数组
• hiddenCodes 是想要隐藏的字段的数组

上方的数据结构通过调用后端接口获取，然后将参数传入即可

事件

| 名称 | 参数 | 说明 | | ---- | ---- |-------------------------------| | form-change | form | form表单数据改变时触发 可获取form表单中的表单数据 | 也可以直接通过 this.$refs.FormRun.form 获取

方法

| 名称 | 说明 | | ---- |----------------------------------------------------------------------------------| | addOrUpdateFormData | form表单新增或者更新，外部可用 this.$refs.FormRun.addOrUpdateFormData() 方法调用，并抛出正确或错误，供外部处理 |