erp/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Viet An
2026-04-14 22:44:52 +07:00
parent 1d30ca3408
commit e5b80124fc
23 changed files with 1045 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/components/orders/OrdersTable.vue
View File

@@ -3,6 +3,10 @@ import OrderRow from '@/components/orders/OrderRow.vue';
import SelectedOrder from '@/components/orders/SelectedOrder.vue';
import { pull } from 'es-toolkit';
const props = defineProps({
viewMode: String
});
const { $dayjs } = useNuxtApp();
const orders = [
@@ -480,7 +484,7 @@ function toggleStatus(id) {
</script>
<template>
<div>
<div class="card">
<div class="card is-clipped">
<div class="card-content">
<div class="is-flex is-gap-2 is-align-items-center">
<div class="field is-flex-grow-1 m-0">
@@ -556,37 +560,48 @@ function toggleStatus(id) {
<div class="fixed-grid has-3-cols">
<div class="grid">
<div :class="['cell', selectedOrder ? 'is-col-span-2' : 'is-col-span-3']">
<div class="card">
<div class="card is-clipped">
<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 ({{ filteredOrders.length }})</span>
</p>
<table class="table is-fullwidth is-hoverable fs-13">
<thead>
<tr>
<th class="font-semibold">Đơn hàng</th>
<th class="font-semibold">Khách hàng</th>
<th class="font-semibold has-text-right">Tổng tiền</th>
<th class="font-semibold has-text-centered">Trạng thái</th>
<th class="font-semibold">Thanh toán</th>
<th class="font-semibold">Giao hàng</th>
<th class="font-semibold">Ngày tạo</th>
<th class="font-semibold">Thao tác</th>
</tr>
</thead>
<tbody>
<OrderRow
v-for="order in filteredOrders"
:key="order.id"
v-bind="{ order, selected: order.id === selectedOrder?.id }"
@selectOrder="(id) => {
selectedOrder = filteredOrders.find(order => order.id === id);
}"
@unselect="selectedOrder = null"
/>
</tbody>
</table>
<template v-if="viewMode === 'list'">
<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 ({{ filteredOrders.length }})</span>
</p>
<table class="table is-fullwidth is-hoverable fs-13">
<thead>
<tr>
<th class="font-semibold">Đơn hàng</th>
<th class="font-semibold">Khách hàng</th>
<th class="font-semibold has-text-right">Tổng tiền</th>
<th class="font-semibold has-text-centered">Trạng thái</th>
<th class="font-semibold">Thanh toán</th>
<th class="font-semibold">Giao hàng</th>
<th class="font-semibold">Ngày tạo</th>
<th class="font-semibold">Thao tác</th>
</tr>
</thead>
<tbody>
<OrderRow
v-for="order in filteredOrders"
:key="order.id"
v-bind="{ order, selected: order.id === selectedOrder?.id }"
@selectOrder="(id) => {
selectedOrder = filteredOrders.find(order => order.id === id);
}"
@unselect="selectedOrder = null"
/>
</tbody>
</table>
</template>
<OrdersKanban
v-else
:orders="filteredOrders"
:statuses="statuses"
@selectOrder="(id) => {
selectedOrder = filteredOrders.find(order => order.id === id);
}"
@unselect="selectedOrder = null"
/>
</div>
</div>
</div>