一、通过表单引入js，实现根据主表数据信息，实现子表数据自动批量添加；

场景：适用批量维护楼盘等，批量数据维护快速批量生成的方式，实现数据快速添加。

二、实现详情方式：

1. 以房屋维护表为例，根据规则字段字段生成对应的子表数据；

2. 2.首先需建五个表。分别为座栋表、单元表、楼层表、房屋表、和一张建它们关联起来的房屋批量生成表。

座栋表：

单元表：

楼层表：

房屋表：

批量生成表，用于将这四张表以外部表的形式关联起来：

添加外部表操作信息可参考链接：

http://www.hotent.org:8880/chanzhi/index.php/book/design-center/31.html

3、新建表单。

将这五个建模的表，新建五个表单，根据表单的样式喜好可以自定义；

这里以批量添加表为例；

子表是根据主表字段自动生成的，所以需要将子表拖到表单内，将子表字段拉出来。

子表分别对应四个外部表。座栋表、单元表、楼层表、房屋表，将对应的字段拉到表单内。

表单设计可参考链接：http://www.hotent.org:8880/chanzhi/index.php/book/EIPSAAS7.2/34.html

4、编写对应的规则脚本；

这里规则:

座栋数、单元数、楼层数、房间数皆为整数

交互逻辑：

根据填写的内容自动生成座栋、单元、楼层和房间，如填写的座栋数为2、单元数为2、楼层数为2、房间数为2，起始编号为1，则需要新建两个座栋,座栋名为1和2，每栋两个单元1单元、2单元，每单元两层，每层两个房间。

在表单左上角点击引入脚本,然后编写对应js脚本代码：

Js脚本如下：

const vm = document.getElementsByName("online-form")[0].__vue__;
let { pqplscfw } = vm.data;
//需要触发监听的字段
let fields = ["zds", "qsbh", "lcs", "fjs", "dys", "zddw", "lcdw", "fjdw"];
vm.$nextTick(() => {
  fields.forEach((field) => {
    vm.$el
      .querySelector(`[model-name='data.pqplscfw.${field}']`)
      .__vue__.$children[0].$on("blur", () => {
        validateFields();
      });
  });
});

function validateFields() {
  //如果能校验通过
  vm.$root.$validator.validateAll("custom-form").then((result) => {
    if (result) {
      if (Number(pqplscfw.zds) < Number(pqplscfw.qsbh)) {
        vm.$message.warning("座栋数不能小于起始编号");
        pqplscfw.zds = "";
        pqplscfw.qsbh = "";
        return;
      }
      doNext();
    }
  });
}

function doNext() {
  let subFields = ["sub_fwplb", "sub_dyplb", "sub_zdplb", "sub_lcplb"]; //子表名
  subFields.forEach((item) => {
    //清空子表数据
    pqplscfw[item].splice(0);
  });
  let { zds, qsbh, lcs, fjs, dys, zddw, lcdw, fjdw } = pqplscfw;
  zds = Number(zds);
  qsbh = Number(qsbh);
  lcs = Number(lcs);
  fjs = Number(fjs);
  dys = Number(dys);
  for (let build = qsbh; build <= zds; build++) {
    let buildingName = `座栋-${build}`;
    //添加坐栋表
    handleAddSubTableWithValues("sub_zdplb", {
      F_zddw: zddw,
      F_zdmc: buildingName,
    });
    //处理单元
    for (let unit = 1; unit <= dys; unit++) {
      let unitName = `单元-${unit}`;
      //添加单元表
      handleAddSubTableWithValues("sub_dyplb", {
        F_zdmc: buildingName,
        F_dymc: unitName,
      });
      //处理楼层
      for (let floor = 1; floor <= lcs; floor++) {
        let floorName = `楼层-${floor}`;
        //添加楼层表
        handleAddSubTableWithValues("sub_lcplb", {
          F_lcdw: lcdw,
          F_zdmc: buildingName,
          F_dymc: unitName,
          F_wllc: floorName,
        });
        //处理房间
        for (let room = 1; room <= fjs; room++) {
          let roomName = `房间-${room}`;
          //添加房间表
          handleAddSubTableWithValues("sub_fwplb", {
            F_zdmc: buildingName,
            F_dymc: unitName,
            F_lcmc: floorName,
            F_fzbh: roomName,
            F_fjdw: fjdw,
          });
        }
      }
    }
  }
}

function handleAddSubTableWithValues(subTabField, map) {
  let subInitData = pqplscfw["initData"][subTabField.replace("sub_", "")] || {};
  let str = JSON.stringify(subInitData).replace(/null/g, '""');
  let subData = JSON.parse(str);
  subData["sub_guid"] = uid();
  for (let key in map) {
    subData[key] = map[key];
  }
  pqplscfw[subTabField].push(subData);
}

function uid() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

效果图：

可下载导入表单：