同方问卷设计器

依赖

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

2. 登录(登录过可忽略)

npm login

3. 发布

npm publish

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

/src
/packages