From 57cc610174a77b89f7cb6fbd8396ecb35f4bbef4 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Mon, 8 Aug 2022 17:19:47 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E9=80=8F=E8=A7=86=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .umirc.ts | 27 ++- src/pages/user.jsx | 459 ++++++++++++++++++++++++--------------------- 2 files changed, 267 insertions(+), 219 deletions(-) diff --git a/.umirc.ts b/.umirc.ts index e54955f..36b62ad 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -1,9 +1,17 @@ +/* + * @Author: Chengliang 1546584672@qq.com + * @Date: 2022-08-04 10:22:55 + * @LastEditors: Chengliang 1546584672@qq.com + * @LastEditTime: 2022-08-08 16:31:31 + * @FilePath: /org-chart-frant/.umirc.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import { defineConfig } from 'umi'; export default defineConfig({ hash: true, - history: { type: 'hash'}, - base: "/spa/orgChart/", + history: { type: 'hash' }, + base: '/spa/orgChart/', // exportStatic: {}, publicPath: './', nodeModulesTransform: { @@ -11,15 +19,16 @@ export default defineConfig({ }, routes: [ { path: '/user', component: '@/pages/user' }, - { path: '/company', component: '@/pages/company' } + { path: '/company', component: '@/pages/company' }, ], fastRefresh: {}, antd: {}, proxy: { - "/api": { // 标识需要进行转换的请求的url - "target": "http://localhost:18089/api", // 服务端域名 - "changeOrigin": true, // 允许域名进行转换 - "pathRewrite": { "^/api": ''} // 将请求url里的ci去掉 - } - } + '/api': { + // 标识需要进行转换的请求的url + target: 'http://localhost:8686/api', // 服务端域名 + changeOrigin: true, // 允许域名进行转换 + pathRewrite: { '^/api': '' }, // 将请求url里的ci去掉 + }, + }, }); diff --git a/src/pages/user.jsx b/src/pages/user.jsx index 5f0c6c1..2542c1e 100644 --- a/src/pages/user.jsx +++ b/src/pages/user.jsx @@ -1,206 +1,217 @@ import styles from './index.less'; -import React, { useEffect, useState } from "react"; -import {OrgChartComponent} from '@/components/orgChart' +import React, { useEffect, useState } from 'react'; +import { OrgChartComponent } from '@/components/orgChart'; import * as d3 from 'd3'; import { TopBar } from '../components/topBar'; import ToolBar from '../components/toolBar'; -import moment from "moment"; +import moment from 'moment'; import qs from 'qs'; -import { message } from 'antd'; - +import { message } from 'antd'; export default function userPage() { - const [data, setData] = useState(null); - const [progressTop, setProgressTop] = useState(50); - let addNodeChildFunc = null; - let orgChart = null; - let progressBtnRef = null; - let topBarSearchRequest = null; - - - // 点击节点 - function onNodeClick(nodeId) { - // alert('clicked ' + nodeId); - } + const [data, setData] = useState(null); + const [progressTop, setProgressTop] = useState(50); + let addNodeChildFunc = null; + let orgChart = null; + let progressBtnRef = null; + let topBarSearchRequest = null; - function onButtonClick(event, d) { - - if(d.children) { - let idsList = [] - d.children.forEach(item => { - if(item.data.hasChildren && !item._children) { - idsList.push(item.data.id); - } - }) + // 点击节点 + function onNodeClick(nodeId) { + // alert('clicked ' + nodeId); + } - if(idsList.length == 0) { - return + function onButtonClick(event, d) { + if (d.children) { + let idsList = []; + d.children.forEach((item) => { + if (item.data.hasChildren && !item._children) { + idsList.push(item.data.id); } + }); - let idsStr = idsList.join(",") + if (idsList.length == 0) { + return; + } - console.log("idsStr", idsStr); - - let api = ""; - if(topBarSearchRequest) { - let request = {...topBarSearchRequest, ids: idsStr} - api = "/api/bs/hrmorganization/orgchart/asyncUserData" + qs.stringify(request, {addQueryPrefix: true}) - - } else { - api = "/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") + "&ids="+idsStr - } + let idsStr = idsList.join(','); - fetch(api).then(res => res.json()).then(data => { - if(data.data) { - data.data.forEach(item => { - window.chart.addNode(item) - }) - } - }) + console.log('idsStr', idsStr); + + let api = ''; + if (topBarSearchRequest) { + let request = { ...topBarSearchRequest, ids: idsStr }; + api = + '/api/bs/hrmorganization/orgchart/asyncUserData' + + qs.stringify(request, { addQueryPrefix: true }); + } else { + api = + '/api/bs/hrmorganization/orgchart/asyncUserData?fclass=0&root=0&date=' + + moment(new Date()).format('YYYY-MM-DD') + + '&ids=' + + idsStr; } - } - // 获取部门图片 - function getDepartmentImage() { - let index = Math.floor(Math.random() * 8) + 1 - return `./img/department/${index}.png` + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.data) { + data.data.forEach((item) => { + window.chart.addNode(item); + }); + } + }); } + } - // 获取部门图片 - function getSubcompanyImage() { - let index = Math.floor(Math.random() * 3) + 1 - return `./img/subcompany/${index}.png` - } - - // 获取数据 - useEffect(() => { - d3.json( - // "/user/data" - "/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=" + moment(new Date()).format("YYYY-MM-DD") - ).then(data => { - setData(data.data); - }); - }, [true]); + // 获取部门图片 + function getDepartmentImage() { + let index = Math.floor(Math.random() * 8) + 1; + return `./img/department/${index}.png`; + } - // ButtonContent渲染 - const buttonContentRender = ({ node, state }) => { - return ` + // 获取部门图片 + function getSubcompanyImage() { + let index = Math.floor(Math.random() * 3) + 1; + return `./img/subcompany/${index}.png`; + } + + // 获取数据 + useEffect(() => { + d3.json( + // "/user/data" + '/api/bs/hrmorganization/orgchart/userData?fclass=0&root=0&date=' + + moment(new Date()).format('YYYY-MM-DD'), + ).then((data) => { + setData(data.data); + }); + }, [true]); + + // ButtonContent渲染 + const buttonContentRender = ({ node, state }) => { + return `
- ` - } + `; + }; - // 节点宽度渲染 - const nodeWidthRender = d => - { - return 280; - } + // 节点宽度渲染 + const nodeWidthRender = (d) => { + return 280; + }; - const nodeHeightRender = d => { - return 160; - } + const nodeHeightRender = (d) => { + return 160; + }; - // tool bar start - const handleTopLayoutClick = (progressBtn) => { - progressBtn.current.style.top= 50 + "px"; - orgChart && orgChart.layout('top').render() - } + // tool bar start + const handleTopLayoutClick = (progressBtn) => { + progressBtn.current.style.top = 50 + 'px'; + orgChart && orgChart.layout('top').render(); + }; - const handleLeftLayoutClick = (progressBtn) => { - progressBtn.current.style.top= 50 + "px"; - orgChart && orgChart.layout('left').render() - } + const handleLeftLayoutClick = (progressBtn) => { + progressBtn.current.style.top = 50 + 'px'; + orgChart && orgChart.layout('left').render(); + }; - const handleZoomIn = (progressBtn) => { - if(progressBtn) { - let top = (parseInt(progressBtn.current.style.top) - 10) - if(top <= 0) { - top = 30; - } - progressBtn.current.style.top = top + "px"; + const handleZoomIn = (progressBtn) => { + if (progressBtn) { + let top = parseInt(progressBtn.current.style.top) - 10; + if (top <= 0) { + top = 30; } - orgChart && orgChart.zoomIn(); + progressBtn.current.style.top = top + 'px'; } + orgChart && orgChart.zoomIn(); + }; - const handleZoomOut = (progressBtn) => { - if(progressBtn) { - let top = (parseInt(progressBtn.current.style.top) + 10) - if(top >= 100) { - top = 70; - } - progressBtn.current.style.top = top + "px"; + const handleZoomOut = (progressBtn) => { + if (progressBtn) { + let top = parseInt(progressBtn.current.style.top) + 10; + if (top >= 100) { + top = 70; } - orgChart && orgChart.zoomOut(); + progressBtn.current.style.top = top + 'px'; } + orgChart && orgChart.zoomOut(); + }; - // tool bar end - + // tool bar end - // top bar start + // top bar start - function downloadPdf(chart) { - chart.exportImg({ - save: false, - onLoad: (base64) => { - var pdf = new jsPDF(); - var img = new Image(); - img.src = base64; - img.onload = function () { - pdf.addImage( - img, - 'JPEG', - 5, - 5, - 595 / 3, - ((img.height / img.width) * 595) / 3 - ); - pdf.save('chart.pdf'); - }; - }, - }); - } + function downloadPdf(chart) { + chart.exportImg({ + save: false, + onLoad: (base64) => { + var pdf = new jsPDF(); + var img = new Image(); + img.src = base64; + img.onload = function () { + pdf.addImage( + img, + 'JPEG', + 5, + 5, + 595 / 3, + ((img.height / img.width) * 595) / 3, + ); + pdf.save('chart.pdf'); + }; + }, + }); + } - const handleExport = (type) => { - if(type == "png") { - orgChart && orgChart.exportImg({full:true}); - } else { - orgChart && downloadPdf(orgChart) - } + const handleExport = (type) => { + if (type == 'png') { + orgChart && orgChart.exportImg({ full: true }); + } else { + orgChart && downloadPdf(orgChart); } + }; - const handleSearch = (requestData) => { - topBarSearchRequest = requestData - let api = "/api/bs/hrmorganization/orgchart/userData" + qs.stringify(requestData, {addQueryPrefix: true}) - fetch(api).then(res => res.json()).then(data => { - if(data.data && data.data.length > 0) { - setData(data.data) + const handleSearch = (requestData) => { + topBarSearchRequest = requestData; + let api = + '/api/bs/hrmorganization/orgchart/userData' + + qs.stringify(requestData, { addQueryPrefix: true }); + fetch(api) + .then((res) => res.json()) + .then((data) => { + if (data.data && data.data.length > 0) { + setData(data.data); } else { - message.warning("暂无数据"); + message.warning('暂无数据'); } - }) - } + }); + }; - // top bar end + // top bar end - const nodeContentRender = (d, i, arr, state) => { - // 集团地址 - let companyUrl = "/spa/organization/static/index.html#/main/organization/group" - // 分部地址 - let subcompanyUrl = "/spa/organization/static/index.html#/main/organization/companyExtend/" - // 部门地址 - let departmentUrl = "/spa/organization/static/index.html#/main/organization/departmentExtend/" - // 岗位地址 - let jobtitleUrl = "/spa/organization/static/index.html#/main/organization/jobExtend/"; + const nodeContentRender = (d, i, arr, state) => { + // 集团地址 + let companyUrl = + '/spa/organization/static/index.html#/main/organization/group'; + // 分部地址 + let subcompanyUrl = + '/spa/organization/static/index.html#/main/organization/companyExtend/'; + // 部门地址 + let departmentUrl = + '/spa/organization/static/index.html#/main/organization/departmentExtend/'; + // 岗位地址 + let jobtitleUrl = + '/spa/organization/static/index.html#/main/organization/jobExtend/'; - // 人员地址 - let userUrl = "/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/"; + // 人员地址 + let userUrl = '/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/'; - // 通讯录 - let addressBookUrl = "/spa/hrm/index_mobx.html#/main/hrm/addressBook"; + // 通讯录 + let addressBookUrl = '/spa/hrm/index_mobx.html#/main/hrm/addressBook'; - if(d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) { - return `
+ if (d.data.ftype == 0 || d.data.ftype == 1 || d.data.ftype == 2) { + return `
${d.data.fname} + " onclick="window.open('${ + d.data.ftype == 0 + ? companyUrl + : d.data.ftype == 1 + ? subcompanyUrl + d.data.fnumber + : d.data.ftype == 2 + ? departmentUrl + d.data.fnumber + : '' + }', '_blank')">${d.data.fname} -
-
- +
+
+
${d.data.fname} / ${d.data.fleaderjob}
-
编制: ${d.data.fplan}
-
在岗: ${d.data.fonjob}
+
编制: ${ + d.data.fplan + }
+
在岗: ${ + d.data.fonjob + }
-
` - } else if(d.data.ftype == 3) { - return `
+
`; + } else if (d.data.ftype == 3) { + return `
${d.data.fname} @@ -280,7 +309,7 @@ export default function userPage() { color: #333333; margin-bottom: 23px; " onclick="window.open('${ - jobtitleUrl + d.data.fnumber + jobtitleUrl + d.data.fnumber }', '_blank')">${d.data.fname}
+
`; + } else if (d.data.ftype == 4) { + return `
+
@@ -305,7 +336,11 @@ export default function userPage() {
- +
${d.data.department ? d.data.department + " / " : ""}${d.data.fleaderjob}
+ ">${d.data.department ? d.data.department + ' / ' : ''}${ + d.data.fleaderjob + }
${d.data.mobile ? d.data.mobile : ""}
+ ">${d.data.mobile ? d.data.mobile : ''}
${d.data.address ? "地址：" + d.data.address : ""}
+ ">${d.data.address ? '地址：' + d.data.address : ''}
-
` - } +
`; } + }; - return ( -
- {handleExport()}} - onSearch={(requestData) => {handleSearch(requestData)}} - url="/api/bs/hrmorganization/orgchart/getCondition?type=user" - /> - handleTopLayoutClick(progressBtn)} - onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} - onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} - onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} - /> - orgChart = chart} - setClick={click => (addNodeChildFunc = click)} - onNodeClick={onNodeClick} - onButtonClick={onButtonClick} - data={data} - buttonContent={ - buttonContentRender - } - nodeWidth={nodeWidthRender} - nodeHeight={nodeHeightRender} - nodeContent={nodeContentRender} - /> -
- ); + return ( +
+ { + handleExport(type); + }} + onSearch={(requestData) => { + handleSearch(requestData); + }} + url="/api/bs/hrmorganization/orgchart/getCondition?type=user" + /> + handleTopLayoutClick(progressBtn)} + onLeftLayoutClick={(progressBtn) => handleLeftLayoutClick(progressBtn)} + onZoomOut={(progressBtn) => handleZoomOut(progressBtn)} + onZoomIn={(progressBtn) => handleZoomIn(progressBtn)} + /> + (orgChart = chart)} + setClick={(click) => (addNodeChildFunc = click)} + onNodeClick={onNodeClick} + onButtonClick={onButtonClick} + data={data} + buttonContent={buttonContentRender} + nodeWidth={nodeWidthRender} + nodeHeight={nodeHeightRender} + nodeContent={nodeContentRender} + /> +
+ ); }