Compare commits
No commits in common. "master" and "feature/drag" have entirely different histories.
master
...
feature/drag
|
|
@ -1,10 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="449daba1-1dd3-4ffd-906d-6ef641fb81de" name="Default Changelist" comment="">
|
||||
<change beforePath="$PROJECT_DIR$/src/d3-org-chart.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/d3-org-chart.js" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/pages/dragTree.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/dragTree.jsx" afterDir="false" />
|
||||
</list>
|
||||
<list default="true" id="449daba1-1dd3-4ffd-906d-6ef641fb81de" name="Default Changelist" comment="" />
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
|
@ -12,23 +9,13 @@
|
|||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<leaf>
|
||||
<file pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-146">
|
||||
<state>
|
||||
<folding>
|
||||
<element signature="e#0#49#0" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
|
|
@ -54,9 +41,9 @@
|
|||
</packageJsonPaths>
|
||||
</component>
|
||||
<component name="ProjectFrameBounds" fullScreen="true">
|
||||
<option name="x" value="1440" />
|
||||
<option name="width" value="1920" />
|
||||
<option name="height" value="1080" />
|
||||
<option name="y" value="28" />
|
||||
<option name="width" value="1440" />
|
||||
<option name="height" value="872" />
|
||||
</component>
|
||||
<component name="ProjectInspectionProfilesVisibleTreeState">
|
||||
<entry key="Project Default">
|
||||
|
|
@ -333,6 +320,9 @@
|
|||
<foldersAlwaysOnTop value="true" />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scope" />
|
||||
<pane id="PackagesPane" />
|
||||
<pane id="CatdeaLogs" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<expand>
|
||||
|
|
@ -345,32 +335,16 @@
|
|||
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="components" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="org-chart-frant" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="org-chart-frant" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="components" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="dialog" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
</expand>
|
||||
<select />
|
||||
</subPane>
|
||||
</pane>
|
||||
<pane id="PackagesPane" />
|
||||
<pane id="Scope" />
|
||||
<pane id="CatdeaLogs" />
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||
<property name="aspect.path.notification.shown" value="true" />
|
||||
<property name="com.android.tools.idea.instantapp.provision.ProvisionBeforeRunTaskProvider.myTimeStamp" value="1690446615685" />
|
||||
<property name="com.android.tools.idea.instantapp.provision.ProvisionBeforeRunTaskProvider.myTimeStamp" value="1689842769496" />
|
||||
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
|
||||
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
|
||||
<property name="project.structure.last.edited" value="Project" />
|
||||
|
|
@ -404,26 +378,30 @@
|
|||
<option name="presentableId" value="Default" />
|
||||
<updated>1689842546961</updated>
|
||||
<workItem from="1689842557088" duration="205000" />
|
||||
<workItem from="1690192167781" duration="39000" />
|
||||
<workItem from="1690341272941" duration="164000" />
|
||||
<workItem from="1690446551998" duration="218000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="626000" />
|
||||
<option name="totallyTimeSpent" value="205000" />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="1440" y="0" width="1920" height="1080" extended-state="0" />
|
||||
<frame x="0" y="28" width="1440" height="872" extended-state="0" />
|
||||
<layout>
|
||||
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.19382322" />
|
||||
<window_info id="JRebel" side_tool="true" />
|
||||
<window_info id="Image Layers" />
|
||||
<window_info id="UI Designer" />
|
||||
<window_info id="Favorites" side_tool="true" />
|
||||
<window_info id="Capture Tool" />
|
||||
<window_info id="Designer" />
|
||||
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.24964234" />
|
||||
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
|
||||
<window_info id="JRebel" order="2" side_tool="true" />
|
||||
<window_info id="Image Layers" order="3" />
|
||||
<window_info id="Capture Tool" order="4" />
|
||||
<window_info id="UI Designer" order="5" />
|
||||
<window_info id="Favorites" order="6" side_tool="true" />
|
||||
<window_info id="Designer" order="7" />
|
||||
<window_info anchor="bottom" id="Event Log" side_tool="true" />
|
||||
<window_info anchor="bottom" id="Terminal" />
|
||||
<window_info anchor="bottom" id="Messages" />
|
||||
<window_info anchor="bottom" id="Database Changes" show_stripe_button="false" />
|
||||
<window_info anchor="bottom" id="Version Control" />
|
||||
<window_info anchor="bottom" id="Docker" show_stripe_button="false" />
|
||||
<window_info anchor="bottom" id="JRebel Console" side_tool="true" />
|
||||
<window_info anchor="bottom" id="Message" order="0" />
|
||||
<window_info anchor="bottom" id="Find" order="1" />
|
||||
<window_info anchor="bottom" id="Run" order="2" />
|
||||
|
|
@ -431,66 +409,30 @@
|
|||
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
|
||||
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
|
||||
<window_info anchor="bottom" id="TODO" order="6" />
|
||||
<window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
|
||||
<window_info anchor="bottom" id="Terminal" order="8" />
|
||||
<window_info anchor="bottom" id="Docker" order="9" show_stripe_button="false" />
|
||||
<window_info anchor="bottom" id="Messages" order="10" />
|
||||
<window_info anchor="bottom" id="Database Changes" order="11" show_stripe_button="false" />
|
||||
<window_info active="true" anchor="bottom" id="Version Control" order="12" visible="true" weight="0.26039603" />
|
||||
<window_info anchor="bottom" id="JRebel Console" order="13" side_tool="true" />
|
||||
<window_info anchor="right" id="Palette" />
|
||||
<window_info anchor="right" id="Capture Analysis" />
|
||||
<window_info anchor="right" id="aiXcoder" />
|
||||
<window_info anchor="right" id="Maven Projects" />
|
||||
<window_info anchor="right" id="Database" />
|
||||
<window_info anchor="right" id="Palette	" />
|
||||
<window_info anchor="right" id="Theme Preview" />
|
||||
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
|
||||
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
|
||||
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
|
||||
<window_info anchor="right" id="Palette" order="3" />
|
||||
<window_info anchor="right" id="Capture Analysis" order="4" />
|
||||
<window_info anchor="right" id="Maven Projects" order="5" />
|
||||
<window_info anchor="right" id="aiXcoder" order="6" />
|
||||
<window_info anchor="right" id="Database" order="7" />
|
||||
<window_info anchor="right" id="Palette	" order="8" />
|
||||
<window_info anchor="right" id="Theme Preview" order="9" />
|
||||
</layout>
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
<component name="Vcs.Log.History.Properties">
|
||||
<option name="COLUMN_ORDER">
|
||||
<list>
|
||||
<option value="0" />
|
||||
<option value="2" />
|
||||
<option value="3" />
|
||||
<option value="1" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$PROJECT_DIR$/src/components/dialog/index.jsx">
|
||||
<entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state>
|
||||
<folding>
|
||||
<element signature="e#0#26#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/d3-org-chart.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-146">
|
||||
<folding>
|
||||
<element signature="e#0#49#0" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
<element signature="n#style#0;n#div#0;n#!!top" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
|
|
|
|||
14
.umirc.ts
14
.umirc.ts
|
|
@ -1,3 +1,11 @@
|
|||
/*
|
||||
* @Author: Chengliang 1546584672@qq.com
|
||||
* @Date: 2022-08-04 10:22:55
|
||||
* @LastEditors: Chengliang 1546584672@qq.com
|
||||
* @LastEditTime: 2023-07-24 09:57:14
|
||||
* @FilePath: /org-chart-frant/.umirc.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { defineConfig } from 'umi';
|
||||
|
||||
export default defineConfig({
|
||||
|
|
@ -12,16 +20,14 @@ export default defineConfig({
|
|||
routes: [
|
||||
{ path: '/user', component: '@/pages/user' },
|
||||
{ path: '/company', component: '@/pages/company' },
|
||||
{ path: '/dragtree', component: '@/pages/dragTree' },
|
||||
{ path: '/statistics', component: '@/pages/statisticsTable' },
|
||||
],
|
||||
fastRefresh: {},
|
||||
antd: {},
|
||||
proxy: {
|
||||
'/api': {
|
||||
// 标识需要进行转换的请求的url
|
||||
target: 'http://127.0.0.1:8686/api', // 服务端域名
|
||||
//target: 'http://221.226.25.34:11080/api',
|
||||
//target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
|
||||
target: 'http://221.226.25.34:11080/api',
|
||||
changeOrigin: true, // 允许域名进行转换
|
||||
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
|
||||
},
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -1,115 +0,0 @@
|
|||
import { Form, Input, Modal, TreeSelect, message, Checkbox } from 'antd';
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
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);
|
||||
|
||||
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);
|
||||
});
|
||||
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>
|
||||
|
||||
<Form.Item
|
||||
name="copySubDept"
|
||||
valuePropName="checked"
|
||||
label={getLabel(547262, labelData)}
|
||||
>
|
||||
<Checkbox />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default CopyDialog;
|
||||
|
|
@ -28,6 +28,29 @@ export default class OperateDialog extends React.Component {
|
|||
this.setState({ open: false });
|
||||
message.success('操作成功');
|
||||
}, 200);
|
||||
// if (description.length == 0) {
|
||||
// return message.error('请填写描述信息');
|
||||
// }
|
||||
// this.setState({ confirmLoading: true });
|
||||
// let api =
|
||||
// '/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
|
||||
// requestData.fclass +
|
||||
// '&description=' +
|
||||
// description;
|
||||
// fetch(api)
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// if (data.api_status) {
|
||||
// this.setState({
|
||||
// open: false,
|
||||
// confirmLoading: false,
|
||||
// description: '',
|
||||
// });
|
||||
// message.success('版本记录成功,请重新刷新页面', 2, 3);
|
||||
// } else {
|
||||
// message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.ant-select-tree
|
||||
.ant-select-tree-treenode-disabled
|
||||
.ant-select-tree-node-content-wrapper {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
import { Form, Input, Modal, TreeSelect, message } from 'antd';
|
||||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
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 [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);
|
||||
},
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
/**
|
||||
* 根节点树异步加载
|
||||
* @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);
|
||||
});
|
||||
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>
|
||||
|
||||
<Form.Item
|
||||
name="mergeName"
|
||||
label={getLabel(547265, labelData)}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `${getLabel(547510, labelData)}`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
);
|
||||
export default MergeDialog;
|
||||
|
|
@ -8,8 +8,6 @@ import {
|
|||
Table,
|
||||
Spin,
|
||||
Checkbox,
|
||||
Row,
|
||||
Col,
|
||||
} from 'antd';
|
||||
import { OrgChartComponent } from '@/components/orgChart';
|
||||
import * as d3 from 'd3';
|
||||
|
|
@ -18,7 +16,6 @@ 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;
|
||||
|
|
@ -34,24 +31,14 @@ export default class DrawerComponents extends React.Component {
|
|||
dataSource: [],
|
||||
columns: [],
|
||||
spinning: true,
|
||||
showJob: false,
|
||||
defaultTypeValue: ['isBelongTo'],
|
||||
defaultStatusValue: [0, 1, 2, 3],
|
||||
disabled: false,
|
||||
showJob: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
// 点击节点
|
||||
onNodeClick(node) {
|
||||
if (node.ftype == '4') {
|
||||
window.open(
|
||||
`/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${node.id}`,
|
||||
'_blank',
|
||||
);
|
||||
}
|
||||
}
|
||||
onNodeClick(node) {}
|
||||
|
||||
onButtonClick(event, d) {
|
||||
if (d.children) {
|
||||
|
|
@ -76,7 +63,7 @@ export default class DrawerComponents extends React.Component {
|
|||
|
||||
//获取数据
|
||||
getDeatilDatas(params, type = 'chart', showJob = '1') {
|
||||
this.setState({ spinning: true, data: [], dataSource: [] });
|
||||
this.setState({ spinning: true });
|
||||
d3.json(
|
||||
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
|
||||
qs.stringify({ detauleType: type, ...params, showJob }),
|
||||
|
|
@ -85,11 +72,7 @@ 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,
|
||||
spinning: false,
|
||||
});
|
||||
this.setState({ dataSource: data.dataSource, columns: data.columns });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -181,7 +164,6 @@ 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 });
|
||||
|
|
@ -199,8 +181,8 @@ export default class DrawerComponents extends React.Component {
|
|||
工号: dataSource[i].workCode,
|
||||
姓名: dataSource[i].lastName,
|
||||
性别: dataSource[i].sex,
|
||||
部门: dataSource[i].departmentName,
|
||||
分部: dataSource[i].subcompanyName,
|
||||
部门: dataSource[i].departmentId,
|
||||
分部: dataSource[i].subcompanyid1,
|
||||
岗位: dataSource[i].jobTitle,
|
||||
手机号: dataSource[i].mobile,
|
||||
};
|
||||
|
|
@ -208,30 +190,30 @@ export default class DrawerComponents extends React.Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
option.fileName = `${getLabel(547468, labelData)}`;
|
||||
option.fileName = '组织信息';
|
||||
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)}`,
|
||||
'序号',
|
||||
'工号',
|
||||
'姓名',
|
||||
'性别',
|
||||
'部门',
|
||||
'分部',
|
||||
'岗位',
|
||||
'手机号',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -244,8 +226,6 @@ 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">
|
||||
|
|
@ -262,14 +242,12 @@ 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;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;">
|
||||
负责人:${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)}
|
||||
在岗: ${d.data.fonjob} 人
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -284,13 +262,9 @@ 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>${getLabel(547323, labelData)}: ${
|
||||
d.data.fonjob
|
||||
} ${getLabel(547525, labelData)}</span>
|
||||
<span>在岗: ${d.data.fonjob} 人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -309,19 +283,15 @@ 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: 55%;height:100%">
|
||||
<div style='display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:15px'>
|
||||
<div style="font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;">${
|
||||
d.data.fname
|
||||
}</div>
|
||||
</div>
|
||||
<div style="font-size: 13px;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
|
||||
<span>${getLabel(547324, labelData)}: ${
|
||||
d.data.companyWorkYear
|
||||
} ${getLabel(547526, labelData)}</span>
|
||||
<div 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.companyWorkYear} 年</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
|
@ -329,78 +299,23 @@ 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 = () => {
|
||||
this.setState({
|
||||
open: false,
|
||||
detailType: 'chart',
|
||||
showJob: false,
|
||||
defaultStatusValue: [0, 1, 2, 3],
|
||||
defaultTypeValue: ['isBelongTo'],
|
||||
disabled: false,
|
||||
});
|
||||
this.setState({ open: false, detailType: 'chart', showJob: true });
|
||||
};
|
||||
|
||||
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';
|
||||
const showJob = params.fclass == '0' ? '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);
|
||||
}
|
||||
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);
|
||||
this.getDeatilDatas(params, type, showJob);
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -413,43 +328,21 @@ export default class DrawerComponents extends React.Component {
|
|||
columns,
|
||||
spinning,
|
||||
showJob,
|
||||
defaultStatusValue,
|
||||
defaultTypeValue,
|
||||
disabled,
|
||||
} = this.state;
|
||||
let arr = [];
|
||||
|
||||
const { labelData } = this.props;
|
||||
|
||||
const optionsType = [
|
||||
{ label: `${getLabel(547715, labelData)}`, value: 'isManager' },
|
||||
{ label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' },
|
||||
];
|
||||
|
||||
const optionsStatus = [
|
||||
{ label: `${getLabel(547718, labelData)}`, value: 0 },
|
||||
{ label: `${getLabel(547719, labelData)}`, value: 1 },
|
||||
{ label: `${getLabel(547720, labelData)}`, value: 2 },
|
||||
{ label: `${getLabel(547721, labelData)}`, value: 3 },
|
||||
{ label: `${getLabel(547722, labelData)}`, value: 4 },
|
||||
{ label: `${getLabel(547723, labelData)}`, value: 5 },
|
||||
{ label: `${getLabel(547724, labelData)}`, value: 6 },
|
||||
{ label: `${getLabel(547725, labelData)}`, value: 7 },
|
||||
];
|
||||
|
||||
if (detailType == 'chart') {
|
||||
arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
|
||||
arr.push({ label: '导出图片', key: '1' });
|
||||
//arr.push({ label: '导出PDF', key: '2' });
|
||||
} else {
|
||||
arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
|
||||
arr.push({ label: '导出表格', key: '3' });
|
||||
}
|
||||
|
||||
const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={getLabel(547321, labelData)}
|
||||
width={1200}
|
||||
title="详细信息"
|
||||
width={1000}
|
||||
onClose={this.onClose}
|
||||
open={open}
|
||||
bodyStyle={{
|
||||
|
|
@ -461,97 +354,51 @@ 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)}
|
||||
是否显示岗位
|
||||
</Checkbox>
|
||||
)}
|
||||
<Dropdown overlay={menu}>
|
||||
<Button type="primary">{getLabel(547314, labelData)}</Button>
|
||||
<Button type="primary">导出</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' ? (
|
||||
data.length > 0 && (
|
||||
<Spin size="large" spinning={spinning}>
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
</Spin>
|
||||
)
|
||||
) : (
|
||||
<Table dataSource={dataSource} columns={columns} />
|
||||
)}
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,3 @@
|
|||
width: 500px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loading-center {
|
||||
position: absolute;
|
||||
top: 50vh;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
|
|
@ -2,24 +2,19 @@
|
|||
* @Author: Chengliang 1546584672@qq.com
|
||||
* @Date: 2023-06-25 16:33:21
|
||||
* @LastEditors: Chengliang 1546584672@qq.com
|
||||
* @LastEditTime: 2023-09-14 17:48:39
|
||||
* @LastEditTime: 2023-06-29 14:24:04
|
||||
* @FilePath: /org-chart-frant/src/components/timeline/index.jsx
|
||||
* @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 } 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) {
|
||||
super(props);
|
||||
this.state = {
|
||||
timelineList: [],
|
||||
open: true,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -37,21 +32,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);
|
||||
}
|
||||
|
|
@ -66,79 +46,26 @@ export default class TimeLine extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
setOpen = () => {
|
||||
this.setState({
|
||||
open: !this.state.open,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { labelData } = this.props;
|
||||
|
||||
let showStyle = {};
|
||||
let positionStyle = {};
|
||||
if (this.state.open) {
|
||||
showStyle = {
|
||||
display: 'block',
|
||||
};
|
||||
positionStyle = {
|
||||
left: '219px',
|
||||
background: `url(${leftTreeShow}) no-repeat -2px 0`,
|
||||
};
|
||||
} else {
|
||||
showStyle = {
|
||||
display: 'none',
|
||||
};
|
||||
positionStyle = {
|
||||
left: '0',
|
||||
background: `url(${leftHide}) no-repeat -2px 0`,
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={styles.leftRightLayoutBtn}
|
||||
style={positionStyle}
|
||||
onClick={this.setOpen}
|
||||
></div>
|
||||
<div className={styles.lineWrapper} style={showStyle}>
|
||||
<Timeline>
|
||||
{this.state.timelineList.map((item) => {
|
||||
return (
|
||||
<Timeline.Item
|
||||
key={item.key}
|
||||
className={styles.timeline}
|
||||
color={item.color}
|
||||
>
|
||||
<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 className={styles.time}>{item.time}</div>
|
||||
</Timeline.Item>
|
||||
);
|
||||
})}
|
||||
</Timeline>
|
||||
</div>
|
||||
</>
|
||||
<div className={styles.lineWrapper}>
|
||||
<Timeline>
|
||||
{this.state.timelineList.map((item) => {
|
||||
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>{item.title}</div>
|
||||
<div className={styles.time}>{item.time}</div>
|
||||
</Timeline.Item>
|
||||
);
|
||||
})}
|
||||
</Timeline>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,32 +15,13 @@
|
|||
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;
|
||||
top: 50%;
|
||||
// margin-top: -30px;
|
||||
z-index: 101;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leftRightLayoutBtn :hover {
|
||||
background-image: url(./img/leftTree-show-hover.png) no-repeat -2px 0 !important;
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.lineWrapper::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -15,17 +15,13 @@ 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';
|
||||
moment.locale('zh-cn');
|
||||
import { getLabel } from '../../util/i18n.js';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
export class TopBar extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -33,20 +29,16 @@ export class TopBar extends React.Component {
|
|||
this.state = {
|
||||
fclasslist: [],
|
||||
rootTreeData: [], //根节点异步树
|
||||
treeLoadedKeys: [],
|
||||
treeExpandedKeys: [],
|
||||
requestData: {
|
||||
fclass: '0',
|
||||
root: undefined,
|
||||
level: '2',
|
||||
fisvitual: '0',
|
||||
hidedept: '0',
|
||||
},
|
||||
open: false,
|
||||
confirmLoading: false,
|
||||
description: '',
|
||||
timelineId: '0',
|
||||
treeKey: 1,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -59,39 +51,23 @@ 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 });
|
||||
// setTimeout(() => {
|
||||
// this.setState({ open: false, confirmLoading: false, description: '' });
|
||||
// message.success('版本记录成功,请重新刷新页面');
|
||||
// }, 2000);
|
||||
let api =
|
||||
'/api/bs/hrmorganization/orgchart/versionRecord?fclass=' +
|
||||
requestData.fclass +
|
||||
|
|
@ -104,10 +80,11 @@ export class TopBar extends React.Component {
|
|||
this.setState({
|
||||
open: false,
|
||||
confirmLoading: false,
|
||||
description: '',
|
||||
});
|
||||
message.success(`${getLabel(547513, labelData)}`, 2, 3);
|
||||
message.success('版本记录成功,请重新刷新页面', 2, 3);
|
||||
} else {
|
||||
message.error(`${getLabel(547514, labelData)}`, 2, 3);
|
||||
message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -136,12 +113,6 @@ export class TopBar extends React.Component {
|
|||
} else {
|
||||
arr = [...data.companyTree];
|
||||
}
|
||||
arr.map((item, index) => {
|
||||
item.icon = <HomeOutlined />;
|
||||
if (item.type == 2) {
|
||||
item.icon = <FolderOutlined />;
|
||||
}
|
||||
});
|
||||
this.setState({
|
||||
rootTreeData: arr,
|
||||
});
|
||||
|
|
@ -156,17 +127,14 @@ export class TopBar extends React.Component {
|
|||
*/
|
||||
onRootLoadData = (treeNode) =>
|
||||
new Promise((resolve) => {
|
||||
const { id } = treeNode;
|
||||
const { id } = treeNode.props;
|
||||
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);
|
||||
|
|
@ -191,9 +159,6 @@ export class TopBar extends React.Component {
|
|||
fetch(url)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
data.companyTree.map((item, index) => {
|
||||
item.icon = <HomeOutlined />;
|
||||
});
|
||||
this.setState({
|
||||
fclasslist: data.fclasslist,
|
||||
rootTreeData: data.companyTree,
|
||||
|
|
@ -206,7 +171,7 @@ export class TopBar extends React.Component {
|
|||
onClick={this.handleExportMenuClick.bind(this)}
|
||||
items={[
|
||||
{
|
||||
label: `${getLabel(547315, this.props.labelData)}`,
|
||||
label: '导出图片',
|
||||
key: '1',
|
||||
},
|
||||
// {
|
||||
|
|
@ -218,15 +183,14 @@ export class TopBar extends React.Component {
|
|||
);
|
||||
|
||||
render() {
|
||||
const { disabled, type, labelData } = this.props;
|
||||
const { rootTreeData, open, confirmLoading, treeExpandedKeys, treeKey } =
|
||||
this.state;
|
||||
const { disabled, type } = this.props;
|
||||
const { rootTreeData, open, confirmLoading } = this.state;
|
||||
|
||||
return (
|
||||
<div className={style.topbarWrapper}>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
{getLabel(547293, labelData)}：
|
||||
维度：
|
||||
<Select
|
||||
defaultValue="0"
|
||||
style={{ width: 140 }}
|
||||
|
|
@ -237,12 +201,8 @@ export class TopBar extends React.Component {
|
|||
root: undefined,
|
||||
level: '2',
|
||||
fisvitual: '0',
|
||||
hidedept: '0',
|
||||
};
|
||||
this.handleFormChange(requestData);
|
||||
this.setState({
|
||||
rootTreeData: [],
|
||||
});
|
||||
this.getNodeTreeNode(
|
||||
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
|
||||
false,
|
||||
|
|
@ -257,64 +217,23 @@ export class TopBar extends React.Component {
|
|||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
|
||||
<Col span={8}>
|
||||
{getLabel(547294, labelData)}：
|
||||
<Col span={6}>
|
||||
根节点：
|
||||
<TreeSelect
|
||||
key={treeKey}
|
||||
treeDataSimpleMode
|
||||
allowClear
|
||||
style={{ width: '65%' }}
|
||||
style={{ width: '75%' }}
|
||||
value={this.state.requestData.root}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder={getLabel(547298, labelData)}
|
||||
placeholder="请选择根节点"
|
||||
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)}：
|
||||
<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>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: '15px' }}>
|
||||
<Col span={6}>
|
||||
<Checkbox
|
||||
style={{ marginTop: '5px' }}
|
||||
style={{ marginTop: '5px', marginLeft: 100 }}
|
||||
checked={this.state.requestData.fisvitual == '1'}
|
||||
onChange={(e) =>
|
||||
this.handleFormChange({
|
||||
|
|
@ -322,52 +241,45 @@ export class TopBar extends React.Component {
|
|||
})
|
||||
}
|
||||
>
|
||||
{getLabel(547302, labelData)}
|
||||
显示虚拟组织
|
||||
</Checkbox>
|
||||
<Tooltip
|
||||
title={getLabel(547304, labelData)}
|
||||
color="#0082fb"
|
||||
title="提示:若启用虚拟组织，需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
|
||||
color="#FF7F00"
|
||||
placement="rightTop"
|
||||
>
|
||||
<QuestionCircleOutlined
|
||||
style={{ color: '#0082fb', cursor: 'pointer', fontSize: 16 }}
|
||||
style={{ color: '#FF7F00', cursor: 'pointer', fontSize: 16 }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</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>
|
||||
)}
|
||||
<Col span={6}>
|
||||
部门层级：
|
||||
<Select
|
||||
defaultValue="3"
|
||||
style={{ width: 140 }}
|
||||
value={this.state.requestData.level}
|
||||
onChange={(value) => this.handleFormChange({ level: value })}
|
||||
>
|
||||
<Option value="1">全部</Option>
|
||||
<Option value="2">一级</Option>
|
||||
<Option value="3">二级</Option>
|
||||
<Option value="4">三级</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: '15px' }}>
|
||||
<Col span={8}>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginRight: '10px' }}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
this.setState({ open: true });
|
||||
}}
|
||||
>
|
||||
版本记录
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
|
|
@ -376,28 +288,29 @@ export class TopBar extends React.Component {
|
|||
this.props.onSearch(this.state.requestData);
|
||||
}}
|
||||
>
|
||||
{getLabel(547307, labelData)}
|
||||
查询
|
||||
</Button>
|
||||
|
||||
<Dropdown overlay={this.menu}>
|
||||
<Button type="primary">{getLabel(547314, labelData)}</Button>
|
||||
<Button type="primary">导出</Button>
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
<Modal
|
||||
title={getLabel(547305, labelData)}
|
||||
cancelText={getLabel(547318, labelData)}
|
||||
okText={getLabel(547319, labelData)}
|
||||
title="版本记录"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
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>
|
||||
<p style={{ color: 'red' }}>
|
||||
提示:版本记录耗时较长，请谨慎操作（仅记录当前维度的数据版本）
|
||||
</p>
|
||||
<p>主题:</p>
|
||||
<TextArea
|
||||
showCount
|
||||
maxLength={20}
|
||||
maxLength={10}
|
||||
style={{ height: 120, resize: 'none' }}
|
||||
onChange={this.onChange}
|
||||
placeholder="please enter"
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ export class OrgChart {
|
|||
nodeLeftX: (node) => -node.width / 2,
|
||||
nodeRightX: (node) => node.width / 2,
|
||||
nodeTopY: (node) => 0,
|
||||
//nodeTopY: (node) => node.height / 0.3,
|
||||
// "nodeTopY": node => node.height/0.4,
|
||||
nodeBottomY: (node) => node.height,
|
||||
nodeJoinX: (node) => node.x - node.width / 2,
|
||||
nodeJoinY: (node) => node.y + node.height,
|
||||
|
|
@ -509,9 +509,7 @@ export class OrgChart {
|
|||
// Get zooming function
|
||||
behaviors.zoom = d3
|
||||
.zoom()
|
||||
.on('zoom', (event, d) => {
|
||||
this.zoomed(event, d);
|
||||
})
|
||||
.on('zoom', (event, d) => this.zoomed(event, d))
|
||||
.scaleExtent(attrs.scaleExtent);
|
||||
attrs.zoomBehavior = behaviors.zoom;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => {
|
||||
return <div>Hello</div>
|
||||
}
|
||||
|
|
@ -10,9 +10,7 @@ import OperateDialog from '../components/dialog';
|
|||
import jsPDF from 'jspdf';
|
||||
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 { message, Spin } from 'antd';
|
||||
|
||||
let active = 'top';
|
||||
let drawerCom = null;
|
||||
|
|
@ -33,13 +31,9 @@ export default function companyPage() {
|
|||
const [timelineId, setTimelineId] = useState(0);
|
||||
const infoRef = useRef();
|
||||
|
||||
const [labelData, setLabelData] = useState({});
|
||||
const [lebelCompleted, setLabelCompleted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
infoRef.current = timelineId;
|
||||
}, [timelineId]);
|
||||
|
||||
const [spinning, setSpinning] = useState(false);
|
||||
|
||||
// 点击节点
|
||||
|
|
@ -76,10 +70,9 @@ 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' +
|
||||
qs.stringify(request, { addQueryPrefix: true });
|
||||
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&fisvitual=0&id=0&root=0&ids=' +
|
||||
idsStr;
|
||||
}
|
||||
fetch(api)
|
||||
.then((res) => res.json())
|
||||
|
|
@ -104,30 +97,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' }} />,
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 获取数据
|
||||
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]);
|
||||
d3.json(
|
||||
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&fisvitual=0&root=0&level=2&id=0',
|
||||
).then((data) => {
|
||||
setData(data.data);
|
||||
setHasRight(data?.hasRight);
|
||||
});
|
||||
}, [true]);
|
||||
|
||||
// ButtonContent渲染
|
||||
const buttonContentRender = ({ node, state }) => {
|
||||
|
|
@ -141,9 +119,9 @@ export default function companyPage() {
|
|||
// 节点宽度渲染
|
||||
const nodeWidthRender = (d) => {
|
||||
if (d.data.ftype == 0) {
|
||||
return 220;
|
||||
return 1000;
|
||||
} else if (d.data.ftype == 1) {
|
||||
return 144;
|
||||
return 160;
|
||||
} else if (d.data.ftype == 2) {
|
||||
return 144;
|
||||
}
|
||||
|
|
@ -162,11 +140,12 @@ export default function companyPage() {
|
|||
};
|
||||
|
||||
const nodeContentRender = (d, i, arr, state) => {
|
||||
let fclass = topbar.state.requestData.fclass;
|
||||
let statisticsStyle = fclass == 0 ? 'block' : 'none';
|
||||
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; vertical-align: top;">
|
||||
<img src="./img/company.png" />
|
||||
</div>
|
||||
<div style="display: inline-block; text-align: center; margin-left: 5px;">
|
||||
<div style="
|
||||
font-size: 24px;
|
||||
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||||
|
|
@ -186,18 +165,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 class="tooltip">
|
||||
<div class="tooltitle"> ${d.data.fname} </div>
|
||||
<div class="tooltiptext">${d.data.fname}</div>
|
||||
</div>
|
||||
|
||||
<div style="display: ${statisticsStyle}">
|
||||
<span style="color:red">${d.data.staffNum}</span> /
|
||||
<span style="color:green">${d.data.onJobNum}</span>
|
||||
</div>
|
||||
</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>`;
|
||||
} else if (d.data.ftype == 2) {
|
||||
return `
|
||||
<div style="width: 100%; height: 100%; background-size: 100% 100%;">
|
||||
|
|
@ -208,15 +180,8 @@ 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 style="display: ${statisticsStyle}">
|
||||
<span style="color:red">${d.data.staffNum}</span> /
|
||||
<span style="color:green">${d.data.onJobNum}</span>
|
||||
</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>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -351,10 +316,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);
|
||||
|
|
@ -368,15 +329,8 @@ export default function companyPage() {
|
|||
const timeLineSearch = (timeline) => {
|
||||
setTimelineId(timeline.id);
|
||||
const fclass = topbar.state.requestData.fclass;
|
||||
const resetParams = {
|
||||
root: undefined,
|
||||
level: '2',
|
||||
fisvitual: '0',
|
||||
hidedept: '0',
|
||||
};
|
||||
const resetParams = { root: undefined, level: '2', fisvitual: '0' };
|
||||
topbar.handleFormChange({ ...resetParams });
|
||||
//根节点初始化
|
||||
topbar.handleTreeData([], timeline.id);
|
||||
topbar.getNodeTreeNode(
|
||||
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
|
||||
false,
|
||||
|
|
@ -404,7 +358,7 @@ export default function companyPage() {
|
|||
if (data.data) {
|
||||
if (!data.data.length) {
|
||||
setData([{}]);
|
||||
message.warning(`${getLabel(547516, labelData)}`);
|
||||
message.warning('暂无数据');
|
||||
} else {
|
||||
setData(data?.data);
|
||||
}
|
||||
|
|
@ -451,14 +405,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' }}>对不起，您暂时没有权限!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
hasRight &&
|
||||
Object.keys(labelData).length != 0 && (
|
||||
hasRight && (
|
||||
<div className={styles.contentWrapper}>
|
||||
<TopBar
|
||||
ref={(r) => (topbar = r)}
|
||||
|
|
@ -472,8 +425,7 @@ export default function companyPage() {
|
|||
handleChange(requestData);
|
||||
}}
|
||||
type="company"
|
||||
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company&id=0"
|
||||
labelData={labelData}
|
||||
url="/api/bs/hrmorganization/orgchart/getCondition?fclass=0&type=company"
|
||||
/>
|
||||
<ToolBar
|
||||
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
||||
|
|
@ -496,7 +448,6 @@ export default function companyPage() {
|
|||
timeLineSearch(timeline);
|
||||
}}
|
||||
url={'/api/bs/hrmorganization/orgchart/timeLines?fclass=0'}
|
||||
labelData={labelData}
|
||||
/>
|
||||
<Spin size="large" spinning={spinning}>
|
||||
<OrgChartComponent
|
||||
|
|
@ -511,12 +462,11 @@ export default function companyPage() {
|
|||
nodeContent={nodeContentRender}
|
||||
/>
|
||||
</Spin>
|
||||
<DrawerComponents ref={(r) => (drawerCom = r)} labelData={labelData} />
|
||||
<DrawerComponents ref={(r) => (drawerCom = r)} />
|
||||
<OperateDialog
|
||||
ref={(r) => (operateCom = r)}
|
||||
addFolderNode={addFolderNode}
|
||||
deleteNode={deleteNode}
|
||||
labelData={labelData}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,496 +0,0 @@
|
|||
import { Tree, message, Modal, Popconfirm, Spin, Layout, Drawer } from 'antd';
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import * as d3 from 'd3';
|
||||
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,
|
||||
FolderOutlined,
|
||||
ClusterOutlined,
|
||||
ApartmentOutlined,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
const { Header, Footer, Sider, Content } = Layout;
|
||||
import './index.less';
|
||||
|
||||
const DragTree = () => {
|
||||
const [gData, setGData] = useState([]);
|
||||
const [expandedKeys, setExpandedKeys] = useState([undefined]);
|
||||
const childRef = useRef(null);
|
||||
const copyChildRef = useRef(null);
|
||||
const [tip, setTip] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showCanceled, setShowCanceled] = useState(0);
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [iframe, setIframe] = useState('');
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
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]);
|
||||
|
||||
const getMoveTree = (showCanceled, expandedKeys = '') => {
|
||||
setLoading(true);
|
||||
d3.json(
|
||||
`/api/bs/hrmorganization/orgchart/getMovingTree?showCanceled=${showCanceled}&expandedKeys=${expandedKeys}`,
|
||||
).then((data) => {
|
||||
setGData(data.movingTree);
|
||||
setExpandedKeys(data.expandedKeys);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const onDragEnter = (info) => {
|
||||
//console.log(info);
|
||||
// expandedKeys 需要受控时设置
|
||||
// setExpandedKeys(info.expandedKeys)
|
||||
};
|
||||
|
||||
const loop = (data, key, callback) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].key === key) {
|
||||
return callback(data[i], i, data);
|
||||
}
|
||||
if (data[i].children) {
|
||||
loop(data[i].children, key, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onDrop = (info) => {
|
||||
const dropKey = info.node.key;
|
||||
const dragKey = info.dragNode.key;
|
||||
const dropPos = info.node.pos.split('-');
|
||||
const dropPosition =
|
||||
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
|
||||
if (dropPosition == -1) {
|
||||
return message.error(`${getLabel(547475, labelData)}`, 2);
|
||||
}
|
||||
let pos =
|
||||
dropPosition == 0
|
||||
? `${getLabel(547476, labelData)}`
|
||||
: `${getLabel(547477, labelData)}`;
|
||||
|
||||
let title = `${getLabel(547478, labelData)}【${
|
||||
info.dragNode.title
|
||||
} ${getLabel(547479, labelData)} 【${info.node.title}】${pos}`;
|
||||
Modal.confirm({
|
||||
title: `${getLabel(547480, labelData)}`,
|
||||
content: title,
|
||||
okText: `${getLabel(547319, labelData)}`,
|
||||
cancelText: `${getLabel(547318, labelData)}`,
|
||||
onOk() {
|
||||
setLoading(true);
|
||||
setTip(`${getLabel(547481, labelData)}`);
|
||||
|
||||
fetch('/api/bs/hrmorganization/dept/dragDepartment', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sourcekey: dragKey,
|
||||
targetkey: dropKey,
|
||||
dropPosition: dropPosition,
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
const data = [...gData];
|
||||
// Find dragObject
|
||||
let dragObj;
|
||||
loop(data, dragKey, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
});
|
||||
if (!info.dropToGap) {
|
||||
// Drop on the content
|
||||
loop(data, dropKey, (item) => {
|
||||
item.children = item.children || [];
|
||||
// where to insert 示例添加到头部，可以是随意位置
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else if (
|
||||
(info.node.props.children || []).length > 0 &&
|
||||
// Has children
|
||||
info.node.props.expanded &&
|
||||
// Is expanded
|
||||
dropPosition === 1 // On the bottom gap
|
||||
) {
|
||||
loop(data, dropKey, (item) => {
|
||||
item.children = item.children || [];
|
||||
// where to insert 示例添加到头部，可以是随意位置
|
||||
item.children.unshift(dragObj);
|
||||
// in previous version, we use item.children.push(dragObj) to insert the
|
||||
// item to the tail of the children
|
||||
});
|
||||
} else {
|
||||
let ar = [];
|
||||
let i;
|
||||
loop(data, dropKey, (_item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
if (dropPosition === -1) {
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
ar.splice(i + 1, 0, dragObj);
|
||||
}
|
||||
}
|
||||
setGData(data);
|
||||
message.success(`${getLabel(547482, labelData)}`, 2);
|
||||
} else {
|
||||
message.warning(res.msg, 2);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
message.error(`${getLabel(547483, labelData)}`);
|
||||
});
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除
|
||||
* @param {*} nodeData
|
||||
*/
|
||||
const onDelete = (nodeData) => {
|
||||
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
||||
fetch(`/api/bs/hrmorganization/${extend}/deleteByIds`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ ids: nodeData.id.substring(1) }),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
if (res.data.status == '1') {
|
||||
const data = [...gData];
|
||||
loop(data, nodeData.key, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
});
|
||||
setGData(data);
|
||||
message.success(`${getLabel(547484, labelData)}`, 2);
|
||||
} else {
|
||||
message.warning(res.data.message, 2);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
message.error(`${getLabel(547483, labelData)}`);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 封存
|
||||
* @param {*} nodeData
|
||||
*/
|
||||
const onCancel = (nodeData) => {
|
||||
setShowCanceled(0);
|
||||
const extend = nodeData.type == '1' ? 'comp' : 'dept';
|
||||
fetch(`/api/bs/hrmorganization/${extend}/updateForbiddenTagById`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: nodeData.id.substring(1),
|
||||
canceled: nodeData.canceled != '0',
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
const data = [...gData];
|
||||
if (nodeData.canceled != '0') {
|
||||
message.success(`${getLabel(547485, labelData)}`, 2);
|
||||
loop(data, nodeData.key, (item, index, arr) => {
|
||||
arr[index].canceled = '0';
|
||||
});
|
||||
} else {
|
||||
loop(data, nodeData.key, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
});
|
||||
message.success(`${getLabel(547486, labelData)}`, 2);
|
||||
}
|
||||
setGData(data);
|
||||
} else {
|
||||
message.warning(res.msg, 2);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
message.error(`${getLabel(547483, labelData)}`);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 合并
|
||||
* @param {*} nodeData
|
||||
*/
|
||||
const onMerge = (nodeData) => {
|
||||
if (childRef.current) {
|
||||
childRef.current.getTreeData();
|
||||
}
|
||||
setMergeId(nodeData.id);
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const onMergeCreate = (values) => {
|
||||
let params = {
|
||||
department: values.department.substring(1),
|
||||
mergeName: values.mergeName,
|
||||
id: mergeId.substring(1),
|
||||
};
|
||||
fetch('/api/bs/hrmorganization/dept/mergeDepartment', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(params),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
getMoveTree(0, values.department);
|
||||
message.success(`${getLabel(547487, labelData)}`, 2);
|
||||
} else {
|
||||
message.warning(res.msg, 2);
|
||||
}
|
||||
setOpen(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
message.error(`${getLabel(547483, labelData)}`);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 复制
|
||||
* @param {*} nodeData
|
||||
*/
|
||||
const onCopy = (nodeData) => {
|
||||
if (copyChildRef.current) {
|
||||
copyChildRef.current.getTreeData();
|
||||
}
|
||||
setCopyOpen(true);
|
||||
setCopyId(nodeData.id);
|
||||
};
|
||||
|
||||
const onCopyCreate = (values) => {
|
||||
let params = {
|
||||
company: values.company,
|
||||
copySubDept: values.copySubDept ? '1' : '0',
|
||||
ids: copyId.substring(1),
|
||||
};
|
||||
fetch(`/api/bs/hrmorganization/dept/copyDepartment`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(params),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
setCopyOpen(false);
|
||||
getMoveTree(0, values.company);
|
||||
message.success(`${getLabel(547488, labelData)}`, 2);
|
||||
} else {
|
||||
message.warning(res.msg, 2);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
message.error(`${getLabel(547483, labelData)}`);
|
||||
});
|
||||
};
|
||||
|
||||
const onTitleRender = (nodeData) => {
|
||||
let extend = nodeData.type == '1' ? 'companyExtend' : 'departmentExtend';
|
||||
let attr =
|
||||
nodeData.type == '1' || nodeData.canceled == '1'
|
||||
? 'none'
|
||||
: 'inline-block';
|
||||
let icon = nodeData.type == '1' ? <HomeOutlined /> : <FolderOutlined />;
|
||||
return (
|
||||
<>
|
||||
{nodeData.type == 0 ? (
|
||||
<span>
|
||||
<ClusterOutlined />
|
||||
<span style={{ marginLeft: '5px' }}>{nodeData.title}</span>
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span>
|
||||
{icon}
|
||||
<span style={{ marginLeft: '5px' }}>
|
||||
{nodeData.title}
|
||||
{nodeData.canceled == '1' ? (
|
||||
<span style={{ color: 'red', marginLeft: '5px' }}>
|
||||
({getLabel(547489, labelData)})
|
||||
</span>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<div id="drag-button-ops">
|
||||
<span
|
||||
className="drag-button"
|
||||
onClick={() => {
|
||||
setDrawerOpen(true);
|
||||
setIframe(
|
||||
`/spa/organization/static/index.html#/main/organization/${extend}/${nodeData.id.substring(
|
||||
1,
|
||||
)}`,
|
||||
);
|
||||
}}
|
||||
>
|
||||
{getLabel(547490, labelData)}
|
||||
</span>
|
||||
<Popconfirm
|
||||
title={`${getLabel(547491, labelData)}[${nodeData.title}]?`}
|
||||
onConfirm={() => onDelete(nodeData)}
|
||||
okText={getLabel(547319, labelData)}
|
||||
cancelText={getLabel(547318, labelData)}
|
||||
>
|
||||
<span className="drag-button">
|
||||
{getLabel(547492, labelData)}
|
||||
</span>
|
||||
</Popconfirm>
|
||||
<Popconfirm
|
||||
title={`${getLabel(547493, labelData)} [${nodeData.title}]?`}
|
||||
onConfirm={() => onCancel(nodeData)}
|
||||
okText={getLabel(547319, labelData)}
|
||||
cancelText={getLabel(547318, labelData)}
|
||||
>
|
||||
<span className="drag-button">
|
||||
{nodeData.canceled == '0'
|
||||
? `${getLabel(547494, labelData)}`
|
||||
: `${getLabel(547495, labelData)}`}
|
||||
</span>
|
||||
</Popconfirm>
|
||||
<span
|
||||
style={{ display: attr }}
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const onExpand = (info) => {
|
||||
setExpandedKeys(info);
|
||||
};
|
||||
|
||||
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-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>
|
||||
</div>
|
||||
</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>
|
||||
)
|
||||
);
|
||||
};
|
||||
export default DragTree;
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: rgb(121, 242, 157);
|
||||
}
|
||||
|
|
@ -13,145 +9,3 @@
|
|||
.contentWrapper {
|
||||
background-color: #f7f9fd;
|
||||
}
|
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper:hover {
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.ant-tree .ant-tree-node-content-wrapper:hover #drag-button-ops {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
#drag-button-ops {
|
||||
display: none;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-left: 100px;
|
||||
|
||||
.drag-button {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drag-button:hover {
|
||||
color: #22c8fb;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-wrapper {
|
||||
min-height: inherit;
|
||||
background-image: url('../../public/img/back/background.png') !important;
|
||||
}
|
||||
|
||||
.drag-layout {
|
||||
min-height: inherit;
|
||||
padding: 25px;
|
||||
|
||||
.drag-header {
|
||||
text-align: center;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-content {
|
||||
width: auto;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(218, 237, 255, 1);
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
|
||||
.drag-showcanceled {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-footer {
|
||||
margin-top: 15px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid rgba(218, 237, 255, 1);
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
|
||||
p {
|
||||
span {
|
||||
color: #178eff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color: #596378;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #596378;
|
||||
line-height: 21px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tree {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
/*
|
||||
* @Author: Chengliang 1546584672@qq.com
|
||||
* @Date: 2023-09-11 15:33:27
|
||||
* @LastEditors: Chengliang 1546584672@qq.com
|
||||
* @LastEditTime: 2023-09-15 11:39:05
|
||||
* @FilePath: /org-chart-frant/src/pages/statisticsTable.jsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
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',
|
||||
},
|
||||
{
|
||||
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 = () => {
|
||||
d3.json(`/api/bs/hrmorganization/orgchart/selectStatistics`).then((res) => {
|
||||
setDataSource(res.data.result);
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ padding: '50px' }}>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
showTotal: (total) =>
|
||||
`${getLabel(547523, labelData)} ${dataSource.length} ${getLabel(
|
||||
547524,
|
||||
labelData,
|
||||
)}`,
|
||||
}}
|
||||
/>
|
||||
;
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default StatisticsTable;
|
||||
|
|
@ -99,8 +99,9 @@ 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=aaauntrtgZdkuanT5w2Ly; JSESSIONID=aaauntrtgZdkuanT5w2Ly; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=c5235342-7633-4eec-a754-b36eefdf8c9e';
|
||||
d3.json(
|
||||
// "/user/data"
|
||||
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
|
||||
).then((data) => {
|
||||
setData(data.data);
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
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';
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue