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