亚信安全组织架构图改造
This commit is contained in:
parent
ecf2c1399b
commit
be056f701f
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Chengliang 1546584672@qq.com
|
||||
* @Date: 2022-08-04 10:22:55
|
||||
* @LastEditors: Chengliang 1546584672@qq.com
|
||||
* @LastEditTime: 2022-12-15 11:50:19
|
||||
* @LastEditTime: 2023-05-23 15:18:17
|
||||
* @FilePath: /org-chart-frant/.umirc.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
|
@ -11,7 +11,7 @@ import { defineConfig } from 'umi';
|
|||
export default defineConfig({
|
||||
hash: true,
|
||||
history: { type: 'hash' },
|
||||
base: '/spa/orgChart/',
|
||||
base: '/spa/aischart/',
|
||||
// exportStatic: {},
|
||||
publicPath: './',
|
||||
nodeModulesTransform: {
|
||||
|
|
@ -26,7 +26,7 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
// 标识需要进行转换的请求的url
|
||||
target: 'http://hr.jinyosolar.cn:90/api', // 服务端域名 / http://localhost:8686
|
||||
target: 'http://127.0.0.1:8686/api', // 服务端域名 / http://localhost:8686
|
||||
changeOrigin: true, // 允许域名进行转换
|
||||
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {
|
|||
DatePicker,
|
||||
Select,
|
||||
Button,
|
||||
Checkbox,
|
||||
Row,
|
||||
Col,
|
||||
Dropdown,
|
||||
|
|
@ -21,21 +20,13 @@ export class TopBar extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
fclasslist: [],
|
||||
companylist: [], //下拉框跟节点
|
||||
deptartmentTreeData: [], //部门异步树
|
||||
treeExpandedKeys: [],
|
||||
companyData: [],
|
||||
departmentData: [],
|
||||
companyTreeData: [],
|
||||
deptartmentTreeData: [],
|
||||
levelOptions: [], //层级数据，hrm中层级字段
|
||||
requestData: {
|
||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
fclass: '0',
|
||||
root: '0',
|
||||
level: '3',
|
||||
fisvitual: '0',
|
||||
company: undefined,
|
||||
department: undefined,
|
||||
date: moment(new Date()).format('YYYY-MM-DD'), //日期
|
||||
department: [],
|
||||
level: '2', //显示层级
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -44,69 +35,54 @@ export class TopBar extends React.Component {
|
|||
let requestData = { ...this.state.requestData, ...payload };
|
||||
this.setState({ requestData });
|
||||
}
|
||||
//日期可选择未来
|
||||
// disabledDate (current) {
|
||||
// // return current && current >moment().subtract(1, "days");
|
||||
// return current && current > moment().endOf("day");
|
||||
// }
|
||||
|
||||
handleExportMenuClick(e) {
|
||||
this.props.onExport(e.key == '1' ? 'png' : 'pdf');
|
||||
}
|
||||
|
||||
handleExportButtonClick() {
|
||||
this.props.onExport('png');
|
||||
}
|
||||
|
||||
/**
|
||||
* 分部
|
||||
* @param {*} parentId
|
||||
*/
|
||||
getCompanyTreeNode = (parentId) => {
|
||||
let api =
|
||||
'/api/bs/hrmorganization/jclorgchart/getCompanyTree?company=' + parentId;
|
||||
fetch(api)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
let arr = [...this.state.companyTreeData, ...data.data];
|
||||
this.setState({
|
||||
companyTreeData: arr,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 部门
|
||||
* 部门树数据
|
||||
* @param {} parentId
|
||||
* @returns
|
||||
*/
|
||||
getDepartmentTreeNode = (parentId) => {
|
||||
let api =
|
||||
'/api/bs/hrmorganization/jclorgchart/getDepartmentTree?department=' +
|
||||
parentId;
|
||||
fetch(api)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
let arr = [...this.state.deptartmentTreeData, ...data.data];
|
||||
this.setState({
|
||||
deptartmentTreeData: arr,
|
||||
});
|
||||
}
|
||||
});
|
||||
// let api =
|
||||
// '/api/bs/hrmorganization/jclorgchart/getDepartmentTree?department=' +
|
||||
// parentId;
|
||||
// fetch(api)
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// if (data.code == 200) {
|
||||
// let arr = [...this.state.deptartmentTreeData, ...data.data];
|
||||
// this.setState({
|
||||
// deptartmentTreeData: arr,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
let treeData = [];
|
||||
if (parentId === null) {
|
||||
treeData = [
|
||||
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
|
||||
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
|
||||
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
|
||||
];
|
||||
} else {
|
||||
treeData = [
|
||||
{ id: 6, pId: 1, value: '3', title: 'Tree Node', isLeaf: true },
|
||||
];
|
||||
}
|
||||
|
||||
let arr = [...this.state.deptartmentTreeData, ...treeData];
|
||||
this.setState({
|
||||
deptartmentTreeData: arr,
|
||||
});
|
||||
};
|
||||
|
||||
onCompanyLoadData = (treeNode) =>
|
||||
new Promise((resolve) => {
|
||||
const { id } = treeNode.props;
|
||||
setTimeout(() => {
|
||||
this.getCompanyTreeNode(id);
|
||||
resolve();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
/**
|
||||
* 部门树异步加载
|
||||
* @param {} parentId
|
||||
* @returns
|
||||
*/
|
||||
onDepartmentLoadData = (treeNode) =>
|
||||
new Promise((resolve) => {
|
||||
const { id } = treeNode.props;
|
||||
|
|
@ -116,55 +92,12 @@ export class TopBar extends React.Component {
|
|||
}, 300);
|
||||
});
|
||||
|
||||
onCompanyChange = (value, label, extra) => {
|
||||
let company = value.length > 0 ? this.paramsUtil(value) : undefined;
|
||||
let requestData = {
|
||||
...this.state.requestData,
|
||||
company: company,
|
||||
department: undefined,
|
||||
};
|
||||
this.setState({
|
||||
companyData: value,
|
||||
requestData,
|
||||
departmentData: [],
|
||||
deptartmentTreeData: [],
|
||||
treeExpandedKeys: [],
|
||||
});
|
||||
this.getDepartmentTreeList(company);
|
||||
};
|
||||
|
||||
onDepartmentChange = (value) => {
|
||||
let department = value.length > 0 ? this.paramsUtil(value) : undefined;
|
||||
let requestData = { ...this.state.requestData, department: department };
|
||||
this.setState({ departmentData: value, requestData });
|
||||
};
|
||||
|
||||
getCompanyTreeList = () => {
|
||||
let api = '/api/bs/hrmorganization/jclorgchart/getCompanyTree';
|
||||
fetch(api)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
this.setState({
|
||||
companyTreeData: data.data,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getDepartmentTreeList = (company) => {
|
||||
let api = `/api/bs/hrmorganization/jclorgchart/getDepartmentTree?company=${company}`;
|
||||
fetch(api)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
this.setState({
|
||||
deptartmentTreeData: data.data,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
paramsUtil = (param) => {
|
||||
let arr = param.map(function (obj, index) {
|
||||
return obj.value;
|
||||
|
|
@ -179,17 +112,32 @@ export class TopBar extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount() {
|
||||
fetch(this.props.url)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
this.setState({
|
||||
fclasslist: data.fclasslist,
|
||||
companylist: data.companylist,
|
||||
});
|
||||
});
|
||||
this.getCompanyTreeList();
|
||||
// fetch(this.props.url)
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// this.setState({
|
||||
// levelOptions: data.levelOptions
|
||||
// });
|
||||
// });
|
||||
|
||||
const options = [
|
||||
{ value: '1', label: '一级' },
|
||||
{ value: '2', label: '二级' },
|
||||
{ value: '3', label: '三级' },
|
||||
];
|
||||
const treeData = [
|
||||
{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
|
||||
{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
|
||||
{ id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
|
||||
];
|
||||
this.setState({
|
||||
levelOptions: options,
|
||||
});
|
||||
this.getDepartmentTreeNode(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出多选 */
|
||||
menu = (
|
||||
<Menu
|
||||
onClick={this.handleExportMenuClick.bind(this)}
|
||||
|
|
@ -207,16 +155,14 @@ export class TopBar extends React.Component {
|
|||
);
|
||||
|
||||
render() {
|
||||
const { companyTreeData, deptartmentTreeData, treeExpandedKeys } =
|
||||
this.state;
|
||||
|
||||
const { deptartmentTreeData, treeExpandedKeys } = this.state;
|
||||
return (
|
||||
<div className={style.topbarWrapper}>
|
||||
<Row>
|
||||
<Col span={6}>
|
||||
数据日期：
|
||||
日期追溯：
|
||||
<DatePicker
|
||||
placeholder="请选择日期"
|
||||
placeholder="日期选择"
|
||||
style={{ width: 130 }}
|
||||
locale={locale}
|
||||
allowClear={false}
|
||||
|
|
@ -234,40 +180,6 @@ export class TopBar extends React.Component {
|
|||
}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col span={6}>
|
||||
维度：
|
||||
<Select
|
||||
defaultValue="0"
|
||||
style={{ width: 120 }}
|
||||
value={this.state.requestData.fclass}
|
||||
onChange={(value) => this.handleFormChange({ fclass: value })}
|
||||
>
|
||||
{this.state.fclasslist.map((item) => (
|
||||
<Option value={item.id}>{item.companyname}</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
|
||||
<Col span={6}>
|
||||
分部：
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear
|
||||
treeDataSimpleMode
|
||||
treeCheckable
|
||||
treeCheckStrictly
|
||||
showCheckedStrategy={TreeSelect.SHOW_ALL}
|
||||
style={{ width: '80%' }}
|
||||
value={this.state.companyData}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="请选择分部节点"
|
||||
onChange={this.onCompanyChange}
|
||||
loadData={this.onCompanyLoadData}
|
||||
treeData={companyTreeData}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col span={6}>
|
||||
部门：
|
||||
<TreeSelect
|
||||
|
|
@ -279,42 +191,23 @@ export class TopBar extends React.Component {
|
|||
treeExpandedKeys={treeExpandedKeys}
|
||||
treeCheckStrictly
|
||||
style={{ width: '80%' }}
|
||||
value={this.state.departmentData}
|
||||
value={this.state.requestData.department}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="请选择部门节点"
|
||||
placeholder="部门选择"
|
||||
onChange={this.onDepartmentChange}
|
||||
loadData={this.onDepartmentLoadData}
|
||||
treeData={deptartmentTreeData}
|
||||
onTreeExpand={this.onTreeExpand}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: '15px' }}>
|
||||
<Col span={6}>
|
||||
显示层级：
|
||||
<Select
|
||||
defaultValue="3"
|
||||
style={{ width: 120 }}
|
||||
style={{ width: 130 }}
|
||||
value={this.state.requestData.level}
|
||||
onChange={(value) => this.handleFormChange({ level: value })}
|
||||
>
|
||||
<Option value="1">一级</Option>
|
||||
<Option value="2">二级</Option>
|
||||
<Option value="3">三级</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
|
||||
<Col span={6}>
|
||||
<Checkbox
|
||||
style={{ marginTop: '5px' }}
|
||||
onChange={(e) =>
|
||||
this.handleFormChange({
|
||||
fisvitual: e.target.checked ? '1' : '0',
|
||||
})
|
||||
}
|
||||
>
|
||||
显示虚拟组织
|
||||
</Checkbox>
|
||||
options={this.state.levelOptions}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
export default () => {
|
||||
return <div>Hello</div>
|
||||
}
|
||||
|
|
@ -12,17 +12,13 @@ import { message } from 'antd';
|
|||
let active = 'top';
|
||||
export default function companyPage() {
|
||||
const [data, setData] = useState(null);
|
||||
const [sliderProgress, setSliderProgress] = useState(50);
|
||||
let addNodeChildFunc = null;
|
||||
let orgChart = null;
|
||||
|
||||
let topBarSearchRequest = null;
|
||||
const [hasRight, setHasRight] = useState('');
|
||||
|
||||
// 点击节点
|
||||
function onNodeClick(nodeId) {
|
||||
// alert('clicked ' + nodeId);
|
||||
}
|
||||
function onNodeClick(nodeId) {}
|
||||
|
||||
// 扩展按钮点击
|
||||
function onButtonClick(event, d) {
|
||||
|
|
@ -33,15 +29,10 @@ export default function companyPage() {
|
|||
idsList.push(item.data.id);
|
||||
}
|
||||
});
|
||||
|
||||
if (idsList.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let idsStr = idsList.join(',');
|
||||
|
||||
console.log('idsStr', idsStr);
|
||||
|
||||
let api = '';
|
||||
if (topBarSearchRequest) {
|
||||
let request = { ...topBarSearchRequest, ids: idsStr };
|
||||
|
|
@ -75,17 +66,17 @@ export default function companyPage() {
|
|||
return `./img/department/1.png`;
|
||||
}
|
||||
|
||||
// 获取部门图片
|
||||
// 获取分部图片
|
||||
function getSubcompanyImage() {
|
||||
let index = Math.floor(Math.random() * 3) + 1;
|
||||
// return `./img/subcompany/${index}.png`;
|
||||
return `./img/subcompany/2.png`;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
//获取数据
|
||||
useEffect(() => {
|
||||
document.cookie =
|
||||
'ecology_JSessionid=aaa_5XehwlWEjcCKl0cHy; JSESSIONID=aaa_5XehwlWEjcCKl0cHy; Systemlanguid=7; languageidweaver=7; loginuuids=1; loginidweaver=sysadmin; __randcode__=706b3e41-eafb-4e55-bc1c-a4cf0f9fdaa7';
|
||||
d3.json(
|
||||
// "/company/data"
|
||||
'/api/bs/hrmorganization/jclorgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
|
||||
moment(new Date()).format('YYYY-MM-DD'),
|
||||
).then((data) => {
|
||||
|
|
@ -296,7 +287,6 @@ export default function companyPage() {
|
|||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
console.log('data', data);
|
||||
if (active == 'left') {
|
||||
orgChart &&
|
||||
orgChart
|
||||
|
|
@ -313,7 +303,6 @@ export default function companyPage() {
|
|||
}, [data]);
|
||||
// top bar end
|
||||
if (hasRight === false) {
|
||||
//return message.error("对不起，您暂时没有权限", 2);
|
||||
return (
|
||||
<div style={{ width: '100%', top: '40%', position: 'absolute' }}>
|
||||
<img
|
||||
|
|
@ -336,7 +325,7 @@ export default function companyPage() {
|
|||
handleSearch(requestData);
|
||||
}}
|
||||
type="company"
|
||||
url="/api/bs/hrmorganization/jclorgchart/getCondition?type=company"
|
||||
url="/api/bs/hrmorganization/jclorgchart/getSearchCondition"
|
||||
/>
|
||||
<ToolBar
|
||||
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue