增加权限

src/pages/company.jsx

@@ -1,131 +1,141 @@
 import styles from './index.less';
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
-import {OrgChartComponent} from '@/components/orgChart'
+import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
 import { TopBar } from '../components/topBar';
 import ToolBar from '../components/toolBar';
-import jsPDF from 'jspdf'
+import jsPDF from 'jspdf';
 import moment from 'moment';
 import qs from 'qs';
-
+import { message } from 'antd';
 
 export default function companyPage() {
-    const [data, setData] = useState(null);
+  const [data, setData] = useState(null);
-    const [sliderProgress, setSliderProgress] = useState(50);
+  const [sliderProgress, setSliderProgress] = useState(50);
-    let addNodeChildFunc = null;
+  let addNodeChildFunc = null;
-    let orgChart = null;
+  let orgChart = null;
 
-    let topBarSearchRequest = null;
+  let topBarSearchRequest = null;
-  
+  const [hasRight, setHasRight] = useState('');
-    // 点击节点
-    function onNodeClick(nodeId) {
-      // alert('clicked ' + nodeId);
-    }
 
+  // 点击节点
+  function onNodeClick(nodeId) {
+    // alert('clicked ' + nodeId);
+  }
 
-    // 扩展按钮点击
+  // 扩展按钮点击
-    function onButtonClick(event, d) {
+  function onButtonClick(event, d) {
-      if(d.children) {
+    if (d.children) {
-        let idsList = []
+      let idsList = [];
-        d.children.forEach(item => {
+      d.children.forEach((item) => {
-          if(item.data.hasChildren && !item._children) {
+        if (item.data.hasChildren && !item._children) {
-            idsList.push(item.data.id);
+          idsList.push(item.data.id);
-          }
-        })
-
-        if(idsList.length == 0) {
-          return
         }
-
-        let idsStr = idsList.join(",")
-
-        console.log("idsStr", idsStr);
-        
-        let api = "";
-        if(topBarSearchRequest) {
-          let request = {...topBarSearchRequest, ids: idsStr}
-          api = "/api/bs/hrmorganization/orgchart/asyncCompanyData" + qs.stringify(request, {addQueryPrefix: true})
-        } else {
-          api = "/api/bs/hrmorganization/orgchart/asyncCompanyData?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(() => {
-      d3.json(
-        // "/company/data"
-        "/api/bs/hrmorganization/orgchart/companyData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD")
-      ).then(data => {
-        setData(data.data);
       });
-    }, [true]);
 
-    // ButtonContent渲染
+      if (idsList.length == 0) {
-    const buttonContentRender = ({ node, state }) => {
+        return;
-      if(node.children) {
+      }
-        return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div>  </div>`;
+
+      let idsStr = idsList.join(',');
+
+      console.log('idsStr', idsStr);
+
+      let api = '';
+      if (topBarSearchRequest) {
+        let request = { ...topBarSearchRequest, ids: idsStr };
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
+          qs.stringify(request, { addQueryPrefix: true });
       } else {
-        return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div>  </div>`
+        api =
+          '/api/bs/hrmorganization/orgchart/asyncCompanyData?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);
+            });
+          }
+        });
     }
+  }
 
-    // 节点宽度渲染
+  // 获取部门图片
-    const nodeWidthRender = d => 
+  function getDepartmentImage() {
-    {
+    let index = Math.floor(Math.random() * 8) + 1;
-      if(d.data.ftype == 0) {
+    return `./img/department/${index}.png`;
-        return 220;
+  }
-      } else if(d.data.ftype == 1) {
+
-        return 160;
+  // 获取部门图片
-      } else if(d.data.ftype == 2) {
+  function getSubcompanyImage() {
-        return 144;
+    let index = Math.floor(Math.random() * 3) + 1;
-      }
+    return `./img/subcompany/${index}.png`;
-      return 200;
+  }
+
+  // 获取数据
+  useEffect(() => {
+    d3.json(
+      // "/company/data"
+      '/api/bs/hrmorganization/orgchart/companyData?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 }) => {
+    if (node.children) {
+      return `<div style="border-radius:3px;padding:3px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:0px;line-height:1.2;height:11px;font-size:25px; color: #fff;">ˆ</div>  </div>`;
+    } else {
+      return `<div style="border-radius:3px;padding:1px;font-size:10px;margin:auto auto;background-color:#66BAF5"> <div style="margin-top:-22px;margin-bottom: 3px;font-size:25px; color: #fff;">ˬ</div>  </div>`;
     }
+  };
 
-    const nodeHeightRender = d => {
+  // 节点宽度渲染
-      if(d.data.ftype == 0) {
+  const nodeWidthRender = (d) => {
-        return 100;
+    if (d.data.ftype == 0) {
-      } else if(d.data.ftype == 1) {
+      return 220;
-        return 160;
+    } else if (d.data.ftype == 1) {
-      }else if(d.data.ftype == 2) {
+      return 160;
-        return 56;
+    } else if (d.data.ftype == 2) {
-      }
+      return 144;
-      return 120;
     }
+    return 200;
+  };
 
+  const nodeHeightRender = (d) => {
+    if (d.data.ftype == 0) {
+      return 100;
+    } else if (d.data.ftype == 1) {
+      return 160;
+    } else if (d.data.ftype == 2) {
+      return 56;
+    }
+    return 120;
+  };
 
+  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/';
+    // 部门地址
+    let departmentUrl =
+      '/spa/organization/static/index.html#/main/organization/departmentExtend/';
 
-    const nodeContentRender = (d, i, arr, state) => {
+    if (d.data.ftype == 0) {
-      // 集团地址
+      return `<div onclick="window.open('${companyUrl}', '_blank')">
-      let companyUrl = "/spa/organization/static/index.html#/main/organization/group"
-      // 分部地址
-      let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/"
-      // 部门地址
-      let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/"
-
-      if(d.data.ftype == 0) {
-        return `<div onclick="window.open('${companyUrl}', '_blank')">
           <div style="display: inline-block; vertical-align: top;">
             <img src="./img/company.png" />
           </div>
@@ -148,9 +158,11 @@ export default function companyPage() {
                 margin-top: 10px;
             ">COMPANY_GROUP</div>
           </div>
-        </div>`
+        </div>`;
-      } else if(d.data.ftype == 1) {
+    } else if (d.data.ftype == 1) {
-        return `<div onclick="window.open('${subcompanyUrl + d.data.fnumber}', '_blank')">
+      return `<div onclick="window.open('${
+        subcompanyUrl + d.data.fnumber
+      }', '_blank')">
           <div style="width: 85px; height: 85px; border: 1px solid #66BAF5; border-radius: 50%;text-align: center; line-height: 85px; margin: 0 auto;">
             <img src="${getSubcompanyImage()}" />
           </div>
@@ -164,10 +176,12 @@ export default function companyPage() {
           ">
             ${d.data.fname}
           </div>
-        </div>`
+        </div>`;
-      } else if(d.data.ftype == 2) {
+    } else if (d.data.ftype == 2) {
-        return `
+      return `
-        <div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${departmentUrl + d.data.fnumber}')">
+        <div style="width: 100%; height: 100%; background: url('./img/company_job_label.png');background-size: 100% 100%;" onclick="window.open('${
+          departmentUrl + d.data.fnumber
+        }')">
           <div style="padding-left: 8px; padding-top: 23px;">
             <img src="${getDepartmentImage()}"/>
             <span style="
@@ -179,121 +193,141 @@ export default function companyPage() {
             ">${d.data.fname}</span>
           </div>
         </div>
-        `
+        `;
+    }
+    return `<div>${d.data.fname}</div>`;
+  };
+
+  // tool bar start
+  const handleTopLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('top').render();
+  };
+
+  const handleLeftLayoutClick = (progressBtn) => {
+    progressBtn.current.style.top = 50 + 'px';
+    orgChart && orgChart.layout('left').render();
+  };
+
+  const handleZoomIn = (progressBtn) => {
+    if (progressBtn) {
+      let top = parseInt(progressBtn.current.style.top) - 10;
+      if (top <= 0) {
+        top = 30;
       }
-      return `<div>${d.data.fname}</div>`
+      progressBtn.current.style.top = top + 'px';
     }
+    orgChart && orgChart.zoomIn();
+  };
 
-
+  const handleZoomOut = (progressBtn) => {
-    // tool bar start
+    if (progressBtn) {
-    const handleTopLayoutClick = (progressBtn) => {
+      let top = parseInt(progressBtn.current.style.top) + 10;
-      progressBtn.current.style.top= 50 + "px";
+      if (top >= 100) {
-      orgChart && orgChart.layout('top').render();
+        top = 70;
-    }
-
-    const handleLeftLayoutClick = (progressBtn) => {
-      progressBtn.current.style.top= 50 + "px";
-      orgChart && orgChart.layout('left').render();
-    }
-
-    const handleZoomIn = (progressBtn) => {
-      if(progressBtn) {
-        let top = (parseInt(progressBtn.current.style.top) - 10)
-        if(top <= 0) {
-          top = 30;
-        }
-        progressBtn.current.style.top = top + "px";
       }
-      orgChart && orgChart.zoomIn();
+      progressBtn.current.style.top = top + 'px';
     }
 
-    const handleZoomOut = (progressBtn) => {
+    orgChart && orgChart.zoomOut();
-      if(progressBtn) {
+  };
-        let top = (parseInt(progressBtn.current.style.top) + 10)
+
-        if(top >= 100) {
+  const handleZoomBehavior = (value) => {
-          top = 70;
+    orgChart && orgChart.zoomBehavior(value - 50);
-        }
+  };
-        progressBtn.current.style.top = top + "px";
+
-      }
+  // tool bar end
-      
+
-      orgChart && orgChart.zoomOut();
+  // top bar start
+
+  function downloadPdf(chart) {
+    chart.exportImg({
+      save: false,
+      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 handleZoomBehavior = (value) => {
+  const handleSearch = (requestData) => {
-      orgChart && orgChart.zoomBehavior(value - 50);
+    topBarSearchRequest = requestData;
-    }
+    let api =
-
+      '/api/bs/hrmorganization/orgchart/companyData' +
-    // tool bar end
+      qs.stringify(requestData, { addQueryPrefix: true });
-
+    fetch(api)
-    // top bar start
+      .then((res) => res.json())
-
+      .then((data) => {
-    function downloadPdf(chart) {
-      chart.exportImg({
-        save: false,
-        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) => {
-      topBarSearchRequest = requestData
-      let api = "/api/bs/hrmorganization/orgchart/companyData" + qs.stringify(requestData, {addQueryPrefix: true})
-      fetch(api).then(res => res.json()).then(data => {
         setData(data.data);
-      })
+      });
-    }
+  };
-
-    // top bar end
-
 
+  // top bar end
+  if (hasRight === false) {
+    //return message.error("对不起，您暂时没有权限", 2);
     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 
+        <TopBar
-          onExport={(type) => {handleExport(type)}}
+          onExport={(type) => {
-          onSearch={(requestData) => {handleSearch(requestData)}}
+            handleExport(type);
+          }}
+          onSearch={(requestData) => {
+            handleSearch(requestData);
+          }}
           url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
         />
-        <ToolBar 
+        <ToolBar
           onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
-          onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)}
+          onLeftLayoutClick={(progressBtn) =>
+            handleLeftLayoutClick(progressBtn)
+          }
           onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
           onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
           onZoomBehavior={(value) => handleZoomBehavior(value)}
         />
         <OrgChartComponent
-          setChart={(chart) => orgChart = chart}
+          setChart={(chart) => (orgChart = chart)}
-          setClick={click => (addNodeChildFunc = click)}
+          setClick={(click) => (addNodeChildFunc = click)}
           onNodeClick={onNodeClick}
           data={data}
-          buttonContent={
+          buttonContent={buttonContentRender}
-            buttonContentRender
-          }
           nodeWidth={nodeWidthRender}
           nodeHeight={nodeHeightRender}
           nodeContent={nodeContentRender}
         />
       </div>
-    );
+    )
+  );
 }

src/pages/user.jsx

@@ -15,6 +15,7 @@ export default function userPage() {
   let orgChart = null;
   let progressBtnRef = null;
   let topBarSearchRequest = null;
+  const [hasRight, setHasRight] = useState('');
 
   // 点击节点
   function onNodeClick(nodeId) {
@@ -84,6 +85,7 @@ export default function userPage() {
         moment(new Date()).format('YYYY-MM-DD'),
     ).then((data) => {
       setData(data.data);
+      setHasRight(data.hasRight);
     });
   }, [true]);
 
@@ -377,34 +379,50 @@ export default function userPage() {
     }
   };
 
+  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 (
-    <div className={styles.contentWrapper}>
+    hasRight && (
-      <TopBar
+      <div className={styles.contentWrapper}>
-        onExport={(type) => {
+        <TopBar
-          handleExport(type);
+          onExport={(type) => {
-        }}
+            handleExport(type);
-        onSearch={(requestData) => {
+          }}
-          handleSearch(requestData);
+          onSearch={(requestData) => {
-        }}
+            handleSearch(requestData);
-        url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
+          }}
-      />
+          url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
-      <ToolBar
+        />
-        onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
+        <ToolBar
-        onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)}
+          onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
-        onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
+          onLeftLayoutClick={(progressBtn) =>
-        onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
+            handleLeftLayoutClick(progressBtn)
-      />
+          }
-      <OrgChartComponent
+          onZoomOut={(progressBtn) => handleZoomOut(progressBtn)}
-        setChart={(chart) => (orgChart = chart)}
+          onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
-        setClick={(click) => (addNodeChildFunc = click)}
+        />
-        onNodeClick={onNodeClick}
+        <OrgChartComponent
-        onButtonClick={onButtonClick}
+          setChart={(chart) => (orgChart = chart)}
-        data={data}
+          setClick={(click) => (addNodeChildFunc = click)}
-        buttonContent={buttonContentRender}
+          onNodeClick={onNodeClick}
-        nodeWidth={nodeWidthRender}
+          onButtonClick={onButtonClick}
-        nodeHeight={nodeHeightRender}
+          data={data}
-        nodeContent={nodeContentRender}
+          buttonContent={buttonContentRender}
-      />
+          nodeWidth={nodeWidthRender}
-    </div>
+          nodeHeight={nodeHeightRender}
+          nodeContent={nodeContentRender}
+        />
+      </div>
+    )
   );
 }