tf-form-designer

同方问卷调查设计器

私服地址

根目录添加.npmrc文件

registry=http://10.10.50.174:8081/repository/npm-group/

安装

npm install tf-form-designer

快速上手

// 引用
import TfFormDesigner from 'tf-form-designer'
// 注册
Vue.use(TfFormDesigner)
// 使用
<tf-form-designer
  style="height: 100vh"
/>

属性

参数	说明	类型	可选值	默认值
modelType	模式	Number	0：设计 1:再设计 2:填报 3:只读 4:预览	0
formJSON	表样数据	Object	——	{}
fillJSON	填报数据	Object	——	{}
regionsApiUrl	省市区接口地址	String	——	''
cityId	省市id	String	——	''
areaId	省市区id	String	——	''
validateObj	校验对象	Object	——	{}
cityArray	原始省市数据	Array	——	[]
areaArray	原始省市区数据	Array	——	[]
showSubmit	显示提交按钮	Boolean	——	true
showHold	显示暂存按钮	Boolean	——	false
submitTxt	提交按钮文字	String	——	提交
stripe	斑马条纹	Boolean	——	true
fileUploadApi	上传文件接口	Promise	——
fileDeleteApi	上传删除接口	Promise	——
baseUrl	文件下载前缀	String	——	''

事件

事件名称	说明	回调参数
designSubmit	表样提交	表样数据: formJSON
submit	表单提交	填报数据: fillJSON
hold	暂存	填报数据：fillJSON
validate	表单校验	1：校验未通过
repeatValidate	重复判断	校验对象：validateObj
onCamera	点击拍照	控件id

传入校验对象

let validateObj = {
  id: '',
  isRepeat: false
}

传出校验对象

let validateObj = {
  formId: "",
  id: '',
  type: '',
  value: ''
}

接口所需校验对象

let validateObj = {
  // 表单id
  formId: "",
  // 表单题目列表
  subjectList: {
    // 普通题id
    subjectId: [
      {
        // 题目选项或填空控件对应的id
        valueId: "",
        // 题目选项或填空的值
        value: ""
      }
    ]
  }
}

方法

方法名称	说明	参数
emitSubmit	提交表单	-
emitHold	暂存	-
setCameraPath	设置照片路径	-

发包

修改package.json的version字段

npm run lib
npm publish