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

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>