Merge pull request 'feature/cl' (#14) from feature/cl into master

Reviewed-on: http://221.226.25.34:3000/liang.cheng/org-chart-frant/pulls/14
2024-06-21 17:04:49 +08:00 · 2024-06-21 17:04:49 +08:00 · 0513ad1345
parent f825a33bb8 d2e0da7297
commit 0513ad1345
4 changed files with 211 additions and 61 deletions
--- a/src/components/drawer/index.jsx
+++ b/src/components/drawer/index.jsx
@ -8,6 +8,8 @@ import {
  Table,
  Spin,
  Checkbox,
+  Row,
+  Col,
 } from 'antd';
 import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
@ -33,6 +35,9 @@ export default class DrawerComponents extends React.Component {
      columns: [],
      spinning: true,
      showJob: false,
+      defaultTypeValue: ['isBelongTo'],
+      defaultStatusValue: [0, 1, 2, 3],
+      disabled: false,
    };
  }

@ -257,7 +262,7 @@ export default class DrawerComponents extends React.Component {
                        <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;">
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
                          ${getLabel(547190, labelData)}:${d.data.fleader}
                        </div>
                        <div style="display:flex" >
@ -304,17 +309,19 @@ 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;width: 55%;height:100%">
                    <div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:2px'>
-                        <div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
-                          d.data.fname
-                        }</div>
+                        <div style="font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
+                        ${d.data.fname}
+                        <span style='color: red;'>(${d.data.accountType})</span>
+                        </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;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
                        <span>${getLabel(547324, labelData)}: ${
        d.data.companyWorkYear
      } ${getLabel(547526, labelData)}</span>
                    </div>
+
                </div>
                </div>
             </div>`;
@ -322,22 +329,76 @@ export default class DrawerComponents extends React.Component {
  };

  showDrawer = (params) => {
+    const { defaultStatusValue, defaultTypeValue } = this.state;
+    params = {
+      ...params,
+      typeValue: defaultTypeValue.join(','),
+      statusValue: defaultStatusValue.join(','),
+    };
    this.getDeatilDatas(params, 'chart', '0');
    this.setState({ open: true, params: params });
  };

  onClose = () => {
-    this.setState({ open: false, detailType: 'chart', showJob: false });
+    this.setState({
+      open: false,
+      detailType: 'chart',
+      showJob: false,
+      defaultStatusValue: [0, 1, 2, 3],
+      defaultTypeValue: ['isBelongTo'],
+      disabled: false,
+    });
  };

  changeDetail = () => {
-    const { detailType, params } = this.state;
+    const { detailType, params, defaultTypeValue, defaultStatusValue } =
+      this.state;
+    const newParam = {
+      ...params,
+      typeValue: defaultTypeValue.join(','),
+      statusValue: defaultStatusValue.join(','),
+    };
    let type = detailType == 'chart' ? 'table' : 'chart';
    const showJob = this.state.showJob ? '1' : '0';
    this.setState({
      detailType: type,
    });
-    this.getDeatilDatas(params, type, showJob);
+    this.getDeatilDatas(newParam, type, showJob);
+  };
+
+  onStatusChange = (checkedValues) => {
+    if (checkedValues.length === 0) {
+      return message.error(`${getLabel(547728, labelData)}`, 2);
+    }
+    this.setState({
+      defaultStatusValue: checkedValues,
+    });
+    const { defaultTypeValue, params, detailType } = this.state;
+    const showJob = this.state.showJob ? '1' : '0';
+    const nParam = {
+      ...params,
+      statusValue: checkedValues.join(','),
+      typeValue: defaultTypeValue.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, showJob);
+  };
+
+  onTypeChange = (checkedValues) => {
+    if (this.state.showJob) {
+      return message.error(`${getLabel(547729, labelData)}`, 2);
+    }
+    this.setState({
+      defaultTypeValue: checkedValues,
+      disabled: checkedValues.includes('isManager') ? true : false,
+    });
+    const { defaultStatusValue, params, detailType } = this.state;
+    const showJob = this.state.showJob ? '1' : '0';
+    const nParam = {
+      ...params,
+      statusValue: defaultStatusValue.join(','),
+      typeValue: checkedValues.join(','),
+    };
+    this.getDeatilDatas(nParam, detailType, showJob);
  };

  render() {
@ -350,16 +411,35 @@ export default class DrawerComponents extends React.Component {
      columns,
      spinning,
      showJob,
+      defaultStatusValue,
+      defaultTypeValue,
+      disabled,
    } = this.state;
    let arr = [];

    const { labelData } = this.props;

+    const optionsType = [
+      { label: `${getLabel(547715, labelData)}`, value: 'isManager' },
+      { label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' },
+    ];
+
+    const optionsStatus = [
+      { label: `${getLabel(547718, labelData)}`, value: 0 },
+      { label: `${getLabel(547719, labelData)}`, value: 1 },
+      { label: `${getLabel(547720, labelData)}`, value: 2 },
+      { label: `${getLabel(547721, labelData)}`, value: 3 },
+      { label: `${getLabel(547722, labelData)}`, value: 4 },
+      { label: `${getLabel(547723, labelData)}`, value: 5 },
+      { label: `${getLabel(547724, labelData)}`, value: 6 },
+      { label: `${getLabel(547725, labelData)}`, value: 7 },
+    ];
+
    if (detailType == 'chart') {
      arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
      //arr.push({ label: '导出PDF', key: '2' });
    } else {
-      arr.push({ label: '导出表格', key: '3' });
+      arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
    }

    const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
@ -367,7 +447,7 @@ export default class DrawerComponents extends React.Component {
    return (
      <Drawer
        title={getLabel(547321, labelData)}
-        width={1100}
+        width={1200}
        onClose={this.onClose}
        open={open}
        bodyStyle={{
@ -379,13 +459,18 @@ export default class DrawerComponents extends React.Component {
              <Checkbox
                style={{ marginTop: '5px', marginLeft: 100 }}
                checked={showJob}
+                disabled={disabled}
                onChange={(e) => {
                  this.setState({
                    showJob: e.target.checked,
                  });
-
+                  const newParam = {
+                    ...params,
+                    statusValue: defaultStatusValue.join(','),
+                    typeValue: defaultTypeValue.join(','),
+                  };
                  this.getDeatilDatas(
-                    params,
+                    newParam,
                    detailType,
                    e.target.checked ? '1' : '0',
                  );
@ -403,45 +488,68 @@ export default class DrawerComponents extends React.Component {
          </Space>
        }
      >
-        {detailType == 'chart' ? (
-          <div className="svg-container">
-            <Spin
-              size="large"
-              spinning={spinning}
-              tip={getLabel(547320, labelData)}
-              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}
+        <>
+          {detailType == 'chart' && (
+            <Row style={{ margin: '20px 20px 0px 20px' }}>
+              <Col span={2}>{getLabel(547714, labelData)}：</Col>
+              <Col span={22}>
+                <Checkbox.Group
+                  options={optionsType}
+                  value={defaultTypeValue}
+                  onChange={this.onTypeChange}
+                />
+              </Col>
+            </Row>
+          )}
+          <Row style={{ margin: '10px 20px 10px 20px' }}>
+            <Col span={2}>{getLabel(547717, labelData)}：</Col>
+            <Col span={22}>
+              <Checkbox.Group
+                options={optionsStatus}
+                value={defaultStatusValue}
+                onChange={this.onStatusChange}
              />
-            )}
-          </div>
-        ) : (
-          <div style={{ padding: '0 20px' }}>
-            <Table
-              dataSource={dataSource}
-              columns={columns}
-              scroll={{ y: 600 }}
-              loading={spinning}
-              pagination={{
-                showSizeChanger: false,
-                showTotal: (total) =>
-                  `${getLabel(547523, labelData)} ${
-                    dataSource.length
-                  } ${getLabel(547524, labelData)}`,
-              }}
-            />
-          </div>
-        )}
+            </Col>
+          </Row>
+          {detailType == 'chart' ? (
+            <div className="svg-container">
+              <Spin
+                size="large"
+                spinning={spinning}
+                tip={getLabel(547320, labelData)}
+                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}
+                loading={spinning}
+                pagination={{
+                  showSizeChanger: false,
+                  showTotal: (total) =>
+                    `${getLabel(547523, labelData)} ${
+                      dataSource.length
+                    } ${getLabel(547524, labelData)}`,
+                }}
+              />
+            </div>
+          )}
+        </>
      </Drawer>
    );
  }
--- a/src/pages/company.jsx
+++ b/src/pages/company.jsx
@ -164,8 +164,8 @@ export default function companyPage() {
    let fclass = topbar.state.requestData.fclass;
    let statisticsStyle = fclass == 0 ? 'block' : 'none';
    if (d.data.ftype == 0) {
-      return `<div>
-          <div style="display: inline-block; text-align: center; margin-left: 5px;">
+      return `<div style="text-align: center;">
+          <div style="display: inline-block;  margin-left: 5px;">
            <div style="
              font-size: 24px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@ -185,10 +185,11 @@ export default function companyPage() {
          </div>
          <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
            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;
-            line-height: 18px;word-break: break-all;">${d.data.fname}</div>
+             <div class="tooltip">
+                <div class="tooltitle"> ${d.data.fname} </div>
+                <div class="tooltiptext">${d.data.fname}</div>
+            </div>
+
            <div style="display: ${statisticsStyle}">
                <span style="color:red">${d.data.staffNum}</span> /
                <span style="color:green">${d.data.onJobNum}</span>
@ -206,8 +207,11 @@ export default function companyPage() {
          </div>
          <div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;"> 
-            <div style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
-            line-height: 18px;word-break: break-all;">${d.data.fname}</div>
+            <div class="tooltip">
+                <div class="tooltitle"> ${d.data.fname} </div>
+                <div class="tooltiptext">${d.data.fname}</div>
+            </div>
+            
            <div style="display: ${statisticsStyle}">
              <span style="color:red">${d.data.staffNum}</span> /
              <span style="color:green">${d.data.onJobNum}</span>
--- a/src/pages/index.less
+++ b/src/pages/index.less
@ -114,6 +114,44 @@
 }

 .ant-drawer-body {
-  padding: 0px;
+  padding: 0;
  overflow: hidden;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  width: 110px;
+  margin: 0 auto;
+  line-height: 18px;
+  word-break: break-all;
+}
+
+.tooltip .tooltitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 144px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 39%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
--- a/src/pages/user.jsx
+++ b/src/pages/user.jsx
@ -99,7 +99,7 @@ export default function userPage() {
  // 获取数据
  useEffect(() => {
    document.cookie =
-      'ecology_JSessionid=aaaZqe3BtezwSd-qOVlaz; JSESSIONID=aaaZqe3BtezwSd-qOVlaz; Systemlanguid=8; languageidweaver=8; loginidweaver=sysadmin; loginuuids=1; __randcode__=b79816fa-7088-4433-a17f-162b62453f2f';
+      'ecology_JSessionid=aaaIt6Y2NuzAQ98Ci0Jaz; Systemlanguid=7; JSESSIONID=aaaIt6Y2NuzAQ98Ci0Jaz; loginidweaver=sysadmin; loginuuids=1; languageidweaver=8; __randcode__=486bc6ba-9c04-47fc-a977-f7c55bab42e9';
    d3.json(
      '/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
    ).then((data) => {