地立项目架构图搜索条件增加部门分部
This commit is contained in:
parent
e8d142ed5a
commit
f273ba49a8
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: Chengliang 1546584672@qq.com
|
||||
* @Date: 2022-08-04 10:22:55
|
||||
* @LastEditors: Chengliang 1546584672@qq.com
|
||||
* @LastEditTime: 2022-12-01 11:53:26
|
||||
* @LastEditTime: 2022-12-02 11:42:11
|
||||
* @FilePath: /org-chart-frant/.umirc.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
|
@ -26,7 +26,7 @@ export default defineConfig({
|
|||
proxy: {
|
||||
'/api': {
|
||||
// 标识需要进行转换的请求的url
|
||||
target: 'http://192.168.1.67:9002', // 服务端域名 / http://localhost:8686
|
||||
target: 'http://192.168.0.152:8093/api', // 服务端域名 / http://localhost:8686
|
||||
changeOrigin: true, // 允许域名进行转换
|
||||
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import {
|
|||
Col,
|
||||
Dropdown,
|
||||
Menu,
|
||||
TreeSelect,
|
||||
} from 'antd';
|
||||
const { Option } = Select;
|
||||
import moment from 'moment';
|
||||
|
|
@ -21,20 +22,24 @@ export class TopBar extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
fclasslist: [],
|
||||
companylist: [],
|
||||
deptartmentList: [],
|
||||
companylist: [], //下拉框跟节点
|
||||
companyData: [],
|
||||
departmentData: [],
|
||||
companyTreeData: [],
|
||||
deptartmentTreeData: [],
|
||||
requestData: {
|
||||
date: moment(new Date()).format('YYYY-MM-DD'),
|
||||
fclass: '0',
|
||||
root: '0',
|
||||
level: '3',
|
||||
fisvitual: '0',
|
||||
company: undefined,
|
||||
department: undefined,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
handleFormChange(payload) {
|
||||
debugger;
|
||||
let requestData = { ...this.state.requestData, ...payload };
|
||||
this.setState({ requestData });
|
||||
}
|
||||
|
|
@ -52,6 +57,119 @@ export class TopBar extends React.Component {
|
|||
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,
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onCompanyLoadData = (treeNode) =>
|
||||
new Promise((resolve) => {
|
||||
const { id } = treeNode.props;
|
||||
setTimeout(() => {
|
||||
this.getCompanyTreeNode(id);
|
||||
resolve();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onDepartmentLoadData = (treeNode) =>
|
||||
new Promise((resolve) => {
|
||||
const { id } = treeNode.props;
|
||||
setTimeout(() => {
|
||||
this.getDepartmentTreeNode(id);
|
||||
resolve();
|
||||
}, 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: [],
|
||||
});
|
||||
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;
|
||||
});
|
||||
return arr.join(',');
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
fetch(this.props.url)
|
||||
.then((res) => res.json())
|
||||
|
|
@ -61,6 +179,7 @@ export class TopBar extends React.Component {
|
|||
companylist: data.companylist,
|
||||
});
|
||||
});
|
||||
this.getCompanyTreeList();
|
||||
}
|
||||
|
||||
menu = (
|
||||
|
|
@ -80,10 +199,12 @@ export class TopBar extends React.Component {
|
|||
);
|
||||
|
||||
render() {
|
||||
const { companyTreeData, deptartmentTreeData } = this.state;
|
||||
|
||||
return (
|
||||
<div className={style.topbarWrapper}>
|
||||
<Row>
|
||||
<Col span={5}>
|
||||
<Col span={6}>
|
||||
数据日期：
|
||||
<DatePicker
|
||||
placeholder="请选择日期"
|
||||
|
|
@ -105,7 +226,7 @@ export class TopBar extends React.Component {
|
|||
/>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
<Col span={6}>
|
||||
维度：
|
||||
<Select
|
||||
defaultValue="0"
|
||||
|
|
@ -119,25 +240,44 @@ export class TopBar extends React.Component {
|
|||
</Select>
|
||||
</Col>
|
||||
|
||||
<Col span={4}>
|
||||
根节点：
|
||||
<Select
|
||||
<Col span={6}>
|
||||
分部：
|
||||
<TreeSelect
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
(option?.children).includes(input)
|
||||
}
|
||||
defaultValue="0"
|
||||
style={{ width: 120 }}
|
||||
value={this.state.requestData.root}
|
||||
onChange={(value) => this.handleFormChange({ root: value })}
|
||||
>
|
||||
{this.state.companylist.map((item) => (
|
||||
<Option value={item.id}>{item.fname}</Option>
|
||||
))}
|
||||
</Select>
|
||||
allowClear
|
||||
treeDataSimpleMode
|
||||
treeCheckable
|
||||
treeCheckStrictly
|
||||
style={{ width: '80%' }}
|
||||
value={this.state.companyData}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="请选择分部节点"
|
||||
onChange={this.onCompanyChange}
|
||||
loadData={this.onCompanyLoadData}
|
||||
treeData={companyTreeData}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col span={5}>
|
||||
<Col span={6}>
|
||||
部门：
|
||||
<TreeSelect
|
||||
showSearch
|
||||
allowClear
|
||||
treeDataSimpleMode
|
||||
treeCheckable
|
||||
treeCheckStrictly
|
||||
style={{ width: '80%' }}
|
||||
value={this.state.departmentData}
|
||||
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
|
||||
placeholder="请选择部门节点"
|
||||
onChange={this.onDepartmentChange}
|
||||
loadData={this.onDepartmentLoadData}
|
||||
treeData={deptartmentTreeData}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: '15px' }}>
|
||||
<Col span={6}>
|
||||
显示层级：
|
||||
<Select
|
||||
defaultValue="3"
|
||||
|
|
@ -151,7 +291,7 @@ export class TopBar extends React.Component {
|
|||
</Select>
|
||||
</Col>
|
||||
|
||||
<Col span={3}>
|
||||
<Col span={6}>
|
||||
<Checkbox
|
||||
style={{ marginTop: '5px' }}
|
||||
onChange={(e) =>
|
||||
|
|
@ -163,7 +303,7 @@ export class TopBar extends React.Component {
|
|||
显示虚拟组织
|
||||
</Checkbox>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Col span={6}>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginRight: '10px' }}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default function companyPage() {
|
|||
let orgChart = null;
|
||||
|
||||
let topBarSearchRequest = null;
|
||||
const [hasRight, setHasRight] = useState('true');
|
||||
const [hasRight, setHasRight] = useState('');
|
||||
|
||||
// 点击节点
|
||||
function onNodeClick(nodeId) {
|
||||
|
|
@ -90,7 +90,7 @@ export default function companyPage() {
|
|||
moment(new Date()).format('YYYY-MM-DD'),
|
||||
).then((data) => {
|
||||
setData(data.data);
|
||||
//setHasRight(data?.hasRight);
|
||||
setHasRight('true');
|
||||
});
|
||||
}, [true]);
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function userPage() {
|
|||
let orgChart = null;
|
||||
let progressBtnRef = null;
|
||||
|
||||
const [hasRight, setHasRight] = useState('true');
|
||||
const [hasRight, setHasRight] = useState('');
|
||||
|
||||
// 点击节点
|
||||
function onNodeClick(nodeId) {
|
||||
|
|
@ -78,7 +78,7 @@ export default function userPage() {
|
|||
return `./img/department/${index}.png`;
|
||||
}
|
||||
|
||||
// 获取部门图片
|
||||
// 获取分部图片
|
||||
function getSubcompanyImage() {
|
||||
let index = Math.floor(Math.random() * 3) + 1;
|
||||
return `./img/subcompany/${index}.png`;
|
||||
|
|
@ -87,14 +87,14 @@ export default function userPage() {
|
|||
// 获取数据
|
||||
useEffect(() => {
|
||||
document.cookie =
|
||||
'ecology_JSessionid=aaa88PIn8LCwM_Y7mkOsy; JSESSIONID=aaa88PIn8LCwM_Y7mkOsy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=e261bb82-0800-442e-889e-0720b8cf16fb';
|
||||
'ecology_JSessionid=aaaYiMnZkKEdO-iKnOqty; JSESSIONID=aaaYiMnZkKEdO-iKnOqty; __randcode__=140d36b3-5a03-4e73-9434-768e655afbb4; loginidweaver=1; languageidweaver=7; loginuuids=1';
|
||||
d3.json(
|
||||
// "/user/data"
|
||||
'/api/bs/hrmorganization/jclorgchart/userData?fclass=0&root=0&date=' +
|
||||
moment(new Date()).format('YYYY-MM-DD'),
|
||||
).then((data) => {
|
||||
setData(data.data);
|
||||
//setHasRight(data?.hasRight);
|
||||
setHasRight('true');
|
||||
});
|
||||
}, [true]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue