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-06-11 09:16:36 +07:00
parent 7325230280
commit 03f3112573
5 changed files with 228 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
app/components/datatable/DataTable.vue
View File

@@ -28,14 +28,14 @@
v-for="(v, i) in filters"
:key="i"
>
<div class="tags has-addons is-marginless">
<div class="tags has-addons">
<a
class="tag is-primary is-light is-marginless"
class="tag is-primary is-light"
@click="showCondition(v)"
>{{ v.label.indexOf(">") >= 0 ? $stripHtml(v.label, 30) : v.label }}</a
>
<a
class="tag is-delete is-marginless"
class="tag is-delete"
@click="removeFilter(i)"
></a>
</div>
@@ -51,7 +51,7 @@
</div>
</div>
<div
class="table-container mb-0"
class="table-container rounded mb-0"
ref="container"
id="docid"
>
@@ -124,6 +124,7 @@
@changepage="changePage"
/>
</div>
<!-- <pre class="fs-12">debug: pagename: {{ pagename }}</pre> -->
<Modal
v-if="showmodal"
v-bind="showmodal"
@@ -145,7 +146,6 @@ const {
$deleterow,
$empty,
$find,
$getdata,
$getEditRights,
$formatNumber,
$multiSort,
@@ -180,12 +180,6 @@ let tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
if (!Array.isArray(tablesetting)) {
tablesetting = Object.values(tablesetting);
}
// console.log("props.pagename", props.pagename);
// console.log("pagedata.tablesetting", pagedata.tablesetting);
// console.log("store.tablesetting", store.tablesetting);
// console.log("tablesetting", tablesetting);
// var tablesetting = $copy(store.tablesetting);
// const tablesettingObj = Object.fromEntries(tablesetting.map((v) => [v.code, v]));
var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
var filters = $copy(pagedata.filters || []);
var currentField;
@@ -357,142 +351,56 @@ const getStyle = function (field, record) {
if (field.maxwidth) val += ` max-width:${field.maxwidth}px; `;
return val;
};
const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
const getSettingStyle = function (name, field) {
if (!tablesetting || tablesetting.length === 0) {
// manual temp fix
tablesetting = [
{
id: 4,
code: "per-page",
name: "Số dòng trong 1 trang",
detail: "20",
},
{
id: 8,
code: "header-filter-color",
name: "Màu chữ khi áp dụng Filter",
detail: "#00cc66",
},
{
id: 10,
code: "background",
name: "Màu nền background",
detail: "#363636",
},
{
id: 11,
code: "table-background",
name: "Màu nền của bảng",
detail: "#ffffff",
},
{
id: 12,
code: "table-font-color",
name: "Mầu chữ trong bảng",
detail: "hsl(0, 0%, 14%)",
},
{
id: 13,
code: "table-font-size",
name: "Cỡ chữ trong bảng",
detail: "12",
},
{
id: 14,
code: "header-background",
name: "Màu nền tiêu đề",
detail: "var(--bulma-primary-soft)",
},
{
id: 15,
code: "header-font-color",
name: "Màu chữ tiêu đề",
detail: "var(--bulma-primary-40)",
},
{
id: 16,
code: "header-font-size",
name: "Cỡ chữ tiêu đề",
detail: "12",
},
{
id: 17,
code: "container-height",
name: "Chiều cao container",
detail: "38",
},
{
id: 18,
code: "header-arrow",
name: "Mũi tên trỏ xuống",
detail: "no",
},
{
id: 19,
code: "menu-width",
name: "Chiều rộng menu",
detail: "20.6",
},
{
id: 20,
code: "menu-min-height",
name: "Chiều cao menu (nhỏ nhất)",
detail: "32",
},
{
id: 21,
code: "menu-max-height",
name: "Chiều cao menu (lớn nhất)",
detail: "37",
},
{
id: 22,
code: "show-menu",
name: "Hiển thị menu",
detail: "yes",
},
{
id: 23,
code: "note",
name: "Ghi chú",
detail: "@",
},
{
id: 24,
code: "td-border",
name: "Đường viền",
detail: "border: 1px solid #dbdbdb;",
},
];
/** @type {CSSStyleDeclaration} */
let styles;
switch (name) {
case "container":
styles = {
minHeight: `${getDetail("container-height")}rem`,
};
break;
case "table":
styles = {
fontSize: `${getDetail("table-font-size")}px`,
backgroundColor: getDetail("table-background"),
color: getDetail("table-font-color"),
};
break;
case "header":
styles = {
backgroundColor: getDetail("header-background"),
borderColor: getDetail("header-border-color"),
minWidth: `${field.minwidth}px`,
maxWidth: `${field.maxwidth}px`,
};
break;
case "menu":
const width = field?.menuwidth || getDetail("menu-width");
styles = {
overflow: "auto",
width: `${width}rem`,
minHeight: `${getDetail("menu-min-height")}rem`,
maxHeight: `${getDetail("menu-max-height")}rem`,
};
break;
case "dropdown":
const isFiltered = filters.find((v) => v.name === field.name);
styles = {
fontSize: `${getDetail("header-font-size")}px`,
color: getDetail(isFiltered ? "header-filter-color" : "header-font-color"),
};
default:
break;
}
let value = "";
if (name === "container") {
value = "min-height:" + tablesetting.find((v) => v.code === "container-height").detail + "rem; ";
} else if (name === "table") {
value += "background-color:" + tablesetting.find((v) => v.code === "table-background").detail + "; ";
value += "font-size:" + tablesetting.find((v) => v.code === "table-font-size").detail + "px;";
value += "color:" + tablesetting.find((v) => v.code === "table-font-color").detail + "; ";
} else if (name === "header") {
value += "background-color:" + tablesetting.find((v) => v.code === "header-background").detail + "; ";
if (field.minwidth) value += " min-width: " + field.minwidth + "px; ";
if (field.maxwidth) value += " max-width: " + field.maxwidth + "px; ";
} else if (name === "menu") {
let arg = tablesetting.find((v) => v.code === "menu-width").detail;
arg = field ? (field.menuwidth ? field.menuwidth : arg) : arg;
value += "width:" + arg + "rem; ";
value += "min-height:" + tablesetting.find((v) => v.code === "menu-min-height").detail + "rem; ";
value += "max-height:" + tablesetting.find((v) => v.code === "menu-max-height").detail + "rem; ";
value += "overflow:auto; ";
} else if (name === "dropdown") {
value += "font-size:" + tablesetting.find((v) => v.code === "header-font-size").detail + "px; ";
let found = filters.find((v) => v.name === field.name);
found
? (value += "color:" + tablesetting.find((v) => v.code === "header-filter-color").detail + "; ")
: (value += "color:" + tablesetting.find((v) => v.code === "header-font-color").detail + "; ");
}
return value;
return styles;
};
function changePage(page) {
currentPage = page;
updateShow();
@@ -628,8 +536,8 @@ const updateData = async function (newVal) {
//change attribute
fields = $copy(newVal.columns);
let _fields = fields.filter((v) => v.show);
data.map((v) => {
_fields.map((x) => (v[`${x.name}color`] = getStyle(x, v)));
data.forEach((v) => {
_fields.forEach((x) => (v[`${x.name}color`] = getStyle(x, v)));
});
return updateShow();
}
@@ -647,7 +555,7 @@ const updateData = async function (newVal) {
} else fields = $copy(pagedata.fields);
if (newVal.data || newVal.fields) {
let copy = $copy(newVal.data || data);
this.data = $calculateData(copy, fields);
data = $calculateData(copy, fields);
let fields = fields.filter((v) => v.show);
data.map((v) => {
fields.map((x) => (v[`${x.name}color`] = getStyle(x, v)));
@@ -678,6 +586,9 @@ const tableStyle = getSettingStyle("table");
setTimeout(() => updateShow(), 200);
</script>
<style scoped>
th a {
color: inherit;
}
:deep(.table tbody tr:hover td, .table tbody tr:hover th) {
--bulma-table-row-hover-background-color: var(--bulma-scheme-main-ter);
background-color: var(--bulma-table-row-hover-background-color);

14
app/components/datatable/DataView.vue
View File

@@ -1,5 +1,6 @@
<template>
<TimeOption
v-if="timeopt"
v-bind="{
pagename: vpagename,
api: api,
@@ -16,20 +17,18 @@
@manual-refresh="manualRefresh"
@refresh-data="refreshData"
@import="openImportModal"
class="mb-3"
v-if="timeopt"
></TimeOption>
/>
<DataTable
v-if="pagedata"
v-bind="{ pagename: vpagename }"
@edit="edit"
@insert="insert"
@dataevent="dataEvent"
v-if="pagedata"
/>
<Modal
@close="showmodal = undefined"
v-bind="showmodal"
v-if="showmodal"
v-bind="showmodal"
@close="showmodal = undefined"
/>
</template>
@@ -38,6 +37,7 @@ import TimeOption from "~/components/datatable/TimeOption";
import { useStore } from "~/stores/index";
// [FIX] Thêm onActivated, onDeactivated để xử lý KeepAlive
import { ref, watch, onBeforeUnmount, onActivated, onDeactivated } from "vue";
import DataTable from "~/components/datatable/DataTable.vue";
const emit = defineEmits(["modalevent", "dataevent", "dataUpdated"]);
const store = useStore();
@@ -408,7 +408,7 @@ const getApi = async () => {
pagedata.value = $setpage(vpagename, row, obj);
const copy = $clone(pagedata.value);
copy.data = data;
copy.update = { data: data };
copy.update = { data };
store.commit(vpagename, copy);
};

43
app/components/datatable/TableSetting.vue
View File

@@ -8,7 +8,7 @@
<input
class="input fs-13"
type="text"
:value="tablesetting.find((v) => v.code === 'table-font-size').detail"
:value="getDetail('table-font-size')"
@change="changeSetting($event.target.value, 'table-font-size')"
/>
</p>
@@ -21,7 +21,7 @@
<input
class="input fs-13"
type="text"
:value="tablesetting.find((v) => v.code === 'header-font-size').detail"
:value="getDetail('header-font-size')"
@change="changeSetting($event.target.value, 'header-font-size')"
/>
</p>
@@ -34,7 +34,7 @@
<input
class="input fs-13"
type="text"
:value="tablesetting.find((v) => v.code === 'per-page').detail"
:value="getDetail('per-page')"
@change="changeSetting($event.target.value, 'per-page')"
/>
</p>
@@ -46,14 +46,14 @@
<p class="control is-flex is-gap-1">
<input
type="color"
:value="tablesetting.find((v) => v.code === 'table-background').detail"
:value="getDetail('table-background')"
@change="changeSetting($event.target.value, 'table-background')"
/>
<input
class="input fs-13"
type="text"
placeholder="#f29384, var(--bulma-blue)"
:value="tablesetting.find((v) => v.code === 'table-background').detail"
:value="getDetail('table-background')"
@change="changeSetting($event.target.value, 'table-background')"
/>
</p>
@@ -65,14 +65,14 @@
<p class="control is-flex is-gap-1">
<input
type="color"
:value="tablesetting.find((v) => v.code === 'table-font-color').detail"
:value="getDetail('table-font-color')"
@change="changeSetting($event.target.value, 'table-font-color')"
/>
<input
class="input fs-13"
type="text"
placeholder="#f29384, var(--bulma-blue)"
:value="tablesetting.find((v) => v.code === 'table-font-color').detail"
:value="getDetail('table-font-color')"
@change="changeSetting($event.target.value, 'table-font-color')"
/>
</p>
@@ -84,14 +84,14 @@
<p class="control is-flex is-gap-1">
<input
type="color"
:value="tablesetting.find((v) => v.code === 'header-font-color').detail"
:value="getDetail('header-font-color')"
@change="changeSetting($event.target.value, 'header-font-color')"
/>
<input
class="input fs-13"
type="text"
placeholder="#f29384, var(--bulma-blue)"
:value="tablesetting.find((v) => v.code === 'header-font-color').detail"
:value="getDetail('header-font-color')"
@change="changeSetting($event.target.value, 'header-font-color')"
/>
</p>
@@ -110,7 +110,7 @@
class="input fs-13 h-full"
type="text"
placeholder="#f29384, var(--bulma-blue)"
:value="tablesetting.find((v) => v.code === 'header-background').detail"
:value="getDetail('header-background')"
@change="changeSetting($event.target.value, 'header-background')"
/>
@@ -118,7 +118,7 @@
ref="renderedHeaderBg"
class="is-hidden"
:style="{
backgroundColor: tablesetting.find((v) => v.code === 'header-background').detail,
backgroundColor: getDetail('header-background'),
}"
></div>
</div>
@@ -130,14 +130,14 @@
<p class="control is-flex is-gap-1">
<input
type="color"
:value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
:value="getDetail('header-filter-color')"
@change="changeSetting($event.target.value, 'header-filter-color')"
/>
<input
class="input fs-13"
type="text"
placeholder="#f29384, var(--bulma-blue)"
:value="tablesetting.find((v) => v.code === 'header-filter-color').detail"
:value="getDetail('header-filter-color')"
@change="changeSetting($event.target.value, 'header-filter-color')"
/>
</p>
@@ -150,11 +150,7 @@
<input
class="input fs-13"
type="text"
:value="
tablesetting.find((v) => v.code === 'td-border')
? tablesetting.find((v) => v.code === 'td-border').detail
: undefined
"
:value="getDetail('td-border')"
@change="changeSetting($event.target.value, 'td-border')"
/>
</p>
@@ -175,15 +171,20 @@ const props = defineProps({
});
const emit = defineEmits(["close"]);
const { $copy, $clone, $empty, $store } = useNuxtApp();
var pagedata = $clone($store[props.pagename]);
let pagedata = $clone($store[props.pagename]);
if (!pagedata.tablesetting) {
pagedata.tablesetting = [];
}
if (!Array.isArray(pagedata.tablesetting)) {
pagedata.tablesetting = Object.values(pagedata.tablesetting);
}
const getDetail = (code) => tablesetting.find((v) => v.code === code)?.detail || "";
const errors = ref([]);
let radioNote = "no";
var tablesetting = pagedata.tablesetting;
let found = tablesetting.find((v) => v.code === "note");
if (found ? found.detail !== "@" : false) radioNote = "yes";
let found = getDetail("note");
if (found !== "@") radioNote = "yes";
function changeSetting(value, code) {
if (code === "note" && $empty(value)) return;

268
app/components/datatable/TimeOption.vue
View File

@@ -1,157 +1,164 @@
<template>
<div
v-if="timeRanges || !enableTime"
class="has-text-primary fixed-grid has-12-cols"
style="border-bottom: 2px solid var(--bulma-grey-lighter)"
class="block is-flex is-justify-content-space-between is-flex-wrap-wrap"
style="gap: 0.5rem 0"
>
<div class="grid mb-3">
<div
v-if="enableTime"
class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
style="gap: 0.5rem 1rem"
>
<Caption
:title="lang === 'vi' ? 'Thời gian' : 'Time'"
type="has-text-orange"
/>
<div
<div
v-if="enableTime"
class="is-flex is-align-items-center is-flex-wrap-wrap"
style="gap: 0.5rem 0.75rem"
>
<span class="icon-text is-flex-wrap-nowrap font-semibold has-text-orange">
<span class="icon">
<Icon
name="material-symbols:history-rounded"
:size="18"
/>
</span>
<span
v-if="this.store.viewport > 2"
style="text-wrap: nowrap"
>{{ lang === "vi" ? "Thời gian" : "Time" }}</span
>
</span>
<div class="buttons has-addons">
<button
v-for="v in timeRanges"
:key="v.code"
:class="['is-flex is-align-items-center', v.code !== current && 'is-clickable']"
style="gap: 0.35rem"
:class="['timeRange button is-small fs-13 rounded-md is-light', v.code === current && 'is-orange']"
style="gap: 0.4rem"
@click="v.code !== current && changeOption(v)"
>
<span
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium has-text-grey'"
:class="v.code === current ? 'font-bold has-text-orange' : 'font-medium'"
style="text-wrap: nowrap"
>
{{ 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 has-background-grey-white-ter',
'count rounded-md h-full px-1',
v.code === current ? 'font-bold has-text-orange has-background-orange-90' : 'font-medium has-text-grey',
]"
>{{ v.count }}</span
>
</div>
<span
v-if="newDataAvailable"
class="has-text-danger-50 px-3 py-1.5 has-background-danger-95 rounded-md is-italic fs-14"
>Có dữ liệu mới, vui lòng làm mới.</span
>
</button>
</div>
<div
class="cell is-col-span-5 is-flex is-align-items-center is-flex-wrap-wrap"
style="gap: 0.25rem 0.5rem"
<span
v-if="newDataAvailable"
class="has-text-danger-50 px-3 py-1.5 has-background-danger-95 rounded-md is-italic fs-14"
>
<Caption
:title="lang === 'vi' ? `Tìm ${this.store.viewport > 2 ? 'kiếm' : ''}` : 'Search'"
type="has-text-orange"
/>
<input
id="input"
type="text"
v-model="text"
@keyup="startSearch"
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
class="input is-orange fs-12"
:style="{
maxWidth: '150px',
width: this.store.viewport === 1 ? '150px' : 'auto',
}"
/>
<div class="field has-addons is-flex-wrap-wrap is-align-items-center">
<p
v-if="importdata && $getEditRights()"
class="control"
Có dữ liệu mới, vui lòng làm mới.
</span>
</div>
<div
:class="['is-flex is-align-items-center is-flex-wrap-wrap', !enableTime && 'ml-auto']"
style="gap: 0.25rem 0.5rem"
>
<Caption
:title="lang === 'vi' ? `Tìm ${this.store.viewport > 2 ? 'kiếm' : ''}` : 'Search'"
type="has-text-orange"
/>
<input
id="input"
type="text"
v-model="text"
@keyup="startSearch"
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
class="input is-orange fs-12 max-w-50"
:style="{
width: this.store.viewport === 1 ? '150px' : 'auto',
}"
/>
<div class="field has-addons is-flex-wrap-wrap is-align-items-center">
<p
v-if="importdata && $getEditRights()"
class="control"
>
<button
class="button is-ghost has-text-orange fs-14"
@click="openImport()"
>
<button
class="button is-ghost has-text-orange fs-14"
@click="openImport()"
>
<span class="icon">
<Icon
name="material-symbols:upload-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Nhập dữ liệu
<span class="icon">
<Icon
name="material-symbols:upload-rounded"
:size="22"
/>
</span>
</p>
<p
v-if="enableAdd && $getEditRights()"
class="control"
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('add')"
>
<span class="icon">
<Icon
name="material-symbols:add-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Thêm mới
Nhập dữ liệu
</span>
</p>
<p
v-if="enableAdd && $getEditRights()"
class="control"
>
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('add')"
>
<span class="icon">
<Icon
name="material-symbols:add-rounded"
:size="22"
/>
</span>
</p>
<p class="control">
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('excel')"
>
<span class="icon">
<Icon
name="mdi:microsoft-excel"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Xuất Excel
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Thêm mới
</span>
</p>
<p class="control">
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('excel')"
>
<span class="icon">
<Icon
name="mdi:microsoft-excel"
:size="22"
/>
</span>
</p>
<p class="control">
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('refresh-data')"
>
<span class="icon">
<Icon
name="material-symbols:refresh-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Làm mới
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Xuất Excel
</span>
</p>
<p class="control">
<button
class="button is-ghost has-text-orange fs-14"
@click="$emit('refresh-data')"
>
<span class="icon">
<Icon
name="material-symbols:refresh-rounded"
:size="22"
/>
</span>
</p>
<Icon
v-if="loading"
name="svg-spinners:180-ring-with-bg"
:size="22"
/>
</div>
</button>
<span
class="tooltiptext has-background-orange-soft has-text-orange-bold"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>
Làm mới
</span>
</p>
<Icon
v-if="loading"
name="svg-spinners:180-ring-with-bg"
:size="22"
/>
</div>
</div>
<Modal
@@ -443,3 +450,8 @@ export default {
},
};
</script>
<style scoped>
.timeRange.is-orange:hover .count {
background-color: var(--bulma-orange-85) !important;
}
</style>