@ -5,6 +5,7 @@ import qs from 'qs';
import MergeDialog from '../components/dialog/mergeDialog' ; import MergeDialog from '../components/dialog/mergeDialog' ;
import CopyDialog from '../components/dialog/copyDialog' ; import CopyDialog from '../components/dialog/copyDialog' ;
import inset from '../../public/img/back/inset.png' ; import inset from '../../public/img/back/inset.png' ;
import { getLabel } from '../util/i18n.js' ;
import { import {
HomeOutlined ,
HomeOutlined ,
@ -21,7 +22,7 @@ const DragTree = () => {
const [ expandedKeys , setExpandedKeys ] = useState ( [ undefined ] ) ;
const [ expandedKeys , setExpandedKeys ] = useState ( [ undefined ] ) ;
const childRef = useRef ( null ) ;
const childRef = useRef ( null ) ;
const copyChildRef = useRef ( null ) ;
const copyChildRef = useRef ( null ) ;
const [ tip , setTip ] = useState ( ' 正在加载,请稍候... ') ;
const [ tip , setTip ] = useState ( ' ') ;
const [ loading , setLoading ] = useState ( false ) ;
const [ loading , setLoading ] = useState ( false ) ;
const [ showCanceled , setShowCanceled ] = useState ( 0 ) ;
const [ showCanceled , setShowCanceled ] = useState ( 0 ) ;
const [ drawerOpen , setDrawerOpen ] = useState ( false ) ;
const [ drawerOpen , setDrawerOpen ] = useState ( false ) ;
@ -31,8 +32,13 @@ const DragTree = () => {
const [ mergeId , setMergeId ] = useState ( null ) ;
const [ mergeId , setMergeId ] = useState ( null ) ;
const [ copyopen , setCopyOpen ] = useState ( false ) ;
const [ copyopen , setCopyOpen ] = useState ( false ) ;
const [ copyId , setCopyId ] = useState ( null ) ;
const [ copyId , setCopyId ] = useState ( null ) ;
const [ labelData , setLabelData ] = useState ( { } ) ;
useEffect ( ( ) => {
useEffect ( ( ) => {
d3 . json ( '/api/bs/hrmorganization/orgchart/i18n' ) . then ( ( res ) => {
setLabelData ( res . data ) ;
setTip ( ` ${ getLabel ( 547473 , res . data ) } ` ) ;
} ) ;
getMoveTree ( 0 ) ;
getMoveTree ( 0 ) ;
} , [ true ] ) ;
} , [ true ] ) ;
@ -72,19 +78,24 @@ const DragTree = () => {
info . dropPosition - Number ( dropPos [ dropPos . length - 1 ] ) ;
info . dropPosition - Number ( dropPos [ dropPos . length - 1 ] ) ;
if ( dropPosition == - 1 ) {
if ( dropPosition == - 1 ) {
return message . error ( '不支持该操作！！！' , 2 ) ;
return message . error ( ` ${ getLabel ( 547475 , labelData ) } ` , 2 ) ;
}
}
let pos = dropPosition == 0 ? '内部' : '下方' ;
let pos =
dropPosition == 0
? ` ${ getLabel ( 547476 , labelData ) } `
: ` ${ getLabel ( 547477 , labelData ) } ` ;
let title = ` 确定将【 ${ info . dragNode . title } 】移到 【 ${ info . node . title } 】 ${ pos } ` ;
let title = ` ${ getLabel ( 547478 , labelData ) } 【 ${
info . dragNode . title
} $ { getLabel ( 547479 , labelData ) } 【 $ { info . node . title } 】 $ { pos } ` ;
Modal . confirm ( {
Modal . confirm ( {
title : '转移操作' ,
title : ` ${ getLabel ( 547480 , labelData ) } ` ,
content : title ,
content : title ,
okText : '确认' ,
okText : ` ${ getLabel ( 547319 , labelData ) } ` ,
cancelText : '取消' ,
cancelText : ` ${ getLabel ( 547318 , labelData ) } ` ,
onOk ( ) {
onOk ( ) {
setLoading ( true ) ;
setLoading ( true ) ;
setTip ( '正在转移，请稍候...' ) ;
setTip ( ` ${ getLabel ( 547481 , labelData ) } ` ) ;
fetch ( '/api/bs/hrmorganization/dept/dragDepartment' , {
fetch ( '/api/bs/hrmorganization/dept/dragDepartment' , {
method : 'POST' ,
method : 'POST' ,
@ -142,14 +153,14 @@ const DragTree = () => {
}
}
}
}
setGData ( data ) ;
setGData ( data ) ;
message . success ( '转移成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547482 , labelData ) } ` , 2 ) ;
} else {
} else {
message . warning ( res . msg , 2 ) ;
message . warning ( res . msg , 2 ) ;
}
}
setLoading ( false ) ;
setLoading ( false ) ;
} )
} )
. catch ( ( error ) => {
. catch ( ( error ) => {
message . error ( '接口异常,请联系管理员' ) ;
message . error ( ` ${ getLabel ( 547483 , labelData ) } ` ) ;
} ) ;
} ) ;
} ,
} ,
onCancel ( ) { } ,
onCancel ( ) { } ,
@ -178,14 +189,14 @@ const DragTree = () => {
arr . splice ( index , 1 ) ;
arr . splice ( index , 1 ) ;
} ) ;
} ) ;
setGData ( data ) ;
setGData ( data ) ;
message . success ( '删除成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547484 , labelData ) } ` , 2 ) ;
} else {
} else {
message . warning ( res . data . message , 2 ) ;
message . warning ( res . data . message , 2 ) ;
}
}
}
}
} )
} )
. catch ( ( error ) => {
. catch ( ( error ) => {
message . error ( '接口异常,请联系管理员' ) ;
message . error ( ` ${ getLabel ( 547483 , labelData ) } ` ) ;
} ) ;
} ) ;
} ;
} ;
@ -211,7 +222,7 @@ const DragTree = () => {
if ( res . code == 200 ) {
if ( res . code == 200 ) {
const data = [ ... gData ] ;
const data = [ ... gData ] ;
if ( nodeData . canceled != '0' ) {
if ( nodeData . canceled != '0' ) {
message . success ( '恢复成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547485 , labelData ) } ` , 2 ) ;
loop ( data , nodeData . key , ( item , index , arr ) => {
loop ( data , nodeData . key , ( item , index , arr ) => {
arr [ index ] . canceled = '0' ;
arr [ index ] . canceled = '0' ;
} ) ;
} ) ;
@ -219,7 +230,7 @@ const DragTree = () => {
loop ( data , nodeData . key , ( item , index , arr ) => {
loop ( data , nodeData . key , ( item , index , arr ) => {
arr . splice ( index , 1 ) ;
arr . splice ( index , 1 ) ;
} ) ;
} ) ;
message . success ( '封存成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547486 , labelData ) } ` , 2 ) ;
}
}
setGData ( data ) ;
setGData ( data ) ;
} else {
} else {
@ -227,7 +238,7 @@ const DragTree = () => {
}
}
} )
} )
. catch ( ( error ) => {
. catch ( ( error ) => {
message . error ( '接口异常,请联系管理员' ) ;
message . error ( ` ${ getLabel ( 547483 , labelData ) } ` ) ;
} ) ;
} ) ;
} ;
} ;
@ -260,14 +271,14 @@ const DragTree = () => {
. then ( ( res ) => {
. then ( ( res ) => {
if ( res . code == 200 ) {
if ( res . code == 200 ) {
getMoveTree ( 0 , values . department ) ;
getMoveTree ( 0 , values . department ) ;
message . success ( '合并成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547487 , labelData ) } ` , 2 ) ;
} else {
} else {
message . warning ( res . msg , 2 ) ;
message . warning ( res . msg , 2 ) ;
}
}
setOpen ( false ) ;
setOpen ( false ) ;
} )
} )
. catch ( ( error ) => {
. catch ( ( error ) => {
message . error ( '接口异常,请联系管理员' ) ;
message . error ( ` ${ getLabel ( 547483 , labelData ) } ` ) ;
} ) ;
} ) ;
} ;
} ;
@ -301,13 +312,13 @@ const DragTree = () => {
if ( res . code == 200 ) {
if ( res . code == 200 ) {
setCopyOpen ( false ) ;
setCopyOpen ( false ) ;
getMoveTree ( 0 , values . company ) ;
getMoveTree ( 0 , values . company ) ;
message . success ( '复制成功' , 2 ) ;
message . success ( ` ${ getLabel ( 547488 , labelData ) } ` , 2 ) ;
} else {
} else {
message . warning ( res . msg , 2 ) ;
message . warning ( res . msg , 2 ) ;
}
}
} )
} )
. catch ( ( error ) => {
. catch ( ( error ) => {
message . error ( '接口异常,请联系管理员' ) ;
message . error ( ` ${ getLabel ( 547483 , labelData ) } ` ) ;
} ) ;
} ) ;
} ;
} ;
@ -333,7 +344,7 @@ const DragTree = () => {
{ nodeData . title }
{ nodeData . title }
{ nodeData . canceled == '1' ? (
{ nodeData . canceled == '1' ? (
< span style = { { color : 'red' , marginLeft : '5px' } } >
< span style = { { color : 'red' , marginLeft : '5px' } } >
( 已封存 )
( { getLabel ( 547489 , labelData ) } )
< / span >
< / span >
) : (
) : (
''
''
@ -352,24 +363,28 @@ const DragTree = () => {
) ;
) ;
} }
} }
>
>
查看
{ getLabel ( 547490 , labelData ) }
< / span >
< / span >
< Popconfirm
< Popconfirm
title = { ` 确认要删除 [${ nodeData . title } ] 吗 ?` }
title = { ` ${ getLabel ( 547491 , labelData ) } ${ nodeData . title } ] ?` }
onConfirm = { ( ) => onDelete ( nodeData ) }
onConfirm = { ( ) => onDelete ( nodeData ) }
okText = "确认"
okText = { getLabel ( 547319 , labelData ) }
cancelText = "取消"
cancelText = { getLabel ( 547318 , labelData ) }
>
>
< span className = "drag-button" > 删除 < / span >
< span className = "drag-button" >
{ getLabel ( 547492 , labelData ) }
< / span >
< / Popconfirm >
< / Popconfirm >
< Popconfirm
< Popconfirm
title = { ` 确认要封存或恢复 [${ nodeData . title } ] 吗 ?` }
title = { ` ${ getLabel ( 547493 , labelData ) } ${ nodeData . title } ] ?` }
onConfirm = { ( ) => onCancel ( nodeData ) }
onConfirm = { ( ) => onCancel ( nodeData ) }
okText = "确认"
okText = { getLabel ( 547319 , labelData ) }
cancelText = "取消"
cancelText = { getLabel ( 547318 , labelData ) }
>
>
< span className = "drag-button" >
< span className = "drag-button" >
{ nodeData . canceled == '0' ? '封存' : '恢复' }
{ nodeData . canceled == '0'
? ` ${ getLabel ( 547494 , labelData ) } `
: ` ${ getLabel ( 547495 , labelData ) } ` }
< / span >
< / span >
< / Popconfirm >
< / Popconfirm >
< span
< span
@ -377,14 +392,14 @@ const DragTree = () => {
className = "drag-button"
className = "drag-button"
onClick = { ( ) => onMerge ( nodeData ) }
onClick = { ( ) => onMerge ( nodeData ) }
>
>
合并
{ getLabel ( 547194 , labelData ) }
< / span >
< / span >
< span
< span
style = { { display : attr } }
style = { { display : attr } }
className = "drag-button"
className = "drag-button"
onClick = { ( ) => onCopy ( nodeData ) }
onClick = { ( ) => onCopy ( nodeData ) }
>
>
复制
{ getLabel ( 547196 , labelData ) }
< / span >
< / span >
< / div >
< / div >
< / >
< / >
@ -398,12 +413,13 @@ const DragTree = () => {
} ;
} ;
return (
return (
Object . keys ( labelData ) . length != 0 && (
< div className = "drag-wrapper" >
< div className = "drag-wrapper" >
< Spin tip = { tip } spinning = { loading } >
< Spin tip = { tip } spinning = { loading } >
< div className = "drag-layout" >
< div className = "drag-layout" >
< div className = "drag-header" >
< div className = "drag-header" >
< img src = { inset } / >
< img src = { inset } / >
< div > 组织快速调整 < / div >
< div > { getLabel ( 547282 , labelData ) } < / div >
< / div >
< / div >
< div className = "drag-content" >
< div className = "drag-content" >
< ApartmentOutlined
< ApartmentOutlined
@ -411,7 +427,7 @@ const DragTree = () => {
style = { { color : showCanceled == 0 ? '#000' : '#1890ff' } }
style = { { color : showCanceled == 0 ? '#000' : '#1890ff' } }
onClick = { ( ) => {
onClick = { ( ) => {
const value = showCanceled == 0 ? 1 : 0 ;
const value = showCanceled == 0 ? 1 : 0 ;
setTip ( '正在加载,请稍候...' ) ;
setTip ( ` ${ getLabel ( 547473 , labelData ) } ` ) ;
setShowCanceled ( value ) ;
setShowCanceled ( value ) ;
getMoveTree ( value ) ;
getMoveTree ( value ) ;
} }
} }
@ -443,15 +459,13 @@ const DragTree = () => {
< div className = "drag-footer" >
< div className = "drag-footer" >
< p >
< p >
< QuestionCircleOutlined / >
< QuestionCircleOutlined / >
小提示
{ getLabel ( 547283 , labelData ) }
< / p >
< / p >
< div className = "tips" >
< div className = "tips" >
< div > 1. 鼠标拖拽Tree节点到任一分部部门下可快速完成组织转移 ; < / div >
< div > 1. { getLabel ( 547284 , labelData ) } < / div >
< div > 2. 点击 【 查看 】 侧滑打开组织详细信息 , 可快速编辑 ; < / div >
< div > 2. { getLabel ( 547285 , labelData ) } < / div >
< div >
< div > 3. { getLabel ( 547286 , labelData ) } < / div >
3. 鼠标悬停树节点 一键开启 【 删除 】 【 封存 】 【 合并 】 【 复制 】 等功能 ;
< div > 4. { getLabel ( 547287 , labelData ) } < / div >
< / div >
< div > 4. 顶部小图标点击可显示已封存的组织架构 。 < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -464,6 +478,7 @@ const DragTree = () => {
onCancel = { ( ) => {
onCancel = { ( ) => {
setOpen ( false ) ;
setOpen ( false ) ;
} }
} }
labelData = { labelData }
/ >
/ >
< CopyDialog
< CopyDialog
ref = { copyChildRef }
ref = { copyChildRef }
@ -472,8 +487,10 @@ const DragTree = () => {
onCancel = { ( ) => {
onCancel = { ( ) => {
setCopyOpen ( false ) ;
setCopyOpen ( false ) ;
} }
} }
labelData = { labelData }
/ >
/ >
< / div >
< / div >
)
) ;
) ;
} ; } ;
export default DragTree ; export default DragTree ;
