jiangxucong
/
flx-lms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组织管理页面开发

Browse Source
master
jiangxucong 1 day ago
parent 13aed53204
commit 95a20db11c
9 changed files with 3001 additions and 75 deletions
Show Stats Download Patch File Download Diff File

520
src/pages/organmanage_deptmaintain/DeptMaintain.js
Unescape Escape View File

@ -1,14 +1,522 @@
import React, {Fragment, PureComponent} from 'react';
import React, { PureComponent } from 'react';
import {
Card,
Tree,
Button,
Select,
Space,
Row,
Col,
Pagination
} from 'antd';
import { history } from 'umi';
import {
ExpandOutlined,
UserOutlined,
TeamOutlined,
ApartmentOutlined,
SyncOutlined,
DollarOutlined,
SettingOutlined,
DownloadOutlined,
UserAddOutlined,
EditOutlined,
DeleteOutlined,
PlusOutlined
} from '@ant-design/icons';
import styles from './DeptMaintain.less';
import StandardTable from '@/components/StandardTable';
import DeptMaintainAdd from './form/DeptMaintainAdd';
import DeptMaintainRenderSimpleForm from "./form/DeptMaintainRenderSimpleForm" //表单
const { Option } = Select;
class DeptMaintain extends PureComponent {
constructor(props) {
super(props);
this.state = {
searchForm: {},
selectedKeys: [],
expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
addModalVisible: false, // 新增弹窗显示状态
addLoading: false, // 新增loading状态
organizationData: [
{
title: '飞利信科技有限公司',
key: '0-0',
count: 356,
children: [
{
title: '技术部',
key: '0-0-0',
count: 120,
children: [
{ title: '前端组', key: '0-0-0-0', count: 45 },
{ title: '后端组', key: '0-0-0-1', count: 52 },
{ title: '测试组', key: '0-0-0-2', count: 23 }
],
},
{
title: '产品部',
key: '0-0-1',
count: 68,
children: [
{ title: '产品设计组', key: '0-0-1-0', count: 28 },
{ title: '用户体验组', key: '0-0-1-1', count: 25 },
{ title: '产品运营组', key: '0-0-1-2', count: 15 }
],
},
{
title: '运营部',
key: '0-0-2',
count: 52,
children: [
{ title: '市场营销组', key: '0-0-2-0', count: 22 },
{ title: '客户服务组', key: '0-0-2-1', count: 18 },
{ title: '商务合作组', key: '0-0-2-2', count: 12 }
],
},
{
title: '财务部',
key: '0-0-3',
count: 32,
children: [
{ title: '会计组', key: '0-0-3-0', count: 18 },
{ title: '审计组', key: '0-0-3-1', count: 14 }
],
},
{
title: '人事部',
key: '0-0-4',
count: 84,
children: [
{ title: 'HR专员组', key: '0-0-4-0', count: 25 },
{ title: '招聘组', key: '0-0-4-1', count: 22 },
{ title: '培训组', key: '0-0-4-2', count: 18 },
{ title: '薪酬组', key: '0-0-4-3', count: 19 }
],
},
],
},
],
tableData: [
{
key: '1',
id: 1,
department: '技术部',
departmentHead: '张文军',
employeeCount: 120,
description: '负责公司所有技术研发工作',
createDate: '2020-01-15'
},
{
key: '2',
id: 2,
department: '产品部',
departmentHead: '李莉',
employeeCount: 68,
description: '负责产品规划、设计和运营',
createDate: '2020-02-10'
},
{
key: '3',
id: 3,
department: '运营部',
departmentHead: '王强',
employeeCount: 52,
description: '负责市场推广和客户服务',
createDate: '2020-03-05'
},
{
key: '4',
id: 4,
department: '财务部',
departmentHead: '赵敏',
employeeCount: 32,
description: '负责财务管理和会计核算',
createDate: '2020-01-20'
},
{
key: '5',
id: 5,
department: '人事部',
departmentHead: '陈晓红',
employeeCount: 84,
description: '负责人力资源管理和员工关系',
createDate: '2020-02-25'
},
],
pagination: {
current: 1,
pageSize: 5,
total: 356,
}
};
// 默认列配置
this.defaultColumns = [
{
title: '序号',
dataIndex: 'id',
key: 'id',
width: 60,
align: 'center',
},
{
title: '部门名称',
dataIndex: 'department',
key: 'department',
width: 50,
},
{
title: '部门负责人',
dataIndex: 'departmentHead',
key: 'departmentHead',
width: 70,
},
{
title: '员工人数',
dataIndex: 'employeeCount',
key: 'employeeCount',
width: 50,
},
{
title: '操作',
key: 'action',
align: 'center',
width: 80,
render: (_, record) => (
<Space size="middle">
<Button
type="link"
size="small"
icon={<EditOutlined />}
title="编辑"
onClick={() => this.handleEdit(record)}
/>
<Button
type="link"
size="small"
danger
icon={<DeleteOutlined />}
title="删除"
onClick={() => this.handleDelete(record)}
/>
</Space>
),
},
];
}
// 获取处理后的树形数据
getTreeData = () => {
const { organizationData } = this.state;
const processNode = (node) => ({
key: node.key,
title: (
<span className={styles['tree-node-title']}>
{this.getNodeIcon(node.title)}
<span className={styles['node-title']}>{node.title}</span>
<span className={styles['node-count']}>({node.count})</span>
</span>
),
children: node.children ? node.children.map(processNode) : undefined
});
return organizationData.map(processNode);
};
// 获取节点图标
getNodeIcon = (title) => {
if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
return <TeamOutlined style={{ color: '#666' }} />;
};
// 搜索处理
handleSearch = (values) => {
console.log('搜索参数:', values);
this.setState({ searchForm: values });
};
// 重置搜索
handleReset = () => {
this.formRef?.resetFields();
this.setState({ searchForm: {} });
};
// 树节点选择
onTreeSelect = (selectedKeys, info) => {
console.log('选中节点:', selectedKeys, info);
this.setState({ selectedKeys });
};
// 树节点展开
onTreeExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
// 刷新树数据
handleTreeRefresh = () => {
// console.log('刷新组织架构');
// 这里可以添加刷新树数据的逻辑
};
// 展开/收缩所有节点
handleTreeToggle = () => {
const { expandedKeys, organizationData } = this.state;
if (expandedKeys.length > 0) {
// 收缩所有节点
this.setState({ expandedKeys: [] });
} else {
// 展开所有节点
const getAllKeys = (nodes) => {
let keys = [];
nodes.forEach(node => {
keys.push(node.key);
if (node.children) {
keys = keys.concat(getAllKeys(node.children));
}
});
return keys;
};
this.setState({ expandedKeys: getAllKeys(organizationData) });
}
};
renderSimpleForm() {
const { prooperlog = {} } = this.props;
const { params = {} } = prooperlog;
const parentMethods = {
handleSearch: this.handleSearch,
handleFormReset: this.handleFormReset,
toggleForm: this.toggleForm,
submitButtons: styles.submitButtons,
params
};
return (
<DeptMaintainRenderSimpleForm {...parentMethods} />
);
}
renderAdvancedForm() {
const { prooperlog: { params } } = this.props;
const parentMethods = {
handleSearch: this.handleSearch,
handleFormReset: this.handleFormReset,
toggleForm: this.toggleForm,
params
};
return (
<DeptMaintainRenderSimpleForm {...parentMethods} />
);
}
renderForm() {
const { expandForm } = this.state;
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
}
// 分页处理
onPaginationChange = (page, pageSize) => {
this.setState({
pagination: {
...this.state.pagination,
current: page,
pageSize,
}
});
};
// 显示新增弹窗
showAddModal = () => {
this.setState({ addModalVisible: true });
};
// 关闭新增弹窗
hideAddModal = () => {
this.setState({ addModalVisible: false });
};
// 新增成功回调
handleAddSuccess = (values) => {
console.log('新增成功:', values);
// 这里可以刷新列表数据
// 模拟添加到表格数据中
const newStaff = {
key: String(Date.now()),
id: this.state.tableData.length + 1,
name: values.name,
phone: values.age, // 年龄
idCard: values.department, // 部门
department: values.position, // 岗位
position: values.workType, // 工作性质
status: values.phone, // 电话
entryDate: new Date().toISOString().split('T')[0]
};
this.setState({
tableData: [...this.state.tableData, newStaff],
pagination: {
...this.state.pagination,
total: this.state.pagination.total + 1
}
});
};
// 处理姓名点击事件
handleNameClick = (record) => {
console.log('点击员工:', record);
// 跳转到人员详情页面，传递员工ID参数
history.push(`/topnavbar00/staffmanage/particulars`);
};
// 处理编辑
handleEdit = (record) => {
console.log('编辑员工:', record);
// 这里可以打开编辑弹窗或跳转到编辑页面
};
// 处理删除
handleDelete = (record) => {
console.log('删除员工:', record);
// 这里可以弹出确认框并执行删除操作
};
render() {
const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
return (
<>
<iframe title="部门岗位维护" className={styles.frameContent} src="/部门岗位维护.html"/>
</>
)
<div className={styles.staffInfoContainer}>
{/* 主体内容 */}
<div className={styles.mainContent}>
<Card className={styles.contentCard}>
<Row gutter={24}>
{/* 左侧组织架构树 */}
<Col span={5}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
<span>组织架构</span>
</div>
<Space>
<Button
type="text"
icon={<SyncOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeRefresh}
title="刷新"
/>
<Button
type="text"
icon={<ExpandOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeToggle}
title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
/>
</Space>
</div>
}
className={styles.treeCard}
>
<div className={styles.treeContainer}>
<Tree
showIcon
expandedKeys={expandedKeys}
onSelect={this.onTreeSelect}
onExpand={this.onTreeExpand}
treeData={this.getTreeData()}
className={styles.orgTree}
/>
</div>
</Card>
</Col>
{/* 右侧人员信息区 */}
<Col span={19}>
{/* 筛选条件 */}
<Card className={styles.searchCard}>
{this.renderForm()}
</Card>
{/* 操作按钮和统计 */}
<div className={styles.actionBar}>
<div className={styles.totalInfo}>
{/* 共 {pagination.total} 条记录 */}
</div>
<Space size="middle">
<Button
icon={<DownloadOutlined />}
size="middle"
// className={styles.exportButton}
>
导出
</Button>
<Button
type="primary"
icon={<PlusOutlined />}
size="middle"
// className={styles.addButton}
onClick={this.showAddModal}
>
新增
</Button>
</Space>
</div>
{/* 人员表格 */}
<Card className={styles.tableCard}>
<StandardTable
columns={this.defaultColumns}
dataSource={tableData}
pagination={false}
// scroll={{ x: 1000,y: 600 }}
size="small"
selectedRows={[]}
/>
{/* 分页 */}
<div className={styles.paginationWrapper}>
<Pagination
current={pagination.current}
total={pagination.total}
pageSize={pagination.pageSize}
showSizeChanger
showQuickJumper
showTotal={(total, range) =>
`显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
}
onChange={this.onPaginationChange}
onShowSizeChange={this.onPaginationChange}
/>
</div>
</Card>
</Col>
</Row>
</Card>
</div>
{/* 新增人员弹窗 */}
<DeptMaintainAdd
visible={addModalVisible}
loading={addLoading}
onCancel={this.hideAddModal}
onSuccess={this.handleAddSuccess}
/>
</div>
);
}
}
export default DeptMaintain
export default DeptMaintain;

525
src/pages/organmanage_deptmaintain/DeptMaintain.less
Unescape Escape View File

@ -1,10 +1,521 @@
@import '~@/utils/utils.less';
.frameContent {
width: 100%;
height: 100vh;
border: none;
display: block;
margin: 0;
padding: 0;
.staffInfoContainer {
min-height: 100vh;
// background-color: #f5f6fa;
.announcementBar {
background: #e6f7ff;
border: 1px solid #91d5ff;
margin-bottom: 16px;
border-radius: 6px;
overflow: hidden;
.announcement {
display: flex;
align-items: center;
.announcementLabel {
background-color: #fef3c7;
color: #92400e;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
margin-right: 12px;
white-space: nowrap;
display: flex;
align-items: center;
.anticon {
margin-right: 4px;
}
}
.scrollContainer {
flex: 1;
overflow: hidden;
white-space: nowrap;
}
.scrollContent {
display: inline-block;
animation: scroll 30s linear infinite;
color: #666;
font-size: 14px;
}
}
}
.mainContent {
// padding: 12px;
.contentCard {
.ant-card-head {
.ant-card-head-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
}
}
.treeCard {
height: 600px;
border: 1px solid #e8e8e8;
border-radius: 8px;
.treeHeader {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 500;
}
.treeContainer {
height: 520px;
overflow-y: auto;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
&:hover {
background: #bfbfbf;
}
}
.orgTree {
.ant-tree-treenode {
padding: 2px 0;
.ant-tree-node-content-wrapper {
border-radius: 4px;
transition: all 0.3s ease;
padding: 4px 8px;
&:hover {
background-color: #f0f9ff;
transform: translateX(2px);
}
&.ant-tree-node-selected {
background-color: #e6f7ff !important;
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}
}
.ant-tree-iconEle {
margin-right: 8px;
}
.ant-tree-title {
font-size: 14px;
}
}
}
}
}
/* Tree节点标题样式 */
.tree-node-title {
display: flex;
align-items: center;
width: 100%;
.node-title {
flex: 1;
font-size: 14px;
margin-left: 8px;
color: #333;
}
.node-count {
color: #999;
font-size: 12px;
margin-left: auto;
background: #f0f0f0;
padding: 1px 6px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
}
.searchCard {
margin-bottom: 16px;
border-radius: 8px;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.ant-card-body {
padding: 16px;
}
/* 搜索表单容器样式 */
.searchFormContainer {
.searchForm {
.ant-form-item {
margin-bottom: 16px;
.ant-form-item-label {
font-weight: 500;
color: #333;
label {
color: #333 !important;
font-size: 14px;
}
}
.ant-input,
.ant-select-selector,
.ant-picker {
border-radius: 6px;
border: 1px solid #d9d9d9;
transition: all 0.3s ease;
&:hover {
border-color: #4c7bff;
}
&:focus,
&.ant-select-focused .ant-select-selector,
&.ant-picker-focused {
border-color: #2d5cf6;
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
}
}
.ant-select-selection-placeholder,
.ant-input::placeholder,
.ant-picker-input input::placeholder {
color: #bfbfbf;
}
}
}
}
/* 搜索按钮样式 */
.searchButton {
background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
border: none;
border-radius: 6px;
color: white;
font-weight: 500;
font-size: 14px;
box-shadow: 0 2px 8px rgba(45, 92, 246, 0.3);
transition: all 0.3s ease;
height: 32px;
padding: 0 16px;
&:hover,
&:focus {
background: linear-gradient(135deg, #4c7bff 0%, #6b8fff 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 92, 246, 0.4);
color: white;
}
&:active {
transform: translateY(0);
}
}
/* 重置按钮样式 */
.resetButton {
background: #fff;
border: 1px solid #d9d9d9;
color: #666;
border-radius: 6px;
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
height: 32px;
padding: 0 16px;
&:hover,
&:focus {
border-color: #4c7bff;
color: #2d5cf6;
}
.anticon {
color: #ff7875;
}
}
/* 展开按钮样式 */
.expandButton {
color: #2d5cf6;
font-size: 14px;
padding: 0 8px;
height: 32px;
&:hover,
&:focus {
color: #4c7bff;
}
}
}
.actionBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.totalInfo {
color: #666;
font-size: 14px;
font-weight: 500;
}
.exportButton {
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
border: none;
color: white;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
transition: all 0.3s ease;
// margin-top: -8px;
height: 35px;
padding: 0 16px;
&:hover,
&:focus {
background: linear-gradient(135deg, #73d13d 0%, #95de64 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
color: white;
}
&:active {
transform: translateY(0);
}
.anticon {
color: white;
}
}
.addButton {
background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
transition: all 0.3s ease;
// margin-top: -8px;
height: 35px;
padding: 0 16px;
&:hover,
&:focus {
background: linear-gradient(135deg, #ffa940 0%, #ffc069 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
}
&:active {
transform: translateY(0);
}
}
}
.tableCard {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
padding-bottom: 10px;
.ant-table-wrapper {
max-height: 600px;
overflow-y: auto;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 4px;
&:hover {
background: #bfbfbf;
}
}
.ant-table-thead>tr>th {
background-color: #fafafa;
font-weight: 600;
color: #333;
border-bottom: 1px solid #e8e8e8;
position: sticky;
top: 0;
z-index: 1;
}
.ant-table-tbody>tr {
&:hover>td {
background-color: #f5f5f5 !important;
}
>td {
border-bottom: 1px solid #f0f0f0;
}
}
}
.paginationWrapper {
margin-top: 20px;
text-align: right;
.ant-pagination {
.ant-pagination-total-text {
color: #666;
}
.ant-pagination-item {
border-radius: 4px;
&.ant-pagination-item-active {
background-color: #2d5cf6;
border-color: #2d5cf6;
}
}
.ant-pagination-prev,
.ant-pagination-next {
border-radius: 4px;
}
}
}
}
}
}
.mainContent {
// padding: 12px;
.contentCard {
.ant-card-head {
.ant-card-head-title {
font-size: 18px;
font-weight: 600;
color: #333;
}
}
}
.actionBar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
.totalInfo {
color: #666;
font-size: 14px;
}
}
:global {
.ant-card-body {
padding: 12px 24px 0px 24px;
}
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
// 响应式设计
@media (max-width: 1200px) {
.staffInfoContainer {
.mainContent {
.searchCard {
.ant-row {
.ant-col {
margin-bottom: 16px;
}
}
}
}
}
}
// 自定义主题色
.ant-btn-primary {
background-color: #2d5cf6;
border-color: #2d5cf6;
&:hover,
&:focus {
background-color: #4c7bff;
border-color: #4c7bff;
}
}
.ant-tree .ant-tree-node-selected {
background-color: #e6f7ff !important;
}
.ant-select-focused .ant-select-selector,
.ant-input-affix-wrapper-focused,
.ant-input:focus,
.ant-input-focused {
border-color: #2d5cf6 !important;
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
}
// 标签样式优化
.ant-tag {
border-radius: 4px;
font-size: 12px;
}
// 按钮组间距调整
.ant-space-item {
.ant-btn+.ant-btn {
margin-left: 8px;
}
}
// 表格链接按钮样式
.ant-btn-link {
padding: 0 4px;
font-size: 12px;
}

218
src/pages/organmanage_deptmaintain/form/DeptMaintainAdd.js
Unescape Escape View File

@ -0,0 +1,218 @@
import React, { PureComponent } from 'react';
import {
Modal,
Form,
Input,
Select,
InputNumber,
Row,
Col,
message,
TreeSelect
} from 'antd';
import {
ApartmentOutlined,
UserOutlined,
TeamOutlined,
FileTextOutlined,
NumberOutlined
} from '@ant-design/icons';
const { Option } = Select;
class DeptMaintainAdd extends PureComponent {
constructor(props) {
super(props);
this.formRef = React.createRef();
}
// 提交表单
handleSubmit = (values) => {
console.log('新增部门信息:', values);
// 这里可以调用API接口保存数据
// 模拟保存成功
message.success('新增部门成功！');
// 重置表单
this.formRef.current?.resetFields();
// 调用父组件的回调函数
if (this.props.onSuccess) {
this.props.onSuccess(values);
}
// 关闭弹窗
this.handleCancel();
};
// 取消操作
handleCancel = () => {
// 重置表单
this.formRef.current?.resetFields();
// 调用父组件的关闭回调
if (this.props.onCancel) {
this.props.onCancel();
}
};
render() {
const { visible, loading = false } = this.props;
return (
<Modal
title="新增部门"
open={visible}
onOk={() => this.formRef.current?.submit()}
onCancel={this.handleCancel}
width={700}
confirmLoading={loading}
destroyOnClose={true}
maskClosable={false}
>
<Form
ref={this.formRef}
layout="vertical"
onFinish={this.handleSubmit}
initialValues={{
status: '1',
level: '2'
}}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="deptName"
label="部门名称"
rules={[
{ required: true, message: '请输入部门名称' },
{ min: 2, max: 20, message: '部门名称长度为2-20个字符' }
]}
>
<Input
placeholder="请输入部门名称"
prefix={<ApartmentOutlined />}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="deptCode"
label="部门编码"
rules={[
{ required: true, message: '请输入部门编码' },
{ pattern: /^[A-Z0-9]{3,10}$/, message: '部门编码为3-10位大写字母和数字' }
]}
>
<Input
placeholder="请输入部门编码，如：TECH001"
prefix={<NumberOutlined />}
style={{ textTransform: 'uppercase' }}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="parentDept"
label="上级部门"
rules={[
{ required: false, message: '请选择上级部门' }
]}
>
<TreeSelect
placeholder="请选择上级部门"
allowClear
treeDefaultExpandAll
treeData={[
{
title: '飞利信科技有限公司',
value: '0-0',
children: [
{ title: '技术部', value: '0-0-0' },
{ title: '产品部', value: '0-0-1' },
{ title: '运营部', value: '0-0-2' },
{ title: '财务部', value: '0-0-3' },
{ title: '人事部', value: '0-0-4' },
]
}
]}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="deptHead"
label="部门负责人"
rules={[
{ required: true, message: '请输入部门负责人' }
]}
>
<Input
placeholder="请输入部门负责人姓名"
prefix={<UserOutlined />}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item
name="level"
label="部门层级"
rules={[
{ required: true, message: '请选择部门层级' }
]}
>
<Select placeholder="请选择部门层级">
<Option value="1">一级部门</Option>
<Option value="2">二级部门</Option>
<Option value="3">三级部门</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="status"
label="状态"
rules={[
{ required: true, message: '请选择状态' }
]}
>
<Select placeholder="请选择状态">
<Option value="1">启用</Option>
<Option value="0">禁用</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item
name="description"
label="部门描述"
rules={[
{ max: 200, message: '描述不能超过200个字符' }
]}
>
<Input.TextArea
placeholder="请输入部门职责描述"
rows={3}
showCount
maxLength={200}
/>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
);
}
}
export default DeptMaintainAdd;

80
src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.js
Unescape Escape View File

@ -0,0 +1,80 @@
import React from 'react';
import { Button, Col, Form, Row, DatePicker, Space } from 'antd';
import { ClearOutlined, SearchOutlined } from '@ant-design/icons';
import styles from "../DeptMaintain.less";
const FormItem = Form.Item;
const DeptMaintainRenderSimpleForm = (props) => {
const [form] = Form.useForm();
const { submitButtons, handleSearch, handleFormReset, params } = props;
React.useEffect(() => {
form.setFieldsValue({
year: params?.year,
});
}, [params]);
const onFinish = values => {
const searchParams = {
...values,
year: values.year ? values.year.format('YYYY') : undefined,
};
handleSearch && handleSearch(searchParams);
};
const myhandleFormReset = () => {
form.resetFields();
handleFormReset && handleFormReset();
};
return (
<div className={styles.searchFormContainer}>
<Form
form={form}
onFinish={onFinish}
layout="vertical"
className={styles.searchForm}
>
<Row gutter={16}>
<Col span={6}>
<Form.Item
name="year"
label="年份"
>
<DatePicker
picker="year"
placeholder="请选择年份"
style={{ width: '100%' }}
allowClear
/>
</Form.Item>
</Col>
<Col span={18}>
<Form.Item label=" " colon={false}>
<Space size="middle">
<Button
type="primary"
htmlType="submit"
icon={<SearchOutlined />}
className={styles.searchButton}
>
查询
</Button>
<Button
onClick={myhandleFormReset}
icon={<ClearOutlined />}
className={styles.resetButton}
>
重置
</Button>
</Space>
</Form.Item>
</Col>
</Row>
</Form>
</div>
);
};
export default DeptMaintainRenderSimpleForm;

0
src/pages/organmanage_deptmaintain/form/DeptMaintainRenderSimpleForm.less
Unescape Escape View File

198
src/pages/organmanage_organchart/OrganChart.js
Unescape Escape View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic } from 'antd';
import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic, Space } from 'antd';
import {
BuildingOutlined,
ApartmentOutlined,
TeamOutlined,
ClockCircleOutlined,
DownloadOutlined,
@ -10,7 +10,8 @@ import {
UserOutlined,
DollarOutlined,
SettingOutlined,
BellOutlined
BellOutlined,
ExpandOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './OrganChart.less';
@ -21,45 +22,65 @@ class OrganChart extends PureComponent {
this.state = {
selectedYear: '2023',
expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
organizationData: [
{
title: '集团公司',
key: '0-0',
count: 1284,
children: [
{
title: '行政中心',
key: '0-0-0',
count: 356,
children: [
{ title: '人力资源部', key: '0-0-0-0', count: 45 },
{ title: '财务部', key: '0-0-0-1', count: 32 },
{ title: 'IT部', key: '0-0-0-2', count: 28 }
]
},
{
title: '营销中心',
key: '0-0-1',
count: 268,
children: [
{ title: '市场部', key: '0-0-1-0', count: 86 },
{ title: '销售部', key: '0-0-1-1', count: 124 },
{ title: '客户服务部', key: '0-0-1-2', count: 58 }
]
},
{
title: '研发中心',
key: '0-0-2',
count: 232,
children: [
{ title: '前端开发部', key: '0-0-2-0', count: 76 },
{ title: '后端开发部', key: '0-0-2-1', count: 92 },
{ title: '移动开发部', key: '0-0-2-2', count: 64 }
]
}
]
}
]
organizationData: [
{
title: '飞利信科技有限公司',
key: '0-0',
count: 356,
children: [
{
title: '技术部',
key: '0-0-0',
count: 120,
children: [
{ title: '前端组', key: '0-0-0-0', count: 45 },
{ title: '后端组', key: '0-0-0-1', count: 52 },
{ title: '测试组', key: '0-0-0-2', count: 23 }
],
},
{
title: '产品部',
key: '0-0-1',
count: 68,
children: [
{ title: '产品设计组', key: '0-0-1-0', count: 28 },
{ title: '用户体验组', key: '0-0-1-1', count: 25 },
{ title: '产品运营组', key: '0-0-1-2', count: 15 }
],
},
{
title: '运营部',
key: '0-0-2',
count: 52,
children: [
{ title: '市场营销组', key: '0-0-2-0', count: 22 },
{ title: '客户服务组', key: '0-0-2-1', count: 18 },
{ title: '商务合作组', key: '0-0-2-2', count: 12 }
],
},
{
title: '财务部',
key: '0-0-3',
count: 32,
children: [
{ title: '会计组', key: '0-0-3-0', count: 18 },
{ title: '审计组', key: '0-0-3-1', count: 14 }
],
},
{
title: '人事部',
key: '0-0-4',
count: 84,
children: [
{ title: 'HR专员组', key: '0-0-4-0', count: 25 },
{ title: '招聘组', key: '0-0-4-1', count: 22 },
{ title: '培训组', key: '0-0-4-2', count: 18 },
{ title: '薪酬组', key: '0-0-4-3', count: 19 }
],
},
],
},
],
};
}
@ -84,12 +105,52 @@ class OrganChart extends PureComponent {
// 获取节点图标
getNodeIcon = (title) => {
if (title.includes('集团')) return <TeamOutlined />;
if (title.includes('中心')) return <TeamOutlined />;
if (title.includes('人力')) return <UserOutlined />;
if (title.includes('财务')) return <DollarOutlined />;
if (title.includes('IT') || title.includes('开发')) return <SettingOutlined />;
return <TeamOutlined />;
if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
return <TeamOutlined style={{ color: '#666' }} />;
};
// 树节点展开
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
// 树节点选择
onTreeSelect = (selectedKeys, info) => {
console.log('选中节点:', selectedKeys, info);
this.setState({ selectedKeys });
};
// 刷新树数据
handleTreeRefresh = () => {
console.log('刷新组织架构');
// 这里可以添加刷新树数据的逻辑
};
// 展开/收缩所有节点
handleTreeToggle = () => {
const { expandedKeys, organizationData } = this.state;
if (expandedKeys.length > 0) {
// 收缩所有节点
this.setState({ expandedKeys: [] });
} else {
// 展开所有节点
const getAllKeys = (nodes) => {
let keys = [];
nodes.forEach(node => {
keys.push(node.key);
if (node.children) {
keys = keys.concat(getAllKeys(node.children));
}
});
return keys;
};
this.setState({ expandedKeys: getAllKeys(organizationData) });
}
};
// 获取年份菜单
@ -245,7 +306,7 @@ class OrganChart extends PureComponent {
padding: '16px'
}}>
{/* 公告栏 */}
<Alert
{/* <Alert
message={
<div className={styles['announcement-container']}>
<div className={styles['announcement-badge']}>
@ -265,11 +326,11 @@ class OrganChart extends PureComponent {
type="info"
closable
className={styles['organ-chart-announcement']}
/>
/> */}
<Row gutter={24}>
{/* 左侧组织架构树 */}
<Col xs={24} md={6}>
<Col span={5}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
@ -277,31 +338,44 @@ class OrganChart extends PureComponent {
<TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
<span>组织架构</span>
</div>
<Button
type="text"
icon={<SyncOutlined />}
size="small"
style={{ color: '#1890ff' }}
/>
<Space>
<Button
type="text"
icon={<SyncOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeRefresh}
title="刷新"
/>
<Button
type="text"
icon={<ExpandOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeToggle}
title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
/>
</Space>
</div>
}
className={styles['org-sidebar']}
style={{ height: 'calc(100vh - 200px)', overflowY: 'auto' }}
className={styles.treeCard}
>
<div style={{ maxHeight: 'calc(100vh - 280px)', overflowY: 'auto' }}>
<div className={styles.treeContainer}>
<Tree
showIcon
expandedKeys={expandedKeys}
onSelect={this.onTreeSelect}
onExpand={this.onExpand}
treeData={this.getTreeData()}
className={styles.orgTree}
/>
</div>
</Card>
</Col>
{/* 右侧内容区 */}
<Col xs={24} md={18}>
<div style={{ height: 'calc(100vh - 200px)', overflowY: 'auto', paddingRight: '8px' }}>
<Col span={19}>
<div style={{ height: 'calc(100vh - 152px)', overflowY: 'auto', paddingRight: '8px' }}>
{/* 筛选区域 */}
<Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

74
src/pages/organmanage_organchart/OrganChart.less
Unescape Escape View File

@ -45,6 +45,80 @@
}
}
}
/* 树形组件卡片样式 */
.treeCard {
height: 600px;
border: 1px solid #e8e8e8;
border-radius: 8px;
.treeContainer {
height: 520px;
overflow-y: auto;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
&:hover {
background: #bfbfbf;
}
}
.orgTree {
.ant-tree-treenode {
padding: 2px 0;
.ant-tree-node-content-wrapper {
border-radius: 4px;
transition: background-color 0.2s;
&:hover {
background-color: #f5f5f5;
}
.ant-tree-title {
font-size: 14px;
}
}
}
}
}
}
/* Tree节点标题样式 */
.tree-node-title {
display: flex;
align-items: center;
width: 100%;
.node-title {
flex: 1;
font-size: 14px;
margin-left: 8px;
color: #333;
}
.node-count {
color: #999;
font-size: 12px;
margin-left: auto;
background: #f0f0f0;
padding: 1px 6px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
}
}
/* 公告栏样式 */

552
src/pages/organmanage_reportrelation/ReportRelation.js
Unescape Escape View File

@ -0,0 +1,552 @@
import React, { PureComponent } from 'react';
import { Card, Button, Alert, Dropdown, Row, Col, Tree, Statistic, Space } from 'antd';
import {
ApartmentOutlined,
TeamOutlined,
ClockCircleOutlined,
DownloadOutlined,
DownOutlined,
SyncOutlined,
UserOutlined,
DollarOutlined,
SettingOutlined,
BellOutlined,
ExpandOutlined,
FilterOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './ReportRelation.less';
class ReportRelation extends PureComponent {
constructor(props) {
super(props);
this.state = {
selectedYear: '2023',
expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
organizationData: [
{
title: '飞利信科技有限公司',
key: '0-0',
count: 356,
children: [
{
title: '技术部',
key: '0-0-0',
count: 120,
children: [
{ title: '前端组', key: '0-0-0-0', count: 45 },
{ title: '后端组', key: '0-0-0-1', count: 52 },
{ title: '测试组', key: '0-0-0-2', count: 23 }
],
},
{
title: '产品部',
key: '0-0-1',
count: 68,
children: [
{ title: '产品设计组', key: '0-0-1-0', count: 28 },
{ title: '用户体验组', key: '0-0-1-1', count: 25 },
{ title: '产品运营组', key: '0-0-1-2', count: 15 }
],
},
{
title: '运营部',
key: '0-0-2',
count: 52,
children: [
{ title: '市场营销组', key: '0-0-2-0', count: 22 },
{ title: '客户服务组', key: '0-0-2-1', count: 18 },
{ title: '商务合作组', key: '0-0-2-2', count: 12 }
],
},
{
title: '财务部',
key: '0-0-3',
count: 32,
children: [
{ title: '会计组', key: '0-0-3-0', count: 18 },
{ title: '审计组', key: '0-0-3-1', count: 14 }
],
},
{
title: '人事部',
key: '0-0-4',
count: 84,
children: [
{ title: 'HR专员组', key: '0-0-4-0', count: 25 },
{ title: '招聘组', key: '0-0-4-1', count: 22 },
{ title: '培训组', key: '0-0-4-2', count: 18 },
{ title: '薪酬组', key: '0-0-4-3', count: 19 }
],
},
],
},
],
};
}
// 获取处理后的树形数据
getTreeData = () => {
const { organizationData } = this.state;
const processNode = (node) => ({
key: node.key,
title: (
<span className={styles['tree-node-title']}>
{this.getNodeIcon(node.title)}
<span className={styles['node-title']}>{node.title}</span>
<span className={styles['node-count']}>({node.count})</span>
</span>
),
children: node.children ? node.children.map(processNode) : undefined
});
return organizationData.map(processNode);
};
// 获取节点图标
getNodeIcon = (title) => {
if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
return <TeamOutlined style={{ color: '#666' }} />;
};
// 树节点展开
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
// 树节点选择
onTreeSelect = (selectedKeys, info) => {
console.log('选中节点:', selectedKeys, info);
this.setState({ selectedKeys });
};
// 刷新树数据
handleTreeRefresh = () => {
console.log('刷新组织架构');
// 这里可以添加刷新树数据的逻辑
};
// 展开/收缩所有节点
handleTreeToggle = () => {
const { expandedKeys, organizationData } = this.state;
if (expandedKeys.length > 0) {
// 收缩所有节点
this.setState({ expandedKeys: [] });
} else {
// 展开所有节点
const getAllKeys = (nodes) => {
let keys = [];
nodes.forEach(node => {
keys.push(node.key);
if (node.children) {
keys = keys.concat(getAllKeys(node.children));
}
});
return keys;
};
this.setState({ expandedKeys: getAllKeys(organizationData) });
}
};
// 获取年份菜单
getYearMenu = () => {
const years = ['2021', '2022', '2023', '2024'];
const menuItems = years.map(year => ({
key: year,
label: year,
}));
return {
items: menuItems,
onClick: ({ key }) => this.setState({ selectedYear: key })
};
};
// ECharts配置选项
getDepartmentChartOption = () => {
return {
title: {
text: '各部门人员分布',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}: {c}人'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: {
lineStyle: { color: '#f0f0f0' }
}
},
yAxis: {
type: 'category',
data: ['人力资源部', '财务部', 'IT部', '市场部', '销售部', '客户服务部', '前端开发部', '后端开发部', '移动开发部'],
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
fontSize: 12
}
},
series: [
{
name: '人数',
type: 'bar',
data: [45, 32, 28, 86, 124, 58, 76, 92, 64],
itemStyle: {
color: '#1890ff',
borderRadius: [0, 4, 4, 0]
},
barWidth: 20,
label: {
show: true,
position: 'right',
formatter: '{c}人',
fontSize: 11
}
}
]
};
};
// 组织架构分布饼图配置
getOrgPieChartOption = () => {
return {
title: {
text: '部门人员占比',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}人 ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
top: 'middle',
textStyle: {
fontSize: 12
}
},
series: [
{
name: '部门分布',
type: 'pie',
radius: ['40%', '70%'],
center: ['65%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 356, name: '行政中心' },
{ value: 268, name: '营销中心' },
{ value: 232, name: '研发中心' },
{ value: 428, name: '其他部门' }
],
itemStyle: {
borderRadius: 5,
borderColor: '#fff',
borderWidth: 2
}
}
]
};
};
// 树节点展开/收起处理
onExpand = (expandedKeys) => {
this.setState({ expandedKeys });
};
render() {
const { selectedYear, expandedKeys } = this.state;
return (
<div className={styles['organ-chart-page']} style={{
height: '100vh',
overflowY: 'auto',
overflowX: 'hidden',
padding: '16px'
}}>
{/* 公告栏 */}
{/* <Alert
message={
<div className={styles['announcement-container']}>
<div className={styles['announcement-badge']}>
<BellOutlined />
公告
</div>
<div className={styles['announcement-content']}>
<div className={styles['marquee-text']}>
<span>2023年度绩效考核方案已发布，请各部门负责人及时查阅</span>
<span>系统将于2023年12月25日00:00-06:00进行升级维护</span>
<span>新员工入职培训计划已更新，请相关人员注意查收邮件</span>
<span>年度优秀员工评选活动正式启动，详情请见内网公告</span>
</div>
</div>
</div>
}
type="info"
closable
className={styles['organ-chart-announcement']}
/> */}
<Row gutter={24}>
{/* 左侧组织架构树 */}
<Col span={5}>
<Card
title={
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
<span>组织架构</span>
</div>
<Space>
<Button
type="text"
icon={<SyncOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeRefresh}
title="刷新"
/>
<Button
type="text"
icon={<ExpandOutlined />}
size="small"
style={{ color: '#1890ff' }}
onClick={this.handleTreeToggle}
title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
/>
</Space>
</div>
}
className={styles.treeCard}
>
<div className={styles.treeContainer}>
<Tree
showIcon
expandedKeys={expandedKeys}
onSelect={this.onTreeSelect}
onExpand={this.onExpand}
treeData={this.getTreeData()}
className={styles.orgTree}
/>
</div>
</Card>
</Col>
{/* 右侧内容区 */}
<Col span={19}>
<div style={{ height: 'calc(100vh - 152px)', overflowY: 'auto', paddingRight: '8px' }}>
{/* 筛选区域 */}
<Card className={styles['filter-section']} style={{ marginBottom: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<h2 className={styles['section-title']}>汇报关系</h2>
<div className={styles['filter-actions']}>
<div className={styles['year-selector']}>
<span>年份:</span>
<Dropdown
menu={this.getYearMenu()}
trigger={['click']}
>
<Button type="default">
{selectedYear} <DownOutlined />
</Button>
</Dropdown>
</div>
<Button type="primary" icon={<FilterOutlined />}>
筛选
</Button>
</div>
</div>
</Card>
{/* 主要内容区 */}
<Card className={styles['main-content']}>
{/* 汇报关系图 */}
<div className={styles['report-relation-wrapper']}>
<div className={styles['report-relation-container']}>
{/* 第一层：CEO */}
<div className={styles['hierarchy-level-1']}>
<div className={styles['person-card-large']}>
<div className={styles['person-avatar-large']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>张明远</h4>
<p className={styles['person-title']}>CEO</p>
<p className={styles['person-company']}>集团公司</p>
</div>
</div>
{/* 连接线系统 - 第一层到第二层 */}
<div className={styles['connection-system-1']}>
<div className={styles['vertical-main-line']}></div>
<div className={styles['horizontal-main-line']}></div>
<div className={styles['branch-lines-container']}>
<div className={styles['branch-line-left']}></div>
<div className={styles['branch-line-right']}></div>
</div>
</div>
{/* 第二层：副总裁 */}
<div className={styles['hierarchy-level-2']}>
<div className={styles['person-row']}>
<div className={styles['person-card-medium']}>
<div className={styles['person-avatar-medium']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>李华</h4>
<p className={styles['person-title']}>副总裁</p>
<p className={styles['person-company']}>华东事业部</p>
</div>
<div className={styles['person-card-medium']}>
<div className={styles['person-avatar-medium']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>王伟</h4>
<p className={styles['person-title']}>副总裁</p>
<p className={styles['person-company']}>华南事业部</p>
</div>
</div>
</div>
{/* 连接线系统 - 第二层到第三层 */}
<div className={styles['connection-system-2']}>
<div className={styles['dual-vertical-lines']}>
<div className={styles['vertical-line']}></div>
<div className={styles['vertical-line']}></div>
</div>
<div className={styles['horizontal-connector-line']}></div>
<div className={styles['branch-lines-container-wide']}>
<div className={styles['branch-line-left']}></div>
<div className={styles['branch-line-right']}></div>
</div>
</div>
{/* 第三层：总监 */}
<div className={styles['hierarchy-level-3']}>
<div className={styles['person-row-wide']}>
<div className={styles['person-card-small']}>
<div className={styles['person-avatar-small']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>陈思</h4>
<p className={styles['person-title']}>总监</p>
<p className={styles['person-company']}>上海分公司</p>
</div>
<div className={styles['person-card-small']}>
<div className={styles['person-avatar-small']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>赵阳</h4>
<p className={styles['person-title']}>总监</p>
<p className={styles['person-company']}>杭州分公司</p>
</div>
</div>
</div>
{/* 连接线系统 - 第三层到第四层 */}
<div className={styles['connection-system-3']}>
<div className={styles['dual-vertical-lines-wide']}>
<div className={styles['vertical-line']}></div>
<div className={styles['vertical-line']}></div>
</div>
<div className={styles['horizontal-connector-line-wide']}></div>
<div className={styles['branch-lines-container-extra-wide']}>
<div className={styles['branch-line-left']}></div>
<div className={styles['branch-line-right']}></div>
</div>
</div>
{/* 第四层：经理 */}
<div className={styles['hierarchy-level-4']}>
<div className={styles['person-row-extra-wide']}>
<div className={styles['person-card-mini']}>
<div className={styles['person-avatar-mini']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>周婷</h4>
<p className={styles['person-title']}>经理</p>
<p className={styles['person-company']}>研发中心</p>
</div>
<div className={styles['person-card-mini']}>
<div className={styles['person-avatar-mini']}>
<UserOutlined />
</div>
<h4 className={styles['person-name']}>黄晨</h4>
<p className={styles['person-title']}>经理</p>
<p className={styles['person-company']}>市场部</p>
</div>
</div>
</div>
</div>
</div>
</Card>
{/* 图表区域 */}
{/* <Row gutter={16} className={styles['charts-row']}>
<Col xs={24} lg={14}>
<Card title="各部门人员分布" className={styles['chart-section']}>
<ReactECharts
option={this.getDepartmentChartOption()}
style={{ height: '300px' }}
/>
</Card>
</Col>
<Col xs={24} lg={10}>
<Card title="部门人员占比" className={styles['chart-section']}>
<ReactECharts
option={this.getOrgPieChartOption()}
style={{ height: '300px' }}
/>
</Card>
</Col>
</Row> */}
</div>
</Col>
</Row>
</div>
);
}
}
export default ReportRelation;

909
src/pages/organmanage_reportrelation/ReportRelation.less
Unescape Escape View File

@ -0,0 +1,909 @@
@import '~@/utils/utils.less';
/* 组织架构页面样式 */
.organ-chart-page {
padding: 16px;
background-color: #f9fafb;
min-height: 100vh;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
/* 内容滚动区域的滚动条样式 */
div[style*="overflowY: auto"] {
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
&:hover {
background: #bfbfbf;
}
}
}
/* 树形组件卡片样式 */
.treeCard {
height: 600px;
border: 1px solid #e8e8e8;
border-radius: 8px;
.treeContainer {
height: 520px;
overflow-y: auto;
/* 自定义滚动条样式 */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 3px;
&:hover {
background: #bfbfbf;
}
}
.orgTree {
.ant-tree-treenode {
padding: 2px 0;
.ant-tree-node-content-wrapper {
border-radius: 4px;
transition: background-color 0.2s;
&:hover {
background-color: #f5f5f5;
}
.ant-tree-title {
font-size: 14px;
}
}
}
}
}
}
/* Tree节点标题样式 */
.tree-node-title {
display: flex;
align-items: center;
width: 100%;
.node-title {
flex: 1;
font-size: 14px;
margin-left: 8px;
color: #333;
}
.node-count {
color: #999;
font-size: 12px;
margin-left: auto;
background: #f0f0f0;
padding: 1px 6px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
}
}
/* 公告栏样式 */
.organ-chart-announcement {
margin-bottom: 24px;
border-radius: 6px;
overflow: hidden;
}
.announcement-container {
display: flex;
align-items: center;
}
.announcement-badge {
background-color: #fef3c7;
color: #92400e;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
margin-right: 12px;
white-space: nowrap;
display: flex;
align-items: center;
.anticon {
margin-right: 4px;
}
}
.announcement-content {
overflow: hidden;
flex: 1;
}
.marquee-text {
white-space: nowrap;
animation: marquee 20s linear infinite;
display: inline-block;
span {
font-size: 14px;
margin-right: 32px;
&:last-child {
margin-right: 0;
}
}
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* 组织架构侧边栏样式 */
.org-sidebar {
height: fit-content;
.ant-card-body {
padding: 16px 8px 16px 16px;
}
/* 树形组件滚动区域样式 */
.ant-tree {
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: #d9d9d9;
border-radius: 2px;
&:hover {
background: #bfbfbf;
}
}
}
}
/* Tree节点标题样式 */
.tree-node-title {
display: flex;
align-items: center;
.node-text {
flex: 1;
font-size: 14px;
margin-left: 8px;
}
.node-count {
color: #999;
font-size: 12px;
margin-left: auto;
}
}
.org-node {
background-color: #F5F6FA;
padding: 8px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
&.has-children {
cursor: pointer;
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
.node-content {
display: flex;
align-items: center;
.node-icon {
color: #6b7280;
display: flex;
align-items: center;
.anticon {
color: #6b7280;
}
}
}
.node-text {
font-size: 14px;
margin-left: 8px;
}
.expand-icon {
font-size: 12px;
color: #9ca3af;
}
.org-children {
margin-left: 24px;
}
/* 筛选区域样式 */
.filter-section {
margin-bottom: 24px;
}
.section-title {
font-size: 18px;
font-weight: 500;
}
.filter-actions {
display: flex;
align-items: center;
gap: 16px;
}
.year-selector {
display: flex;
align-items: center;
span {
font-size: 14px;
color: #6b7280;
margin-right: 8px;
}
}
/* 主要内容区样式 */
.main-content {
border-radius: 6px;
}
/* 组织架构图样式 */
.org-chart-container {
display: flex;
flex-direction: column;
align-items: center;
}
.org-chart-node {
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
.company-node {
background: #2D5CF6;
color: #fff;
width: 192px;
margin-bottom: 16px;
:global(.ant-card-body) {
padding: 12px;
}
.node-title {
font-weight: 500;
font-size: 16px;
}
.node-count {
font-size: 12px;
opacity: 0.8;
}
}
.center-row {
width: 100%;
}
.center-column {
display: flex;
flex-direction: column;
align-items: center;
}
.center-node {
background: #dbeafe;
width: 160px;
margin-bottom: 16px;
:global(.ant-card-body) {
padding: 12px;
}
.node-title {
font-weight: 500;
}
.node-count {
font-size: 12px;
color: #6b7280;
}
}
.department-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.department-node {
background: #eff6ff;
width: 128px;
:global(.ant-card-body) {
padding: 8px;
}
.node-title {
font-size: 14px;
}
.node-count {
font-size: 12px;
color: #6b7280;
}
}
/* 统计卡片样式 */
.statistics-row {
margin-top: 32px;
}
.stat-card {
background: #F5F6FA;
border-radius: 6px;
}
.stat-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.stat-title {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}
.stat-icon {
.anticon {
font-size: 20px;
color: #2d5cf6;
}
}
.stat-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 4px;
}
.stat-desc {
font-size: 12px;
color: #6b7280;
}
/* 图表区域样式 */
.chart-section {
margin-top: 32px;
}
.chart-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 16px;
}
.chart-container {
background: #F5F6FA;
border-radius: 6px;
}
/* 图表区域样式 */
.charts-row {
margin-top: 16px;
}
.chart-section {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
:global(.ant-card-head-title) {
font-size: 16px;
font-weight: 500;
}
:global(.ant-card-body) {
padding: 20px;
}
}
/* 统计描述样式 */
.stat-desc {
margin-top: 8px;
font-size: 12px;
color: #52c41a;
}
/* 响应式样式 */
@media (max-width: 768px) {
.organ-chart-page {
padding: 8px;
}
.announcement-badge {
display: none;
}
.announcement-content {
overflow: hidden;
}
.filter-actions {
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.center-row {
flex-direction: column;
align-items: center;
gap: 24px;
}
.statistics-row {
:global(.ant-col) {
margin-bottom: 16px;
}
}
.charts-row {
:global(.ant-col) {
margin-bottom: 16px;
}
}
/* 移动端下的滚动优化 */
.organ-chart-page {
padding: 8px;
}
.org-sidebar {
margin-bottom: 16px;
}
}
/* 移动端触摸滚动优化 */
@media screen and (max-width: 768px) {
.organ-chart-page {
-webkit-overflow-scrolling: touch;
div[style*="overflowY: auto"] {
-webkit-overflow-scrolling: touch;
}
}
/* 移动端隐藏滚动条但保留滚动功能 */
.org-sidebar .ant-tree {
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
}
}
/* 汇报关系图样式 */
.report-relation-wrapper {
padding: 24px;
background: #ffffff;
min-height: 600px;
}
.report-relation-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
/* 层级容器 */
.hierarchy-level-1,
.hierarchy-level-2,
.hierarchy-level-3,
.hierarchy-level-4 {
display: flex;
justify-content: center;
margin-bottom: 0px;
position: relative;
}
/* 人员卡片行 */
.person-row {
display: flex;
gap: 64px;
justify-content: center;
}
.person-row-wide {
display: flex;
gap: 128px;
justify-content: center;
}
.person-row-extra-wide {
display: flex;
gap: 256px;
justify-content: center;
}
/* 人员卡片尺寸变体 */
.person-card-large {
display: flex;
flex-direction: column;
align-items: center;
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e8e8e8;
width: 192px;
text-align: center;
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
.person-card-medium {
display: flex;
flex-direction: column;
align-items: center;
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e8e8e8;
width: 192px;
text-align: center;
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
.person-card-small {
display: flex;
flex-direction: column;
align-items: center;
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e8e8e8;
width: 192px;
text-align: center;
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
.person-card-mini {
display: flex;
flex-direction: column;
align-items: center;
background: white;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e8e8e8;
width: 160px;
text-align: center;
transition: all 0.3s ease;
position: relative;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
/* 头像尺寸变体 */
.person-avatar-large {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(45, 92, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
.anticon {
color: #2D5CF6;
font-size: 20px;
}
}
.person-avatar-medium {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(45, 92, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
.anticon {
color: #2D5CF6;
font-size: 16px;
}
}
.person-avatar-small {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(45, 92, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
.anticon {
color: #2D5CF6;
font-size: 14px;
}
}
.person-avatar-mini {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(45, 92, 246, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
.anticon {
color: #2D5CF6;
font-size: 12px;
}
}
/* 文字样式 */
.person-name {
font-size: 14px;
font-weight: 500;
color: #262626;
margin: 0 0 4px 0;
}
.person-title {
font-size: 12px;
color: #8c8c8c;
margin: 0 0 4px 0;
}
.person-company {
font-size: 12px;
color: #bfbfbf;
margin: 0;
}
/* 连接线 */
.connection-line-top {
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 32px;
background-color: #d9d9d9;
}
/* 连接线系统样式 */
.connection-system-1,
.connection-system-2,
.connection-system-3 {
display: flex;
flex-direction: column;
align-items: center;
margin: 16px 0;
position: relative;
z-index: 5;
}
/* 主垂直线（从CEO向下） */
.vertical-main-line {
width: 2px;
height: 30px;
background: #d9d9d9;
border-radius: 1px;
margin-bottom: 4px;
}
/* 主水平线 */
.horizontal-main-line {
width: 160px;
height: 2px;
background: #d9d9d9;
border-radius: 1px;
margin: 4px 0;
}
.vertical-line {
width: 2px;
height: 30px;
background: #d9d9d9;
border-radius: 1px;
}
/* 连接水平线 */
.horizontal-connector-line {
width: 180px;
height: 2px;
background: #d9d9d9;
border-radius: 1px;
margin: 4px 0;
}
.horizontal-connector-line-wide {
width: 260px;
height: 2px;
background: #d9d9d9;
border-radius: 1px;
margin: 4px 0;
}
/* 分支线容器 */
.branch-lines-container {
display: flex;
gap: 160px;
margin-top: 4px;
}
.branch-lines-container-wide {
display: flex;
gap: 240px;
margin-top: 4px;
}
.branch-lines-container-extra-wide {
display: flex;
gap: 400px;
margin-top: 4px;
}
.branch-line-left,
.branch-line-right {
width: 2px;
height: 30px;
background: #d9d9d9;
border-radius: 1px;
}
/* 移除原有的顶部连接线 */
.connection-line-top {
display: none;
}
/* 响应式设计 */
@media (max-width: 1400px) {
.horizontal-main-line {
width: 120px;
}
.horizontal-connector-line {
width: 140px;
}
.horizontal-connector-line-wide {
width: 200px;
}
.dual-vertical-lines {
gap: 120px;
}
.dual-vertical-lines-wide {
gap: 180px;
}
.branch-lines-container {
gap: 120px;
}
.branch-lines-container-wide {
gap: 180px;
}
.branch-lines-container-extra-wide {
gap: 300px;
}
}
@media (max-width: 1000px) {
.connection-system-1,
.connection-system-2,
.connection-system-3 {
display: none;
}
}
Write Preview
Loading…
Cancel
Save