没有你想象的几个表单数据提交那么简单！这属于基础业务架构！

功能及使用场景

可用于常见表单，筛选字段组件等。实现页面可配置化，样式排版可控制，增查修功能三位一体，支持“碎片化修改”

前置思考

最根本的还是组件开发，并在此基础上赋能

1. 复合组件+扩展组件+自定义组件
2. 组件开发三要素：属性、事件、方法
3. 组件的关系：依赖、联动

4. 业务组件： -> 架构

   1. 相似的业务活动
   2. 使用类似的数据
   3. 具有通用的处理流程
   4. 通用的业务目标
   5. 是密切联系的组织单元

      开发流程

5. 基础控件开发（“小池子”）

   1. 初始化数据填入（带入值回显）： initVal()
   2. 更新： updata()
   3. 修改事件： change()
      1. 联动数据标记： $emit(‘handleReletedFields’, xxx, xxx)
      2. 修改 controlData 得值，用于收集输入值。值类型一般是字符串、数字、布尔值、数组（多选时）
   4. 重置数据： reset()
   5. 移除校验： initVal 方法里 执行 clearVerfy() - this.$refs.form.clearValidate()
   6. 必填项校验： verifyForm() prop属性
   7. 控件数据获取：
      1. 获取码值配置数据 - 业务字典
      2. 普通接口获取业务数据
      3. vuex 存储的码值数据
   8. 收集控件并暴露给收发组件使用
   9. 排版样式处理
6. 控件收发控制 （“三通”）
   1. 以动态组件方式实现收发
   2. 初始化数据： initData()，调用基础控件的 initVal()方法，或者 updata()方法
   3. 重置数据： reset() 调用基础控件的 reset()方法
   4. 提交数据： submit()
      1. 调用基础控件的 verifyForm()方法验证必填项，如果没有填写，则进行滚动定位到需要填写的组件(offsetTop)
      2. 控件输入值收集： 提取各个业务字段的 controlData 值，组装表单信息
   5. 数据联动： handleReletedFields()
      1. 调用联动控件的 initVal()方法实现数据联动
7. 具体业务组件 （数据流“主管道”，总线）
   1. 业务字段信息组装，props传递给收发控制组件
   2. 提交数据： submitForm() 调用收发控制组件的 submit() 方法，拿到业务字段输入信息。

控件参数（业务字段配置）

{
  "fieldLabel": "控件名称"，
  "showLabel": true, // 是否显示label
  "fieldName": "appId",
  "controlName": "SingleSelectDownBox",
  "controlData": "",
  "defaultValue": "",
  "defaultOptions": "",
  "localVuexDictData": true, // 控件数据是否从vuex里获取
  "remoteDictOptionsData": false, // 控件数据是否从接口里获取
  "remoteOtherApi": "", // 单独接口获取，在api里面定义的名称，采用策略模式使用
  "labelWidth": "100px",
  "rightWidth": "220px",
  "labelPosition": "right",
  "isNotNull": 0,
  "placeholder": "",
  "dictKey": "OperateTypeEnum",
  "keyCode": "dictCode",
  "controlSize": "100%",
  "column": "1",
  "readonly": false,
  "relatedFields": "platformCheckStatus=platformCheckStatus;" // 多个关联字段用;分割
  "clearable": false,
  "editable": false
}

联动字段配置说明

"relatedFields": "platformCheckStatus=aaa;customField=bbb"
// 或者
"relatedFields": "platformCheckStatus=platformCheckStatus;customField=customField"

platformCheckStatus=aaa中”=“左边的platformCheckStatus，表示当前字段要关联的字段名称，”=“右边的aaa，表示回传信息的键名，用于确定关联字段要显示的值。

const info = {
  aaa: 'xiao',
  bbb: 'xixi',
  // platformCheckStatus: '',
  // customField: '',
}
this.$emit('handleReletedFields', info, this.itemData.relatedFields);

字典值配置

多用于单选、多选、级联框备选项数据，以下是字典数据结构

data: [{
    "alias": "scale",
    "dictCode": 2,
    "dictItems": [
        {
            "dictItem": [],
            "dictItemCode": 1,
            "id": 512323,
            "inUse": 1,
            "itemEnName": "1-5 people",
            "itemName": "1-5人",
            "itemValue": ""
        },
        {
            "dictItem": [],
            "dictItemCode": 2,
            "id": 512324,
            "inUse": 1,
            "itemEnName": "6-10 people",
            "itemName": "6-10人",
            "itemValue": ""
        }
    ],
    "dictName": "规模",
    "id": 2,
    "moduleCode": "A001",
    "sortOrder": 0
}]