From 55dbade138cba0bbd7f8a4fa03b92e409bdc6cd1 Mon Sep 17 00:00:00 2001 From: Chengliang <1546584672@qq.com> Date: Thu, 20 Jun 2024 18:14:42 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=9E=B6=E6=9E=84=E5=9B=BE?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/drawer/index.jsx | 205 ++++++++++++++++++++++++-------- src/pages/company.jsx | 16 ++- src/pages/index.less | 40 ++++++- 3 files changed, 206 insertions(+), 55 deletions(-) diff --git a/src/components/drawer/index.jsx b/src/components/drawer/index.jsx index 0c29197..da2b727 100644 --- a/src/components/drawer/index.jsx +++ b/src/components/drawer/index.jsx @@ -8,6 +8,8 @@ import { Table, Spin, Checkbox, + Row, + Col, } from 'antd'; import { OrgChartComponent } from '@/components/orgChart'; import * as d3 from 'd3'; @@ -33,6 +35,9 @@ export default class DrawerComponents extends React.Component { columns: [], spinning: true, showJob: false, + defaultTypeValue: ['isBelongTo'], + defaultStatusValue: [0, 1, 2, 3], + disabled: false, }; } @@ -304,17 +309,19 @@ export default class DrawerComponents extends React.Component { : './img/default_avator.png' }" style="width: 58px; height: 58px; border-radius: 50%; margin-top: 16px;margin-left: -6px;z-index:999" /> -
+
-
${ - d.data.fname - }
+
+ ${d.data.fname} + (${d.data.accountType}) +
-
+
${getLabel(547324, labelData)}: ${ d.data.companyWorkYear } ${getLabel(547526, labelData)}
+
`; @@ -322,22 +329,76 @@ export default class DrawerComponents extends React.Component { }; showDrawer = (params) => { + const { defaultStatusValue, defaultTypeValue } = this.state; + params = { + ...params, + typeValue: defaultTypeValue.join(','), + statusValue: defaultStatusValue.join(','), + }; this.getDeatilDatas(params, 'chart', '0'); this.setState({ open: true, params: params }); }; onClose = () => { - this.setState({ open: false, detailType: 'chart', showJob: false }); + this.setState({ + open: false, + detailType: 'chart', + showJob: false, + defaultStatusValue: [0, 1, 2, 3], + defaultTypeValue: ['isBelongTo'], + disabled: false, + }); }; changeDetail = () => { - const { detailType, params } = this.state; + const { detailType, params, defaultTypeValue, defaultStatusValue } = + this.state; + const newParam = { + ...params, + typeValue: defaultTypeValue.join(','), + statusValue: defaultStatusValue.join(','), + }; let type = detailType == 'chart' ? 'table' : 'chart'; const showJob = this.state.showJob ? '1' : '0'; this.setState({ detailType: type, }); - this.getDeatilDatas(params, type, showJob); + this.getDeatilDatas(newParam, type, showJob); + }; + + onStatusChange = (checkedValues) => { + if (checkedValues.length === 0) { + return message.error('至少选择一种人员性质', 2); + } + this.setState({ + defaultStatusValue: checkedValues, + }); + const { defaultTypeValue, params, detailType } = this.state; + const showJob = this.state.showJob ? '1' : '0'; + const nParam = { + ...params, + statusValue: checkedValues.join(','), + typeValue: defaultTypeValue.join(','), + }; + this.getDeatilDatas(nParam, detailType, showJob); + }; + + onTypeChange = (checkedValues) => { + if (this.state.showJob) { + return message.error('已勾选岗位模式显示', 2); + } + this.setState({ + defaultTypeValue: checkedValues, + disabled: checkedValues.includes('isManager') ? true : false, + }); + const { defaultStatusValue, params, detailType } = this.state; + const showJob = this.state.showJob ? '1' : '0'; + const nParam = { + ...params, + statusValue: defaultStatusValue.join(','), + typeValue: checkedValues.join(','), + }; + this.getDeatilDatas(nParam, detailType, showJob); }; render() { @@ -350,11 +411,30 @@ export default class DrawerComponents extends React.Component { columns, spinning, showJob, + defaultStatusValue, + defaultTypeValue, + disabled, } = this.state; let arr = []; const { labelData } = this.props; + const optionsType = [ + { label: '显示人员上下级', value: 'isManager' }, + { label: '显示次账号', value: 'isBelongTo' }, + ]; + + const optionsStatus = [ + { label: '试用', value: 0 }, + { label: '正式', value: 1 }, + { label: '临时', value: 2 }, + { label: '试用延期', value: 3 }, + { label: '解聘', value: 4 }, + { label: '离职', value: 5 }, + { label: '退休', value: 6 }, + { label: '无效', value: 7 }, + ]; + if (detailType == 'chart') { arr.push({ label: `${getLabel(547315, labelData)}`, key: '1' }); //arr.push({ label: '导出PDF', key: '2' }); @@ -367,7 +447,7 @@ export default class DrawerComponents extends React.Component { return ( { this.setState({ showJob: e.target.checked, }); - + const newParam = { + ...params, + statusValue: defaultStatusValue.join(','), + typeValue: defaultTypeValue.join(','), + }; this.getDeatilDatas( - params, + newParam, detailType, e.target.checked ? '1' : '0', ); @@ -403,44 +488,68 @@ export default class DrawerComponents extends React.Component { } > - {detailType == 'chart' ? ( -
- - {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} + <> + {detailType == 'chart' && ( + + 显示模式： + + + + + )} + + 人员性质： + + - )} -
- ) : ( -
- - `${getLabel(547523, labelData)} ${ - dataSource.length - } ${getLabel(547524, labelData)}`, - }} - /> - - )} + + + {detailType == 'chart' ? ( +
+ + {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} + /> + )} +
+ ) : ( +
+
+ `${getLabel(547523, labelData)} ${ + dataSource.length + } ${getLabel(547524, labelData)}`, + }} + /> + + )} + ); } diff --git a/src/pages/company.jsx b/src/pages/company.jsx index caa8dc2..100a459 100644 --- a/src/pages/company.jsx +++ b/src/pages/company.jsx @@ -185,10 +185,11 @@ export default function companyPage() {
-
${d.data.fname}
+
+
${d.data.fname}
+
${d.data.fname}
+
+
${d.data.staffNum} / ${d.data.onJobNum} @@ -206,8 +207,11 @@ export default function companyPage() {
-
${d.data.fname}
+
+
${d.data.fname}
+
${d.data.fname}
+
+
${d.data.staffNum} / ${d.data.onJobNum} diff --git a/src/pages/index.less b/src/pages/index.less index bd93022..618795f 100644 --- a/src/pages/index.less +++ b/src/pages/index.less @@ -114,6 +114,44 @@ } .ant-drawer-body { - padding: 0px; + padding: 0; overflow: hidden; } + +.tooltip { + position: relative; + display: inline-block; + cursor: pointer; + width: 110px; + margin: 0 auto; + line-height: 18px; + word-break: break-all; +} + +.tooltip .tooltitle { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 144px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 39%; + margin-left: -60px; + opacity: 0; + transition: opacity 0.3s; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +}