org-chart-frant/src/pages/user.jsx

import styles from './index.less';
import React, { useEffect, useState } from 'react';
import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
import { TopBar } from '../components/topBar';
import ToolBar from '../components/toolBar';
import moment from 'moment';
import qs from 'qs';
import { message } from 'antd';
import jsPDF from 'jspdf';
let active = 'top';
export default function userPage() {
  const [data, setData] = useState(null);
  const [topBarSearchRequest, setTpBarSearchRequest] = useState(null);
  const [requestRes, setRequestRes] = useState({
    date: moment(new Date()).format('YYYY-MM-DD'),
    fclass: '0',
    root: '0',
    level: '3',
    fisvitual: '0',
  });
  const [progressTop, setProgressTop] = useState(50);
  let addNodeChildFunc = null;
  let orgChart = null;
  let progressBtnRef = null;

  const [hasRight, setHasRight] = useState('');
  const [disabled, setDisabled] = useState(false);
  // 点击节点
  function onNodeClick(nodeId) {
    // alert('clicked ' + nodeId);
  }

  function 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;
      }

      let idsStr = idsList.join(',');

      let api = '';
      if (topBarSearchRequest) {
        let request = { ...topBarSearchRequest, ids: idsStr };
        api =
          '/api/bs/hrmorganization/orgchart/asyncUserData' +
          qs.stringify(request, { addQueryPrefix: true });
      } else {
        api =
          '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' +
          moment(new Date()).format('YYYY-MM-DD') +
          '&ids=' +
          idsStr;
      }

      fetch(api)
        .then((res) => res.json())
        .then((data) => {
          if (data.data) {
            data.data.forEach((item) => {
              window.chart.addNode(item);
            });
          }
        });
    }
  }

  // 获取部门图片
  function getDepartmentImage() {
    let index = Math.floor(Math.random() * 8) + 1;
    return `./img/department/${index}.png`;
  }

  // 获取部门图片
  function getSubcompanyImage() {
    let index = Math.floor(Math.random() * 3) + 1;
    return `./img/subcompany/${index}.png`;
  }

  // 获取数据
  useEffect(() => {
    document.cookie =
      'ecology_JSessionid=aaabAoBxcpmhQ5GSTpXJy; JSESSIONID=aaabAoBxcpmhQ5GSTpXJy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=137b6014-3b43-44f3-b921-3a7fddbbe91e';
    d3.json(
      // "/user/data"
      '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' +
        moment(new Date()).format('YYYY-MM-DD'),
    ).then((data) => {
      setData(data.data);
      setHasRight(data?.hasRight);
    });
  }, [true]);

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

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

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

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

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

  const 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();
  };

  const 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();
  };

  // tool bar end

  // top bar start

  function 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');
        };
      },
    });
  }

  const handleExport = (type) => {
    if (type == 'png') {
      orgChart && orgChart.exportImg({ full: true });
    } else {
      orgChart && downloadPdf(orgChart);
    }
  };

  const handleSearch = (requestData) => {
    setTpBarSearchRequest(requestData);
    let api =
      '/api/bs/hrmorganization/orgchart/userData' +
      qs.stringify(requestData, { addQueryPrefix: true });
    fetch(api)
      .then((res) => res.json())
      .then((data) => {
        if (data.data) {
          if (!data.data.length) {
            setData([{}]);
            message.warning('暂无数据');
          } else {
            setData(data?.data);
          }
        }
      });
  };

  const handleSynchronous = (requestData) => {
    setDisabled(true);
    let api = '/api/bs/hrmorganization/orgchart/synchronousData';
    fetch(api)
      .then((res) => res.json())
      .then((data) => {
        if (data.code == 200) {
          message.success('同步成功,请重新查询');
        } else {
          message.error('数据同步失败');
        }
        setDisabled(false);
        //this.handleSearch(requestData);
      });
  };

  useEffect(() => {
    if (active == 'left') {
      orgChart &&
        orgChart
          .setCentered(orgChart.getChartState().root.id)
          .layout('left')
          .render();
    } else {
      orgChart &&
        orgChart
          .setCentered(orgChart.getChartState().root.id)
          .layout('top')
          .render();
    }
  }, [data]);
  // top bar end

  const nodeContentRender = (d, i, arr, state) => {
    // 集团地址
    let companyUrl =
      '/spa/organization/static/index.html#/main/organization/group';
    // 分部地址
    let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`;
    // 部门地址
    let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`;
    // 岗位地址
    let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`;
    // 人员地址
    let userUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fleader}`;
    // 岗位人员地址
    let postUserUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fobjid}`;
    //集团通讯录
    let addressBookGroupUrl = `/spa/organization/static/index.html#/main/organization/resource/?virtualtype=0`;
    // 分部通讯录
    let addressBookUrl = `/spa/organization/static/index.html#/main/organization/resource/?companyId=${d.data.fobjid}`;
    // 部门通讯录
    let addressBookDepartmentUrl = `/spa/organization/static/index.html#/main/organization/resource/?departmentId=${d.data.fobjid}`;
    // 岗位通讯录
    let addressBookPostUrl = `/spa/organization/static/index.html#/main/organization/resource/?jobTitle=${d.data.fobjid}`;

    if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) {
      return `<div>
          <div style="position: relative;">
            <img src="./img/user-card/card-label-start.png" />
            <span style="display: inline-block;
              position: absolute;
              left: 5px;
              top: -8px;
              background: #F7F9FD;
              z-index: 100;
              padding: 0px 10px;
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #000000;
            " onclick="if(${d.data.fisvitual}==1) return;window.open('${
        d.data.ftype == 0
          ? companyUrl
          : d.data.ftype == 1
          ? subcompanyUrl
          : d.data.ftype == 2
          ? departmentUrl
          : ''
      }', '_blank')">${d.data.fname}</span>
            <span style="margin-left: 70px;">
              <img src="./img/user-card/line1.png" />
              <img src="./img/user-card/line2.png" />
            </span>
            <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 src='./img/user-card/user-card.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.png' style='position:absolute;width:90px;height:90px;left:11px'/>
            <img src="${
              d.data.fleaderimg
                ? d.data.fleaderimg
                : d.data.ftype == 0 || d.data.ftype == 1
                ? './img/company.png'
                : './img/default_avator.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 onclick="if(${d.data.fisvitual}==1) return;${
        d.data.fleadername ? `window.open('${userUrl}', '_blank')` : ''
      }">
                <div style="
                  font-size: 13px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  font-weight: bold;
                  color: #333333;
                  margin-bottom: 9px;"
                >${d.data.fleadername}</div>
                <div style="
                  font-size: 13px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  margin-bottom: 19px;
                  white-space:nowrap;
                  overflow:hidden;
                  text-overflow:ellipsis;"
                title="${d.data.fname}${
        d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
      }">${d.data.fname}${
        d.data.fleaderjob ? `/${d.data.fleaderjob}` : ''
      }</div>
      </div>
                <div style="display: ${
                  d.data.fisvitual == 0 ? 'flex' : 'none'
                };" >
                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${
                    d.data.fplan
                  }</div>
                  <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;" onclick="if(${
                    d.data.fisvitual
                  }==1) return;event.stopPropagation();window.open('${
        d.data.ftype == 0
          ? addressBookGroupUrl
          : d.data.ftype == 1
          ? addressBookUrl
          : d.data.ftype == 2
          ? addressBookDepartmentUrl
          : ''
      }', '_blank')">在岗: ${d.data.fonjob}</div>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    } else if (d.data.ftype == 3) {
      return `<div>
          <div style="position: relative;">
            <img src="./img/user-card/card-label-start.png" />
            <span style="display: inline-block;
              position: absolute;
              left: 5px;
              top: -8px;
              background: #F7F9FD;
              z-index: 100;
              padding: 0px 10px;
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #000000;
            " onclick="if(${
              d.data.fisvitual
            }==1) return;window.open('${jobtitleUrl}', '_blank')">${
        d.data.fname
      }</span>
            <span style="margin-left: 70px;">
              <img src="./img/user-card/line1.png" />
              <img src="./img/user-card/line2.png" />
            </span>
            <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 40px;">
              <div style='position:absolute;z-index:-1;top:16px'>
                <img src='./img/user-card/user-card.png'>
              </div>
              <img src="./img/user-card/jobicon.png" style="margin-left: 20px; vertical-align: top;"/>
              <div style="display: inline-block; margin-left: 15px;">
                <div style="
                font-size: 13px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #333333;
                margin-bottom: 23px;
                " onclick="if(${
                  d.data.fisvitual
                }==1) return;window.open('${jobtitleUrl}', '_blank')">${
        d.data.fname
      }</div>
                <div style="
                font-size: 13px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                display: ${d.data.fisvitual == 0 ? 'flex' : 'none'};
                ">
                  <span>编制：${d.data.fplan}</span>
                  <span style="margin-left: 10px;" onclick="if(${
                    d.data.fisvitual
                  }==1) return;window.open('${addressBookPostUrl}', '_blank')">在岗：${
        d.data.fonjob
      }</span>
                </div>
              </div>
            </div>
          </div>
        </div>`;
    } else if (d.data.ftype == 4) {
      return `<div>
          <div style="position: relative;" >
            <img src="./img/user-card/card-label-start.png" />
            <span >
              <img src="./img/user-card/line1.png" />
              <img src="./img/user-card/line2.png" />
            </span>
            <div style="height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;">
              <div style='position:absolute;z-index:-1;top:16px'>
                <img src='./img/user-card/user-card.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.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;z-index:999"/>
              </div>

              <div style="display: inline-block; margin-left: 6px;width: 55%;height:100%"  onclick="if(${
                d.data.fisvitual
              }==1) return;window.open('${postUserUrl}', '_blank')">
                <div style='display:flex;align-items:center;margin-bottom:19px;margin-top:15px'>
                  <div style="
                  font-size: 13px;
                  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                  color: #333333;"
                 >${d.data.fname}</div>
                  <div style="
                    font-size: 13px;
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #999;
                    white-space:nowrap;
                    overflow:hidden;
                    flex:1;
                    font-size:12px;
                    transform:scale(0.8);
                    margin-left:-5px;
                    text-overflow:ellipsis;"
                  title="${
                    d.data.fleaderst
                      ? d.data.fleaderlv
                        ? `(${d.data.fleaderst}/`
                        : `(${d.data.fleaderst})`
                      : ''
                  }${d.data.fleaderlv ? `${d.data.fleaderlv})` : ''}">${
        d.data.fleaderst
          ? d.data.fleaderlv
            ? `(${d.data.fleaderst}/`
            : `(${d.data.fleaderst})`
          : ''
      }${d.data.fleaderlv ? `${d.data.fleaderlv})` : ''}</div>
                  </div>
                <div style="
                  font-size: 13px;
                  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                ">${d.data.department ? d.data.department + ' / ' : ''}${
        d.data.fleaderjob
      }</div>
              </div>
            </div>
          </div>
        </div>`;
    }
  };

  if (hasRight === false) {
    return (
      <div style={{ width: '100%', top: '40%', position: 'absolute' }}>
        <img
          style={{ display: 'block', margin: '0 auto' }}
          src="./img/permission.png"
        />
        <p style={{ textAlign: 'center' }}>对不起，您暂时没有权限!</p>
      </div>
    );
  }

  return (
    hasRight && (
      <div className={styles.contentWrapper}>
        <TopBar
          onExport={(type) => {
            handleExport(type);
          }}
          onSearch={(requestData) => {
            setRequestRes(requestData);
            handleSearch(requestData);
          }}
          onSynchronous={(requestData) => {
            handleSynchronous(requestData);
          }}
          disabled={disabled}
          type="user"
          url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
        />
        <ToolBar
          onTopLayoutClick={handleTopLayoutClick}
          onLeftLayoutClick={handleLeftLayoutClick}
          onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
          onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
        />
        <OrgChartComponent
          setChart={(chart) => (orgChart = chart)}
          setClick={(click) => (addNodeChildFunc = click)}
          onNodeClick={onNodeClick}
          onButtonClick={onButtonClick}
          data={data}
          buttonContent={buttonContentRender}
          nodeWidth={nodeWidthRender}
          nodeHeight={nodeHeightRender}
          nodeContent={nodeContentRender}
          requestRes={requestRes}
        />
      </div>
    )
  );
}