liang.cheng
/
org-chart-frant
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
大王椰组织调整工作流提醒
Chengliang 9 months ago
parent 449d872812 8a59de812a
commit dd8f38c9b8
11 changed files with 661 additions and 417 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

19
src/components/dialog/copyDialog.jsx
Unescape Escape View File

@ -10,13 +10,15 @@ import * as d3 from 'd3';
import './index.less';
import { HomeOutlined } from '@ant-design/icons';
import './index.less';
import { getLabel } from '../../util/i18n.js';
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 14 },
};
const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
const CopyDialog = forwardRef(
({ open, onCreate, onCancel, labelData }, ref) => {
const [treeData, setData] = useState([]);
const [form] = Form.useForm();
const formRef = useRef(null);
@ -60,9 +62,9 @@ const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
return (
<Modal
open={open}
title="部门复制"
okText="确认"
cancelText="取消"
title={getLabel(547505, labelData)}
okText={getLabel(547319, labelData)}
cancelText={getLabel(547318, labelData)}
onCancel={onCancel}
onOk={() => {
form
@ -78,11 +80,11 @@ const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
<Form ref={formRef} {...layout} form={form} name="form_in_modal">
<Form.Item
name="company"
label="复制到分部"
label={getLabel(547506, labelData)}
rules={[
{
required: true,
message: '【复制到分部】为必填项!',
message: `${getLabel(547507, labelData)}`,
},
]}
>
@ -101,12 +103,13 @@ const CopyDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
<Form.Item
name="copySubDept"
valuePropName="checked"
label="是否复制子部门信息"
label={getLabel(547262, labelData)}
>
<Checkbox />
</Form.Item>
</Form>
</Modal>
);
});
},
);
export default CopyDialog;

21
src/components/dialog/mergeDialog.jsx
Unescape Escape View File

@ -10,13 +10,15 @@ import * as d3 from 'd3';
import './index.less';
import { HomeOutlined, FolderOutlined } from '@ant-design/icons';
import './index.less';
import { getLabel } from '../../util/i18n.js';
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
const MergeDialog = forwardRef(
({ open, onCreate, onCancel, labelData }, ref) => {
const [treeData, setData] = useState([]);
const [form] = Form.useForm();
const formRef = useRef(null);
@ -66,9 +68,9 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
return (
<Modal
open={open}
title="部门合并"
okText="确认"
cancelText="取消"
title={getLabel(547508, labelData)}
okText={getLabel(547319, labelData)}
cancelText={getLabel(547318, labelData)}
onCancel={onCancel}
onOk={() => {
form
@ -84,11 +86,11 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
<Form ref={formRef} {...layout} form={form} name="form_in_modal">
<Form.Item
name="department"
label="合并到部门"
label={getLabel(547264, labelData)}
rules={[
{
required: true,
message: '【合并到部门】为必填项!',
message: `${getLabel(547509, labelData)}`,
},
]}
>
@ -106,11 +108,11 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
<Form.Item
name="mergeName"
label="合并后名称"
label={getLabel(547265, labelData)}
rules={[
{
required: true,
message: '【合并后的名称】为必填项!',
message: `${getLabel(547510, labelData)}`,
},
]}
>
@ -119,5 +121,6 @@ const MergeDialog = forwardRef(({ open, onCreate, onCancel }, ref) => {
</Form>
</Modal>
);
});
},
);
export default MergeDialog;

262
src/components/drawer/index.jsx
Unescape Escape View File

@ -8,6 +8,8 @@ import {
Table,
Spin,
Checkbox,
Row,
Col,
} from 'antd';
import { OrgChartComponent } from '@/components/orgChart';
import * as d3 from 'd3';
@ -16,6 +18,7 @@ import { message } from 'antd';
import jsPDF from 'jspdf';
import ExportJsonExcel from 'js-export-excel';
import './index.less';
import { getLabel } from '../../util/i18n.js';
let addNodeChildFunc = null;
let orgChart = null;
@ -31,14 +34,24 @@ export default class DrawerComponents extends React.Component {
dataSource: [],
columns: [],
spinning: true,
showJob: true,
showJob: false,
defaultTypeValue: ['isBelongTo'],
defaultStatusValue: [0, 1, 2, 3],
disabled: false,
};
}
componentDidMount() {}
// 点击节点
onNodeClick(node) {}
onNodeClick(node) {
if (node.ftype == '4') {
window.open(
`/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${node.id}`,
'_blank',
);
}
}
onButtonClick(event, d) {
if (d.children) {
@ -63,7 +76,7 @@ export default class DrawerComponents extends React.Component {
//获取数据
getDeatilDatas(params, type = 'chart', showJob = '1') {
this.setState({ spinning: true });
this.setState({ spinning: true, data: [], dataSource: [] });
d3.json(
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
qs.stringify({ detauleType: type, ...params, showJob }),
@ -72,7 +85,11 @@ export default class DrawerComponents extends React.Component {
if (type == 'chart') {
this.setState({ data: data.data, spinning: false });
} else {
this.setState({ dataSource: data.dataSource, columns: data.columns });
this.setState({
dataSource: data.dataSource,
columns: data.columns,
spinning: false,
});
}
});
}
@ -164,6 +181,7 @@ export default class DrawerComponents extends React.Component {
};
handleExport = (e) => {
const { labelData } = this.props;
let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel';
if (type == 'png') {
orgChart && orgChart.exportImg({ full: true });
@ -190,30 +208,30 @@ export default class DrawerComponents extends React.Component {
}
}
}
option.fileName = '组织信息';
option.fileName = `${getLabel(547468, labelData)}`;
option.datas = [
{
sheetData: dataTable,
sheetName: 'sheet',
sheetFilter: [
'序号',
'工号',
'姓名',
'性别',
'部门',
'分部',
'岗位',
'手机号',
`${getLabel(547327, labelData)}`,
`${getLabel(547328, labelData)}`,
`${getLabel(547329, labelData)}`,
`${getLabel(547330, labelData)}`,
`${getLabel(547331, labelData)}`,
`${getLabel(547332, labelData)}`,
`${getLabel(547333, labelData)}`,
`${getLabel(547334, labelData)}`,
],
sheetHeader: [
'序号',
'工号',
'姓名',
'性别',
'部门',
'分部',
'岗位',
'手机号',
`${getLabel(547327, labelData)}`,
`${getLabel(547328, labelData)}`,
`${getLabel(547329, labelData)}`,
`${getLabel(547330, labelData)}`,
`${getLabel(547331, labelData)}`,
`${getLabel(547332, labelData)}`,
`${getLabel(547333, labelData)}`,
`${getLabel(547334, labelData)}`,
],
},
];
@ -226,6 +244,8 @@ export default class DrawerComponents extends React.Component {
* 节点渲染
*/
nodeContentRender = (d, i, arr, state) => {
const { labelData } = this.props;
if (d.data.ftype == 2) {
return `<div style="position: relative;">
<div style=" height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2">
@ -242,12 +262,14 @@ export default class DrawerComponents extends React.Component {
<div class="dept-box" style="font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
${d.data.fname}
</div>
<div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;height: 25px;line-height: 25px;">
负责人:${d.data.fleader}
<div style="font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;line-height: 25px;">
${getLabel(547190, labelData)}:${d.data.fleader}
</div>
<div style="display:flex" >
<div style="height: 25px; line-height: 25px; min-width: 80px;">
在岗: ${d.data.fonjob} 人
${getLabel(547323, labelData)}: ${
d.data.fonjob
} ${getLabel(547525, labelData)}
</div>
</div>
</div>
@ -262,9 +284,13 @@ export default class DrawerComponents extends React.Component {
</div>
<img src="./img/user-card/jobicon-orange.png" style="margin-left: 20px; vertical-align: top;"/>
<div style="display: inline-block; margin-left: 15px;">
<div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${d.data.fname}</div>
<div style="font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;">${
d.data.fname
}</div>
<div style="font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
<span>在岗: ${d.data.fonjob} 人</span>
<span>${getLabel(547323, labelData)}: ${
d.data.fonjob
} ${getLabel(547525, labelData)}</span>
</div>
</div>
</div>
@ -283,15 +309,19 @@ export default class DrawerComponents extends React.Component {
: './img/default_avator.png'
}" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" />
</div>
<div style="display: inline-block; margin-left: 6px;width: 55%;height:100%">
<div style='display: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 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="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;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;">
<span>${getLabel(547324, labelData)}: ${
d.data.companyWorkYear
} ${getLabel(547526, labelData)}</span>
</div>
</div>
</div>
</div>`;
@ -299,23 +329,76 @@ export default class DrawerComponents extends React.Component {
};
showDrawer = (params) => {
const showJob = params.fclass == '0' ? '1' : '0';
this.getDeatilDatas(params, 'chart', showJob);
const { defaultStatusValue, defaultTypeValue } = this.state;
params = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
this.getDeatilDatas(params, 'chart', '0');
this.setState({ open: true, params: params });
};
onClose = () => {
this.setState({ open: false, detailType: 'chart', showJob: true });
this.setState({
open: false,
detailType: 'chart',
showJob: false,
defaultStatusValue: [0, 1, 2, 3],
defaultTypeValue: ['isBelongTo'],
disabled: false,
});
};
changeDetail = () => {
const { detailType, params } = this.state;
const { detailType, params, defaultTypeValue, defaultStatusValue } =
this.state;
const newParam = {
...params,
typeValue: defaultTypeValue.join(','),
statusValue: defaultStatusValue.join(','),
};
let type = detailType == 'chart' ? 'table' : 'chart';
const showJob = this.state.showJob ? '1' : '0';
this.setState({
detailType: type,
});
this.getDeatilDatas(params, type, showJob);
this.getDeatilDatas(newParam, type, showJob);
};
onStatusChange = (checkedValues) => {
if (checkedValues.length === 0) {
return message.error(`${getLabel(547728, labelData)}`, 2);
}
this.setState({
defaultStatusValue: checkedValues,
});
const { defaultTypeValue, params, detailType } = this.state;
const showJob = this.state.showJob ? '1' : '0';
const nParam = {
...params,
statusValue: checkedValues.join(','),
typeValue: defaultTypeValue.join(','),
};
this.getDeatilDatas(nParam, detailType, showJob);
};
onTypeChange = (checkedValues) => {
if (this.state.showJob) {
return message.error(`${getLabel(547729, labelData)}`, 2);
}
this.setState({
defaultTypeValue: checkedValues,
disabled: checkedValues.includes('isManager') ? true : false,
});
const { defaultStatusValue, params, detailType } = this.state;
const showJob = this.state.showJob ? '1' : '0';
const nParam = {
...params,
statusValue: defaultStatusValue.join(','),
typeValue: checkedValues.join(','),
};
this.getDeatilDatas(nParam, detailType, showJob);
};
render() {
@ -328,21 +411,43 @@ export default class DrawerComponents extends React.Component {
columns,
spinning,
showJob,
defaultStatusValue,
defaultTypeValue,
disabled,
} = this.state;
let arr = [];
const { labelData } = this.props;
const optionsType = [
{ label: `${getLabel(547715, labelData)}`, value: 'isManager' },
{ label: `${getLabel(547716, labelData)}`, value: 'isBelongTo' },
];
const optionsStatus = [
{ label: `${getLabel(547718, labelData)}`, value: 0 },
{ label: `${getLabel(547719, labelData)}`, value: 1 },
{ label: `${getLabel(547720, labelData)}`, value: 2 },
{ label: `${getLabel(547721, labelData)}`, value: 3 },
{ label: `${getLabel(547722, labelData)}`, value: 4 },
{ label: `${getLabel(547723, labelData)}`, value: 5 },
{ label: `${getLabel(547724, labelData)}`, value: 6 },
{ label: `${getLabel(547725, labelData)}`, value: 7 },
];
if (detailType == 'chart') {
arr.push({ label: '导出图片', key: '1' });
arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' });
//arr.push({ label: '导出PDF', key: '2' });
} else {
arr.push({ label: '导出表格', key: '3' });
arr.push({ label: `${getLabel(547448, labelData)}`, key: '3' });
}
const menu = <Menu onClick={this.handleExport.bind(this)} items={arr} />;
return (
<Drawer
title="详细信息"
width={1100}
title={getLabel(547321, labelData)}
width={1200}
onClose={this.onClose}
open={open}
bodyStyle={{
@ -354,35 +459,67 @@ export default class DrawerComponents extends React.Component {
<Checkbox
style={{ marginTop: '5px', marginLeft: 100 }}
checked={showJob}
disabled={disabled}
onChange={(e) => {
this.setState({
showJob: e.target.checked,
});
const newParam = {
...params,
statusValue: defaultStatusValue.join(','),
typeValue: defaultTypeValue.join(','),
};
this.getDeatilDatas(
params,
newParam,
detailType,
e.target.checked ? '1' : '0',
);
}}
>
是否显示岗位
{getLabel(547447, labelData)}
</Checkbox>
)}
<Dropdown overlay={menu}>
<Button type="primary">导出</Button>
<Button type="primary">{getLabel(547314, labelData)}</Button>
</Dropdown>
<img
style={{ width: 36, height: 36, cursor: 'pointer' }}
src="./img/change.png"
onClick={this.changeDetail}
/>
<Button type="primary" onClick={this.changeDetail}>
{getLabel(547326, labelData)}
</Button>
</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}
/>
</Col>
</Row>
{detailType == 'chart' ? (
data.length > 0 && (
<Spin size="large" spinning={spinning}>
<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)}
@ -394,26 +531,25 @@ export default class DrawerComponents extends React.Component {
nodeHeight={this.nodeHeightRender}
nodeContent={this.nodeContentRender}
/>
</Spin>
)
)}
</div>
) : (
<div style={{ padding: '0 20px' }}>
<Table
dataSource={dataSource}
columns={columns}
scroll={{ y: 500 }}
loading={spinning}
pagination={{
locale: {
// 翻页文本替换
items_per_page: '条/页',
jump_to: '跳至',
page: '页',
},
showTotal: (total) => `共 ${dataSource.length} 条`,
showSizeChanger: false,
showTotal: (total) =>
`${getLabel(547523, labelData)} ${
dataSource.length
} ${getLabel(547524, labelData)}`,
}}
/>
</div>
)}
</>
</Drawer>
);
}

8
src/components/drawer/index.less
Unescape Escape View File

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

79
src/components/topBar/index.jsx
Unescape Escape View File

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

66
src/pages/company.jsx
Unescape Escape View File

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

6
src/pages/dragTree.jsx
Unescape Escape View File

@ -31,8 +31,12 @@ const DragTree = () => {
const [mergeId, setMergeId] = useState(null);
const [copyopen, setCopyOpen] = useState(false);
const [copyId, setCopyId] = useState(null);
const [labelData, setLabelData] = useState({});
useEffect(() => {
d3.json('/api/bs/hrmorganization/orgchart/i18n').then((res) => {
setLabelData(res.data);
});
getMoveTree(0);
}, [true]);
@ -557,6 +561,7 @@ const DragTree = () => {
onCancel={() => {
setOpen(false);
}}
labelData={labelData}
/>
<CopyDialog
ref={copyChildRef}
@ -565,6 +570,7 @@ const DragTree = () => {
onCancel={() => {
setCopyOpen(false);
}}
labelData={labelData}
/>
</div>
);

40
src/pages/index.less
Unescape Escape View File

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

44
src/pages/statisticsTable.jsx
Unescape Escape View File

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

15
src/util/i18n.js
Unescape Escape View File

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