顺胜组织架构图v2需求开发

src/components/drawer/index.jsx

@@ -38,6 +38,7 @@ export default class DrawerComponents extends React.Component {
       isModalOpen: false,
       jobResponsibility: '',
       personId: '',
+      jobTitle: '',
     };
   }
 
@@ -46,9 +47,9 @@ export default class DrawerComponents extends React.Component {
   // 点击节点
   onNodeClick = (node) => {
     if (node.ftype == '4') {
-      debugger;
       this.setState({
         jobResponsibility: node.jobResponsibility,
+        jobTitle: node.jobTitle,
         isModalOpen: true,
         personId: node.id,
       });
@@ -79,7 +80,7 @@ export default class DrawerComponents extends React.Component {
   //获取数据
   getDeatilDatas(params, type = 'chart', showJob = '1') {
     const { language } = this.props;
-    this.setState({ spinning: true });
+    this.setState({ spinning: true, data: [] });
     d3.json(
       '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
         qs.stringify({ detauleType: type, ...params, showJob }),
@@ -354,7 +355,7 @@ export default class DrawerComponents extends React.Component {
                         : './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: 55%;height:100%">
+                <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
@@ -365,6 +366,7 @@ export default class DrawerComponents extends React.Component {
         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>
@@ -415,6 +417,7 @@ export default class DrawerComponents extends React.Component {
       spinning,
       showJob,
       jobResponsibility,
+      jobTitle,
       isModalOpen,
       personId,
     } = this.state;
@@ -470,8 +473,14 @@ export default class DrawerComponents extends React.Component {
         }
       >
         {detailType == 'chart' ? (
-          data.length > 0 && (
+          <div className="svg-container">
-            <Spin size="large" spinning={spinning}>
+            <Spin
+              size="large"
+              spinning={spinning}
+              tip="正在读取数据...."
+              className="loading-center"
+            />
+            {data.length > 0 && (
               <OrgChartComponent
                 setChart={(chart) => (orgChart = chart)}
                 setClick={(click) => (addNodeChildFunc = click)}
@@ -483,8 +492,8 @@ export default class DrawerComponents extends React.Component {
                 nodeHeight={this.nodeHeightRender}
                 nodeContent={this.nodeContentRender}
               />
-            </Spin>
+            )}
-          )
+          </div>
         ) : (
           <div style={{ padding: '0 20px' }}>
             <Table
@@ -507,7 +516,7 @@ export default class DrawerComponents extends React.Component {
           </div>
         )}
         <Modal
-          title={`${i18n.postionInfo[language]}-`}
+          title={`${i18n.postionInfo[language]}-${jobTitle}`}
           open={isModalOpen}
           onCancel={() => this.setState({ isModalOpen: false })}
           footer={[

src/components/drawer/index.less

@@ -2,3 +2,11 @@
   width: 500px;
   text-align: left;
 }
+
+.loading-center {
+  position: absolute;
+  top: 50vh;
+  left: 50%;
+  margin-left: -8px;
+  margin-top: -8px;
+}

src/pages/user.jsx

@@ -99,7 +99,7 @@ export default function userPage() {
   // 获取数据
   useEffect(() => {
     document.cookie =
-      'ecology_JSessionid=aaaJufMEQ3m8EecoqOd8y; JSESSIONID=aaaJufMEQ3m8EecoqOd8y; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1;';
+      'ecology_JSessionid=aaat6IetRDaXpbGfRHl9y; JSESSIONID=aaat6IetRDaXpbGfRHl9y; Systemlanguid=7; languageidweaver=7; loginidweaver=sysadmin; loginuuids=1;';
     d3.json(
       '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
     ).then((data) => {

src/util/i18n.js

@@ -15,6 +15,7 @@ export const i18n = {
   serveAge: { cn: '司龄', en: 'Serving Age' },
   year: { cn: '年', en: 'Year' },
   postion: { cn: '岗位', en: 'Position' },
+  level: { cn: '职等', en: 'Level' },
   postionInfo: { cn: '岗位职责', en: 'Job Responsibilities' },
   close: { cn: '关闭', en: 'Close' },
   employeeInfo: { cn: '人员详情', en: 'Employee Information' },