trunk/pc4mobx/organization/components/deptNumberSet/index.js

/*
 * Author: 黎永顺
 * Description: 部门编号设
 * Date: 2022-06-06 09:37:39
 * LastEditTime: 2022-06-06 10:26:35
 */
import React, { Component, Fragment } from "react";
import { Button } from "antd";
import {
  WeaTop,
  WeaFormItem,
  WeaCheckbox,
  WeaSearchGroup,
  WeaSelect,
  WeaHelpfulTip,
} from "ecCom";
import StartReservedNumberSet from "../branchNumSetting/components/startReservedNumberSet";
import NumberComposition from "../branchNumSetting/components/numberComposition";
import { i18n } from "../../public/i18n";
import "../branchNumSetting/index.less";

export default class DeptNumberSet extends Component {
  constructor() {
    super();
    this.state = {
      checkVal: "0",
      isSingle: "0", //是否单独流水
      singleDate: "month", //日期单独流水
    };
  }

  /**
   * name:提示文本
   * return {*}
   */
  helpContent = () => {
    return (
      <div>
        <p>开启后，可根据设置的部门编号规则自动生成部门编号，涉及场景如下：</p>
        <p>1.手动新建和手动编辑部门时可选择重新生成编号和选择预留部门编号；</p>
        <p>2.导入人员-添加时，新创建的部门可自动生成部门编号；</p>
        <p>3.组织结构导入-添加新部门且部门编号列为空时可自动生成部门编号；</p>
        <p>【注意】开启前请先确认部门编号字段已启用！</p>
      </div>
    );
  };
  render() {
    const { checkVal, isSingle, singleDate } = this.state;
    const btns = [<Button type="primary">保存</Button>];
    const dropMenuDatas = [
      {
        key: "save",
        disabled: false,
        icon: <i className="icon-coms-Preservation" />,
        content: "保存",
        onClick: (key) => alert(`点击了搜索 key = ${key}`),
      },
    ];
    const options = [
      {
        key: "month",
        selected: false,
        showname: "月",
      },
      {
        key: "day",
        selected: true,
        showname: "日",
      },
    ];
    return (
      <div className="dept-number-set">
        <WeaTop
          title={i18n.label.deptNumSetting()}
          icon={<i className="icon-coms-hrm" />}
          iconBgcolor="#217346"
          buttons={btns}
          showDropIcon={true}
          dropMenuDatas={dropMenuDatas}
        />
        <div className="dept-content">
          <div className="switch-wrapper">
            <WeaFormItem
              label="部门编号自动生成"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}>
              <WeaCheckbox
                value={checkVal}
                helpfulTip={this.helpContent}
                helpfulTipProps={{ placement: "top" }}
                display="switch"
                id="num-set-switch"
                onChange={(checkVal) => this.setState({ checkVal })}
              />
            </WeaFormItem>
          </div>
          {/* 内容区 */}
          {checkVal === "1" && (
            <Fragment>
              <div className="numberComposition">
                <WeaSearchGroup title={"编号组成"} showGroup>
                  <NumberComposition />
                </WeaSearchGroup>
              </div>
              <div className="codeNumbering">
                <WeaSearchGroup title={"编号流水规则"} showGroup>
                  <div className="switch-wrapper">
                    <WeaFormItem
                      label="日期单独流水"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 16 }}>
                      <div className="codeNumbering-operateWapper">
                        <WeaCheckbox
                          value={isSingle}
                          display="switch"
                          id="dept-date-set-switch"
                          onChange={(isSingle) => this.setState({ isSingle })}
                        />
                        {isSingle == "1" && (
                          <WeaSelect
                            options={options}
                            value={singleDate}
                            detailtype={3}
                            supportCancel
                            onChange={(v, showname) => {
                              console.log("v", v, "showname", showname);
                            }}
                          />
                        )}
                        <WeaHelpfulTip
                          width={200}
                          title="开启后可设置按年、按月或按天单独流水，如设置按年单独流水，那每年的1月1日开始流水号从001开始重新流水。"
                          placement="topLeft"
                        />
                      </div>
                    </WeaFormItem>
                  </div>
                </WeaSearchGroup>
              </div>
              <div className="startReservedNumberSet">
                <WeaSearchGroup
                  title={"起始编号及预留编号设置"}
                  showGroup
                  center>
                  <StartReservedNumberSet />
                </WeaSearchGroup>
              </div>
            </Fragment>
          )}
        </div>
      </div>
    );
  }
}