442 lines
13 KiB
TypeScript
442 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Card, Typography, Button, Space, Modal, Form, Input, DatePicker, Select,
|
|
Upload, message, Spin, Empty, Image, Tag, Divider, Popconfirm, Row, Col
|
|
} from 'antd';
|
|
import {
|
|
PlusOutlined, ArrowLeftOutlined, DeleteOutlined,
|
|
CameraOutlined, CalendarOutlined, CloudOutlined
|
|
} from '@ant-design/icons';
|
|
import axios from 'axios';
|
|
import dayjs from 'dayjs';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
|
|
const { Title, Paragraph, Text } = Typography;
|
|
const { TextArea } = Input;
|
|
const { Option } = Select;
|
|
|
|
// 天气选项
|
|
const WEATHER_OPTIONS = [
|
|
{ value: 'sunny', label: '☀️ 晴', icon: '☀️' },
|
|
{ value: 'cloudy', label: '⛅ 多云', icon: '⛅' },
|
|
{ value: 'rainy', label: '🌧️ 雨', icon: '🌧️' },
|
|
{ value: 'stormy', label: '⛈️ 雷暴', icon: '⛈️' },
|
|
{ value: 'windy', label: '💨 大风', icon: '💨' },
|
|
];
|
|
|
|
interface Log {
|
|
id: number;
|
|
log_date: string;
|
|
weather: string;
|
|
work_content: string;
|
|
next_plan: string;
|
|
issues: string;
|
|
recorder_name: string;
|
|
photos: Photo[];
|
|
created_at: string;
|
|
}
|
|
|
|
interface Photo {
|
|
id: number;
|
|
photo_url: string;
|
|
photo_name: string;
|
|
photo_type: string;
|
|
file_size: number;
|
|
created_at: string;
|
|
}
|
|
|
|
const ConstructionLog: React.FC = () => {
|
|
const { id: projectId } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [logs, setLogs] = useState<Log[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [projectInfo, setProjectInfo] = useState<any>(null);
|
|
const [form] = Form.useForm();
|
|
const { user } = useAuthStore();
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => setIsMobile(window.innerWidth <= 768);
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
return () => window.removeEventListener('resize', checkMobile);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (projectId) {
|
|
fetchLogs();
|
|
fetchProjectInfo();
|
|
}
|
|
}, [projectId]);
|
|
|
|
const fetchLogs = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.get(`/api/projects/${projectId}/construction-logs`);
|
|
if (res.data.success) {
|
|
setLogs(res.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取日志列表失败:', error);
|
|
message.error('获取日志列表失败');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchProjectInfo = async () => {
|
|
try {
|
|
const res = await axios.get(`/api/projects/${projectId}`);
|
|
if (res.data.success) {
|
|
setProjectInfo(res.data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取项目信息失败:', error);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
setSubmitting(true);
|
|
|
|
const res = await axios.post(`/api/projects/${projectId}/construction-logs`, {
|
|
log_date: values.log_date.format('YYYY-MM-DD'),
|
|
weather: values.weather,
|
|
work_content: values.work_content,
|
|
photos: '', // 暂时为空，后续添加照片上传功能
|
|
});
|
|
|
|
if (res.data.success) {
|
|
message.success('日志添加成功');
|
|
setModalVisible(false);
|
|
form.resetFields();
|
|
fetchLogs();
|
|
}
|
|
} catch (error) {
|
|
console.error('添加日志失败:', error);
|
|
message.error('添加日志失败');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteLog = async (logId: number) => {
|
|
try {
|
|
const res = await axios.delete(`/api/construction-logs/${logId}`);
|
|
if (res.data.success) {
|
|
message.success('日志删除成功');
|
|
fetchLogs();
|
|
}
|
|
} catch (error) {
|
|
console.error('删除日志失败:', error);
|
|
message.error('删除日志失败');
|
|
}
|
|
};
|
|
|
|
// 按日期分组
|
|
const groupedLogs = logs.reduce((acc, log) => {
|
|
const month = dayjs(log.log_date).format('YYYY年MM月');
|
|
if (!acc[month]) {
|
|
acc[month] = [];
|
|
}
|
|
acc[month].push(log);
|
|
return acc;
|
|
}, {} as Record<string, Log[]>);
|
|
|
|
const getWeatherLabel = (value: string) => {
|
|
const option = WEATHER_OPTIONS.find(o => o.value === value);
|
|
return option ? option.label : value;
|
|
};
|
|
|
|
const formatFileSize = (bytes: number) => {
|
|
if (bytes < 1024) return bytes + ' B';
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
|
};
|
|
|
|
const renderLogCard = (log: Log) => (
|
|
<Card
|
|
key={log.id}
|
|
style={{
|
|
marginBottom: 16,
|
|
borderRadius: 12,
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
|
}}
|
|
styles={{ body: { padding: isMobile ? 16 : 20 } }}
|
|
>
|
|
{/* 日志头部 */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
|
<Space>
|
|
<CalendarOutlined style={{ color: '#1890ff' }} />
|
|
<Text strong style={{ fontSize: 15 }}>{dayjs(log.log_date).format('MM月DD日')}</Text>
|
|
<Tag color="blue">{getWeatherLabel(log.weather)}</Tag>
|
|
</Space>
|
|
<Space>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>记录人: {log.recorder_name || '未知'}</Text>
|
|
<Popconfirm
|
|
title="确定删除此日志？"
|
|
description="删除后无法恢复"
|
|
onConfirm={() => handleDeleteLog(log.id)}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<Button type="text" danger size="small" icon={<DeleteOutlined />} />
|
|
</Popconfirm>
|
|
</Space>
|
|
</div>
|
|
|
|
{/* 工作内容 */}
|
|
{log.work_content && (
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>今日工作:</Text>
|
|
<Paragraph style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap' }}>
|
|
{log.work_content}
|
|
</Paragraph>
|
|
</div>
|
|
)}
|
|
|
|
{/* 明日计划 */}
|
|
{log.next_plan && (
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>明日计划:</Text>
|
|
<Paragraph style={{ margin: '4px 0 0', whiteSpace: 'pre-wrap' }}>
|
|
{log.next_plan}
|
|
</Paragraph>
|
|
</div>
|
|
)}
|
|
|
|
{/* 问题记录 */}
|
|
{log.issues && (
|
|
<div style={{ marginBottom: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>问题记录:</Text>
|
|
<Paragraph style={{ margin: '4px 0 0', color: '#fa8c16', whiteSpace: 'pre-wrap' }}>
|
|
{log.issues}
|
|
</Paragraph>
|
|
</div>
|
|
)}
|
|
|
|
{/* 照片展示 */}
|
|
{log.photos && log.photos.length > 0 && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12, marginBottom: 8, display: 'block' }}>
|
|
施工照片 ({log.photos.length}张):
|
|
</Text>
|
|
<Image.PreviewGroup>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|
{log.photos.map(photo => (
|
|
<Image
|
|
key={photo.id}
|
|
src={photo.photo_url}
|
|
width={isMobile ? 80 : 100}
|
|
height={isMobile ? 80 : 100}
|
|
style={{
|
|
borderRadius: 8,
|
|
objectFit: 'cover',
|
|
cursor: 'pointer'
|
|
}}
|
|
placeholder={
|
|
<div style={{
|
|
width: isMobile ? 80 : 100,
|
|
height: isMobile ? 80 : 100,
|
|
background: '#f0f0f0',
|
|
borderRadius: 8,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}>
|
|
<CameraOutlined style={{ fontSize: 24, color: '#bfbfbf' }} />
|
|
</div>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Image.PreviewGroup>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
|
|
return (
|
|
<div style={{
|
|
padding: isMobile ? 12 : 24,
|
|
maxWidth: 800,
|
|
margin: '0 auto'
|
|
}}>
|
|
{/* 页面头部 */}
|
|
<div style={{ marginBottom: isMobile ? 16 : 24 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
|
|
<Button
|
|
icon={<ArrowLeftOutlined />}
|
|
onClick={() => navigate('/construction')}
|
|
/>
|
|
<div>
|
|
<Title level={isMobile ? 4 : 3} style={{ margin: 0 }}>
|
|
施工日志
|
|
</Title>
|
|
{projectInfo && (
|
|
<Text type="secondary" style={{ fontSize: 13 }}>
|
|
{projectInfo.name}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 日志列表 */}
|
|
{loading ? (
|
|
<div style={{ textAlign: 'center', padding: 60 }}>
|
|
<Spin size="large" />
|
|
</div>
|
|
) : logs.length === 0 ? (
|
|
<Card style={{ borderRadius: 12 }}>
|
|
<Empty description="暂无施工日志">
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => setModalVisible(true)}>
|
|
添加第一条日志
|
|
</Button>
|
|
</Empty>
|
|
</Card>
|
|
) : (
|
|
<div>
|
|
{Object.entries(groupedLogs).map(([month, monthLogs]) => (
|
|
<div key={month}>
|
|
<Divider orientation="left" style={{ margin: '16px 0' }}>
|
|
<Text strong style={{ fontSize: 14 }}>{month}</Text>
|
|
</Divider>
|
|
{monthLogs.map(log => renderLogCard(log))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 底部添加按钮 */}
|
|
<div style={{
|
|
position: 'fixed',
|
|
bottom: 24,
|
|
right: 24,
|
|
zIndex: 100
|
|
}}>
|
|
<Button
|
|
type="primary"
|
|
icon={<PlusOutlined />}
|
|
size="large"
|
|
onClick={() => setModalVisible(true)}
|
|
style={{
|
|
borderRadius: 24,
|
|
height: 48,
|
|
paddingLeft: 24,
|
|
paddingRight: 24,
|
|
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.4)'
|
|
}}
|
|
>
|
|
新增日志
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 新增日志弹窗 */}
|
|
<Modal
|
|
title="新增施工日志"
|
|
open={modalVisible}
|
|
onOk={handleSubmit}
|
|
onCancel={() => setModalVisible(false)}
|
|
confirmLoading={submitting}
|
|
okText="提交"
|
|
cancelText="取消"
|
|
width={isMobile ? '95%' : 500}
|
|
style={{ top: 20 }}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
initialValues={{
|
|
log_date: dayjs(),
|
|
weather: 'sunny'
|
|
}}
|
|
>
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name="log_date"
|
|
label="日期"
|
|
rules={[{ required: true, message: '请选择日期' }]}
|
|
>
|
|
<DatePicker
|
|
style={{ width: '100%' }}
|
|
size="large"
|
|
disabledDate={(current) => current && current > dayjs().endOf('day')}
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name="weather"
|
|
label="天气"
|
|
rules={[{ required: true, message: '请选择天气' }]}
|
|
>
|
|
<Select size="large">
|
|
{WEATHER_OPTIONS.map(opt => (
|
|
<Option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Form.Item
|
|
name="work_content"
|
|
label="今日工作"
|
|
rules={[{ required: true, message: '请填写今日工作内容' }]}
|
|
>
|
|
<TextArea
|
|
rows={3}
|
|
placeholder="描述今日完成的施工工作..."
|
|
size="large"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item name="next_plan" label="明日计划">
|
|
<TextArea
|
|
rows={2}
|
|
placeholder="明日工作计划..."
|
|
size="large"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item name="issues" label="问题记录">
|
|
<TextArea
|
|
rows={2}
|
|
placeholder="遇到的问题或需要协调的事项..."
|
|
size="large"
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="上传照片">
|
|
<Upload
|
|
listType="picture-card"
|
|
multiple
|
|
maxCount={9}
|
|
accept="image/*"
|
|
beforeUpload={() => false}
|
|
>
|
|
<div>
|
|
<CameraOutlined style={{ fontSize: 20 }} />
|
|
<div style={{ marginTop: 4, fontSize: 12 }}>添加照片</div>
|
|
</div>
|
|
</Upload>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>
|
|
支持上传多张照片，最多9张
|
|
</Text>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConstructionLog;
|