0.0.17 • Published 2 years ago
tf-form-designer v0.0.17
同方问卷调查设计器
私服地址
根目录添加.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