salary-management-front/pc4mobx/hrmSalary/pages/calculateDetail/editSalaryDetail.js

import React from "react";
import { WeaHelpfulTip, WeaInput, WeaTab } from "ecCom";
import IssuedAndReissueTable from "./issuedAndReissueTable";
import { Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import cs from "classnames";
import "./index.less";

@inject("calculateStore")
@observer
export default class EditSalaryDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "0"
    };
  }

  componentWillMount() {
    const { calculateStore: { acctresultDetail } } = this.props;
    acctresultDetail(this.props.id);
  }

  handleItemValueChange = (field, value, isInput) => {
    console.log(field, value, isInput);
    const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm } } = this.props;
    let form = { ...acctresultDetailForm };
    if (isInput === "inputItems") {
      form.inputItems = acctresultDetailForm.inputItems.map(item => {
        item = { ...item };
        if (item.salaryItemName === field) {
          item.resultValue = value;
        }
        return item;
      });
    } else if (isInput === "formulaItems") {
      form.formulaItems = acctresultDetailForm.formulaItems.map(item => {
        item = { ...item };
        if (item.salaryItemName === field) {
          item.resultValue = value;
        }
        return item;
      });
    } else if (isInput === "issuedAndReissueItems") {
      form.issuedAndReissueItems = acctresultDetailForm.issuedAndReissueItems.map(item => {
        item = { ...item };
        if (item.salaryItemName === field) {
          item.resultValue = value;
        }
        return item;
      });
    }
    setAcctresultDetailForm(form);
  };

  renderTableTr = (data, isInput) => {
    const tables = [];
    const len = data.length;
    const rowNum = 3;
    const sumRows = len % rowNum;
    const sumRowMod = len / rowNum;
    const rows = (sumRows == 0 ? sumRowMod : sumRowMod + 1);
    for (let j = 0; j < rows; j++) {
      let iLen = (j + 1) * rowNum;
      iLen = iLen > len ? len : iLen;
      tables.push("<tr class='descriptions-row'>");
      for (let i = j * rowNum; i < iLen; i++) {
        if (!isInput) {
          const label = data[i].fieldName;
          const value = data[i].fieldValue || "-";
          tables.push("<th class=\"descriptions-item-label\">" + label + "</th>" + "<td class=\"descriptions-item-content\">" + value + "</td>");
        }
      }
      tables.push("</tr>");
    }
    return tables;
  };


  render() {
    const { calculateStore: { acctresultDetailForm } } = this.props;
    const { selectedKey } = this.state;
    const topTab = [
      {
        title: "正常工资薪金所得",
        viewcondition: "0"
      },
      {
        title: "已发补发",
        viewcondition: "1"
      }
    ];
    return (
      <div className="editSalaryDetail">
        <div className="detailItemWrapper">
          <div>
            <span className="itemTitle">基本信息</span>
            <WeaHelpfulTip
              style={{ marginLeft: "10px" }}
              width={200}
              title="根据账套设置显示"
              placement="topLeft"
            />
          </div>

          <div className="itemContent">
            {
              !_.isEmpty(acctresultDetailForm.employeeInfos) &&
              <table
                dangerouslySetInnerHTML={{ __html: this.renderTableTr(acctresultDetailForm.employeeInfos).join(",").replace(/,/g, "") }}
              />
            }
          </div>
        </div>
        {
          !_.isEmpty(toJS(acctresultDetailForm.issuedAndReissueItems)) &&
          <WeaTab
            datas={topTab}
            keyParam="viewcondition"
            selectedKey={selectedKey}
            onChange={v => this.setState({ selectedKey: v })}
          />
        }
        {
          selectedKey === "0" &&
          <div>
            <div className="detailItemWrapper">
              <span className="itemTitle">输入项</span>
              <div className="itemContent">
                <Row>
                  {
                    acctresultDetailForm.inputItems && acctresultDetailForm.inputItems.map((item, index) => {
                      const len = acctresultDetailForm.inputItems.length;
                      return (
                        <Col span={8}>
                          <Row>
                            <Col span={12}
                                 className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
                            <Col span={12} className={cs("itemValue", {
                              "borderB-none": Math.ceil((index + 1) / 3) === len / 3,
                              "borderR-none": (index + 1) % 3 === 0
                            })}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
                              this.handleItemValueChange(item.salaryItemName, value, "inputItems");
                            }}/></Col>
                          </Row>
                        </Col>
                      );
                    })
                  }
                </Row>
              </div>
            </div>
            <div className="detailItemWrapper">
            <span className="itemTitle">
              <span>公式项</span>
              <WeaHelpfulTip
                style={{ marginLeft: "10px" }}
                width={200}
                title="提示：修改后，若点击核算，将按照公式核算，覆盖修改的数据"
                placement="topLeft"
              />
            </span>
              <div className="itemContent">
                <Row>
                  {
                    acctresultDetailForm.formulaItems && acctresultDetailForm.formulaItems.map((item, index) => {
                      const len = acctresultDetailForm.formulaItems.length;
                      return (
                        <Col span={8}>
                          <Row>
                            <Col span={12}
                                 className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
                            <Col span={12} className={cs("itemValue", {
                              "borderB-none": Math.ceil((index + 1) / 3) === len / 3,
                              "borderR-none": (index + 1) % 3 === 0
                            })}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
                              this.handleItemValueChange(item.salaryItemName, value, "formulaItems");
                            }}/></Col>
                          </Row>
                        </Col>
                      );
                    })
                  }
                </Row>
              </div>
            </div>
          </div>
        }
        {
          selectedKey === "1" &&
          <IssuedAndReissueTable
            dataSource={toJS(acctresultDetailForm.issuedAndReissueItems)}
            onChangeIssueReissueValue={this.handleItemValueChange}
          />
        }
      </div>
    );
  }
}