trunk/pc4mobx/organization/components/branchNumSetting/components/numberComposition.js

/*
 * Author: 黎永顺
 * Description:
 * Date: 2022-05-17 16:02:56
 * LastEditTime: 2022-05-18 13:46:29
 */
import React, { Component, Fragment } from "react";
import { Button, Modal } from "antd";
import {
  WeaTableEdit,
  WeaDialog,
  WeaMoreButton,
  WeaFormItem,
  WeaSelect,
  WeaInput,
} from "ecCom";
import Preview from "./preview";
import { i18n } from "../../../public/i18n";
import _ from "lodash";

const dataSource = [
  {
    value: "",
    numFieldName: "字符串",
    numField: "string",
  },
  { value: "3", numFieldName: "流水号位数", numField: "number" },
];

const options = [
  {
    key: "string",
    showname: "字符串",
  },
  {
    key: "year",
    showname: "当前年份",
  },
  {
    key: "month",
    showname: "当前月份",
  },
  {
    key: "day",
    showname: "当前日期",
  },
];
class NumberComposition extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
      numField: "string",
      numFieldName: "字符串",
      dataSource,
    };
  }

  /**
   * name:复选框禁用
   * param undefined
   * return {*}
   */
  getRowSelection = (rowSelection) => {
    const { dataSource } = this.state;
    const hasMonthNum = dataSource.some((item) => item.numField === "month");
    const hasDayNum = dataSource.some((item) => item.numField === "day");
    const sel = { ...rowSelection };
    sel.getCheckboxProps = (record) => {
      return {
        disabled:
          record.numField === "number" ||
          (hasMonthNum && record.numField === "year") ||
          (hasDayNum && record.numField === "month"),
      };
    };
    return sel;
  };
  /**
   * name: 字段保存
   * return {*}
   */
  handleSave = () => {
    const { numField, numFieldName, dataSource } = this.state;
    const objWrite = {
      value: "",
      numFieldName,
      numField,
    };
    const objView = {
      com: {
        value: [{ key: numField, label: "", type: "TEXT" }],
      },
      [numField]: "",
      numFieldName,
      numField,
    };
    if (numField === "year" || numField === "month" || numField === "day") {
      const hasYearOrMonthOrDay = _.some(
        dataSource,
        (it) => it.numField === numField
      );
      const hasYearNum = dataSource.some((item) => item.numField === "year");
      const hasMonthNum = dataSource.some((item) => item.numField === "month");
      if (!hasYearOrMonthOrDay) {
        if (numField === "month" && !hasYearNum) {
          Modal.warning({
            title: "信息确认",
            content: `添加【${numFieldName}】时，请先添加【当前年份】！`,
            onOk() {},
            okText: "确认",
          });
          return;
        }
        if (numField === "day" && (!hasYearNum || !hasMonthNum)) {
          Modal.warning({
            title: "信息确认",
            content: `添加【${numFieldName}】时，请先添加【当前年份】和【当前月份】！`,
            onOk() {},
            okText: "确认",
          });
          return;
        }
        this.setState({
          visible: false,
          numField: "string",
          numFieldName: "字符串",
          dataSource: [...dataSource, objView],
        });
      } else {
        this.showConfirm();
      }
    } else {
      this.setState({
        visible: false,
        numField: "string",
        numFieldName: "字符串",
        dataSource: [...dataSource, objWrite],
      });
    }
  };
  /**
   * name:年月日字段重复提示
   * return {*}
   */
  showConfirm = () => {
    const { numFieldName } = this.state;
    Modal.warning({
      title: "信息确认",
      content: `已经添加过一个${numFieldName}，请选择其他编号字段！`,
      footer: [],
      onOk() {},
      okText: "确认",
    });
  };
  /**
   * name: 编号字段删除
   * return {*}
   */
  handleDeleteTable = (keys, datas) => {
    const { dataSource } = this.state;
    const stringRow = _.filter(dataSource, (it) => it.numField === "string");
    const yearRow = _.filter(dataSource, (it) => it.numField === "year");
    const monthRow = _.filter(dataSource, (it) => it.numField === "month");
    const dayRow = _.filter(dataSource, (it) => it.numField === "day");
    const disableRow = _.filter(dataSource, (it) => it.numField === "number");
    const tmpV = [
      ...stringRow,
      ...yearRow,
      ...monthRow,
      ...dayRow,
      ...disableRow,
    ];
    this.setState({
      dataSource: _.filter(tmpV, (it, idx) => !keys.includes(idx)),
    });
  };

  handleChangeInput = (value, index) => {
    const { dataSource } = this.state;
    const stringRow = _.filter(dataSource, (it) => it.numField === "string");
    const yearRow = _.filter(dataSource, (it) => it.numField === "year");
    const monthRow = _.filter(dataSource, (it) => it.numField === "month");
    const dayRow = _.filter(dataSource, (it) => it.numField === "day");
    const disableRow = _.filter(dataSource, (it) => it.numField === "number");
    const tmpV = _.map(
      [...stringRow, ...yearRow, ...monthRow, ...dayRow, ...disableRow],
      (it, idx) => ({ ...it, key: idx })
    );
    this.setState({
      dataSource: _.map(tmpV, (it) => {
        if (it.key === index) {
          return {
            ...it,
            value,
          };
        }
        return { ...it };
      }),
    });
  };

  render() {
    const { visible, numField, dataSource } = this.state;
    const columns = [
      {
        title: "",
        dataIndex: "numFieldName",
        key: "numFieldName",
        colSpan: 1,
        com: [{ label: "", type: "TEXT" }],
        width: "20%",
      },
      {
        title: "",
        useRecord: true,
        dataIndex: "custom",
        key: "custom",
        com: [
          {
            type: "custom",
            key: "custom",
            render: (text, record, index) => {
              const { numField } = record;
              if (
                numField === "year" ||
                numField === "month" ||
                numField === "day"
              ) {
                return <span></span>;
              }
              return (
                <WeaInput
                  id="custom"
                  value={record.value}
                  onChange={(value) =>
                    this.handleChangeInput(value, index, record)
                  }
                />
              );
            },
          },
        ],
        // dataIndex: "value",
        // key: "value",
        // com: [{ label: "", type: "INPUT", viewAttr: 2, key: "value" }],
        colSpan: 1,
        width: "70%",
      },
    ];
    const buttons = [
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@jd6baw`}
        onClick={this.handleSave}
        type="primary">
        {i18n.button.save()}
      </Button>,
      <WeaMoreButton
        ecId={`${
          (this && this.props && this.props.ecId) || ""
        }_WeaMoreButton@e4f4n1`}
      />,
    ];
    const stringRow = _.map(
      _.filter(dataSource, (it) => it.numField === "string"),
      (item, index) => {
        return {
          ...item,
          numFieldName: `${item.numFieldName}${index + 1}`,
        };
      }
    );
    const yearRow = _.filter(dataSource, (it) => it.numField === "year");
    const monthRow = _.filter(dataSource, (it) => it.numField === "month");
    const dayRow = _.filter(dataSource, (it) => it.numField === "day");
    const disableRow = _.filter(dataSource, (it) => it.numField === "number");

    return (
      <Fragment>
        <WeaTableEdit
          draggable={true}
          columns={columns}
          datas={[
            ...stringRow,
            ...yearRow,
            ...monthRow,
            ...dayRow,
            ...disableRow,
          ]}
          getRowSelection={this.getRowSelection}
          pushTitleIntoHeader
          showCopy={false}
          btnsType="inline"
          deleteConfirm
          addType="func"
          addFunc={() =>
            this.setState({
              visible: true,
            })
          }
          onDelete={this.handleDeleteTable}
        />
        {/* 预览 */}
        <Preview
          dataSource={[
            ...stringRow,
            ...yearRow,
            ...monthRow,
            ...dayRow,
            ...disableRow,
          ]}
        />
        {/* 新增弹框 */}
        <WeaDialog
          onCancel={() =>
            this.setState({
              visible: false,
            })
          }
          icon="icon-coms-hrm"
          iconBgcolor="#217346"
          title={i18n.label.addNumberField()}
          visible={visible}
          hasScroll
          maxHeight={150}
          buttons={buttons}>
          <WeaFormItem
            label="编号字段"
            style={{ padding: "20px 20%" }}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}>
            <WeaSelect
              options={options}
              value={numField}
              style={{ width: "100%" }}
              viewAttr={2}
              onChange={(numField, numFieldName) => {
                this.setState({ numField, numFieldName });
              }}
            />
          </WeaFormItem>
        </WeaDialog>
      </Fragment>
    );
  }
}

export default NumberComposition;