104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import React, {useState} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {Empty, Pagination} from "antd";
|
|
import {useRequest} from "ahooks";
|
|
|
|
import SearchPanel from "@/pages/news/components/search-panel.tsx";
|
|
import styles from "@/pages/news/components/style.module.scss";
|
|
import {formatDurationToTime, formatTime} from "@/util/strings.ts";
|
|
import {getList} from "@/service/api/order.ts";
|
|
|
|
import ImageErr from "@/assets/images/error/ic_broken_image.png"
|
|
|
|
function OrderIndex() {
|
|
const {t} = useTranslation()
|
|
const [params, setParams] = useState<ApiArticleSearchParams>({
|
|
pagination: {page: 1, limit: 10},
|
|
time_flag: 0,
|
|
})
|
|
const {data} = useRequest(() => getList(params), {
|
|
refreshDeps: [params],
|
|
})
|
|
|
|
return <div className="pb-5 page-order-index">
|
|
<div className=" mb-5" style={{backgroundColor:'#dae8fc'}}>
|
|
<div className="container" style={{padding:0}}>
|
|
<SearchPanel
|
|
rootClassName="py-6"
|
|
hideNewsSource={true}
|
|
defaultParams={params}
|
|
onSearch={setParams}
|
|
rightRender={<div>{t('order.left_time')}: <span
|
|
className={`${!data?.remaining_duration || Number(data?.remaining_duration) < 3600 ? 'text-red-600' : ''}`}>{formatDurationToTime(data?.remaining_duration)}</span>
|
|
</div>}
|
|
/>
|
|
</div></div>
|
|
<div className="mt-5 container" style={{padding:"20px 0"}}>
|
|
<div className={`${styles.newListTable} ${styles.orderDataList} `}>
|
|
<div className="header row flex">
|
|
<div className="col id w-[160px]">{t('order.list.id')}</div>
|
|
<div className="col cover">{t('order.list.cover')}</div>
|
|
<div className="col title w-min-60px">{t('order.list.title')}</div>
|
|
<div className="col w-[180px]">{t('order.list.order_time')}</div>
|
|
<div className="col w-[120px]">{t('order.list.consume_time')}</div>
|
|
<div className="col w-[180px]">{t('order.list.operator')}</div>
|
|
</div>
|
|
<div>
|
|
{data?.list.length === 0 && <div style={{marginTop: 50}}>
|
|
<Empty/>
|
|
</div>}
|
|
{data?.list.map((item, i) => {
|
|
return <div key={i} className="row flex">
|
|
<div className="col id w-[160px] text-center">
|
|
<div className="flex-1">
|
|
<div className="break-all">{item.order_id}</div>
|
|
</div>
|
|
</div>
|
|
<div className="col cover">
|
|
<div
|
|
className="w-[100px] h-[56px] flex items-center rounded overflow-hidden border border-gray-50"
|
|
>
|
|
<img
|
|
src={item.img_url || ImageErr}
|
|
className="w-[100px] object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col title order-title flex-1 w-min-60px">
|
|
<div className="line-clamp-2">{item.title}</div>
|
|
</div>
|
|
<div className="col w-[180px]">{formatTime(item.order_time, 'YYYY-MM-DD HH:mm')}
|
|
</div>
|
|
<div className="col w-[120px]">{formatDurationToTime(item.consumption_duration)}
|
|
</div>
|
|
<div className="col w-[180px]">{item.operator}</div>
|
|
</div>
|
|
})}
|
|
|
|
<div className="footer flex justify-end mt-10">
|
|
<Pagination
|
|
onChange={(page, limit) => {
|
|
setParams({
|
|
...params,
|
|
pagination: {page, limit}
|
|
})
|
|
}}
|
|
total={data?.pagination.total || 0}
|
|
showTotal={(total) => <div>{t('page.total_item', {total})}</div>}
|
|
showSizeChanger={{
|
|
options: [
|
|
{value: 10, label: t('page.size_10')},
|
|
{value: 20, label: t('page.size_20')},
|
|
{value: 30, label: t('page.size_30')}
|
|
]
|
|
}}
|
|
showQuickJumper={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
export default OrderIndex |