changes
This commit is contained in:
Viet An
@@ -13,7 +13,7 @@
|
|||||||
@click="changeTab(leftmenu[0])"
|
@click="changeTab(leftmenu[0])"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
style="max-height: none; width: 44px"
|
style="max-height: none; width: 40px"
|
||||||
width="80"
|
width="80"
|
||||||
height="80"
|
height="80"
|
||||||
viewBox="0 0 80 80"
|
viewBox="0 0 80 80"
|
||||||
|
|||||||
@@ -1,387 +1,324 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="toolbar field has-addons is-justify-content-center">
|
<div class="is-flex is-flex-direction-column max-h-full">
|
||||||
<!-- <div class="control">
|
<div class="is-flex-shrink-0 toolbar field has-addons is-justify-content-center">
|
||||||
<button
|
<!-- <div class="control">
|
||||||
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-70'"
|
|
||||||
/>
|
|
||||||
</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
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div 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-70'"
|
|
||||||
/>
|
|
||||||
</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
|
|
||||||
>
|
|
||||||
</div> -->
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="moveLeft()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:arrow-back-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Chuyển cột sang trái</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="moveRight()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:arrow-forward-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Chuyển cột sang phải</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="resizeWidth()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="fluent:arrow-fit-16-regular"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Tăng độ rộng cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="resizeWidth(true)"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="fluent:arrow-fit-in-16-regular"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Giảm độ rộng cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="hideField()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:visibility-off-outline-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Ẩn cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="!currentField.mandatory && doRemove()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:delete-outline-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Xóa cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="$copyToClipboard(currentField.name)"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:content-copy-outline-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Sao chép cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="fieldList()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:view-column-outline-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Danh sách cột</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="createField()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:add-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
|
||||||
>Tạo cột mới</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button"
|
|
||||||
@click="tableOption()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:table-edit-outline"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<span
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; right: 0"
|
|
||||||
>Tùy chọn bảng</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button is-primary"
|
|
||||||
@click="saveSetting()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:save-rounded"
|
|
||||||
:size="20"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<p
|
|
||||||
class="tooltiptext"
|
|
||||||
style="top: 110%; bottom: unset; min-width: max-content; right: 0"
|
|
||||||
>
|
|
||||||
Lưu thiết lập
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tabs">
|
|
||||||
<ul>
|
|
||||||
<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="py-1.5 fs-14">{{ v.name }}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-if="currentTab === 'detail'">
|
|
||||||
<p class="field fs-14 is-flex is-gap-0.5 is-align-items-center">
|
|
||||||
<span class="font-semibold">Tên trường:</span>
|
|
||||||
<span>{{ currentField.name }}</span>
|
|
||||||
<button
|
|
||||||
class="button is-small size-8 is-primary is-light is-rounded"
|
|
||||||
@click="$copyToClipboard(currentField.name)"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:content-copy-outline-rounded"
|
|
||||||
:size="16"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
<div class="field">
|
|
||||||
<label class="label fs-14">Mô tả<span class="has-text-danger"> *</span></label>
|
|
||||||
<div class="control">
|
|
||||||
<div class="field has-addons">
|
|
||||||
<div class="control is-expanded">
|
|
||||||
<input
|
|
||||||
class="input fs-14 h-full"
|
|
||||||
type="text"
|
|
||||||
@change="changeLabel($event.target.value)"
|
|
||||||
v-model="label"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<button
|
|
||||||
class="button h-full"
|
|
||||||
@click="editLabel()"
|
|
||||||
>
|
|
||||||
<span class="icon">
|
|
||||||
<Icon
|
|
||||||
name="material-symbols:edit-outline-rounded"
|
|
||||||
:size="18"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
v-if="errors.find((v) => v.name === 'label')"
|
|
||||||
class="help is-danger"
|
|
||||||
>
|
|
||||||
{{ errors.find((v) => v.name === "label").msg }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label class="label fs-14">Kiểu dữ liệu<span class="has-text-danger"> * </span></label>
|
|
||||||
<div class="control is-flex is-gap-0.5">
|
|
||||||
<button
|
<button
|
||||||
v-for="(v, i) in datatype"
|
class="button is-light is-primary"
|
||||||
:key="i"
|
@click="checkFilter() ? false : $emit('modalevent', { name: 'dosort', data: 'az' })"
|
||||||
:class="['button fs-14', radioType === v ? 'is-primary is-light' : 'is-white']"
|
|
||||||
>
|
>
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<Icon
|
<Icon
|
||||||
:name="
|
name="mdi:sort-alphabetical-ascending"
|
||||||
radioType === v
|
|
||||||
? 'material-symbols:radio-button-checked-outline'
|
|
||||||
: 'material-symbols:radio-button-unchecked'
|
|
||||||
"
|
|
||||||
:size="22"
|
:size="22"
|
||||||
|
:class="checkFilter() && 'has-text-grey-70'"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span>{{ v.name }}</span>
|
|
||||||
</button>
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 25px"
|
||||||
|
>Sắp xếp tăng dần</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div 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-70'"
|
||||||
|
/>
|
||||||
|
</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
|
||||||
|
>
|
||||||
|
</div> -->
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="moveLeft()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:arrow-back-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Chuyển cột sang trái</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="moveRight()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:arrow-forward-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Chuyển cột sang phải</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="resizeWidth()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="fluent:arrow-fit-16-regular"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Tăng độ rộng cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="resizeWidth(true)"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="fluent:arrow-fit-in-16-regular"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Giảm độ rộng cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="hideField()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:visibility-off-outline-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Ẩn cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="!currentField.mandatory && doRemove()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:delete-outline-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Xóa cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="$copyToClipboard(currentField.name)"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:content-copy-outline-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Sao chép cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="fieldList()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:view-column-outline-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Danh sách cột</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="createField()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:add-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; left: 0"
|
||||||
|
>Tạo cột mới</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
@click="tableOption()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:table-edit-outline"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; right: 0"
|
||||||
|
>Tùy chọn bảng</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button is-primary"
|
||||||
|
@click="saveSetting()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:save-rounded"
|
||||||
|
:size="20"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<p
|
||||||
|
class="tooltiptext"
|
||||||
|
style="top: 110%; bottom: unset; min-width: max-content; right: 0"
|
||||||
|
>
|
||||||
|
Lưu thiết lập
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="is-flex-shrink-0 tabs">
|
||||||
v-if="currentField.format === 'number'"
|
<ul>
|
||||||
class="field is-horizontal"
|
<li
|
||||||
>
|
v-for="(v, i) in getMenu().filter((x) =>
|
||||||
<div class="field-body">
|
currentField.format === 'number'
|
||||||
<div class="field">
|
? currentField.formula
|
||||||
<label class="label fs-14">Đơn vị <span class="has-text-danger"> * </span> </label>
|
? true
|
||||||
<div class="control">
|
: x.code !== 'formula'
|
||||||
<SearchBox
|
: !['filter', 'formula'].find((y) => y === x.code),
|
||||||
v-bind="{
|
)"
|
||||||
vdata: moneyunit,
|
:key="i"
|
||||||
field: 'name',
|
:class="selectTab.code === v.code ? 'is-active' : 'has-text-primary'"
|
||||||
column: ['name'],
|
@click="changeTab(v)"
|
||||||
first: true,
|
>
|
||||||
position: 'is-top-left',
|
<a class="py-1.5 fs-14">{{ v.name }}</a>
|
||||||
}"
|
</li>
|
||||||
@option="selected('_account', $event)"
|
</ul>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
class="help has-text-danger"
|
|
||||||
v-if="errors.find((v) => v.name === 'unit')"
|
|
||||||
>
|
|
||||||
{{ errors.find((v) => v.name === "unit").msg }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="field is-narrow">
|
|
||||||
<label class="label fs-14">Phần thập phân</label>
|
|
||||||
<div class="control">
|
|
||||||
<input
|
|
||||||
class="input"
|
|
||||||
type="text"
|
|
||||||
placeholder=""
|
|
||||||
v-model="decimal"
|
|
||||||
@input="changeDecimal($event.target.value)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div v-if="currentTab === 'detail'">
|
||||||
|
<p class="field fs-14 is-flex is-gap-0.5 is-align-items-center">
|
||||||
|
<span class="font-semibold">Tên trường:</span>
|
||||||
|
<span>{{ currentField.name }}</span>
|
||||||
|
<button
|
||||||
|
class="button is-small size-8 is-primary is-light rounded-full p-0"
|
||||||
|
@click="$copyToClipboard(currentField.name)"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:content-copy-outline-rounded"
|
||||||
|
:size="16"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label fs-14">Định dạng nâng cao</label>
|
<label class="label fs-14">Mô tả<span class="has-text-danger"> *</span></label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control is-expanded">
|
||||||
|
<input
|
||||||
|
class="input fs-14 h-full"
|
||||||
|
type="text"
|
||||||
|
@change="changeLabel($event.target.value)"
|
||||||
|
v-model="label"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button
|
||||||
|
class="button h-full"
|
||||||
|
@click="editLabel()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:edit-outline-rounded"
|
||||||
|
:size="18"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
v-if="errors.find((v) => v.name === 'label')"
|
||||||
|
class="help is-danger"
|
||||||
|
>
|
||||||
|
{{ errors.find((v) => v.name === "label").msg }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label fs-14">Kiểu dữ liệu<span class="has-text-danger"> * </span></label>
|
||||||
<div class="control is-flex is-gap-0.5">
|
<div class="control is-flex is-gap-0.5">
|
||||||
<button
|
<button
|
||||||
v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
|
v-for="(v, i) in datatype"
|
||||||
:key="i"
|
:key="i"
|
||||||
@click="changeTemplate(v)"
|
:class="['button fs-14', radioType === v ? 'is-primary is-light' : 'is-white']"
|
||||||
:class="['button fs-14', radioTemplate === v.code ? 'is-primary is-light' : 'is-white']"
|
|
||||||
>
|
>
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<Icon
|
<Icon
|
||||||
:name="
|
:name="
|
||||||
radioTemplate === v.code
|
radioType === v
|
||||||
? 'material-symbols:radio-button-checked-outline'
|
? 'material-symbols:radio-button-checked-outline'
|
||||||
: 'material-symbols:radio-button-unchecked'
|
: 'material-symbols:radio-button-unchecked'
|
||||||
"
|
"
|
||||||
@@ -390,42 +327,107 @@
|
|||||||
</span>
|
</span>
|
||||||
<span>{{ v.name }}</span>
|
<span>{{ v.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
</div>
|
||||||
v-if="radioTemplate === 'option'"
|
</div>
|
||||||
class="button is-primary is-outlined fs-14 ml-2"
|
<div
|
||||||
@click="showSidebar()"
|
v-if="currentField.format === 'number'"
|
||||||
>
|
class="field is-horizontal"
|
||||||
<span class="icon">
|
>
|
||||||
<Icon
|
<div class="field-body">
|
||||||
:name="currentField.template ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'"
|
<div class="field">
|
||||||
:size="17"
|
<label class="label fs-14">Đơn vị <span class="has-text-danger"> * </span> </label>
|
||||||
|
<div class="control">
|
||||||
|
<SearchBox
|
||||||
|
v-bind="{
|
||||||
|
vdata: moneyunit,
|
||||||
|
field: 'name',
|
||||||
|
column: ['name'],
|
||||||
|
first: true,
|
||||||
|
position: 'is-top-left',
|
||||||
|
}"
|
||||||
|
@option="selected('_account', $event)"
|
||||||
/>
|
/>
|
||||||
</span>
|
</div>
|
||||||
<span>{{ currentField.template ? "Sửa" : "Tạo" }} định dạng</span>
|
<p
|
||||||
</button>
|
class="help has-text-danger"
|
||||||
|
v-if="errors.find((v) => v.name === 'unit')"
|
||||||
|
>
|
||||||
|
{{ errors.find((v) => v.name === "unit").msg }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="field is-narrow">
|
||||||
|
<label class="label fs-14">Phần thập phân</label>
|
||||||
|
<div class="control">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
placeholder=""
|
||||||
|
v-model="decimal"
|
||||||
|
@input="changeDecimal($event.target.value)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="field">
|
||||||
|
<label class="label fs-14">Định dạng nâng cao</label>
|
||||||
|
<div class="control is-flex is-gap-0.5">
|
||||||
|
<button
|
||||||
|
v-for="(v, i) in colorchoice.filter((v) => v.code !== 'condition')"
|
||||||
|
:key="i"
|
||||||
|
@click="changeTemplate(v)"
|
||||||
|
:class="['button fs-14', radioTemplate === v.code ? 'is-primary is-light' : 'is-white']"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
:name="
|
||||||
|
radioTemplate === v.code
|
||||||
|
? 'material-symbols:radio-button-checked-outline'
|
||||||
|
: 'material-symbols:radio-button-unchecked'
|
||||||
|
"
|
||||||
|
:size="22"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>{{ v.name }}</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="radioTemplate === 'option'"
|
||||||
|
class="button is-primary is-outlined fs-14 ml-2"
|
||||||
|
@click="showSidebar()"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
:name="
|
||||||
|
currentField.template ? 'material-symbols:edit-outline-rounded' : 'material-symbols:add-rounded'
|
||||||
|
"
|
||||||
|
:size="17"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>{{ currentField.template ? "Sửa" : "Tạo" }} định dạng</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div v-else-if="currentTab === 'value'">
|
|
||||||
<ScrollBox
|
<ScrollBox
|
||||||
|
v-else-if="currentTab === 'value'"
|
||||||
v-bind="{
|
v-bind="{
|
||||||
data: props.filterData,
|
data: filterData,
|
||||||
name: props.field.name,
|
name: field.name,
|
||||||
maxHeight: '380px',
|
|
||||||
perpage: 20,
|
perpage: 20,
|
||||||
inContext: true,
|
inContext: true,
|
||||||
}"
|
}"
|
||||||
@selected="doSelect"
|
@selected="doSelect"
|
||||||
/>
|
/>
|
||||||
|
<Modal
|
||||||
|
v-bind="showmodal"
|
||||||
|
v-if="showmodal"
|
||||||
|
@label="changeLabel"
|
||||||
|
@updatefields="updateFields"
|
||||||
|
@close="close"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Modal
|
|
||||||
v-bind="showmodal"
|
|
||||||
v-if="showmodal"
|
|
||||||
@label="changeLabel"
|
|
||||||
@updatefields="updateFields"
|
|
||||||
@close="close"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import ScrollBox from "~/components/datatable/ScrollBox.vue";
|
import ScrollBox from "~/components/datatable/ScrollBox.vue";
|
||||||
|
|||||||
@@ -122,7 +122,7 @@
|
|||||||
<li
|
<li
|
||||||
v-for="(v, i) in tabs"
|
v-for="(v, i) in tabs"
|
||||||
:key="i"
|
:key="i"
|
||||||
:class="tab.code === v.code && 'is-active'"
|
:class="['fs-14', tab.code === v.code && 'is-active']"
|
||||||
@click="changeTab(v)"
|
@click="changeTab(v)"
|
||||||
>
|
>
|
||||||
<a class="has-text-inherit">{{ v.name }}</a>
|
<a class="has-text-inherit">{{ v.name }}</a>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
<span class="icon">
|
<span class="icon">
|
||||||
<Icon
|
<Icon
|
||||||
name="material-symbols:content-copy-outline-rounded"
|
name="material-symbols:content-copy-outline-rounded"
|
||||||
:size="14"
|
:size="16"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
@@ -102,7 +102,13 @@
|
|||||||
:class="['button is-primary', isLoading && 'is-loading']"
|
:class="['button is-primary', isLoading && 'is-loading']"
|
||||||
@click="saveSetting"
|
@click="saveSetting"
|
||||||
>
|
>
|
||||||
Lưu lại
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:check-rounded"
|
||||||
|
:size="18"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>Lưu lại</span>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,10 @@ const props = defineProps({
|
|||||||
<template>
|
<template>
|
||||||
<div class="is-flex is-flex-direction-column is-gap-2">
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
||||||
<div
|
<div
|
||||||
class="p-4 rounded-md has-background-primary-95 is-flex is-justify-content-space-between is-align-items-center"
|
v-if="invoice.delivery"
|
||||||
|
class="p-4 rounded-md is-flex is-justify-content-space-between is-align-items-center"
|
||||||
|
:class="`has-background-${invoice.delivery__delivery_status__color}-95`"
|
||||||
|
:style="{ border: `1px solid var(--bulma-${invoice.delivery__delivery_status__color}-80)` }"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<p class="fs-14 has-text-grey-40">Mã giao hàng</p>
|
<p class="fs-14 has-text-grey-40">Mã giao hàng</p>
|
||||||
@@ -28,7 +31,10 @@ const props = defineProps({
|
|||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="font-medium has-text-primary-50">
|
<p
|
||||||
|
class="font-medium"
|
||||||
|
:class="`has-text-${invoice.delivery__delivery_status__color}-40`"
|
||||||
|
>
|
||||||
{{ capitalize(invoice.delivery__delivery_status__name) }}
|
{{ capitalize(invoice.delivery__delivery_status__name) }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -27,7 +27,8 @@ const invoiceProducts = computed(() => {
|
|||||||
<div
|
<div
|
||||||
v-for="product in invoiceProducts"
|
v-for="product in invoiceProducts"
|
||||||
:key="product.id"
|
:key="product.id"
|
||||||
class="p-4 has-background-white-ter rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
|
class="p-4 has-background-grey-100 rounded-md is-flex is-gap-2 is-justify-content-space-between is-align-items-flex-end"
|
||||||
|
style="border: 1px solid var(--bulma-grey-90)"
|
||||||
>
|
>
|
||||||
<div class="is-flex-grow-1 is-flex is-gap-2">
|
<div class="is-flex-grow-1 is-flex is-gap-2">
|
||||||
<NuxtImg
|
<NuxtImg
|
||||||
|
|||||||
@@ -45,12 +45,23 @@ const activeTab = ref(tabs[0]);
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="invoice">
|
<div v-if="invoice">
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<div class="is-flex is-gap-1.5 is-align-items-center">
|
<div class="is-flex is-align-items-center">
|
||||||
<span class="fs-17 font-bold">{{ invoice.code }}</span>
|
<span class="fs-17 font-bold">{{ invoice.code }}</span>
|
||||||
|
<button
|
||||||
|
class="button size-7 ml-1.5 is-primary is-light is-small p-0 rounded-full"
|
||||||
|
@click="$copyToClipboard(invoice.code)"
|
||||||
|
>
|
||||||
|
<span class="icon">
|
||||||
|
<Icon
|
||||||
|
name="material-symbols:content-copy-outline-rounded"
|
||||||
|
:size="16"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
<span
|
<span
|
||||||
:class="[
|
:class="[
|
||||||
'tag rounded-full',
|
'tag rounded-full ml-3',
|
||||||
`has-background-${invoice.invoice_status__color}-80 has-text-${invoice.invoice_status__color}-25`,
|
`has-background-${invoice.invoice_status__color}-90 has-text-${invoice.invoice_status__color}-25`,
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
{{ invoice.invoice_status__name }}
|
{{ invoice.invoice_status__name }}
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import useActiveCart from "~/components/pos/composables/useActiveCart";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
address: Object,
|
address: Object,
|
||||||
selected: Boolean,
|
selected: Boolean,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { activeCart } = useActiveCart();
|
||||||
const showModal = ref(false);
|
const showModal = ref(false);
|
||||||
|
|
||||||
function openEditModal() {
|
function openEditModal() {
|
||||||
@@ -12,7 +15,10 @@ function openEditModal() {
|
|||||||
title: "Cập nhật địa chỉ",
|
title: "Cập nhật địa chỉ",
|
||||||
width: "50%",
|
width: "50%",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
vbind: { address: props.address },
|
vbind: {
|
||||||
|
customerId: activeCart.value.customer,
|
||||||
|
address: props.address,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,10 +2,11 @@
|
|||||||
import { isEqual } from "es-toolkit";
|
import { isEqual } from "es-toolkit";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
customerId: Number,
|
||||||
address: Object,
|
address: Object,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["modalevent"]);
|
const emit = defineEmits(["modalevent", "close"]);
|
||||||
|
|
||||||
const { $insertapi, $patchapi } = useNuxtApp();
|
const { $insertapi, $patchapi } = useNuxtApp();
|
||||||
const addressRef = ref({ ...props.address });
|
const addressRef = ref({ ...props.address });
|
||||||
@@ -13,11 +14,16 @@ const isLoading = ref(false);
|
|||||||
|
|
||||||
async function submitAddress() {
|
async function submitAddress() {
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
|
const payload = {
|
||||||
|
...addressRef.value,
|
||||||
|
customer: props.customerId,
|
||||||
|
};
|
||||||
const res = props.address
|
const res = props.address
|
||||||
? await $patchapi("Customer_Address", addressRef.value)
|
? await $patchapi("Customer_Address", payload)
|
||||||
: await $insertapi("Customer_Address", addressRef.value);
|
: await $insertapi("Customer_Address", { data: payload });
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
emit("modalevent", { name: "submit" });
|
emit("modalevent", { name: "submit" });
|
||||||
|
emit("close");
|
||||||
}
|
}
|
||||||
|
|
||||||
const isDirty = computed(() => {
|
const isDirty = computed(() => {
|
||||||
|
|||||||
@@ -40,6 +40,10 @@ function openAddAddressModal() {
|
|||||||
title: "Thêm địa chỉ",
|
title: "Thêm địa chỉ",
|
||||||
width: "50%",
|
width: "50%",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
|
vbind: {
|
||||||
|
customerId: activeCart.value.customer,
|
||||||
|
address: undefined,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -214,25 +218,11 @@ function openAddAddressModal() {
|
|||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<p class="mb-2">Địa chỉ giao hàng</p>
|
<div class="block is-flex is-justify-content-space-between is-align-items-center">
|
||||||
<div v-if="addresses.length > 0">
|
<p>Địa chỉ giao hàng</p>
|
||||||
<Address
|
|
||||||
v-for="address in addresses"
|
|
||||||
:key="address"
|
|
||||||
:address="address"
|
|
||||||
:selected="orderInfo.address?.id === address.id"
|
|
||||||
@selectAddress="orderInfo.address = $event"
|
|
||||||
@submit="posStore.getAddresses(activeCart.customer)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="has-text-centered"
|
|
||||||
>
|
|
||||||
<p class="has-text-grey p-4">Khách hàng chưa có địa chỉ</p>
|
|
||||||
<button
|
<button
|
||||||
@click="openAddAddressModal"
|
@click="openAddAddressModal"
|
||||||
class="button is-light is-primary"
|
class="button is-small is-light is-primary"
|
||||||
>
|
>
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<Icon
|
<Icon
|
||||||
@@ -243,6 +233,21 @@ function openAddAddressModal() {
|
|||||||
<span>Thêm địa chỉ</span>
|
<span>Thêm địa chỉ</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<Address
|
||||||
|
v-if="addresses.length > 0"
|
||||||
|
v-for="address in addresses"
|
||||||
|
:key="address"
|
||||||
|
:address="address"
|
||||||
|
:selected="orderInfo.address?.id === address.id"
|
||||||
|
@selectAddress="orderInfo.address = $event"
|
||||||
|
@submit="posStore.getAddresses(activeCart.customer)"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="has-text-grey has-text-centered p-4"
|
||||||
|
>
|
||||||
|
Khách hàng chưa có địa chỉ
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
@@ -370,6 +375,7 @@ function openAddAddressModal() {
|
|||||||
v-if="showModal"
|
v-if="showModal"
|
||||||
v-bind="showModal"
|
v-bind="showModal"
|
||||||
@close="showModal = undefined"
|
@close="showModal = undefined"
|
||||||
|
@submit="posStore.getAddresses(activeCart.customer)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user