liaohui
/
doctor-mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/leader-mail

This commit is contained in:
ditiqi 2025-01-25 23:29:47 +08:00
parent 5a68eabbfd ad76e0dac7
commit 7b33a5c699
1 changed files with 103 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
apps/web/src/app/main/letter/progress/page.tsx
View File

@ -1,125 +1,133 @@
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="flex gap-4">
<div className="space-y-4"> <Input
<div className="flex gap-4"> prefix={
<Input <SearchOutlined className=" text-secondary-300" />
prefix={ }
<SearchOutlined className=" text-secondary-300" /> size="large"
} value={letterId}
size="large" onChange={(e) => setLetterId(e.target.value)}
value={letterId} placeholder="请输入信件编码查询处理状态"
onChange={(e) => setLetterId(e.target.value)}
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"> <>
{/* Header */} <div className="space-y-6 p-4 rounded-xl bg-white">
<div className="flex items-center justify-between border-b pb-4"> {/* Header */}
<h2 className="text-xl font-semibold text-[#003366]"> <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}></LetterBadge> </h2>
</div> <LetterBadge type="state" value={data?.state} className="text-sm" />
</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}
</p> </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>
<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 */} {/* 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 </div>
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> </div>
</Card> )}
)} </Spin>
</main> </main>
</div> </div>
); );