salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/normal.js

/*
 * Author: 黎永顺
 * Description: 正常缴纳月份
 * Date: 2022-04-20 08:56:08
 * LastEditTime: 2022-06-29 09:53:36
 */
import React, { Component } from "react";
import { Button, Icon, message, Modal, Spin, Tooltip } from "antd";
import { inject, observer } from "mobx-react";
import { WeaFormItem, WeaInput, WeaSearchGroup, WeaTab } from "ecCom";
import { calcPageNo } from "../../../../util";
import { getQueryString } from "../../../../util/url";
import ProgressModal from "../../../../components/progressModal";
import AcctResultImportModal from "../../../calculateDetail/acctResult/importModal/acctResultImportModal";
import AdjustmentSlide from "./adjustmentSlide";
import { getCalculateProgress } from "../../../../apis/calculate";
import RegEditDetial from "./regEditDetial";
import SupplementarySlide from "./supplementarySlide";
import _ from "lodash";
import "./index.less";

@inject("standingBookStore")
@observer
export default class NormalIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: "",
      current: 1,
      pageSize: 10,
      selectedRowKeys: [],
      addProps: {
        title: "",
        visible: false
      },
      adjustSlide: {
        title: "调差",
        visible: false
      },
      tableData: {
        list: [],
        columns: [],
        total: 0
      },
      searchValue: "",
      workcode: "",
      progressVisible: false,
      progress: 0,
      fieldData: {}, //选中的表单头信息
      importParams: { //导入信息的弹框表示
        visible: false
      },
      returnEditPersonSlide: {
        title: "",
        editId: "",
        visible: false
      },
      showSum: false,
      siaccountSum: {},
      showSearchAd: false
    };
    this.timer = null;
    this.timerDelete = null;
  }

  componentDidMount() {
    const { selectedKey, location } = this.props;
    const { current } = this.state;
    const billMonth = location.query.billMonth;
    const paymentOrganization = location.query.paymentOrganization;
    selectedKey === "1"
      ? this.getNormalList({ billMonth, current, paymentOrganization })
      : this.getSupplementaryList({ billMonth, current, paymentOrganization });
    window.addEventListener("message", this.handleReceive, false);
  }

  handleReceive = async ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "init") {
      this.postMessageToChild();
    } else if (type === "turn") {
      if (id === "PAGEINFO") {
        const { pageNum: current, size: pageSize } = params;
        this.setState({ current, pageSize }, () => {
          const { billMonth, paymentOrganization, selectedKey } = this.props;
          const { current, pageSize } = this.state;
          selectedKey === "1" ?
            this.getNormalList({
              billMonth, current, pageSize, paymentOrganization
            }) :
            this.getSupplementaryList({
              billMonth, current, pageSize, paymentOrganization
            });
        });
      } else if (id === "ROWSELECT") {
        const { selectedRowKeys } = params;
        this.setState({ selectedRowKeys });
      } else if (id === "EDIT") {
        this.handleEditNormalStandingBook(params);
      }
    }
  };

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timerDelete) {
      clearInterval(this.timerDelete);
    }
    window.removeEventListener("message", this.handleReceive, false);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.selectedKey != this.props.selectedKey) {
      const { billMonth, paymentOrganization } = nextProps;
      this.setState({
        current: 1, selectedRowKeys: []
      }, () => {
        const { current } = this.state;
        nextProps.selectedKey === "1"
          ? this.getNormalList({ billMonth, current, paymentOrganization })
          : this.getSupplementaryList({ billMonth, current, paymentOrganization });
      });
    }
  }

  postMessageToChild = () => {
    const billMonth = getQueryString("billMonth");
    const paymentOrganization = getQueryString("paymentOrganization");
    const childFrameObj = document.getElementById("atdTable");
    const { current, pageSize, tableData, selectedRowKeys, showSum, siaccountSum, searchValue: userName } = this.state;
    const { list: dataSource, total, columns } = tableData;
    const pageInfo = { current, pageSize, total };
    childFrameObj.contentWindow.postMessage(JSON.stringify({
      dataSource, columns, pageInfo,
      selectedRowKeys, selectedKey: this.props.selectedKey,
      sumpayload: { billMonth, paymentOrganization, userName },
      showOperates: !getQueryString("type")
    }), "*");
  };

  handleSearch = () => {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    selectedKey === "1"
      ? this.getNormalList({
        billMonth,
        current: 1,
        paymentOrganization,
        userName: this.state.searchValue,
        workcode: this.state.workcode
      })
      : this.getSupplementaryList({
        billMonth,
        current: 1,
        paymentOrganization,
        userName: this.state.searchValue,
        workcode: this.state.workcode
      });
  };

  handleSave = () => {
    const {
      siaccountCommonSave,
      siaccountSupplementarySave,
      form
    } = this.props.standingBookStore;
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    if (selectedKey === "1") {
      const { includes, excludes } = form.getFormParams();
      const payload = {
        billMonth,
        includes: includes.split(","),
        excludes: _.isEmpty(excludes) ? excludes.split(",") : []
      };
      siaccountCommonSave(payload).then(() => {
        message.success("添加成功");
        this.getNormalList({
          billMonth,
          paymentOrganization,
          current: this.state.current
        });
        this.setState({
          addProps: {
            ...this.state.addProps,
            title: "",
            visible: false
          }
        });
      });
    } else {
      const paymentOrganization = getQueryString("paymentOrganization");
      form.validateForm().then(f => {
        if (f.isValid) {
          const {
            includes,
            billMonth: billMonthList,
            excludes,
            projects
          } = form.getFormParams();
          const payload = {
            billMonth,
            billMonthList: billMonthList.split(","),
            includes: includes.split(","),
            // excludes: excludes.split(","),
            projects: projects.split(","),
            paymentOrganization
          };
          siaccountSupplementarySave(payload).then(() => {
            message.success("添加成功");
            this.getSupplementaryList({
              billMonth,
              current: this.state.current,
              paymentOrganization
            });
            this.setState(
              {
                addProps: {
                  ...this.state.addProps,
                  title: "",
                  visible: false
                }
              },
              () => {
                form.resetForm();
              }
            );
          });
        } else {
          f.showErrors();
          this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
        }
      });
    }
  };
  getNormalList = async (payload = {}) => {
    const { getNormalList } = this.props.standingBookStore;
    getNormalList({ ...payload }).then(({ list, columns = [], total }) => {
      this.setState({
        tableData: { list, total, columns }
      }, () => this.postMessageToChild());
    });
  };
  getSupplementaryList = async (payload = {}) => {
    const { getSupplementaryList } = this.props.standingBookStore;
    getSupplementaryList({
      ...payload
    }).then(({ list, columns = [], total }) => {
      this.setState({
        tableData: { list, columns, total }
      }, () => this.postMessageToChild());
    });
  };
  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };
  handleBatchDelete = () => {
    const { siaccountCommonDelete } = this.props.standingBookStore;
    const { list } = this.state.tableData;
    const { selectedRowKeys } = this.state;
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    if (_.isEmpty(selectedRowKeys)) {
      message.warning("未勾选数据！");
    } else {
      const includes = _.map(
        _.filter(list, it => selectedRowKeys.includes(it.id)),
        item => item.employeeId
      );
      const ids = _.map(
        _.filter(list, it => selectedRowKeys.includes(it.id)),
        item => item.id
      );
      Modal.confirm({
        title: "确认信息",
        content: "确认删除勾选的数据吗？",
        onOk: () => {
          this.setState({
            progressVisible: true
          }, () => {
            this.timerDelete = setInterval(() => {
              if (this.state.progress !== 100) {
                this.setState({
                  progress: this.state.progress + 10
                });
              } else {
                clearInterval(this.timerDelete);
                this.setState({
                  progressVisible: false,
                  progress: 0
                }, () => {
                  message.success("删除成功");
                  selectedKey === "1"
                    ? this.getNormalList({
                      billMonth,
                      paymentOrganization,
                      current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
                    })
                    : this.getSupplementaryList({
                      billMonth,
                      current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
                      paymentOrganization
                    });
                });
              }
            }, 800);
          });

          siaccountCommonDelete({
            billMonth,
            includes,
            ids,
            paymentOrganization
          }).then(() => {
            clearInterval(this.timerDelete);
            message.success("删除成功");
            this.setState({ selectedRowKeys: [], progressVisible: false, progress: 0 });
            selectedKey === "1"
              ? this.getNormalList({
                billMonth,
                paymentOrganization,
                current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length)
              })
              : this.getSupplementaryList({
                billMonth,
                current: calcPageNo(this.state.tableData.total, this.state.current, 10, includes.length),
                paymentOrganization
              });
          });

        },
        onCancel: () => {
        }
      });
    }
  };
  handleAdd = () => {
    this.setState({
      addProps: {
        ...this.state.addProps,
        title: "添加缴纳人员",
        visible: true
      }
    });
  };

  handleCommonAccountClick = () => {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    const { commonAccount } = this.props.standingBookStore;
    commonAccount({ billMonth, paymentOrganization, includes: [] });
    this.setState({
      progressVisible: true
    }, () => {
      this.timer = setInterval(() => {
        getCalculateProgress(billMonth).then(({ status, data }) => {
          if (status) {
            if (!data.status) {
              clearInterval(this.timer);
              this.setState({
                progressVisible: false,
                progress: 0
              });
              message.error(data.message);
            }
            if (this.state.progress !== 100) {
              this.setState({
                progress: (Number(data.progress).toFixed(2)) * 100
              });
            } else {
              clearInterval(this.timer);
              this.setState({
                progressVisible: false,
                progress: 0
              }, () => {
                message.success("核算成功");
                selectedKey === "1"
                  ? this.getNormalList({
                    billMonth,
                    paymentOrganization,
                    current: this.state.current
                  })
                  : this.getSupplementaryList({
                    billMonth,
                    paymentOrganization,
                    current: this.state.current
                  });
              });
            }
          } else {
            clearInterval(this.timer);
            this.setState({
              progressVisible: false,
              progress: 0
            });
          }
        }).catch(() => {
          clearInterval(this.timer);
          this.setState({
            progressVisible: false,
            progress: 0
          });
        });
      }, 600);
    });
  };

  handleExport = () => {
    const { billMonth, selectedKey, paymentOrganization } = this.props;
    const urlObj = {
      "1": "/api/bs/hrmsalary/welfare/common/export",
      "3": "/api/bs/hrmsalary/welfare/supplementary/export"
    };
    const url = `${window.location
      .origin}${urlObj[selectedKey]}?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`;
    window.open(url, "_self");
  };
  handleEditNormalStandingBook = (record) => {
    const { userName, id: editId } = record;
    const { returnEditPersonSlide } = this.state;
    this.setState({
      returnEditPersonSlide: { ...returnEditPersonSlide, visible: true, title: userName, editId }
    });
  };
  handleCloseNormalStandingBookModal = (refreshList = false) => {
    const { returnEditPersonSlide } = this.state;
    this.setState({
      returnEditPersonSlide: { ...returnEditPersonSlide, visible: false, title: "", editId: "" }
    }, () => {
      if (refreshList) {
        const { current } = this.state;
        const { billMonth, selectedKey, paymentOrganization } = this.props;
        selectedKey === "1"
          ? this.getNormalList({
            billMonth,
            paymentOrganization,
            current
          })
          : this.getSupplementaryList({
            billMonth,
            paymentOrganization,
            current
          });
      }
    });
  };
  getSearchs = () => {
    return <WeaSearchGroup needTigger showGroup title="其他条件">
      <WeaFormItem label="工号" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
        <WeaInput
          value={this.state.workcode}
          onChange={v => this.setState({ workcode: v })}
        />
      </WeaFormItem>
    </WeaSearchGroup>;
  };

  render() {
    const { remarks, billMonth, selectedKey, paymentOrganization, standingBookStore } = this.props;
    const { addProps, adjustSlide, importParams, returnEditPersonSlide, showSearchAd } = this.state;
    const { loading } = standingBookStore;
    const btn1 = [
      <Button type="primary" onClick={this.handleBatchDelete}>批量删除</Button>,
      <Button type="primary" onClick={this.handleAdd}>添加缴纳人员</Button>
    ];
    const btn2 = [
      <Button type="primary" onClick={this.handleCommonAccountClick}>核算</Button>,
      <Button type="primary"
              onClick={() => this.setState({ adjustSlide: { ...adjustSlide, visible: true } })}>调差</Button>
    ];
    const btn3 = [
      <Button type="primary" onClick={() => {
        window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/socialSecurityBenefits/sbofflineComparison?billMonth=${billMonth}&paymentOrganization=${paymentOrganization}`);
      }}>线下对比</Button>
    ];
    const btn4 = [
      <Button type="primary"
              onClick={() => this.setState({ importParams: { ...importParams, visible: true } })}>导入数据</Button>
    ];
    const btn5 = [
      <Button type="primary" onClick={this.handleExport}>导出全部</Button>
    ];
    let btn = [];
    (this.props.type !== "detail" && this.props.selectedKey == "3") && (btn = [...btn, ...btn1]);
    (selectedKey === "1" && this.props.type !== "detail") && (btn = [...btn, ...btn2]);
    selectedKey === "1" && (btn = [...btn, ...btn3]);
    this.props.type !== "detail" && (btn = [...btn, ...btn4]);
    btn = [...btn, ...btn5];
    return (
      <div className="normalWapper">
        {
          selectedKey === "1" &&
          <div className="topContent">
            <div className="month">
              <span>
                账单月份
                <Tooltip placement="topLeft" title="提示：正常缴纳，账单月份即社保福利缴纳月份">
                  <Icon type="question-circle"/>
                </Tooltip>
              </span>
              <span>
                {billMonth}
              </span>
            </div>
            <div>
              <span>备注：</span>
              <span>
                {remarks}
              </span>
            </div>
          </div>
        }
        <WeaTab
          datas={[]} selectedKey="" advanceHeight={200} searchsAd={this.getSearchs()}
          searchType={["base", "advanced"]} showSearchAd={showSearchAd}
          setShowSearchAd={bool => this.setState({ showSearchAd: bool })}
          onSearchChange={searchValue => this.setState({ searchValue })}
          buttons={btn} onSearch={this.handleSearch} onAdSearch={this.handleSearch}
          onAdReset={() => this.setState({ workcode: "" })} searchsBasePlaceHolder="请输入员工姓名"
        />
        <SupplementarySlide
          {...addProps}
          billMonth={billMonth} paymentOrganization={paymentOrganization}
          onCancel={(isRefresh) => {
            this.setState({
              addProps: {
                ...addProps,
                visible: false
              }
            }, () => {
              isRefresh && this.getSupplementaryList({
                billMonth,
                current: this.state.current,
                paymentOrganization
              });
            });
          }}
        />
        {/*核算进度条*/}
        <ProgressModal
          title={selectedKey === "3" ? "正在删除请稍后" : "正在核算请稍后"}
          visible={this.state.progressVisible}
          onCancel={() => {
            this.setState({ progressVisible: false, progress: 0 });
          }}
          progress={this.state.progress}
        />
        {/*导入弹框*/}
        {
          importParams.visible &&
          <AcctResultImportModal
            visiable={importParams.visible}
            fieldData={this.state.fieldData}
            onAdd={fieldData => {
              this.setState({
                fieldData
              });
            }}
            onCancel={() => {
              this.setState({ importParams: { ...importParams, visible: false }, fieldData: {} }, () => {
                const { billMonth, selectedKey, paymentOrganization } = this.props;
                const { current } = this.state;
                selectedKey === "1"
                  ? this.getNormalList({ billMonth, current, paymentOrganization })
                  : this.getSupplementaryList({ billMonth, current, paymentOrganization });
              });
            }}
            isStandingBook
            standingBookTabKey={selectedKey}
          />
        }
        {/* table */}
        <div className="tableWrapper">
          <Spin spinning={loading}>
            <iframe
              style={{ border: 0, width: "100%", height: "100%" }}
              // src="http://localhost:7607/#/standingbookTable"
              src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/standingbookTable"
              id="atdTable"
            />
          </Spin>
          {/*编辑弹框*/}
          <RegEditDetial {...returnEditPersonSlide} onCancel={this.handleCloseNormalStandingBookModal}/>
          <AdjustmentSlide
            {...adjustSlide}
            onCancel={() => {
              this.setState({
                adjustSlide: {
                  ...adjustSlide,
                  visible: false
                }
              });
            }}
          />
        </div>
      </div>
    );
  }
}