135 lines
4.1 KiB
Vue
135 lines
4.1 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
const store = useStore()
|
|
const { $connectWebSocket, $subscribe } = useNuxtApp()
|
|
const { dealer } = store
|
|
const notes = ref([])
|
|
const isLoading = ref(true)
|
|
|
|
function navigateTo(productId) {
|
|
if (!productId) return
|
|
window.dispatchEvent(new CustomEvent('navigateToProduct', { detail: { productId } }))
|
|
}
|
|
|
|
function handleWsMessageForNotes({ detail: response }) {
|
|
if (response.type !== 'realtime_update') return
|
|
const { name, change_type, record } = response.payload;
|
|
if (name.toLowerCase() !== 'product_note') return;
|
|
|
|
if (dealer?.id && record.ref__cart__dealer !== dealer.id) {
|
|
return;
|
|
}
|
|
|
|
let newNotes = [...notes.value]
|
|
const existingNoteIndex = newNotes.findIndex(n => n.id === record.id)
|
|
|
|
if (change_type === 'created') {
|
|
if (existingNoteIndex === -1) {
|
|
newNotes.push(record)
|
|
}
|
|
} else if (change_type === 'updated') {
|
|
if (existingNoteIndex > -1) {
|
|
newNotes[existingNoteIndex] = { ...newNotes[existingNoteIndex], ...record }
|
|
}
|
|
} else if (change_type === 'deleted') {
|
|
if (existingNoteIndex > -1) {
|
|
newNotes.splice(existingNoteIndex, 1)
|
|
}
|
|
}
|
|
|
|
notes.value = newNotes.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
|
|
}
|
|
|
|
onMounted(() => {
|
|
$connectWebSocket();
|
|
const filter = dealer?.id ? { ref__cart__dealer: dealer.id } : undefined;
|
|
|
|
$subscribe('productnote', filter, (initialData) => {
|
|
if (initialData && initialData.rows) {
|
|
notes.value = initialData.rows.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
|
|
}
|
|
isLoading.value = false;
|
|
});
|
|
|
|
window.addEventListener('ws_message', handleWsMessageForNotes);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('ws_message', handleWsMessageForNotes);
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="is-flex is-flex-direction-column has-background-white" style="height: 100%; overflow: hidden;">
|
|
<!-- Loading -->
|
|
<div v-if="isLoading" class="is-flex is-flex-grow-1 is-justify-content-center is-align-items-center p-5">
|
|
<div class="has-text-centered">
|
|
<progress class="progress is-info" max="100" style="width: 100px;"></progress>
|
|
<p class="has-text-grey is-size-7 mt-2">Đang tải...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div v-else-if="notes.length === 0" class="is-flex is-flex-grow-1 is-justify-content-center is-align-items-center p-5">
|
|
<p class="has-text-grey-light is-size-7">Chưa có ghi chú</p>
|
|
</div>
|
|
|
|
<!-- Notes Table -->
|
|
<div v-else class="is-flex-grow-1" style="overflow-y: auto; overflow-x: hidden; min-height: 0;">
|
|
<table class="table is-fullwidth is-hoverable is-narrow is-size-7 mb-0">
|
|
<thead style="position: sticky; top: 0px;">
|
|
<tr>
|
|
<th>Sản phẩm</th>
|
|
<th>Nội dung</th>
|
|
<th style="min-width: max-content; text-wrap: nowrap">Người tạo</th>
|
|
<th class="has-text-right">Thời gian</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="note in notes" :key="note.id" class="is-clickable" @click="navigateTo(note.ref)">
|
|
<td>
|
|
<span class="tag is-link is-light is-small">{{ note.ref__trade_code }}</span>
|
|
</td>
|
|
<td style="white-space: pre-wrap; word-break: break-word;">{{ note.detail }}</td>
|
|
<td>{{ note.username || note.user__username }}</td>
|
|
<td class="has-text-right" style="white-space: nowrap;">
|
|
{{ new Date(note.create_time).toLocaleString('vi-VN') }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
#noteHistory.docking-panel {
|
|
left: 10px;
|
|
top: 10px;
|
|
width: 450px;
|
|
height: 400px;
|
|
resize: both;
|
|
overflow: hidden;
|
|
|
|
.docking-panel-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
border-bottom: none;
|
|
text-transform: none;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.docking-panel-scroll {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-bottom: 20px;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.table.is-narrow td, .table.is-narrow th {
|
|
padding: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
</style> |