顺胜组织v5开发需求

src/components/dialog/copyDialog.jsx

@@ -10,106 +10,103 @@ import * as d3 from 'd3';
 import './index.less';
 import { HomeOutlined } from '@ant-design/icons';
 import './index.less';
-import { getLabel } from '../../util/i18n.js';
 
 const layout = {
   labelCol: { span: 8 },
   wrapperCol: { span: 14 },
 };
 
-const CopyDialog = forwardRef(
-  ({ open, onCreate, onCancel, labelData }, ref) => {
-    const [treeData, setData] = useState([]);
-    const [form] = Form.useForm();
-    const formRef = useRef(null);
+const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
+  const [treeData, setData] = useState([]);
+  const [form] = Form.useForm();
+  const formRef = useRef(null);
 
-    useImperativeHandle(ref, () => ({
-      getTreeData() {
-        form.resetFields();
-        d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
-          (data) => {
-            data.companyTree.map((item, index) => {
-              item.icon = <HomeOutlined />;
-            });
-            setData(data.companyTree);
-          },
-        );
-      },
-    }));
+  useImperativeHandle(ref, () => ({
+    getTreeData() {
+      form.resetFields();
+      d3.json('/api/bs/hrmorganization/orgchart/getSubCompanyTree').then(
+        (data) => {
+          data.companyTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
+          setData(data.companyTree);
+        },
+      );
+    },
+  }));
 
-    /**
-     * 根节点树异步加载
-     * @param {} parentId
-     * @returns
-     */
-    const onRootLoadData = (treeNode) =>
-      new Promise((resolve) => {
-        const { id } = treeNode.props;
-        setTimeout(() => {
-          d3.json(
-            `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`,
-          ).then((data) => {
-            data.companyTree.map((item, index) => {
-              item.icon = <HomeOutlined />;
-            });
-            let arr = [...treeData, ...data.companyTree];
-            setData(arr);
+  /**
+   * 根节点树异步加载
+   * @param {} parentId
+   * @returns
+   */
+  const onRootLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        d3.json(
+          `/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=${id}`,
+        ).then((data) => {
+          data.companyTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
           });
-          resolve(undefined);
-        }, 200);
-      });
+          let arr = [...treeData, ...data.companyTree];
+          setData(arr);
+        });
+        resolve(undefined);
+      }, 200);
+    });
 
-    return (
-      <Modal
-        open={open}
-        title={getLabel(547505, labelData)}
-        okText={getLabel(547319, labelData)}
-        cancelText={getLabel(547318, labelData)}
-        onCancel={onCancel}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              onCreate(values);
-            })
-            .catch((info) => {
-              console.log('Validate Failed:', info);
-            });
-        }}
-      >
-        <Form ref={formRef} {...layout} form={form} name="form_in_modal">
-          <Form.Item
-            name="company"
-            label={getLabel(547506, labelData)}
-            rules={[
-              {
-                required: true,
-                message: `${getLabel(547507, labelData)}`,
-              },
-            ]}
-          >
-            <TreeSelect
-              className="custom-tree-select"
-              treeDataSimpleMode
-              allowClear
-              style={{ width: '100%' }}
-              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              loadData={onRootLoadData}
-              treeData={treeData}
-              treeIcon
-            />
-          </Form.Item>
+  return (
+    <Modal
+      open={open}
+      title="部门复制"
+      okText="确认"
+      cancelText="取消"
+      onCancel={onCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+    >
+      <Form ref={formRef} {...layout} form={form} name="form_in_modal">
+        <Form.Item
+          name="company"
+          label="复制到分部"
+          rules={[
+            {
+              required: true,
+              message: '【复制到分部】为必填项!',
+            },
+          ]}
+        >
+          <TreeSelect
+            className="custom-tree-select"
+            treeDataSimpleMode
+            allowClear
+            style={{ width: '100%' }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            loadData={onRootLoadData}
+            treeData={treeData}
+            treeIcon
+          />
+        </Form.Item>
 
-          <Form.Item
-            name="copySubDept"
-            valuePropName="checked"
-            label={getLabel(547262, labelData)}
-          >
-            <Checkbox />
-          </Form.Item>
-        </Form>
-      </Modal>
-    );
-  },
-);
+        <Form.Item
+          name="copySubDept"
+          valuePropName="checked"
+          label="是否复制子部门信息"
+        >
+          <Checkbox />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
 export default CopyDialog;

src/components/dialog/mergeDialog.jsx

@@ -10,117 +10,114 @@ import * as d3 from 'd3';
 import './index.less';
 import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
 import './index.less';
-import { getLabel } from '../../util/i18n.js';
 
 const layout = {
   labelCol: { span: 6 },
   wrapperCol: { span: 14 },
 };
 
-const MergeDialog = forwardRef(
-  ({ open, onCreate, onCancel, labelData }, ref) => {
-    const [treeData, setData] = useState([]);
-    const [form] = Form.useForm();
-    const formRef = useRef(null);
+const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
+  const [treeData, setData] = useState([]);
+  const [form] = Form.useForm();
+  const formRef = useRef(null);
 
-    const [treeLine, setTreeLine] = useState(true);
+  const [treeLine, setTreeLine] = useState(true);
 
-    useImperativeHandle(ref, () => ({
-      getTreeData() {
-        form.resetFields();
-        d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
-          (data) => {
-            data.departmentTree.map((item, index) => {
-              item.icon = <HomeOutlined />;
-            });
-            setData(data.departmentTree);
-          },
-        );
-      },
-    }));
+  useImperativeHandle(ref, () => ({
+    getTreeData() {
+      form.resetFields();
+      d3.json('/api/bs/hrmorganization/orgchart/getDepartmentTree').then(
+        (data) => {
+          data.departmentTree.map((item, index) => {
+            item.icon = <HomeOutlined />;
+          });
+          setData(data.departmentTree);
+        },
+      );
+    },
+  }));
 
-    /**
-     * 根节点树异步加载
-     * @param {} parentId
-     * @returns
-     */
-    const onRootLoadData = (treeNode) =>
-      new Promise((resolve) => {
-        const { id } = treeNode.props;
-        setTimeout(() => {
-          d3.json(
-            `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`,
-          ).then((data) => {
-            data.departmentTree.map((item, index) => {
-              if (item.key.indexOf('d') > -1) {
-                item.icon = <FolderOutlined />;
-              } else {
-                item.icon = <HomeOutlined />;
-              }
-            });
-            let arr = [...treeData, ...data.departmentTree];
-            setData(arr);
+  /**
+   * 根节点树异步加载
+   * @param {} parentId
+   * @returns
+   */
+  const onRootLoadData = (treeNode) =>
+    new Promise((resolve) => {
+      const { id } = treeNode.props;
+      setTimeout(() => {
+        d3.json(
+          `/api/bs/hrmorganization/orgchart/getDepartmentTree?subcompany=${id}`,
+        ).then((data) => {
+          data.departmentTree.map((item, index) => {
+            if (item.key.indexOf('d') > -1) {
+              item.icon = <FolderOutlined />;
+            } else {
+              item.icon = <HomeOutlined />;
+            }
           });
-          resolve(undefined);
-        }, 200);
-      });
+          let arr = [...treeData, ...data.departmentTree];
+          setData(arr);
+        });
+        resolve(undefined);
+      }, 200);
+    });
 
-    return (
-      <Modal
-        open={open}
-        title={getLabel(547508, labelData)}
-        okText={getLabel(547319, labelData)}
-        cancelText={getLabel(547318, labelData)}
-        onCancel={onCancel}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              onCreate(values);
-            })
-            .catch((info) => {
-              console.log('Validate Failed:', info);
-            });
-        }}
-      >
-        <Form ref={formRef} {...layout} form={form} name="form_in_modal">
-          <Form.Item
-            name="department"
-            label={getLabel(547264, labelData)}
-            rules={[
-              {
-                required: true,
-                message: `${getLabel(547509, labelData)}`,
-              },
-            ]}
-          >
-            <TreeSelect
-              className="custom-tree-select"
-              treeDataSimpleMode
-              allowClear
-              style={{ width: '100%' }}
-              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              loadData={onRootLoadData}
-              treeData={treeData}
-              treeIcon
-            />
-          </Form.Item>
+  return (
+    <Modal
+      open={open}
+      title="部门合并"
+      okText="确认"
+      cancelText="取消"
+      onCancel={onCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then((values) => {
+            onCreate(values);
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+    >
+      <Form ref={formRef} {...layout} form={form} name="form_in_modal">
+        <Form.Item
+          name="department"
+          label="合并到部门"
+          rules={[
+            {
+              required: true,
+              message: '【合并到部门】为必填项!',
+            },
+          ]}
+        >
+          <TreeSelect
+            className="custom-tree-select"
+            treeDataSimpleMode
+            allowClear
+            style={{ width: '100%' }}
+            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+            loadData={onRootLoadData}
+            treeData={treeData}
+            treeIcon
+          />
+        </Form.Item>
 
-          <Form.Item
-            name="mergeName"
-            label={getLabel(547265, labelData)}
-            rules={[
-              {
-                required: true,
-                message: `${getLabel(547510, labelData)}`,
-              },
-            ]}
-          >
-            <Input />
-          </Form.Item>
-        </Form>
-      </Modal>
-    );
-  },
-);
+        <Form.Item
+          name="mergeName"
+          label="合并后名称"
+          rules={[
+            {
+              required: true,
+              message: '【合并后的名称】为必填项!',
+            },
+          ]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+});
 export default MergeDialog;

src/components/drawer/index.jsx

@@ -8,8 +8,8 @@ import {
   Table,
   Spin,
   Checkbox,
-  Row,
-  Col,
+  Modal,
+  Input,
 } from 'antd';
 import { OrgChartComponent } from '@/components/orgChart';
 import * as d3 from 'd3';
@@ -18,7 +18,7 @@ import { message } from 'antd';
 import jsPDF from 'jspdf';
 import ExportJsonExcel from 'js-export-excel';
 import './index.less';
-import { getLabel } from '../../util/i18n.js';
+import { i18n } from '../../util/i18n.js';
 
 let addNodeChildFunc = null;
 let orgChart = null;
@@ -34,24 +34,27 @@ export default class DrawerComponents extends React.Component {
       dataSource: [],
       columns: [],
       spinning: true,
-      showJob: false,
-      defaultTypeValue: ['isBelongTo'],
-      defaultStatusValue: [0, 1, 2, 3],
-      disabled: false,
+      showJob: true,
+      isModalOpen: false,
+      jobResponsibility: '',
+      personId: '',
+      jobTitle: '',
     };
   }
 
   componentDidMount() {}
 
   // 点击节点
-  onNodeClick(node) {
+  onNodeClick = (node) => {
     if (node.ftype == '4') {
-      window.open(
-        `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${node.id}`,
-        '_blank',
-      );
+      this.setState({
+        jobResponsibility: node.jobResponsibility,
+        jobTitle: node.jobTitle,
+        isModalOpen: true,
+        personId: node.id,
+      });
     }
-  }
+  };
 
   onButtonClick(event, d) {
     if (d.children) {
@@ -76,6 +79,7 @@ export default class DrawerComponents extends React.Component {
 
   //获取数据
   getDeatilDatas(params, type = 'chart', showJob = '1') {
+    const { language } = this.props;
     this.setState({ spinning: true, data: [], dataSource: [] });
     d3.json(
       '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
@@ -85,9 +89,51 @@ export default class DrawerComponents extends React.Component {
       if (type == 'chart') {
         this.setState({ data: data.data, spinning: false });
       } else {
+        let columns = [
+          {
+            dataIndex: 'id',
+            key: 'id',
+            title: `${i18n.table.no[language]}`,
+          },
+          {
+            dataIndex: 'workCode',
+            key: 'workCode',
+            title: `${i18n.table.workCode[language]}`,
+          },
+          {
+            dataIndex: 'lastName',
+            key: 'lastName',
+            title: `${i18n.table.lastName[language]}`,
+          },
+          {
+            dataIndex: 'sex',
+            key: 'sex',
+            title: `${i18n.table.gender[language]}`,
+          },
+          {
+            dataIndex: 'departmentName',
+            key: 'departmentName',
+            title: `${i18n.table.department[language]}`,
+          },
+          {
+            dataIndex: 'subcompanyName',
+            key: 'subcompanyName',
+            title: `${i18n.table.company[language]}`,
+          },
+          {
+            dataIndex: 'jobTitle',
+            key: 'jobTitle',
+            title: `${i18n.table.possition[language]}`,
+          },
+          {
+            dataIndex: 'mobile',
+            key: 'mobile',
+            title: `${i18n.table.mobile[language]}`,
+          },
+        ];
         this.setState({
           dataSource: data.dataSource,
-          columns: data.columns,
+          columns: columns,
           spinning: false,
         });
       }
@@ -181,7 +227,7 @@ export default class DrawerComponents extends React.Component {
   };
 
   handleExport = (e) => {
-    const { labelData } = this.props;
+    const { language } = this.props;
     let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel';
     if (type == 'png') {
       orgChart && orgChart.exportImg({ full: true });
@@ -208,30 +254,30 @@ export default class DrawerComponents extends React.Component {
           }
         }
       }
-      option.fileName = `${getLabel(547468, labelData)}`;
+      option.fileName = `${i18n.table.orgInfo[language]}`;
       option.datas = [
         {
           sheetData: dataTable,
           sheetName: 'sheet',
           sheetFilter: [
-            `${getLabel(547327, labelData)}`,
-            `${getLabel(547328, labelData)}`,
-            `${getLabel(547329, labelData)}`,
-            `${getLabel(547330, labelData)}`,
-            `${getLabel(547331, labelData)}`,
-            `${getLabel(547332, labelData)}`,
-            `${getLabel(547333, labelData)}`,
-            `${getLabel(547334, labelData)}`,
+            '序号',
+            '工号',
+            '姓名',
+            '性别',
+            '部门',
+            '分部',
+            '岗位',
+            '手机号',
           ],
           sheetHeader: [
-            `${getLabel(547327, labelData)}`,
-            `${getLabel(547328, labelData)}`,
-            `${getLabel(547329, labelData)}`,
-            `${getLabel(547330, labelData)}`,
-            `${getLabel(547331, labelData)}`,
-            `${getLabel(547332, labelData)}`,
-            `${getLabel(547333, labelData)}`,
-            `${getLabel(547334, labelData)}`,
+            i18n.table.no[language],
+            i18n.table.workCode[language],
+            i18n.table.lastName[language],
+            i18n.table.gender[language],
+            i18n.table.department[language],
+            i18n.table.company[language],
+            i18n.table.possition[language],
+            i18n.table.mobile[language],
           ],
         },
       ];
@@ -244,7 +290,7 @@ export default class DrawerComponents extends React.Component {
    * 节点渲染
    */
   nodeContentRender = (d, i, arr, state) => {
-    const { labelData } = this.props;
+    const { language } = this.props;
 
     if (d.data.ftype == 2) {
       return `<div style="position: relative;">
@@ -256,20 +302,24 @@ export default class DrawerComponents extends React.Component {
                     </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="./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"/>
+                        <img src="${
+                          d.data.fleaderimg
+                            ? d.data.fleaderimg
+                            : './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;">
                             ${d.data.fname}
                         </div>        
-                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
-                          ${getLabel(547190, labelData)}:${d.data.fleader}
+                        <div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">
+                          ${i18n.head[language]}:${d.data.fleader}
                         </div>
                         <div style="display:flex" >
                             <div style="height: 25px; line-height: 25px; min-width: 80px;">
-                              ${getLabel(547323, labelData)}: ${
-        d.data.fonjob
-      } ${getLabel(547525, labelData)}
+                                ${i18n.onJob[language]}: ${d.data.fonjob} ${
+        i18n.onJob[language] == 'cn' ? '人' : ''
+      }
                             </div>
                         </div>
                     </div>
@@ -288,9 +338,9 @@ export default class DrawerComponents extends React.Component {
                           d.data.fname
                         }</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;">
-                            <span>${getLabel(547323, labelData)}: ${
-        d.data.fonjob
-      } ${getLabel(547525, labelData)}</span>
+                            <span>${i18n.onJob[language]}: ${d.data.fonjob} ${
+        i18n.onJob[language] == 'cn' ? '人' : ''
+      }</span>
                         </div>
                     </div>
                 </div>
@@ -309,19 +359,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;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: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
-                        ${d.data.fname}
-                        <span style='color: red;'>(${d.data.accountType})</span>
-                        </div>
+                <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
+                        }</div>
                     </div>
-                    <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)}: ${
+                    <div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;height: 25px;line-height: 25px;">
+                        <span>${i18n.serveAge[language]}: ${
         d.data.companyWorkYear
-      } ${getLabel(547526, labelData)}</span>
+      } ${i18n.year[language]}</span>
+                        <div>${i18n.postion[language]}: ${d.data.jobTitle}</div>
+                        <div>${i18n.level[language]}: ${d.data.level}</div>
                     </div>
-
                 </div>
                 </div>
              </div>`;
@@ -329,81 +379,38 @@ 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');
+    const showJob = params.fclass == '0' ? '1' : '0';
+    this.getDeatilDatas(params, 'chart', showJob);
     this.setState({ open: true, params: params });
   };
 
   onClose = () => {
+    const { params } = this.state;
     this.setState({
       open: false,
       detailType: 'chart',
-      showJob: false,
-      defaultStatusValue: [0, 1, 2, 3],
-      defaultTypeValue: ['isBelongTo'],
-      disabled: false,
+      showJob: params.fclass == '0' ? 'true' : 'false',
     });
   };
 
   changeDetail = () => {
-    const { detailType, params, defaultTypeValue, defaultStatusValue } =
-      this.state;
-    const newParam = {
-      ...params,
-      typeValue: defaultTypeValue.join(','),
-      statusValue: defaultStatusValue.join(','),
-    };
+    const { detailType, params } = this.state;
     let type = detailType == 'chart' ? 'table' : 'chart';
-    const showJob = this.state.showJob ? '1' : '0';
-    this.setState({
-      detailType: type,
-    });
-    this.getDeatilDatas(newParam, type, showJob);
-  };
-
-  onStatusChange = (checkedValues) => {
-    const { labelData } = this.props;
-    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) => {
-    const { labelData } = this.props;
-    if (this.state.showJob) {
-      return message.error(`${getLabel(547729, labelData)}`, 2);
+    var showJob = '1';
+    if (params.fclass == '0') {
+      showJob = this.state.showJob ? '1' : '0';
+    } else {
+      showJob = '0';
     }
     this.setState({
-      defaultTypeValue: checkedValues,
-      disabled: checkedValues.includes('isManager') ? true : false,
+      detailType: type,
     });
-    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);
+    this.getDeatilDatas(params, type, showJob);
   };
 
   render() {
+    const { language } = this.props;
+
     const {
       params,
       open,
@@ -413,43 +420,25 @@ export default class DrawerComponents extends React.Component {
       columns,
       spinning,
       showJob,
-      defaultStatusValue,
-      defaultTypeValue,
-      disabled,
+      jobResponsibility,
+      jobTitle,
+      isModalOpen,
+      personId,
     } = 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: `${i18n.exportImage[language]}`, key: '1' });
       //arr.push({ label: '导出PDF', key: '2' });
     } else {
-      arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
+      arr.push({ label: `${i18n.exportTable[language]}`, key: '3' });
     }
 
     const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
 
     return (
       <Drawer
-        title={getLabel(547321, labelData)}
-        width={1200}
+        title={i18n.detailInfo[language]}
+        width={1100}
         onClose={this.onClose}
         open={open}
         bodyStyle={{
@@ -461,97 +450,91 @@ 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(
-                    newParam,
+                    params,
                     detailType,
                     e.target.checked ? '1' : '0',
                   );
                 }}
               >
-                {getLabel(547447, labelData)}
+                {i18n.showJob[language]}
               </Checkbox>
             )}
             <Dropdown overlay={menu}>
-              <Button type="primary">{getLabel(547314, labelData)}</Button>
+              <Button type="primary">{i18n.export[language]}</Button>
             </Dropdown>
-            <Button type="primary" onClick={this.changeDetail}>
-              {getLabel(547326, labelData)}
-            </Button>
+            <img
+              style={{ width: 36, height: 36, cursor: 'pointer' }}
+              src="./img/change.png"
+              onClick={this.changeDetail}
+            />
           </Space>
         }
       >
-        <>
-          {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}
+        {detailType == 'chart' ? (
+          <div className="svg-container">
+            <Spin
+              size="large"
+              spinning={spinning}
+              tip="正在读取数据...."
+              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}
               />
-            </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>
-          )}
-        </>
+            )}
+          </div>
+        ) : (
+          <div style={{ padding: '0 20px' }}>
+            <Table
+              dataSource={dataSource}
+              columns={columns}
+              scroll={{ y: 500 }}
+              loading={spinning}
+              pagination={{
+                locale: {
+                  // 翻页文本替换
+                  items_per_page: '条/页',
+                  jump_to: '跳至',
+                  page: '页',
+                },
+                showTotal: (total) =>
+                  language == 'cn'
+                    ? `共 ${dataSource.length} 条`
+                    : `${dataSource.length} ${i18n.table.records[language]} ${i18n.table.total[language]}`,
+              }}
+            />
+          </div>
+        )}
+        <Modal
+          title={`${i18n.postionInfo[language]}-${jobTitle}`}
+          open={isModalOpen}
+          onCancel={() => this.setState({ isModalOpen: false })}
+          footer={[
+            <Button
+              key="back"
+              onClick={() => this.setState({ isModalOpen: false })}
+            >
+              {i18n.close[language]}
+            </Button>,
+          ]}
+        >
+          <div style={{ whiteSpace: 'pre-line' }}>{jobResponsibility}</div>
+        </Modal>
       </Drawer>
     );
   }

src/components/timeline/index.jsx

@@ -7,12 +7,10 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import React from 'react';
-import { Timeline, Drawer, Popconfirm, message } from 'antd';
+import { Timeline, Drawer } from 'antd';
 import styles from './index.less';
 import leftTreeShow from './img/leftTree-show.png';
 import leftHide from './img/leftTree-hide.png';
-import { CloseCircleOutlined } from '@ant-design/icons';
-import { getLabel } from '../../util/i18n.js';
 
 export default class TimeLine extends React.Component {
   constructor(props) {
@@ -37,21 +35,6 @@ export default class TimeLine extends React.Component {
     this.props.onClick(data);
   }
 
-  handleDelete(key) {
-    const { labelData } = this.props;
-    let api = `/api/bs/hrmorganization/orgchart/versionDelete?versionId=${key}`;
-    fetch(api)
-      .then((res) => res.json())
-      .then((data) => {
-        if (data.api_status) {
-          message.success(`${getLabel(547484, labelData)}`, 2, 3);
-          window.location.reload(true);
-        } else {
-          message.error(`${getLabel(547483, labelData)}`, 2, 3);
-        }
-      });
-  }
-
   componentDidMount() {
     this.searchTimeLines(this.props.url);
   }
@@ -73,8 +56,6 @@ export default class TimeLine extends React.Component {
   };
 
   render() {
-    const { labelData } = this.props;
-
     let showStyle = {};
     let positionStyle = {};
     if (this.state.open) {
@@ -108,30 +89,14 @@ export default class TimeLine extends React.Component {
               return (
                 <Timeline.Item
                   key={item.key}
+                  onClick={this.handleLineClick.bind(this, item)}
                   className={styles.timeline}
                   color={item.color}
+                  style={{
+                    color: item.color == 'blue' ? '#1890ff' : 'dimgray',
+                  }}
                 >
-                  <div
-                    className={styles.title}
-                    style={{
-                      color: item.color == 'blue' ? '#1890ff' : 'dimgray',
-                    }}
-                    onClick={this.handleLineClick.bind(this, item)}
-                  >
-                    {item.title}
-                  </div>
-                  {item.key != 0 && (
-                    <Popconfirm
-                      title={`${getLabel(547491, labelData)}[${item.title}]?`}
-                      onConfirm={this.handleDelete.bind(this, item.key)}
-                      okText={getLabel(547319, labelData)}
-                      cancelText={getLabel(547318, labelData)}
-                    >
-                      <div className={styles.delete}>
-                        <CloseCircleOutlined />
-                      </div>
-                    </Popconfirm>
-                  )}
+                  <div>{item.title}</div>
                   <div className={styles.time}>{item.time}</div>
                 </Timeline.Item>
               );

src/components/timeline/index.less

@@ -15,25 +15,21 @@
     cursor: pointer;
   }
 
-  // .timeline .title:hover {
-  //   color: #1890ff;
-  // }
+  .timeline :hover {
+    color: #1890ff;
+  }
 
   .time {
     color: dimgray;
   }
-
-  .delete :hover {
-    color: red;
-  }
 }
 
 .leftRightLayoutBtn {
   width: 18px;
   height: 60px;
-  position: fixed;
+  position: absolute;
   top: 50%;
-  // margin-top: -30px;
+  margin-top: -30px;
   z-index: 101;
   cursor: pointer;
 }

src/components/topBar/index.jsx

@@ -15,17 +15,16 @@ import {
   Modal,
   Input,
   message,
-  notification,
 } from 'antd';
 const { Option } = Select;
 const { TextArea } = Input;
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 import locale from 'antd/lib/date-picker/locale/zh_CN';
-import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
+import { HomeOutlined, FolderOpenOutlined } from '@ant-design/icons';
 moment.locale('zh-cn');
-import { getLabel } from '../../util/i18n.js';
-import { SmileOutlined } from '@ant-design/icons';
+
+import { i18n } from '../../util/i18n.js';
 
 export class TopBar extends React.Component {
   constructor(props) {
@@ -35,18 +34,20 @@ export class TopBar extends React.Component {
       rootTreeData: [], //根节点异步树
       treeLoadedKeys: [],
       treeExpandedKeys: [],
+      deptTreeData: [],
       requestData: {
-        fclass: '0',
+        fclass: '',
         root: undefined,
-        level: '2',
+        department: undefined,
+        level: '1',
         fisvitual: '0',
         hidedept: '0',
       },
       open: false,
       confirmLoading: false,
       description: '',
-      timelineId: '0',
-      treeKey: 1,
+      defaultLevelOpt: [],
+      levelOpt: [],
     };
   }
 
@@ -59,37 +60,17 @@ export class TopBar extends React.Component {
     this.setState({ requestData });
   }
 
-  handleTreeData(treeData = [], timelineId) {
-    this.setState({
-      rootTreeData: treeData,
-      timelineId: timelineId,
-      treeKey: this.state.treeKey + 1,
-    });
-  }
-
   onChange = (e) => {
     this.setState({ description: e.target.value });
   };
 
-  generateKey = (
-    length = 5,
-    chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
-  ) => {
-    let result = '';
-    for (let i = 0; i < length; i++) {
-      result += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return result;
-  };
-
   /**
    * 弹窗确认
    */
   handleOk = () => {
     const { description, requestData } = this.state;
-    const { labelData } = this.props;
     if (description.length == 0) {
-      return message.error(`${getLabel(547512, labelData)}`);
+      return message.error('请填写描述信息');
     }
     this.setState({ confirmLoading: true });
     let api =
@@ -105,9 +86,9 @@ export class TopBar extends React.Component {
             open: false,
             confirmLoading: false,
           });
-          message.success(`${getLabel(547513, labelData)}`, 2, 3);
+          message.success('版本记录成功,请重新刷新页面', 2, 3);
         } else {
-          message.error(`${getLabel(547514, labelData)}`, 2, 3);
+          message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
         }
       });
   };
@@ -138,9 +119,6 @@ export class TopBar extends React.Component {
           }
           arr.map((item, index) => {
             item.icon = <HomeOutlined />;
-            if (item.type == 2) {
-              item.icon = <FolderOutlined />;
-            }
           });
           this.setState({
             rootTreeData: arr,
@@ -159,22 +137,74 @@ export class TopBar extends React.Component {
       const { id } = treeNode;
       setTimeout(() => {
         const { fclass } = this.state.requestData;
-        const { timelineId } = this.state;
         let api =
           '/api/bs/hrmorganization/orgchart/getSubCompanyTree?subcompany=' +
           id +
           '&fclass=' +
-          fclass +
-          '&id=' +
-          timelineId;
+          fclass;
         this.getNodeTreeNode(api);
         resolve(undefined);
       }, 500);
     });
 
   onRootChange = (value) => {
-    let requestData = { ...this.state.requestData, root: value };
-    this.setState({ requestData });
+    const { fclass } = this.state.requestData;
+    if (fclass != '0') {
+      //顺胜项目二开 增加部门节点树
+      this.getDeptTreeData(
+        `/api/bs/hrmorganization/orgchart/getDepartmentTree?fclass=${fclass}&subcompany=${value}`,
+      );
+    }
+    this.handleFormChange({ department: undefined, root: value });
+  };
+
+  /**
+   * 部门节点树
+   */
+  getDeptTreeData = (url) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.api_status) {
+          let arr = [...data.departmentTree];
+          arr.map((item, index) => {
+            item.icon = <FolderOpenOutlined />;
+          });
+          this.setState({
+            deptTreeData: arr,
+          });
+        }
+      });
+  };
+
+  onDeptChange = (value, label, extra) => {
+    const { deptTreeData } = this.state;
+    var opt = this.buildLevelOpt(0);
+    const foundItem = deptTreeData.find((item) => item.value === value);
+    var level = foundItem ? foundItem.depth : '1';
+    if (value != undefined) {
+      opt = this.buildLevelOpt(level);
+    }
+    this.handleFormChange({
+      department: value,
+      level: level === '1' ? level : `${level + 1}`,
+    });
+    this.setState({ levelOpt: opt });
+  };
+
+  /**
+   * 虚拟维度部门层级构建
+   */
+  buildLevelOpt = (level) => {
+    const { language } = this.props;
+    let opt = [{ value: '1', label: `${i18n.all[language]}` }];
+    for (let index = 1; index <= level; index++) {
+      opt.push({
+        value: `${index + 1}`,
+        label: language == 'cn' ? `${index}级` : `Level ${index}`,
+      });
+    }
+    return opt;
   };
 
   onTreeExpand = (expandedKeys) => {
@@ -184,6 +214,17 @@ export class TopBar extends React.Component {
   };
 
   componentDidMount() {
+    const { language } = this.props;
+    const defaultLevelOpt = [
+      { value: '1', label: `${i18n.all[language]}` },
+      { value: '2', label: language == 'cn' ? '一级' : 'Level 1' },
+      { value: '3', label: language == 'cn' ? '二级' : 'Level 2' },
+      { value: '4', label: language == 'cn' ? '三级' : 'Level 3' },
+    ];
+    this.setState({
+      levelOpt: defaultLevelOpt,
+      defaultLevelOpt: defaultLevelOpt,
+    });
     this.getSeatchCondition(this.props.url);
   }
 
@@ -198,6 +239,10 @@ export class TopBar extends React.Component {
           fclasslist: data.fclasslist,
           rootTreeData: data.companyTree,
         });
+        this.handleFormChange({ fclass: data.fclass, root: data.root });
+        this.getDeptTreeData(
+          `/api/bs/hrmorganization/orgchart/getDepartmentTree?fclass=${data.fclass}&subcompany=${data.root}`,
+        );
       });
   };
 
@@ -206,7 +251,7 @@ export class TopBar extends React.Component {
       onClick={this.handleExportMenuClick.bind(this)}
       items={[
         {
-          label: `${getLabel(547315, this.props.labelData)}`,
+          label: `${i18n.exportImage[this.props.language]}`,
           key: '1',
         },
         // {
@@ -218,30 +263,43 @@ export class TopBar extends React.Component {
   );
 
   render() {
-    const { disabled, type, labelData } = this.props;
-    const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
-      this.state;
+    const { disabled, type, language } = this.props;
+    const {
+      rootTreeData,
+      open,
+      confirmLoading,
+      treeExpandedKeys,
+      requestData,
+      deptTreeData,
+      levelOpt,
+      defaultLevelOpt,
+    } = this.state;
+    const { fclass, department } = requestData;
 
     return (
       <div className={style.topbarWrapper}>
         <Row>
           <Col span={6}>
-            {getLabel(547293, labelData)}：
+            {i18n.fclass[language]}：
             <Select
               defaultValue="0"
               style={{ width: 140 }}
-              value={this.state.requestData.fclass}
+              value={fclass}
               onChange={(value) => {
                 const requestData = {
                   fclass: value,
                   root: undefined,
-                  level: '2',
+                  department: undefined,
+                  level: value == '0' ? '2' : '1',
                   fisvitual: '0',
                   hidedept: '0',
                 };
                 this.handleFormChange(requestData);
                 this.setState({
                   rootTreeData: [],
+                  deptTreeData: [],
+                  levelOpt:
+                    value == '0' ? defaultLevelOpt : this.buildLevelOpt(0),
                 });
                 this.getNodeTreeNode(
                   `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
@@ -257,152 +315,126 @@ export class TopBar extends React.Component {
               ))}
             </Select>
           </Col>
-
-          <Col span={8}>
-            {getLabel(547294, labelData)}：
+          <Col span={fclass == '0' ? 6 : 8}>
+            {i18n.companyRoot[language]}：
             <TreeSelect
-              key={treeKey}
               treeDataSimpleMode
               allowClear
               style={{ width: '65%' }}
               value={this.state.requestData.root}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              placeholder={getLabel(547298, labelData)}
+              placeholder={i18n.placeholder[language]}
               onChange={this.onRootChange}
               loadData={this.onRootLoadData}
               treeData={rootTreeData}
               treeIcon
             />
           </Col>
-          <Col span={5}>
-            <Checkbox
-              style={{ marginTop: '5px', marginLeft: 100 }}
-              checked={this.state.requestData.hidedept == '1'}
-              onChange={(e) =>
-                this.handleFormChange({
-                  hidedept: e.target.checked ? '1' : '0',
-                })
-              }
-            >
-              {getLabel(547296, labelData)}
-            </Checkbox>
-            <Tooltip
-              title={getLabel(547303, labelData)}
-              color="#0082fb"
-              placement="rightTop"
-            >
-              <QuestionCircleOutlined
-                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
-              />
-            </Tooltip>
-          </Col>
-          <Col span={5}>
-            {getLabel(547299, labelData)}：
+          {fclass == '0' ? (
+            <Col span={6}>
+              <Checkbox
+                style={{ marginTop: '5px', marginLeft: 100 }}
+                checked={this.state.requestData.hidedept == '1'}
+                onChange={(e) =>
+                  this.handleFormChange({
+                    hidedept: e.target.checked ? '1' : '0',
+                  })
+                }
+              >
+                {i18n.hideDept[language]}
+              </Checkbox>
+
+              <Tooltip
+                title={i18n.tipsDept[language]}
+                color="#0082fb"
+                placement="rightTop"
+              >
+                <QuestionCircleOutlined
+                  style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
+                />
+              </Tooltip>
+            </Col>
+          ) : (
+            ''
+          )}
+          <Col span={6}>
+            {i18n.deptLevel[language]}：
             <Select
-              defaultValue="3"
               style={{ width: 140 }}
               value={this.state.requestData.level}
               onChange={(value) => this.handleFormChange({ level: value })}
             >
-              <Option value="1">{getLabel(547301, labelData)}</Option>
-              <Option value="2">{getLabel(547463, labelData)}</Option>
-              <Option value="3">{getLabel(547464, labelData)}</Option>
-              <Option value="4">{getLabel(547465, labelData)}</Option>
+              {levelOpt.map((item) => (
+                <Option key={item.value} value={item.value}>
+                  {item.label}
+                </Option>
+              ))}
             </Select>
           </Col>
         </Row>
         <Row style={{ marginTop: '15px' }}>
-          <Col span={6}>
-            <Checkbox
-              style={{ marginTop: '5px' }}
-              checked={this.state.requestData.fisvitual == '1'}
-              onChange={(e) =>
-                this.handleFormChange({
-                  fisvitual: e.target.checked ? '1' : '0',
-                })
-              }
-            >
-              {getLabel(547302, labelData)}
-            </Checkbox>
-            <Tooltip
-              title={getLabel(547304, labelData)}
-              color="#0082fb"
-              placement="rightTop"
-            >
-              <QuestionCircleOutlined
-                style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
+          {fclass == '0' ? (
+            <Col span={6}>
+              <Checkbox
+                style={{ marginTop: '5px' }}
+                checked={this.state.requestData.fisvitual == '1'}
+                onChange={(e) =>
+                  this.handleFormChange({
+                    fisvitual: e.target.checked ? '1' : '0',
+                  })
+                }
+              >
+                {i18n.virtual[language]}
+              </Checkbox>
+              <Tooltip
+                title={i18n.tipsVirtual[language]}
+                color="#0082fb"
+                placement="rightTop"
+              >
+                <QuestionCircleOutlined
+                  style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
+                />
+              </Tooltip>
+            </Col>
+          ) : (
+            ''
+          )}
+          {fclass != '0' ? (
+            <Col span={8}>
+              {i18n.deptRoot[language]}：
+              <TreeSelect
+                treeDataSimpleMode
+                allowClear
+                style={{ width: '75%' }}
+                value={department}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder={i18n.placeholder[language]}
+                onChange={this.onDeptChange}
+                treeData={deptTreeData}
+                treeIcon
               />
-            </Tooltip>
-          </Col>
-
+            </Col>
+          ) : (
+            ''
+          )}
           <Col span={10}>
-            {this.state.requestData.fclass == '0' && (
-              <span>
-                <Button
-                  type="primary"
-                  style={{ marginRight: '10px' }}
-                  disabled={disabled}
-                  onClick={() => {
-                    this.setState({ open: true });
-                  }}
-                >
-                  {getLabel(547305, labelData)}
-                </Button>
-                <Button
-                  type="primary"
-                  style={{ marginRight: '10px' }}
-                  onClick={() => {
-                    window.open('#/dragtree', 'blank');
-                  }}
-                >
-                  {getLabel(547310, labelData)}
-                </Button>
-                <Button
-                  type="primary"
-                  style={{ marginRight: '10px' }}
-                  onClick={() => {
-                    window.open('#/statistics', 'blank');
-                  }}
-                >
-                  {getLabel(547313, labelData)}
-                </Button>
-              </span>
-            )}
-
             <Button
               type="primary"
               style={{ marginRight: '10px' }}
               onClick={() => {
+                if (fclass != '0' && department == undefined) {
+                  return message.warning(`${i18n.searchRemind[language]}`);
+                }
                 this.props.onSearch(this.state.requestData);
               }}
             >
-              {getLabel(547307, labelData)}
+              {i18n.search[language]}
             </Button>
-
             <Dropdown overlay={this.menu}>
-              <Button type="primary">{getLabel(547314, labelData)}</Button>
+              <Button type="primary">{i18n.export[language]}</Button>
             </Dropdown>
           </Col>
         </Row>
-        <Modal
-          title={getLabel(547305, labelData)}
-          cancelText={getLabel(547318, labelData)}
-          okText={getLabel(547319, labelData)}
-          open={open}
-          onOk={this.handleOk}
-          confirmLoading={confirmLoading}
-          onCancel={() => this.setState({ open: false })}
-        >
-          <p style={{ color: 'red' }}>{getLabel(547316, labelData)}</p>
-          <p>{getLabel(547317, labelData)}:</p>
-          <TextArea
-            showCount
-            maxLength={20}
-            style={{ height: 120, resize: 'none' }}
-            onChange={this.onChange}
-            placeholder="please enter"
-          />
-        </Modal>
       </div>
     );
   }

src/d3-org-chart.js

@@ -964,6 +964,9 @@ export class OrgChart {
       })
       .remove();
 
+    //实线设置
+    //linkUpdate.style('stroke-dasharray', 'none');
+
     // --------------------------  CONNECTIONS ----------------------
 
     const connectionsSel = attrs.connectionsWrapper

src/pages/company.jsx

@@ -12,7 +12,7 @@ import moment from 'moment';
 import qs from 'qs';
 import { message, Spin, notification } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';
-import { getLabel } from '../util/i18n.js';
+import { i18n } from '../util/i18n.js';
 
 let active = 'top';
 let drawerCom = null;
@@ -28,16 +28,26 @@ export default function companyPage() {
 
   const [sliderProgress, setSliderProgress] = useState(50);
   let addNodeChildFunc = null;
-  let topBarSearchRequest = null;
   const [hasRight, setHasRight] = useState('');
   const [timelineId, setTimelineId] = useState(0);
+  const [language, setLanguage] = useState('cn');
   const infoRef = useRef();
 
-  const [labelData, setLabelData] = useState({});
-  const [lebelCompleted, setLabelCompleted] = useState(false);
-
   useEffect(() => {
     infoRef.current = timelineId;
+    let { hash } = window.location;
+    let languageValue = hash.match(/language=([^&]+)/i);
+    let language = 'cn';
+    if (languageValue && languageValue.length > 1) {
+      language = languageValue[1];
+      setLanguage(language);
+    }
+
+    notification.open({
+      message: i18n.tips[language],
+      description: i18n.tipsContent[language],
+      icon: <SmileOutlined style={{ color: '#108ee9' }} />,
+    });
   }, [timelineId]);
 
   const [spinning, setSpinning] = useState(false);
@@ -69,18 +79,10 @@ export default function companyPage() {
       }
 
       let idsStr = idsList.join(',');
-      let api = '';
-      if (topBarSearchRequest) {
-        let request = { ...topBarSearchRequest, ids: idsStr };
-        api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
-          qs.stringify(request, { addQueryPrefix: true });
-      } else {
-        let request = { ...topbar.state.requestData, ids: idsStr };
-        api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
-          qs.stringify(request, { addQueryPrefix: true });
-      }
+      let request = { ...topbar.state.requestData, ids: idsStr };
+      let api =
+        '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
+        qs.stringify(request, { addQueryPrefix: true });
       fetch(api)
         .then((res) => res.json())
         .then((data) => {
@@ -95,8 +97,15 @@ export default function companyPage() {
   };
 
   // 获取部门图片
-  function getDepartmentImage(fisvitual) {
-    return fisvitual == '0' ? `./img/back/level4.png` : `./img/back/level8.png`;
+  function getDepartmentImage(fisvitual, colorCheck) {
+    const fclass = topbar.state.requestData.fclass;
+    if (fclass == '0') {
+      return fisvitual == '0'
+        ? `./img/back/level4.png`
+        : `./img/back/level8.png`;
+    } else {
+      return `./img/sship/dept${colorCheck}.png`;
+    }
   }
 
   // 获取分部图片
@@ -104,30 +113,15 @@ export default function companyPage() {
     return fisvitual == '0' ? `./img/back/level1.png` : `./img/back/level5.png`;
   }
 
-  // 多语言获取
+  //获取数据
   useEffect(() => {
-    d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
-      setLabelData(res.data);
-      setLabelCompleted(true);
-      notification.open({
-        message: `${getLabel(547283, res.data)}`,
-        description: `${getLabel(547292, res.data)}`,
-        icon: <SmileOutlined style={{ color: '#108ee9' }} />,
-      });
+    d3.json(
+      '/api/bs/hrmorganization/orgchart/companyData?id=0&fisvitual=0&hidedept=0&level=1',
+    ).then((data) => {
+      setData(data.data);
+      setHasRight(data?.hasRight);
     });
-  }, []);
-
-  // 获取数据
-  useEffect(() => {
-    if (lebelCompleted) {
-      d3.json(
-        '/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=2&id=0',
-      ).then((data) => {
-        setData(data.data);
-        setHasRight(data?.hasRight);
-      });
-    }
-  }, [lebelCompleted]);
+  }, [true]);
 
   // ButtonContent渲染
   const buttonContentRender = ({ node, state }) => {
@@ -162,11 +156,13 @@ export default function companyPage() {
   };
 
   const nodeContentRender = (d, i, arr, state) => {
-    let fclass = topbar.state.requestData.fclass;
+    let a = topbar.state.requestData.fclass;
+    let fclass = a == '' ? undefined : a;
     let statisticsStyle = fclass == 0 ? 'block' : 'none';
+    let headStyle = fclass == 0 ? 'none' : 'block';
     if (d.data.ftype == 0) {
-      return `<div style="text-align: center;">
-          <div style="display: inline-block;  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;
@@ -186,11 +182,10 @@ 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 class="tooltip">
-                <div class="tooltitle"> ${d.data.fname} </div>
-                <div class="tooltiptext">${d.data.fname}</div>
-            </div>
-
+            <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 style="display: ${statisticsStyle}">
                 <span style="color:red">${d.data.staffNum}</span> /
                 <span style="color:green">${d.data.onJobNum}</span>
@@ -204,19 +199,23 @@ export default function companyPage() {
           <div style='position:absolute;height:100%'>
             <img style='width:144px;height:106px' src="${getDepartmentImage(
               d.data.fisvitual,
+              d.data.colorCheck,
             )}"/>
           </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 class="tooltip">
-                <div class="tooltitle"> ${d.data.fname} </div>
-                <div class="tooltiptext">${d.data.fname}</div>
-            </div>
-            
+            <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 style="display: ${statisticsStyle}">
               <span style="color:red">${d.data.staffNum}</span> /
               <span style="color:green">${d.data.onJobNum}</span>
             </div>
+            <div style="display: ${headStyle}">
+                <span>${d.data.fleader}</span>
+            </div>
+             <div style="display: ${headStyle}">
+                <span>${d.data.jobType}</span>
+            </div>
           </div>
         </div>
         `;
@@ -351,10 +350,6 @@ export default function companyPage() {
    */
   const handleExport = (type) => {
     if (type == 'png') {
-      const hiddenElements = document.querySelectorAll('.tooltitle');
-      const hiddenElementsArray = Array.from(hiddenElements);
-      // 从 DOM 中移除隐藏内容
-      hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
       orgChart && orgChart.exportImg({ full: true });
     } else {
       orgChart && downloadPdf(orgChart);
@@ -375,8 +370,6 @@ export default function companyPage() {
       hidedept: '0',
     };
     topbar.handleFormChange({ ...resetParams });
-    //根节点初始化
-    topbar.handleTreeData([], timeline.id);
     topbar.getNodeTreeNode(
       `/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
       false,
@@ -394,7 +387,6 @@ export default function companyPage() {
     if (cache) {
       requestData = { ...requestData, id: infoRef.current };
     }
-    topBarSearchRequest = requestData;
     let api =
       '/api/bs/hrmorganization/orgchart/companyData' +
       qs.stringify(requestData, { addQueryPrefix: true });
@@ -404,7 +396,7 @@ export default function companyPage() {
         if (data.data) {
           if (!data.data.length) {
             setData([{}]);
-            message.warning(`${getLabel(547516, labelData)}`);
+            message.warning(`${i18n.httpRemind[language]}`);
           } else {
             setData(data?.data);
           }
@@ -420,10 +412,11 @@ export default function companyPage() {
    * @param {*} requestData
    */
   const handleChange = (requestData) => {
-    setTimelineId(0);
-    timeLine.searchTimeLines(
-      `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
-    );
+    //上海顺胜项目二开去除版本时间轴
+    // setTimelineId(0);
+    // timeLine.searchTimeLines(
+    //   `/api/bs/hrmorganization/orgchart/timeLines?fclass=${requestData.fclass}`,
+    // );
     requestData = { ...requestData, id: 0 };
     handleSearch(requestData, false);
   };
@@ -451,14 +444,13 @@ export default function companyPage() {
           style={{ display: 'block', margin: '0 auto' }}
           src="./img/permission.png"
         />
-        <p style={{ textAlign: 'center' }}>{getLabel(547515, labelData)}</p>
+        <p style={{ textAlign: 'center' }}>{i18n.noAuth[language]}</p>
       </div>
     );
   }
 
   return (
-    hasRight &&
-    Object.keys(labelData).length != 0 && (
+    hasRight && (
       <div className={styles.contentWrapper}>
         <TopBar
           ref={(r) => (topbar = r)}
@@ -473,7 +465,7 @@ export default function companyPage() {
           }}
           type="company"
           url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company&id=0"
-          labelData={labelData}
+          language={language}
         />
         <ToolBar
           onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
@@ -490,14 +482,6 @@ export default function companyPage() {
           onZoomIn={(progressBtn) => handleZoomIn(progressBtn)}
           onZoomBehavior={(value) => handleZoomBehavior(value)}
         />
-        <TimeLine
-          ref={(r) => (timeLine = r)}
-          onClick={(timeline) => {
-            timeLineSearch(timeline);
-          }}
-          url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
-          labelData={labelData}
-        />
         <Spin size="large" spinning={spinning}>
           <OrgChartComponent
             setChart={(chart) => (orgChart = chart)}
@@ -511,12 +495,11 @@ export default function companyPage() {
             nodeContent={nodeContentRender}
           />
         </Spin>
-        <DrawerComponents ref={(r) => (drawerCom = r)} labelData={labelData} />
+        <DrawerComponents ref={(r) => (drawerCom = r)} language={language} />
         <OperateDialog
           ref={(r) => (operateCom = r)}
           addFolderNode={addFolderNode}
           deleteNode={deleteNode}
-          labelData={labelData}
         />
       </div>
     )

src/pages/dragTree.jsx

@@ -5,7 +5,6 @@ import qs from 'qs';
 import MergeDialog from '../components/dialog/mergeDialog';
 import CopyDialog from '../components/dialog/copyDialog';
 import inset from '../../public/img/back/inset.png';
-import { getLabel } from '../util/i18n.js';
 
 import {
   HomeOutlined,
@@ -22,7 +21,7 @@ const DragTree = () => {
   const [expandedKeys, setExpandedKeys] = useState([undefined]);
   const childRef = useRef(null);
   const copyChildRef = useRef(null);
-  const [tip, setTip] = useState('');
+  const [tip, setTip] = useState('正在加载,请稍候...');
   const [loading, setLoading] = useState(false);
   const [showCanceled, setShowCanceled] = useState(0);
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -32,13 +31,8 @@ const DragTree = () => {
   const [mergeId, setMergeId] = useState(null);
   const [copyopen, setCopyOpen] = useState(false);
   const [copyId, setCopyId] = useState(null);
-  const [labelData, setLabelData] = useState({});
 
   useEffect(() => {
-    d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
-      setLabelData(res.data);
-      setTip(`${getLabel(547473, res.data)}`);
-    });
     getMoveTree(0);
   }, [true]);
 
@@ -78,24 +72,19 @@ const DragTree = () => {
       info.dropPosition - Number(dropPos[dropPos.length - 1]);
 
     if (dropPosition == -1) {
-      return message.error(`${getLabel(547475, labelData)}`, 2);
+      return message.error('不支持该操作！！！', 2);
     }
-    let pos =
-      dropPosition == 0
-        ? `${getLabel(547476, labelData)}`
-        : `${getLabel(547477, labelData)}`;
+    let pos = dropPosition == 0 ? '内部' : '下方';
 
-    let title = `${getLabel(547478, labelData)}【${
-      info.dragNode.title
-    } ${getLabel(547479, labelData)} 【${info.node.title}】${pos}`;
+    let title = `确定将【${info.dragNode.title}】移到 【${info.node.title}】${pos}`;
     Modal.confirm({
-      title: `${getLabel(547480, labelData)}`,
+      title: '转移操作',
       content: title,
-      okText: `${getLabel(547319, labelData)}`,
-      cancelText: `${getLabel(547318, labelData)}`,
+      okText: '确认',
+      cancelText: '取消',
       onOk() {
         setLoading(true);
-        setTip(`${getLabel(547481, labelData)}`);
+        setTip('正在转移，请稍候...');
 
         fetch('/api/bs/hrmorganization/dept/dragDepartment', {
           method: 'POST',
@@ -153,14 +142,14 @@ const DragTree = () => {
                 }
               }
               setGData(data);
-              message.success(`${getLabel(547482, labelData)}`, 2);
+              message.success('转移成功', 2);
             } else {
               message.warning(res.msg, 2);
             }
             setLoading(false);
           })
           .catch((error) => {
-            message.error(`${getLabel(547483, labelData)}`);
+            message.error('接口异常,请联系管理员');
           });
       },
       onCancel() {},
@@ -189,14 +178,14 @@ const DragTree = () => {
               arr.splice(index, 1);
             });
             setGData(data);
-            message.success(`${getLabel(547484, labelData)}`, 2);
+            message.success('删除成功', 2);
           } else {
             message.warning(res.data.message, 2);
           }
         }
       })
       .catch((error) => {
-        message.error(`${getLabel(547483, labelData)}`);
+        message.error('接口异常,请联系管理员');
       });
   };
 
@@ -222,7 +211,7 @@ const DragTree = () => {
         if (res.code == 200) {
           const data = [...gData];
           if (nodeData.canceled != '0') {
-            message.success(`${getLabel(547485, labelData)}`, 2);
+            message.success('恢复成功', 2);
             loop(data, nodeData.key, (item, index, arr) => {
               arr[index].canceled = '0';
             });
@@ -230,7 +219,7 @@ const DragTree = () => {
             loop(data, nodeData.key, (item, index, arr) => {
               arr.splice(index, 1);
             });
-            message.success(`${getLabel(547486, labelData)}`, 2);
+            message.success('封存成功', 2);
           }
           setGData(data);
         } else {
@@ -238,7 +227,7 @@ const DragTree = () => {
         }
       })
       .catch((error) => {
-        message.error(`${getLabel(547483, labelData)}`);
+        message.error('接口异常,请联系管理员');
       });
   };
 
@@ -271,14 +260,14 @@ const DragTree = () => {
       .then((res) => {
         if (res.code == 200) {
           getMoveTree(0, values.department);
-          message.success(`${getLabel(547487, labelData)}`, 2);
+          message.success('合并成功', 2);
         } else {
           message.warning(res.msg, 2);
         }
         setOpen(false);
       })
       .catch((error) => {
-        message.error(`${getLabel(547483, labelData)}`);
+        message.error('接口异常,请联系管理员');
       });
   };
 
@@ -312,13 +301,13 @@ const DragTree = () => {
         if (res.code == 200) {
           setCopyOpen(false);
           getMoveTree(0, values.company);
-          message.success(`${getLabel(547488, labelData)}`, 2);
+          message.success('复制成功', 2);
         } else {
           message.warning(res.msg, 2);
         }
       })
       .catch((error) => {
-        message.error(`${getLabel(547483, labelData)}`);
+        message.error('接口异常,请联系管理员');
       });
   };
 
@@ -344,7 +333,7 @@ const DragTree = () => {
                 {nodeData.title}
                 {nodeData.canceled == '1' ? (
                   <span style={{ color: 'red', marginLeft: '5px' }}>
-                    ({getLabel(547489, labelData)})
+                    (已封存)
                   </span>
                 ) : (
                   ''
@@ -363,28 +352,24 @@ const DragTree = () => {
                   );
                 }}
               >
-                {getLabel(547490, labelData)}
+                查看
               </span>
               <Popconfirm
-                title={`${getLabel(547491, labelData)}[${nodeData.title}]?`}
+                title={`确认要删除[${nodeData.title}] 吗?`}
                 onConfirm={() => onDelete(nodeData)}
-                okText={getLabel(547319, labelData)}
-                cancelText={getLabel(547318, labelData)}
+                okText="确认"
+                cancelText="取消"
               >
-                <span className="drag-button">
-                  {getLabel(547492, labelData)}
-                </span>
+                <span className="drag-button">删除</span>
               </Popconfirm>
               <Popconfirm
-                title={`${getLabel(547493, labelData)} [${nodeData.title}]?`}
+                title={`确认要封存或恢复 [${nodeData.title}] 吗?`}
                 onConfirm={() => onCancel(nodeData)}
-                okText={getLabel(547319, labelData)}
-                cancelText={getLabel(547318, labelData)}
+                okText="确认"
+                cancelText="取消"
               >
                 <span className="drag-button">
-                  {nodeData.canceled == '0'
-                    ? `${getLabel(547494, labelData)}`
-                    : `${getLabel(547495, labelData)}`}
+                  {nodeData.canceled == '0' ? '封存' : '恢复'}
                 </span>
               </Popconfirm>
               <span
@@ -392,14 +377,14 @@ const DragTree = () => {
                 className="drag-button"
                 onClick={() => onMerge(nodeData)}
               >
-                {getLabel(547194, labelData)}
+                合并
               </span>
               <span
                 style={{ display: attr }}
                 className="drag-button"
                 onClick={() => onCopy(nodeData)}
               >
-                {getLabel(547196, labelData)}
+                复制
               </span>
             </div>
           </>
@@ -413,84 +398,82 @@ const DragTree = () => {
   };
 
   return (
-    Object.keys(labelData).length != 0 && (
-      <div className="drag-wrapper">
-        <Spin tip={tip} spinning={loading}>
-          <div className="drag-layout">
-            <div className="drag-header">
-              <img src={inset} />
-              <div>{getLabel(547282, labelData)}</div>
-            </div>
-            <div className="drag-content">
-              <ApartmentOutlined
-                className="drag-showcanceled"
-                style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
-                onClick={() => {
-                  const value = showCanceled == 0 ? 1 : 0;
-                  setTip(`${getLabel(547473, labelData)}`);
-                  setShowCanceled(value);
-                  getMoveTree(value);
-                }}
-              />
-              <Tree
-                className="draggable-tree"
-                //defaultExpandedKeys={expandedKeys}
-                expandedKeys={expandedKeys}
-                onExpand={onExpand}
-                draggable
-                icon={false}
-                blockNode
-                onDragEnter={onDragEnter}
-                onDrop={onDrop}
-                treeData={gData}
-                titleRender={onTitleRender}
-              />
-            </div>
-            <Drawer
-              width="60%"
-              placement="right"
-              closable={false}
-              onClose={() => setDrawerOpen(false)}
-              open={drawerOpen}
-            >
-              <iframe src={iframe} width="100%" height="100%" />
-            </Drawer>
+    <div className="drag-wrapper">
+      <Spin tip={tip} spinning={loading}>
+        <div className="drag-layout">
+          <div className="drag-header">
+            <img src={inset} />
+            <div>组织快速调整</div>
+          </div>
+          <div className="drag-content">
+            <ApartmentOutlined
+              className="drag-showcanceled"
+              style={{ color: showCanceled == 0 ? '#000' : '#1890ff' }}
+              onClick={() => {
+                const value = showCanceled == 0 ? 1 : 0;
+                setTip('正在加载,请稍候...');
+                setShowCanceled(value);
+                getMoveTree(value);
+              }}
+            />
+            <Tree
+              className="draggable-tree"
+              //defaultExpandedKeys={expandedKeys}
+              expandedKeys={expandedKeys}
+              onExpand={onExpand}
+              draggable
+              icon={false}
+              blockNode
+              onDragEnter={onDragEnter}
+              onDrop={onDrop}
+              treeData={gData}
+              titleRender={onTitleRender}
+            />
+          </div>
+          <Drawer
+            width="60%"
+            placement="right"
+            closable={false}
+            onClose={() => setDrawerOpen(false)}
+            open={drawerOpen}
+          >
+            <iframe src={iframe} width="100%" height="100%" />
+          </Drawer>
 
-            <div className="drag-footer">
-              <p>
-                <QuestionCircleOutlined />
-                {getLabel(547283, labelData)}
-              </p>
-              <div className="tips">
-                <div>1.{getLabel(547284, labelData)}</div>
-                <div>2.{getLabel(547285, labelData)}</div>
-                <div>3.{getLabel(547286, labelData)}</div>
-                <div>4.{getLabel(547287, labelData)}</div>
+          <div className="drag-footer">
+            <p>
+              <QuestionCircleOutlined />
+              小提示
+            </p>
+            <div className="tips">
+              <div>1.鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移;</div>
+              <div>2.点击【查看】侧滑打开组织详细信息,可快速编辑;</div>
+              <div>
+                3.鼠标悬停树节点 一键开启【删除】【封存】【合并】【复制】等功能;
               </div>
+              <div>4.顶部小图标点击可显示已封存的组织架构。</div>
             </div>
           </div>
-        </Spin>
+        </div>
+      </Spin>
 
-        <MergeDialog
-          ref={childRef}
-          open={open}
-          onCreate={onMergeCreate}
-          onCancel={() => {
-            setOpen(false);
-          }}
-          labelData={labelData}
-        />
-        <CopyDialog
-          ref={copyChildRef}
-          open={copyopen}
-          onCreate={onCopyCreate}
-          onCancel={() => {
-            setCopyOpen(false);
-          }}
-          labelData={labelData}
-        />
-      </div>
-    )
+      <MergeDialog
+        ref={childRef}
+        open={open}
+        onCreate={onMergeCreate}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+      <CopyDialog
+        ref={copyChildRef}
+        open={copyopen}
+        onCreate={onCopyCreate}
+        onCancel={() => {
+          setCopyOpen(false);
+        }}
+      />
+    </div>
   );
 };
 export default DragTree;

src/pages/index.less

@@ -114,44 +114,6 @@
 }
 
 .ant-drawer-body {
-  padding: 0;
+  padding: 0px;
   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;
-}

src/pages/statisticsTable.jsx

@@ -10,82 +10,73 @@ import React, { useEffect, useState, useRef } from 'react';
 import * as d3 from 'd3';
 import qs from 'qs';
 import { Table } from 'antd';
-import { getLabel } from '../util/i18n.js';
 
 const StatisticsTable = () => {
   const [loading, setLoading] = useState(true);
   const [dataSource, setDataSource] = useState([]);
   const [columns, setColumns] = useState([]);
-  const [labelData, setLabelData] = useState({});
 
   useEffect(() => {
-    d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
-      setLabelData(res.data);
-      const columns = [
-        {
-          title: `${getLabel(547327, res.data)}`,
-          dataIndex: 'key',
-          key: 'key',
+    const columns = [
+      {
+        title: '序号',
+        dataIndex: 'key',
+        key: 'key',
+      },
+      {
+        title: '名称',
+        dataIndex: 'dataIdName',
+        key: 'dataIdName',
+      },
+      {
+        title: '上级',
+        dataIndex: 'superIdName',
+        key: 'superIdName',
+      },
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        render(value, row, index) {
+          if (value == 1) {
+            return '分部';
+          } else {
+            return '部门';
+          }
         },
-        {
-          title: `${getLabel(547517, res.data)}`,
-          dataIndex: 'dataIdName',
-          key: 'dataIdName',
-        },
-        {
-          title: `${getLabel(547518, res.data)}`,
-          dataIndex: 'superIdName',
-          key: 'superIdName',
-        },
-        {
-          title: `${getLabel(547519, res.data)}`,
-          dataIndex: 'type',
-          key: 'type',
-          render(value, row, index) {
-            if (value == 1) {
-              return `${getLabel(547332, res.data)}`;
-            } else {
-              return `${getLabel(547331, res.data)}`;
-            }
-          },
-        },
-        {
-          title: `${getLabel(547346, res.data)}`,
-          dataIndex: 'onJobNum',
-          key: 'onJobNum',
-        },
-        {
-          title: `${getLabel(547345, res.data)}`,
-          dataIndex: 'staffNum',
-          key: 'staffNum',
-        },
-        {
-          title: `${getLabel(547520, res.data)}`,
-          dataIndex: 'creator',
-          key: 'creator',
-        },
-        {
-          title: `${getLabel(547521, res.data)}`,
-          dataIndex: 'createTime',
-          key: 'createTime',
-        },
-        {
-          title: `${getLabel(547522, res.data)}`,
-          dataIndex: 'updateTime',
-          key: 'updateTime',
-        },
-      ];
-      setColumns(columns);
-      selectData();
-    });
-  }, []);
-
-  const selectData = () => {
+      },
+      {
+        title: '在编数',
+        dataIndex: 'onJobNum',
+        key: 'onJobNum',
+      },
+      {
+        title: '编制数',
+        dataIndex: 'staffNum',
+        key: 'staffNum',
+      },
+      {
+        title: '创建人',
+        dataIndex: 'creator',
+        key: 'creator',
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+      },
+    ];
+    setColumns(columns);
     d3.json(`/api/bs/hrmorganization/orgchart/selectStatistics`).then((res) => {
       setDataSource(res.data.result);
       setLoading(false);
     });
-  };
+  }, [true]);
 
   return (
     <>
@@ -95,11 +86,12 @@ const StatisticsTable = () => {
           columns={columns}
           loading={loading}
           pagination={{
-            showTotal: (total) =>
-              `${getLabel(547523, labelData)} ${dataSource.length} ${getLabel(
-                547524,
-                labelData,
-              )}`,
+            locale: {
+              items_per_page: '条/页',
+              jump_to: '跳至',
+              page: '页',
+            },
+            showTotal: (total) => `共 ${dataSource.length} 条`,
           }}
         />
         ;

src/pages/user.jsx

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

src/util/i18n.js

@@ -1,15 +1,64 @@
-let languageIdWeaver = document.cookie
-  .split('; ')
-  .find((row) => row.startsWith('languageidweaver='))
-  ?.split('=')[1];
-if (languageIdWeaver == undefined) {
-  languageIdWeaver = 7;
-}
+export const i18n = {
+  fclass: { cn: '维度', en: 'Organizational type' },
+  companyRoot: { cn: '分部根节点', en: 'Company' },
+  deptRoot: { cn: '部门根节点', en: 'Department' },
+  deptLevel: { cn: '部门层级', en: 'Hierarchy' },
+  search: { cn: '查询', en: 'Search' },
+  export: { cn: '导出', en: 'Export' },
+  exportImage: { cn: '导出图片', en: ' Export Image' },
+  exportTable: { cn: '导出表格', en: ' Export Table' },
+  hideDept: { cn: '隐藏部门', en: 'Hide Department' },
+  virtual: { cn: '显示虚拟组织', en: 'View Virtual Organization' },
+  detailInfo: { cn: '详细信息', en: 'Detailed Information' },
+  head: { cn: '负责人', en: 'Head' },
+  onJob: { cn: '在岗', en: 'HeadCount' },
+  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' },
+  placeholder: { cn: '请选择', en: 'Please Select' },
+  all: { cn: '全部', en: 'All' },
+  showJob: { cn: '是否显示岗位', en: 'Is Show Job' },
+  searchRemind: {
+    cn: '请选择部门根节点再进行查询!',
+    en: 'Please select the department root node to query again!',
+  },
+  httpRemind: { cn: '暂无数据!', en: 'No data available' },
+  noAuth: {
+    cn: '对不起，您暂时没有权限!',
+    en: 'Sorry, you do not have permission for the time being!',
+  },
 
-export const getLabel = (key, labelData) => {
-  if (labelData[key]) {
-    return labelData[key].labelName;
-  } else {
-    return languageIdWeaver == 7 ? '标签不存在' : 'Label does not exist';
-  }
+  tips: { cn: '提示', en: 'Tips' },
+  tipsContent: {
+    cn: '组织架构图中编制数和在编数显示初始化需参考文档配置定时任务并执行！！！(编制数默认取本年度最新编制信息,人数统计展示仅限于行政维度)',
+    en: 'The number of entries and the number of entries displayed in the organizational diagram Initialize the scheduled task and execute it. (The compilation number is the latest compilation information of this year by default, and the display of the number of people is limited to the administrative dimension)',
+  },
+  tipsDept: {
+    cn: '提示:开启后将只显示分部组织架构！！！',
+    en: 'Tip: Only the branch organization structure will be displayed after it is turned on!!!',
+  },
+  tipsVirtual: {
+    cn: '提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。',
+    en: 'Tip: If virtual organization is enabled, you need to add a field (name fblx) Field type drop-down box (0 entity 1 Virtual) to the department custom table as above (field name bmlx).',
+  },
+
+  /** 表头 */
+  table: {
+    no: { cn: '序号', en: 'No' },
+    workCode: { cn: '工号', en: 'WorkCode' },
+    lastName: { cn: '姓名', en: 'LastName' },
+    gender: { cn: '性别', en: 'Gender' },
+    department: { cn: '部门', en: 'Department' },
+    company: { cn: '分部', en: 'Company' },
+    possition: { cn: '岗位', en: 'Possition ' },
+    mobile: { cn: '手机号', en: 'Mobile Phone Number ' },
+
+    orgInfo: { cn: '组织信息', en: 'Organization Information' },
+    total: { cn: '共', en: 'in total' },
+    records: { cn: '条', en: 'records' },
+  },
 };