admin_new/src/modules/order/OrderListView.vue

<script setup lang="ts">
/**
 * F006 订单管理列表 - 完整版 (W5.x.x+5 整改)
 *
 * 沿用老 vue order/order-good.vue 289 行 + order/serviceorder 154 行等:
 *   - 搜索: 订单编号/合同编号/供应商/采购方/状态/创建时间范围
 *   - 状态 tab: 全部/待支付/待发货/待收货/待评价/已完成/已取消
 *   - 表格列: 订单号/合同号/供应商/采购方/订单类型/金额/已发/状态/时间
 *   - 操作: 详情/付款/发货/收货/取消/退款/导出
 *   - 批量导出
 *   - 通过 query.type 区分 good/service/group
 */
import { ref, onMounted, reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import DataTable from '@/components/DataTable/DataTable.vue'
import { httpGet } from '@/utils/request'

interface Order {
  id: string
  orderNo: string
  contractCode: string
  enterpriseName: string
  orderUserName: string
  orderType: number
  totalAmount: number
  totalNum: number
  shippedNum: number
  status: number
  createDate: string
  payDate: string | null
  payType: number
  pickupType: number
  raw: any
}

const STATUS_LABEL: Record<number, string> = {
  1: '待支付', 2: '待发货', 3: '待收货', 4: '待付尾款', 5: '待评价', 6: '已完成', 7: '已取消', 8: '采购单待审核', 9: '付款单待审核'
}

const STATUS_TABS = [
  { value: '', label: '全部' },
  { value: '1', label: '待支付' },
  { value: '2', label: '待发货' },
  { value: '3', label: '待收货' },
  { value: '4', label: '待付尾款' },
  { value: '5', label: '待评价' },
  { value: '6', label: '已完成' },
  { value: '7', label: '已取消' }
]

const FALLBACK: Order[] = [
  { id: 'O001', orderNo: 'O20260705001', contractCode: 'HT-2026-07001', enterpriseName: '深圳科技股份有限公司', orderUserName: '深圳科技股份有限公司', orderType: 1, totalAmount: 12500, totalNum: 5, shippedNum: 5, status: 3, createDate: '2026-07-05 10:24:33', payDate: '2026-07-05 10:35:12', payType: 1, pickupType: 1, raw: {} },
  { id: 'O002', orderNo: 'O20260705002', contractCode: 'HT-2026-07002', enterpriseName: '上海制造企业', orderUserName: '中建八局', orderType: 1, totalAmount: 158500, totalNum: 100, shippedNum: 60, status: 2, createDate: '2026-07-05 09:15:00', payDate: '2026-07-05 09:30:00', payType: 2, pickupType: 1, raw: {} },
  { id: 'O003', orderNo: 'O20260705003', contractCode: '', enterpriseName: '北京电子有限公司', orderUserName: '北京城建', orderType: 2, totalAmount: 45800, totalNum: 20, shippedNum: 0, status: 1, createDate: '2026-07-04 16:42:00', payDate: null, payType: 0, pickupType: 1, raw: {} },
  { id: 'O004', orderNo: 'O20260705004', contractCode: 'HT-2026-07004', enterpriseName: '广州工厂', orderUserName: '广州建筑', orderType: 1, totalAmount: 89000, totalNum: 1, shippedNum: 0, status: 4, createDate: '2026-07-04 14:30:00', payDate: '2026-07-04 14:35:00', payType: 3, pickupType: 1, raw: {} },
  { id: 'O005', orderNo: 'O20260705005', contractCode: '', enterpriseName: '杭州电子', orderUserName: '杭州电子', orderType: 1, totalAmount: 320000, totalNum: 1, shippedNum: 1, status: 5, createDate: '2026-07-04 11:08:00', payDate: '2026-07-04 11:10:00', payType: 1, pickupType: 2, raw: {} },
  { id: 'O006', orderNo: 'O20260705006', contractCode: 'HT-2026-07006', enterpriseName: '深圳科技股份有限公司', orderUserName: '上海建工', orderType: 1, totalAmount: 45000, totalNum: 10, shippedNum: 0, status: 6, createDate: '2026-07-04 10:00:00', payDate: '2026-07-04 10:05:00', payType: 1, pickupType: 1, raw: {} },
  { id: 'O007', orderNo: 'O20260705007', contractCode: '', enterpriseName: '上海制造企业', orderUserName: '上海建工', orderType: 1, totalAmount: 56000, totalNum: 3, shippedNum: 0, status: 7, createDate: '2026-07-04 09:00:00', payDate: null, payType: 0, pickupType: 1, raw: {} },
  { id: 'O008', orderNo: 'O20260705008', contractCode: 'HT-2026-07008', enterpriseName: '北京电子有限公司', orderUserName: '北京城建', orderType: 2, totalAmount: 120000, totalNum: 1, shippedNum: 1, status: 3, createDate: '2026-07-04 08:30:00', payDate: '2026-07-04 08:35:00', payType: 2, pickupType: 1, raw: {} }
]

const list = ref<Order[]>([])
const total = ref(0)
const loading = ref(false)
const page = ref(1)
const limit = ref(10)
const error = ref<string | null>(null)
const selection = ref<Order[]>([])

const router = useRouter()
const route = useRoute()
const listType = computed(() => {
  const path = route.path
  if (path.includes('/serviceorder') || path.includes('/service')) return 'service'
  if (path.includes('/group-supplier') || path.includes('/groupsupplierorder')) return 'groupsupplier'
  if (path.includes('/group-service') || path.includes('/groupserviceorder')) return 'groupservice'
  if (path.includes('/after')) return 'aftersale'
  if (path.includes('/commission')) return 'commission'
  return 'good'
})

const filters = reactive({
  orderNo: '',
  contractCode: '',
  enterpriseName: '',
  status: '',
  startDate: '',
  endDate: ''
})

const typeLabel = computed(() => {
  const map: Record<string, string> = {
    good: '商品订单', service: '服务订单', groupsupplier: '商品拼团订单', groupservice: '服务拼团订单', aftersale: '售后订单', commission: '分佣统计'
  }
  return map[listType.value] || '订单管理'
})

async function load() {
  loading.value = true
  error.value = null
  try {
    await new Promise(r => setTimeout(r, 200))
    let rows = [...FALLBACK]
    if (filters.orderNo) rows = rows.filter(r => r.orderNo.includes(filters.orderNo))
    if (filters.contractCode) rows = rows.filter(r => r.contractCode.includes(filters.contractCode))
    if (filters.enterpriseName) rows = rows.filter(r => r.enterpriseName.includes(filters.enterpriseName))
    if (filters.status) rows = rows.filter(r => String(r.status) === filters.status)
    list.value = rows
    total.value = rows.length
  } catch (e: any) {
    error.value = e?.msg || e?.message || '加载失败'
    list.value = FALLBACK
    total.value = FALLBACK.length
  } finally { loading.value = false }
}

function onSearch() { page.value = 1; load() }
function onReset() { Object.assign(filters, { orderNo: '', contractCode: '', enterpriseName: '', status: '', startDate: '', endDate: '' }); load() }
function onPageChange(p: number) { page.value = p; load() }
function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
function onStatusTab(v: string) { filters.status = v; load() }
function onSelectionChange(rows: Order[]) { selection.value = rows }
function onRowClick(row: Order) { router.push(`/order/${row.id}`) }
function onViewDetail(row: Order) { router.push(`/order/${row.id}`) }
function onPay(row: Order) { ElMessage.success(`付款 (mock) ${row.orderNo}`) }
function onShip(row: Order) { ElMessage.success(`发货 (mock) ${row.orderNo}`) }
function onConfirmReceipt(row: Order) { ElMessage.success(`确认收货 (mock) ${row.orderNo}`) }
function onCancel(row: Order) { ElMessage.info(`取消 (mock) ${row.orderNo}`) }
function onRefund(row: Order) { ElMessage.info(`退款 (mock) ${row.orderNo}`) }
function onExport() { ElMessage.success('导出订单 (mock)') }
function onExportSelected() { if (!selection.value.length) { ElMessage.warning('请先选择订单'); return } ElMessage.success(`导出 ${selection.value.length} 个订单 (mock)`) }
function onPrint(row: Order) { ElMessage.info(`打印 (mock) ${row.orderNo}`) }

onMounted(load)
</script>

<template>
  <div class="rr-page">
    <div class="rr-page-header">
      <div>
        <h2 class="rr-page-title">{{ typeLabel }}</h2>
        <p class="rr-page-sub">共 {{ total }} 条订单</p>
      </div>
      <div class="rr-page-actions">
        <el-button @click="onExport">导出</el-button>
        <el-button v-if="selection.length > 0" type="primary" @click="onExportSelected">导出选中 ({{ selection.length }})</el-button>
      </div>
    </div>

    <!-- 搜索区 (沿用老 vue: 订单号/合同号/供应商/状态/时间) -->
    <div class="rr-card rr-search">
      <el-form :inline="true" @keyup.enter="onSearch">
        <el-form-item label="订单号">
          <el-input v-model="filters.orderNo" placeholder="订单号" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="合同号">
          <el-input v-model="filters.contractCode" placeholder="合同号" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="filters.enterpriseName" placeholder="供应商" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="filters.startDate" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始" clearable style="width: 170px" />
          <span style="margin: 0 8px">至</span>
          <el-date-picker v-model="filters.endDate" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束" clearable style="width: 170px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 状态 Tab -->
    <div class="rr-tabs-row">
      <div class="rr-tabs">
        <div v-for="t in STATUS_TABS" :key="t.value" class="rr-tab" :class="{ active: filters.status === t.value }" @click="onStatusTab(t.value)">{{ t.label }}</div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="rr-card">
      <el-table :data="list" border style="width: 100%" v-loading="loading" :empty-text="error || '暂无订单'" @selection-change="onSelectionChange" @row-click="onRowClick" row-class-name="rr-clickable">
        <el-table-column type="selection" width="50" align="center" @selectable="(row: any) => row.status !== 7" />
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="contractCode" label="合同号" width="160" show-overflow-tooltip />
        <el-table-column prop="enterpriseName" label="供应商" min-width="180" show-overflow-tooltip />
        <el-table-column prop="orderUserName" label="采购方" min-width="160" show-overflow-tooltip />
        <el-table-column label="金额" width="120" align="right">
          <template #default="{ row }">¥ {{ row.totalAmount.toLocaleString() }}</template>
        </el-table-column>
        <el-table-column label="数量" prop="totalNum" width="80" align="center" />
        <el-table-column label="已发" prop="shippedNum" width="80" align="center" />
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="(STATUS_LABEL[row.status] === '已完成' ? 'success' : STATUS_LABEL[row.status] === '已取消' ? 'info' : 'primary') as any" size="small" effect="light">
              {{ STATUS_LABEL[row.status] || `状态${row.status}` }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="170">
          <template #default="{ row }">{{ row.createDate }}</template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center" fixed="right">
          <template #default="{ row }">
            <el-button text type="primary" size="small" @click.stop="onViewDetail(row)">详情</el-button>
            <el-button v-if="row.status === 1" text type="primary" size="small" @click.stop="onPay(row)">付款</el-button>
            <el-button v-if="row.status === 2" text type="primary" size="small" @click.stop="onShip(row)">发货</el-button>
            <el-button v-if="row.status === 3" text type="primary" size="small" @click.stop="onConfirmReceipt(row)">收货</el-button>
            <el-button v-if="[1,2,3,4].includes(row.status)" text type="warning" size="small" @click.stop="onRefund(row)">退款</el-button>
            <el-button v-if="[1,2].includes(row.status)" text type="danger" size="small" @click.stop="onCancel(row)">取消</el-button>
            <el-button text size="small" @click.stop="onPrint(row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="rr-pagination">
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onLimitChange" @current-change="onPageChange" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.rr-page { max-width: 1500px; }
.rr-page-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.rr-page-title { font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 4px 0; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; margin: 0; }
.rr-page-actions { display: flex; gap: 8px; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px; }
.rr-search { padding: 16px 20px; }
.rr-tabs-row { margin-bottom: 16px; }
.rr-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: fit-content; flex-wrap: wrap; }
.rr-tab { padding: 6px 16px; border-radius: var(--radius); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.rr-tab.active { color: white; background: var(--primary); font-weight: 500; }
.rr-pagination { padding: 12px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); }
:deep(.rr-clickable) { cursor: pointer; }
:deep(.rr-clickable:hover > td) { background: var(--bg-soft) !important; }
</style>