优化

src/modules/cross-border/views/ProcurementView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { ApiError } from '@/api/types'
 import { accessTokenIdentity } from '@/api/session'
 import { useAuthStore } from '@/modules/auth/public'
@@ -9,7 +9,7 @@ import DataTable, { type DataTableColumn } from '@/components/common/DataTable.v
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import type { TableAction } from '@/components/common/tableActions'
 import ProcurementDetailPanel from '../components/ProcurementDetailPanel.vue'
-import { createProcurement, getProcurement, listProcurements, type ProcurementDetail, type ProcurementSummary } from '../api/procurement'
+import { confirmProcurement, createProcurement, getProcurement, getProcurementWorkflow, listProcurements, type ProcurementDetail, type ProcurementSummary, type ProcurementWorkflow } from '../api/procurement'
 import { procurementDirections, directionLabel, regionText, buildProcurementCreate, dateTime, draftBudgetTotal, emptyProcurementDraft, money, procurementStatuses, statusLabel, statusTone } from '../procurementPresentation'
 import { procurementRequestKey } from '../procurementSubmission'
 
@@ -25,9 +25,14 @@ const form = reactive(emptyProcurementDraft())
 const submitError = ref(''), submittedOrder = ref('')
 const submitting = ref(false), loading = ref(false), error = ref('')
 const detail = shallowRef<ProcurementDetail | null>(null)
+const workflow = shallowRef<ProcurementWorkflow | null>(null)
+const confirming = ref(false), confirmError = ref('')
+const canConfirm = computed(() => canCreate.value && workflow.value?.status === 'WAIT_CUSTOMER_CONFIRM')
 const rows = ref<ProcurementSummary[]>([]), total = ref(0)
 const query = reactive({ page: 1, size: 20, orderNo: '', purchaseCategory: '', productName: '', status: '' })
 let requestSequence = 0, active = true, inFlight = ''
+let createAttempt: { fingerprint: string; key: string } | null = null
+let confirmAttempt: { fingerprint: string; key: string } | null = null
 const queryModel = computed<QueryModel>({
   get: () => ({ orderNo: query.orderNo, purchaseCategory: query.purchaseCategory, productName: query.productName, status: query.status }),
   set: value => { for (const key of ['orderNo', 'purchaseCategory', 'productName', 'status'] as const) query[key] = String(value[key] || '') },
@@ -35,7 +40,7 @@ const queryModel = computed<QueryModel>({
 const queryFields: QueryField[] = [
   { key: 'orderNo', label: '采购单号', type: 'input' }, { key: 'purchaseCategory', label: '采购品类', type: 'input' },
   { key: 'productName', label: '商品名称', type: 'input' },
-  { key: 'status', label: '履约进度', type: 'select', options: Object.entries(procurementStatuses).map(([value, label]) => ({ value, label: ({ WAIT_OVERSEAS_RECEIPT: '待起运仓收货', OVERSEAS_RECEIVING: '起运地收货中', WAIT_OVERSEAS_SHIPMENT: '待国际交寄', DOMESTIC_RECEIVING: '目的地收货中', WAIT_CHARGES: '待目的地核费' } as Record<string, string>)[value] || label })) },
+  { key: 'status', label: '履约进度', type: 'select', options: Object.entries(procurementStatuses).map(([value, label]) => ({ value, label })) },
 ]
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
@@ -66,28 +71,53 @@ async function loadDetail() {
   if (!orderNo.value) { error.value = '采购单号缺失'; return }
   const key = JSON.stringify([identity.value, orderNo.value])
   if (inFlight === key) return
-  const sequence = ++requestSequence; inFlight = key; loading.value = true; error.value = ''; detail.value = null
-  try { const result = await getProcurement(orderNo.value); if (sequence === requestSequence) detail.value = result }
+  const sequence = ++requestSequence; inFlight = key; loading.value = true; error.value = ''; detail.value = null; workflow.value = null
+  try {
+    const [result, currentWorkflow] = await Promise.all([getProcurement(orderNo.value), getProcurementWorkflow(orderNo.value)])
+    if (sequence === requestSequence) { detail.value = result; workflow.value = currentWorkflow }
+  }
   catch (cause) { if (sequence === requestSequence) error.value = message(cause) }
   finally { if (sequence === requestSequence) { loading.value = false; inFlight = '' } }
 }
+async function confirmReceived() {
+  if (!canConfirm.value || confirming.value || !workflow.value) return
+  const owner = identity.value, targetOrder = orderNo.value, version = workflow.value.version
+  confirming.value = true; confirmError.value = ''
+  try {
+    await ElMessageBox.confirm('确认本单收货数量及照片，确认后平台将安排出库。', '确认采购结果', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' })
+    if (!active || owner !== identity.value || targetOrder !== orderNo.value) return
+    const fingerprint = JSON.stringify([owner, targetOrder, version])
+    if (confirmAttempt?.fingerprint !== fingerprint) confirmAttempt = { fingerprint, key: procurementRequestKey() }
+    const result = await confirmProcurement(targetOrder, { version, idempotencyKey: confirmAttempt.key })
+    if (!active || owner !== identity.value || targetOrder !== orderNo.value) return
+    workflow.value = result; confirmAttempt = null
+    if (detail.value) detail.value = { ...detail.value, order: { ...detail.value.order, status: result.status, version: result.version } }
+    ElMessage.success('采购结果已确认')
+  } catch (cause) {
+    if (cause !== 'cancel' && cause !== 'close' && active && owner === identity.value && targetOrder === orderNo.value) confirmError.value = message(cause)
+  } finally { confirming.value = false }
+}
 function search() { if (query.page === 1) void loadList(); else query.page = 1 }
 function resetQuery() { const reload = query.page === 1; Object.assign(query, { page: 1, orderNo: '', purchaseCategory: '', productName: '', status: '' }); if (reload) void loadList() }
-function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()) }
+function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()); createAttempt = null }
 async function submit() {
   if (submitting.value || !canCreate.value || !identity.value || submittedOrder.value) return
   const owner = identity.value; submitting.value = true; submitError.value = ''
   try {
-    const result = await createProcurement(buildProcurementCreate(form, companyName.value, procurementRequestKey()))
+    const payload = buildProcurementCreate(form, companyName.value, '')
+    const fingerprint = JSON.stringify([owner, payload])
+    if (createAttempt?.fingerprint !== fingerprint) createAttempt = { fingerprint, key: procurementRequestKey() }
+    const result = await createProcurement({ ...payload, idempotencyKey: createAttempt.key })
     if (!active || owner !== identity.value) return
-    submittedOrder.value = result.order.orderNo; ElMessage.success('采购订单已提交')
+    createAttempt = null; submittedOrder.value = result.order.orderNo; ElMessage.success('采购订单已提交')
     if (canList.value) await router.push({ name: 'cross-border-procurement-detail', params: { orderNo: result.order.orderNo } })
   } catch (cause) { if (active && owner === identity.value) submitError.value = message(cause) }
   finally { submitting.value = false }
 }
 watch(() => [mode.value, orderNo.value, query.page, query.size, identity.value], (values, previous) => {
-  if (values[4] !== previous?.[4]) { rows.value = []; total.value = 0 }
-  ++requestSequence; inFlight = ''; loading.value = false; error.value = ''; detail.value = null
+  if (values[4] !== previous?.[4]) { rows.value = []; total.value = 0; createAttempt = null }
+  if (values[4] !== previous?.[4] || values[1] !== previous?.[1]) confirmAttempt = null
+  ++requestSequence; inFlight = ''; loading.value = false; error.value = ''; detail.value = null; workflow.value = null; confirmError.value = ''
   if (mode.value === 'create') resetForm()
   else if (mode.value === 'detail') void loadDetail()
   else void loadList()
@@ -112,12 +142,12 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
       </div>
     </template>
     <section v-else-if="mode === 'detail'" v-loading="loading" class="procurement-detail" aria-label="采购订单详情">
-      <header class="procurement-heading"><div><el-button link type="primary" @click="returnToList">← 返回列表</el-button><h2>{{ detail?.order.orderNo || '采购订单详情' }}</h2></div><div><el-tag v-if="detail" :type="statusTone(detail.order.status)">{{ statusLabel(detail.order.status, detail.order.procurementDirection) }}</el-tag><el-button :disabled="loading" @click="loadDetail">刷新</el-button></div></header>
+      <header class="procurement-heading"><div><el-button link type="primary" @click="returnToList">← 返回列表</el-button><h2>{{ detail?.order.orderNo || '采购订单详情' }}</h2></div><div><el-tag v-if="detail" :type="statusTone(workflow?.status || detail.order.status)">{{ statusLabel(workflow?.status || detail.order.status, detail.order.procurementDirection) }}</el-tag><el-button v-if="canConfirm" type="primary" :loading="confirming" @click="confirmReceived">确认采购结果</el-button><el-button :disabled="loading || confirming" @click="loadDetail">刷新</el-button></div></header>
       <div v-if="error" class="procurement-error" role="alert"><span>{{ error }}</span><el-button :disabled="loading" @click="loadDetail">重新加载</el-button></div>
-      <ProcurementDetailPanel v-else-if="detail" :detail="detail" /><el-skeleton v-else :rows="8" animated />
+      <template v-else-if="detail && workflow"><el-alert v-if="confirmError" :title="confirmError" type="error" :closable="false" /><ProcurementDetailPanel :detail="detail" :workflow="workflow" /></template><el-skeleton v-else :rows="8" animated />
     </section>
     <section v-else class="procurement-create" aria-label="采购下单">
-      <header class="procurement-heading"><div><h2>采购下单</h2><p>一单一个商品及规格；预算仅授权样品货款，运费及关税另行核定。</p></div><el-button v-if="canList" @click="returnToList">返回列表</el-button></header>
+      <header class="procurement-heading"><div><h2>采购下单</h2></div><el-button v-if="canList" @click="returnToList">返回列表</el-button></header>
       <el-result v-if="!canCreate" icon="warning" title="没有采购下单权限" sub-title="请联系企业管理员配置权限" />
       <el-result v-else-if="submittedOrder" icon="success" title="采购订单已提交" :sub-title="submittedOrder"><template #extra><el-button @click="resetForm">新建另一单</el-button></template></el-result>
       <template v-else>
@@ -129,15 +159,15 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
             <el-form-item label="商品名称" required><el-input v-model.trim="form.productName" maxlength="255" placeholder="" /></el-form-item>
             <el-form-item label="商品规格"><el-input v-model.trim="form.productSpecification" maxlength="500" placeholder="规格、型号" /></el-form-item>
             <el-form-item label="采购数量（件）" required><el-input v-model.trim="form.purchaseQuantity" inputmode="numeric" maxlength="18" placeholder="正整数" /></el-form-item>
-            <el-form-item label="预算单价" required><el-input v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="请明确填写；免费样品填 0" /></el-form-item>
+            <el-form-item label="预算单价" required><el-input v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="0.00" /></el-form-item>
             <el-form-item label="预算币种" required><el-select v-model="form.currency"><el-option label="美元 USD" value="USD" /><el-option label="人民币 CNY" value="CNY" /></el-select></el-form-item>
             <el-form-item class="full" label="商品链接"><el-input v-model.trim="form.productUrl" maxlength="2000" placeholder="https://…" /></el-form-item>
-          </div><p class="procurement-hint">货款预算总上限：<strong>{{ money(draftBudgetTotal(form), form.currency) }}</strong>。零预算仅授权免费样品；实际货款按供应商实付核定。</p>
+          </div><p class="procurement-hint">预算合计：<strong>{{ money(draftBudgetTotal(form), form.currency) }}</strong></p>
           <h3>{{ regionText('最终国内收件资料', form.procurementDirection) }}</h3><div class="procurement-form-grid">
             <el-form-item label="收件人" required><el-input v-model.trim="form.contactName" maxlength="128" placeholder="实际收件人姓名" /></el-form-item>
             <el-form-item label="联系电话" required><el-input v-model.trim="form.contactPhone" maxlength="64" type="tel" placeholder="快递可联系的电话" /></el-form-item>
             <el-form-item class="full" :label="regionText('完整国内地址', form.procurementDirection)" required><el-input v-model.trim="form.receivingAddress" maxlength="1000" :placeholder="form.procurementDirection === 'DOMESTIC_TO_OVERSEAS' ? '国家、州/省、市、邮编及详细地址' : '省、市、区县、街道及详细门牌'" /></el-form-item>
-            <el-form-item class="full" label="采购要求"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="" /></el-form-item>
+            <el-form-item class="full" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="" /></el-form-item>
           </div>
         </el-form>
         <footer class="procurement-form-actions"><el-button type="primary" :loading="submitting" :disabled="!companyName || !identity" @click="submit">提交采购订单</el-button></footer>