This commit is contained in:
Viet An
2026-05-14 15:37:58 +07:00
parent 4d37397ee4
commit 1f44f9e6bf
17 changed files with 670 additions and 324 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div
v-if="array || !enableTime"
v-if="timeRanges || !enableTime"
class="has-text-primary fixed-grid has-12-cols"
style="border-bottom: 2px solid var(--bulma-grey-80)"
>
@@ -8,61 +8,62 @@
<div
v-if="enableTime"
class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
style="row-gap: 0; column-gap: 1rem"
style="gap: 0.5rem 1rem"
>
<Caption
:title="lang === 'vi' ? 'Thời gian' : 'Time'"
type="has-text-orange"
/>
<div
v-for="v in array"
v-for="v in timeRanges"
:key="v.code"
:class="['is-flex is-align-items-center', v.code !== current && 'is-clickable']"
style="gap: 0.35rem"
@click="v.code !== current && changeOption(v)"
>
<span
v-if="v.code === current"
class="icon-text is-flex-wrap-nowrap font-semibold has-text-orange"
>
<span class="icon">
<Icon
name="material-symbols:check-rounded"
:size="22"
/>
</span>
<span style="text-wrap: nowrap">{{ v.name }}</span>
</span>
<span
v-else
class="icon-text font-semibold has-text-grey is-clickable"
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey-50'"
style="text-wrap: nowrap"
@click="changeOption(v)"
>
{{ v.name }}
</span>
<span
:class="[
'tag rounded-md w-5 h-6 fs-13',
v.code === current
? 'font-bold has-text-orange has-background-orange-90'
: 'font-medium has-text-grey-40 has-background-grey-90',
]"
>{{ v.count }}</span
>
</div>
<span
v-if="newDataAvailable"
class="has-text-danger is-italic fs-14 ml-2"
class="has-text-danger-50 px-3 py-1.5 has-background-danger-95 rounded-md is-italic fs-14"
> dữ liệu mới, vui lòng làm mới.</span
>
</div>
<div
class="cell is-col-span-5 is-flex is-align-items-center is-flex-wrap-wrap"
style="row-gap: 0; column-gap: 1rem"
style="gap: 0.25rem 0.5rem"
>
<Caption
:title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
:title="lang === 'vi' ? `Tìm ${this.store.viewport > 2 ? 'kiếm' : ''}` : 'Search'"
type="has-text-orange"
/>
<input
class="input is-small is-orange"
id="input"
type="text"
v-model="text"
:style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid var(--bulma-grey-80); max-width: 160px`"
@keyup="startSearch"
id="input"
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
class="input is-orange fs-12"
:style="{
maxWidth: '180px',
width: this.store.viewport === 1 ? '150px' : 'auto',
}"
/>
<div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
<div class="field has-addons is-flex-wrap-wrap is-align-items-center">
<p
v-if="importdata && $getEditRights()"
class="control"
@@ -174,14 +175,14 @@ export default {
data() {
return {
options: [
{ code: 0, name: this.lang === "vi" ? "Hôm nay" : "Today" },
{ code: 0, name: this.store.lang === "vi" ? "Hôm nay" : "Today" },
{ code: 1, name: "1D" },
{ code: 7, name: "7D" },
{ code: 30, name: "1M" },
{ code: 90, name: "3M" },
{ code: 180, name: "6M" },
{ code: 360, name: "1Y" },
{ code: 36000, name: this.lang === "vi" ? "Tất cả" : "All" },
{ code: 36000, name: this.store.lang === "vi" ? "Tất cả" : "All" },
],
showmodal: undefined,
current: 7,
@@ -189,11 +190,10 @@ export default {
timer: undefined,
text: undefined,
status: [{ code: 100, name: "Chọn" }],
array: undefined,
timeRanges: undefined,
enableAdd: true,
enableTime: true,
choices: [], // Sẽ được cập nhật động từ pagedata
viewport: this.store.viewport,
pagedata: undefined,
loading: false,
pollingInterval: null,
@@ -202,7 +202,7 @@ export default {
},
watch: {
pagename(newVal) {
pagename() {
this.updateSearchableFields();
},
},
@@ -211,7 +211,7 @@ export default {
// Cập nhật searchable fields ngay từ đầu
this.updateSearchableFields();
if (this.viewport < 5) {
if (this.store.viewport < 5) {
this.options = [
{ code: 0, name: "Hôm nay" },
{ code: 1, name: "1D" },
@@ -230,7 +230,7 @@ export default {
let filter = this.$copy(this.filter);
if (filter) {
//dynamic parameter
// dynamic parameter
for (const [key, value] of Object.entries(filter)) {
if (value.toString().indexOf("$") >= 0) {
filter[key] = this.store[value.replace("$", "")].id;
@@ -255,7 +255,7 @@ export default {
let f = {};
this.options.map((v) => {
f[`${v.code}`] = {
f[v.code] = {
type: "Count",
field: "create_time__date",
filter: v.filter,
@@ -268,16 +268,16 @@ export default {
try {
let rs = await this.$getapi([found]);
for (const [key, value] of Object.entries(rs[0].data.rows)) {
let found = this.$find(this.options, { code: Number(key) });
const found = this.$find(this.options, { code: Number(key) });
if (found) {
found.name = `${found.name} (${value})`;
found.count = value;
}
}
} catch (error) {
console.error("Error fetching data:", error);
}
this.array = this.$copy(this.options);
this.timeRanges = this.$copy(this.options);
},
mounted() {
@@ -380,7 +380,7 @@ export default {
this.text = undefined;
this.search = undefined;
}
this.$emit("option", this.$find(this.array, { code: this.current }));
this.$emit("option", this.$find(this.timeRanges, { code: this.current }));
},
doSearch() {