京福项目组织架构图需求

1.人员按照上下级展示，并控制人员默认平铺。 2.人员数量根据自定义字段过滤机器人类型。 3.部门自定义表部门说明书关联关系，支持点击部门跳转部门说明书页面，人员卡片样式调整。 4.一级分部文字支持换行显示
京福项目组织架构图开发
2 changed files with 48 additions and 35 deletions
--- a/src/components/drawer/index.jsx
+++ b/src/components/drawer/index.jsx
@ -20,6 +20,7 @@ import './index.less';
 let addNodeChildFunc = null;
 let orgChart = null;
 let active = 'top';
+let compact = 0;
 export default class DrawerComponents extends React.Component {
  constructor(props) {
    super(props);
@ -31,7 +32,7 @@ export default class DrawerComponents extends React.Component {
      dataSource: [],
      columns: [],
      spinning: true,
-      showJob: true,
+      showJob: false,
    };
  }

@ -39,6 +40,15 @@ export default class DrawerComponents extends React.Component {

  // 点击节点
  onNodeClick(node) {}
+  // onNodeClick = (node) => {
+  //   if (node.ftype == '2' || node.ftype == '4') {
+  //       orgChart &&
+  //       orgChart
+  //         .compact(false)
+  //         .render()
+  //         .fit();
+  //   }
+  // };

  onButtonClick(event, d) {
    if (d.children) {
@ -51,6 +61,9 @@ export default class DrawerComponents extends React.Component {
      if (idsList.length == 0) {
        return;
      }
+      orgChart && orgChart.compact(false).render().fit();
+    } else {
+      orgChart && orgChart.compact(false).render().fit();
    }
  }

@ -239,7 +252,11 @@ export default class DrawerComponents extends React.Component {
                        <img src="./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;">
+                        <div class="dept-box" onclick="if(${
+                          d.data.smsFj
+                        } == 0) return alert('该部门未维护部门说明书') ;window.open('/spa/document/index2file.jsp?imagefileId='+${
+        d.data.smsFj
+      })"  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;">
@ -284,13 +301,20 @@ export default class DrawerComponents extends React.Component {
                    }" 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: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;display: flex;height: 25px;line-height: 25px;">
+                   <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;height: 25px;line-height: 25px;">
+                         <div onclick="if(${
+                           d.data.jobFj
+                         } == 0) return alert('该岗位未维护岗位说明书') ;window.open('/spa/document/index2file.jsp?id='+${
+        d.data.jobFj
+      })" >岗位: ${d.data.jobTitle}</div>
                        <span>司龄: ${d.data.companyWorkYear} 年</span>
+                         <div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:15px'>
+                        <div onclick="window.open('/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/'+${
+                          d.data.id
+                        })" style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
+        d.data.fname
+      }</div>
+                    </div>
                    </div>
                </div>
                </div>
@ -299,19 +323,19 @@ export default class DrawerComponents extends React.Component {
  };

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

  onClose = () => {
-    this.setState({ open: false, detailType: 'chart', showJob: true });
+    this.setState({ open: false, detailType: 'chart', showJob: false });
  };

  changeDetail = () => {
    const { detailType, params } = this.state;
    let type = detailType == 'chart' ? 'table' : 'chart';
-    const showJob = this.state.showJob ? '1' : '0';
+    const showJob = '0';
    this.setState({
      detailType: type,
    });
@ -350,25 +374,6 @@ export default class DrawerComponents extends React.Component {
        }}
        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',
-                  );
-                }}
-              >
-                是否显示岗位
-              </Checkbox>
-            )}
            <Dropdown overlay={menu}>
              <Button type="primary">导出</Button>
            </Dropdown>
--- a/src/pages/company.jsx
+++ b/src/pages/company.jsx
@ -175,7 +175,7 @@ export default function companyPage() {
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
            <div title=${
              d.data.fname
-            } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
+            } style="width: 110px;margin: 0 auto;overflow: hidden;text-overflow: ellipsis;-o-text-overflow:ellipsis;
            line-height: 18px;word-break: break-all;">${d.data.fname}</div>
            <div style="display: ${statisticsStyle}">
                <span style="color:red">${d.data.staffNum}</span> /
@ -418,6 +418,14 @@ export default function companyPage() {
          .setCentered(orgChart.getChartState().root?.id)
          .layout('top')
          .render();
+
+      window.setTimeout(() => {
+        orgChart &&
+          orgChart
+            .compact(!!(compact++ % 2))
+            .render()
+            .fit();
+      }, 500);
    }
  }, [data]);