web/app/components/orders/OrdersTable.vue

<script setup>
import OrderRow from '@/components/orders/OrderRow.vue';

const orders = [
{
    id: 1,
    code: 'SO001',
    employee: 1,
    employee__name: 'Trần Thị B',
    customer: 1,
    customer__name: 'Nguyễn Văn A',
    customer__phone: '0901234567',
    total: '5200000.00',
    status: 1,
    status__name: 'Nháp',
    status__color: 'yellow',
    payment_status: 1,
    payment_status__name: 'Chưa thanh toán',
    payment_status__color: 'red',
    delivery_status: 1,
    delivery_status__name: 'Chờ xử lý',
    delivery_status__color: 'grey',
    order__products: [
      {
        id: 1,
        name: 'Kem chống nắng SPF 50+',
        unit_price: '280000.00',
        quantity: 10,
        discount: null,
        total: '2800000.00'
      },
      {
        id: 2,
        name: 'Serum Vitamin C 30ml',
        unit_price: '450000.00',
        quantity: 5,
        discount: 0.1,
        total: '2025000.00'
      },
      {
        id: 3,
        name: 'Son dưỡng môi vitamin E',
        unit_price: '75000.00',
        quantity: 5,
        discount: null,
        total: '375000.00'
      },
    ],
    create_time: '2026-02-11T08:51:04.587660+07:00'
  },
{
    id: 2,
    code: 'SO002',
    employee: 1,
    employee__name: 'Trần Thị B',
    customer: 3,
    customer__name: 'Lê Thị C',
    customer__phone: '0912345678',
    total: '8500000.00',
    status: 2,
    status__name: 'Đã xác nhận',
    status__color: 'blue',
    payment_status: 2,
    payment_status__name: 'Một phần',
    payment_status__color: 'orange',
    delivery_status: 2,
    delivery_status__name: 'Sẵn sàng',
    delivery_status__color: 'blue',
    order__products: [
      {
        id: 3,
        name: 'Mặt nạ collagen 10 miếng',
        unit_price: '320000.00',
        quantity: 15,
        discount: 0.05,
        total: '4560000.00'
      },
      {
        id: 4,
        name: 'Toner cân bằng da 200ml',
        unit_price: '180000.00',
        quantity: 20,
        discount: 0.1,
        total: '3240000.00'
      },
      {
        id: 5,
        name: 'Gel rửa mặt làm sạch sâu',
        unit_price: '140000.00',
        quantity: 5,
        discount: null,
        total: '700000.00'
      },
    ],
    create_time: '2026-04-06T09:10:09.587660+07:00'
  },
{
    id: 3,
    code: 'SO003',
    employee: 5,
    employee__name: 'Hoàng Văn E',
    customer: 4,
    customer__name: 'Phạm Văn D',
    customer__phone: '0923456703',
    total: '12300000.00',
    status: 3,
    status__name: 'Đang giao',
    status__color: 'orange',
    payment_status: 3,
    payment_status__name: 'Đã thanh toán',
    payment_status__color: 'green',
    delivery_status: 3,
    delivery_status__name: 'Hoàn thành',
    delivery_status__color: 'green',
    order__products: [
      {
        id: 6,
        name: 'Kem dưỡng ẩm ban đêm',
        unit_price: '380000.00',
        quantity: 20,
        discount: 0.05,
        total: '7220000.00'
      },
      {
        id: 7,
        name: 'Phấn nền BB cream',
        unit_price: '220000.00',
        quantity: 15,
        discount: null,
        total: '3300000.00'
      },
      {
        id: 8,
        name: 'Nước tẩy trang 3 trong 1',
        unit_price: '195000.00',
        quantity: 10,
        discount: 0.1,
        total: '1755000.00'
      },
    ],
    create_time: '2026-04-05T02:33:24.587660+07:00'
  },
{
    id: 4,
    code: 'SO004',
    employee: 1,
    employee__name: 'Trần Thị B',
    customer: 6,
    customer__name: 'Vũ Thị F',
    customer__phone: '0934835222',
    total: '6800000.00',
    status: 4,
    status__name: 'Hoàn thành',
    status__color: 'green',
    payment_status: 3,
    payment_status__name: 'Đã thanh toán',
    payment_status__color: 'green',
    delivery_status: 3,
    delivery_status__name: 'Hoàn thành',
    delivery_status__color: 'green',
    order__products: [
      {
        id: 9,
        name: 'Dầu gội thảo mộc 500ml',
        unit_price: '120000.00',
        quantity: 30,
        discount: 0.1,
        total: '3240000.00'
      },
      {
        id: 10,
        name: 'Sữa rửa mặt trà xanh 150ml',
        unit_price: '150000.00',
        quantity: 20,
        discount: 0.05,
        total: '2850000.00'
      },
      {
        id: 11,
        name: 'Son dưỡng môi vitamin E',
        unit_price: '75000.00',
        quantity: 10,
        discount: 0.05,
        total: '712500.00'
      },
    ],
    create_time: '2026-04-04T23:21:11.587660+07:00'
  },
]
</script>
<template>
  <div>
    <div class="card">
      <div class="card-content"></div>
    </div>
    <div class="card">
      <div class="card-content p-0">
        <p class="p-5 fs-17 font-semibold is-flex is-align-items-center is-gap-1">
          <Icon name="material-symbols:list-alt-outline-rounded" :size="22" />
          <span>Danh sách đơn hàng ({{ orders.length }})</span>
        </p>
        <table class="table is-fullwidth is-hoverable fs-14">
          <thead>
            <tr>
              <th>Đơn hàng</th>
              <th>Khách hàng</th>
              <th class="has-text-right">Tổng tiền</th>
              <th class="has-text-centered">Trạng thái</th>
              <th>Thanh toán</th>
              <th>Giao hàng</th>
              <th>Ngày tạo</th>
              <th>Thao tác</th>
            </tr>
          </thead>
          <tbody>
            <OrderRow 
              v-for="order in orders"
              :key="order.id"
              v-bind="order"
            />
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<style scoped>
th {
  font-weight: 600;
}
</style>