Merge branch 'main' of http://113.45.157.195:3003/insiinc/leader-mail
This commit is contained in:
ditiqi
commit
7b33a5c699
|
|
@ -1,125 +1,133 @@
|
|||
import { useState } from "react";
|
||||
import { Input, Button, Card, Steps, Tag, Spin, message } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Input, Button, Card, Steps, Tag, Spin, message, Empty } from "antd";
|
||||
import { SearchOutlined, SafetyCertificateOutlined } from "@ant-design/icons";
|
||||
import ProgressHeader from "./ProgressHeader";
|
||||
import { api } from "@nice/client";
|
||||
import { LetterBadge } from "@web/src/components/models/post/LetterBadge";
|
||||
import dayjs from "dayjs";
|
||||
import { LetterCard } from "@web/src/components/models/post/LetterCard";
|
||||
import { postDetailSelect } from "@nice/common";
|
||||
|
||||
|
||||
const { Step } = Steps;
|
||||
|
||||
export default function LetterProgressPage() {
|
||||
const [letterId, setLetterId] = useState<string | undefined>();
|
||||
const { data } = api.post.findFirst.useQuery({
|
||||
const [letterId, setLetterId] = useState<string>();
|
||||
const { data, isFetching, error } = api.post.findFirst.useQuery({
|
||||
where: {
|
||||
id: letterId
|
||||
}
|
||||
},
|
||||
select: postDetailSelect
|
||||
}, { enabled: Boolean(letterId) })
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
message.error('查询失败，请检查信件编码是否正确');
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-gradient-to-b from-slate-100 to-slate-50 "
|
||||
style={{ fontFamily: "Arial, sans-serif" }}>
|
||||
className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-gradient-to-b from-slate-100 to-slate-50">
|
||||
<ProgressHeader></ProgressHeader>
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto p-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Input
|
||||
prefix={
|
||||
<SearchOutlined className=" text-secondary-300" />
|
||||
}
|
||||
size="large"
|
||||
value={letterId}
|
||||
onChange={(e) => setLetterId(e.target.value)}
|
||||
placeholder="请输入信件编码查询处理状态"
|
||||
className="border border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<main className="container mx-auto p-6 flex flex-col gap-4">
|
||||
<div className="flex gap-4">
|
||||
<Input
|
||||
prefix={
|
||||
<SearchOutlined className=" text-secondary-300" />
|
||||
}
|
||||
size="large"
|
||||
value={letterId}
|
||||
onChange={(e) => setLetterId(e.target.value)}
|
||||
placeholder="请输入信件编码查询处理状态"
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Results Section */}
|
||||
{data && (
|
||||
<Card>
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b pb-4">
|
||||
<h2 className="text-xl font-semibold text-[#003366]">
|
||||
处理进度
|
||||
</h2>
|
||||
<LetterBadge type="state" value={data?.state}></LetterBadge>
|
||||
</div>
|
||||
<Spin spinning={isFetching} tip="查询中...">
|
||||
{data ? (
|
||||
<>
|
||||
<div className="space-y-6 p-4 rounded-xl bg-white">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b pb-4 space-y-2">
|
||||
<h2 className="text-xl font-semibold text-primary">
|
||||
信件处理进度追踪
|
||||
</h2>
|
||||
<LetterBadge type="state" value={data?.state} className="text-sm" />
|
||||
</div>
|
||||
|
||||
{/* Details Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
Ticket ID
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{data.id}
|
||||
</p>
|
||||
{/* Details Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
信件编号
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{data.id}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
提交日期
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
最后更新
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{dayjs(data.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
标题
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{data.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
提交日期
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
最后更新
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{dayjs(data.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">
|
||||
标题
|
||||
</p>
|
||||
<p className="font-medium text-[#003366]">
|
||||
{data.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Timeline */}
|
||||
<div className="mt-8">
|
||||
<Steps
|
||||
current={
|
||||
data.state === "pending"
|
||||
? 0
|
||||
: data.state === "processing"
|
||||
? 1
|
||||
: 2
|
||||
}
|
||||
className="usa-progress">
|
||||
<Step
|
||||
title="Submitted"
|
||||
description="Ticket received"
|
||||
icon={<SafetyCertificateOutlined />}
|
||||
{/* Progress Timeline */}
|
||||
<div className="mt-8">
|
||||
<Steps
|
||||
current={['pending', 'processing', 'completed'].indexOf(data.state)}
|
||||
|
||||
items={[
|
||||
{
|
||||
title: '已提交',
|
||||
description: '信件已成功接收',
|
||||
icon: <SafetyCertificateOutlined />,
|
||||
},
|
||||
{
|
||||
title: '处理中',
|
||||
description: '正在审核处理',
|
||||
icon: <SafetyCertificateOutlined />,
|
||||
},
|
||||
{
|
||||
title: '已办结',
|
||||
description: '信件处理完成',
|
||||
icon: <SafetyCertificateOutlined />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Step
|
||||
title="In Progress"
|
||||
description="Under review"
|
||||
icon={<SafetyCertificateOutlined />}
|
||||
/>
|
||||
<Step
|
||||
title="Resolved"
|
||||
description="Ticket completed"
|
||||
icon={<SafetyCertificateOutlined />}
|
||||
/>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
<LetterCard letter={data as any} /></>
|
||||
) : !isFetching && letterId && (
|
||||
<div className=" p-6">
|
||||
|
||||
<Empty
|
||||
description={`未找到编码为 ${letterId} 的信件`}
|
||||
></Empty>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
)}
|
||||
</Spin>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue