【记录】可编辑表格并且支持批量生成每一行引入到表格中

需求描述

一个页面 包括了一个可编辑表格，和一个支持批量创建的弹窗，弹窗字段如下图

引入弹窗包括了 四个字段 【创建名字】、【全部数量】、【公猪数量】、【母猪数量】

点击确定后：创建名字字段如果不足4位数，向前补0

• 公猪尾号名字按照 1 3 5 7 9，单数递增
• 母猪尾号名字按照 2 4 6 8 10 偶数递增
• 如果公母数量都有，则按照顺序排列，如：公1，母2，公3，母4…，如下图所示
  
• 如果只有公或母，则按照如下排列：公1，公3，公5…或者是 母2、母4、母6…
  

code实现

1. 首先点击批量生成后会对原先的表格做push操作，所以需要先对原先数组进行补行，selectLength指的是批量创建的数量

/**
 * 通用：对当前表格数组 进行补行操作
 * @param selectLength 传递过来的长度
 */
commonTable(selectLength) {
    
    
    // 如果当前没有空行(被删光了)，则添加2行
    if ((<Array<any>>this.model.dataGrid.props.dataSource).length == 0) {
    
    
        for (let index = 0; index < 2; index++) {
    
    
            (<Array<any>>this.model.dataGrid.props.dataSource).push(this.emptyRow);
        }
    };
    // 先查出表格第几个就没有数据了
    let num = (<Array<any>>this.model.dataGrid.props.dataSource).findIndex(item => {
    
    
        return !item.PigID
    });
    // 没查到就是都有数据了，没有空行
    num = num === -1 ? (<Array<any>>this.model.dataGrid.props.dataSource).length - 1 : num;
    // 如果弹窗中选择的数据长度大于表格剩余数据长度，则添加表格剩余数据长度的行
    if ((<Array<any>>this.model.dataGrid.props.dataSource).length - (num + 1) < selectLength) {
    
    
        let x = selectLength - (((<Array<any>>this.model.dataGrid.props.dataSource).length - (num + 1)));
        for (let index = 0; index < x; index++) {
    
    
            (<Array<any>>this.model.dataGrid.props.dataSource).push(this.emptyRow);
        }
    }
    // 更改按钮的状态
    this.detailInstance.modifyDataStatusSet();
}

2. 补行完成后需要对表格进行赋值逻辑操作

/**
* 耳号等展示
* @param pigIndex 公猪从1开始，母猪从2开始
* @param val 当前值 不足4位补0
* @returns 
*/
handleAdd(pigIndex: number, val: string) {
    
    
   return val.padStart(4, '0') + (pigIndex < 10 ? '0' : '') + pigIndex
}
/**接收子组件[仔猪编号]传递过来的数据 */
getChildCreate(obj) {
    
    
   console.log('接收子组件传递过来的数据', obj); // 弹窗确定
   this.commonTable(obj.childNum2)
   let i = 0 //记录弹窗数据下标
   let boarIndex = 1;//公猪从1开始 
   let sowIndex = 2;//母猪从2开始 偶数
   let boarLen = obj.boarNum3;
   let sowLen = obj.sowNum4;
   let _index = 1;
   // 赋值逻辑操作
   (<Array<any>>this.model.dataGrid.props.dataSource).map(async (item, index) => {
    
    
       //当前行没有PigID 一行一行往下加（这里主要考虑到表格之前有数据，不能覆盖）
       if (!item.PigID) {
    
    
           if (i + 1 <= obj.childNum2) {
    
    
               //业务
               let boarStr = this.handleAdd(boarIndex, obj.woNum1)
               let sowStr = this.handleAdd(sowIndex, obj.woNum1)
               if (boarLen && sowLen) {
    
    
                   if (_index % 2 == 1) {
    
    //基数
                       boarLen--
                       boarIndex += 2
                       item['Gender'] = 1;
                       item['PigID'] = boarStr
                       item['EarNumber'] = boarStr
                       item['EarNumberShortage'] = boarStr
                   } else {
    
    //偶数
                       sowLen--
                       sowIndex += 2
                       item['PigID'] = sowStr
                       item['EarNumber'] = sowStr
                       item['EarNumberShortage'] = sowStr
                       item['Gender'] = 0;
                   }
                   _index++
               } else {
    
    
                   if (boarLen) {
    
    
                       boarIndex += 2
                       item['Gender'] = 1;
                       item['PigID'] = boarStr
                       item['EarNumber'] = boarStr
                       item['EarNumberShortage'] = boarStr
                       console.log('公', boarIndex);
                   }
                   if (sowLen) {
    
    
                       sowIndex += 2
                       item['PigID'] = sowStr
                       item['EarNumber'] = sowStr
                       item['EarNumberShortage'] = sowStr
                       item['Gender'] = 0;
                   }
               }
           }
           i++
       }
   })
}