@thtf/wj-designer

依赖
690
Install
npm install @thtf/wj-designer
Latest Version:0.0.22
Vue:2
Last Updated:Sep 23, 2023
Links: npm
Maintainer: fishergis

同方问卷设计器

依赖

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 设置照片路径 -

发布流程

  1. 编译代码
npm run build
  1. 登录(登录过可忽略)
npm login
  1. 发布
npm publish

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

/src
/packages

Version History

Version Released Vue License
0.0.22 2.7.10
0.0.21 2.7.10
0.0.20 2.7.10
0.0.19 2.7.10
0.0.18 2.7.10