Gc-starter-app-form-render NPM

gc-starter-app-form-render

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

一、安装

$ npm install gc-starter-app-form-render

二、在千行框架中使用

在千行框架移动端使用

<template>
  <AppFormRun
    ref="FormRun"
    :form-code="formCode"
    :id="id"
    :disabledCodes="disabledCodes"
  />
</template>
<script>
  // 引入预览组件和样式css
  import { AppFormRun }  from 'gc-starter-app-form-render'
  import "gc-starter-app-form-render/lib/appFormRender.css"
  export default {
    components: {
      AppFormRun
    }
  }
</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()` 方法调用，并抛出正确或错误，供外部处理
----	----------------------------------------------------------------------------------
submit	获取表单数据，外部可用 `this.$refs.FormRun.getFormData()` 方法调用，并抛出正确或错误，供外部处理

this.$refs.FormRun.submit().then(form => {
  console.log(form);
  // 在这里写你的逻辑，自定义提交数据
}).catch(() => {
  // 校验失败
})

其他组件

select组件

<template>
  <VanSelect
    label="城市"
    :placeholder="请选择城市"
    v-model="city"
    :list="selectList"
    :option="{label:'key',value:'value'}"
    :filterable="true"
    :disabled="false"
    :multiple="multiple"
    @confirm="confirm"
  />
</template>
<script>
  // 引入预览组件和样式css
  import { VanSelect }  from 'gc-starter-app-form-render'
  import "gc-starter-app-form-render/lib/appFormRender.css"
  export default {
    components: {
      // vant 选择器,可配置单选多选
      VanSelect
    },
    data: {
      return {
        // 选择器绑定的数据
        city: '',
        multiple: false, // 是否多选
      }
    },
    methods: {
      confirm(val) {
        // 选择器选择后的回调，返回的值
        console.log(val)
      }
    }
  }
</script>

参数

  // 选择器的选项搜索
  filterable: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 可选列表
  list: {
    type: Array,
    default: function () {
      return []
    }
  },
  // 显示和值对应的键
  option: {
    type: Object,
    default: function () {
      return { label: 'key', value: 'value' }
    }
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  label: {
    type: String,
    default: '下拉选择器'
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false
  }