/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-18 15:04:13
|
* @LastEditTime: 2024-08-13 16:04:30
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 组织架构
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Input, Menu, Tooltip, Space } from 'antd';
|
import { ReloadOutlined } from '@ant-design/icons';
|
import Page from '../../../components/Page';
|
import { AddOrEditOrganization, DepartmentTable, PersonnelModal, AddOrEditDept } from '../../../components/basicInformation/organization';
|
import MyTree from '../../../components/MyTree';
|
import * as $$ from '../../../utils/utility';
|
|
const { Search } = Input;
|
|
// 查询人员信息
|
function getPersonsApi(data) {
|
return $$.ax.request({ url: 'ctUser/pageQuery', type: 'get', data, service: 'cust' });
|
}
|
|
// 获取组织结构
|
function getOrganizationApi() {
|
return $$.ax.request({ url: 'ctUnit/listUnitTree', type: 'get', service: 'cust' });
|
}
|
|
// 新增 or 修改组织
|
function setOrganizationApi(data) {
|
return $$.ax.request({ url: 'ctUnit/saveCtUnit', type: 'post', data, service: 'cust' });
|
}
|
|
// 删除组织
|
function delOrganizationApi(id) {
|
return $$.ax.request({ url: `ctUnit/removeByIds?ids=${id}`, type: 'get', service: 'cust' });
|
}
|
|
// 获取部门详情
|
function getDepartmentDataApi(organizationId) {
|
return $$.ax.request({ url: `ctUnit/getUnitAndDept?id=${organizationId}`, type: 'get', service: 'cust' });
|
}
|
|
// 新增 or 修改部门
|
function setDeptApi(data) {
|
return $$.ax.request({ url: 'ctDept/saveCtDept', type: 'post', data, service: 'cust' });
|
}
|
|
// 删除部门
|
function delDeptApi(deptId) {
|
return $$.ax.request({ url: `ctDept/removeByIds?ids=${deptId}`, type: 'get', service: 'cust' });
|
}
|
|
const Organization = () => {
|
// 是否是新增 or 修改组织
|
const [isAddOrEdit, setIsAddOrEdit] = useState(false);
|
|
// 是否新增 or 修改部门
|
const [isAddOrEditDept, setIsAddOrEditDept] = useState(false);
|
|
// 查看人员modal
|
const [modalData, setModalData] = useState({ visible: false, title: '', data: [], total: 0 });
|
|
// 组织数据
|
const [organizationData, setOrganizationData] = useState([]);
|
|
// 当前选择组织
|
const [organizationActive, setOrganizationActive] = useState({});
|
|
// 新增 or 修改组织数据
|
const [organizationEditData, setOrganizationEditData] = useState({ active: {} });
|
|
// 新增 or 修改部门数据
|
const [deptEditData, setDeptEditData] = useState({});
|
|
// 组织查询
|
const [organizationSearch, setOrganizationSearch] = useState({ value: '', searchValue: '' });
|
|
// 当前选择组织下的部门数据
|
const [departmentData, setDepartmentData] = useState([]);
|
|
// 选择组织
|
function handleOrganization(value) {
|
getDepartmentData({ organizationId: value.id });
|
}
|
|
// 组织查询
|
function handleSearchOrganization(value) {
|
setOrganizationSearch({ ...organizationSearch, searchValue: value });
|
}
|
|
// 点击删除组织
|
async function handleDelOrganization(value) {
|
if (value.children && value.children.length > 0) {
|
$$.info({ type: 'warning', content: '该组织下存在下级组织, 不支持删除! 请先清空下级组织' });
|
return false;
|
}
|
let visible = false;
|
const res = await getDepartmentDataApi(value.id);
|
if (res.type) {
|
if (res.data.countCtDept) {
|
$$.info({ type: 'warning', content: '该组织下存在部门, 不支持删除! 请先清空部门' });
|
visible = true;
|
}
|
}
|
if (!visible) {
|
$$.modalInfo({
|
content: `确认删除${value.name}吗?`,
|
onOk: () => delOrganization({ organizationId: value.id }),
|
});
|
}
|
}
|
|
// 查看部门人员 or 关闭modal
|
function handlePersonnelModal(record, visible) {
|
if (visible) {
|
getPersons({ unitId: record.unitId, deptId: record.id, page: 1, size: 10 }, record.name);
|
} else {
|
setModalData({ visible });
|
}
|
}
|
|
// 获取人员信息
|
async function getPersons(submitData, title) {
|
global.setSpinning(true);
|
const res = await getPersonsApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
let resData = res.data || {};
|
setModalData({
|
visible: true,
|
title: title || modalData.title,
|
data: resData.ctUserPage?.content,
|
total: resData.ctUserPage?.totalElements,
|
search: { page: submitData.page, size: submitData.size, unitId: submitData.unitId, deptId: submitData.deptId },
|
});
|
}
|
}
|
|
// 获取组织数据
|
async function getOrganization(firstLoading, reset) {
|
global.setSpinning(true);
|
const res = await getOrganizationApi();
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || [],
|
active = {};
|
console.log(data, 'data');
|
if (data.length > 0 && (firstLoading || reset)) {
|
active = data[0];
|
}
|
setOrganizationData(data);
|
if (data.length > 0) {
|
if (firstLoading || reset) {
|
setOrganizationSearch({ value: '', searchValue: '' });
|
}
|
getDepartmentData({ organizationId: active.id ? active.id : organizationActive.id });
|
}
|
}
|
}
|
|
// 新增 or 修改组织
|
async function setOrganization(submitType, values, form) {
|
global.setSpinning(true);
|
let data = {
|
...organizationEditData.active,
|
...values,
|
id: organizationEditData.type === 'change' ? organizationEditData.active.id : '',
|
parentId:
|
organizationEditData.type === 'change'
|
? organizationEditData.active.parentId
|
: organizationEditData.type === 'upAdd'
|
? ''
|
: organizationEditData.active.id,
|
childId: organizationEditData.type === 'upAdd' ? organizationEditData.active.id : '',
|
};
|
let submitData = data.id ? { ...organizationActive.active, ...data } : data;
|
const res = await setOrganizationApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '操作成功' });
|
if (submitType === '1') {
|
setIsAddOrEdit(false);
|
} else {
|
form.resetFields();
|
}
|
getOrganization();
|
}
|
}
|
|
// 删除组织
|
async function delOrganization({ organizationId }) {
|
global.setSpinning(true);
|
const res = await delOrganizationApi(organizationId);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功!' });
|
if (organizationId === organizationActive.id) {
|
getOrganization('', 'reset');
|
} else {
|
getOrganization();
|
}
|
}
|
}
|
|
// 获取部门详情
|
async function getDepartmentData({ organizationId }) {
|
global.setSpinning(true);
|
const res = await getDepartmentDataApi(organizationId);
|
global.setSpinning(false);
|
if (res.type) {
|
setOrganizationActive(res.data);
|
setDepartmentData(res.data.ctDepts || []);
|
}
|
}
|
|
// 新增 or 修改部门
|
async function setDept(submitType, values, form) {
|
let submitData = {
|
...deptEditData,
|
...values,
|
unitId: organizationActive.id,
|
id: deptEditData.id === 'addOneDept' || deptEditData.id === 'addSubordinateDept' ? '' : deptEditData.id,
|
parentId: deptEditData.id === 'addOneDept' ? '' : deptEditData.parentId,
|
};
|
global.setSpinning(true);
|
const res = await setDeptApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '操作成功' });
|
if (submitType === '1') {
|
setIsAddOrEditDept(false);
|
} else {
|
form.resetFields();
|
}
|
getDepartmentData({ organizationId: organizationActive.id });
|
}
|
}
|
|
// 删除部门
|
async function delDept({ deptId }) {
|
global.setSpinning(true);
|
const res = await delDeptApi(deptId);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
getDepartmentData({ organizationId: organizationActive.id });
|
}
|
}
|
|
useEffect(() => {
|
getOrganization('firstLoading');
|
}, []);
|
|
// 组织操作
|
const dropdownOptions = ({ num, value }) => (
|
<Menu
|
onClick={({ key }) => {
|
console.log(key, value,'key','value')
|
if (key === 'delete') {
|
handleDelOrganization(value);
|
} else {
|
setOrganizationEditData({ type: key, active: value });
|
setIsAddOrEdit(true);
|
}
|
}}
|
>
|
{num === 1 && <Menu.Item key="upAdd">新增上级组织</Menu.Item>}
|
<Menu.Item key="downAdd">新增下级组织</Menu.Item>
|
<Menu.Item key="change">修改</Menu.Item>
|
{num !== 1 && <Menu.Item key="delete">删除</Menu.Item>}
|
</Menu>
|
);
|
|
function addOrEditBreadcrumb() {
|
console.log('111111')
|
let obj = isAddOrEdit
|
? {
|
title: organizationEditData.type === 'change' ? '修改组织' : organizationEditData.type === 'upAdd' ? '新增上级组织' : '新增下级组织',
|
}
|
: {
|
title: isAddOrEditDept === 'changeDept' ? '修改部门' : isAddOrEditDept === 'addOneDept' ? '新增部门' : '新增下级部门',
|
};
|
return {
|
breadcrumbData: [
|
{ title: '基础信息管理' },
|
{
|
title: '组织架构',
|
click: () => {
|
setIsAddOrEdit(false);
|
setIsAddOrEditDept(false);
|
},
|
},
|
obj,
|
],
|
title:
|
isAddOrEditDept === 'addSubordinateDept' || isAddOrEditDept === 'changeDept'
|
? deptEditData.name
|
: isAddOrEditDept
|
? organizationActive.name
|
: organizationEditData.active.name,
|
handleReturn: () => {
|
setIsAddOrEdit(false);
|
setIsAddOrEditDept(false);
|
},
|
};
|
}
|
|
return (
|
<Page
|
pageHead={
|
isAddOrEdit || isAddOrEditDept
|
? addOrEditBreadcrumb()
|
: { breadcrumbData: [{ title: '基础信息管理' }, { title: '组织架构' }], title: '组织架构' }
|
}
|
>
|
<div style={{ display: isAddOrEdit || isAddOrEditDept ? 'none' : '' }} className="organization">
|
<div className="organization-bg">
|
<div className="organization-side">
|
<Space size="middle" className="organization-side-search">
|
<Search
|
placeholder="请搜索组织"
|
value={organizationSearch.value}
|
onChange={(e) => setOrganizationSearch({ ...organizationSearch, value: e.target.value })}
|
onSearch={handleSearchOrganization}
|
/>
|
<Tooltip title="刷新">
|
<ReloadOutlined style={{ fontSize: 16 }} className="public-a" onClick={() => getOrganization('', 'reset')} />
|
</Tooltip>
|
</Space>
|
<div className="organization-side-tree">
|
{organizationData.length > 0 ? (
|
<MyTree
|
active={organizationActive.id}
|
keyStr="id"
|
nameStr="name"
|
data={organizationData}
|
searchValue={organizationSearch.searchValue}
|
dropdownOption={dropdownOptions}
|
isChildren={true}
|
handleClickTreeNode={handleOrganization}
|
/>
|
) : (
|
$$.MyEmpty({ description: '抱歉！暂无组织数据，请先添加组织', style: { margin: '50px auto' } })
|
)}
|
</div>
|
</div>
|
<div className="organization-divider"></div>
|
{organizationData.length > 0 ? (
|
<DepartmentTable
|
organizationActive={organizationActive}
|
departmentData={departmentData}
|
handlePersonnelModal={handlePersonnelModal}
|
handleChangeIsAddOrEdit={(type, record) => {
|
setIsAddOrEditDept(type);
|
setDeptEditData(record || {});
|
}}
|
handleDelDept={delDept}
|
/>
|
) : (
|
$$.MyEmpty({ description: '抱歉！暂无组织数据，请先添加组织', style: { margin: '100px auto' } })
|
)}
|
</div>
|
</div>
|
{/* 新增 or 修改组织page */}
|
<AddOrEditOrganization
|
isAddOrEdit={isAddOrEdit}
|
type={organizationEditData.type}
|
organizationActive={organizationEditData.active}
|
handleFinishForm={setOrganization}
|
/>
|
{/* 新增 or 修改部门page */}
|
<AddOrEditDept
|
isAddOrEditDept={isAddOrEditDept}
|
deptActive={deptEditData}
|
unMatchUsers={organizationActive.unMatchUsers || []}
|
handleFinishForm={setDept}
|
/>
|
{/* 查看人员Modal */}
|
{modalData.visible && <PersonnelModal modalData={modalData} handlePersonnelModal={handlePersonnelModal} handleSearch={getPersons} />}
|
</Page>
|
);
|
};
|
|
export default Organization;
|
