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> <template>
<span :class="`icon-text fsb-${props.size || 17} ${props.type || 'has-text-primary'}`"> <span :class="`icon-text is-flex-wrap-nowrap font-semibold fs-${props.size || 16} ${props.type || ''}`">
<span>{{ title }}</span> <span style="text-wrap: nowrap">{{ title }}</span>
<SvgIcon <span class="icon">
id="ignore" <Icon name="material-symbols:arrow-forward-ios-rounded" />
v-bind="{ </span>
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> </span>
</template> </template>
<script setup> <script setup>
var props = defineProps({ const props = defineProps({
type: String, type: String,
size: Number, size: Number,
title: String, title: String,

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

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

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

@@ -6,7 +6,10 @@
<div <div
v-for="(v, i) in rows" v-for="(v, i) in rows"
:key="i" :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 <p
class="control is-expanded py-0 fs-14 hyperlink" class="control is-expanded py-0 fs-14 hyperlink"
@@ -18,6 +21,10 @@
v-if="checked[i] && notick !== true" v-if="checked[i] && notick !== true"
> >
<SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon> <SvgIcon v-bind="{ name: 'tick.svg', type: 'primary', size: 15 }"></SvgIcon>
<Icon
name="material-symbols:check-rounded"
:size="15"
/>
</span> </span>
</p> </p>
<p <p

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

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

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

@@ -98,7 +98,6 @@ function doChange() {
dataFiles.value.push(file); dataFiles.value.push(file);
}); });
console.log("dataFiles.value", dataFiles.value);
showmodal.value = { showmodal.value = {
component: "media/UploadProgress", component: "media/UploadProgress",
title: "Upload files", 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 filter = function (arr, obj, attr) {
const keys = Object.keys(obj); const keys = Object.keys(obj);
if (!arr) {
console.error(`$filter: arr is ${arr}`);
return [];
}
let rows = arr.filter((v) => { let rows = arr.filter((v) => {
let valid = true; let valid = true;
keys.map((key) => { keys.map((key) => {