@ -8,8 +8,6 @@ import {
Table ,
Table ,
Spin ,
Spin ,
Checkbox ,
Checkbox ,
Row ,
Col ,
} from 'antd' ;
} from 'antd' ;
import { OrgChartComponent } from '@/components/orgChart' ;
import { OrgChartComponent } from '@/components/orgChart' ;
import * as d3 from 'd3' ;
import * as d3 from 'd3' ;
@ -18,7 +16,6 @@ import { message } from 'antd';
import jsPDF from 'jspdf' ;
import jsPDF from 'jspdf' ;
import ExportJsonExcel from 'js-export-excel' ;
import ExportJsonExcel from 'js-export-excel' ;
import './index.less' ;
import './index.less' ;
import { getLabel } from '../../util/i18n.js' ;
let addNodeChildFunc = null ;
let addNodeChildFunc = null ;
let orgChart = null ;
let orgChart = null ;
@ -34,24 +31,14 @@ export default class DrawerComponents extends React.Component {
dataSource : [ ] ,
dataSource : [ ] ,
columns : [ ] ,
columns : [ ] ,
spinning : true ,
spinning : true ,
showJob : false ,
showJob : false , / / 港 湾 二 开 不 显 示 岗 位
defaultTypeValue : [ 'isBelongTo' ] ,
defaultStatusValue : [ 0 , 1 , 2 , 3 ] ,
disabled : false ,
} ;
} ;
}
}
componentDidMount ( ) { }
componentDidMount ( ) { }
/ / 点 击 节 点
/ / 点 击 节 点
onNodeClick ( node ) {
onNodeClick ( node ) { }
if ( node . ftype == '4' ) {
window . open (
` /spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/ ${ node . id } ` ,
'_blank' ,
) ;
}
}
onButtonClick ( event , d ) {
onButtonClick ( event , d ) {
if ( d . children ) {
if ( d . children ) {
@ -75,8 +62,8 @@ export default class DrawerComponents extends React.Component {
}
}
/ / 获 取 数 据
/ / 获 取 数 据
getDeatilDatas ( params , type = 'chart' , showJob = ' 1 ') {
getDeatilDatas ( params , type = 'chart' , showJob = ' 0 ') {
this . setState ( { spinning : true , data : [ ] , dataSource : [ ] } ) ;
this . setState ( { spinning : true } ) ;
d3 . json (
d3 . json (
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
'/api/bs/hrmorganization/orgchart/getDepartmentDetail?' +
qs . stringify ( { detauleType : type , ... params , showJob } ) ,
qs . stringify ( { detauleType : type , ... params , showJob } ) ,
@ -85,11 +72,7 @@ export default class DrawerComponents extends React.Component {
if ( type == 'chart' ) {
if ( type == 'chart' ) {
this . setState ( { data : data . data , spinning : false } ) ;
this . setState ( { data : data . data , spinning : false } ) ;
} else {
} else {
this . setState ( {
this . setState ( { dataSource : data . dataSource , columns : data . columns } ) ;
dataSource : data . dataSource ,
columns : data . columns ,
spinning : false ,
} ) ;
}
}
} ) ;
} ) ;
}
}
@ -181,7 +164,6 @@ export default class DrawerComponents extends React.Component {
} ;
} ;
handleExport = ( e ) => {
handleExport = ( e ) => {
const { labelData } = this . props ;
let type = e . key == '1' ? 'png' : e . key == '1' ? 'pdf' : 'excel' ;
let type = e . key == '1' ? 'png' : e . key == '1' ? 'pdf' : 'excel' ;
if ( type == 'png' ) {
if ( type == 'png' ) {
orgChart && orgChart . exportImg ( { full : true } ) ;
orgChart && orgChart . exportImg ( { full : true } ) ;
@ -208,30 +190,30 @@ export default class DrawerComponents extends React.Component {
}
}
}
}
}
}
option . fileName = ` ${ getLabel ( 547468 , labelData ) } ` ;
option . fileName = '组织信息' ;
option . datas = [
option . datas = [
{
{
sheetData : dataTable ,
sheetData : dataTable ,
sheetName : 'sheet' ,
sheetName : 'sheet' ,
sheetFilter : [
sheetFilter : [
` ${ getLabel ( 547327 , labelData ) } ` ,
'序号' ,
` ${ getLabel ( 547328 , labelData ) } ` ,
'工号' ,
` ${ getLabel ( 547329 , labelData ) } ` ,
'姓名' ,
` ${ getLabel ( 547330 , labelData ) } ` ,
'性别' ,
` ${ getLabel ( 547331 , labelData ) } ` ,
'部门' ,
` ${ getLabel ( 547332 , labelData ) } ` ,
'分部' ,
` ${ getLabel ( 547333 , labelData ) } ` ,
'岗位' ,
` ${ getLabel ( 547334 , labelData ) } ` ,
'手机号' ,
] ,
] ,
sheetHeader : [
sheetHeader : [
` ${ getLabel ( 547327 , labelData ) } ` ,
'序号' ,
` ${ getLabel ( 547328 , labelData ) } ` ,
'工号' ,
` ${ getLabel ( 547329 , labelData ) } ` ,
'姓名' ,
` ${ getLabel ( 547330 , labelData ) } ` ,
'性别' ,
` ${ getLabel ( 547331 , labelData ) } ` ,
'部门' ,
` ${ getLabel ( 547332 , labelData ) } ` ,
'分部' ,
` ${ getLabel ( 547333 , labelData ) } ` ,
'岗位' ,
` ${ getLabel ( 547334 , labelData ) } ` ,
'手机号' ,
] ,
] ,
} ,
} ,
] ;
] ;
@ -244,8 +226,6 @@ export default class DrawerComponents extends React.Component {
* 节点渲染
* 节点渲染
* /
* /
nodeContentRender = ( d , i , arr , state ) => {
nodeContentRender = ( d , i , arr , state ) => {
const { labelData } = this . props ;
if ( d . data . ftype == 2 ) {
if ( d . data . ftype == 2 ) {
return ` <div style="position: relative;">
return ` <div style="position: relative;">
< div style = " height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2" >
< div style = " height: 152px;background-size: 100% 100%;box-sizing: border-box;padding-top: 30px;position:relative;z-index:2" >
@ -262,14 +242,12 @@ export default class DrawerComponents extends React.Component {
< div class = "dept-box" style = "font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
< div class = "dept-box" style = "font-size: 15px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 900;color: #333333;height: 25px;line-height: 25px;width:110px,white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
$ { d . data . fname }
$ { d . data . fname }
< / div >
< / div >
< div style = "font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333; line-height: 25px;">
< div style = "font-size: 13px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333; height: 25px; line-height: 25px;">
$ { getLabel ( 547190 , labelData ) } : $ { d . data . fleader }
负责人 : $ { d . data . fleader }
< / div >
< / div >
< div style = "display:flex" >
< div style = "display:flex" >
< div style = "height: 25px; line-height: 25px; min-width: 80px;" >
< div style = "height: 25px; line-height: 25px; min-width: 80px;" >
$ { getLabel ( 547323 , labelData ) } : $ {
在岗 : $ { d . data . fonjob } 人
d . data . fonjob
} $ { getLabel ( 547525 , labelData ) }
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -284,13 +262,9 @@ export default class DrawerComponents extends React.Component {
< / div >
< / div >
< img src = "./img/user-card/jobicon-orange.png" style = "margin-left: 20px; vertical-align: top;" / >
< img src = "./img/user-card/jobicon-orange.png" style = "margin-left: 20px; vertical-align: top;" / >
< div style = "display: inline-block; margin-left: 15px;" >
< div style = "display: inline-block; margin-left: 15px;" >
< div style = "font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;" > $ {
< div style = "font-size: 15px;height: 25px;line-height: 25px;font-family: Microsoft YaHei-Bold, Microsoft YaHei;font-weight: bold;color: #333333;" > $ { d . data . fname } < / div >
d . data . fname
} < / div >
< div style = "font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;" >
< div style = "font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;" >
< span > $ { getLabel ( 547323 , labelData ) } : $ {
< span > 在岗 : $ { d . data . fonjob } 人 < / span >
d . data . fonjob
} $ { getLabel ( 547525 , labelData ) } < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -309,19 +283,18 @@ export default class DrawerComponents extends React.Component {
: './img/default_avator.png'
: './img/default_avator.png'
} " style=" width : 58 px ; height : 58 px ; border - radius : 50 % ; margin - top : 16 px ; margin - left : - 6 px ; z - index : 999 " / >
} " style=" width : 58 px ; height : 58 px ; border - radius : 50 % ; margin - top : 16 px ; margin - left : - 6 px ; z - index : 999 " / >
< / div >
< / div >
< div style = "display: inline-block;width: 55%;height:100%" >
< div style = "display: inline-block; margin-left: 6px;width: 55%;height:100%" >
< div style = 'display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:2px' >
< div style = 'display:flex;align-items:center;height: 25px;line-height: 25px;margin-top:15px' >
< div style = "font-weight: bold;font-size: 14px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;" >
< div style = "font-weight: bold;font-size: 15px;ont-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;" > $ {
$ { d . data . fname }
d . data . fname
< span style = 'color: red;' > ( $ { d . data . accountType } ) < / span >
} < / div >
< / div >
< / div >
< / div >
< div style = "font-size: 13px;margin-top: 5px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;" >
< div style = "font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;" >
< span > $ { getLabel ( 547324 , labelData ) } : $ {
< span > 司龄 : $ { d . data . companyWorkYear } 年 < / span >
d . data . companyWorkYear
< / div >
} $ { getLabel ( 547526 , labelData ) } < / span >
< div style = "font-size: 13px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: #333333;display: flex;height: 25px;line-height: 25px;" >
< span > 岗位 : $ { d . data . jobName } < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div > ` ;
< / div > ` ;
@ -329,78 +302,24 @@ export default class DrawerComponents extends React.Component {
} ;
} ;
showDrawer = ( params ) => {
showDrawer = ( params ) => {
const { defaultStatusValue , defaultTypeValue } = this . state ;
/ / 港 湾 二 开 不 显 示 岗 位
params = {
const showJob = '0' ;
... params ,
this . getDeatilDatas ( params , 'chart' , showJob ) ;
typeValue : defaultTypeValue . join ( ',' ) ,
statusValue : defaultStatusValue . join ( ',' ) ,
} ;
this . getDeatilDatas ( params , 'chart' , '0' ) ;
this . setState ( { open : true , params : params } ) ;
this . setState ( { open : true , params : params } ) ;
} ;
} ;
onClose = ( ) => {
onClose = ( ) => {
this . setState ( {
this . setState ( { open : false , detailType : 'chart' , showJob : false } ) ;
open : false ,
detailType : 'chart' ,
showJob : false ,
defaultStatusValue : [ 0 , 1 , 2 , 3 ] ,
defaultTypeValue : [ 'isBelongTo' ] ,
disabled : false ,
} ) ;
} ;
} ;
changeDetail = ( ) => {
changeDetail = ( ) => {
const { detailType , params , defaultTypeValue , defaultStatusValue } =
const { detailType , params } = this . state ;
this . state ;
const newParam = {
... params ,
typeValue : defaultTypeValue . join ( ',' ) ,
statusValue : defaultStatusValue . join ( ',' ) ,
} ;
let type = detailType == 'chart' ? 'table' : 'chart' ;
let type = detailType == 'chart' ? 'table' : 'chart' ;
const showJob = this . state . showJob ? '1' : '0' ;
const showJob = '0' ;
this . setState ( {
this . setState ( {
detailType : type ,
detailType : type ,
} ) ;
} ) ;
this . getDeatilDatas ( newParam , type , showJob ) ;
this . getDeatilDatas ( params , type , showJob ) ;
} ;
onStatusChange = ( checkedValues ) => {
const { labelData } = this . props ;
if ( checkedValues . length === 0 ) {
return message . error ( ` ${ getLabel ( 547728 , labelData ) } ` , 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 ) => {
const { labelData } = this . props ;
if ( this . state . showJob ) {
return message . error ( ` ${ getLabel ( 547729 , labelData ) } ` , 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 ( ) {
render ( ) {
@ -413,43 +332,21 @@ export default class DrawerComponents extends React.Component {
columns ,
columns ,
spinning ,
spinning ,
showJob ,
showJob ,
defaultStatusValue ,
defaultTypeValue ,
disabled ,
} = this . state ;
} = this . state ;
let arr = [ ] ;
let arr = [ ] ;
const { labelData } = this . props ;
const optionsType = [
{ label : ` ${ getLabel ( 547715 , labelData ) } ` , value : 'isManager' } ,
{ label : ` ${ getLabel ( 547716 , labelData ) } ` , value : 'isBelongTo' } ,
] ;
const optionsStatus = [
{ label : ` ${ getLabel ( 547718 , labelData ) } ` , value : 0 } ,
{ label : ` ${ getLabel ( 547719 , labelData ) } ` , value : 1 } ,
{ label : ` ${ getLabel ( 547720 , labelData ) } ` , value : 2 } ,
{ label : ` ${ getLabel ( 547721 , labelData ) } ` , value : 3 } ,
{ label : ` ${ getLabel ( 547722 , labelData ) } ` , value : 4 } ,
{ label : ` ${ getLabel ( 547723 , labelData ) } ` , value : 5 } ,
{ label : ` ${ getLabel ( 547724 , labelData ) } ` , value : 6 } ,
{ label : ` ${ getLabel ( 547725 , labelData ) } ` , value : 7 } ,
] ;
if ( detailType == 'chart' ) {
if ( detailType == 'chart' ) {
arr . push ( { label : ` ${ getLabel ( 547315 , labelData ) } ` , key : '1' } ) ;
arr . push ( { label : '导出图片' , key : '1' } ) ;
/ / a r r . p u s h ( { l a b e l : ' 导 出 P D F ' , k e y : ' 2 ' } ) ;
/ / a r r . p u s h ( { l a b e l : ' 导 出 P D F ' , k e y : ' 2 ' } ) ;
} else {
} else {
arr . push ( { label : ` ${ getLabel ( 547448 , labelData ) } ` , key : '3' } ) ;
arr . push ( { label : '导出表格' , key : '3' } ) ;
}
}
const menu = < Menu onClick = { this . handleExport . bind ( this ) } items = { arr } / > ;
const menu = < Menu onClick = { this . handleExport . bind ( this ) } items = { arr } / > ;
return (
return (
< Drawer
< Drawer
title = { getLabel ( 547321 , labelData ) }
title = "详细信息"
width = { 1 2 00}
width = { 1100 }
onClose = { this . onClose }
onClose = { this . onClose }
open = { open }
open = { open }
bodyStyle = { {
bodyStyle = { {
@ -457,101 +354,51 @@ export default class DrawerComponents extends React.Component {
} }
} }
extra = {
extra = {
< Space >
< Space >
{ detailType == 'chart' && params && params . fclass == '0' && (
< Checkbox
style = { { marginTop : '5px' , marginLeft : 100 } }
checked = { showJob }
disabled = { disabled }
onChange = { ( e ) => {
this . setState ( {
showJob : e . target . checked ,
} ) ;
const newParam = {
... params ,
statusValue : defaultStatusValue . join ( ',' ) ,
typeValue : defaultTypeValue . join ( ',' ) ,
} ;
this . getDeatilDatas (
newParam ,
detailType ,
e . target . checked ? '1' : '0' ,
) ;
} }
>
{ getLabel ( 547447 , labelData ) }
< / Checkbox >
) }
< Dropdown overlay = { menu } >
< Dropdown overlay = { menu } >
< Button type = "primary" > { getLabel ( 547314 , labelData ) } < / Button >
< Button type = "primary" > 导出 < / Button >
< / Dropdown >
< / Dropdown >
< Button type = "primary" onClick = { this . changeDetail } >
< img
{ getLabel ( 547326 , labelData ) }
style = { { width : 36 , height : 36 , cursor : 'pointer' } }
< / Button >
src = "./img/change.png"
onClick = { this . changeDetail }
/ >
< / Space >
< / Space >
}
}
>
>
< >
{ detailType == 'chart' ? (
{ detailType == 'chart' && (
data . length > 0 && (
< Row style = { { margin : '20px 20px 0px 20px' } } >
< Spin size = "large" spinning = { spinning } >
< Col span = { 2 } > { getLabel ( 547714 , labelData ) } : < / Col >
< OrgChartComponent
< Col span = { 22 } >
setChart = { ( chart ) => ( orgChart = chart ) }
< Checkbox.Group
setClick = { ( click ) => ( addNodeChildFunc = click ) }
options = { optionsType }
onNodeClick = { this . onNodeClick }
value = { defaultTypeValue }
onButtonClick = { this . onButtonClick }
onChange = { this . onTypeChange }
data = { data }
/ >
buttonContent = { this . buttonContentRender }
< / Col >
nodeWidth = { this . nodeWidthRender }
< / Row >
nodeHeight = { this . nodeHeightRender }
) }
nodeContent = { this . nodeContentRender }
< Row style = { { margin : '10px 20px 10px 20px' } } >
< Col span = { 2 } > { getLabel ( 547717 , labelData ) } : < / Col >
< Col span = { 22 } >
< Checkbox.Group
options = { optionsStatus }
value = { defaultStatusValue }
onChange = { this . onStatusChange }
/ >
/ >
< / Col >
< / Spin >
< / Row >
)
{ detailType == 'chart' ? (
) : (
< div className = "svg-container" >
< div style = { { padding : '0 20px' } } >
< Spin
< Table
size = "large"
dataSource = { dataSource }
spinning = { spinning }
columns = { columns }
tip = { getLabel ( 547320 , labelData ) }
scroll = { { y : 500 } }
className = "loading-center"
pagination = { {
/ >
locale : {
{ data . length > 0 && (
/ / 翻 页 文 本 替 换
< OrgChartComponent
items _per _page : '条/页' ,
setChart = { ( chart ) => ( orgChart = chart ) }
jump _to : '跳至' ,
setClick = { ( click ) => ( addNodeChildFunc = click ) }
page : '页' ,
onNodeClick = { this . onNodeClick }
} ,
onButtonClick = { this . onButtonClick }
showTotal : ( total ) => ` 共 ${ dataSource . length } 条 ` ,
data = { data }
} }
buttonContent = { this . buttonContentRender }
/ >
nodeWidth = { this . nodeWidthRender }
< / div >
nodeHeight = { this . nodeHeightRender }
) }
nodeContent = { this . nodeContentRender }
/ >
) }
< / div >
) : (
< div style = { { padding : '0 20px' } } >
< Table
dataSource = { dataSource }
columns = { columns }
loading = { spinning }
pagination = { {
showSizeChanger : false ,
showTotal : ( total ) =>
` ${ getLabel ( 547523 , labelData ) } ${
dataSource . length
} $ { getLabel ( 547524 , labelData ) } ` ,
} }
/ >
< / div >
) }
< / >
< / Drawer >
< / Drawer >
) ;
) ;
}
}