@thtf/wj-designer

同方问卷设计器

依赖

Vue 2.6.14+

Element-UI 2.15.8+

安装

npm install @thtf/wj-designer

快速上手

<wj-designer
  style="height: 100vh"
/>

// 引用
import WjDesigner from '@thtf/wj-designer'
// 注册
Vue.use(WjDesigner)

属性

参数	说明	类型	可选值	默认值
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	——	''
designDialogObj	弹框属性对象	Object	——	{center: true,closeOnClickModal: true}

事件

事件名称	说明	回调参数
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	设置照片路径	-

发布流程

• 编译代码

npm run build

• 登录(登录过可忽略)

npm login

• 发布

npm publish

启动项目时，如因eslint报错无法启动，如没时间解决可以通过在 .elintignore 文件中加入如下代码，暂时解决，切记不要提交该文件

/src
/packages