优化

src/modules/cross-border/components/BusinessOrdersView.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
+import type { TableAction } from '@/components/common/tableActions'
 import { useAuthStore } from '@/modules/auth/public'
 import {
   createProcurement,
@@ -15,8 +19,11 @@ import {
 } from '../api/businessOrders'
 import { CONTAINER_SPECIFICATIONS, DEFAULT_CONTAINER_TYPE } from '../containerSpecifications'
 
-const props = defineProps<{ kind: CrossBorderBusinessKind }>()
+const props = withDefaults(defineProps<{ kind: CrossBorderBusinessKind; createPage?: boolean; detailPage?: boolean }>(), { createPage: false, detailPage: false })
 const auth = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+const detailOrderNo = computed(() => String(route.params.orderNo || ''))
 const canCreate = computed(() => auth.hasPermission(({
   procurement: 'merchant:cross-border:procurement:create',
   trucking: 'merchant:cross-border:domestic-trucking:create',
@@ -101,7 +108,7 @@ function transportColumns(looseboard: boolean): ColumnDefinition[] {
   ]
 }
 
-const mode = ref<PageMode>('list')
+const mode = ref<PageMode>(props.detailPage ? 'detail' : props.createPage ? 'create' : 'list')
 const loading = ref(false)
 const submitting = ref(false)
 const submitKey = ref('')
@@ -112,6 +119,52 @@ const formRef = ref<FormInstance>()
 const query = reactive({ page: 1, size: 20, orderNo: '', routeKeyword: '', status: '', productName: '', purchaseCategory: '' })
 const total = ref(0)
 
+const queryModel = computed<QueryModel>({
+  get: () => ({
+    orderNo: query.orderNo,
+    purchaseCategory: query.purchaseCategory,
+    productName: query.productName,
+    routeKeyword: query.routeKeyword,
+    status: query.status,
+  }),
+  set: (value) => {
+    query.orderNo = String(value.orderNo || '')
+    query.purchaseCategory = String(value.purchaseCategory || '')
+    query.productName = String(value.productName || '')
+    query.routeKeyword = String(value.routeKeyword || '')
+    query.status = String(value.status || '')
+  },
+})
+
+const queryFields = computed<QueryField[]>(() => [
+  { key: 'orderNo', label: '订单号', type: 'input', placeholder: '请输入订单号' },
+  ...(props.kind === 'procurement'
+    ? [
+        { key: 'purchaseCategory', label: '采购品类', type: 'input', placeholder: '请输入采购品类' } as QueryField,
+        { key: 'productName', label: '商品名称', type: 'input', placeholder: '请输入商品名称' } as QueryField,
+      ]
+    : [{ key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: '请输入起运地或目的地' } as QueryField]),
+  {
+    key: 'status',
+    label: '状态',
+    type: 'select',
+    placeholder: '全部',
+    options: [
+      { label: '待审核', value: 'PENDING_REVIEW' },
+      { label: '已通过', value: 'APPROVED' },
+      { label: '已拒绝', value: 'REJECTED' },
+      { label: '待出库', value: 'PENDING_OUTBOUND' },
+      { label: '部分出库', value: 'PARTIALLY_OUTBOUND' },
+      { label: '全部出库', value: 'OUTBOUNDED' },
+      { label: '待接单', value: 'PENDING_ACCEPTANCE' },
+      { label: '处理中', value: 'PROCESSING' },
+      { label: '运输中', value: 'IN_TRANSIT' },
+      { label: '已完成', value: 'COMPLETED' },
+      { label: '已取消', value: 'CANCELLED' },
+    ],
+  },
+])
+
 const form = reactive<BusinessForm>(emptyForm())
 const rules: FormRules<BusinessForm> = {
   purchaseCategory: [{ required: true, message: '请输入采购品类', trigger: 'blur' }],
@@ -131,7 +184,7 @@ const detailFields = computed(() => {
   if (props.kind === 'procurement') {
     const current = detail.value as ProcurementDetail
     return [
-      ['订单号', summary.orderNo], ['采购品类', read(summary, 'purchaseCategory')],
+      ['采购品类', read(summary, 'purchaseCategory')],
       ['商品名称', read(summary, 'productName')], ['商品规格', read(summary, 'productSpecification')],
       ['采购数量', read(summary, 'purchaseQuantity')], ['预算单价', money(read(summary, 'budgetUnitPrice'), read(summary, 'currency'))],
       ['入库量', read(summary, 'inboundQuantity')], ['出库量', read(summary, 'outboundQuantity')],
@@ -140,12 +193,12 @@ const detailFields = computed(() => {
       ['收货地址', current.receivingAddress], ['商品链接', current.productUrl],
       ['国内运单', joinText(current.domesticCarrier, current.domesticTrackingNo)],
       ['海外运单', joinText(current.overseasCarrier, current.overseasTrackingNo)],
-      ['状态', statusLabel(summary.status)], ['审核备注', current.reviewRemark], ['备注', current.remark],
+      ['审核备注', current.reviewRemark], ['备注', current.remark],
     ]
   }
   const current = detail.value as TransportDetail
   return [
-    ['订单编号', summary.orderNo], ['运输方式', read(summary, 'transportMode')],
+    ['运输方式', read(summary, 'transportMode')],
     ['是否打盘', yesNo(read(summary, 'palletRequired'))], ['运输类型', transportTypeLabel(read(summary, 'transportType'))],
     ['起运地', read(summary, 'origin')], ['起运地址', current.originAddress],
     ['目的地', read(summary, 'destination')], ['目的地址', current.destinationAddress],
@@ -153,10 +206,22 @@ const detailFields = computed(() => {
     ['件数', read(summary, 'packageCount')], ['总重量(kg)', read(summary, 'totalWeightKg')],
     ['总体积(m³)', read(summary, 'totalVolumeCbm')], ['预算总价', money(read(summary, 'budgetAmount'), read(summary, 'currency'))],
     ['联系人', read(summary, 'contactName')], ['联系方式', read(summary, 'contactInfo')],
-    ['要求时间', read(summary, 'requestedDate')], ['状态', statusLabel(summary.status)], ['备注', current.remark],
+    ['要求时间', read(summary, 'requestedDate')], ['备注', current.remark],
   ]
 })
 
+const tableColumns = computed<DataTableColumn[]>(() => [
+  { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
+  ...configuration.value.columns.map((column) => ({
+    ...column,
+    prop: column.key,
+    slotName: ['orderNo', 'status'].includes(column.key) ? column.key : undefined,
+    formatter: (row: object) => displayCell(row, column.key),
+  })),
+])
+
+const detailStatus = computed(() => detail.value ? statusLabel(detail.value.summary.status) : '—')
+
 function emptyForm(): BusinessForm {
   return {
     purchaseCategory: '', productName: '', productSpecification: '', productUrl: '', purchaseQuantity: 1,
@@ -179,6 +244,9 @@ function transportModeLabel(value: unknown) { return ({ SHARED_TRUCK: '拼车',
 function statusLabel(value: unknown) {
   return ({ PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_OUTBOUND: '待出库', PARTIALLY_OUTBOUND: '部分出库', OUTBOUNDED: '全部出库', PENDING_ACCEPTANCE: '待接单', PROCESSING: '处理中', IN_TRANSIT: '运输中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record<string, string>)[String(value)] || text(value)
 }
+function statusTone(value: unknown) {
+  return ({ APPROVED: 'success', COMPLETED: 'success', OUTBOUNDED: 'success', REJECTED: 'danger', CANCELLED: 'info', PENDING_REVIEW: 'warning', PENDING_ACCEPTANCE: 'warning', PROCESSING: 'primary', IN_TRANSIT: 'primary' } as Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'>)[String(value)] || 'info'
+}
 function displayCell(candidate: unknown, key: string) {
   const row = candidate as BusinessRow
   const value = read(row, key)
@@ -219,16 +287,52 @@ function resetQuery() {
   void load()
 }
 
-async function openDetail(candidate: unknown) {
+function searchOrders() {
+  query.page = 1
+  void load()
+}
+
+function getRowActions(candidate: object): TableAction[] {
+  return [{ key: 'detail', label: '详情', run: () => openDetail(candidate) }]
+}
+
+function detailFieldClass(label: unknown) {
+  return ['收货地址', '商品链接', '国内运单', '海外运单', '审核备注', '备注', '起运地址', '目的地址'].includes(String(label)) ? 'is-wide' : ''
+}
+
+const listRouteName = computed(() => ({
+  procurement: 'cross-border-procurement',
+  trucking: 'cross-border-domestic-trucking',
+  looseboard: 'cross-border-pallet-shipping',
+} as Record<CrossBorderBusinessKind, string>)[props.kind])
+const detailRouteName = computed(() => ({
+  procurement: 'cross-border-procurement-detail',
+  trucking: 'cross-border-domestic-trucking-detail',
+  looseboard: 'cross-border-pallet-shipping-detail',
+} as Record<CrossBorderBusinessKind, string>)[props.kind])
+
+function returnToList() {
+  if (props.createPage || props.detailPage) {
+    void router.push({ name: listRouteName.value })
+    return
+  }
+  mode.value = 'list'
+}
+
+function openDetail(candidate: unknown) {
   const row = candidate as BusinessRow
+  void router.push({ name: detailRouteName.value, params: { orderNo: row.orderNo } })
+}
+async function loadDetail() {
+  if (!detailOrderNo.value) return
   loading.value = true
   error.value = ''
   try {
     detail.value = props.kind === 'procurement'
-      ? await getBusinessOrder<ProcurementDetail>('procurement', row.orderNo)
-      : await getBusinessOrder<TransportDetail>(props.kind, row.orderNo)
+      ? await getBusinessOrder<ProcurementDetail>('procurement', detailOrderNo.value)
+      : await getBusinessOrder<TransportDetail>(props.kind, detailOrderNo.value)
     mode.value = 'detail'
-  } catch (cause) { ElMessage.error(errorMessage(cause)) }
+  } catch (cause) { detail.value = null; error.value = errorMessage(cause); ElMessage.error(error.value) }
   finally { loading.value = false }
 }
 
@@ -264,57 +368,53 @@ async function submit() {
         : { ...base, transportMode: form.transportMode, palletRequired: form.palletRequired })
     }
     ElMessage.success('订单提交成功')
-    mode.value = 'list'
     resetForm()
-    await load()
+    if (props.createPage) await router.push({ name: listRouteName.value })
+    else { mode.value = 'list'; await load() }
   } catch (cause) { ElMessage.error(errorMessage(cause)) }
   finally { submitting.value = false }
 }
 
-onMounted(() => void load())
+watch(() => [query.page, query.size], () => { if (!props.createPage && mode.value === 'list') void load() })
+onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.createPage) void load() })
 </script>
 
 <template>
-  <section v-loading="loading" class="business-orders" :aria-busy="loading">
-    <header class="page-head">
+  <section v-loading="loading" class="business-orders client-ui" :aria-busy="loading">
+    <header v-if="mode === 'create'" class="page-head">
       <div>
-        <h2>{{ mode === 'detail' ? `${configuration.title}订单详情` : mode === 'create' ? `${configuration.title}下单` : configuration.title }}</h2>
-        <p>{{ mode === 'list' ? configuration.description : mode === 'create' ? '请填写订单信息，带 * 项为必填项' : `订单号：${detail?.summary.orderNo || '—'}` }}</p>
+        <h2>{{ configuration.title }}下单</h2>
+        <p>请填写订单信息，带 * 项为必填项</p>
       </div>
-      <el-button v-if="mode !== 'list'" @click="mode = 'list'">返回列表</el-button>
-      <el-button v-else-if="canCreate" type="primary" @click="resetForm(); mode = 'create'">新增下单</el-button>
+      <el-button @click="returnToList">返回列表</el-button>
     </header>
 
     <template v-if="mode === 'list'">
-      <el-alert v-if="error" :title="error" type="error" show-icon :closable="false">
-        <template #default><el-button size="small" @click="load">重新加载</el-button></template>
-      </el-alert>
-      <el-card shadow="never" class="filter-card">
-        <el-form inline @submit.prevent="query.page = 1; load()">
-          <el-form-item label="订单号"><el-input v-model.trim="query.orderNo" clearable placeholder="请输入订单号" /></el-form-item>
-          <el-form-item v-if="kind === 'procurement'" label="采购品类"><el-input v-model.trim="query.purchaseCategory" clearable placeholder="请输入采购品类" /></el-form-item>
-          <el-form-item v-if="kind === 'procurement'" label="商品名称"><el-input v-model.trim="query.productName" clearable placeholder="请输入商品名称" /></el-form-item>
-          <el-form-item v-else label="运输路线"><el-input v-model.trim="query.routeKeyword" clearable placeholder="起运地或目的地" /></el-form-item>
-          <el-form-item label="状态"><el-input v-model.trim="query.status" clearable placeholder="请输入状态" /></el-form-item>
-          <el-form-item><el-button type="primary" native-type="submit">查询</el-button><el-button @click="resetQuery">重置</el-button></el-form-item>
-        </el-form>
-      </el-card>
-      <el-card shadow="never">
-        <el-table :data="rows" empty-text="暂无订单" border>
-          <el-table-column label="操作" width="90" fixed="left"><template #default="scope"><el-button link type="primary" @click="openDetail(scope.row)">查看</el-button></template></el-table-column>
-          <el-table-column v-for="column in configuration.columns" :key="column.key" :label="column.label" :width="column.width" show-overflow-tooltip>
-            <template #default="scope">{{ displayCell(scope.row, column.key) }}</template>
-          </el-table-column>
-        </el-table>
-        <el-pagination v-model:current-page="query.page" v-model:page-size="query.size" class="pagination" :total="total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next" @change="load" />
-      </el-card>
+      <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="订单查询条件" :fields="queryFields" :search-on-reset="false" @search="searchOrders" @reset="resetQuery" />
+      <div class="business-table-card">
+        <DataTable v-model:page="query.page" v-model:page-size="query.size" :data="rows" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[10, 20, 50, 100]" :row-actions="getRowActions" row-key="orderNo" empty-text="暂无订单">
+          <template #toolbar><strong>订单列表</strong><span>共 {{ total }} 条</span></template>
+          <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="resetForm(); mode = 'create'">新增下单</el-button></template>
+          <template v-if="error" #error><div class="business-load-error" role="alert"><span>{{ error }}</span><el-button size="small" @click="load">重新加载</el-button></div></template>
+          <template #orderNo="{ row }"><button class="business-order-link" type="button" @click="openDetail(row)">{{ (row as BusinessRow).orderNo }}</button></template>
+          <template #status="{ row }"><el-tag :type="statusTone((row as BusinessRow).status)" effect="light" size="small">{{ statusLabel((row as BusinessRow).status) }}</el-tag></template>
+        </DataTable>
+      </div>
     </template>
 
-    <el-card v-else-if="mode === 'detail'" shadow="never">
-      <dl class="detail-grid">
-        <div v-for="field in detailFields" :key="String(field[0])"><dt>{{ field[0] }}</dt><dd>{{ text(field[1]) }}</dd></div>
-      </dl>
-    </el-card>
+    <section v-else-if="mode === 'detail'" class="business-detail-page" aria-label="订单详情">
+      <header class="business-detail-heading">
+        <div class="business-detail-heading-main"><el-button link type="primary" @click="returnToList">← 返回列表</el-button><div><h2>{{ detail?.summary.orderNo || '订单详情' }}</h2><p>{{ configuration.title }}订单</p></div></div>
+        <el-tag :type="statusTone(detail?.summary.status)" effect="light">{{ detailStatus }}</el-tag>
+      </header>
+      <div v-if="error" class="business-detail-error" role="alert"><strong>{{ error }}</strong><el-button size="small" @click="loadDetail">重新加载</el-button></div>
+      <section v-else class="business-detail-section">
+        <h3>订单信息</h3>
+        <dl class="detail-grid">
+          <div v-for="field in detailFields" :key="String(field[0])" :class="detailFieldClass(field[0])"><dt>{{ field[0] }}</dt><dd>{{ text(field[1]) }}</dd></div>
+        </dl>
+      </section>
+    </section>
 
     <el-card v-else shadow="never" class="form-card">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
@@ -345,24 +445,35 @@ onMounted(() => void load())
         <el-form-item label="联系人" prop="contactName"><el-input v-model.trim="form.contactName" maxlength="128" placeholder="请输入联系人" /></el-form-item>
         <el-form-item label="联系方式" prop="contactInfo"><el-input v-model.trim="form.contactInfo" maxlength="128" placeholder="请输入电话、微信或邮箱" /></el-form-item>
         <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="4" maxlength="1000" show-word-limit placeholder="请输入其他要求" /></el-form-item>
-        <el-form-item><el-button @click="mode = 'list'">取消</el-button><el-button v-if="canCreate" type="primary" :loading="submitting" @click="submit">提交订单</el-button></el-form-item>
+        <el-form-item><el-button @click="returnToList">取消</el-button><el-button v-if="canCreate" type="primary" :loading="submitting" @click="submit">提交订单</el-button></el-form-item>
       </el-form>
     </el-card>
   </section>
 </template>
 
 <style scoped>
-.business-orders { display: grid; gap: 18px; }
+.business-orders { display: grid; gap: var(--client-section-gap); }
 .page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .page-head h2 { margin: 0; color: #111827; font-size: 26px; }
 .page-head p { margin: 7px 0 0; color: #64748b; font-size: 14px; }
-.filter-card :deep(.el-form-item) { margin-bottom: 0; }
-.filter-card :deep(.el-input) { width: 190px; }
-.pagination { justify-content: flex-end; margin-top: 18px; }
-.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
-.detail-grid div { min-width: 0; padding: 18px 20px; border-right: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5; }
-.detail-grid dt { margin-bottom: 7px; color: #8492a6; font-size: 13px; }
-.detail-grid dd { margin: 0; overflow-wrap: anywhere; color: #1f2937; line-height: 1.55; }
+.business-table-card { overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
+.business-order-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--client-action); cursor: pointer; font: inherit; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
+.business-order-link:hover { text-decoration: underline; text-underline-offset: 3px; }
+.business-load-error { display: flex; min-height: 84px; align-items: center; justify-content: center; gap: 12px; padding: 14px; color: #b42318; }
+.business-detail-error { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 12px; color: #b42318; }
+.business-detail-page { min-width: 0; padding: 10px 14px 20px; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
+.business-detail-heading { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--border); }
+.business-detail-heading-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
+.business-detail-heading-main > div { min-width: 0; }
+.business-detail-heading h2 { margin: 0; overflow: hidden; color: var(--navy); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
+.business-detail-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
+.business-detail-section { margin-top: 10px; }
+.business-detail-section h3 { margin: 0; padding: 0 0 5px; border-bottom: 1px solid #eaf0f7; color: var(--navy); font-size: 13px; }
+.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
+.detail-grid div { display: grid; min-width: 0; min-height: 34px; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 7px; padding: 3px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.detail-grid div.is-wide { grid-column: span 2; }
+.detail-grid dt { color: var(--muted); font-size: 10px; white-space: nowrap; }
+.detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; }
 .form-card :deep(.el-form) { max-width: 860px; }
 .form-card :deep(.el-input), .form-card :deep(.el-textarea), .form-card :deep(.el-select) { width: 100%; }
 .form-card .currency { width: 110px; margin-left: 12px; }
@@ -373,15 +484,10 @@ onMounted(() => void load())
   .page-head h2 { font-size: 24px; }
   .page-head > div { min-width: 0; }
 
-  .filter-card :deep(.el-form) { display: grid; grid-template-columns: 1fr; }
-  .filter-card :deep(.el-form-item) { width: 100%; margin-right: 0; margin-bottom: 12px; }
-  .filter-card :deep(.el-form-item:last-child) { margin-bottom: 0; }
-  .filter-card :deep(.el-form-item__content),
-  .filter-card :deep(.el-input) { width: 100%; }
-
   .detail-grid { grid-template-columns: 1fr; }
-  .detail-grid div { padding: 14px 16px; border-right: 0; }
+  .detail-grid div, .detail-grid div.is-wide { grid-column: auto; }
   .detail-grid dd { overflow-wrap: break-word; word-break: normal; }
+  .business-detail-heading { align-items: flex-start; flex-direction: column; }
 
   .form-card :deep(.el-form-item) { display: block; }
   .form-card :deep(.el-form-item__label) {