完善接单平台上传与物品规则

apps/frontend/src/pages/worker/WorkerOrdersPage.tsx

@@ -15,8 +15,10 @@ import {
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
+import ImagePreviewList from '@/components/files/ImagePreviewList'
+import ImageUpload from '@/components/files/ImageUpload'
 import { fetchWorkerMyOrders, submitWorkerAcceptance } from '@/services/worker'
-import type { WorkOrder } from '@/types/worker-platform'
+import type { UploadedFile, WorkOrder } from '@/types/worker-platform'
 
 const STATUS_OPTIONS = [
   { value: '', label: '全部' },
@@ -31,6 +33,7 @@ export default function WorkerOrdersPage() {
   const queryClient = useQueryClient()
   const [status, setStatus] = useState('')
   const [submittingOrder, setSubmittingOrder] = useState<WorkOrder | null>(null)
+  const [acceptanceFiles, setAcceptanceFiles] = useState<UploadedFile[]>([])
   const [form] = Form.useForm()
 
   const ordersQuery = useQuery({
@@ -39,18 +42,20 @@ export default function WorkerOrdersPage() {
     retry: false,
   })
 
-  async function submitAcceptance(values: { note?: string; imageUrls?: string }) {
+  async function submitAcceptance(values: { note?: string }) {
     if (!submittingOrder) return
+    if (acceptanceFiles.length === 0) {
+      message.error('请上传验收图片')
+      return
+    }
     try {
       await submitWorkerAcceptance(submittingOrder.workOrderId, {
         note: values.note,
-        imageUrls: String(values.imageUrls || '')
-          .split('\n')
-          .map((item) => item.trim())
-          .filter(Boolean),
+        files: acceptanceFiles,
       })
       message.success('已提交验收')
       setSubmittingOrder(null)
+      setAcceptanceFiles([])
       form.resetFields()
       await queryClient.invalidateQueries({ queryKey: ['worker-my-orders'] })
     } catch (error) {
@@ -65,19 +70,40 @@ export default function WorkerOrdersPage() {
       render: (_, row) => (
         <div className="cell-stack">
           <Typography.Text strong>{row.productName}</Typography.Text>
-          <Typography.Text type="secondary">{row.platformOrderId}</Typography.Text>
+          <Typography.Text type="secondary">
+            {row.platformOrderId}
+          </Typography.Text>
         </div>
       ),
     },
     {
       title: '金额',
       width: 130,
-      render: (_, row) => <Typography.Text strong>{formatMoney(row.rewardAmount)}</Typography.Text>,
+      render: (_, row) => (
+        <Typography.Text strong>
+          {formatMoney(row.rewardAmount)}
+        </Typography.Text>
+      ),
     },
     {
       title: '状态',
       width: 140,
-      render: (_, row) => <Tag color={resolveStatusColor(row.status)}>{formatStatus(row.status)}</Tag>,
+      render: (_, row) => (
+        <Tag color={resolveStatusColor(row.status)}>
+          {formatStatus(row.status)}
+        </Tag>
+      ),
+    },
+    {
+      title: '验收图片',
+      width: 170,
+      render: (_, row) => (
+        <ImagePreviewList
+          files={getAcceptanceFiles(row)}
+          imageUrls={getAcceptanceImageUrls(row)}
+          size={46}
+        />
+      ),
     },
     {
       title: '问题备注',
@@ -90,7 +116,13 @@ export default function WorkerOrdersPage() {
       width: 140,
       render: (_, row) =>
         ['in_progress', 'problem'].includes(row.status) ? (
-          <Button icon={<CheckOutlined />} onClick={() => setSubmittingOrder(row)}>
+          <Button
+            icon={<CheckOutlined />}
+            onClick={() => {
+              setSubmittingOrder(row)
+              setAcceptanceFiles([])
+            }}
+          >
             提交验收
           </Button>
         ) : null,
@@ -102,8 +134,17 @@ export default function WorkerOrdersPage() {
       <div className="worker-page-head">
         <Typography.Title level={3}>我的订单</Typography.Title>
         <Space>
-          <Select value={status} options={STATUS_OPTIONS} style={{ width: 140 }} onChange={setStatus} />
-          <Button icon={<ReloadOutlined />} loading={ordersQuery.isFetching} onClick={() => ordersQuery.refetch()}>
+          <Select
+            value={status}
+            options={STATUS_OPTIONS}
+            style={{ width: 140 }}
+            onChange={setStatus}
+          />
+          <Button
+            icon={<ReloadOutlined />}
+            loading={ordersQuery.isFetching}
+            onClick={() => ordersQuery.refetch()}
+          >
             刷新
           </Button>
         </Space>
@@ -121,7 +162,10 @@ export default function WorkerOrdersPage() {
       <Modal
         title="提交验收"
         open={Boolean(submittingOrder)}
-        onCancel={() => setSubmittingOrder(null)}
+        onCancel={() => {
+          setSubmittingOrder(null)
+          setAcceptanceFiles([])
+        }}
         onOk={() => form.submit()}
         destroyOnHidden
       >
@@ -129,12 +173,14 @@ export default function WorkerOrdersPage() {
           <Form.Item label="完成说明" name="note">
             <Input.TextArea rows={3} />
           </Form.Item>
-          <Form.Item
-            label="图片链接"
-            name="imageUrls"
-            extra="一期先支持粘贴图片链接，每行一个；后续再接真实上传。"
-          >
-            <Input.TextArea rows={4} placeholder="https://..." />
+          <Form.Item label="验收图片" required>
+            <ImageUpload
+              scene="worker-acceptance"
+              scope="worker"
+              value={acceptanceFiles}
+              onChange={setAcceptanceFiles}
+              maxCount={6}
+            />
           </Form.Item>
         </Form>
       </Modal>
@@ -142,6 +188,18 @@ export default function WorkerOrdersPage() {
   )
 }
 
+function getAcceptanceFiles(row: WorkOrder): UploadedFile[] {
+  return Array.isArray(row.acceptance?.files) ? row.acceptance.files : []
+}
+
+function getAcceptanceImageUrls(row: WorkOrder): string[] {
+  return Array.isArray(row.acceptance?.imageUrls)
+    ? row.acceptance.imageUrls
+        .map((item) => String(item || '').trim())
+        .filter(Boolean)
+    : []
+}
+
 function formatMoney(value: number | undefined) {
   return `￥${((Number(value || 0) || 0) / 100).toFixed(2)}`
 }