Compare commits

...

6 Commits

@ -2,7 +2,7 @@
* @Author: Chengliang 1546584672@qq.com * @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55 * @Date: 2022-08-04 10:22:55
* @LastEditors: Chengliang 1546584672@qq.com * @LastEditors: Chengliang 1546584672@qq.com
* @LastEditTime: 2022-09-06 16:46:56 * @LastEditTime: 2022-12-15 11:50:19
* @FilePath: /org-chart-frant/.umirc.ts * @FilePath: /org-chart-frant/.umirc.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -26,7 +26,7 @@ export default defineConfig({
proxy: { proxy: {
'/api': { '/api': {
// 标识需要进行转换的请求的url // 标识需要进行转换的请求的url
target: 'http://221.226.25.34:8088/api', // 服务端域名 / http://localhost:8686 target: 'http://hr.jinyosolar.cn:90/api', // 服务端域名 / http://localhost:8686
changeOrigin: true, // 允许域名进行转换 changeOrigin: true, // 允许域名进行转换
pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉 pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉
}, },

@ -9,6 +9,7 @@ import {
Col, Col,
Dropdown, Dropdown,
Menu, Menu,
TreeSelect,
} from 'antd'; } from 'antd';
const { Option } = Select; const { Option } = Select;
import moment from 'moment'; import moment from 'moment';
@ -21,13 +22,20 @@ export class TopBar extends React.Component {
super(props); super(props);
this.state = { this.state = {
fclasslist: [], fclasslist: [],
companylist: [], companylist: [], //
treeExpandedKeys: [],
companyData: [],
departmentData: [],
companyTreeData: [],
deptartmentTreeData: [],
requestData: { requestData: {
date: moment(new Date()).format('YYYY-MM-DD'), date: moment(new Date()).format('YYYY-MM-DD'),
fclass: '0', fclass: '0',
root: '0', root: '0',
level: '3', level: '3',
fisvitual: '0', fisvitual: '0',
company: undefined,
department: undefined,
}, },
}; };
} }
@ -50,6 +58,126 @@ export class TopBar extends React.Component {
this.props.onExport('png'); 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: [],
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;
});
return arr.join(',');
};
onTreeExpand = (expandedKeys) => {
this.setState({
treeExpandedKeys: expandedKeys,
});
};
componentDidMount() { componentDidMount() {
fetch(this.props.url) fetch(this.props.url)
.then((res) => res.json()) .then((res) => res.json())
@ -59,6 +187,7 @@ export class TopBar extends React.Component {
companylist: data.companylist, companylist: data.companylist,
}); });
}); });
this.getCompanyTreeList();
} }
menu = ( menu = (
@ -78,17 +207,20 @@ export class TopBar extends React.Component {
); );
render() { render() {
const { companyTreeData, deptartmentTreeData, treeExpandedKeys } =
this.state;
return ( return (
<div className={style.topbarWrapper}> <div className={style.topbarWrapper}>
<Row> <Row>
<Col span={5}> <Col span={6}>
数据日期 数据日期
<DatePicker <DatePicker
placeholder="请选择日期" placeholder="请选择日期"
style={{ width: 130 }} style={{ width: 130 }}
locale={locale} locale={locale}
allowClear={false} allowClear={false}
// disabledDate={this.disabledDate} disabledDate={this.disabledDate}
defaultValue={moment(new Date())} defaultValue={moment(new Date())}
value={ value={
this.state.requestData.date && this.state.requestData.date != '' this.state.requestData.date && this.state.requestData.date != ''
@ -103,7 +235,7 @@ export class TopBar extends React.Component {
/> />
</Col> </Col>
<Col span={4}> <Col span={6}>
维度 维度
<Select <Select
defaultValue="0" defaultValue="0"
@ -117,25 +249,48 @@ export class TopBar extends React.Component {
</Select> </Select>
</Col> </Col>
<Col span={4}> <Col span={6}>
根节点 分部
<Select <TreeSelect
showSearch showSearch
filterOption={(input, option) => allowClear
(option?.children).includes(input) treeDataSimpleMode
} treeCheckable
defaultValue="0" treeCheckStrictly
style={{ width: 120 }} showCheckedStrategy={TreeSelect.SHOW_ALL}
value={this.state.requestData.root} style={{ width: '80%' }}
onChange={(value) => this.handleFormChange({ root: value })} value={this.state.companyData}
> dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
{this.state.companylist.map((item) => ( placeholder="请选择分部节点"
<Option value={item.id}>{item.fname}</Option> onChange={this.onCompanyChange}
))} loadData={this.onCompanyLoadData}
</Select> treeData={companyTreeData}
/>
</Col> </Col>
<Col span={5}> <Col span={6}>
部门
<TreeSelect
showSearch
allowClear
treeDataSimpleMode
treeCheckable
showCheckedStrategy={TreeSelect.SHOW_ALL}
treeExpandedKeys={treeExpandedKeys}
treeCheckStrictly
style={{ width: '80%' }}
value={this.state.departmentData}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
placeholder="请选择部门节点"
onChange={this.onDepartmentChange}
loadData={this.onDepartmentLoadData}
treeData={deptartmentTreeData}
onTreeExpand={this.onTreeExpand}
/>
</Col>
</Row>
<Row style={{ marginTop: '15px' }}>
<Col span={6}>
显示层级 显示层级
<Select <Select
defaultValue="3" defaultValue="3"
@ -149,7 +304,7 @@ export class TopBar extends React.Component {
</Select> </Select>
</Col> </Col>
<Col span={3}> <Col span={6}>
<Checkbox <Checkbox
style={{ marginTop: '5px' }} style={{ marginTop: '5px' }}
onChange={(e) => onChange={(e) =>
@ -161,7 +316,7 @@ export class TopBar extends React.Component {
显示虚拟组织 显示虚拟组织
</Checkbox> </Checkbox>
</Col> </Col>
<Col span={3}> <Col span={6}>
<Button <Button
type="primary" type="primary"
style={{ marginRight: '10px' }} style={{ marginRight: '10px' }}

@ -1786,7 +1786,7 @@ export class OrgChart {
xhr.send(); xhr.send();
} }
exportImg({ full = false, scale = 12, onLoad = (d) => d, save = true } = {}) { exportImg({ full = false, scale = 6, onLoad = (d) => d, save = true } = {}) {
const that = this; const that = this;
const attrs = this.getChartState(); const attrs = this.getChartState();
const { svg: svgImg, root } = attrs; const { svg: svgImg, root } = attrs;

@ -46,11 +46,11 @@ export default function companyPage() {
if (topBarSearchRequest) { if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr }; let request = { ...topBarSearchRequest, ids: idsStr };
api = api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData' + '/api/bs/hrmorganization/jclorgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true }); qs.stringify(request, { addQueryPrefix: true });
} else { } else {
api = api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData?fclass=0&root=0&date=' + '/api/bs/hrmorganization/jclorgchart/asyncCompanyData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') + moment(new Date()).format('YYYY-MM-DD') +
'&ids=' + '&ids=' +
idsStr; idsStr;
@ -86,11 +86,11 @@ export default function companyPage() {
useEffect(() => { useEffect(() => {
d3.json( d3.json(
// "/company/data" // "/company/data"
'/api/bs/hrmorganization/orgchart/companyData?fclass=0&isvitual=0&root=0&date=' + '/api/bs/hrmorganization/jclorgchart/companyData?fclass=0&isvitual=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD'),
).then((data) => { ).then((data) => {
setData(data.data); setData(data.data);
setHasRight(data?.hasRight); setHasRight('true');
}); });
}, [true]); }, [true]);
@ -131,12 +131,12 @@ export default function companyPage() {
let companyUrl = let companyUrl =
'/spa/organization/static/index.html#/main/organization/group'; '/spa/organization/static/index.html#/main/organization/group';
// //
let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`; let subcompanyUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=subcompany&id=${d.data.fobjid}`;
// //
let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`; let departmentUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=department&id=${d.data.fobjid}`;
if (d.data.ftype == 0) { if (d.data.ftype == 0) {
return `<div onclick="if(${d.data.fisvitual}==1) return;window.open('${companyUrl}', '_blank')" style="text-align:center"> return `<div onclick="if(${d.data.fisvitual}==1) return;" style="text-align:center">
<div style="display: inline-block; vertical-align: top;"> <div style="display: inline-block; vertical-align: top;">
<img src="./img/company.png" /> <img src="./img/company.png" />
</div> </div>
@ -271,7 +271,7 @@ export default function companyPage() {
const handleExport = (type) => { const handleExport = (type) => {
if (type == 'png') { if (type == 'png') {
orgChart && orgChart.exportImg({ full: true }); orgChart && orgChart.exportImg({ full: true, scale: 12 });
} else { } else {
orgChart && downloadPdf(orgChart); orgChart && downloadPdf(orgChart);
} }
@ -280,7 +280,7 @@ export default function companyPage() {
const handleSearch = (requestData) => { const handleSearch = (requestData) => {
topBarSearchRequest = requestData; topBarSearchRequest = requestData;
let api = let api =
'/api/bs/hrmorganization/orgchart/companyData' + '/api/bs/hrmorganization/jclorgchart/companyData' +
qs.stringify(requestData, { addQueryPrefix: true }); qs.stringify(requestData, { addQueryPrefix: true });
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
@ -336,7 +336,7 @@ export default function companyPage() {
handleSearch(requestData); handleSearch(requestData);
}} }}
type="company" type="company"
url="/api/bs/hrmorganization/orgchart/getCondition?type=company" url="/api/bs/hrmorganization/jclorgchart/getCondition?type=company"
/> />
<ToolBar <ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)} onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}

@ -50,11 +50,11 @@ export default function userPage() {
if (topBarSearchRequest) { if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr }; let request = { ...topBarSearchRequest, ids: idsStr };
api = api =
'/api/bs/hrmorganization/orgchart/asyncUserData' + '/api/bs/hrmorganization/jclorgchart/asyncUserData' +
qs.stringify(request, { addQueryPrefix: true }); qs.stringify(request, { addQueryPrefix: true });
} else { } else {
api = api =
'/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' + '/api/bs/hrmorganization/jclorgchart/asyncUserData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD') + moment(new Date()).format('YYYY-MM-DD') +
'&ids=' + '&ids=' +
idsStr; idsStr;
@ -78,7 +78,7 @@ export default function userPage() {
return `./img/department/${index}.png`; return `./img/department/${index}.png`;
} }
// //
function getSubcompanyImage() { function getSubcompanyImage() {
let index = Math.floor(Math.random() * 3) + 1; let index = Math.floor(Math.random() * 3) + 1;
return `./img/subcompany/${index}.png`; return `./img/subcompany/${index}.png`;
@ -87,14 +87,14 @@ export default function userPage() {
// //
useEffect(() => { useEffect(() => {
document.cookie = document.cookie =
'loginidweaver=1; languageidweaver=7; loginuuids=1; JSESSIONID=aaa1QNMWge48Bh-3oq6oy; ecology_JSessionid=aaa1QNMWge48Bh-3oq6oy; __randcode__=5c4300d1-05d6-4ca6-adb4-f4e23a47acb5'; 'ecology_JSessionid=aaa8b2PuQK_99bUdsZfuy; JSESSIONID=aaa8b2PuQK_99bUdsZfuy; loginidweaver=1; languageidweaver=7; loginuuids=1; __randcode__=fc144674-308a-4579-ba74-717559795c8b';
d3.json( d3.json(
// "/user/data" // "/user/data"
'/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' + '/api/bs/hrmorganization/jclorgchart/userData?fclass=0&root=0&date=' +
moment(new Date()).format('YYYY-MM-DD'), moment(new Date()).format('YYYY-MM-DD'),
).then((data) => { ).then((data) => {
setData(data.data); setData(data.data);
setHasRight(data?.hasRight); setHasRight('true');
}); });
}, [true]); }, [true]);
@ -190,7 +190,7 @@ export default function userPage() {
const handleExport = (type) => { const handleExport = (type) => {
if (type == 'png') { if (type == 'png') {
orgChart && orgChart.exportImg({ full: true }); orgChart && orgChart.exportImg({ full: true, scale: 12 });
} else { } else {
orgChart && downloadPdf(orgChart); orgChart && downloadPdf(orgChart);
} }
@ -199,7 +199,7 @@ export default function userPage() {
const handleSearch = (requestData) => { const handleSearch = (requestData) => {
setTpBarSearchRequest(requestData); setTpBarSearchRequest(requestData);
let api = let api =
'/api/bs/hrmorganization/orgchart/userData' + '/api/bs/hrmorganization/jclorgchart/userData' +
qs.stringify(requestData, { addQueryPrefix: true }); qs.stringify(requestData, { addQueryPrefix: true });
fetch(api) fetch(api)
.then((res) => res.json()) .then((res) => res.json())
@ -236,15 +236,15 @@ export default function userPage() {
let companyUrl = let companyUrl =
'/spa/organization/static/index.html#/main/organization/group'; '/spa/organization/static/index.html#/main/organization/group';
// //
let subcompanyUrl = `/spa/organization/static/index.html#/main/organization/companyExtend/${d.data.fobjid}`; let subcompanyUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&type=subcompany&id=${d.data.fobjid}`;
// //
let departmentUrl = `/spa/organization/static/index.html#/main/organization/departmentExtend/${d.data.fobjid}`; let departmentUrl = `/spa/hrm/engine.html#/hrmengine/organization?showTree=false&isView=1&type=department&id=${d.data.fobjid}`;
// //
let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`; let jobtitleUrl = `/spa/organization/static/index.html#/main/organization/jobExtend/${d.data.fobjid}`;
// //
let userUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fleader}`; let userUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fleader}`;
// //
let postUserUrl = `/spa/organization/static/index.html#/main/organization/resourceCard/${d.data.fobjid}`; let postUserUrl = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${d.data.fobjid}`;
// //
let addressBookGroupUrl = `/spa/organization/static/index.html#/main/organization/resource/?virtualtype=0`; let addressBookGroupUrl = `/spa/organization/static/index.html#/main/organization/resource/?virtualtype=0`;
// //
@ -269,7 +269,9 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
" onclick="if(${d.data.fisvitual}==1) return;window.open('${ " onclick="if(${d.data.fisvitual}==1||${
d.data.ftype
}==0) return;window.open('${
d.data.ftype == 0 d.data.ftype == 0
? companyUrl ? companyUrl
: d.data.ftype == 1 : d.data.ftype == 1
@ -327,17 +329,9 @@ export default function userPage() {
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${ <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px;">编制: ${
d.data.fplan d.data.fplan
}</div> }</div>
<div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;" onclick="if(${ <div style="height: 28px;border: 1px solid #00C2FF; border-radius: 10px; line-height: 24px; padding: 0px 5px; min-width: 60px; margin-left: 10px;">在岗: ${
d.data.fisvitual d.data.fonjob
}==1) return;event.stopPropagation();window.open('${ }</div>
d.data.ftype == 0
? addressBookGroupUrl
: d.data.ftype == 1
? addressBookUrl
: d.data.ftype == 2
? addressBookDepartmentUrl
: ''
}', '_blank')">在岗: ${d.data.fonjob}</div>
</div> </div>
</div> </div>
</div> </div>
@ -358,9 +352,7 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei; font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
" onclick="if(${ " onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
d.data.fname d.data.fname
}</span> }</span>
<span style="margin-left: 70px;"> <span style="margin-left: 70px;">
@ -379,9 +371,7 @@ export default function userPage() {
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
margin-bottom: 23px; margin-bottom: 23px;
" onclick="if(${ " onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
d.data.fname d.data.fname
}</div> }</div>
<div style=" <div style="
@ -392,11 +382,7 @@ export default function userPage() {
display: ${d.data.fisvitual == 0 ? 'flex' : 'none'}; display: ${d.data.fisvitual == 0 ? 'flex' : 'none'};
"> ">
<span>编制${d.data.fplan}</span> <span>编制${d.data.fplan}</span>
<span style="margin-left: 10px;" onclick="if(${ <span style="margin-left: 10px;">在岗${d.data.fonjob}</span>
d.data.fisvitual
}==1) return;window.open('${addressBookPostUrl}', '_blank')">在岗${
d.data.fonjob
}</span>
</div> </div>
</div> </div>
</div> </div>
@ -497,7 +483,7 @@ export default function userPage() {
handleSearch(requestData); handleSearch(requestData);
}} }}
type="user" type="user"
url="/api/bs/hrmorganization/orgchart/getCondition?type=user" url="/api/bs/hrmorganization/jclorgchart/getCondition?type=user"
/> />
<ToolBar <ToolBar
onTopLayoutClick={handleTopLayoutClick} onTopLayoutClick={handleTopLayoutClick}

Loading…
Cancel
Save