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-05-08 15:11:02 +07:00
parent ad2d1fbfb6
commit 6f247db4b5
7 changed files with 424 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/Caption.vue
View File

@@ -1,19 +1,13 @@
<template>
<span :class="`icon-text fsb-${props.size || 17} ${props.type || 'has-text-primary'}`">
<span>{{ title }}</span>
<SvgIcon
id="ignore"
v-bind="{
name: 'right.svg',
type: props.type ? props.type.replace('has-text-', '') : null,
size: (props.size >= 30 ? props.size * 0.7 : props.size) || 20,
alt: 'Mũi tên chỉ hướng',
}"
></SvgIcon>
<span :class="`icon-text is-flex-wrap-nowrap font-semibold fs-${props.size || 16} ${props.type || ''}`">
<span style="text-wrap: nowrap">{{ title }}</span>
<span class="icon">
<Icon name="material-symbols:arrow-forward-ios-rounded" />
</span>
</span>
</template>
<script setup>
var props = defineProps({
const props = defineProps({
type: String,
size: Number,
title: String,

468
app/components/datatable/ContextMenu.vue
View File

@@ -1,203 +1,262 @@
<template>
<span class="tooltip">
<a
class="mr-4"
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
>
<SvgIcon
v-bind="{
name: 'az.svg',
type: checkFilter() ? 'grey' : 'primary',
size: 22,
}"
></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
v-html="'Sắp xếp tăng dần'"
></span>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
>
<SvgIcon
v-bind="{
name: 'az.svg',
type: checkFilter() ? 'grey' : 'primary',
size: 22,
}"
></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Sắp xếp giảm dần</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="moveLeft()"
>
<SvgIcon v-bind="{ name: 'left5.png', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Chuyển cột sang trái</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="moveRight()"
>
<SvgIcon v-bind="{ name: 'right5.png', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Chuyển cột sang phải</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="resizeWidth()"
>
<SvgIcon v-bind="{ name: 'thick.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Tăng độ rộng cột</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="resizeWidth(true)"
>
<SvgIcon v-bind="{ name: 'thin.svg', type: 'primary', size: 23 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Giảm độ rộng cột</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="hideField()"
>
<SvgIcon v-bind="{ name: 'eye-off.svg', type: 'primary', size: 23 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Ẩn cột</span
>
</span>
<!-- <template v-if="store.login ? store.login.is_admin : false"> -->
<span class="tooltip">
<a
class="mr-4"
@click="currentField.mandatory ? false : doRemove()"
>
<SvgIcon v-bind="{ name: 'bin.svg', type: 'primary', size: 23 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Xóa cột</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
:class="currentField.format === 'number' ? null : 'has-text-grey-light'"
@click="currentField.format === 'number' ? $emit('modalevent', { name: 'copyfield', data: currentField }) : false"
>
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Sao chép cột</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="fieldList()"
>
<SvgIcon v-bind="{ name: 'menu4.png', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Danh sách cột</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="createField()"
>
<SvgIcon v-bind="{ name: 'add.png', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Tạo cột mới</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="tableOption()"
>
<SvgIcon v-bind="{ name: 'more.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Tùy chọn bảng</span
>
</span>
<span class="tooltip">
<a
class="mr-4"
@click="saveSetting()"
>
<SvgIcon v-bind="{ name: 'save.svg', type: 'primary', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
>Lưu thiết lập</span
>
</span>
<!-- </template> -->
<div class="panel-tabs mb-2">
<a
v-for="(v, i) in getMenu().filter((x) =>
currentField.format === 'number'
? currentField.formula
? true
: x.code !== 'formula'
: !['filter', 'formula'].find((y) => y === x.code),
)"
:key="i"
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
@click="changeTab(v)"
>
{{ v.name }}
</a>
<div class="field has-addons is-justify-content-center">
<p class="control">
<button
class="button is-light is-primary"
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
>
<span class="icon">
<Icon
name="mdi:sort-alphabetical-ascending"
:size="22"
:class="checkFilter() && 'has-text-grey-light'"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Sắp xếp tăng dần</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'za' })"
>
<span class="icon">
<Icon
name="mdi:sort-alphabetical-descending"
:size="22"
:class="checkFilter() && 'has-text-grey-light'"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Sắp xếp giảm dần</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="moveLeft()"
>
<span class="icon">
<Icon
name="material-symbols:arrow-back-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Chuyển cột sang trái</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="moveRight()"
>
<span class="icon">
<Icon
name="material-symbols:arrow-forward-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Chuyển cột sang phải</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="resizeWidth()"
>
<span class="icon">
<Icon
name="fluent:arrow-fit-16-regular"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Tăng độ rộng cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="resizeWidth(true)"
>
<span class="icon">
<Icon
name="fluent:arrow-fit-in-16-regular"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Giảm độ rộng cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="hideField()"
>
<span class="icon">
<Icon
name="material-symbols:visibility-off-outline-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Ẩn cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="currentField.mandatory ? false : doRemove()"
>
<span class="icon">
<Icon
name="material-symbols:delete-outline-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Xóa cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
:class="currentField.format === 'number' ? null : 'has-text-grey-light'"
@click="
currentField.format === 'number' ? $emit('modalevent', { name: 'copyfield', data: currentField }) : false
"
>
<span class="icon">
<Icon
name="material-symbols:content-copy-outline-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Sao chép cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="fieldList()"
>
<span class="icon">
<Icon
name="material-symbols:menu-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Danh sách cột</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="createField()"
>
<span class="icon">
<Icon
name="material-symbols:add-2-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Tạo cột mới</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="tableOption()"
>
<span class="icon">
<Icon
name="material-symbols:settings-outline-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>Tùy chọn bảng</span
>
</p>
<p class="control">
<button
class="button is-light is-primary"
@click="saveSetting()"
>
<span class="icon">
<Icon
name="material-symbols:save-outline-rounded"
:size="22"
/>
</span>
</button>
<span
class="tooltiptext"
style="top: 110%; bottom: unset; min-width: max-content; left: -45px"
>Lưu thiết lập</span
>
</p>
</div>
<div class="tabs is-toggle">
<ul class="is-flex-grow-0 mx-auto">
<li
v-for="(v, i) in getMenu().filter((x) =>
currentField.format === 'number'
? currentField.formula
? true
: x.code !== 'formula'
: !['filter', 'formula'].find((y) => y === x.code),
)"
:key="i"
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
@click="changeTab(v)"
>
<a class="px-4 py-1.5">{{ v.name }}</a>
</li>
</ul>
</div>
<div v-if="currentTab === 'detail'">
<p class="fs-14 mt-3">
@@ -210,7 +269,7 @@
></SvgIcon>
<span
class="tooltiptext"
style="top: 100%; bottom: unset; min-width: max-content; left: 25px"
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
>Copy</span
>
</span>
@@ -574,3 +633,12 @@ function resizeWidth(minus) {
updateFields(currentField);
}
</script>
<style lang="css" scoped>
p.control {
flex-grow: 1;
> button {
width: 100%;
}
}
</style>

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

@@ -64,7 +64,11 @@
@click="showField(field)"
:style="field.dropStyle"
>
<a v-if="field.label.indexOf('<') < 0">{{ field.label }}</a>
<a
v-if="field.label.indexOf('<') < 0"
class="has-text-white font-semibold"
>{{ field.label }}</a
>
<a v-else>
<component
:is="dynamicComponent(field.label)"
@@ -156,7 +160,13 @@ var currentPage = 1;
var displayFields = ref([]);
var displayData = [];
var pagedata = store[props.pagename];
var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
console.log("props.pagename", props.pagename);
console.log("store", toRaw(store));
console.log("store[props.pagename]", toRaw(store[props.pagename]));
console.log("pagedata.tablesetting", toRaw(pagedata.tablesetting)); // table-font-size is 13
console.log("store.tablesetting", toRaw(store.tablesetting)); // table-font-size is 12
// var tablesetting = $copy(pagedata.tablesetting || store.tablesetting);
var tablesetting = $copy(store.tablesetting);
var perPage = Number($find(tablesetting, { code: "per-page" }, "detail")) || 20;
var filters = $copy(pagedata.filters || []);
var currentField;

9
app/components/datatable/ScrollBox.vue
View File

@@ -6,7 +6,10 @@
<div
v-for="(v, i) in rows"
:key="i"
:class="['field is-grouped py-1 my-0', i !== rows.length - 1 && 'border-bottom']"
class="field is-grouped py-1 my-0"
:style="{
borderBottom: i !== rows.length - 1 && '1px solid red',
}"
>
<p
class="control is-expanded py-0 fs-14 hyperlink"
@@ -18,6 +21,10 @@
v-if="checked[i] && notick !== true"
>
<SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon>
<Icon
name="material-symbols:check-rounded"
:size="15"
/>
</span>
</p>
<p

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

@@ -1,147 +1,144 @@
<template>
<div
class="pb-1"
style="border-bottom: 2px solid #3c5b63"
v-if="array || !enableTime"
class="has-text-primary fixed-grid has-12-cols"
style="border-bottom: 2px solid var(--bulma-grey-80)"
>
<div class="columns mx-0 mb-0">
<div class="grid mb-3">
<div
class="column is-8 px-0 pb-0"
v-if="enableTime"
class="cell is-col-span-7 is-flex is-align-items-center is-flex-wrap-wrap"
style="row-gap: 0.5rem; column-gap: 1rem"
>
<div class="field is-grouped is-grouped-multiline mb-0">
<div class="control mb-0">
<Caption
v-bind="{
title: lang === 'vi' ? 'Thời gian' : 'Time',
type: 'has-text-warning',
}"
/>
</div>
<div
class="control mb-0"
v-for="v in array"
:key="v.code"
>
<span
class="icon-text fsb-16 has-text-warning px-1"
v-if="v.code === current"
>
<SvgIcon v-bind="{ name: 'tick.png', size: 20 }"></SvgIcon>
<span>{{ v.name }}</span>
</span>
<span
class="icon-text has-text-grey hyperlink px-1 fsb-16"
@click="changeOption(v)"
v-else
>{{ v.name }}</span
>
</div>
<Caption
:title="lang === 'vi' ? 'Thời gian' : 'Time'"
type="has-text-orange"
/>
<div
v-for="v in array"
:key="v.code"
>
<span
v-if="newDataAvailable"
class="has-text-danger is-italic is-size-6 ml-2"
>Có dữ liệu mới, vui lòng làm mới.</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"
style="text-wrap: nowrap"
@click="changeOption(v)"
>
{{ v.name }}
</span>
</div>
<span
v-if="newDataAvailable"
class="has-text-danger is-italic is-size-6 ml-2"
>Có dữ liệu mới, vui lòng làm mới.</span
>
</div>
<div class="column is-4 px-0">
<div class="field is-grouped is-grouped-multiline mb-0">
<div class="control mb-0">
<Caption
v-bind="{
type: 'has-text-warning',
title: lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search',
}"
/>
</div>
<div class="control mb-0">
<input
class="input is-small"
type="text"
v-model="text"
:style="`${viewport === 1 ? 'width:150px;' : ''} border: 1px solid #BEBEBE;`"
@keyup="startSearch"
id="input"
:placeholder="lang === 'vi' ? 'Nhập từ khóa...' : 'Enter keyword...'"
/>
</div>
<div class="control mb-0">
<span
class="tooltip"
v-if="importdata && $getEditRights()"
>
<a
class="mr-2"
@click="openImport()"
>
<SvgIcon
v-bind="{
name: 'upload.svg',
type: 'findata',
size: 22,
}"
></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>
{{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
</span>
</span>
<span
class="tooltip"
v-if="enableAdd && $getEditRights()"
>
<a
class="mr-2"
@click="$emit('add')"
>
<SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
>
</span>
<span class="tooltip">
<a
class="mr-2"
@click="$emit('excel')"
>
<SvgIcon v-bind="{ name: 'excel.png', type: 'findata', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>{{ lang === "vi" ? "Xuất excel" : "Export excel" }}</span
>
</span>
<span class="tooltip">
<a @click="$emit('refresh-data')">
<SvgIcon v-bind="{ name: 'refresh.svg', type: 'findata', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>{{ lang === "vi" ? "Làm mới" : "Refresh" }}</span
>
</span>
<div class="cell is-col-span-5 is-flex is-align-items-center is-gap-1 is-flex-wrap-wrap">
<Caption
:title="lang === 'vi' ? `Tìm ${viewport === 1 ? '' : 'kiếm'}` : 'Search'"
type="has-text-orange"
/>
<input
class="input is-small is-orange"
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...'"
/>
<div class="field has-addons is-flex is-flex-wrap-wrap is-gap-0 is-align-items-center">
<span
class="tooltip"
v-if="importdata && $getEditRights()"
>
<a
class="button is-primary is-loading is-small ml-3"
v-if="loading"
></a>
</div>
class="mr-2"
@click="openImport()"
>
<SvgIcon
v-bind="{
name: 'upload.svg',
type: 'findata',
size: 22,
}"
></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>
{{ lang === "vi" ? "Nhập dữ liệu" : "Import data" }}
</span>
</span>
<span
class="tooltip"
v-if="enableAdd && $getEditRights()"
>
<a
class="mr-2"
@click="$emit('add')"
>
<SvgIcon v-bind="{ name: 'add1.png', type: 'findata', size: 22 }"></SvgIcon>
</a>
<span
class="tooltiptext"
style="min-width: max-content"
>{{ lang === "vi" ? "Thêm mới" : "Add new" }}</span
>
</span>
<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>
<span>Xuất excel</span>
</button>
</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>
<span>Làm mới</span>
</button>
</p>
<Icon
v-if="loading"
name="svg-spinners:90-ring"
:size="22"
/>
</div>
</div>
</div>
<Modal
@close="showmodal = undefined"
v-bind="showmodal"
v-if="showmodal"
></Modal>
@close="showmodal = undefined"
/>
</div>
</template>

1
app/components/media/FileUpload.vue
View File

@@ -98,7 +98,6 @@ function doChange() {
dataFiles.value.push(file);
});
console.log("dataFiles.value", dataFiles.value);
showmodal.value = {
component: "media/UploadProgress",
title: "Upload files",

6
app/plugins/00-datatable.js
View File

@@ -36,6 +36,12 @@ export default defineNuxtPlugin(() => {
const filter = function (arr, obj, attr) {
const keys = Object.keys(obj);
if (!arr) {
console.error(`$filter: arr is ${arr}`);
return [];
}
let rows = arr.filter((v) => {
let valid = true;
keys.map((key) => {