|
|
|
|
@ -0,0 +1,737 @@
|
|
|
|
|
import {Button, Col, Form, Input, Menu, Pagination, Row, Select, Space, Switch, Table} from "antd";
|
|
|
|
|
import {useEffect, useRef, useState} from "react";
|
|
|
|
|
import styles from './InspectionTaskPlan.less'
|
|
|
|
|
import {Title} from "@/pages/inspectiontasks/InspectionTasks";
|
|
|
|
|
import btnImg1 from '@/assets/img/planBtn1.png'
|
|
|
|
|
import btnImg2 from '@/assets/img/planBtn2.png'
|
|
|
|
|
import btnImg3 from '@/assets/img/planBtn3.png'
|
|
|
|
|
import paibanBg from '@/assets/img/paiban.png'
|
|
|
|
|
import {
|
|
|
|
|
DeleteOutlined,
|
|
|
|
|
DownOutlined,
|
|
|
|
|
EditOutlined,
|
|
|
|
|
ExportOutlined,
|
|
|
|
|
EyeOutlined,
|
|
|
|
|
PlusOutlined,
|
|
|
|
|
RedoOutlined
|
|
|
|
|
} from "@ant-design/icons";
|
|
|
|
|
const MenuBg=(props)=>{
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles["parallelogram-container"]}>
|
|
|
|
|
<span className={styles["text-content"]}>{props.text}</span>
|
|
|
|
|
<span className={styles["text-content"]} style={{margin:'0'}}>{props.icon}</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
// 员工表格组件
|
|
|
|
|
const EmployeeTable = () => {
|
|
|
|
|
// 状态管理
|
|
|
|
|
const [dataSource, setDataSource] = useState([]); // 表格数据
|
|
|
|
|
const [loading, setLoading] = useState(false); // 加载状态
|
|
|
|
|
const [total, setTotal] = useState(0); // 总条数
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1); // 当前页码
|
|
|
|
|
const [pageSize, setPageSize] = useState(10); // 每页条数
|
|
|
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 选中的行ID
|
|
|
|
|
|
|
|
|
|
// 表格列配置
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
key: 'index',
|
|
|
|
|
width: 60,
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '工号',
|
|
|
|
|
dataIndex: 'employeeId',
|
|
|
|
|
key: 'employeeId',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '姓名',
|
|
|
|
|
dataIndex: 'name',
|
|
|
|
|
key: 'name',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '性别',
|
|
|
|
|
dataIndex: 'gender',
|
|
|
|
|
key: 'gender',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '所属部门',
|
|
|
|
|
dataIndex: 'department',
|
|
|
|
|
key: 'department',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '岗位',
|
|
|
|
|
dataIndex: 'position',
|
|
|
|
|
key: 'position',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '手机号码',
|
|
|
|
|
dataIndex: 'phone',
|
|
|
|
|
key: 'phone',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
key: 'status',
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (status) => (
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '入职时间',
|
|
|
|
|
dataIndex: 'hireDate',
|
|
|
|
|
key: 'hireDate',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
<Space size="small">
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#1890ff' }}>
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
</a>
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#1890ff' }}>
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
</a>
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
</a>
|
|
|
|
|
</Space>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 选择框配置
|
|
|
|
|
const rowSelection = {
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
onChange: (newSelectedRowKeys) => {
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 获取表格数据
|
|
|
|
|
const fetchTableData = async () => {
|
|
|
|
|
try {
|
|
|
|
|
setLoading(true);
|
|
|
|
|
// 这里是预留的接口调用位置
|
|
|
|
|
// 实际项目中替换为真实接口请求
|
|
|
|
|
// const response = await api.getEmployeeList({
|
|
|
|
|
// page: currentPage,
|
|
|
|
|
// pageSize: pageSize
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// 模拟数据 - 实际项目中删除
|
|
|
|
|
const mockData = [
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
employeeId: 'GH001',
|
|
|
|
|
name: '钱佳仪',
|
|
|
|
|
gender: '女',
|
|
|
|
|
department: '运行部',
|
|
|
|
|
position: '巡检员',
|
|
|
|
|
phone: '189 7731 3118',
|
|
|
|
|
status: true,
|
|
|
|
|
hireDate: '2025-09-13'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
employeeId: 'GH002',
|
|
|
|
|
name: '孙兆洪',
|
|
|
|
|
gender: '女',
|
|
|
|
|
department: '安保部',
|
|
|
|
|
position: '安全员',
|
|
|
|
|
phone: '156 9747 2741',
|
|
|
|
|
status: true,
|
|
|
|
|
hireDate: '2025-09-12'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
employeeId: 'GH003',
|
|
|
|
|
name: '季丹',
|
|
|
|
|
gender: '男',
|
|
|
|
|
department: '设备部',
|
|
|
|
|
position: '维修工',
|
|
|
|
|
phone: '151 4456 8916',
|
|
|
|
|
status: true,
|
|
|
|
|
hireDate: '2025-08-16'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '4',
|
|
|
|
|
employeeId: 'GH004',
|
|
|
|
|
name: '赵晓辉',
|
|
|
|
|
gender: '男',
|
|
|
|
|
department: '调度室',
|
|
|
|
|
position: '调度员',
|
|
|
|
|
phone: '181 8511 3486',
|
|
|
|
|
status: true,
|
|
|
|
|
hireDate: '2025-08-15'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '5',
|
|
|
|
|
employeeId: 'GH005',
|
|
|
|
|
name: '何扑金',
|
|
|
|
|
gender: '女',
|
|
|
|
|
department: '消防班',
|
|
|
|
|
position: '消防员',
|
|
|
|
|
phone: '183 3220 4078',
|
|
|
|
|
status: true,
|
|
|
|
|
hireDate: '2025-07-20'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '6',
|
|
|
|
|
employeeId: 'GH006',
|
|
|
|
|
name: '吴国立',
|
|
|
|
|
gender: '男',
|
|
|
|
|
department: '综合部',
|
|
|
|
|
position: '文员',
|
|
|
|
|
phone: '187 5703 5618',
|
|
|
|
|
status: false,
|
|
|
|
|
hireDate: '2025-07-17'
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 模拟接口返回 - 实际项目中使用接口数据
|
|
|
|
|
setDataSource(mockData);
|
|
|
|
|
setTotal(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取员工数据失败:', error);
|
|
|
|
|
} finally {
|
|
|
|
|
setLoading(false);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
fetchTableData();
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
// 预留查看详情逻辑
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 渲染表格
|
|
|
|
|
return (
|
|
|
|
|
<Table
|
|
|
|
|
rowSelection={{
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
...rowSelection,
|
|
|
|
|
}}
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
loading={loading}
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
rowKey="key"
|
|
|
|
|
style={{width:'100%',}}
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
const GroupTable=()=>{
|
|
|
|
|
//状态管理
|
|
|
|
|
const [dataSource,setDataSource]=useState([]) //表格数据
|
|
|
|
|
const [loading,setLoading]=useState(false) //加载状态
|
|
|
|
|
const [total,setTotal]=useState(0)
|
|
|
|
|
const [currentPage,setCurrentPage]=useState(1)
|
|
|
|
|
const [pageSize,setPageSize]=useState(10)
|
|
|
|
|
const [selectedRowKeys,setSelectedRowKeys]=useState([])//选中行的id
|
|
|
|
|
|
|
|
|
|
const columns=[
|
|
|
|
|
{
|
|
|
|
|
title: '序号',
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
key: 'index',
|
|
|
|
|
width: 60,
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (text, record, index) => (index + 1) + (currentPage - 1) * pageSize
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '班组编号',
|
|
|
|
|
dataIndex: 'groupId',
|
|
|
|
|
key: 'groundId',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '班组姓名',
|
|
|
|
|
dataIndex: 'groupName',
|
|
|
|
|
key: 'groupName',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '班组长',
|
|
|
|
|
dataIndex: 'groupHeader',
|
|
|
|
|
key: 'groupHeader',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '成员数量',
|
|
|
|
|
dataIndex: 'num',
|
|
|
|
|
key: 'num',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '负责区域',
|
|
|
|
|
dataIndex: 'position',
|
|
|
|
|
key: 'position',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '联系电话',
|
|
|
|
|
dataIndex: 'phone',
|
|
|
|
|
key: 'phone',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '班组状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
key: 'status',
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (status) => (
|
|
|
|
|
<Switch checked={status} />
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '创建时间',
|
|
|
|
|
dataIndex: 'createTime',
|
|
|
|
|
key: 'createTime',
|
|
|
|
|
align:'center',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title:'备注',
|
|
|
|
|
dataIndex:'remarks',
|
|
|
|
|
key:'remarks',
|
|
|
|
|
align:'center'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '操作',
|
|
|
|
|
key: 'action',
|
|
|
|
|
align:'center',
|
|
|
|
|
render: (_, record) => (
|
|
|
|
|
<Space size="small">
|
|
|
|
|
<a onClick={() => handleView(record)} style={{ color: '#1890ff' }}>
|
|
|
|
|
<EyeOutlined /> 查看详情
|
|
|
|
|
</a>
|
|
|
|
|
<a onClick={() => handleEdit(record)} style={{ color: '#1890ff' }}>
|
|
|
|
|
<EditOutlined /> 编辑
|
|
|
|
|
</a>
|
|
|
|
|
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
|
|
|
|
|
<DeleteOutlined /> 删除
|
|
|
|
|
</a>
|
|
|
|
|
</Space>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
// 选择框配置
|
|
|
|
|
const rowSelection = {
|
|
|
|
|
selectedRowKeys,
|
|
|
|
|
onChange: (newSelectedRowKeys) => {
|
|
|
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
const fetchTableData=()=>{
|
|
|
|
|
try{
|
|
|
|
|
setLoading(true)
|
|
|
|
|
const mockData=[
|
|
|
|
|
{
|
|
|
|
|
key: '1',
|
|
|
|
|
groupId: 'GH001',
|
|
|
|
|
groupName: '输油运行一班',
|
|
|
|
|
groupHeader: '钱佳仪',
|
|
|
|
|
num: '8',
|
|
|
|
|
position: '油罐储存区 A、B 区',
|
|
|
|
|
phone: '189 7731 3118',
|
|
|
|
|
status: true,
|
|
|
|
|
createTime: '2025-09-13',
|
|
|
|
|
remarks:'负责日常输油设备巡检与操作',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '2',
|
|
|
|
|
groupId: 'GH002',
|
|
|
|
|
groupName: '消防应急班组',
|
|
|
|
|
groupHeader: '何颖颀',
|
|
|
|
|
num: '6',
|
|
|
|
|
position: '全厂区消防系统',
|
|
|
|
|
phone: '156 9747 2741',
|
|
|
|
|
status: true,
|
|
|
|
|
createTime: '2025-09-12',
|
|
|
|
|
remarks:'含2 名持证消防设施操作员',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '3',
|
|
|
|
|
groupId: 'GH003',
|
|
|
|
|
groupName: '设备维保班组',
|
|
|
|
|
groupHeader: '周遵武',
|
|
|
|
|
num: '10',
|
|
|
|
|
position: '泵房、工艺设备区',
|
|
|
|
|
phone: '151 4456 8916',
|
|
|
|
|
status: true,
|
|
|
|
|
createTime: '2025-08-16',
|
|
|
|
|
remarks:'擅长油泵、输油管道维护',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '4',
|
|
|
|
|
groupId: 'GH004',
|
|
|
|
|
groupName: '装卸作业班组',
|
|
|
|
|
groupHeader: '钱博西',
|
|
|
|
|
num: '7',
|
|
|
|
|
position: '油品装卸区站台',
|
|
|
|
|
phone: '181 8511 3486',
|
|
|
|
|
status: true,
|
|
|
|
|
createTime: '2025-08-15',
|
|
|
|
|
remarks:'专注装卸作业安全监护',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '5',
|
|
|
|
|
groupId: 'GH005',
|
|
|
|
|
groupName: '工艺调和班组',
|
|
|
|
|
groupHeader: '周缙绅',
|
|
|
|
|
num: '9',
|
|
|
|
|
position: '调和工艺区 1-3 号罐',
|
|
|
|
|
phone: '183 3220 4078',
|
|
|
|
|
status: true,
|
|
|
|
|
createTime: '2025-07-20',
|
|
|
|
|
remarks:'负责油品调和工艺参数管控',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: '6',
|
|
|
|
|
groupId: 'GH006',
|
|
|
|
|
groupName: '临时支援班组',
|
|
|
|
|
groupHeader: '周江',
|
|
|
|
|
num: '4',
|
|
|
|
|
position: '全厂区(机动)',
|
|
|
|
|
phone: '187 5703 5618',
|
|
|
|
|
status: false,
|
|
|
|
|
createTime: '2025-07-17',
|
|
|
|
|
remarks:'项目结束，暂停用待复用',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
setDataSource(mockData)
|
|
|
|
|
setTotal(85)
|
|
|
|
|
|
|
|
|
|
}catch(error){
|
|
|
|
|
console.error(error)
|
|
|
|
|
}finally{
|
|
|
|
|
setLoading(false)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 初始加载和分页变化时重新获取数据
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
fetchTableData();
|
|
|
|
|
}, [currentPage, pageSize]);
|
|
|
|
|
// 处理查看详情
|
|
|
|
|
const handleView = (record) => {
|
|
|
|
|
// 预留查看详情逻辑
|
|
|
|
|
console.log('查看详情:', record);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理编辑
|
|
|
|
|
const handleEdit = (record) => {
|
|
|
|
|
// 预留编辑逻辑
|
|
|
|
|
console.log('编辑:', record);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理删除
|
|
|
|
|
const handleDelete = (record) => {
|
|
|
|
|
// 预留删除逻辑
|
|
|
|
|
console.log('删除:', record);
|
|
|
|
|
};
|
|
|
|
|
return(
|
|
|
|
|
<Table
|
|
|
|
|
rowSelection={{
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
...rowSelection,
|
|
|
|
|
}}
|
|
|
|
|
columns={columns}
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
loading={loading}
|
|
|
|
|
pagination={false} // 关闭表格自带分页，使用外部分页组件
|
|
|
|
|
rowKey="key"
|
|
|
|
|
style={{width:'100%',}}
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
// 分页组件
|
|
|
|
|
const TablePagination = ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => {
|
|
|
|
|
return (
|
|
|
|
|
<div style={{ textAlign: 'right', marginTop: 16 ,width:'100%'}}>
|
|
|
|
|
<Pagination
|
|
|
|
|
current={currentPage}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
total={total}
|
|
|
|
|
onChange={onPageChange}
|
|
|
|
|
onShowSizeChange={onPageSizeChange}
|
|
|
|
|
showSizeChanger
|
|
|
|
|
showQuickJumper
|
|
|
|
|
showTotal={(total) => `共 ${total} 条`}
|
|
|
|
|
pageSizeOptions={['10', '20', '50', '100']}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
const PeopleMange=()=>{
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
};
|
|
|
|
|
return (
|
|
|
|
|
<div style={{backgroundColor: '#fff', padding: '20px'}}>
|
|
|
|
|
<Title title={'人员管理'}></Title>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
|
|
|
|
|
<Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<EmployeeTable
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
setTotal={setTotal}
|
|
|
|
|
/>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<TablePagination
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
total={total}
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
</Row>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
const ClassMange=()=>{
|
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
|
const [total, setTotal] = useState(85); // 总条数，实际项目中从接口获取
|
|
|
|
|
|
|
|
|
|
// 处理页码变化
|
|
|
|
|
const handlePageChange = (page, pageSize) => {
|
|
|
|
|
setCurrentPage(page);
|
|
|
|
|
setPageSize(pageSize);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理每页条数变化
|
|
|
|
|
const handlePageSizeChange = (current, size) => {
|
|
|
|
|
setPageSize(size);
|
|
|
|
|
setCurrentPage(1); // 重置到第一页
|
|
|
|
|
};
|
|
|
|
|
return(
|
|
|
|
|
<div style={{backgroundColor:'#fff',padding:'20px'}}>
|
|
|
|
|
<Title title={'班组管理'}></Title>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,marginRight:'50px'}}>新增</Button>
|
|
|
|
|
<Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<GroupTable></GroupTable>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<TablePagination
|
|
|
|
|
currentPage={currentPage}
|
|
|
|
|
pageSize={pageSize}
|
|
|
|
|
total={total}
|
|
|
|
|
onPageChange={handlePageChange}
|
|
|
|
|
onPageSizeChange={handlePageSizeChange}
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
</Row>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
const TimeMange=()=>{
|
|
|
|
|
const [viewState,setViewState]=useState('view0')
|
|
|
|
|
const view0=useRef(null)
|
|
|
|
|
const view1=useRef(null)
|
|
|
|
|
const checkView=(viewState)=>{
|
|
|
|
|
setViewState(viewState)
|
|
|
|
|
}
|
|
|
|
|
useEffect(()=>{
|
|
|
|
|
view0.current.classList.remove('view-active')
|
|
|
|
|
view1.current.classList.remove('view-active')
|
|
|
|
|
if(viewState==='view0'){
|
|
|
|
|
view0.current.style.backgroundColor='#045F5E80'
|
|
|
|
|
view1.current.style.backgroundColor='#B7E5D533'
|
|
|
|
|
view0.current.style.color='#fff'
|
|
|
|
|
view1.current.style.color='#000'
|
|
|
|
|
}else{
|
|
|
|
|
view0.current.style.backgroundColor='#B7E5D533'
|
|
|
|
|
view1.current.style.backgroundColor='#045F5E80'
|
|
|
|
|
view0.current.style.color='#000'
|
|
|
|
|
view1.current.style.color='#fff'
|
|
|
|
|
}
|
|
|
|
|
},[viewState])
|
|
|
|
|
return (
|
|
|
|
|
<div style={{backgroundColor: '#fff', padding: '20px'}}>
|
|
|
|
|
<Title title={'排班管理'}></Title>
|
|
|
|
|
<Row style={{marginTop:'20px'}}>
|
|
|
|
|
<Col span={4}></Col>
|
|
|
|
|
<Col span={16} style={{textAlign:'center'}}>
|
|
|
|
|
<div style={{color:'#006665',fontSize:'20px',fontWeight:'400'}}>
|
|
|
|
|
<span style={{cursor:'pointer'}}><</span>
|
|
|
|
|
<span style={{margin:'10px',}}>2025年8月</span>
|
|
|
|
|
<span style={{cursor:'pointer'}}>></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{color:'#999999',fontSize:'14px'}}>
|
|
|
|
|
<span>上次编辑：</span>
|
|
|
|
|
<span>李朔 </span>
|
|
|
|
|
<span>2025-7-22 09:34</span>
|
|
|
|
|
</div>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={4} style={{display:"flex",alignItems:'center'}}>
|
|
|
|
|
<Button icon={<ExportOutlined />} className={styles['exportBtn']} style={{backgroundImage:`url(${btnImg1})`}}>导出</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row style={{borderRadius:'4px',width:'100%',marginTop:'20px'}}>
|
|
|
|
|
<Row style={{backgroundColor:'#F0F7F7',width:'100%',padding:'10px 30px'}}>
|
|
|
|
|
<Col span={18}>
|
|
|
|
|
<Row>
|
|
|
|
|
{/*<Button ref={view0} className={`${styles['view']} ${styles['view-active']}`} onClick={()=>checkView('view0')}>人员视角</Button>*/}
|
|
|
|
|
<Button ref={view0} className={styles['view']} onClick={()=>checkView('view0')}>人员视角</Button>
|
|
|
|
|
<Button ref={view1} className={styles['view']} onClick={()=>checkView('view1')}>班组视角</Button>
|
|
|
|
|
<Form
|
|
|
|
|
layout={'inline'}
|
|
|
|
|
>
|
|
|
|
|
<Form.Item
|
|
|
|
|
label={<label>岗位类型</label>}
|
|
|
|
|
name="type"
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
defaultValue={'全部'}
|
|
|
|
|
style={{width:'132px'}}
|
|
|
|
|
></Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item
|
|
|
|
|
label={<label>姓名</label>}
|
|
|
|
|
name="type"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<Input
|
|
|
|
|
placeholder={'请输入姓名'}
|
|
|
|
|
style={{width:'200px'}}
|
|
|
|
|
></Input>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item
|
|
|
|
|
label={<label>班组</label>}
|
|
|
|
|
name="type"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
defaultValue={'全部'}
|
|
|
|
|
style={{width:'132px'}}
|
|
|
|
|
></Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Form>
|
|
|
|
|
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`}}>重置</Button>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={6} style={{textAlign:'right'}}>
|
|
|
|
|
<Button icon={<PlusOutlined />} className={styles['addBtn']} style={{backgroundImage:`url(${btnImg1})`,}}>新增</Button>
|
|
|
|
|
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{backgroundImage:`url(${btnImg3})`,margin:'0 20px'}}>编辑</Button>
|
|
|
|
|
<Button className={styles['delBtn']} style={{backgroundImage:`url(${btnImg2})`}}>删除</Button>
|
|
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<div className={styles['paibanBg']} style={{backgroundImage:`url(${paibanBg})`}}>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</Row>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
const items = [
|
|
|
|
|
{
|
|
|
|
|
label: <MenuBg text={'人员管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
|
|
|
|
|
key: '人员管理',
|
|
|
|
|
|
|
|
|
|
children: [
|
|
|
|
|
{label: '人员管理', key: '人员管理'},
|
|
|
|
|
{label: '班组管理', key: '班组管理'},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: <MenuBg text={'排班管理'}></MenuBg>,
|
|
|
|
|
key:'排班管理',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:<MenuBg text={'巡检路线管理'} icon={<DownOutlined style={{ fontSize: 16 }} />}></MenuBg>,
|
|
|
|
|
key:'巡检路线管理',
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
const list={
|
|
|
|
|
'人员管理':<PeopleMange/>,
|
|
|
|
|
'班组管理':<ClassMange/>,
|
|
|
|
|
'排班管理':<TimeMange/>,
|
|
|
|
|
'巡检路线管理':<PeopleMange/>,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
const InspectionTaskPlan=()=>{
|
|
|
|
|
const [current,setCurrent]=useState('人员管理')
|
|
|
|
|
const onclick=(e)=>{
|
|
|
|
|
console.log(e.key)
|
|
|
|
|
setCurrent(e.key)
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className={styles['header']}>
|
|
|
|
|
<div className={styles['logo']}>
|
|
|
|
|
当前: {current}
|
|
|
|
|
</div>
|
|
|
|
|
<Menu
|
|
|
|
|
onClick={onclick}
|
|
|
|
|
items={items}
|
|
|
|
|
selectedKeys={[current]}
|
|
|
|
|
mode={'horizontal'}
|
|
|
|
|
style={{flex: '1'}}
|
|
|
|
|
className={styles['menu']}
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
</Menu>
|
|
|
|
|
</div>
|
|
|
|
|
{list[current]}
|
|
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
export default InspectionTaskPlan
|
zjlnb666
2 weeks ago
