Compare commits

..

2 Commits

Binary file not shown.

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

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

@ -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: false, //
};
}
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) {
@ -75,8 +62,8 @@ export default class DrawerComponents extends React.Component {
}
//
getDeatilDatas(params, type = 'chart', showJob = '1') {
this.setState({ spinning: true, data: [], dataSource: [] });
getDeatilDatas(params, type = 'chart', showJob = '0') {
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 });
@ -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,18 @@ 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 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.jobName}</span>
</div>
</div>
</div>
</div>`;
@ -329,78 +302,24 @@ 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 = '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: false });
};
changeDetail = () => {
const { detailType, params, defaultTypeValue, defaultStatusValue } =
this.state;
const newParam = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
const { detailType, params } = this.state;
let type = detailType == 'chart' ? 'table' : 'chart';
const showJob = this.state.showJob ? '1' : '0';
const showJob = '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 +332,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={1100}
onClose={this.onClose}
open={open}
bodyStyle={{
@ -457,101 +354,51 @@ export default class DrawerComponents extends React.Component {
}}
extra={
<Space>
{detailType == 'chart' && params && params.fclass == '0' && (
<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,
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>
)
) : (
<div style={{ padding: '0 20px' }}>
<Table
dataSource={dataSource}
columns={columns}
scroll={{ y: 500 }}
pagination={{
locale: {
//
items_per_page: '条/页',
jump_to: '跳至',
page: '页',
},
showTotal: (total) => `${dataSource.length}`,
}}
/>
</div>
)}
</Drawer>
);
}

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

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

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

@ -15,17 +15,14 @@ import {
Modal,
Input,
message,
notification,
} from 'antd';
const { Option } = Select;
const { TextArea } = Input;
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
import { HomeOutlined } 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,7 +30,6 @@ export class TopBar extends React.Component {
this.state = {
fclasslist: [],
rootTreeData: [], //
treeLoadedKeys: [],
treeExpandedKeys: [],
requestData: {
fclass: '0',
@ -45,8 +41,6 @@ export class TopBar extends React.Component {
open: false,
confirmLoading: false,
description: '',
timelineId: '0',
treeKey: 1,
};
}
@ -59,39 +53,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 +
@ -105,9 +83,9 @@ export class TopBar extends React.Component {
open: false,
confirmLoading: false,
});
message.success(`${getLabel(547513, labelData)}`, 2, 3);
message.success('版本记录成功,请重新刷新页面', 2, 3);
} else {
message.error(`${getLabel(547514, labelData)}`, 2, 3);
message.error('版本记录失败,请联系相关人员处理数据', 2, 3);
}
});
};
@ -138,9 +116,6 @@ export class TopBar extends React.Component {
}
arr.map((item, index) => {
item.icon = <HomeOutlined />;
if (item.type == 2) {
item.icon = <FolderOutlined />;
}
});
this.setState({
rootTreeData: arr,
@ -156,17 +131,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);
@ -206,7 +178,7 @@ export class TopBar extends React.Component {
onClick={this.handleExportMenuClick.bind(this)}
items={[
{
label: `${getLabel(547315, this.props.labelData)}`,
label: '导出图片',
key: '1',
},
// {
@ -218,15 +190,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 }}
@ -240,9 +211,6 @@ export class TopBar extends React.Component {
hidedept: '0',
};
this.handleFormChange(requestData);
this.setState({
rootTreeData: [],
});
this.getNodeTreeNode(
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${value}`,
false,
@ -257,24 +225,22 @@ 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}>
<Col span={6}>
<Checkbox
style={{ marginTop: '5px', marginLeft: 100 }}
checked={this.state.requestData.hidedept == '1'}
@ -284,10 +250,10 @@ export class TopBar extends React.Component {
})
}
>
{getLabel(547296, labelData)}
隐藏部门
</Checkbox>
<Tooltip
title={getLabel(547303, labelData)}
title="提示:开启后将只显示分部组织架构!!!"
color="#0082fb"
placement="rightTop"
>
@ -296,18 +262,18 @@ export class TopBar extends React.Component {
/>
</Tooltip>
</Col>
<Col span={5}>
{getLabel(547299, labelData)}
<Col span={6}>
部门层级
<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>
<Option value="1">全部</Option>
<Option value="2">一级</Option>
<Option value="3">二级</Option>
<Option value="4">三级</Option>
</Select>
</Col>
</Row>
@ -322,10 +288,10 @@ export class TopBar extends React.Component {
})
}
>
{getLabel(547302, labelData)}
显示虚拟组织
</Checkbox>
<Tooltip
title={getLabel(547304, labelData)}
title="提示:若启用虚拟组织,需要在分部自定义表增加字段(名称 fblx) 字段类型 下拉框(0实体 1虚拟) 部门自定义表同上(字段名称 bmlx)。"
color="#0082fb"
placement="rightTop"
>
@ -334,40 +300,17 @@ export class TopBar extends React.Component {
/>
</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={16}>
{/* <Button
type="primary"
style={{ marginRight: '10px' }}
disabled={disabled}
onClick={() => {
this.setState({ open: true });
}}
>
版本记录
</Button> */}
<Button
type="primary"
@ -376,28 +319,47 @@ 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">{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"

@ -12,7 +12,6 @@ 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;
@ -33,13 +32,17 @@ export default function companyPage() {
const [timelineId, setTimelineId] = useState(0);
const infoRef = useRef();
const [labelData, setLabelData] = useState({});
const [lebelCompleted, setLabelCompleted] = useState(false);
useEffect(() => {
notification.open({
message: '提示',
description:
'组织架构图中编制数和在编数显示初始化需参考文档配置定时任务并执行!!!(编制数默认取本年度最新编制信息,人数统计展示仅限于行政维度)',
icon: <SmileOutlined style={{ color: '#108ee9' }} />,
});
}, []);
useEffect(() => {
infoRef.current = timelineId;
}, [timelineId]);
const [spinning, setSpinning] = useState(false);
//
@ -76,10 +79,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 +106,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&hidedept=0&root=0&level=2&id=0',
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
});
}, [true]);
// ButtonContent
const buttonContentRender = ({ node, state }) => {
@ -165,8 +152,8 @@ export default function companyPage() {
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>
<div style="display: inline-block; text-align: center; margin-left: 5px;">
<div style="
font-size: 24px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
@ -186,11 +173,10 @@ export default function companyPage() {
</div>
<div style="width: 144px;height: 80px;top: 35px;position: relative;font-weight: 400;font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;color: #333333;text-align: center;">
<div class="tooltip">
<div class="tooltitle"> ${d.data.fname} </div>
<div class="tooltiptext">${d.data.fname}</div>
</div>
<div title=${
d.data.fname
} style="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
<div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span>
@ -208,11 +194,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="width: 110px;margin: 0 auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
line-height: 18px;word-break: break-all;">${d.data.fname}</div>
<div style="display: ${statisticsStyle}">
<span style="color:red">${d.data.staffNum}</span> /
<span style="color:green">${d.data.onJobNum}</span>
@ -351,10 +334,6 @@ export default function companyPage() {
*/
const handleExport = (type) => {
if (type == 'png') {
const hiddenElements = document.querySelectorAll('.tooltitle');
const hiddenElementsArray = Array.from(hiddenElements);
// DOM
hiddenElementsArray.forEach((el) => (el.style.display = 'none'));
orgChart && orgChart.exportImg({ full: true });
} else {
orgChart && downloadPdf(orgChart);
@ -375,8 +354,6 @@ export default function companyPage() {
hidedept: '0',
};
topbar.handleFormChange({ ...resetParams });
//
topbar.handleTreeData([], timeline.id);
topbar.getNodeTreeNode(
`/api/bs/hrmorganization/orgchart/getSubCompanyTree?fclass=${fclass}&id=${timeline.id}`,
false,
@ -404,7 +381,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 +428,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)}
@ -473,7 +449,6 @@ 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)}
@ -496,7 +471,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 +485,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>
)

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

@ -114,44 +114,6 @@
}
.ant-drawer-body {
padding: 0;
padding: 0px;
overflow: hidden;
}
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
width: 110px;
margin: 0 auto;
line-height: 18px;
word-break: break-all;
}
.tooltip .tooltitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 144px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 39%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

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

@ -99,7 +99,7 @@ export default function userPage() {
//
useEffect(() => {
document.cookie =
'ecology_JSessionid=aaaLiDqzA0rZHgPBdxGez; JSESSIONID=aaaLiDqzA0rZHgPBdxGez; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=7b9b3b9b-a780-4d6a-b8d5-22d0f8aaf11a';
'ecology_JSessionid=aaaKQ6Pd2PaIc78Lw9yWy; JSESSIONID=aaaKQ6Pd2PaIc78Lw9yWy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=0418808b-1045-4624-bea6-5b308360da7b';
d3.json(
'/api/bs/hrmorganization/orgchart/userData?fclass=0&fisvitual=0&root=0&level=3&id=0',
).then((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…
Cancel
Save