泛微OA（E9）--列表动态垂直合并单元格实现

重点在mergeCells如何实现动态垂直合并单元格，包括合并单元格时解决分页的问题，即分页时也能按照既定逻辑实现正确的单元格合并。

const { inject, observer } = mobxReact;
const { toJS } = mobx;
const { WeaDatePicker, WeaBrowser, WeaCheckbox, WeaRadioGroup } = ecCom;
const { Table, Button, Modal, Menu, Radio, Select } = antd;
const RadioGroup = Radio.Group;
const { WeaTableNew } = comsMobx;
const { WeaTop, WeaTab, WeaRightMenu, WeaDialog } = ecCom;
const {WeaFormItem, WeaInput, WeaSelect} = ecCom;
const { renderNoright, getSearchs } = ecodeSDK.imp(util); // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
const API = ecodeSDK.imp(API);
const WeaTable = WeaTableNew.WeaTable;
import("../style/index.css")
const MenuItem = Menu.Item;

@inject('drTableStore')
@observer
class BaseTable extends React.Component {
  componentWillMount() { // 初始化渲染页面
    const { drTableStore: { doInit } } = this.props;
    doInit();
  }

  componentWillReceiveProps(nextProps) {
    const { drTableStore } = this.props;
    if (this.props.location.key !== nextProps.location.key) { // 手动刷新、切换菜单 重新初始化
      drTableStore.doInit();
    }
  }
  
  // 显示列定制
  showColumn = () => {
    const { drTableStore: { tableStore} } = this.props;
    tableStore.setColSetVisible(true);
    tableStore.tableColSet(true);
  }

  // 新增
  onAdd = () => {
    const { drTableStore: { setState,getDRSelectList,dialogForm } } = this.props;
    getDRSelectList();
    setState({
      isCreate: true,
      proSelected: 2,
      editId: '',
      principalEditAble: 2,
      datePrcEditAble: 2,
      otherEditAble: 2,
      visible: true,
      disabled: '',
      dialogForm: {},
      isShow: true,
      initLabel: true,
      xmmc: ''
    });
    dialogForm.IS_SUBPRO = 2;
    dialogForm.DR_CODE = '';
  }

  goDR3Page = () => {
    window.location.href = "/wui/index.html#/main/document/search?menuIds=2";
  }

  // 编辑
  onEdit = (record) => {
    const { drTableStore: { setState, dialogForm } } = this.props;
    setState({
      isCreate: false,
      editId: record.id,
      visible: true,
    });
    dialogForm.updateFields({
      requestname: { // 请求标题（一般form更新值使用方式）
        value: record.requestname,
      },
      creater: { // 创建人:（浏览按钮更新值）-- demo这里后台没数据可能渲染不出
        value: record.creater,
        valueSpan: record.createrspan,
        valueObj: {
          id: record.creater,
          name: record.createrspan,
        }
      },
      state: { // 状态
        value: record.state,
      },
      type: { // 类型
        value: record.type,
      },
      creatertime: { // 创建时间
        value: record.creatertime,
      },
    })
  }

  // 关闭弹框
  onCancel = () => {
    const { drTableStore: { setState, dialogForm, dialogFormCondition, initDialogForm } } = this.props;
    setState({
      isCreate: true,
      editId: '',
      visible: false,
      proSelected: 2,
      isHidden: true,
      isShow: false,
      subPros: []
    });
    // initDialogForm();
  }

  // 合并列上的单元格
  mergeCells = (text, dataSource, index, key, current, pageSize) => {
    var startIndex = (current - 1) * pageSize;
    if (index !== 0 && text === dataSource[startIndex + index - 1][key]) {
      return 0
    }
    let rowSpan = 1
    for (let i = index + 1; i < dataSource.length - startIndex; i++) {
      if(current == 1){
        if (text !== dataSource[startIndex + i][key]) {
          break
        }
      }else{
        index = startIndex + i;
        if (index < dataSource.length && text !== dataSource[index][key]) {
          break
        }
      }
      rowSpan++
    }
    return rowSpan
  };

  // 是否子项目：1是 2否，非子项目：不显示父项目选择框，子项目：显示是项目的编码选择框
  onChangeSubPro = (e) => {
    var value = e.target.value;
    console.log("vvvvv="+value);
    const { drTableStore: { setState,dialogForm,isHidden } } = this.props;
    if(value == 2){
      dialogForm.FDR_CODE = '';
    }else{
      dialogForm.DR_CODE = '';
      dialogForm.DR_NAME = '';
    }
    setState({
      isHidden: value == 2,
      checkAble: value == 2 ? 1 : 2,
      proSelected: value,
      isShow: value == 2,
      xmmc: ''
    });
  }

  onGetTableDatas = () =>{
    const { drTableStore: { doInit } } = this.props;
    doInit();
  }

  onBlurProject = (projectCode) => {
    const { drTableStore: { setState,dialogForm,proSelected } } = this.props;
    if(projectCode){
      if(!proSelected){
        dialogForm.DR_CODE = "";
        message.error(language==7?"是否子项目不能为空":"Sub-project or Not cannot be empty");
      }else if(!dialogForm.FDR_CODE&&proSelected == 1){
        dialogForm.DR_CODE = "";
        message.error(language==7?"父项目编码不能为空":"Project code cannot be empty");
      }else{
        if(projectCode.indexOf(dialogForm.FDR_CODE) == -1&&proSelected == 1){
          // 子项目取消校验编码规则 2023-06-13
          // dialogForm.DR_CODE = "";
          // message.error("子项目编码必须以父项目编码开头");
        }else{
          dialogForm.DR_CODE = projectCode
        }
      }
    }
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = (columns) => {
    let newColumns = '';
    newColumns = columns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { //前端元素转义
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        return (
          newColumn.dataIndex == 'xmbm' ?
            <a onClick={() => {this.onEdit(record)}}
               dangerouslySetInnerHTML={{ __html: valueSpan }} />
            :
            <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        )
      }
      return newColumn;
    });
    return newColumns;
  }
  
  render() {
    const { drTableStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, isCreate, visible, subvisible, dialogForm, dialogFormCondition,disabled,spinning,
      getTableDatas, doSearch, setShowSearchAd, doDialogSave, doDialogCancel, createVisible, doSaveFormData,principalEditAble,otherEditAble,hasPMRight,initLabel,
      parentPros,subPros,isHidden,setState,dr1Checked,dr2Checked,dr3Checked,dr4Checked,checkAble,createDRList,dataSource,proSelected,current,pageSize,isShow,
      xmmc,language,datePrcEditAble
    } = drTableStore;
    const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }
    const collectParams = { // 收藏功能配置
      favname: '可编辑列表',
      favouritetype: 1,
      objid: 0,
      link: 'wui/index.html#/ns_demo06/index',
    };
    const adBtn = [ // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>{language==7?'搜索':'Search'}</Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>{language==7?'重置':'Reset'}</Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>{language==7?'取消':'Cancel'}</Button>,
    ];
    // 顶部按钮
    const btns = [];
    if (hasPMRight){
      btns.push(<Button type='primary' onClick={this.onAdd} >{language==7?'新增':'Create'}</Button>);
    }
    btns.push(<Button type='primary' onClick={this.goDR3Page} >{language==7?'旧系统DR资料':'Old System DR Data'}</Button>)

    const columns = [
      {
      title: language==7?'项目编码':'Project Code',
      dataIndex: 'fxmbm',
      key: 'fxmbm',
      className: '',
      render: (text, record, index) => {
        const obj = {
          children: <span style={{fontWeight: 'bolder'}}>{text}</span> || '',
          props: {}
        };
        obj.props.rowSpan = this.mergeCells(text, dataSource, index, 'fxmbm', current, pageSize);
        return obj
      }
    }, 
    {
      title: language==7?'子项目编码':'Sub-project Code',
      dataIndex: 'xmbm',
      key: 'xmbm',
      render: (text, record, index) => {
        if(record.fxmbm == text && record.rowSpan > 0){
          return (<div>---</div>)
        }else{
          return (
            <div>
              <a href={'/wui/index.html#/main/cs/app/ff9e897_stageList?xmbm='+text} target='_parent'>{text}</a>
            </div>
          )
        }
      }
    }, {
      title: language==7?'项目名称':'Project Name',
      dataIndex: 'xmmc',
      key: 'xmmc',
      render: (text, record, index) => {
        if(record.xmbm == record.fxmbm && record.rowSpan > 0){
          return (
            <div>
              <a href={'/wui/index.html#/main/cs/app/ff9e89764bbb405285ffc7e650e55af4_stageList?xmbm='+record.xmbm} style={{fontWeight: 'bolder',color: 'black'}} target='_parent'>{text}</a>
            </div>
          )
        }else{
          return (
            <div>
              <a href={'/wui/index.html#/main/cs/app/ff9e89_stageList?xmbm='+record.xmbm} target='_parent'>{text}</a>
            </div>
          )
        }
      }
    }, {
      title: language==7?'项目状态':'Status',
      dataIndex: 'xmzt',
      key: 'xmzt',
    }, {
      title: language==7?'创建人':'Created By',
      dataIndex: 'lastname',
      key: 'lastname',
    }, {
      title: language==7?'创建时间':'Created Date',
      dataIndex: 'cjsj',
      key: 'cjsj',
    }, {
      title: language==7?'操作':'Operate',
      dataIndex: '',
      key: '',
      render: (text, record, index) => {
        if(hasPMRight){
          return (
            <div><a href='javascript:void(0);' onClick={() => {drTableStore.getDrDatas(record);}}>{language==7?'查看':'Browse'}</a>&nbsp;
            <a href='javascript:void(0);' onClick={() => {drTableStore.onEditDrDatas(record);}}>{language==7?'编辑':'Edit'}</a></div>
          )
        }else{
          return (
            <div><a href='javascript:void(0);' onClick={() => {drTableStore.getDrDatas(record);}}>{language==7?'查看':'Browse'}</a></div>
          )
        }
      }
    }];

    const pagination = {
      total: dataSource.length,
      current: current,
      pageSize: pageSize,
      showSizeChanger: true,
      onShowSizeChange(current, pageSize) {
        setState({
          current: current,
          pageSize: pageSize
        });
      },
      onChange(current) {
        setState({
          current: current
        });
      },
      showTotal: ((total) => {
        return language==7?`共 ${total} 条`:`${total} records in total`
      })
    };

    return (
      <div style={{ height: '100%' }}>
        <WeaTop
          title={language==7?'项目列表':'Project List'} // 文字
          icon={<i className='icon-coms-meeting' />} // 左侧图标
          iconBgcolor='#F14A2D' // 左侧图标背景色
          buttons={btns} // 顶部按钮
          buttonSpace={10} // 按钮之间的间隔
        >
          <WeaTab
            searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
            showSearchAd={showSearchAd} // 是否展开高级搜索面板
            advanceHeight={200}
            setShowSearchAd={bool => setShowSearchAd(bool)} //高级搜索面板受控
            searchsAd={getSearchs(form, toJS(condition), 2)} // 高级搜索内部数据
            buttonsAd={adBtn} // 高级搜索内部按钮
            onSearch={this.onGetTableDatas} // 点搜索按钮时的回调
            onSearchChange={v => form.updateFields({ xmbm: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
            searchsBaseValue={form.getFormParams().xmbm} // 外部input搜索值受控: 这里和高级搜索的requestname同步
          />
          <Table //table内部做了loading加载处理，页面就不需要再加了
            columns={columns}
            dataSource={dataSource}
            pagination={pagination}
            size="middle"
            //comsWeaTableStore={tableStore}//tablestore
            //hasOrder={true}//是否启用排序
            //needScroll={true}//是否启用table内部列表滚动，将自适应到父级高度
            // getColumns={this.getColumns}//重定列各列属性(一般带编辑功能，点击第一列字段的时候需要同样打开编辑弹框)
            // onOperatesClick={this.onOperatesClick.bind(this)}//自定义操作按钮点击方法
            // customOperates={customOperates}
            bordered/>
        </WeaTop>
        <WeaDialog
          style={{width:1200,height: 900,textAlign:'center'}} // Dialog宽高
          hasScroll={true}
          title={isCreate ? language==7?'DR项目':'DR Project' : language==7?'查看DR项目':'Browse DR Project' } // Dialog标题
          icon='icon-coms-meeting' // Dialog顶部标题的图标
          iconBgcolor='#F14A2D' // Dialog顶部标题的图标的背景色
          visible={visible} // Dialog显隐
          buttons={[<Button type='primary' style={{marginRight:'550px'}} onClick={doSaveFormData} disabled={disabled}>{language==7?'保存':'Save'}</Button>,]} // Dialog 底部操作按钮 getForm
          onCancel={this.onCancel} // 关闭 Dialog 时的回调函数
          // moreBtn={{ // ‘更多’按钮参数配置, 具体参数使用查看 WeaMoreButton 文档
          //   datas: [{
          //     key: 'BTN_SAVE',
          //     icon: <i className='icon-coms-Preservation'/>,
          //     content : '保存',
          //     onClick : doSave,
          //   }],
          //   collectParams: collectParams
          // }}
        >
        <div id='dr-dialog'>
          <div id='loading' style={{display: spinning}}>
            <Spin size='large' spinning='true'/>
          </div>
          <table>
            <tr>
              <td class='dr-head' colspan='8' style={{textAlign:'center', fontSize:'18px'}}>DR{language==7?'项目表单':' Project sheet'}</td>
            </tr>
            <tr>
              <td colspan='2' style={{fontSize:'14px', width: 80}}>
                {language==7?'是否子项目':'Sub-project or Not'}
              </td>
              <td style={{fontSize:'14px'}}>
                 <RadioGroup onChange={this.onChangeSubPro} value={proSelected}>
                  <Radio key="n" value={2} disabled={!isCreate}>{language==7?'否':'No'}</Radio>
                  <Radio key="y" value={1} disabled={!isCreate}>{language==7?'是':'Yes'}</Radio>
                </RadioGroup>
              </td>
              <td colspan='5' style={{fontSize:'14px'}}>
                <WeaSelect
                  showSearch // 设置select可搜索
                  optionFilterProp="children" // 设置搜素option的内容，默认为value 
                  style={{ width: 400 }}
                  placeholder={language==7?'选择主项目编码':'Select project code'}
                  options={parentPros}
                  value={dialogForm.FDR_CODE}
                  viewAttr={isHidden ? 1 : 2}
                  onChange={FDR_CODE => {
                    dialogForm.FDR_CODE = FDR_CODE
                  }}
                />
              </td>
            </tr>
            <tr>
              <td colspan='2' style={{fontSize:'14px'}}>{language==7?'项目编码':'Project code'}</td>
              <td style={{fontSize:'14px'}}>
                 <WeaInput
                  viewAttr={isHidden ? 1 : 2}
                  style={{ width: 200, display: isShow?'none':'block' }}
                  name="DR_CODE"
                  placeHolder={proSelected==1?(language==7?'请输入子项目编码':'Please input sub-project code'):(language==7?'请输入项目编码':'Please input project code')}
                  value={dialogForm.DR_CODE}
                  onChange={DR_CODE => {
                    dialogForm.DR_CODE = DR_CODE
                  }}
                />
                <Select
                  showSearch // 设置select可搜索
                  optionFilterProp="children"
                  style={{width:200,display:isShow?'block':'none'}}
                  placeholder={language==7?'选择项目编码':'Select project code'}
                  labelInValue={initLabel}
                  defaultValue={dialogForm.DR_CODE}
                  onChange={(obj)=>{
                      dialogForm.DR_CODE = obj.key;
                      var params = {'code':obj.key};
                      WeaTools.callApi('/api/dr/pro/getProjectNameByCode', 'GET', params).then(action(result=>{
                        dialogForm.DR_NAME = result.desc;
                        setState({
                          xmmc: result.desc
                        });
                      }));
                  }}>
                  {subPros ? subPros.map((item, index) => (<Option key={index} value={item.value}>{item.label}</Option>)) : []}
                </Select>
              </td>
              <td style={{fontSize:'14px'}}>{language==7?'项目名称':'Project Name'}</td>
              <td colspan='4' style={{fontSize:'14px'}}>
                <WeaInput
                  viewAttr={isHidden ? 1 : 2}
                  style={{ width: '100%' }}
                  name="DR_NAME"
                  placeHolder={proSelected==1?(language==7?'请输入子项目名称':'Please input sub-project name'):(language==7?'请输入项目名称':'Please input project name')}
                  value={xmmc}
                  onChange={xmmc => {
                    dialogForm.DR_NAME = xmmc
                    setState({
                      xmmc: xmmc
                    });
                  }}
                />
              </td>
            </tr>
          <tr>
            <td class='title' colspan='3' style={{fontSize:'14px'}}>阶段</td>
            <td class='title' colspan='3' style={{fontSize:'14px'}}>预计完成日期</td>
            <td class='title' colspan='2' style={{fontSize:'14px'}}>阶段责任人</td>
          </tr>
          <tr>
            <td colspan='3' style={{fontSize:'14px'}}>DR1{language==7?'阶段目标完成日':' Target completed date'}</td>
            <td colspan='3' style={{fontSize:'14px'}}>
              <WeaDatePicker
                viewAttr={otherEditAble}
                value={dialogForm.DR1_DATE}
                onChange={DR1_DATE => {
                  dialogForm.DR1_DATE = DR1_DATE
                }}
              />
            </td>
            <td colspan='2'>
              <WeaBrowser
                  viewAttr={datePrcEditAble}
                  type={1}
                  textDecoration={true}
                  value={dialogForm['DR1_DATE_PRIC']}
                  valueSpan={dialogForm['DR1_DATE_PRINCIPAL']}
                  inputStyle={{ width: 200 }}
                  onBeforeFocusCheck={callback => {
                      callback && callback();
                  }}
                  extendTabs={[
                      {
                          key: "9",
                          name: "自定义扩展",
                          url: "/api/public/browser/data/1?cmd=newly"
                      }
                  ]}
                  onChange={(ids, names, datas) => {
                      dialogForm['DR1_DATE_PRIC'] = ids
                      dialogForm['DR1_DATE_PRINCIPAL'] = names
                    }
                  }
              />
            </td>
          </tr>
          <tr class="dr2-date">
            <td colspan='3' style={{fontSize:'14px'}}>DR2{language==7?'阶段目标完成日':' Target Completed Date'}</td>
            <td colspan='3' style={{fontSize:'14px'}}>
              <WeaDatePicker
                viewAttr={otherEditAble}
                value={dialogForm.DR2_DATE}
                onChange={DR2_DATE => {
                    dialogForm.DR2_DATE = DR2_DATE
                }}
              />
            </td>
            <td colspan='2'>
              <WeaBrowser
                  viewAttr={datePrcEditAble}
                  type={1}
                  textDecoration={true}
                  value={dialogForm['DR2_DATE_PRIC']}
                  valueSpan={dialogForm['DR2_DATE_PRINCIPAL']}
                  inputStyle={{ width: 200 }}
                  onBeforeFocusCheck={callback => {
                      callback && callback();
                  }}
                  extendTabs={[
                      {
                          key: "9",
                          name: "自定义扩展",
                          url: "/api/public/browser/data/1?cmd=newly"
                      }
                  ]}
                  onChange={(ids, names, datas) => {
                      dialogForm['DR2_DATE_PRIC'] = ids
                      dialogForm['DR2_DATE_PRINCIPAL'] = names
                    }
                  }
              />
            </td>
          </tr>
          <tr class="dr3-date">
            <td colspan='3' style={{fontSize:'14px'}}>DR3{language==7?'阶段目标完成日':' Target Completed Date'}</td>
            <td colspan='3' style={{fontSize:'14px'}}>
              <WeaDatePicker
                viewAttr={otherEditAble}
                value={dialogForm.DR3_DATE}
                onChange={DR3_DATE => {
                    dialogForm.DR3_DATE = DR3_DATE
                }}
              />
            </td>
            <td colspan='2'>
              <WeaBrowser
                  viewAttr={datePrcEditAble}
                  type={1}
                  textDecoration={true}
                  value={dialogForm['DR3_DATE_PRIC']}
                  valueSpan={dialogForm['DR3_DATE_PRINCIPAL']}
                  inputStyle={{ width: 200 }}
                  onBeforeFocusCheck={callback => {
                      callback && callback();
                  }}
                  extendTabs={[
                      {
                          key: "9",
                          name: "自定义扩展",
                          url: "/api/public/browser/data/1?cmd=newly"
                      }
                  ]}
                  onChange={(ids, names, datas) => {
                      dialogForm['DR3_DATE_PRIC'] = ids
                      dialogForm['DR3_DATE_PRINCIPAL'] = names
                    }
                  }
              />
            </td>
          </tr>
          <tr class="dr4-date">
            <td colspan='3' style={{fontSize:'14px'}}>DR4{language==7?'阶段目标完成日':' Target Completed Date'}</td>
            <td colspan='3' style={{fontSize:'14px'}}>
              <WeaDatePicker
                viewAttr={otherEditAble}
                value={dialogForm.DR4_DATE}
                onChange={DR4_DATE => {
                    dialogForm.DR4_DATE = DR4_DATE
                }}
              />
            </td>
            <td colspan='2'>
              <WeaBrowser
                  viewAttr={datePrcEditAble}
                  type={1}
                  textDecoration={true}
                  value={dialogForm['DR4_DATE_PRIC']}
                  valueSpan={dialogForm['DR4_DATE_PRINCIPAL']}
                  inputStyle={{ width: 200 }}
                  onBeforeFocusCheck={callback => {
                      callback && callback();
                  }}
                  extendTabs={[
                      {
                          key: "9",
                          name: "自定义扩展",
                          url: "/api/public/browser/data/1?cmd=newly"
                      }
                  ]}
                  onChange={(ids, names, datas) => {
                      dialogForm['DR4_DATE_PRIC'] = ids
                      dialogForm['DR4_DATE_PRINCIPAL'] = names
                    }
                  }
              />
            </td>
          </tr>
          <tr>
            <td class='dr-head' colspan='8' style={{textAlign:'center', fontSize:'16px'}}>{language==7?'项目阶段':'Project Phase'}（DR1）</td>
          </tr>
          <tr>
            <td class='title'>
              <WeaCheckbox
                viewAttr={1}
                value={dr1Checked}
                onChange={value => {
                  setState({
                    dr1Checked: value
                  });
                  dialogForm['DRS1_CHECK'] = value;
                }}
              />
            </td>
            <td class='title' style={{width:40}}>{language==7?'序号':'No.'}</td>
            <td  class='title'>{language==7?'检验项目代码':'Code of Inspection Item'}</td>
            <td  class='title'>{language==7?'检验项名称':'Name of Inspection Item'}</td>
            <td  class='title'>{language==7?'责任部门':'Responsible Dept.'}</td>
            <td  class='title'>{language==7?'责任人':'Person in Charge'}</td>
            <td  class='title' style={{width:'100px'}}>{language==7?'完成日期':'Target Completed Date'}</td>
            <td  class='title' style={{width:'200px'}}>{language==7?'备注':'Remark'}</td>
          </tr>
           {
            createDRList.DR1&&createDRList.DR1.map((item, index)=>(
            <tr class="dr1-item">
              <td class='Check'>
                  <WeaCheckbox
                      viewAttr={checkAble}
                      value={dialogForm[(index+1)>=10?'DRS1_CHECK_'+(index+1):'DRS1_CHECK_0'+(index+1)]}
                      onChange={value => {
                          dialogForm[(index+1)>=10?'DRS1_CHECK_'+(index+1):'DRS1_CHECK_0'+(index+1)] = value;
                      }}
                  />
              </td>
              <td class='Order'>{index+1}</td>
              <td>{item.jyxbm}</td>
              <td>{item.jyx}</td>
              <td>{item.zrbm}</td>
              <td>
                  <WeaBrowser
                      viewAttr={principalEditAble}
                      type={1}
                      textDecoration={true}
                      value={dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1):'DRS1_ITEM_0'+(index+1)]}
                      valueSpan={dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1)+'_PRINCIPAL':'DRS1_ITEM_0'+(index+1)+'_PRINCIPAL']}
                      inputStyle={{ width: 200 }}
                      onBeforeFocusCheck={callback => {
                          callback && callback();
                      }}
                      extendTabs={[
                          {
                              key: "9",
                              name: "自定义扩展",
                              url: "/api/public/browser/data/1?cmd=newly"
                          }
                      ]}
                      onChange={(ids, names, datas) => {
                          dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1):'DRS1_ITEM_0'+(index+1)] = ids
                          dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1)+'_PRINCIPAL':'DRS1_ITEM_0'+(index+1)+'_PRINCIPAL'] = names
                        }
                      }
                  />
              </td>
              <td style={{width:'100px'}}>
                <WeaDatePicker
                  viewAttr={principalEditAble}
                  value={dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1)+'_DATE':'DRS1_ITEM_0'+(index+1)+'_DATE']}
                  onChange={date1 => {
                    dialogForm[(index+1)>=10?'DRS1_ITEM_'+(index+1)+'_DATE':'DRS1_ITEM_0'+(index+1)+'_DATE'] = date1;
                  }}
                />
              </td>
              <td style={{width:'200px',textAlign:'left'}}>{item.bz}</td>
            </tr>
          ))}
          <tr>
            <td class='dr-head' colspan='8' style={{textAlign:'center', fontSize:'16px'}}>{language==7?'项目阶段':'Project Phase'}（DR2）</td>
          </tr>
          <tr class="dr2-title">
            <td class='title'>
              <WeaCheckbox
                viewAttr={1}
                value={dr2Checked}
                onChange={value => {
                  setState({
                    dr2Checked: value
                  });
                  dialogForm['DRS2_CHECK'] = value;
                }}
              />
            </td>
            <td class='title' style={{width:40}}>{language==7?'序号':'No.'}</td>
            <td  class='title'>{language==7?'检验项目代码':'Code of Inspection Item'}</td>
            <td  class='title'>{language==7?'检验项名称':'Name of Inspection Item'}</td>
            <td  class='title'>{language==7?'责任部门':'Responsible Dept.'}</td>
            <td  class='title'>{language==7?'责任人':'Person in Charge'}</td>
            <td  class='title' style={{width:'100px'}}>{language==7?'完成日期':'Target Completed Date'}</td>
            <td  class='title' style={{width:'200px'}}>{language==7?'备注':'Remark'}</td>
          </tr>
          {
            createDRList.DR2&&createDRList.DR2.map((item, index)=>(
            <tr class="dr2-item">
              <td class='Check'>
                  <WeaCheckbox
                      viewAttr={checkAble}
                      value={dialogForm[(index+1)>=10?'DRS2_CHECK_'+(index+1):'DRS2_CHECK_0'+(index+1)]}
                      onChange={value => {
                          dialogForm[(index+1)>=10?'DRS2_CHECK_'+(index+1):'DRS2_CHECK_0'+(index+1)] = value;
                      }}
                  />
              </td>
              <td class='Order'>{index+1}</td>
              <td>{item.jyxbm}</td>
              <td>{item.jyx}</td>
              <td>{item.zrbm}</td>
              <td>
                  <WeaBrowser
                      viewAttr={principalEditAble}
                      type={1}
                      textDecoration={true}
                      value={dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1):'DRS2_ITEM_0'+(index+1)]}
                      valueSpan={dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1)+'_PRINCIPAL':'DRS2_ITEM_0'+(index+1)+'_PRINCIPAL']}
                      inputStyle={{ width: 200 }}
                      onBeforeFocusCheck={callback => {
                          callback && callback();
                      }}
                      extendTabs={[
                          {
                              key: "9",
                              name: "自定义扩展",
                              url: "/api/public/browser/data/1?cmd=newly"
                          }
                      ]}
                      onChange={(ids, names, datas) => {
                          dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1):'DRS2_ITEM_0'+(index+1)] = ids
                          dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1)+'_PRINCIPAL':'DRS2_ITEM_0'+(index+1)+'_PRINCIPAL'] = names
                        }
                      }
                  />
              </td>
              <td style={{width:'100px'}}>
                <WeaDatePicker
                  viewAttr={principalEditAble}
                  value={dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1)+'_DATE':'DRS2_ITEM_0'+(index+1)+'_DATE']}
                  onChange={date2 => {
                    dialogForm[(index+1)>=10?'DRS2_ITEM_'+(index+1)+'_DATE':'DRS2_ITEM_0'+(index+1)+'_DATE'] = date2;
                  }}
                />
              </td>
              <td style={{width:'200px',textAlign:'left'}}>{item.bz}</td>
            </tr>
          ))}
          <tr>
            <td class='dr-head' colspan='8' style={{textAlign:'center', fontSize:'16px'}}>{language==7?'项目阶段':'Project Phase'}（DR3）</td>
          </tr>
          <tr class="dr3-title">
            <td  class='title'>
              <WeaCheckbox
                viewAttr={1}
                value={dr3Checked}
                onChange={value => {
                  setState({
                    dr3Checked: value
                  })
                }}
              />
            </td>
            <td class='title' style={{width:40}}>{language==7?'序号':'No.'}</td>
            <td  class='title'>{language==7?'检验项目代码':'Code of Inspection Item'}</td>
            <td  class='title'>{language==7?'检验项名称':'Name of Inspection Item'}</td>
            <td  class='title'>{language==7?'责任部门':'Responsible Dept.'}</td>
            <td  class='title'>{language==7?'责任人':'Person in Charge'}</td>
            <td  class='title' style={{width:'100px'}}>{language==7?'完成日期':'Target Completed Date'}</td>
            <td  class='title' style={{width:'200px'}}>{language==7?'备注':'Remark'}</td>
          </tr>
          {
            createDRList.DR3&&createDRList.DR3.map((item, index)=>(
            <tr class="dr3-item">
              <td class='Check'>
                  <WeaCheckbox
                      viewAttr={1}
                      value={dr3Checked}
                      onChange={value => {
                          dialogForm[(index+1)>=10?'DRS3_CHECK_'+(index+1):'DRS3_CHECK_0'+(index+1)] = value;
                      }}
                  />
              </td>
              <td class='Order'>{index+1}</td>
              <td>{item.jyxbm}</td>
              <td>{item.jyx}</td>
              <td>{item.zrbm}</td>
              <td>
                  <WeaBrowser
                      viewAttr={principalEditAble}
                      type={1}
                      textDecoration={true}
                      value={dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1):'DRS3_ITEM_0'+(index+1)]}
                      valueSpan={dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1)+'_PRINCIPAL':'DRS3_ITEM_0'+(index+1)+'_PRINCIPAL']}
                      inputStyle={{ width: 200 }}
                      onBeforeFocusCheck={callback => {
                          callback && callback();
                      }}
                      extendTabs={[
                          {
                              key: "9",
                              name: "自定义扩展",
                              url: "/api/public/browser/data/1?cmd=newly"
                          }
                      ]}
                      onChange={(ids, names, datas) => {
                          dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1):'DRS3_ITEM_0'+(index+1)] = ids
                          dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1)+'_PRINCIPAL':'DRS3_ITEM_0'+(index+1)+'_PRINCIPAL'] = names
                        }
                      }
                  />
              </td>
              <td style={{width:'100px'}}>
                <WeaDatePicker
                  viewAttr={principalEditAble}
                  value={dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1)+'_DATE':'DRS3_ITEM_0'+(index+1)+'_DATE']}
                  onChange={date3 => {
                    dialogForm[(index+1)>=10?'DRS3_ITEM_'+(index+1)+'_DATE':'DRS3_ITEM_0'+(index+1)+'_DATE'] = date3;
                  }}
                />
              </td>
              <td style={{width:'200px',textAlign:'left'}}>{item.bz}</td>
            </tr>
          ))}
          <tr>
            <td class='dr-head' colspan='8' style={{textAlign:'center', fontSize:'16px'}}>{language==7?'项目阶段':'Project Phase'}（DR4）</td>
          </tr>
          <tr class="dr4-title">
            <td  class='title'>
              <WeaCheckbox
                viewAttr={1}
                value={dr4Checked}
                onChange={value => {
                  setState({
                    dr4Checked: value
                  })
                }}
              />
            </td>
            <td class='title' style={{width:40}}>{language==7?'序号':'No.'}</td>
            <td  class='title'>{language==7?'检验项目代码':'Code of Inspection Item'}</td>
            <td  class='title'>{language==7?'检验项名称':'Name of Inspection Item'}</td>
            <td  class='title'>{language==7?'责任部门':'Responsible Dept.'}</td>
            <td  class='title'>{language==7?'责任人':'Person in Charge'}</td>
            <td  class='title' style={{width:'100px'}}>{language==7?'完成日期':'Target Completed Date'}</td>
            <td  class='title' style={{width:'200px'}}>{language==7?'备注':'Remark'}</td>
          </tr>
          {
            createDRList.DR4&&createDRList.DR4.map((item, index)=>(
            <tr class="dr4-item">
              <td class='Check'>
                  <WeaCheckbox
                      viewAttr={1}
                      value={dr4Checked}
                      onChange={value => {
                        dialogForm[(index+1)>=10?'DRS4_CHECK_'+(index+1):'DRS4_CHECK_0'+(index+1)] = value;
                      }}
                  />
              </td>
              <td class='Order'>{index+1}</td>
              <td>{item.jyxbm}</td>
              <td>{item.jyx}</td>
              <td>{item.zrbm}</td>
              <td>
                  <WeaBrowser
                      viewAttr={principalEditAble}
                      type={1}
                      textDecoration={true}
                      value={dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1):'DRS4_ITEM_0'+(index+1)]}
                      valueSpan={dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1)+'_PRINCIPAL':'DRS4_ITEM_0'+(index+1)+'_PRINCIPAL']}
                      inputStyle={{ width: 200 }}
                      onBeforeFocusCheck={callback => {
                          callback && callback();
                      }}
                      extendTabs={[
                          {
                              key: "9",
                              name: "自定义扩展",
                              url: "/api/public/browser/data/1?cmd=newly"
                          }
                      ]}
                      onChange={(ids, names, datas) => {
                          dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1):'DRS4_ITEM_0'+(index+1)] = ids
                          dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1)+'_PRINCIPAL':'DRS4_ITEM_0'+(index+1)+'_PRINCIPAL'] = names
                        }
                      }
                  />
              </td>
              <td style={{width:'100px'}}>
                <WeaDatePicker
                  viewAttr={principalEditAble}
                  value={dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1)+'_DATE':'DRS4_ITEM_0'+(index+1)+'_DATE']}
                  onChange={date4 => {
                    dialogForm[(index+1)>=10?'DRS4_ITEM_'+(index+1)+'_DATE':'DRS4_ITEM_0'+(index+1)+'_DATE'] = date4;
                  }}
                />
              </td>
              <td style={{width:'200px',textAlign:'left'}}>{item.bz}</td>
            </tr>
          ))}
          </table>
        </div>
        </WeaDialog>
      </div>
    )
  }
}

ecodeSDK.exp(BaseTable);