diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..7c4c28f Binary files /dev/null and b/dist.zip differ diff --git a/package.json b/package.json index 7f0d301..abd3425 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@types/d3": "^7.4.0", "d3": "7.4.4", "d3-org-chart": "2.6.0", + "js-export-excel": "^1.1.4", "jspdf": "^2.5.1", "moment": "^2.29.3", "qs": "^6.11.0", diff --git a/public/img/user-card/avatar-outer-green.png b/public/img/user-card/avatar-outer-green.png new file mode 100644 index 0000000..aee791f Binary files /dev/null and b/public/img/user-card/avatar-outer-green.png differ diff --git a/public/img/user-card/jobicon-orange.png b/public/img/user-card/jobicon-orange.png new file mode 100644 index 0000000..3c5da8e Binary files /dev/null and b/public/img/user-card/jobicon-orange.png differ diff --git a/public/img/user-card/user-card-blue.png b/public/img/user-card/user-card-blue.png new file mode 100644 index 0000000..5a67581 Binary files /dev/null and b/public/img/user-card/user-card-blue.png differ diff --git a/public/img/user-card/user-card-green.png b/public/img/user-card/user-card-green.png new file mode 100644 index 0000000..13bae55 Binary files /dev/null and b/public/img/user-card/user-card-green.png differ diff --git a/public/img/user-card/user-card-orange.png b/public/img/user-card/user-card-orange.png new file mode 100644 index 0000000..d11807c Binary files /dev/null and b/public/img/user-card/user-card-orange.png differ diff --git a/public/img/user-card/绿色-虚线.png b/public/img/user-card/绿色-虚线.png new file mode 100644 index 0000000..a8a0f01 Binary files /dev/null and b/public/img/user-card/绿色-虚线.png differ diff --git a/src/components/drawer/index.jsx b/src/components/drawer/index.jsx index e434c86..d7437d4 100644 --- a/src/components/drawer/index.jsx +++ b/src/components/drawer/index.jsx @@ -1,11 +1,11 @@ import React from 'react'; -import { Drawer, Space, Button, Dropdown, Menu, Table } from 'antd'; +import { Drawer, Space, Button, Dropdown, Menu, Table, Spin } from 'antd'; import { OrgChartComponent } from '@/components/orgChart'; import * as d3 from 'd3'; import qs from 'qs'; import { message } from 'antd'; import jsPDF from 'jspdf'; -import styles from './index.less'; +import ExportJsonExcel from 'js-export-excel'; let addNodeChildFunc = null; let orgChart = null; @@ -18,12 +18,13 @@ export default class DrawerComponents extends React.Component { data: [], detailType: 'chart', rootId: '', + dataSource: [], + columns: [], + spinning: true, }; } - componentDidMount() { - //this.getDeatilDatas(); - } + componentDidMount() {} // 点击节点 onNodeClick(node) {} @@ -39,34 +40,29 @@ export default class DrawerComponents extends React.Component { if (idsList.length == 0) { return; } - let idsStr = idsList.join(','); - let api = '/api/bs/hrmorganization/orgchart/asyncUserData?ids=' + idsStr; - fetch(api) - .then((res) => res.json()) - .then((data) => { - if (data.data) { - data.data.forEach((item) => { - window.chart.addNode(item); - }); - } - }); } } // 获取部门图片 - getDepartmentImage() { - let index = Math.floor(Math.random() * 8) + 1; - return `./img/department/${index}.png`; + getDepartmentImage(fisvitual) { + return fisvitual == '0' + ? `./img/user-card/user-card.png` + : `./img/user-card/user-card-blue.png`; } //获取数据 - getDeatilDatas(rootId) { - const { detailType } = this.state; + getDeatilDatas(rootId, type = 'chart') { + this.setState({ spinning: true }); d3.json( - '/api/bs/hrmorganization/orgchart/userData?' + - qs.stringify({ detauleType: detailType, rootId: rootId }), + '/api/bs/hrmorganization/orgchart/getDepartmentDetail?' + + qs.stringify({ detauleType: type, rootId: rootId }), ).then((data) => { - this.setState(data.data); + // + if (type == 'chart') { + this.setState({ data: data.data, spinning: false }); + } else { + this.setState({ dataSource: data.dataSource, columns: data.columns }); + } }); } @@ -133,7 +129,7 @@ export default class DrawerComponents extends React.Component { orgChart && orgChart.zoomOut(); }; - downloadPdf(chart) { + downloadPdf = (chart) => { chart.exportImg({ save: false, full: true, @@ -154,14 +150,64 @@ export default class DrawerComponents extends React.Component { }; }, }); - } + }; handleExport = (e) => { - let type = e.key == '1' ? 'png' : 'pdf'; + let type = e.key == '1' ? 'png' : e.key == '1' ? 'pdf' : 'excel'; if (type == 'png') { orgChart && orgChart.exportImg({ full: true }); + } else if (type == 'pdf') { + orgChart && this.downloadPdf(orgChart); } else { - orgChart && downloadPdf(orgChart); + let { dataSource } = this.state; + var option = {}; + let dataTable = []; + if (dataSource) { + for (let i in dataSource) { + if (dataSource) { + let obj = { + 序号: dataSource[i].id, + 工号: dataSource[i].workCode, + 姓名: dataSource[i].lastName, + 性别: dataSource[i].sex, + 部门: dataSource[i].departmentId, + 分部: dataSource[i].subcompanyid1, + 岗位: dataSource[i].jobTitle, + 手机号: dataSource[i].mobile, + }; + dataTable.push(obj); + } + } + } + option.fileName = '组织信息'; + option.datas = [ + { + sheetData: dataTable, + sheetName: 'sheet', + sheetFilter: [ + '序号', + '工号', + '姓名', + '性别', + '部门', + '分部', + '岗位', + '手机号', + ], + sheetHeader: [ + '序号', + '工号', + '姓名', + '性别', + '部门', + '分部', + '岗位', + '手机号', + ], + }, + ]; + var toExcel = new ExportJsonExcel(option); + toExcel.saveExcel(); } }; @@ -173,40 +219,41 @@ export default class DrawerComponents extends React.Component { return `
- +
-
${ - d.data.fleadername - }
-
- ${d.data.fname}${ - d.data.fleaderjob ? `/${d.data.fleaderjob}` : '' - } +
+ ${d.data.fname} +
+
+ 负责人:${d.data.fleader}
-
-
-
- 在岗: ${d.data.fonjob} +
+
+ 在岗: ${d.data.fonjob} 人 +
+
`; } else if (d.data.ftype == 3) { return `
-
- +
+
- +
-
${d.data.fname}
-
- 在岗：${d.data.fonjob} +
${d.data.fname}
+
+ 在岗: ${d.data.fonjob} 人
@@ -214,25 +261,28 @@ export default class DrawerComponents extends React.Component { } else if (d.data.ftype == 4) { return `
-
- +
+
-
- - +
+ + +
+
+
+
${ + d.data.fname + }
-
-
-
${ - d.data.fname - }
-
+
+ 司龄: ${d.data.companyWorkYear} 年
+
`; } }; @@ -243,72 +293,35 @@ export default class DrawerComponents extends React.Component { }; onClose = () => { - this.setState({ open: false }); + this.setState({ open: false, detailType: 'chart' }); }; changeDetail = () => { const { detailType, rootId } = this.state; - this.getDeatilDatas(rootId); + let type = detailType == 'chart' ? 'table' : 'chart'; this.setState({ - detailType: detailType == 'chart' ? 'table' : 'chart', + detailType: type, }); + this.getDeatilDatas(rootId, type); }; render() { - const { open, data, detailType } = this.state; - - const menu = ( - - ); - const dataSource = [ - { - key: '1', - name: '胡彦斌', - age: 32, - address: '西湖区湖底公园1号', - }, - { - key: '2', - name: '胡彦祖', - age: 42, - address: '西湖区湖底公园1号', - }, - ]; + const { open, data, detailType, dataSource, columns, spinning } = + this.state; + let arr = []; + if (detailType == 'chart') { + arr.push({ label: '导出图片', key: '1' }); + arr.push({ label: '导出PDF', key: '2' }); + } else { + arr.push({ label: '导出表格', key: '3' }); + } - const columns = [ - { - title: '姓名', - dataIndex: 'name', - key: 'name', - }, - { - title: '年龄', - dataIndex: 'age', - key: 'age', - }, - { - title: '住址', - dataIndex: 'address', - key: 'address', - }, - ]; + const menu = ; return ( {detailType == 'chart' ? ( - (orgChart = chart)} - setClick={(click) => (addNodeChildFunc = click)} - onNodeClick={this.onNodeClick} - onButtonClick={this.onButtonClick} - data={data} - buttonContent={this.buttonContentRender} - nodeWidth={this.nodeWidthRender} - nodeHeight={this.nodeHeightRender} - nodeContent={this.nodeContentRender} - /> + data.length > 0 && ( + + (orgChart = chart)} + setClick={(click) => (addNodeChildFunc = click)} + onNodeClick={this.onNodeClick} + onButtonClick={this.onButtonClick} + data={data} + buttonContent={this.buttonContentRender} + nodeWidth={this.nodeWidthRender} + nodeHeight={this.nodeHeightRender} + nodeContent={this.nodeContentRender} + /> + + ) ) : ( )} diff --git a/src/components/topBar/index.jsx b/src/components/topBar/index.jsx index f39c473..031c8e7 100644 --- a/src/components/topBar/index.jsx +++ b/src/components/topBar/index.jsx @@ -261,18 +261,17 @@ export class TopBar extends React.Component { - {type == 'user' && ( - - )} + +