hs-form-plugin v1.0.22

##环境和依赖

• node
• yarn
• webpack
• vue

##插件使用方法

import formPlugin from 'hs-form-plugin'
Vue.use(formPlugin)
  
<formEditor></formEditor> // 表单设计
<formFill></formFill> // 表单填写及回显

##插件图例

formEditor 表单设计

• 画布模块

• “表单设计”编辑

• 表单基础信息

• 表单组件

type（表单组件类型，详细描述查看上面表格）
├─ 1(设计域)
│  ├─ input（文本框）
│  ├─ textarea（多行文本框）
│  ├─ input-number（数字）
│  ├─ radio（单选）
│  ├─ checkbox（多选）
│  ├─ select（下拉列表）
│  ├─ table（表格）
│  ├─ date（日期时间类型）
│  ├─ description（说明文字）
│  └─  upload（上传）
│
├─ 2(业务域)
│  ├─ name（姓名）
│  ├─ gender（性别）
│  ├─ ID-cards（身份证号）
│  ├─ birth-date（出生日期）
│  ├─ education（学历）
│  ├─ degree（学位）
│  ├─ school（学校）
│  ├─ address（地址）
│  ├─ course-results（小学课程成绩）
│  ├─ attendance（考勤情况）
│  ├─ physique（体质测试）
│  ├─ department（部门）
│  ├─ personnel（人员）
│  └─ approval（关联审批单）
│ 
└─ 3(套件)
   ├─ leave（请假）
   ├─ meeting-room（会议室申请）
   └─ car（车辆申请）
   └─ computer（电脑申请）
   └─ classroom（教室申请）

moduleList中的子元素除了string类型（引用插件内部表单组件，对应下方的moduleType字段）还可以是object类型（自定义表单组件）

示例：

moduleList: [
   {
      icon: require('@/assets/img/department.png'),
      name: '文本框',
      type: 1,
      moduleType: 'department',
      isEdit: true,
      isRequire: true,
      layout: 1,
      rule: 14,
      title: '部门',
      tips: '请选择',
      value: '',
      arrayOptions: '',
      domain: 1,
      valueIsArray: 1,
      emitExternal: JSON.stringify({ // 触发外部事件
         trigger: 'click', // 诱因-内部触发 下拉框控件为focus（部门），上传控件为click（人员）
         emitEventName: 'departmentEdit' // 触发事件，需要在formFill组件中添加departmentEdit事件
      })
   }
]

• 基础控件

formFill 表单回填及预览

• 表单回调及预览 （）

#权限控制 permissionData

示例：

{
   3348: {
      9126: 'r',
      9127: 'w',
      9128: 'n',
      9129: 'r',
      9130: 'w',
      9131: 'n',
      9132: 'r',
      9133: 'w',
      9134: 'n',
   }
}

#事件

版本更新: 1.0.11 1. formFill组件允许传入permissionData属性，可以对表单元素权限控制 2. emitExternal的属性传值改变

emitExternal: JSON.stringify({ // 触发外部事件
   trigger: 'click', // 诱因-内部触发 下拉框控件为focus（部门、人员），上传控件为click（关联审批单）
   emitEventName: 'departmentEdit' // 触发事件，需要在formFill组件中添加departmentEdit事件，插件内部默认为 moduleType + 'Edit'
})

3. 插件件内已配置了多个套件，可通过字符串直接引用

   ├─ leave（请假）
   ├─ meeting-room（会议室申请）
   ├─ car（车辆申请）
   ├─ computer（电脑申请）
   └─ classroom（教室申请）

也可以自定义配置