fix: 04 layout
This commit is contained in:
puriphatt
parent
b2149f1f0c
commit
1250eb6bc7
1 changed files with 1614 additions and 1619 deletions
|
|
@ -773,7 +773,7 @@ async function deleteProductById(productId?: string) {
|
|||
persistent: true,
|
||||
message: t('deleteConfirmMessage'),
|
||||
action: async () => {
|
||||
if (editByTree !== undefined) {
|
||||
if (editByTree.value !== undefined) {
|
||||
if (editByTree.value === 'type') {
|
||||
// Product Type
|
||||
await deleteProductServiceType(productId ?? currentIdType.value);
|
||||
|
|
@ -1343,7 +1343,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
></q-fab-action>
|
||||
</ButtonAddComponent>
|
||||
|
||||
<div class="full-height overflow-hidden">
|
||||
<div class="full-height column no-wrap">
|
||||
<div class="text-body-2 q-mb-xs flex items-center">
|
||||
{{ $t('dataSum') }}
|
||||
<q-btn
|
||||
|
|
@ -1373,17 +1373,22 @@ watch(inputSearchProductAndService, async () => {
|
|||
</div>
|
||||
</transition>
|
||||
|
||||
<div
|
||||
class="column col rounded bordered"
|
||||
style="flex-wrap: nowrap; overflow: hidden"
|
||||
>
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
:limits="[20, 100]"
|
||||
style="width: 100%; height: 100%"
|
||||
style="width: 100%"
|
||||
class="col"
|
||||
after-class="overflow-hidden"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="surface-2 column full-height">
|
||||
<div class="surface-1 column full-height">
|
||||
<div
|
||||
class="row bordered-b q-pl-sm text-weight-bold items-center"
|
||||
:style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
|
||||
class="row bordered-b surface-3 q-px-md q-py-sm text-weight-bold items-center"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
||||
>
|
||||
<div class="col">จัดการสาขาทั้งหมด</div>
|
||||
</div>
|
||||
|
|
@ -1616,7 +1621,9 @@ watch(inputSearchProductAndService, async () => {
|
|||
}
|
||||
}
|
||||
"
|
||||
:model-value="node.status !== 'INACTIVE'"
|
||||
:model-value="
|
||||
node.status !== 'INACTIVE'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
|
@ -1643,76 +1650,51 @@ watch(inputSearchProductAndService, async () => {
|
|||
<!-- group/type -->
|
||||
<div
|
||||
v-if="productMode === 'group' || productMode === 'type'"
|
||||
class="surface-2 items-center full-width full-height justify-between"
|
||||
class="surface-2 items-center full-width full-height column col"
|
||||
>
|
||||
<!-- tool bar -->
|
||||
<div
|
||||
class="q-px-md row bordered-b justify-between items-center"
|
||||
:class="{ ' ': $q.screen.lt.md }"
|
||||
:style="`height: ${$q.screen.lt.md ? '20%' : '56px'}`"
|
||||
class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
|
||||
>
|
||||
<q-input
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
for="input-search"
|
||||
outlined
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
dense
|
||||
unelavated
|
||||
:label="$t('search')"
|
||||
class=""
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="250"
|
||||
debounce="200"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row" style="gap: var(--size-2)">
|
||||
<q-btn
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
class="bordered rounded"
|
||||
unelevated
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
<q-list v-close-popup dense>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="
|
||||
() => {
|
||||
currentStatus = 'All';
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="
|
||||
() => {
|
||||
currentStatus = 'ACTIVE';
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ $t('statusACTIVE') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="flex items-center"
|
||||
@click="
|
||||
() => {
|
||||
currentStatus = 'INACTIVE';
|
||||
}
|
||||
"
|
||||
>
|
||||
{{ $t('statusINACTIVE') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-select
|
||||
v-model="currentStatus"
|
||||
outlined
|
||||
dense
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
map-options
|
||||
emit-value
|
||||
:options="[
|
||||
{ label: $t('all'), value: 'All' },
|
||||
{ label: $t('statusACTIVE'), value: 'ACTIVE' },
|
||||
{
|
||||
label: $t('statusINACTIVE'),
|
||||
value: 'INACTIVE',
|
||||
},
|
||||
]"
|
||||
></q-select>
|
||||
|
||||
<q-select
|
||||
v-if="modeView === false"
|
||||
|
|
@ -1726,6 +1708,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
"
|
||||
:display-value="$t('displayField')"
|
||||
v-model="tbControl.groupAndType.fieldSelected"
|
||||
class="col q-mx-sm"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
map-options
|
||||
|
|
@ -1789,20 +1772,20 @@ watch(inputSearchProductAndService, async () => {
|
|||
(productGroup?.length === 0 && productMode === 'group')) &&
|
||||
stat[0].count !== undefined
|
||||
"
|
||||
class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height"
|
||||
class="items-center justify-center full-width flex col"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="surface-1 col flex q-pa-md scroll full-width">
|
||||
<div class="surface-2 q-pa-md scroll col full-width">
|
||||
<q-table
|
||||
:style="`height: ${hideStat ? '60dvh' : '50vh'}`"
|
||||
flat
|
||||
bordered
|
||||
:grid="modeView"
|
||||
:rows="
|
||||
(productMode === 'type' ? productType : productGroup) || []
|
||||
(productMode === 'type' ? productType : productGroup) ||
|
||||
[]
|
||||
"
|
||||
:columns="tbColumn.groupAndType"
|
||||
class="full-width"
|
||||
|
|
@ -1859,7 +1842,9 @@ watch(inputSearchProductAndService, async () => {
|
|||
>
|
||||
<q-td
|
||||
v-if="
|
||||
tbControl.groupAndType.fieldSelected.includes('name')
|
||||
tbControl.groupAndType.fieldSelected.includes(
|
||||
'name',
|
||||
)
|
||||
"
|
||||
>
|
||||
<div class="row items-center">
|
||||
|
|
@ -2237,7 +2222,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
|
||||
<div
|
||||
v-if="productMode === 'group'"
|
||||
class="row items-center justify-between q-px-md q-py-sm"
|
||||
class="row items-center justify-between q-px-md q-py-sm full-width"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
|
|
@ -2299,7 +2284,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
|
||||
<div
|
||||
v-if="productMode === 'type'"
|
||||
class="row justify-between items-center q-px-md q-py-sm"
|
||||
class="row justify-between items-center q-px-md q-py-sm full-width"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
|
|
@ -2363,12 +2348,11 @@ watch(inputSearchProductAndService, async () => {
|
|||
<!-- product/service -->
|
||||
<div
|
||||
v-else-if="productMode === 'service'"
|
||||
class="surface-2 col bordered rounded column no-wrap"
|
||||
class="surface-1 col column no-wrap"
|
||||
style="overflow: hidden"
|
||||
>
|
||||
<div
|
||||
class="row justify-between items-center q-px-md q-py-sm rounded surface-2"
|
||||
:style="`z-index: 1 ; height: ${$q.screen.lt.md ? '20%' : '56px'}`"
|
||||
class="row justify-between items-center q-px-md q-py-sm surface-3 bordered-b"
|
||||
>
|
||||
<q-input
|
||||
:class="{ 'col-12': $q.screen.lt.md }"
|
||||
|
|
@ -2376,7 +2360,6 @@ watch(inputSearchProductAndService, async () => {
|
|||
dense
|
||||
unelavated
|
||||
:label="$t('search')"
|
||||
class="q-mr-md"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearchProductAndService"
|
||||
debounce="250"
|
||||
|
|
@ -2386,13 +2369,17 @@ watch(inputSearchProductAndService, async () => {
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="row" style="gap: var(--size-2)">
|
||||
<div
|
||||
class="row col-12 col-md-6"
|
||||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<q-btn
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
:color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'dark'"
|
||||
class="bordered rounded q-py-sm"
|
||||
class="bordered rounded q-py-sm col"
|
||||
unelevated
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
|
|
@ -2441,6 +2428,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
v-if="modeView === false"
|
||||
id="select-field"
|
||||
for="select-field"
|
||||
class="col q-mx-sm"
|
||||
:options="
|
||||
{
|
||||
product: tbControl.product.fieldDisplay,
|
||||
|
|
@ -2517,10 +2505,11 @@ watch(inputSearchProductAndService, async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-2 bordered-b q-px-md">
|
||||
<q-tabs
|
||||
dense
|
||||
v-model="productAndServiceTab"
|
||||
class="bordered-b q-px-md"
|
||||
active-color="info"
|
||||
align="left"
|
||||
>
|
||||
<q-tab
|
||||
|
|
@ -2570,23 +2559,25 @@ watch(inputSearchProductAndService, async () => {
|
|||
</div>
|
||||
</q-tab>
|
||||
</q-tabs>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
(productAndServiceTab === 'product' && product?.length === 0) ||
|
||||
(productAndServiceTab === 'product' &&
|
||||
product?.length === 0) ||
|
||||
(productAndServiceTab === 'service' && service?.length === 0)
|
||||
"
|
||||
class="flex justify-center items-center surface-1"
|
||||
:style="`height: ${hideStat ? '60vh' : '49vh'}`"
|
||||
class="flex justify-center items-center surface-2 col"
|
||||
>
|
||||
<NoData :not-found="!!inputSearchProductAndService" />
|
||||
</div>
|
||||
<!-- tab -->
|
||||
<template v-else>
|
||||
<div class="flex scroll full-width q-pa-md surface-1">
|
||||
<div
|
||||
class="flex scroll full-width q-pa-md surface-2 column col"
|
||||
>
|
||||
<q-table
|
||||
class="full-width"
|
||||
:style="`height: ${hideStat ? '55vh' : '45vh'}`"
|
||||
flat
|
||||
bordered
|
||||
:rows-per-page-options="[0]"
|
||||
|
|
@ -2645,7 +2636,8 @@ watch(inputSearchProductAndService, async () => {
|
|||
<div class="row items-center">
|
||||
<div
|
||||
:class="{
|
||||
'status-active': props.row.status !== 'INACTIVE',
|
||||
'status-active':
|
||||
props.row.status !== 'INACTIVE',
|
||||
'status-inactive':
|
||||
props.row.status === 'INACTIVE',
|
||||
}"
|
||||
|
|
@ -2735,7 +2727,9 @@ watch(inputSearchProductAndService, async () => {
|
|||
>
|
||||
<div class="col-4">{{ $t('salePrice') }}</div>
|
||||
<div class="col-4 text-weight-bold">
|
||||
{{ formatNumberDecimal(props.row.price || 0, 2) }}
|
||||
{{
|
||||
formatNumberDecimal(props.row.price || 0, 2)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -3098,6 +3092,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
</template>
|
||||
</q-splitter>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormDialog
|
||||
v-model:modal="dialogInputForm"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue