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

import React from 'react';
import {
  Drawer,
  Space,
  Button,
  Dropdown,
  Menu,
  Table,
  Spin,
  Checkbox,
  Modal,
  Input,
} from 'antd';
import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
import qs from 'qs';
import { message } from 'antd';
import jsPDF from 'jspdf';
import ExportJsonExcel from 'js-export-excel';
import './index.less';
import { i18n } from '../../util/i18n.js';

let addNodeChildFunc = null;
let orgChart = null;
let active = 'top';
export default class DrawerComponents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      data: [],
      detailType: 'chart',
      params: {},
      dataSource: [],
      columns: [],
      spinning: true,
      showJob: true,
      isModalOpen: false,
      jobResponsibility: '',
      personId: '',
      jobTitle: '',
    };
  }

  componentDidMount() {}

  // 点击节点
  onNodeClick = (node) => {
    if (node.ftype == '4') {
      this.setState({
        jobResponsibility: node.jobResponsibility,
        jobTitle: node.jobTitle,
        isModalOpen: true,
        personId: node.id,
      });
    }
  };

  onButtonClick(event, d) {
    if (d.children) {
      let idsList = [];
      d.children.forEach((item) => {
        if (item.data.hasChildren && !item._children) {
          idsList.push(item.data.id);
        }
      });
      if (idsList.length == 0) {
        return;
      }
    }
  }

  // 获取部门图片
  getDepartmentImage(fisvitual) {
    return fisvitual == '0'
      ? `./img/user-card/user-card.png`
      : `./img/user-card/user-card-blue.png`;
  }

  //获取数据
  getDeatilDatas(params, type = 'chart', showJob = '1') {
    const { language } = this.props;
    this.setState({ spinning: true, data: [], dataSource: [] });
    d3.json(
      '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
        qs.stringify({ detauleType: type, ...params, showJob }),
    ).then((data) => {
      //
      if (type == 'chart') {
        this.setState({ data: data.data, spinning: false });
      } else {
        let columns = [
          {
            dataIndex: 'id',
            key: 'id',
            title: `${i18n.table.no[language]}`,
          },
          {
            dataIndex: 'workCode',
            key: 'workCode',
            title: `${i18n.table.workCode[language]}`,
          },
          {
            dataIndex: 'lastName',
            key: 'lastName',
            title: `${i18n.table.lastName[language]}`,
          },
          {
            dataIndex: 'sex',
            key: 'sex',
            title: `${i18n.table.gender[language]}`,
          },
          {
            dataIndex: 'departmentName',
            key: 'departmentName',
            title: `${i18n.table.department[language]}`,
          },
          {
            dataIndex: 'subcompanyName',
            key: 'subcompanyName',
            title: `${i18n.table.company[language]}`,
          },
          {
            dataIndex: 'jobTitle',
            key: 'jobTitle',
            title: `${i18n.table.possition[language]}`,
          },
          {
            dataIndex: 'mobile',
            key: 'mobile',
            title: `${i18n.table.mobile[language]}`,
          },
        ];
        this.setState({
          dataSource: data.dataSource,
          columns: columns,
          spinning: false,
        });
      }
    });
  }

  // ButtonContent渲染
  buttonContentRender = ({ node, state }) => {
    return `
            <div style="margin-left: 16px; margin-top: 10px;">
            <img src="./img/button_content.png" />
            </div>
        `;
  };

  // 节点宽度渲染
  nodeWidthRender = (d) => {
    return 280;
  };

  nodeHeightRender = (d) => {
    return 160;
  };

  // tool bar start
  handleTopLayoutClick = (progressBtn) => {
    progressBtn.current.style.top = 50 + 'px';
    orgChart &&
      orgChart
        .setCentered(orgChart.getChartState().root.id)
        .layout('top')
        .render();
    active = 'top';
  };

  handleLeftLayoutClick = (progressBtn) => {
    progressBtn.current.style.top = 50 + 'px';
    orgChart &&
      orgChart
        .layout('left')
        .setCentered(orgChart.getChartState().root.id)
        .render();
    active = 'left';
  };

  handleZoomIn = (progressBtn) => {
    if (progressBtn) {
      let top = parseInt(progressBtn.current.style.top) - 10;
      if (top >= 0) {
        progressBtn.current.style.top = top + 'px';
      } else {
        return;
      }
    }
    orgChart && orgChart.zoomIn();
  };

  handleZoomOut = (progressBtn) => {
    if (progressBtn) {
      let top = parseInt(progressBtn.current.style.top) + 10;
      if (top <= 100) {
        progressBtn.current.style.top = top + 'px';
      } else {
        return;
      }
    }
    orgChart && orgChart.zoomOut();
  };

  downloadPdf = (chart) => {
    chart.exportImg({
      save: false,
      full: true,
      onLoad: (base64) => {
        var pdf = new jsPDF();
        var img = new Image();
        img.src = base64;
        img.onload = function () {
          pdf.addImage(
            img,
            'JPEG',
            5,
            5,
            595 / 3,
            ((img.height / img.width) * 595) / 3,
          );
          pdf.save('chart.pdf');
        };
      },
    });
  };

  handleExport = (e) => {
    const { language } = this.props;
    let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel';
    if (type == 'png') {
      orgChart && orgChart.exportImg({ full: true });
    } else if (type == 'pdf') {
      orgChart && this.downloadPdf(orgChart);
    } else {
      let { dataSource } = this.state;
      var option = {};
      let dataTable = [];
      if (dataSource) {
        for (let i in dataSource) {
          if (dataSource) {
            let obj = {
              序号: dataSource[i].id,
              工号: dataSource[i].workCode,
              姓名: dataSource[i].lastName,
              性别: dataSource[i].sex,
              部门: dataSource[i].departmentName,
              分部: dataSource[i].subcompanyName,
              岗位: dataSource[i].jobTitle,
              手机号: dataSource[i].mobile,
            };
            dataTable.push(obj);
          }
        }
      }
      option.fileName = `${i18n.table.orgInfo[language]}`;
      option.datas = [
        {
          sheetData: dataTable,
          sheetName: 'sheet',
          sheetFilter: [
            '序号',
            '工号',
            '姓名',
            '性别',
            '部门',
            '分部',
            '岗位',
            '手机号',
          ],
          sheetHeader: [
            i18n.table.no[language],
            i18n.table.workCode[language],
            i18n.table.lastName[language],
            i18n.table.gender[language],
            i18n.table.department[language],
            i18n.table.company[language],
            i18n.table.possition[language],
            i18n.table.mobile[language],
          ],
        },
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    }
  };

  /**
   * 节点渲染
   */
  nodeContentRender = (d, i, arr, state) => {
    const { language } = this.props;

    if (d.data.ftype == 2) {
      return `<div style="position: relative;">
                <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
                    <div style='position:absolute;z-index:-1;top:0'>
                        <img style='width: 295px;height: 163px;' src="${this.getDepartmentImage(
                          d.data.fisvitual,
                        )}">
                    </div>
                    <div style="display: inline-block;  background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
                        <img src='./img/user-card/avatar-outer.png' style='position:absolute;width:90px;height:90px;left:11px'/>
                        <img src="${
                          d.data.fleaderimg
                            ? d.data.fleaderimg
                            : './img/department.png'
                        }" style="width: 58px; height: 58px;position:absolute;left:29px; border-radius: 50%; margin-top: 16px;position:absolute;left:29px;z-index:999"/>
                    </div>
                    <div style="display: inline-block; margin-left: 6px;width: 55%">
                        <div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                            ${d.data.fname}
                        </div>        
                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">
                          ${i18n.head[language]}:${d.data.fleader}
                        </div>
                        <div style="display:flex" >
                            <div style="height: 25px; line-height: 25px; min-width: 80px;">
                                ${i18n.onJob[language]}: ${d.data.fonjob} ${
        i18n.onJob[language] == 'cn' ? '人' : ''
      }
                            </div>
                        </div>
                    </div>
                   
                </div>
              </div>`;
    } else if (d.data.ftype == 3) {
      return `<div style="position: relative;">
                <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
                    <div style='position:absolute;z-index:-1;top:0'>
                        <img style='width: 295px;height: 163px;' src='./img/user-card/user-card-orange.png'>
                    </div>
                    <img src="./img/user-card/jobicon-orange.png" style="margin-left: 20px; vertical-align: top;"/>
                    <div style="display: inline-block; margin-left: 15px;">
                        <div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${
                          d.data.fname
                        }</div>
                        <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
                            <span>${i18n.onJob[language]}: ${d.data.fonjob} ${
        i18n.onJob[language] == 'cn' ? '人' : ''
      }</span>
                        </div>
                    </div>
                </div>
              </div>`;
    } else if (d.data.ftype == 4) {
      return `<div style="position: relative;" >
                <div style="height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
                    <div style='position:absolute;z-index:-1;top:0px'>
                        <img style='width: 295px;height: 163px;' src='./img/user-card/user-card-green.png'>
                    </div>
                <div style="display: inline-block;  background-size: 100% 100%; width: 35%; height: 90px; text-align:center; vertical-align: top; margin-left: 11px;box-sizing: border;">
                    <img src='./img/user-card/avatar-outer-green.png' style='position:absolute;width:90px;height:90px;left:11px;z-index:-1'/>
                    <img src="${
                      d.data.fleaderimg
                        ? d.data.fleaderimg
                        : './img/default_avator.png'
                    }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
                </div>
                <div style="display: inline-block; margin-left: -6px;width: 58%;height:100%;margin-top:-20px;">
                    <div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:15px'>
                        <div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
                          d.data.fname
                        }</div>
                    </div>
                    <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;height: 25px;line-height: 25px;">
                        <span>${i18n.serveAge[language]}: ${
        d.data.companyWorkYear
      } ${i18n.year[language]}</span>
                        <div>${i18n.postion[language]}: ${d.data.jobTitle}</div>
                        <div>${i18n.level[language]}: ${d.data.level}</div>
                    </div>
                </div>
                </div>
             </div>`;
    }
  };

  showDrawer = (params) => {
    const showJob = params.fclass == '0' ? '1' : '0';
    this.getDeatilDatas(params, 'chart', showJob);
    this.setState({ open: true, params: params });
  };

  onClose = () => {
    const { params } = this.state;
    this.setState({
      open: false,
      detailType: 'chart',
      showJob: params.fclass == '0' ? 'true' : 'false',
    });
  };

  changeDetail = () => {
    const { detailType, params } = this.state;
    let type = detailType == 'chart' ? 'table' : 'chart';
    var showJob = '1';
    if (params.fclass == '0') {
      showJob = this.state.showJob ? '1' : '0';
    } else {
      showJob = '0';
    }
    this.setState({
      detailType: type,
    });
    this.getDeatilDatas(params, type, showJob);
  };

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

    const {
      params,
      open,
      data,
      detailType,
      dataSource,
      columns,
      spinning,
      showJob,
      jobResponsibility,
      jobTitle,
      isModalOpen,
      personId,
    } = this.state;
    let arr = [];
    if (detailType == 'chart') {
      arr.push({ label: `${i18n.exportImage[language]}`, key: '1' });
      //arr.push({ label: '导出PDF', key: '2' });
    } else {
      arr.push({ label: `${i18n.exportTable[language]}`, key: '3' });
    }

    const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;

    return (
      <Drawer
        title={i18n.detailInfo[language]}
        width={1100}
        onClose={this.onClose}
        open={open}
        bodyStyle={{
          paddingBottom: 80,
        }}
        extra={
          <Space>
            {detailType == 'chart' && params && params.fclass == '0' && (
              <Checkbox
                style={{ marginTop: '5px', marginLeft: 100 }}
                checked={showJob}
                onChange={(e) => {
                  this.setState({
                    showJob: e.target.checked,
                  });

                  this.getDeatilDatas(
                    params,
                    detailType,
                    e.target.checked ? '1' : '0',
                  );
                }}
              >
                {i18n.showJob[language]}
              </Checkbox>
            )}
            <Dropdown overlay={menu}>
              <Button type="primary">{i18n.export[language]}</Button>
            </Dropdown>
            <img
              style={{ width: 36, height: 36, cursor: 'pointer' }}
              src="./img/change.png"
              onClick={this.changeDetail}
            />
          </Space>
        }
      >
        {detailType == 'chart' ? (
          <div className="svg-container">
            <Spin
              size="large"
              spinning={spinning}
              tip="正在读取数据...."
              className="loading-center"
            />
            {data.length > 0 && (
              <OrgChartComponent
                setChart={(chart) => (orgChart = chart)}
                setClick={(click) => (addNodeChildFunc = click)}
                onNodeClick={this.onNodeClick}
                onButtonClick={this.onButtonClick}
                data={data}
                buttonContent={this.buttonContentRender}
                nodeWidth={this.nodeWidthRender}
                nodeHeight={this.nodeHeightRender}
                nodeContent={this.nodeContentRender}
              />
            )}
          </div>
        ) : (
          <div style={{ padding: '0 20px' }}>
            <Table
              dataSource={dataSource}
              columns={columns}
              scroll={{ y: 500 }}
              loading={spinning}
              pagination={{
                locale: {
                  // 翻页文本替换
                  items_per_page: '条/页',
                  jump_to: '跳至',
                  page: '页',
                },
                showTotal: (total) =>
                  language == 'cn'
                    ? `共 ${dataSource.length} 条`
                    : `${dataSource.length} ${i18n.table.records[language]} ${i18n.table.total[language]}`,
              }}
            />
          </div>
        )}
        <Modal
          title={`${i18n.postionInfo[language]}-${jobTitle}`}
          open={isModalOpen}
          onCancel={() => this.setState({ isModalOpen: false })}
          footer={[
            <Button
              key="back"
              onClick={() => this.setState({ isModalOpen: false })}
            >
              {i18n.close[language]}
            </Button>,
            <Button
              type="primary"
              onClick={() =>
                window.open(
                  `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${personId}`,
                  '_blank',
                )
              }
            >
              {i18n.employeeInfo[language]}
            </Button>,
          ]}
        >
          <div style={{ whiteSpace: 'pre-line' }}>{jobResponsibility}</div>
        </Modal>
      </Drawer>
    );
  }
}