feat: add project work order UI
This commit is contained in:
Frudrax Cheng
@@ -0,0 +1,385 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Table,
|
||||
Input,
|
||||
Button,
|
||||
Space,
|
||||
message,
|
||||
Modal,
|
||||
Tag,
|
||||
Form,
|
||||
Select,
|
||||
Pagination,
|
||||
} from 'antd';
|
||||
import {
|
||||
ToolOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { projectOrdersApi, authApi } from '@/services/api';
|
||||
import type {
|
||||
ProjectOrder,
|
||||
ProjectOrderStatus,
|
||||
ProjectType,
|
||||
CreateProjectOrderRequest,
|
||||
} from '@/types';
|
||||
|
||||
const WORK_ORDER_STATUS_LABEL: Record<ProjectOrderStatus, string> = {
|
||||
created: '待处理',
|
||||
pending_completion: '待完成确认',
|
||||
closed: '已完成',
|
||||
};
|
||||
|
||||
const WORK_ORDER_STATUS_COLOR: Record<ProjectOrderStatus, string> = {
|
||||
created: 'default',
|
||||
pending_completion: 'processing',
|
||||
closed: 'success',
|
||||
};
|
||||
|
||||
const PROJECT_TYPE_LABEL: Record<ProjectType, string> = {
|
||||
survey: '现场勘查',
|
||||
implementation: '现场实施',
|
||||
maintenance: '项目维保',
|
||||
other: '其他',
|
||||
};
|
||||
|
||||
function ProjectOrdersPage() {
|
||||
const navigate = useNavigate();
|
||||
const currentUser = authApi.getCurrentUser();
|
||||
const isAdmin = currentUser?.role === 'admin';
|
||||
|
||||
const [orders, setOrders] = useState<ProjectOrder[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = useState(10);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [search, setSearch] = useState('');
|
||||
const [workOrderStatus, setWorkOrderStatus] = useState<ProjectOrderStatus | undefined>();
|
||||
const [projectType, setProjectType] = useState<ProjectType | undefined>();
|
||||
const [mineOnly, setMineOnly] = useState(false);
|
||||
|
||||
const [createModalVisible, setCreateModalVisible] = useState(false);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createForm] = Form.useForm<CreateProjectOrderRequest>();
|
||||
|
||||
const loadOrders = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await projectOrdersApi.list({
|
||||
page,
|
||||
limit,
|
||||
search: search || undefined,
|
||||
workOrderStatus,
|
||||
projectType,
|
||||
mine: isAdmin ? mineOnly : undefined,
|
||||
});
|
||||
setOrders(result.data || []);
|
||||
setTotal(result.pagination?.total || 0);
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.message || err.message || '加载工单列表失败');
|
||||
setOrders([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadOrders();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [page, limit, search, workOrderStatus, projectType, mineOnly]);
|
||||
|
||||
const handleCreate = async (values: CreateProjectOrderRequest) => {
|
||||
setCreating(true);
|
||||
try {
|
||||
const order = await projectOrdersApi.create(values);
|
||||
message.success(`工单创建成功：${order.serialNumber}`);
|
||||
setCreateModalVisible(false);
|
||||
createForm.resetFields();
|
||||
navigate(`/admin/project-orders/${order.serialNumber}`);
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.message || err.message || '创建失败');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (order: ProjectOrder) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除工单 ${order.serialNumber} 吗？此操作不可恢复！`,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await projectOrdersApi.delete(order.serialNumber);
|
||||
message.success('删除成功');
|
||||
loadOrders();
|
||||
} catch (err: any) {
|
||||
message.error(err?.response?.data?.message || err.message || '删除失败');
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '工单号',
|
||||
dataIndex: 'serialNumber',
|
||||
key: 'serialNumber',
|
||||
width: 180,
|
||||
render: (sn: string) => (
|
||||
<span style={{ fontFamily: 'monospace', color: '#165DFF' }}>{sn}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '公司名称',
|
||||
dataIndex: 'companyName',
|
||||
key: 'companyName',
|
||||
},
|
||||
{
|
||||
title: '现场联系人',
|
||||
dataIndex: 'contactName',
|
||||
key: 'contactName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '项目类型',
|
||||
dataIndex: 'projectType',
|
||||
key: 'projectType',
|
||||
width: 100,
|
||||
render: (type: ProjectType) => PROJECT_TYPE_LABEL[type] || type,
|
||||
},
|
||||
{
|
||||
title: '工程师',
|
||||
key: 'technician',
|
||||
width: 120,
|
||||
render: (_: any, record: ProjectOrder) => record.technician?.name || '-',
|
||||
},
|
||||
{
|
||||
title: '工单状态',
|
||||
dataIndex: 'workOrderStatus',
|
||||
key: 'workOrderStatus',
|
||||
width: 130,
|
||||
render: (status: ProjectOrderStatus) => (
|
||||
<Space size={4}>
|
||||
<Tag color={WORK_ORDER_STATUS_COLOR[status]}>
|
||||
{WORK_ORDER_STATUS_LABEL[status]}
|
||||
</Tag>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createdAt',
|
||||
key: 'createdAt',
|
||||
width: 170,
|
||||
render: (date: string) => new Date(date).toLocaleString('zh-CN'),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 180,
|
||||
render: (_: any, record: ProjectOrder) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => navigate(`/admin/project-orders/${record.serialNumber}`)}
|
||||
>
|
||||
详情
|
||||
</Button>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => handleDelete(record)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Card
|
||||
title={
|
||||
<Space>
|
||||
<ToolOutlined />
|
||||
<span>项目工单</span>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setCreateModalVisible(true)}
|
||||
>
|
||||
新建项目工单
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Space style={{ marginBottom: 16, flexWrap: 'wrap' }}>
|
||||
<Input.Search
|
||||
placeholder="搜索工单号/公司/现场联系人"
|
||||
allowClear
|
||||
style={{ width: 260 }}
|
||||
onSearch={(v) => {
|
||||
setPage(1);
|
||||
setSearch(v);
|
||||
}}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value) {
|
||||
setPage(1);
|
||||
setSearch('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
placeholder="工单状态"
|
||||
allowClear
|
||||
style={{ width: 160 }}
|
||||
value={workOrderStatus}
|
||||
onChange={(v) => {
|
||||
setPage(1);
|
||||
setWorkOrderStatus(v);
|
||||
}}
|
||||
options={(Object.keys(WORK_ORDER_STATUS_LABEL) as ProjectOrderStatus[]).map(
|
||||
(k) => ({ value: k, label: WORK_ORDER_STATUS_LABEL[k] })
|
||||
)}
|
||||
/>
|
||||
<Select
|
||||
placeholder="项目类型"
|
||||
allowClear
|
||||
style={{ width: 130 }}
|
||||
value={projectType}
|
||||
onChange={(v) => {
|
||||
setPage(1);
|
||||
setProjectType(v);
|
||||
}}
|
||||
options={(Object.keys(PROJECT_TYPE_LABEL) as ProjectType[]).map((k) => ({
|
||||
value: k,
|
||||
label: PROJECT_TYPE_LABEL[k],
|
||||
}))}
|
||||
/>
|
||||
{isAdmin && (
|
||||
<Button
|
||||
type={mineOnly ? 'primary' : 'default'}
|
||||
onClick={() => {
|
||||
setPage(1);
|
||||
setMineOnly(!mineOnly);
|
||||
}}
|
||||
>
|
||||
{mineOnly ? '查看全部' : '我负责的'}
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={orders}
|
||||
rowKey="serialNumber"
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
/>
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<Pagination
|
||||
current={page}
|
||||
pageSize={limit}
|
||||
total={total}
|
||||
onChange={(newPage, newLimit) => {
|
||||
setPage(newPage);
|
||||
setLimit(newLimit);
|
||||
}}
|
||||
showSizeChanger
|
||||
showTotal={(t) => `共计 ${t} 条记录`}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="新建项目工单"
|
||||
open={createModalVisible}
|
||||
onCancel={() => {
|
||||
setCreateModalVisible(false);
|
||||
createForm.resetFields();
|
||||
}}
|
||||
footer={null}
|
||||
width={560}
|
||||
>
|
||||
<Form form={createForm} layout="vertical" onFinish={handleCreate}>
|
||||
<Form.Item
|
||||
name="companyName"
|
||||
label="公司名称"
|
||||
rules={[{ required: true, message: '请输入公司名称' }]}
|
||||
>
|
||||
<Input placeholder="例如：浙江北凡科技" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="companyAddress"
|
||||
label="公司位置"
|
||||
rules={[{ required: true, message: '请输入公司位置' }]}
|
||||
>
|
||||
<Input placeholder="例如：杭州市西湖区文三路 100 号" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="contactName"
|
||||
label="现场联系人"
|
||||
rules={[{ required: true, message: '请输入现场联系人' }]}
|
||||
>
|
||||
<Input placeholder="现场联系人姓名" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="contactPhone"
|
||||
label="联系电话"
|
||||
rules={[
|
||||
{ required: true, message: '请输入联系电话' },
|
||||
{ pattern: /^\d{11}$/, message: '请输入 11 位手机号' },
|
||||
]}
|
||||
>
|
||||
<Input placeholder="11 位手机号" maxLength={11} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="projectType"
|
||||
label="项目类型"
|
||||
rules={[{ required: true, message: '请选择项目类型' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
options={(Object.keys(PROJECT_TYPE_LABEL) as ProjectType[]).map((k) => ({
|
||||
value: k,
|
||||
label: PROJECT_TYPE_LABEL[k],
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="siteDescription"
|
||||
label="现场情况说明"
|
||||
rules={[{ required: true, message: '请填写现场情况说明' }]}
|
||||
>
|
||||
<Input.TextArea rows={4} placeholder="请描述现场条件、勘查情况或实施要求" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space style={{ width: '100%', justifyContent: 'flex-end' }}>
|
||||
<Button onClick={() => setCreateModalVisible(false)}>取消</Button>
|
||||
<Button type="primary" htmlType="submit" loading={creating}>
|
||||
创建
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectOrdersPage;
|
||||
Reference in New Issue
Block a user