salary-management-front/pc4mobx/hrmSalary/pages/payroll/components/waterMarkSetModal.js

/*
 * Author: 黎永顺
 * name: 水印设置-弹框
 * Description:
 * Date: 2023/6/13
 */
import React, { Component } from "react";
import {
  WeaError,
  WeaFormItem,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaSearchGroup,
  WeaSelect,
  WeaSlideModal
} from "ecCom";
import { Button } from "antd";
import ImageUploadList from "../../../components/upload";
import WmContentSetModal from "./wmContentSetModal";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class WaterMarkSetModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      wmClassify: "text", wmNoTransparent: 0,
      wmRotate: 0, wmImg: null, wmcontSet: {
        visible: false, textSet: {}
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      const { watermarkSetting } = nextProps;
      const {
        wmClassify = "text",
        wmNoTransparent = 0,
        wmRotate = 0,
        wmImg,
        wmOriginText,
        wmHeight,
        wmWidth,
        pureWmText,
        wmSelectedFieldIds,
        wmText
      } = watermarkSetting;
      if (wmClassify === "text") {
        this.setState({
          wmClassify, wmNoTransparent, wmRotate,
          wmcontSet: {
            ...this.state.wmcontSet, textSet: wmOriginText ? {
              wmOriginText, wmHeight, wmWidth, pureWmText, wmSelectedFieldIds, wmText
            } : {}
          }
        });
      } else {
        this.setState({
          wmClassify, wmNoTransparent, wmRotate, wmImg
        });
      }
    }
  }

  handleCustomSave = () => {
    const { wmClassify, wmImg, wmRotate, wmNoTransparent, wmcontSet } = this.state;
    if ((wmClassify === "text" && _.isEmpty(wmcontSet.textSet)) || (wmClassify !== "text" && !wmImg)) {
      this.refs.watermarkContError.showError();
      return;
    }
    if (wmClassify === "text") {
      this.props.onChange({
        wmSetting: {
          wmClassify, ...wmcontSet.textSet,
          wmNoTransparent, wmRotate
        }
      });
    } else {
      this.props.onChange({
        wmSetting: {
          wmClassify, wmImg,
          wmNoTransparent, wmRotate
        }
      });
    }
    this.props.onClose();
  };

  render() {
    const { wmClassify, wmNoTransparent, wmRotate, wmImg, wmcontSet } = this.state;
    return (
      <WeaSlideModal
        {...this.props} className="waterMarkSetWrapper"
        title={<span className="wmTitle">{getLabel(111, "水印设置")}</span>}
        direction="right" top={0} width={800} height={100}
        measureT="%" measureX="px" measureY="%"
        content={
          <React.Fragment>
            <WeaSearchGroup showGroup needTigger={false} className="waterMarkWrapper">
              <WeaFormItem label={getLabel(111, "水印类型")} labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
                <WeaSelect
                  value={wmClassify} detailtype={3}
                  options={[
                    { key: "text", showname: getLabel(111, "文本") },
                    { key: "image", showname: getLabel(111, "图片") }
                  ]}
                  onChange={wmClassify => this.setState({ wmClassify })}
                />
              </WeaFormItem>
              <WeaFormItem label={getLabel(111, "水印类型")} labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
                {
                  wmClassify === "text" ?
                    <WeaError tipPosition="bottom" ref="watermarkContError" error={getLabel(385869, "此项必填")}>
                      <div className="textSetting">
                        <i className="icon-coms-Flow-setting"
                           onClick={() => this.setState({ wmcontSet: { ...wmcontSet, visible: true } })}/>
                        {
                          _.isEmpty(wmcontSet.textSet) ? <img src="/images/BacoError_wev9.png" alt=""/> :
                            <span className="previewBtn txtPrew"><i className="icon-coms-Selected" style={{
                              "color": "#093",
                              "marginRight": "5px"
                            }} onClick={() => {
                              window.open(`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/payroll/watermark/preview`, "_blank");
                            }}/> 预览</span>
                        }
                      </div>
                    </WeaError> :
                    <WeaError tipPosition="bottom" ref="watermarkContError" error={getLabel(385869, "此项必填")}>
                      <div className="textSetting">
                        <ImageUploadList onChange={wmImg => this.setState({ wmImg }, () => {
                          window.localStorage.setItem("wmSetting", JSON.stringify({
                            wmSetting: {
                              wmClassify, wmRotate, wmNoTransparent,
                              ...this.state.wmImg
                            }
                          }));
                        })} wmImg={wmImg}/>
                        {
                          !wmImg ? <img src="/images/BacoError_wev9.png" alt=""/> :
                            <span className="previewBtn" onClick={() => {
                              window.open(`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/payroll/watermark/preview`, "_blank");
                            }}>预览</span>
                        }
                      </div>
                    </WeaError>
                }
              </WeaFormItem>
              <WeaFormItem label={getLabel(111, "不透明（百分比）")} labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
                <WeaInputNumber
                  min={0} max={80} precision={2} value={wmNoTransparent}
                  onChange={wmNoTransparent => this.setState({ wmNoTransparent })}
                />
              </WeaFormItem>
              <WeaFormItem label={getLabel(111, "旋转角度（逆时针）")} labelCol={{ span: 5 }} wrapperCol={{ span: 10 }}>
                <WeaInputNumber
                  min={0} max={360} precision={2} value={wmRotate}
                  onChange={wmRotate => this.setState({ wmRotate })}
                />
              </WeaFormItem>
            </WeaSearchGroup>
            <div className="slideBottom">
              <Button type="primary" onClick={this.handleCustomSave}>{getLabel(111, "确定")}</Button>
              <Button type="ghost" onClick={this.props.onClose}>{getLabel(111, "取消")}</Button>
            </div>
            {/*  水印内容设置弹框*/}
            <WmContentSetModal {...wmcontSet}
                               onClose={textSet => this.setState({
                                 wmcontSet: {
                                   ...wmcontSet,
                                   visible: false,
                                   textSet
                                 }
                               }, () => {
                                 window.localStorage.setItem("wmSetting", JSON.stringify({
                                   wmSetting: {
                                     wmClassify, wmRotate, wmNoTransparent,
                                     ...this.state.wmcontSet.textSet
                                   }
                                 }));
                               })}
            />
          </React.Fragment>
        }
      />
    );
  }
}

export default WaterMarkSetModal;