diff --git a/src/app.tsx b/src/app.tsx
index d952148..8ed90ad 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -128,7 +128,7 @@ export async function getInitialState (type) {
// history.replace({
// pathname: loginPath
// })
- /topnavbar00/hrefficiency
+ // /topnavbar00/hrefficiency
}
}
diff --git a/src/pages/hrefficiency_workreport/WorkReport.js b/src/pages/hrefficiency_workreport/WorkReport.js
index 80dabfd..9a37d87 100644
--- a/src/pages/hrefficiency_workreport/WorkReport.js
+++ b/src/pages/hrefficiency_workreport/WorkReport.js
@@ -1,14 +1,686 @@
-import React, {Fragment, PureComponent} from 'react';
+import React, { PureComponent } from 'react';
+import {
+ Card,
+ Tree,
+ Button,
+ Select,
+ Space,
+ Row,
+ Col,
+ Pagination,
+ Modal,
+ message
+} from 'antd';
+import { history } from 'umi';
+import {
+ ExpandOutlined,
+ UserOutlined,
+ TeamOutlined,
+ ApartmentOutlined,
+ SyncOutlined,
+ DollarOutlined,
+ SettingOutlined,
+ DownloadOutlined,
+ UserAddOutlined,
+ EditOutlined,
+ DeleteOutlined
+} from '@ant-design/icons';
import styles from './WorkReport.less';
+import StandardTable from '@/components/StandardTable';
+import WorkReportAdd from './form/WorkReportAdd';
+import WorkReportRenderSimpleForm from "./form/WorkReportRenderSimpleForm" //表单
+
+const { Option } = Select;
+
class WorkReport 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,
+ workType: '招聘面试',
+ workPerson: '张三',
+ department: '人事部',
+ startTime: '2025-09-03 09:00',
+ endTime: '2025-09-03 17:30',
+ duration: '8.5小时',
+ workQuantity: 3
+ },
+ {
+ key: '2',
+ id: 2,
+ workType: '培训组织',
+ workPerson: '李四',
+ department: '人事部',
+ startTime: '2025-09-03 08:30',
+ endTime: '2025-09-03 18:00',
+ duration: '9.5小时',
+ workQuantity: 2
+ },
+ {
+ key: '3',
+ id: 3,
+ workType: '绩效考核',
+ workPerson: '王五',
+ department: '人事部',
+ startTime: '2025-09-03 09:15',
+ endTime: '2025-09-03 17:45',
+ duration: '8.5小时',
+ workQuantity: 5
+ },
+ {
+ key: '4',
+ id: 4,
+ workType: '薪酬核算',
+ workPerson: '赵六',
+ department: '人事部',
+ startTime: '2025-09-03 08:45',
+ endTime: '2025-09-03 17:15',
+ duration: '8.5小时',
+ workQuantity: 4
+ },
+ {
+ key: '5',
+ id: 5,
+ workType: '招聘面试',
+ workPerson: '陈七',
+ department: '人事部',
+ startTime: '2025-09-03 09:30',
+ endTime: '2025-09-03 16:30',
+ duration: '7小时',
+ workQuantity: 1
+ },
+ ],
+ pagination: {
+ current: 1,
+ pageSize: 5,
+ total: 356,
+ },
+ selectedRecord: null, // 选中的记录，用于编辑
+ };
+
+ // 默认列配置
+ this.defaultColumns = [
+ {
+ title: '序号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 80,
+ align: 'center',
+ render: (text, record, index) => (
+
+ {index + 1}
+
+ ),
+ },
+ {
+ title: '作业类型',
+ dataIndex: 'workType',
+ key: 'workType',
+ width: 120,
+ align: 'center',
+ render: (text) => (
+
+ {text}
+
+ ),
+ },
+ {
+ title: '作业人员',
+ dataIndex: 'workPerson',
+ key: 'workPerson',
+ width: 100,
+ align: 'center',
+ render: (text, record) => (
+
+ ),
+ },
+ {
+ title: '部门',
+ dataIndex: 'department',
+ key: 'department',
+ width: 120,
+ align: 'center',
+ },
+ {
+ title: '开始时间',
+ dataIndex: 'startTime',
+ key: 'startTime',
+ width: 150,
+ align: 'center',
+ render: (time) => (
+
+ {time}
+
+ ),
+ },
+ {
+ title: '结束时间',
+ dataIndex: 'endTime',
+ key: 'endTime',
+ width: 150,
+ align: 'center',
+ render: (time) => (
+
+ {time}
+
+ ),
+ },
+ {
+ title: '持续时长',
+ dataIndex: 'duration',
+ key: 'duration',
+ width: 100,
+ align: 'center',
+ render: (duration) => (
+
+ {duration}
+
+ ),
+ sorter: (a, b) => {
+ const aHours = parseFloat(a.duration);
+ const bHours = parseFloat(b.duration);
+ return aHours - bHours;
+ },
+ },
+ {
+ title: '作业数量',
+ dataIndex: 'workQuantity',
+ key: 'workQuantity',
+ width: 100,
+ align: 'center',
+ render: (quantity) => (
+ = 4 ? '#52c41a' :
+ quantity >= 2 ? '#1890ff' : '#faad14'
+ }}>
+ {quantity}
+
+ ),
+ sorter: (a, b) => a.workQuantity - b.workQuantity,
+ },
+ {
+ title: '操作',
+ key: 'action',
+ width: 120,
+ align: 'center',
+ render: (_, record) => (
+
+ }
+ title="编辑工作报告"
+ onClick={() => this.handleEdit(record)}
+ >
+ 编辑
+
+ }
+ title="删除记录"
+ onClick={() => this.handleDelete(record)}
+ >
+ 删除
+
+
+ ),
+ },
+ ];
+ }
+
+ // 获取处理后的树形数据
+ getTreeData = () => {
+ const { organizationData } = this.state;
+
+ const processNode = (node) => ({
+ key: node.key,
+ title: (
+
+ {this.getNodeIcon(node.title)}
+ {node.title}
+ ({node.count})
+
+ ),
+ children: node.children ? node.children.map(processNode) : undefined
+ });
+
+ return organizationData.map(processNode);
+ };
+
+ // 获取节点图标
+ getNodeIcon = (title) => {
+ if (title.includes('公司') || title.includes('集团')) return ;
+ if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return ;
+ if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return ;
+ if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return ;
+ if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return ;
+ if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return ;
+ return ;
+ };
+
+ // 搜索处理
+ 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 (
+
+ );
+ }
+
+ renderAdvancedForm() {
+ const { prooperlog: { params } } = this.props;
+ const parentMethods = {
+ handleSearch: this.handleSearch,
+ handleFormReset: this.handleFormReset,
+ toggleForm: this.toggleForm,
+ params
+ };
+
+ return (
+
+ );
+ }
+
+ 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,
+ selectedRecord: null // 清空选中记录
+ });
+ };
+
+ // 新增成功回调
+ 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
+ }
+ });
+ };
+
+ // 处理作业人员点击事件
+ handlePersonClick = (record) => {
+ Modal.info({
+ title: `${record.workPerson} - 作业详情`,
+ width: 600,
+ content: (
+
+
+ 作业人员：{record.workPerson}
+ 所属部门：{record.department}
+ 作业类型：{record.workType}
+ 作业数量：{record.workQuantity}
+
+ 时间统计
+
+ 开始时间：{record.startTime}
+ 结束时间：{record.endTime}
+ 持续时长：{record.duration}
+ 工作效率：
+ {(record.workQuantity / parseFloat(record.duration)).toFixed(2)} 件/小时
+
+
+
+ ),
+ okText: '确定'
+ });
+ };
+
+ // 处理编辑
+ handleEdit = (record) => {
+ console.log('编辑工作报告:', record);
+ this.setState({
+ selectedRecord: record,
+ addModalVisible: true
+ });
+ };
+
+ // 处理删除
+ handleDelete = (record) => {
+ Modal.confirm({
+ title: '删除确认',
+ content: `确定要删除 "${record.workPerson}" 的工作报告记录吗？`,
+ okText: '确定',
+ cancelText: '取消',
+ onOk: () => {
+ // 实际项目中这里应该调用删除接口
+ console.log('删除工作报告记录:', record.id);
+
+ const newData = this.state.tableData.filter(item => item.id !== record.id);
+ this.setState({
+ tableData: newData,
+ pagination: {
+ ...this.state.pagination,
+ total: newData.length
+ }
+ });
+ message.success('工作报告删除成功');
+ }
+ });
+ };
+
render() {
+ const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
return (
- <>
-
-
- )
+
+ {/* 主体内容 */}
+
+
+
+ {/* 左侧组织架构树 */}
+
+
+
+
+ 组织架构
+
+
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeRefresh}
+ title="刷新"
+ />
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeToggle}
+ title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+ />
+
+
+ }
+ className={styles.treeCard}
+ >
+
+
+
+
+
+
+ {/* 右侧人员信息区 */}
+
+ {/* 筛选条件 */}
+
+ {this.renderForm()}
+
+
+ {/* 操作按钮和统计 */}
+
+
+ {/* 共 {pagination.total} 条记录 */}
+
+
+ }
+ size="middle"
+ // className={styles.exportButton}
+ >
+ 导出
+
+ }
+ size="middle"
+ // className={styles.addButton}
+ onClick={this.showAddModal}
+ >
+ 新增
+
+
+
+
+ {/* 人员表格 */}
+
+
+
+ {/* 分页 */}
+
+
+ `显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
+ }
+ onChange={this.onPaginationChange}
+ onShowSizeChange={this.onPaginationChange}
+ />
+
+
+
+
+
+
+
+ );
+
+};
+
+export default WorkReportRenderSimpleForm;
diff --git a/src/pages/hrefficiency_workreport/form/WorkReportRenderSimpleForm.less b/src/pages/hrefficiency_workreport/form/WorkReportRenderSimpleForm.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/nav_system_content/SystemContentList.js b/src/pages/nav_system_content/SystemContentList.js
index af4b8ab..841c25c 100644
--- a/src/pages/nav_system_content/SystemContentList.js
+++ b/src/pages/nav_system_content/SystemContentList.js
@@ -27,7 +27,9 @@ const SystemContentList = (props) => {
defaultKey = getDefaultRoute(routes)
const mathRoute = matchRoutes(routes, pathName)
- setRouteActive({ key: mathRoute?.length ? pathName : defaultKey }, routes)
+ // 如果当前路径匹配到菜单路由，或者是以当前模块开头的路径（如详情页），都不强制跳转
+ const shouldUseCurrentPath = mathRoute?.length > 0 || pathName.startsWith(tempRoute[0]?.key + '/')
+ setRouteActive({ key: shouldUseCurrentPath ? pathName : defaultKey }, routes)
}
setMenuItems(newList)
@@ -35,19 +37,41 @@ const SystemContentList = (props) => {
const setRouteActive = (value, menu) => {
const curKey = value.key
+ console.log(curKey,'7777777777777')
const tempMenu = menu ?? menuItems ?? []
const mathRoute = matchRoutes(tempMenu, curKey)
let openKeys = []
let selectedKeys = []
- mathRoute?.map((item, index) => {
- mathRoute?.length !== index + 1 && (openKeys = [...openKeys, item.pathname])
- mathRoute?.length === index + 1 && (selectedKeys = [...selectedKeys, item.pathname])
- })
+ if (mathRoute?.length > 0) {
+ // 如果找到匹配的菜单路由，正常处理
+ mathRoute?.map((item, index) => {
+ mathRoute?.length !== index + 1 && (openKeys = [...openKeys, item.pathname])
+ mathRoute?.length === index + 1 && (selectedKeys = [...selectedKeys, item.pathname])
+ })
+ } else {
+ // 如果是不在菜单中的路由（如详情页），尝试激活父级菜单
+ const pathSegments = curKey.split('/').filter(Boolean)
+ for (let i = pathSegments.length - 1; i > 0; i--) {
+ const parentPath = '/' + pathSegments.slice(0, i).join('/')
+ const parentRoute = matchRoutes(tempMenu, parentPath)
+ if (parentRoute?.length > 0) {
+ parentRoute?.map((item, index) => {
+ parentRoute?.length !== index + 1 && (openKeys = [...openKeys, item.pathname])
+ parentRoute?.length === index + 1 && (selectedKeys = [...selectedKeys, item.pathname])
+ })
+ break
+ }
+ }
+ }
setOpenKey(openKeys)
setSelectedKey(selectedKeys)
- history.replace(curKey)
+
+ // 只有当前路径与目标路径不同时才执行跳转
+ if (location.pathname !== curKey) {
+ history.replace(curKey)
+ }
}
return (
diff --git a/src/pages/performance/Performance.js b/src/pages/performance/Performance.js
new file mode 100644
index 0000000..266b062
--- /dev/null
+++ b/src/pages/performance/Performance.js
@@ -0,0 +1,717 @@
+import React, { PureComponent } from 'react';
+import {
+ Card,
+ Tree,
+ Input,
+ Button,
+ DatePicker,
+ Select,
+ Row,
+ Col,
+ Space,
+ Radio,
+ Checkbox,
+ InputNumber,
+ Avatar,
+ message,
+ Timeline,
+ Tag,
+ Typography,
+ Divider,
+ Upload,
+ Form,
+ Table,
+ Pagination
+} from 'antd';
+import {
+ SaveOutlined,
+ CloseOutlined,
+ PlusCircleOutlined,
+ DeleteOutlined,
+ ExpandOutlined,
+ UserOutlined,
+ TeamOutlined,
+ ApartmentOutlined,
+ SyncOutlined,
+ DollarOutlined,
+ SettingOutlined,
+ CalendarOutlined,
+ UsergroupAddOutlined,
+ UserSwitchOutlined,
+ StopOutlined,
+ CheckCircleOutlined,
+ CloseCircleOutlined,
+ ContactsOutlined,
+ PrinterOutlined,
+ CheckOutlined,
+ ClockCircleOutlined,
+ LoadingOutlined,
+ EyeOutlined,
+ SearchOutlined,
+ PictureOutlined,
+ UploadOutlined,
+ EditOutlined,
+ ShareAltOutlined,
+ FilterOutlined,
+ DownloadOutlined,
+ PlusOutlined,
+ CaretDownOutlined,
+ SortAscendingOutlined,
+ SortDescendingOutlined
+} from '@ant-design/icons';
+import ReactECharts from 'echarts-for-react';
+import dayjs from 'dayjs';
+import styles from './Performance.less';
+
+const { Option } = Select;
+const { TextArea } = Input;
+const { Title, Text, Paragraph } = Typography;
+const { RangePicker } = DatePicker;
+
+class Performance extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ selectedOrgKeys: ['0-0-4'], // 默认选中人事部
+ expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
+ // 绩效数据
+ performanceData: {
+ selectedPlan: '2023年Q3季度考核',
+ currentPage: 1,
+ pageSize: 10,
+ total: 128,
+ // 绩效评分分布数据
+ scoreDistribution: [
+ { name: '0-60分', value: 12, color: '#FF6B6B' },
+ { name: '60-80分', value: 45, color: '#4ECDC4' },
+ { name: '80-100分', value: 71, color: '#45B7D1' }
+ ],
+ // 部门绩效平均分数据
+ departmentScores: {
+ departments: ['技术研发', '市场营销', '产品运营', '人力资源', '财务中心', '客户服务'],
+ scores: [89.5, 87.2, 85.8, 84.3, 83.7, 82.1]
+ },
+ // 人员绩效明细数据
+ performanceList: [
+ {
+ key: '1',
+ name: '张明远',
+ department: '技术研发中心',
+ totalScore: 96.5,
+ codeLines: 12500,
+ documentWords: 8500,
+ projectAmount: '¥1,250,000',
+ workHours: 186,
+ values: 48.0
+ },
+ {
+ key: '2',
+ name: '李思颖',
+ department: '市场营销中心',
+ totalScore: 95.0,
+ codeLines: 11800,
+ documentWords: 9200,
+ projectAmount: '¥1,100,000',
+ workHours: 182,
+ values: 47.0
+ },
+ {
+ key: '3',
+ name: '王浩然',
+ department: '产品运营中心',
+ totalScore: 93.5,
+ codeLines: 11000,
+ documentWords: 7800,
+ projectAmount: '¥980,000',
+ workHours: 180,
+ values: 47.0
+ },
+ {
+ key: '4',
+ name: '陈雨桐',
+ department: '人力资源中心',
+ totalScore: 92.0,
+ codeLines: 10500,
+ documentWords: 9500,
+ projectAmount: '¥920,000',
+ workHours: 178,
+ values: 46.5
+ },
+ {
+ key: '5',
+ name: '刘子轩',
+ department: '技术研发中心',
+ totalScore: 91.5,
+ codeLines: 9800,
+ documentWords: 7200,
+ projectAmount: '¥890,000',
+ workHours: 175,
+ values: 46.0
+ },
+ {
+ key: '6',
+ name: '赵欣然',
+ department: '客户服务中心',
+ totalScore: 90.0,
+ codeLines: 9200,
+ documentWords: 8500,
+ projectAmount: '¥850,000',
+ workHours: 172,
+ values: 45.5
+ },
+ {
+ key: '7',
+ name: '孙伟杰',
+ department: '财务中心',
+ totalScore: 89.5,
+ codeLines: 8900,
+ documentWords: 6800,
+ projectAmount: '¥820,000',
+ workHours: 170,
+ values: 45.0
+ },
+ {
+ key: '8',
+ name: '周晓彤',
+ department: '市场营销中心',
+ totalScore: 88.0,
+ codeLines: 8500,
+ documentWords: 7900,
+ projectAmount: '¥780,000',
+ workHours: 168,
+ values: 44.5
+ },
+ {
+ key: '9',
+ name: '吴宇航',
+ department: '技术研发中心',
+ totalScore: 87.5,
+ codeLines: 8200,
+ documentWords: 6500,
+ projectAmount: '¥750,000',
+ workHours: 165,
+ values: 44.0
+ },
+ {
+ key: '10',
+ name: '郑雅文',
+ department: '产品运营中心',
+ totalScore: 86.0,
+ codeLines: 8000,
+ documentWords: 7800,
+ projectAmount: '¥720,000',
+ workHours: 162,
+ values: 43.5
+ }
+ ]
+ },
+ 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: (
+
+ {this.getNodeIcon(node.title)}
+ {node.title}
+ ({node.count})
+
+ ),
+ children: node.children ? node.children.map(processNode) : undefined
+ });
+
+ return organizationData.map(processNode);
+ };
+
+ // 获取节点图标
+ getNodeIcon = (title) => {
+ if (title.includes('公司') || title.includes('集团')) return ;
+ if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return ;
+ if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return ;
+ if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return ;
+ if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return ;
+ if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return ;
+ return ;
+ };
+
+ // 刷新树数据
+ handleTreeRefresh = () => {
+ message.info('刷新组织架构数据');
+ };
+
+ // 展开/收缩所有节点
+ 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) });
+ }
+ };
+
+ // 组织树选择
+ onTreeSelect = (selectedKeys, info) => {
+ console.log('选中节点:', selectedKeys, info);
+ this.setState({ selectedOrgKeys: selectedKeys });
+ };
+
+ // 树展开/收缩
+ onTreeExpand = (expandedKeys) => {
+ this.setState({ expandedKeys });
+ };
+
+ // 绩效计划切换
+ handlePlanChange = (value) => {
+ this.setState({
+ performanceData: {
+ ...this.state.performanceData,
+ selectedPlan: value
+ }
+ });
+ message.success(`切换到: ${value}`);
+ };
+
+ // 部门层级切换
+ handleDepartmentLevelChange = (value) => {
+ message.success(`切换到: ${value}`);
+ };
+
+ // 分页变化
+ handlePageChange = (page, pageSize) => {
+ this.setState({
+ performanceData: {
+ ...this.state.performanceData,
+ currentPage: page,
+ pageSize: pageSize
+ }
+ });
+ };
+
+ // 饼图配置
+ getPieOption = () => {
+ const { scoreDistribution } = this.state.performanceData;
+ return {
+ animation: false,
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a}
{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ right: 10,
+ top: 'center',
+ data: scoreDistribution.map(item => item.name)
+ },
+ series: [
+ {
+ name: '绩效评分分布',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ center: ['40%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 4,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '14',
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: scoreDistribution.map(item => ({
+ value: item.value,
+ name: item.name,
+ itemStyle: {
+ color: item.color
+ }
+ }))
+ }
+ ]
+ };
+ };
+
+ // 柱状图配置
+ getBarOption = () => {
+ const { departmentScores } = this.state.performanceData;
+ const colorList = ['#45B7D1', '#4ECDC4', '#A5DEE4', '#7AC5CD', '#66C6C4', '#85C1E9'];
+
+ return {
+ animation: false,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01]
+ },
+ yAxis: {
+ type: 'category',
+ data: departmentScores.departments
+ },
+ series: [
+ {
+ name: '平均分',
+ type: 'bar',
+ data: departmentScores.scores.map((score, index) => ({
+ value: score,
+ itemStyle: {
+ color: colorList[index],
+ borderRadius: [0, 4, 4, 0]
+ }
+ }))
+ }
+ ]
+ };
+ };
+
+ render() {
+ const { selectedOrgKeys, expandedKeys, performanceData } = this.state;
+
+ // 表格列配置
+ const columns = [
+ {
+ title: (
+
+ 姓名
+
+
+ ),
+ dataIndex: 'name',
+ key: 'name',
+ sorter: true,
+ render: (text) => {text}
+ },
+ {
+ title: (
+
+ 部门
+
+
+ ),
+ dataIndex: 'department',
+ key: 'department',
+ sorter: true
+ },
+ {
+ title: (
+
+ 总分
+
+
+ ),
+ dataIndex: 'totalScore',
+ key: 'totalScore',
+ sorter: true,
+ render: (score) => {score}
+ },
+ {
+ title: (
+
+ 代码行数
+
+
+ ),
+ dataIndex: 'codeLines',
+ key: 'codeLines',
+ sorter: true,
+ render: (value) => value.toLocaleString()
+ },
+ {
+ title: (
+
+ 文档字数
+
+
+ ),
+ dataIndex: 'documentWords',
+ key: 'documentWords',
+ sorter: true,
+ render: (value) => value.toLocaleString()
+ },
+ {
+ title: (
+
+ 项目金额数
+
+
+ ),
+ dataIndex: 'projectAmount',
+ key: 'projectAmount',
+ sorter: true
+ },
+ {
+ title: (
+
+ 出勤时长
+
+
+ ),
+ dataIndex: 'workHours',
+ key: 'workHours',
+ sorter: true
+ },
+ {
+ title: (
+
+ 价值观
+
+
+ ),
+ dataIndex: 'values',
+ key: 'values',
+ sorter: true
+ }
+ ];
+
+ return (
+
+
+
+
+ {/* 左侧组织架构树 - 保持不变 */}
+
+
+
+
+ 组织架构
+
+
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeRefresh}
+ title="刷新"
+ />
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeToggle}
+ title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+ />
+
+
+ }
+ className={styles.treeCard}
+ >
+
+
+
+
+
+
+ {/* 右侧绩效仪表盘 */}
+
+
+ {/* 滚动内容区 */}
+
+ {/* 头部标题和选择器 */}
+
+
绩效仪表盘
+
+ 绩效计划：
+ }
+ >
+
+
+
+
+
+
+
+
+ {/* 图表区域 */}
+
+
+
+ 绩效评分分布
+
+
+
+
+
+
+
+
+
部门绩效平均分
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 人员绩效明细表 */}
+
+ 人员绩效明细
+
+
({
+ className: styles.tableRowHover
+ })}
+ />
+
+ {/* 分页 */}
+
+
+ 显示 {((performanceData.currentPage - 1) * performanceData.pageSize) + 1} 到{' '}
+ {Math.min(performanceData.currentPage * performanceData.pageSize, performanceData.total)} 条，
+ 共 {performanceData.total} 条记录
+
+
+
+ {/* 主体内容 */}
+
+
+
+ {/* 左侧组织架构树 */}
+
+
+
+
+ 组织架构
+
+
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeRefresh}
+ title="刷新"
+ />
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeToggle}
+ title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+ />
+
+
+ }
+ className={styles.treeCard}
+ >
+
+
+
+
+
+
+ {/* 右侧人员信息区 */}
+
+ {/* 筛选条件 */}
+
+ {this.renderForm()}
+
+
+ {/* 操作按钮和统计 */}
+ {/*
+
+ 共 {pagination.total} 条记录
+
+
+ }
+ size="large"
+ className={styles.exportButton}
+ >
+ 导出
+
+ }
+ size="large"
+ className={styles.addButton}
+ onClick={this.showAddModal}
+ >
+ 新增
+
+
+
*/}
+
+ {/* 人员表格 */}
+
+
+
+ {/* 分页 */}
+
+
+ `显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
+ }
+ onChange={this.onPaginationChange}
+ onShowSizeChange={this.onPaginationChange}
+ />
+
+
+
+
+
+
+
+ );
+
+};
+
+export default SalaryDataRenderSimpleForm;
diff --git a/src/pages/salarymanage_salarydata/form/SalaryDataRenderSimpleForm.less b/src/pages/salarymanage_salarydata/form/SalaryDataRenderSimpleForm.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/salarymanage_salarydetail/SalaryDetail.js b/src/pages/salarymanage_salarydetail/SalaryDetail.js
new file mode 100644
index 0000000..b7a026a
--- /dev/null
+++ b/src/pages/salarymanage_salarydetail/SalaryDetail.js
@@ -0,0 +1,395 @@
+
+import React, { PureComponent } from 'react';
+import { Card, Avatar, Breadcrumb, Tag, Descriptions, Table, Row, Col, Button, Divider, Progress, Statistic } from 'antd';
+import { UserOutlined, DollarCircleOutlined, FileTextOutlined, CalendarOutlined, BarChartOutlined, ArrowLeftOutlined, EditOutlined, PrinterOutlined, FileExcelOutlined, RiseOutlined, FallOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import styles from './SalaryDetail.less';
+import girlAvatar from './girl.png';
+
+// 薪资明细表数据
+const salaryDetailData = [
+ { key: '1', item: '基本工资', standard: '¥10,000', should: '¥10,000', deduct: '-', actual: '¥10,000', remark: '-' },
+ { key: '2', item: '绩效工资', standard: '¥6,000', should: '¥5,500', deduct: '¥500', actual: '¥5,500', remark: 'KPI未达标' },
+ { key: '3', item: '岗位津贴', standard: '¥1,200', should: '¥1,200', deduct: '-', actual: '¥1,200', remark: '主管级津贴' },
+ { key: '4', item: '餐补', standard: '¥600', should: '¥600', deduct: '-', actual: '¥600', remark: '22个工作日' },
+ { key: '5', item: '交通补贴', standard: '¥800', should: '¥800', deduct: '-', actual: '¥800', remark: '-' },
+ { key: '6', item: '通讯补贴', standard: '¥300', should: '¥300', deduct: '-', actual: '¥300', remark: '-' },
+ { key: '7', item: '加班费', standard: '-', should: '¥1,100', deduct: '-', actual: '¥1,100', remark: '国庆加班3天' },
+ { key: '8', item: '小计', standard: '-', should: '¥19,500', deduct: '¥500', actual: '¥19,000', remark: '-', isSubtotal: true },
+ { key: '9', item: '养老保险', standard: '8%', should: '-', deduct: '¥800', actual: '-¥800', remark: '个人缴纳' },
+ { key: '10', item: '医疗保险', standard: '2%', should: '-', deduct: '¥200', actual: '-¥200', remark: '个人缴纳' },
+ { key: '11', item: '失业保险', standard: '0.5%', should: '-', deduct: '¥50', actual: '-¥50', remark: '个人缴纳' },
+ { key: '12', item: '住房公积金', standard: '12%', should: '-', deduct: '¥1,200', actual: '-¥1,200', remark: '个人缴纳' },
+ { key: '13', item: '个人所得税', standard: '-', should: '-', deduct: '¥1,430', actual: '-¥1,430', remark: '累计预扣法' },
+ { key: '14', item: '合计扣减', standard: '-', should: '-', deduct: '¥3,680', actual: '-¥3,680', remark: '-', isSubtotal: true },
+ { key: '15', item: '实发工资', standard: '-', should: '-', deduct: '-', actual: '¥15,320', remark: '-', isTotal: true },
+];
+
+// 考勤数据
+const attendanceData = [
+ { type: '出勤', count: 21, color: '#52c41a' },
+ { type: '迟到/早退', count: 1, color: '#faad14' },
+ { type: '缺勤', count: 0.5, color: '#ff4d4f' },
+ { type: '加班', count: 3, color: '#1890ff' },
+];
+class SalaryDetail extends PureComponent {
+ handleGoBack = () => {
+ // 跳转到薪酬管理页面
+ history.push('/topnavbar00/salarymanage/salarydata');
+ };
+
+ render() {
+ return (
+
+
+ {/* 面包屑导航 */}
+
+
+ {/* 返回按钮 */}
+ }
+ onClick={this.handleGoBack}
+ style={{ marginBottom: '24px', padding: 0 }}
+ >
+ 返回
+
+
+ {/* 个人信息卡片 */}
+
+
+
+
+
+
+
+
+ 林雅婷
+ 员工ID: HR20230085
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }>
+ 编辑信息
+
+ }>
+ 导出资料
+
+ }>
+ 打印档案
+
+
+
+
+
+
+ {/* 薪资概览 */}
+
+
+
+
+
税前工资
+ +5% 上月
+
+
+ ¥18,500
+ /月
+
+
+
年度累计: ¥203,500
+
上月工资: ¥17,600
+
+
税后工资
+ +4.8% 上月
+
+
+ ¥15,320
+ /月
+
+
+
年度累计: ¥168,520
+
上月工资: ¥14,620
+
薪资构成
+
+
+
+
+
+
+
+ {/* 工资明细表 */}
+
+
+
2023年10月工资明细
+
+ (
+
+ {text}
+
+ )
+ },
+ {
+ title: '标准',
+ dataIndex: 'standard',
+ key: 'standard',
+ render: (text, record) => (
+
+ {text}
+
+ )
+ },
+ {
+ title: '应发',
+ dataIndex: 'should',
+ key: 'should',
+ render: (text, record) => (
+
+ {text}
+
+ )
+ },
+ {
+ title: '扣减',
+ dataIndex: 'deduct',
+ key: 'deduct',
+ render: (text, record) => (
+
+ {text}
+
+ )
+ },
+ {
+ title: '实发',
+ dataIndex: 'actual',
+ key: 'actual',
+ render: (text, record) => (
+
+ {text}
+
+ )
+ },
+ {
+ title: '备注',
+ dataIndex: 'remark',
+ key: 'remark',
+ render: (text, record) => (
+
+ {text}
+
+ )
+ },
+ ]}
+ dataSource={salaryDetailData}
+ pagination={false}
+ size="small"
+ rowClassName={(record) => {
+ if (record.isTotal) return 'salary-total-row';
+ if (record.isSubtotal) return 'salary-subtotal-row';
+ return 'salary-normal-row';
+ }}
+ />
+
+
+ {/* 考勤记录 */}
+
+
+
2023年10月考勤记录
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 10-01 出勤
+ 10-02 出勤
+ 10-03 出勤
+ 10-04 迟到
+ 10-05 出勤
+ 10-06 出勤
+ 10-07 出勤
+ 10-08 出勤
+ 10-09 出勤
+ 10-10 出勤
+ 10-11 出勤
+ 10-12 出勤
+ 10-13 出勤
+ 10-14 出勤
+ 10-15 出勤
+ 10-16 出勤
+ 10-17 出勤
+ 10-18 出勤
+ 10-19 出勤
+ 10-20 出勤
+ 10-21 缺勤
+ 10-22 出勤
+ 10-23 出勤
+ 10-24 出勤
+ 10-25 出勤
+ 10-26 出勤
+ 10-27 出勤
+ 10-28 出勤
+ 10-29 出勤
+ 10-30 出勤
+ 10-31 出勤
+
+
+
+
+
+ {/* 左侧组织架构树 */}
+
+
+
+
+ 组织架构
+
+
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeRefresh}
+ title="刷新"
+ />
+ }
+ size="small"
+ style={{ color: '#1890ff' }}
+ onClick={this.handleTreeToggle}
+ title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+ />
+
+
+ }
+ className={styles.treeCard}
+ >
+
+
+
+
+
+
+ {/* 右侧主要内容 */}
+
+
+ {/* 头部操作区 */}
+
+
薪酬计算规则设置
+
+ }
+ onClick={this.handleSave}
+ >
+ 保存规则
+
+ }
+ onClick={this.handleCancel}
+ >
+ 取消
+
+
+
+
+ {/* 表单内容区 */}
+
+ {/* 基本信息 */}
+
+
+
+
+
+ this.handleFormChange('ruleName', e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ this.handleFormChange('effectiveDate', date)}
+ />
+
+
+
+
+
+ {/* 薪酬项设置 */}
+
}
+ onClick={this.addSalaryItem}
+ >
+ 添加薪酬项
+
+ }
+ >
+
+
+
+ {/* 社保公积金设置 */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 个税设置 */}
+
+
+
+
+
+ this.handleFormChange('taxThreshold', e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+