Compare commits

...

6 Commits

@ -2,7 +2,7 @@
* @Author: Chengliang 1546584672@qq.com
* @Date: 2022-08-04 10:22:55
* @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
* @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://221.226.25.34:8088/api', // 服务端域名 / http://localhost:8686
target: 'http://hr.jinyosolar.cn:90/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,13 +22,20 @@ export class TopBar extends React.Component {
super(props);
this.state = {
fclasslist: [],
companylist: [],
companylist: [], //
treeExpandedKeys: [],
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,
},
};
}
@ -50,6 +58,126 @@ 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: [],
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() {
fetch(this.props.url)
.then((res) => res.json())
@ -59,6 +187,7 @@ export class TopBar extends React.Component {
companylist: data.companylist,
});
});
this.getCompanyTreeList();
}
menu = (
@ -78,17 +207,20 @@ export class TopBar extends React.Component {
);
render() {
const { companyTreeData, deptartmentTreeData, treeExpandedKeys } =
this.state;
return (
<div className={style.topbarWrapper}>
<Row>
<Col span={5}>
<Col span={6}>
数据日期
<DatePicker
placeholder="请选择日期"
style={{ width: 130 }}
locale={locale}
allowClear={false}
// disabledDate={this.disabledDate}
disabledDate={this.disabledDate}
defaultValue={moment(new Date())}
value={
this.state.requestData.date && this.state.requestData.date != ''
@ -103,7 +235,7 @@ export class TopBar extends React.Component {
/>
</Col>
<Col span={4}>
<Col span={6}>
维度
<Select
defaultValue="0"
@ -117,25 +249,48 @@ 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
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={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
defaultValue="3"
@ -149,7 +304,7 @@ export class TopBar extends React.Component {
</Select>
</Col>
<Col span={3}>
<Col span={6}>
<Checkbox
style={{ marginTop: '5px' }}
onChange={(e) =>
@ -161,7 +316,7 @@ export class TopBar extends React.Component {
显示虚拟组织
</Checkbox>
</Col>
<Col span={3}>
<Col span={6}>
<Button
type="primary"
style={{ marginRight: '10px' }}

@ -1786,7 +1786,7 @@ export class OrgChart {
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 attrs = this.getChartState();
const { svg: svgImg, root } = attrs;

@ -46,11 +46,11 @@ export default function companyPage() {
if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr };
api =
'/api/bs/hrmorganization/orgchart/asyncCompanyData' +
'/api/bs/hrmorganization/jclorgchart/asyncCompanyData' +
qs.stringify(request, { addQueryPrefix: true });
} else {
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') +
'&ids=' +
idsStr;
@ -86,11 +86,11 @@ export default function companyPage() {
useEffect(() => {
d3.json(
// "/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'),
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
setHasRight('true');
});
}, [true]);
@ -131,12 +131,12 @@ export default function companyPage() {
let companyUrl =
'/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) {
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;">
<img src="./img/company.png" />
</div>
@ -271,7 +271,7 @@ export default function companyPage() {
const handleExport = (type) => {
if (type == 'png') {
orgChart && orgChart.exportImg({ full: true });
orgChart && orgChart.exportImg({ full: true, scale: 12 });
} else {
orgChart && downloadPdf(orgChart);
}
@ -280,7 +280,7 @@ export default function companyPage() {
const handleSearch = (requestData) => {
topBarSearchRequest = requestData;
let api =
'/api/bs/hrmorganization/orgchart/companyData' +
'/api/bs/hrmorganization/jclorgchart/companyData' +
qs.stringify(requestData, { addQueryPrefix: true });
fetch(api)
.then((res) => res.json())
@ -336,7 +336,7 @@ export default function companyPage() {
handleSearch(requestData);
}}
type="company"
url="/api/bs/hrmorganization/orgchart/getCondition?type=company"
url="/api/bs/hrmorganization/jclorgchart/getCondition?type=company"
/>
<ToolBar
onTopLayoutClick={(progressBtn) => handleTopLayoutClick(progressBtn)}

@ -50,11 +50,11 @@ export default function userPage() {
if (topBarSearchRequest) {
let request = { ...topBarSearchRequest, ids: idsStr };
api =
'/api/bs/hrmorganization/orgchart/asyncUserData' +
'/api/bs/hrmorganization/jclorgchart/asyncUserData' +
qs.stringify(request, { addQueryPrefix: true });
} else {
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') +
'&ids=' +
idsStr;
@ -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 =
'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(
// "/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'),
).then((data) => {
setData(data.data);
setHasRight(data?.hasRight);
setHasRight('true');
});
}, [true]);
@ -190,7 +190,7 @@ export default function userPage() {
const handleExport = (type) => {
if (type == 'png') {
orgChart && orgChart.exportImg({ full: true });
orgChart && orgChart.exportImg({ full: true, scale: 12 });
} else {
orgChart && downloadPdf(orgChart);
}
@ -199,7 +199,7 @@ export default function userPage() {
const handleSearch = (requestData) => {
setTpBarSearchRequest(requestData);
let api =
'/api/bs/hrmorganization/orgchart/userData' +
'/api/bs/hrmorganization/jclorgchart/userData' +
qs.stringify(requestData, { addQueryPrefix: true });
fetch(api)
.then((res) => res.json())
@ -236,15 +236,15 @@ export default function userPage() {
let companyUrl =
'/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 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`;
//
@ -269,7 +269,9 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
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
? companyUrl
: 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;">编制: ${
d.data.fplan
}</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(${
d.data.fisvitual
}==1) return;event.stopPropagation();window.open('${
d.data.ftype == 0
? addressBookGroupUrl
: d.data.ftype == 1
? addressBookUrl
: d.data.ftype == 2
? addressBookDepartmentUrl
: ''
}', '_blank')">在岗: ${d.data.fonjob}</div>
<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.fonjob
}</div>
</div>
</div>
</div>
@ -358,9 +352,7 @@ export default function userPage() {
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #000000;
" onclick="if(${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
" onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fname
}</span>
<span style="margin-left: 70px;">
@ -379,9 +371,7 @@ export default function userPage() {
font-weight: bold;
color: #333333;
margin-bottom: 23px;
" onclick="if(${
d.data.fisvitual
}==1) return;window.open('${jobtitleUrl}', '_blank')">${
" onclick="if(${d.data.fisvitual}==1) return;">${
d.data.fname
}</div>
<div style="
@ -392,11 +382,7 @@ export default function userPage() {
display: ${d.data.fisvitual == 0 ? 'flex' : 'none'};
">
<span>编制${d.data.fplan}</span>
<span style="margin-left: 10px;" onclick="if(${
d.data.fisvitual
}==1) return;window.open('${addressBookPostUrl}', '_blank')">在岗${
d.data.fonjob
}</span>
<span style="margin-left: 10px;">在岗${d.data.fonjob}</span>
</div>
</div>
</div>
@ -497,7 +483,7 @@ export default function userPage() {
handleSearch(requestData);
}}
type="user"
url="/api/bs/hrmorganization/orgchart/getCondition?type=user"
url="/api/bs/hrmorganization/jclorgchart/getCondition?type=user"
/>
<ToolBar
onTopLayoutClick={handleTopLayoutClick}

Loading…
Cancel
Save