org-chart-frant/src/components/timeline/index.jsx

/*
 * @Author: Chengliang 1546584672@qq.com
 * @Date: 2023-06-25 16:33:21
 * @LastEditors: Chengliang 1546584672@qq.com
 * @LastEditTime: 2023-09-14 17:48:39
 * @FilePath: /org-chart-frant/src/components/timeline/index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import { Timeline, Drawer, Popconfirm, message } from 'antd';
import styles from './index.less';
import leftTreeShow from './img/leftTree-show.png';
import leftHide from './img/leftTree-hide.png';
import { CloseCircleOutlined } from '@ant-design/icons';
import { getLabel } from '../../util/i18n.js';

export default class TimeLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timelineList: [],
      open: true,
    };
  }

  handleLineClick(data) {
    let newList = this.state.timelineList.map((item) => {
      item.color = 'grey';
      if (item.key == data.key) {
        item.color = 'blue';
      }
      return item;
    });
    this.setState({
      timelineList: newList,
    });
    this.props.onClick(data);
  }

  handleDelete(key) {
    const { labelData } = this.props;
    let api = `/api/bs/hrmorganization/orgchart/versionDelete?versionId=${key}`;
    fetch(api)
      .then((res) => res.json())
      .then((data) => {
        if (data.api_status) {
          message.success(`${getLabel(547484, labelData)}`, 2, 3);
          window.location.reload(true);
        } else {
          message.error(`${getLabel(547483, labelData)}`, 2, 3);
        }
      });
  }

  componentDidMount() {
    this.searchTimeLines(this.props.url);
  }

  searchTimeLines(url) {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          timelineList: data.timelineList,
        });
      });
  }

  setOpen = () => {
    this.setState({
      open: !this.state.open,
    });
  };

  render() {
    const { labelData } = this.props;

    let showStyle = {};
    let positionStyle = {};
    if (this.state.open) {
      showStyle = {
        display: 'block',
      };
      positionStyle = {
        left: '219px',
        background: `url(${leftTreeShow}) no-repeat -2px 0`,
      };
    } else {
      showStyle = {
        display: 'none',
      };
      positionStyle = {
        left: '0',
        background: `url(${leftHide}) no-repeat -2px 0`,
      };
    }

    return (
      <>
        <div
          className={styles.leftRightLayoutBtn}
          style={positionStyle}
          onClick={this.setOpen}
        ></div>
        <div className={styles.lineWrapper} style={showStyle}>
          <Timeline>
            {this.state.timelineList.map((item) => {
              return (
                <Timeline.Item
                  key={item.key}
                  className={styles.timeline}
                  color={item.color}
                  style={{
                    color: item.color == 'blue' ? '#1890ff' : 'dimgray',
                  }}
                >
                  <div onClick={this.handleLineClick.bind(this, item)}>
                    {item.title}
                  </div>
                  {item.key != 0 && (
                    <Popconfirm
                      title={`${getLabel(547491, labelData)}[${item.title}]?`}
                      onConfirm={this.handleDelete.bind(this, item.key)}
                      okText={getLabel(547319, labelData)}
                      cancelText={getLabel(547318, labelData)}
                    >
                      <div className={styles.delete}>
                        <CloseCircleOutlined />
                      </div>
                    </Popconfirm>
                  )}
                  <div className={styles.time}>{item.time}</div>
                </Timeline.Item>
              );
            })}
          </Timeline>
        </div>
      </>
    );
  }
}