ecode开发弹窗录入

1、实现效果：在某行点击弹窗按钮，带当前行的项次和项充到弹窗页面，弹窗页的项次与项序不可以修改，新增行时自动设置该值，确认提交时把弹窗数据回写到某个明细并显示。

2、进入ecode搜索“弹窗”

http://oa.xx.com:18280/ecode

3、绑定触发弹窗的字段信息

4、修改JS文档

const { observer } = mobxReact;
const { Modal, Button, message, Table ,Popconfirm,Row,Col} = antd
const { WeaBrowser, WeaTools ,WeaTextarea,WeaDialog,WeaFormItem,WeaTableEditable} = ecCom;

const { confirm } = Modal;

@observer
class WfNewDetailDataDialog extends React.Component {
  constructor(props) {
    //上级传参
    super(props);
    
    /* ======================= 初始化数据 ======================= */
    // 一般在请求接口之后，同时更新 initialDatas 和 datas, 编辑状态中同步更新 datas
    const initialDatas = [
      {
        id: 1,
        inputnumber: WfForm.getFieldValue("field19112_"+this.props.rowIndex),
        inputnumber2: WfForm.getFieldValue("field19113_"+this.props.rowIndex)
      }
    ];

    //定义参数
    this.state = {
      title: ["套件分量计价明细", <span style={{ color: "#f00" }}></span>],
      /* ======================= 列配置数据 ======================= */
      columns: [      
        {
          title: (
            <span>
              项次
            </span>
          ),
          rowSpan: 1,
          dataIndex: "inputnumber",
          width: "100px",
          com: [{ type: "INPUTNUMBER", key: "inputnumber" ,viewAttr: 1}]
        },  
        {
          title: (
            <span>
              项序
            </span>
          ),
          rowSpan: 1,
          dataIndex: "inputnumber2",
          width: "100px",
          com: [{ type: "INPUTNUMBER", key: "inputnumber2" ,viewAttr: 1}]
        },             
        {
          title: (
            <span>
              起始数量
            </span>
          ),
          rowSpan: 1,
          dataIndex: "inputnumber3",
           width: "120px",
          com: [{ type: "INPUTNUMBER", key: "inputnumber3" ,viewAttr: 3}]
        },
        {
          title: (
            <span>
              截止数量
            </span>
          ),
          rowSpan: 1,
          dataIndex: "inputnumber4",
          width: "120px",
          com: [{ type: "INPUTNUMBER", key: "inputnumber4" ,viewAttr: 3}]
        },
        {
          rowSpan: 1,
          dataIndex: "input",
          com: [{ type: "INPUT", key: "input",hasHiddenField: true,viewAttr: 1}]
        }
      ],
      initialDatas,
      datas: initialDatas,
      selectedRowKeys: [],
      cells: [
        {
          id: "2",
          checkbox: {
            com: [
              {
                type: "CHECKBOX",
                key: "checkbox",
                otherParams: { content: "otherParams.content" },
                disabled: true
              }
            ]
          }
        }
      ],
      /* ======================= 校验规则 ======================= */
      validator: {
        rules: {
          // required 、max:10 为 validatorjs 默认规则
          inputnumber3: "required",
          inputnumber4: "required",
        },
        errorMessage: {
          // 自定义对应规则的错误提示信息
          required: "此项必填",
        }
      },
      //draggable: true,
      //draggableType: "icon",
      showTitle: true,
      showAdd: true,
      showDelete: true,
      //showCopy: true,
      buttonsType: "inline",
      validatePass: "",
      addButtonType: "normal",
      pushTitleIntoHeader: false,
      showRowSelect: true,
      pageSize: 0,
      isTreeNode: false,
      operationKey: "canClick"
    };


  }
  //获取所有行
  getRowNum() {
    const {rowIndex,detailId} = this.props;
    const allRowId = WfForm.getDetailAllRowIndexStr(detailId)||'';
    let allRowArr = allRowId.split(',');
    const detailMap = mobx.toJS(window.WfForm.getLayoutStore().detailMap);
    const detail = detailMap[detailId];
    const {rowInfo} = detail;
    allRowArr = allRowArr.filter((id)=>{
       //console.log('obj:',id);
       //console.log('rowInfo:',rowInfo);
      return !rowInfo['row_'+id].needHide;
    });
    let flag = -1;
    for(let i=0;i<allRowArr.length&&flag===-1;i++) {
      if(rowIndex==allRowArr[i]) {
        flag = i;
      }
    }
    return flag;
  }
  //获取明细数据
  getDetailHead() {
    const {detailId} = this.props;
    const dataJson = WfForm.getLayoutStore().dataJson;
    let heads = dataJson?dataJson.etables[detailId].ec:[];
    heads = heads.filter((h)=>{
      return h.etype==='3';
    });
    heads.sort((a,b)=>{
      //console.log('a:',a,' b:',b);
      const aIdArr = a.id.split(',');
      const bIdArr = b.id.split(',');
      const com = (aIdArr[0]*1000+aIdArr[1])-(bIdArr[0]*1000+bIdArr[1]);
      return com;
    });
    //console.log('heads:',heads);
    return heads;
  }
  //新增按钮
  getButtons() {
    const {detailId,rowIndex} = this.props;
    const allRowId = WfForm.getDetailAllRowIndexStr(detailId)||'';
    let allRowArr = allRowId.split(',');
    const detailMap = mobx.toJS(window.WfForm.getLayoutStore().detailMap);
    const detail = detailMap[detailId];
    const {rowInfo} = detail;
    allRowArr = allRowArr.filter((id)=>{
      //console.log('obj:',id);
      //console.log('rowInfo:',rowInfo);
      return !rowInfo['row_'+id].needHide;
    });
    //const flag = this.getRowNum();
    const flag = 2;
    return [(
      <Button onClick={()=>{
        // if(this.props.onChange&&typeof this.props.onChange==='function') {
        //   this.props.onChange(true,'view',allRowArr[flag-1]);
        // }
         //console.log('提交:',this.state);
         var arry = this.state.datas;
         for(let i=0;i<arry.length;i++){
            WfForm.addDetailRow("detail_4",{field19114:{value:arry[i].inputnumber},field19115:{value:arry[i].inputnumber2},field19090:{value:arry[i].inputnumber3},field19091:{value:arry[i].inputnumber4}});
         }
        
        //WfForm.changeFieldValue(this.props.fieldMark, {value:"1"});
        WfForm.changeFieldValue('field19086_'+rowIndex, {value:"1"});
        this.props.onChange(false,'view',rowIndex);
      }} disabled={flag-1<0}>确认</Button>
    )];
  }


/* ======================= 选中行事件回调 ======================= */
  onRowSelect = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  /* ======================= 数据更新事件回调 ======================= */
  onChange = (datas, other, data) => {
    //console.log("datas, data, other :", datas, other, data);
    // datas 为最新数据，一般做同步受控使用，other 为分类数据，比如那些 新增、删除、修改的变化， initialDatas 正确时这里的数据才可用
    this.setState({ datas });
  };

  /* ======================= 新增事件钩子 ======================= */
  // 在新增数据行，即将更新数据时的钩子。抛出最新的 datas, 返回修改后的 datas, 可以是异步的 Promise
  // 本例子，在新增时候，默认给 input 一个值 ‘add‘, 在这里可以自定义返回新的数据。主键 rowKey 不可删除
  willAdd = (datas, addData) => {
    return datas.map(data => {
      if (addData.id === data.id) return { ...data, inputnumber: WfForm.getFieldValue("field19112_"+this.props.rowIndex),inputnumber2: WfForm.getFieldValue("field19113_"+this.props.rowIndex) };
      return data;
    });
  };

  /* ======================= 复制事件钩子 ======================= */
  // 在复制数据行，即将更新数据时的钩子。抛出最新的 datas, 返回修改后的 datas, 可以是异步的 Promise, 类同 willAdd
  // 本例子，在复制数据时候，清空掉复制的数据，返回空的复制行。主键 rowKey 不可删除
  willCopy = (datas, selectedKeys, copyDatas) => {
    return datas.map(data => {
      if (copyDatas.some(c => c.id === data.id)) return { id: data.id };
      return data;
    });
  };

  /* ======================= 编辑事件钩子 ======================= */
  // 在单元格发生编辑，即将更新数据时的钩子。抛出最新的 datas, 返回修改后的 datas, 可以是异步的 Promise
  // 本例子，在 id 为 1的行 checkbox 变化时，更新 input 类型为显示文本，并改变其值为 'edit'
  willEdit = (datas, result) => {
    const { key, record } = result;
    if (key === "checkbox" && record.id === "1") {
      return datas.map(data => {
        if (data.id === record.id) {
          this.setState({
            cells: this.state.cells.concat([
              {
                id: "1",
                input: {
                  com: [{ type: "TEXT", key: "input" }]
                }
              }
            ])
          });
          return {
            ...data,
            input: "edit"
          };
        }
        return data;
      });
    }
    return datas;
  };

  /* ======================= 删除事件钩子 ======================= */
  // 在删除数据行，即将更新数据时的钩子。抛出删除信息, 返回 true false, 可以是异步的 Promise
  // 本例子，在删除时候，给出一个删除提示, 返回 true 则继续删除，返回 false 则不进行操作。
  willDelete = (datas, keys) =>
    new Promise((resolve, reject) => {
      confirm({
        content: `确认删除 id 为 ${keys}的数据行吗? `,
        onOk: () => resolve(true),
        onCancel: () => resolve(false)
      });
    });

  /* ======================= 下拉新增数据 ======================= */
  getAddDropDatas() {
    const datas = [1, 2, 3].map(key => ({
      key,
      show: `增加${key}`,
      disabled: key === 3
    }));
    return {
      datas,
      onMenuClick: key => console.log(key)
    };
  }

  /* ======================= 移动到组数据 ======================= */
  getMoveDropDatas() {
    const datas = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(key => ({
      key,
      show: `测试组${key}`,
      disabled: key === 2
    }));

    //支持多个固定按钮 类型为对象/数组 当定义为数组类型时可支持固定项的禁用功能 如下代码
    const addBtn = [
      {
        key: "aa",
        show: "新建分组并移动1",
        disabled: false,
        onClick: key => console.log(`点击新建分组并移动${key}`)
      },
      {
        key: "bb",
        show: "新建分组并移动2",
        disabled: true,
        onClick: key => console.log(`点击新建分组并移动${key}`)
      },
      {
        key: "cc",
        show: "新建分组并移动3",
        disabled: false,
        onClick: key => console.log(`点击新建分组并移动${key}`)
      }
    ];

    return {
      addBtn,
      // addBtn: {
      //   show: "新建分组并移动",
      //   onClick: () => console.log("点击新建分组并移动")
      // },
      datas,
      onMenuClick: key => console.log(key)
    };
  }

/* ======================= table 的 props ======================= */
  getTableProps = () => {
    return {
      scroll: { x: 3000, y: 200 },
      showEmptyText: false,
      onRowClick: (...arg) => console.log("---- onRowClick: ", ...arg),
      onRowHover: (...arg) => console.log("---- onRowHover: ", ...arg),
      onRowMouseEnter: (...arg) => console.log("---- onRowMouseEnter:", ...arg),
      onRowMouseLeave: (...arg) => console.log("---- onRowMouseLeave:", ...arg)
    };
  };

  /* ======================= 禁用行选择 ======================= */
  getRowSelection = rowSelection => {
    const sel = { ...rowSelection };
    sel.getCheckboxProps = record => {
      return { disabled: record.id === "1" };
    };
    return this.state.showRowSelect ? sel : null;
  };

  /* ======================= demo 控制展现 ======================= */
  getDemoButtons() {
    const {
      draggable,
      draggableType,
      validatePass,
      showTitle,
      showAdd,
      showDelete,
      showCopy,
      showMove,
      showCollapse,
      buttonsType,
      addButtonType,
      pushTitleIntoHeader,
      showRowSelect,
      pageSize,
      isTreeNode
    } = this.state;
    const colProps = {
      style: {
        padding: "3px 10px",
        borderLeft: "4px solid #eaeaea",
        height: 30,
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis"
      }
    };
  }

  /* ======================= 切换 树形数据 ======================== */
  changeTreeDatas = () => {
    const { isTreeNode, datas, columns, operationKey } = this.state;
    const nState = {};
    if (columns && columns.length > 0) {
      // demo以第一列为例
      columns[0].com && (columns[0].com[0]["isTreeNode"] = isTreeNode);
      nState["columns"] = columns;
    }
    if (datas && datas.length > 0) {
      datas.forEach(da => {
        da[operationKey] = isTreeNode;
      });
      nState["datas"] = datas;
    }
    this.setState(nState);
  };

  /* ======================= 自定义按钮和按钮事件 ======================= */
  getCustomBtns = () => {
    const btns = [
      {
        key: "edit",
        text: "编辑",
        show: <i className="icon-coms-BatchEditing-Hot" />
      }
    ];
    return btns;
  };
  onCustomBtnsClick = (type, datas, keys) => {
    if (type === "edit") {
      console.log("onCustomBtnsClick", type, datas, keys);
    }
  };

  //弹窗页面
  render() {
    const {visible,fieldid,title,width} = this.props;
    const {detailId,rowIndex} = this.props;
    //const {columns} = this.state;
    //const {dt2} = this.state;
    const detailMap = mobx.toJS(window.WfForm.getLayoutStore().detailMap);
    const detail = detailMap[detailId];
    const {rowInfo} = detail;
    const {fieldInfo,detailData} = detail;
    let arr = [];
    for(let p in fieldInfo) {
      arr.push(fieldInfo[p]);
    }
    const heads = this.getDetailHead();
    const allRowId = WfForm.getDetailAllRowIndexStr(detailId)||'';
    let allRowArr = allRowId.split(',');
    allRowArr = allRowArr.filter((id)=>{
       //console.log('obj:',id);
       //console.log('rowInfo:',rowInfo);
      return !rowInfo['row_'+id].needHide;
    });
    //console.log('detail:',detail);
    //console.log(heads);
    return (
      
      // <WeaDialog
      //     title={'ceshi'}
      //     visible={visible}
      //     buttons={this.getButtons()}
      //     style={{ width: width }}
      //     onCancel={() => {
      //       if(this.props.onChange&&typeof this.props.onChange==='function') {
      //         this.props.onChange(false,'view',rowIndex);
      //       }
      //     }}
      //   >
      //   <Row style={{padding:20}} className='new-detail'>
      //   {
      //     heads&&heads.map((v,k)=>{
      //       if(v.field===fieldid) return (<div />);
      //       //if(jQuery('.field'+v.fieldid+'_'+rowIndex+'_swapDiv').length===0) return (<div />);
      //       return (
      //           <Table         
      //             columns = { dt2 }                  
      //             pagination={false}
      //           />
      //       );
      //     })
      //   }
      //   </Row>
      // </WeaDialog>


    <WeaDialog
          title={'套件分量计价'}
          visible={visible}
          buttons={this.getButtons()}
          style={{ width: width }}
          onCancel={() => {
            if(this.props.onChange&&typeof this.props.onChange==='function') {
              this.props.onChange(false,'view',rowIndex);
            }
          }}
        >
        <Row style={{padding:20}} className='new-detail'>
        {
          heads&&heads.map((v,k)=>{
            //console.log('V值：'+JSON.stringify(v)+',K值：'+k)
            //if(v.field===19110) return (<div />);
            if(v.field==='19221'){
              return (
                  <div>
                    {this.getDemoButtons()}
                    <WeaTableEditable
                      // ref={el => {
                      //   this.table = el;
                      // }}
                      {...this.state}
                      operationKey={this.state.operationKey}
                      getRowSelection={this.getRowSelection}
                      tableProps={this.getTableProps()}
                      addDropDatas={this.getAddDropDatas()}
                      moveDropDatas={this.getMoveDropDatas()}
                      customBtns={this.getCustomBtns()} // 自定义组件提供外的按钮
                      willAdd={this.willAdd}
                      willDelete={this.willDelete}
                      willEdit={this.willEdit}
                      willCopy={this.willCopy}
                      onChange={this.onChange}
                      onRowSelect={this.onRowSelect}
                      onBtnsSelect={selectedBtnKey =>
                        console.log("selectedBtnKey", selectedBtnKey)
                      }
                      onCollapse={collapsed => console.log("collapsed", collapsed)}
                      onCustomBtnsClick={this.onCustomBtnsClick}
                      onShowSizeChange={(page, pagesize) =>
                        this.setState({ pageSize: pagesize })
                      }
                    />
                  </div>
              );
            } 
            //if(jQuery('.field'+v.fieldid+'_'+rowIndex+'_swapDiv').length===0) return (<div />);

          })
        }
        </Row>
      </WeaDialog>
    )
  }
}

ecodeSDK.exp(WfNewDetailDataDialog);