fix(consignment): 手动匹配寄卖后刷新工单列表并展示寄卖价格

apps/frontend/src/components/admin/ConsignmentWorkOrderMatchModal.tsx

@@ -1,4 +1,16 @@
-import { App, Alert, Button, Card, Empty, Input, Modal, Space, Tag, Typography } from 'antd'
+import {
+  App,
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Empty,
+  Input,
+  Modal,
+  Space,
+  Tag,
+  Typography,
+} from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
 
@@ -8,11 +20,26 @@ import {
   matchAdminConsignmentWorkOrder,
 } from '@/services/admin/consignment'
 import type { ConsignmentMatchCandidate } from '@/types/consignment'
+import {
+  computeConsignmentMatchScore,
+  describeConsignmentMatch,
+  resolveMatchCoverage,
+} from '@/utils/consignment-match-coverage'
 
 function money(fen: number) {
   return `￥${((Number(fen || 0) || 0) / 100).toFixed(2)}`
 }
 
+function resolveScoreTag(item: ConsignmentMatchCandidate) {
+  const type = item.matchType || 'exact'
+  const score = computeConsignmentMatchScore(item)
+  if (type === 'conflict') return { color: 'default', label: '不匹配' }
+  if (type === 'exact') return { color: 'green', label: '精确' }
+  if (score >= 90) return { color: 'blue', label: '非精确' }
+  if (score >= 70) return { color: 'orange', label: '非精确' }
+  return { color: 'gold', label: '需核对' }
+}
+
 export default function ConsignmentWorkOrderMatchModal({
   open,
   workOrderId,
@@ -26,6 +53,7 @@ export default function ConsignmentWorkOrderMatchModal({
 }) {
   const { message } = App.useApp()
   const [selectedIds, setSelectedIds] = useState<number[]>([])
+  const [includeConflicts, setIncludeConflicts] = useState(false)
   const [submitting, setSubmitting] = useState(false)
   const [nonExactReason, setNonExactReason] = useState('')
 
@@ -35,55 +63,127 @@ export default function ConsignmentWorkOrderMatchModal({
     enabled: open && Boolean(workOrderId),
   })
   const data = candidatesQuery.data?.data
-  const options = data?.options || []
+  const options = useMemo(() => data?.options || [], [data?.options])
   const totalQuantity = Math.max(1, Number(data?.totalQuantity || 1))
-  // 整单匹配只需一条库存（由该库存一次占满订单总数量）；拼单才按剩余份数选多条。
-  const needed = data?.sharingEnabled
-    ? Math.max(1, totalQuantity - Number(data?.activeQuantity || 0))
-    : 1
+  const activeQuantity = Math.max(0, Number(data?.activeQuantity || 0))
+  const sharingEnabled = Boolean(data?.sharingEnabled)
+  const remainingNeeded = sharingEnabled
+    ? Math.max(0, totalQuantity - activeQuantity)
+    : totalQuantity
+
+  const visibleOptions = useMemo(
+    () =>
+      includeConflicts
+        ? options
+        : options.filter((item) => (item.matchType || 'exact') !== 'conflict'),
+    [includeConflicts, options],
+  )
+
+  const selectedOptions = useMemo(
+    () => options.filter((item) => selectedIds.includes(item.inventoryId)),
+    [options, selectedIds],
+  )
+
+  const coverage = useMemo(
+    () =>
+      resolveMatchCoverage({
+        sharingEnabled,
+        totalQuantity,
+        activeQuantity,
+        selected: selectedOptions.map((item) => ({
+          inventoryId: item.inventoryId,
+          remainingQuantity: item.remainingQuantity,
+        })),
+      }),
+    [activeQuantity, selectedOptions, sharingEnabled, totalQuantity],
+  )
+
+  const counts = useMemo(() => {
+    let exact = 0
+    let partial = 0
+    let conflict = 0
+    for (const item of options) {
+      const type = item.matchType || 'exact'
+      if (type === 'exact') exact += 1
+      else if (type === 'conflict') conflict += 1
+      else partial += 1
+    }
+    return { exact, partial, conflict }
+  }, [options])
 
   useEffect(() => {
     if (!open) {
-      setSelectedIds([])
+      setSelectedIds((prev) => (prev.length ? [] : prev))
+      setIncludeConflicts(false)
       setNonExactReason('')
       return
     }
-    if (options.length === 0) return
-    // 默认只选精确匹配；非精确库存必须人工勾选并填写原因。
-    // 整单还要保证一条库存能一次满足订单总数量，否则默认选中也会被后端拒绝。
+    if (options.length === 0 || remainingNeeded <= 0) {
+      setSelectedIds((prev) => (prev.length ? [] : prev))
+      return
+    }
+
+    // 默认只选精确库存；整单必须一条满足总量，拼单按剩余份数累加到一次拼满。
     const exactOptions = options.filter(
-      (item) =>
-        (item.matchType || 'exact') === 'exact' &&
-        (!data?.sharingEnabled || item.remainingQuantity >= 1) &&
-        (data?.sharingEnabled || item.remainingQuantity >= totalQuantity),
+      (item) => (item.matchType || 'exact') === 'exact' && Number(item.remainingQuantity || 0) > 0,
     )
-    setSelectedIds(exactOptions.slice(0, needed).map((item) => item.inventoryId))
-  }, [open, options, needed, data?.sharingEnabled, totalQuantity])
+    if (!sharingEnabled) {
+      const chosen = exactOptions.find(
+        (item) => Number(item.remainingQuantity || 0) >= totalQuantity,
+      )
+      setSelectedIds(chosen ? [chosen.inventoryId] : [])
+      return
+    }
+
+    let covered = 0
+    const ids: number[] = []
+    for (const item of exactOptions) {
+      if (covered >= remainingNeeded) break
+      ids.push(item.inventoryId)
+      covered += Math.max(0, Number(item.remainingQuantity || 0))
+    }
+    setSelectedIds(ids)
+  }, [open, options, remainingNeeded, sharingEnabled, totalQuantity])
+
+  // 隐藏不匹配项时，顺手清掉已选中的冲突库存，避免提交到不可见的行。
+  useEffect(() => {
+    if (includeConflicts) return
+    setSelectedIds((prev) => {
+      const next = prev.filter((id) => {
+        const item = options.find((option) => option.inventoryId === id)
+        return !item || (item.matchType || 'exact') !== 'conflict'
+      })
+      return next.length === prev.length ? prev : next
+    })
+  }, [includeConflicts, options])
 
   const nonExactSelected = useMemo(
     () =>
-      selectedIds.some((id) => {
-        const item = options.find((option) => option.inventoryId === id)
-        return Boolean(item?.matchType && item.matchType !== 'exact')
+      selectedOptions.some((item) => {
+        const type = item.matchType || 'exact'
+        return type !== 'exact'
       }),
-    [options, selectedIds],
+    [selectedOptions],
   )
 
-  const totalPrice = useMemo(
-    () =>
-      selectedIds.reduce((sum, id) => {
-        const item = options.find((option) => option.inventoryId === id)
-        return sum + Number(item?.salePriceFen || 0)
-      }, 0),
-    [options, selectedIds],
-  )
+  const canSubmit =
+    selectedIds.length > 0 &&
+    coverage.sufficient &&
+    (!nonExactSelected || nonExactReason.trim().length > 0)
+
+  const infoMessage =
+    remainingNeeded <= 0
+      ? '该工单已匹配满，无需再次匹配。'
+      : sharingEnabled
+        ? `该工单拼单 ${totalQuantity} 份，已匹配 ${activeQuantity} 份，本次还需 ${remainingNeeded} 份；必须一次选满才能提交。`
+        : `该工单为整单匹配，请选择 1 条可一次满足 ${totalQuantity} 件的库存。`
 
   return (
     <Modal
-      title="寄卖库存匹配"
+      title="手动匹配寄卖"
       open={open}
       onCancel={onClose}
-      width={860}
+      width="min(1180px, 96vw)"
       destroyOnHidden
       footer={
         <Space>
@@ -91,7 +191,7 @@ export default function ConsignmentWorkOrderMatchModal({
           <Button
             type="primary"
             loading={submitting}
-            disabled={selectedIds.length === 0 || (nonExactSelected && !nonExactReason.trim())}
+            disabled={!canSubmit}
             onClick={async () => {
               if (!workOrderId) return
               setSubmitting(true)
@@ -128,29 +228,62 @@ export default function ConsignmentWorkOrderMatchModal({
       {options.length > 0 ? (
         <Space direction="vertical" size={12} style={{ width: '100%' }}>
           <Alert
-            type="info"
+            type={remainingNeeded <= 0 ? 'warning' : 'info'}
             showIcon
-            message={
-              data?.sharingEnabled
-                ? `该工单拼单 ${totalQuantity} 份，已匹配 ${data.activeQuantity} 份，本次还需 ${needed} 份库存。`
-                : `该工单为整单匹配，请选择 1 条可一次满足 ${totalQuantity} 件的库存。`
-            }
-            description="自动匹配只做精确规格；拼单工单可多选，每条库存按剩余数量生成份额。选择非精确库存必须填写原因。"
+            message={infoMessage}
+            description="系统候选按寄卖配置打分；非精确/冲突库存必须人工勾选并填写原因。拼单必须一次拼满，失败不会占用任何库存。"
           />
+          <Space wrap size={8}>
+            <Tag color="blue">
+              {sharingEnabled ? `待匹配 ${remainingNeeded} 份` : `整单 ${totalQuantity} 件`}
+            </Tag>
+            {sharingEnabled ? <Tag>已匹配 {activeQuantity} 份</Tag> : null}
+            <Tag>候选 {visibleOptions.length} 条</Tag>
+            <Tag color="green">精确 {counts.exact}</Tag>
+            <Tag color="orange">非精确 {counts.partial}</Tag>
+            <Tag>冲突 {counts.conflict}</Tag>
+            <Checkbox
+              checked={includeConflicts}
+              onChange={(event) => setIncludeConflicts(event.target.checked)}
+            >
+              显示不匹配项
+            </Checkbox>
+          </Space>
           <PercentTable<ConsignmentMatchCandidate>
             rowKey="inventoryId"
             size="small"
-            pagination={false}
-            dataSource={options}
+            loading={candidatesQuery.isFetching}
+            pagination={{ pageSize: 10, showSizeChanger: false }}
+            scroll={{ x: 1050, y: 420 }}
+            dataSource={visibleOptions}
             rowSelection={{
-              // 整单只能选一条；拼单可多选，每条库存按剩余数量生成份额。
-              type: data?.sharingEnabled ? 'checkbox' : 'radio',
+              // 整单只能选一条；拼单可多选，必须覆盖剩余份数才能提交。
+              type: sharingEnabled ? 'checkbox' : 'radio',
               selectedRowKeys: selectedIds,
               onChange: (keys) => setSelectedIds(keys.map((key) => Number(key))),
             }}
             columns={[
+              {
+                title: '匹配打分',
+                key: 'score',
+                width: 100,
+                render: (_, item) => {
+                  const score = computeConsignmentMatchScore(item)
+                  const tag = resolveScoreTag(item)
+                  return (
+                    <Space direction="vertical" size={3} style={{ width: '100%' }}>
+                      <span style={{ fontSize: 18, fontWeight: 700, lineHeight: 1 }}>{score}</span>
+                      <Tag color={tag.color} style={{ marginInlineEnd: 0 }}>
+                        {tag.label}
+                      </Tag>
+                    </Space>
+                  )
+                },
+              },
               {
                 title: '寄卖库存',
+                key: 'inventory',
+                width: 210,
                 render: (_, item) => (
                   <Space direction="vertical" size={0}>
                     <Typography.Text strong>{item.itemName}</Typography.Text>
@@ -162,33 +295,15 @@ export default function ConsignmentWorkOrderMatchModal({
               },
               {
                 title: '规格',
+                key: 'spec',
+                width: 210,
                 render: (_, item) =>
                   item.specText ||
                   `${item.system}/${item.serverZone}/${item.series}/${item.diamondLevel}钻/${item.brillianceCount}璀`,
               },
-              {
-                title: '匹配',
-                width: 90,
-                render: (_, item) => {
-                  const type = item.matchType || 'exact'
-                  const label =
-                    type === 'exact'
-                      ? '精确'
-                      : type === 'partial'
-                        ? '高配'
-                        : type === 'unknown'
-                          ? '未知'
-                          : '冲突'
-                  const color = type === 'exact' ? 'green' : type === 'partial' ? 'orange' : 'red'
-                  return (
-                    <Tag color={color} title={item.matchReasons?.join('、') || ''}>
-                      {label}
-                    </Tag>
-                  )
-                },
-              },
               {
                 title: '库存',
+                key: 'stock',
                 width: 90,
                 render: (_, item) => (
                   <Tag color={item.remainingQuantity > 1 ? 'blue' : 'default'}>
@@ -198,11 +313,44 @@ export default function ConsignmentWorkOrderMatchModal({
               },
               {
                 title: '售价',
-                width: 110,
+                key: 'price',
+                width: 100,
                 render: (_, item) => money(item.salePriceFen),
               },
+              {
+                title: '匹配说明',
+                key: 'reason',
+                width: 280,
+                render: (_, item) => (
+                  <Space direction="vertical" size={2} style={{ width: '100%' }}>
+                    <Typography.Text style={{ fontSize: 12 }}>
+                      {describeConsignmentMatch(item)}
+                    </Typography.Text>
+                    {(item.matchDetails || [])
+                      .filter((detail) => detail.status !== 'match' && detail.status !== 'ignored')
+                      .slice(0, 3)
+                      .map((detail) => (
+                        <Typography.Text key={detail.key} type="secondary" style={{ fontSize: 11 }}>
+                          {detail.label}：订单「{detail.orderValue || '-'}」/ 库存「
+                          {detail.inventoryValue || '-'}」
+                        </Typography.Text>
+                      ))}
+                  </Space>
+                ),
+              },
             ]}
           />
+          {selectedIds.length > 0 && !coverage.sufficient ? (
+            <Alert
+              type="warning"
+              showIcon
+              message={
+                sharingEnabled
+                  ? `还差 ${coverage.gap} 份，拼单必须一次拼满才能提交`
+                  : `所选库存仅剩 ${coverage.selectedQuantity} 件，整单需要 ${coverage.requiredQuantity} 件`
+              }
+            />
+          ) : null}
           {nonExactSelected ? (
             <Space direction="vertical" size={6} style={{ width: '100%' }}>
               <Alert
@@ -219,7 +367,8 @@ export default function ConsignmentWorkOrderMatchModal({
             </Space>
           ) : null}
           <Typography.Text type="secondary">
-            已选 {selectedIds.length} 条，合计成本 {money(totalPrice)}
+            已选 {selectedIds.length} 条，覆盖 {coverage.selectedQuantity}{' '}
+            {sharingEnabled ? '份' : '件'}
           </Typography.Text>
         </Space>
       ) : null}