除二开文件外 合并到20240719版本

src/components/dialog/copyDialog.jsx

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

src/components/dialog/mergeDialog.jsx

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

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';
@@ -16,6 +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';
 
 let addNodeChildFunc = null;
 let orgChart = null;
@@ -31,14 +34,24 @@ export default class DrawerComponents extends React.Component {
       dataSource: [],
       columns: [],
       spinning: true,
-      showJob: true,
+      showJob: false,
+      defaultTypeValue: ['isBelongTo'],
+      defaultStatusValue: [0, 1, 2, 3],
+      disabled: false,
     };
   }
 
   componentDidMount() {}
 
   // 点击节点
-  onNodeClick(node) {}
+  onNodeClick(node) {
+    if (node.ftype == '4') {
+      window.open(
+        `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${node.id}`,
+        '_blank',
+      );
+    }
+  }
 
   onButtonClick(event, d) {
     if (d.children) {
@@ -63,7 +76,7 @@ export default class DrawerComponents extends React.Component {
 
   //获取数据
   getDeatilDatas(params, type = 'chart', showJob = '1') {
-    this.setState({ spinning: true });
+    this.setState({ spinning: true, data: [], dataSource: [] });
     d3.json(
       '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
         qs.stringify({ detauleType: type, ...params, showJob }),
@@ -72,7 +85,11 @@ export default class DrawerComponents extends React.Component {
       if (type == 'chart') {
         this.setState({ data: data.data, spinning: false });
       } else {
-        this.setState({ dataSource: data.dataSource, columns: data.columns });
+        this.setState({
+          dataSource: data.dataSource,
+          columns: data.columns,
+          spinning: false,
+        });
       }
     });
   }
@@ -164,6 +181,7 @@ export default class DrawerComponents extends React.Component {
   };
 
   handleExport = (e) => {
+    const { labelData } = this.props;
     let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel';
     if (type == 'png') {
       orgChart && orgChart.exportImg({ full: true });
@@ -190,30 +208,30 @@ export default class DrawerComponents extends React.Component {
           }
         }
       }
-      option.fileName = '组织信息';
+      option.fileName = `${getLabel(547468, labelData)}`;
       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)}`,
           ],
         },
       ];
@@ -226,6 +244,8 @@ export default class DrawerComponents extends React.Component {
    * 节点渲染
    */
   nodeContentRender = (d, i, arr, state) => {
+    const { labelData } = this.props;
+
     if (d.data.ftype == 2) {
       return `<div style="position: relative;">
                 <div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
@@ -242,12 +262,14 @@ 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;">
-                            负责人:${d.data.fleader}
+                          ${getLabel(547190, labelData)}:${d.data.fleader}
                         </div>
                         <div style="display:flex" >
                             <div style="height: 25px; line-height: 25px; min-width: 80px;">
-                                在岗: ${d.data.fonjob} 人
+                              ${getLabel(547323, labelData)}: ${
+        d.data.fonjob
+      } ${getLabel(547525, labelData)}
                             </div>
                         </div>
                     </div>
@@ -262,9 +284,13 @@ export default class DrawerComponents extends React.Component {
                     </div>
                     <img src="./img/user-card/jobicon-orange.png" style="margin-left: 20px; vertical-align: top;"/>
                     <div style="display: inline-block; margin-left: 15px;">
-                        <div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${d.data.fname}</div>
+                        <div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${
+                          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>在岗: ${d.data.fonjob} 人</span>
+                            <span>${getLabel(547323, labelData)}: ${
+        d.data.fonjob
+      } ${getLabel(547525, labelData)}</span>
                         </div>
                     </div>
                 </div>
@@ -283,15 +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:15px'>
+                    <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;">${
+                        <div style="font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">
-                          d.data.fname
+                        ${d.data.fname}
-                        }</div>
+                        <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>司龄: ${d.data.companyWorkYear} 年</span>
+                        <span>${getLabel(547324, labelData)}: ${
+        d.data.companyWorkYear
+      } ${getLabel(547526, labelData)}</span>
                     </div>
+
                 </div>
                 </div>
              </div>`;
@@ -299,23 +329,76 @@ export default class DrawerComponents extends React.Component {
   };
 
   showDrawer = (params) => {
-    const showJob = params.fclass == '0' ? '1' : '0';
+    const { defaultStatusValue, defaultTypeValue } = this.state;
-    this.getDeatilDatas(params, 'chart', showJob);
+    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: true });
+    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() {
@@ -328,21 +411,43 @@ 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: '导出图片', key: '1' });
+      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} />;
 
     return (
       <Drawer
-        title="详细信息"
+        title={getLabel(547321, labelData)}
-        width={1100}
+        width={1200}
         onClose={this.onClose}
         open={open}
         bodyStyle={{
@@ -354,66 +459,97 @@ 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',
                   );
                 }}
               >
-                是否显示岗位
+                {getLabel(547447, labelData)}
               </Checkbox>
             )}
             <Dropdown overlay={menu}>
-              <Button type="primary">导出</Button>
+              <Button type="primary">{getLabel(547314, labelData)}</Button>
             </Dropdown>
-            <img
+            <Button type="primary" onClick={this.changeDetail}>
-              style={{ width: 36, height: 36, cursor: 'pointer' }}
+              {getLabel(547326, labelData)}
-              src="./img/change.png"
+            </Button>
-              onClick={this.changeDetail}
-            />
           </Space>
         }
       >
-        {detailType == 'chart' ? (
+        <>
-          data.length > 0 && (
+          {detailType == 'chart' && (
-            <Spin size="large" spinning={spinning}>
+            <Row style={{ margin: '20px 20px 0px 20px' }}>
-              <OrgChartComponent
+              <Col span={2}>{getLabel(547714, labelData)}：</Col>
-                setChart={(chart) => (orgChart = chart)}
+              <Col span={22}>
-                setClick={(click) => (addNodeChildFunc = click)}
+                <Checkbox.Group
-                onNodeClick={this.onNodeClick}
+                  options={optionsType}
-                onButtonClick={this.onButtonClick}
+                  value={defaultTypeValue}
-                data={data}
+                  onChange={this.onTypeChange}
-                buttonContent={this.buttonContentRender}
+                />
-                nodeWidth={this.nodeWidthRender}
+              </Col>
-                nodeHeight={this.nodeHeightRender}
+            </Row>
-                nodeContent={this.nodeContentRender}
+          )}
+          <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}
+              />
+            </Col>
+          </Row>
+          {detailType == 'chart' ? (
+            <div className="svg-container">
+              <Spin
+                size="large"
+                spinning={spinning}
+                tip={getLabel(547320, labelData)}
+                className="loading-center"
               />
-            </Spin>
+              {data.length > 0 && (
-          )
+                <OrgChartComponent
-        ) : (
+                  setChart={(chart) => (orgChart = chart)}
-          <div style={{ padding: '0 20px' }}>
+                  setClick={(click) => (addNodeChildFunc = click)}
-            <Table
+                  onNodeClick={this.onNodeClick}
-              dataSource={dataSource}
+                  onButtonClick={this.onButtonClick}
-              columns={columns}
+                  data={data}
-              scroll={{ y: 500 }}
+                  buttonContent={this.buttonContentRender}
-              pagination={{
+                  nodeWidth={this.nodeWidthRender}
-                locale: {
+                  nodeHeight={this.nodeHeightRender}
-                  // 翻页文本替换
+                  nodeContent={this.nodeContentRender}
-                  items_per_page: '条/页',
+                />
-                  jump_to: '跳至',
+              )}
-                  page: '页',
+            </div>
-                },
+          ) : (
-                showTotal: (total) => `共 ${dataSource.length} 条`,
+            <div style={{ padding: '0 20px' }}>
-              }}
+              <Table
-            />
+                dataSource={dataSource}
-          </div>
+                columns={columns}
-        )}
+                loading={spinning}
+                pagination={{
+                  showSizeChanger: false,
+                  showTotal: (total) =>
+                    `${getLabel(547523, labelData)} ${
+                      dataSource.length
+                    } ${getLabel(547524, labelData)}`,
+                }}
+              />
+            </div>
+          )}
+        </>
       </Drawer>
     );
   }

src/components/drawer/index.less

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

src/components/topBar/index.jsx

@@ -15,6 +15,7 @@ import {
   Modal,
   Input,
   message,
+  notification,
 } from 'antd';
 const { Option } = Select;
 const { TextArea } = Input;
@@ -23,6 +24,8 @@ import 'moment/locale/zh-cn';
 import locale from 'antd/lib/date-picker/locale/zh_CN';
 import { HomeOutlined } from '@ant-design/icons';
 moment.locale('zh-cn');
+import { getLabel } from '../../util/i18n.js';
+import { SmileOutlined } from '@ant-design/icons';
 
 export class TopBar extends React.Component {
   constructor(props) {
@@ -63,8 +66,9 @@ export class TopBar extends React.Component {
    */
   handleOk = () => {
     const { description, requestData } = this.state;
+    const { labelData } = this.props;
     if (description.length == 0) {
-      return message.error('请填写描述信息');
+      return message.error(`${getLabel(547512, labelData)}`);
     }
     this.setState({ confirmLoading: true });
     let api =
@@ -80,9 +84,9 @@ export class TopBar extends React.Component {
             open: false,
             confirmLoading: false,
           });
-          message.success('版本记录成功,请重新刷新页面', 2, 3);
+          message.success(`${getLabel(547513, labelData)}`, 2, 3);
         } else {
-          message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
+          message.error(`${getLabel(547514, labelData)}`, 2, 3);
         }
       });
   };
@@ -175,7 +179,7 @@ export class TopBar extends React.Component {
       onClick={this.handleExportMenuClick.bind(this)}
       items={[
         {
-          label: '导出图片',
+          label: `${getLabel(547315, this.props.labelData)}`,
           key: '1',
         },
         // {
@@ -187,14 +191,14 @@ export class TopBar extends React.Component {
   );
 
   render() {
-    const { disabled, type } = this.props;
+    const { disabled, type, labelData } = this.props;
     const { rootTreeData, open, confirmLoading, treeExpandedKeys } = this.state;
 
     return (
       <div className={style.topbarWrapper}>
         <Row>
           <Col span={6}>
-            维度：
+            {getLabel(547293, labelData)}：
             <Select
               defaultValue="0"
               style={{ width: 140 }}
@@ -226,14 +230,14 @@ export class TopBar extends React.Component {
             </Select>
           </Col>
           <Col span={6}>
-            根节点：
+            {getLabel(547294, labelData)}：
             <TreeSelect
               treeDataSimpleMode
               allowClear
-              style={{ width: '75%' }}
+              style={{ width: '65%' }}
               value={this.state.requestData.root}
               dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-              placeholder="请选择根节点"
+              placeholder={getLabel(547298, labelData)}
               onChange={this.onRootChange}
               loadData={this.onRootLoadData}
               treeData={rootTreeData}
@@ -250,10 +254,10 @@ export class TopBar extends React.Component {
                 })
               }
             >
-              隐藏部门
+              {getLabel(547296, labelData)}
             </Checkbox>
             <Tooltip
-              title="提示:开启后将只显示分部组织架构！！！"
+              title={getLabel(547303, labelData)}
               color="#0082fb"
               placement="rightTop"
             >
@@ -263,17 +267,17 @@ export class TopBar extends React.Component {
             </Tooltip>
           </Col>
           <Col span={6}>
-            部门层级：
+            {getLabel(547299, labelData)}：
             <Select
               defaultValue="3"
               style={{ width: 140 }}
               value={this.state.requestData.level}
               onChange={(value) => this.handleFormChange({ level: value })}
             >
-              <Option value="1">全部</Option>
+              <Option value="1">{getLabel(547301, labelData)}</Option>
-              <Option value="2">一级</Option>
+              <Option value="2">{getLabel(547463, labelData)}</Option>
-              <Option value="3">二级</Option>
+              <Option value="3">{getLabel(547464, labelData)}</Option>
-              <Option value="4">三级</Option>
+              <Option value="4">{getLabel(547465, labelData)}</Option>
             </Select>
           </Col>
         </Row>
@@ -288,10 +292,10 @@ export class TopBar extends React.Component {
                 })
               }
             >
-              显示虚拟组织
+              {getLabel(547302, labelData)}
             </Checkbox>
             <Tooltip
-              title="提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
+              title={getLabel(547304, labelData)}
               color="#0082fb"
               placement="rightTop"
             >
@@ -301,16 +305,38 @@ export class TopBar extends React.Component {
             </Tooltip>
           </Col>
           <Col span={16}>
-            <Button
+            {this.state.requestData.fclass == '0' && (
-              type="primary"
+              <span>
-              style={{ marginRight: '10px' }}
+                <Button
-              disabled={disabled}
+                  type="primary"
-              onClick={() => {
+                  style={{ marginRight: '10px' }}
-                this.setState({ open: true });
+                  disabled={disabled}
-              }}
+                  onClick={() => {
-            >
+                    this.setState({ open: true });
-              版本记录
+                  }}
-            </Button>
+                >
+                  {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"
@@ -319,47 +345,28 @@ export class TopBar extends React.Component {
                 this.props.onSearch(this.state.requestData);
               }}
             >
-              查询
+              {getLabel(547307, labelData)}
-            </Button>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              onClick={() => {
-                window.open('#/dragtree', 'blank');
-              }}
-            >
-              组织调整
-            </Button>
-            <Button
-              type="primary"
-              style={{ marginRight: '10px' }}
-              onClick={() => {
-                window.open('#/statistics', 'blank');
-              }}
-            >
-              人数统计
             </Button>
+
             <Dropdown overlay={this.menu}>
-              <Button type="primary">导出</Button>
+              <Button type="primary">{getLabel(547314, labelData)}</Button>
             </Dropdown>
           </Col>
         </Row>
         <Modal
-          title="版本记录"
+          title={getLabel(547305, labelData)}
-          cancelText="取消"
+          cancelText={getLabel(547318, labelData)}
-          okText="确定"
+          okText={getLabel(547319, labelData)}
           open={open}
           onOk={this.handleOk}
           confirmLoading={confirmLoading}
           onCancel={() => this.setState({ open: false })}
         >
-          <p style={{ color: 'red' }}>
+          <p style={{ color: 'red' }}>{getLabel(547316, labelData)}</p>
-            提示:版本记录耗时较长，请谨慎操作（仅记录当前维度的数据版本）
+          <p>{getLabel(547317, labelData)}:</p>
-          </p>
-          <p>主题:</p>
           <TextArea
             showCount
-            maxLength={10}
+            maxLength={20}
             style={{ height: 120, resize: 'none' }}
             onChange={this.onChange}
             placeholder="please enter"

src/pages/company.jsx

@@ -12,6 +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';
 
 let active = 'top';
 let drawerCom = null;
@@ -32,17 +33,13 @@ export default function companyPage() {
   const [timelineId, setTimelineId] = useState(0);
   const infoRef = useRef();
 
-  useEffect(() => {
+  const [labelData, setLabelData] = useState({});
-    notification.open({
+  const [lebelCompleted, setLabelCompleted] = useState(false);
-      message: '提示',
+
-      description:
-        '组织架构图中编制数和在编数显示初始化需参考文档配置定时任务并执行！！！(编制数默认取本年度最新编制信息,人数统计展示仅限于行政维度)',
-      icon: <SmileOutlined style={{ color: '#108ee9' }} />,
-    });
-  }, []);
   useEffect(() => {
     infoRef.current = timelineId;
   }, [timelineId]);
+
   const [spinning, setSpinning] = useState(false);
 
   // 点击节点
@@ -79,9 +76,10 @@ export default function companyPage() {
           '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
           qs.stringify(request, { addQueryPrefix: true });
       } else {
+        let request = { ...topbar.state.requestData, ids: idsStr };
         api =
-          '/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
+          '/api/bs/hrmorganization/orgchart/asyncCompanyData' +
-          idsStr;
+          qs.stringify(request, { addQueryPrefix: true });
       }
       fetch(api)
         .then((res) => res.json())
@@ -106,15 +104,30 @@ export default function companyPage() {
     return fisvitual == '0' ? `./img/back/level1.png` : `./img/back/level5.png`;
   }
 
-  // 获取数据
+  // 多语言获取
   useEffect(() => {
-    d3.json(
+    d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
-      '/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&hidedept=0&root=0&level=2&id=0',
+      setLabelData(res.data);
-    ).then((data) => {
+      setLabelCompleted(true);
-      setData(data.data);
+      notification.open({
-      setHasRight(data?.hasRight);
+        message: `${getLabel(547283, res.data)}`,
+        description: `${getLabel(547292, res.data)}`,
+        icon: <SmileOutlined style={{ color: '#108ee9' }} />,
+      });
     });
-  }, [true]);
+  }, []);
+
+  // 获取数据
+  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]);
 
   // ButtonContent渲染
   const buttonContentRender = ({ node, state }) => {
@@ -152,8 +165,8 @@ export default function companyPage() {
     let fclass = topbar.state.requestData.fclass;
     let statisticsStyle = fclass == 0 ? 'block' : 'none';
     if (d.data.ftype == 0) {
-      return `<div>
+      return `<div style="text-align: center;">
-          <div style="display: inline-block; text-align: center; margin-left: 5px;">
+          <div style="display: inline-block;  margin-left: 5px;">
             <div style="
               font-size: 24px;
               font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@@ -173,10 +186,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=${
+             <div class="tooltip">
-              d.data.fname
+                <div class="tooltitle"> ${d.data.fname} </div>
-            } style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
+                <div class="tooltiptext">${d.data.fname}</div>
-            line-height: 18px;word-break: break-all;">${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>
@@ -194,8 +208,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;
+            <div class="tooltip">
-            line-height: 18px;word-break: break-all;">${d.data.fname}</div>
+                <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>
@@ -381,7 +398,7 @@ export default function companyPage() {
         if (data.data) {
           if (!data.data.length) {
             setData([{}]);
-            message.warning('暂无数据');
+            message.warning(`${getLabel(547516, labelData)}`);
           } else {
             setData(data?.data);
           }
@@ -428,13 +445,14 @@ export default function companyPage() {
           style={{ display: 'block', margin: '0 auto' }}
           src="./img/permission.png"
         />
-        <p style={{ textAlign: 'center' }}>对不起，您暂时没有权限!</p>
+        <p style={{ textAlign: 'center' }}>{getLabel(547515, labelData)}</p>
       </div>
     );
   }
 
   return (
-    hasRight && (
+    hasRight &&
+    Object.keys(labelData).length != 0 && (
       <div className={styles.contentWrapper}>
         <TopBar
           ref={(r) => (topbar = r)}
@@ -449,6 +467,7 @@ export default function companyPage() {
           }}
           type="company"
           url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company&id=0"
+          labelData={labelData}
         />
         <ToolBar
           onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
@@ -485,11 +504,12 @@ export default function companyPage() {
             nodeContent={nodeContentRender}
           />
         </Spin>
-        <DrawerComponents ref={(r) => (drawerCom = r)} />
+        <DrawerComponents ref={(r) => (drawerCom = r)} labelData={labelData} />
         <OperateDialog
           ref={(r) => (operateCom = r)}
           addFolderNode={addFolderNode}
           deleteNode={deleteNode}
+          labelData={labelData}
         />
       </div>
     )

src/pages/dragTree.jsx

@@ -31,8 +31,12 @@ 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);
+    });
     getMoveTree(0);
   }, [true]);
 
@@ -557,6 +561,7 @@ const DragTree = () => {
         onCancel={() => {
           setOpen(false);
         }}
+        labelData={labelData}
       />
       <CopyDialog
         ref={copyChildRef}
@@ -565,6 +570,7 @@ const DragTree = () => {
         onCancel={() => {
           setCopyOpen(false);
         }}
+        labelData={labelData}
       />
     </div>
   );

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;
+}

src/pages/statisticsTable.jsx

@@ -10,73 +10,82 @@ 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(() => {
-    const columns = [
+    d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
-      {
+      setLabelData(res.data);
-        title: '序号',
+      const columns = [
-        dataIndex: 'key',
+        {
-        key: 'key',
+          title: `${getLabel(547327, res.data)}`,
-      },
+          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)}`,
-        title: '在编数',
+          dataIndex: 'dataIdName',
-        dataIndex: 'onJobNum',
+          key: 'dataIdName',
-        key: 'onJobNum',
+        },
-      },
+        {
-      {
+          title: `${getLabel(547518, res.data)}`,
-        title: '编制数',
+          dataIndex: 'superIdName',
-        dataIndex: 'staffNum',
+          key: 'superIdName',
-        key: 'staffNum',
+        },
-      },
+        {
-      {
+          title: `${getLabel(547519, res.data)}`,
-        title: '创建人',
+          dataIndex: 'type',
-        dataIndex: 'creator',
+          key: 'type',
-        key: 'creator',
+          render(value, row, index) {
-      },
+            if (value == 1) {
-      {
+              return `${getLabel(547332, res.data)}`;
-        title: '创建时间',
+            } else {
-        dataIndex: 'createTime',
+              return `${getLabel(547331, res.data)}`;
-        key: 'createTime',
+            }
-      },
+          },
-      {
+        },
-        title: '更新时间',
+        {
-        dataIndex: 'updateTime',
+          title: `${getLabel(547346, res.data)}`,
-        key: 'updateTime',
+          dataIndex: 'onJobNum',
-      },
+          key: 'onJobNum',
-    ];
+        },
-    setColumns(columns);
+        {
+          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 = () => {
     d3.json(`/api/bs/hrmorganization/orgchart/selectStatistics`).then((res) => {
       setDataSource(res.data.result);
       setLoading(false);
     });
-  }, [true]);
+  };
 
   return (
     <>
@@ -86,12 +95,11 @@ const StatisticsTable = () => {
           columns={columns}
           loading={loading}
           pagination={{
-            locale: {
+            showTotal: (total) =>
-              items_per_page: '条/页',
+              `${getLabel(547523, labelData)} ${dataSource.length} ${getLabel(
-              jump_to: '跳至',
+                547524,
-              page: '页',
+                labelData,
-            },
+              )}`,
-            showTotal: (total) => `共 ${dataSource.length} 条`,
           }}
         />
         ;

src/util/i18n.js

@@ -0,0 +1,15 @@
+let languageIdWeaver = document.cookie
+  .split('; ')
+  .find((row) => row.startsWith('languageidweaver='))
+  ?.split('=')[1];
+if (languageIdWeaver == undefined) {
+  languageIdWeaver = 7;
+}
+
+export const getLabel = (key, labelData) => {
+  if (labelData[key]) {
+    return labelData[key].labelName;
+  } else {
+    return languageIdWeaver == 7 ? '标签不存在' : 'Label does not exist';
+  }
+};