trunk/pc4mobx/organization/components/numberSetting/branchNumSetting/index.js

/*
 * Author: 黎永顺
 * Description: 分部编号设置
 * Date: 2022-05-17 14:30:57
 * LastEditTime: 2022-06-07 17:49:14
 */
import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { Button, message } from "antd";
import {
  WeaTop,
  WeaFormItem,
  WeaCheckbox,
  WeaSearchGroup,
  WeaSelect,
  WeaHelpfulTip,
} from "ecCom";
import StartReservedNumberSet from "./components/startReservedNumberSet";
import NumberComposition from "./components/numberComposition";
import { i18n } from "../../../public/i18n";
import moment from "moment";
import "./index.less";

@inject("numberSet")
@observer
export default class BranchNumSetting extends Component {
  constructor() {
    super();
    this.state = {
      options: [],
      loading: false,
      dataSource: [],
      startNumberInfo: {
        columns: [],
        dataSource: [],
      },
      subCompanyInfo: {
        details: [],
        serialenable: "0",
        dateSerial: {
          enable: "0",
          key: "",
        },
      },
    };
  }

  componentDidMount() {
    this.getCodeSetting();
  }

  getCodeSetting = () => {
    const { numberSet } = this.props;
    numberSet
      .getCodeSetting({ serialtype: "SUBCOMPANY" })
      .then(({ api_status, details, serialenable, dateSerial = {} }) => {
        if (api_status && !_.isEmpty(details)) {
          this.setState({
            subCompanyInfo: { details, serialenable, dateSerial },
          });
        }
      });
  };

  handleSubmit = () => {
    const { numberSet } = this.props;
    const { dataSource, subCompanyInfo } = this.state;
    const { serialenable, dateSerial } = subCompanyInfo;
    const details = _.map(dataSource, (it, showorder) => {
      const { numField, value: rulevalue } = it;
      return {
        ruletype: _.upperCase(numField),
        rulevalue,
        showorder,
      };
    });
    const payload = {
      datas: JSON.stringify({
        serialenable,
        details,
        dateSerial,
        serialtype: "SUBCOMPANY",
      }),
    };
    this.setState({ loading: true });
    numberSet.saveOrUpdateCodeSetting(payload).then(({ api_status }) => {
      this.setState({ loading: false });
      if (api_status) {
        message.success("保存成功");
      }
    });
  };

  handleChangeCode = (data) => {
    const tmpV = _.filter(
      data,
      (it) =>
        it.numField === "year" ||
        it.numField === "month" ||
        it.numField === "day"
    );
    this.setState({
      dataSource: _.cloneDeep(data),
      options: _.map(tmpV, (it) => {
        const { numFieldName: showname, numField: key } = it;
        return { key: _.upperCase(key), showname };
      }),
    });
  };

  handleSetNumber = (type) => {
    this.handleSubmit();
    const { numberSet } = this.props;
    if (type === "start") {
      const payload = {
        coderuleid: 1,
        type: "",
        dateStart: moment().format("YYYY"),
        dateEnd: moment().format("YYYY"),
        subCompanyId: "",
        deptId: "",
        jobtitlesId: "",
      };
      numberSet
        .getStartNumForm(payload)
        .then(({ api_status, columns, dataSource }) => {
          if (api_status) {
            this.setState({
              startNumberInfo: { columns, dataSource },
            });
          }
        });
    }
  };
  handleChangeTable = (newColumns, datas) => {
    this.setState({
      startNumberInfo: {
        ...this.state.startNumberInfo,
        columns: newColumns,
        dataSource: datas,
      },
    });
  };

  handleSubmitStartNumber = () => {
    const { numberSet } = this.props;
    const payload = {
      datas: JSON.stringify({
        coderuleid: 1,
        ...this.state.startNumberInfo,
      }),
    };
    numberSet.saveStartNum(payload).then(({ api_status }) => {
      if (api_status) {
        message.success("保存成功");
        this.numberSetRef.handleClose();
      }
    });
  };

  /**
   * name:提示文本
   * return {*}
   */
  helpContent = () => {
    return (
      <div>
        <p>开启后，可根据设置的分部编号规则自动生成分部编号，涉及场景如下：</p>
        <p>1.手动新建和手动编辑分部时可选择重新生成编号和选择预留分部编号；</p>
        <p>2.组织结构导入-添加新分部且分部编号列为空时，会自动生成分部编号；</p>
        <p>3.导入人员-添加时，新创建的分部可自动生成分部编号；</p>
        <p>【注意】开启前请先确认分部编号字段已启用！</p>
      </div>
    );
  };

  render() {
    const { options, subCompanyInfo, loading, startNumberInfo } = this.state;
    const { details, serialenable, dateSerial } = subCompanyInfo;
    const btns = [
      <Button type="primary" onClick={this.handleSubmit} loading={loading}>
        保存
      </Button>,
    ];
    const dropMenuDatas = [
      {
        key: "save",
        disabled: false,
        icon: <i className="icon-coms-Preservation" />,
        content: "保存",
        onClick: (key) => this.handleSubmit(),
      },
    ];
    return (
      <div className="branch-wapper">
        <WeaTop
          title={i18n.label.branchNumSetting()}
          icon={<i className="icon-coms-hrm" />}
          iconBgcolor="#217346"
          buttons={btns}
          showDropIcon={true}
          dropMenuDatas={dropMenuDatas}
        />
        <div className="branch-content">
          <div className="switch-wrapper">
            <WeaFormItem
              label="分部编号自动生成"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}>
              <WeaCheckbox
                value={serialenable}
                helpfulTip={this.helpContent}
                helpfulTipProps={{ placement: "top" }}
                display="switch"
                id="num-set-switch"
                onChange={(checkVal) =>
                  this.setState({
                    subCompanyInfo: {
                      ...subCompanyInfo,
                      serialenable: checkVal,
                    },
                  })
                }
              />
            </WeaFormItem>
          </div>
          {/* 内容区 */}
          {serialenable === "1" && (
            <Fragment>
              <div className="numberComposition">
                <WeaSearchGroup title={"编号组成"} showGroup>
                  <NumberComposition
                    onChange={this.handleChangeCode}
                    dataSource={details}
                  />
                </WeaSearchGroup>
              </div>
              {!_.isEmpty(options) && (
                <div className="codeNumbering">
                  <WeaSearchGroup title={"编号流水规则"} showGroup>
                    <div className="switch-wrapper">
                      <WeaFormItem
                        label="日期单独流水"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}>
                        <div className="codeNumbering-operateWapper">
                          <WeaCheckbox
                            value={dateSerial.enable ? dateSerial.enable : "0"}
                            display="switch"
                            id="dept-date-set-switch"
                            onChange={(isSingle) =>
                              this.setState({
                                subCompanyInfo: {
                                  ...subCompanyInfo,
                                  dateSerial: {
                                    ...dateSerial,
                                    enable: isSingle,
                                  },
                                },
                              })
                            }
                          />
                          {dateSerial.enable == "1" && (
                            <WeaSelect
                              options={options}
                              value={dateSerial.key}
                              detailtype={3}
                              supportCancel
                              onChange={(key) =>
                                this.setState({
                                  subCompanyInfo: {
                                    ...subCompanyInfo,
                                    dateSerial: {
                                      ...dateSerial,
                                      key,
                                    },
                                  },
                                })
                              }
                            />
                          )}
                          <WeaHelpfulTip
                            width={200}
                            title="开启后可设置按年、按月或按天单独流水，如设置按年单独流水，那每年的1月1日开始流水号从001开始重新流水。"
                            placement="topLeft"
                          />
                        </div>
                      </WeaFormItem>
                    </div>
                  </WeaSearchGroup>
                </div>
              )}
              <div className="startReservedNumberSet">
                <WeaSearchGroup
                  title={"起始编号及预留编号设置"}
                  showGroup
                  center>
                  <StartReservedNumberSet
                    ref={(dom) => (this.numberSetRef = dom)}
                    onSet={this.handleSetNumber}
                    startNumberInfo={startNumberInfo}
                    onChange={this.handleChangeTable}
                    onSaveStartNumber={this.handleSubmitStartNumber}
                  />
                </WeaSearchGroup>
              </div>
            </Fragment>
          )}
        </div>
      </div>
    );
  }
}