chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: แก้ layout หน้าสินค้าและบริการใหม่

Browse source
This commit is contained in:
Net 2024-07-12 13:35:15 +07:00
parent 6b25dff32a
commit 2c955de900
1 changed files with 1447 additions and 1283 deletions
Download patch file Download diff file Expand all files Collapse all files

284
src/pages/04_product-service/MainPage.vue
View file

@ -107,9 +107,10 @@ const stat = ref<
>([ >([
{ {
icon: 'mdi-folder', icon: 'mdi-folder',
count: 0, label: 'productAndService', count: 0,
label: 'productAndService',
mode: 'group', mode: 'group',
color: 'pink' color: 'pink',
}, },
{ {
icon: 'mdi-folder-table', icon: 'mdi-folder-table',
@ -120,16 +121,17 @@ const stat = ref<
}, },
{ {
icon: 'mdi-server-network', icon: 'mdi-server-network',
count: 0, label: 'service', count: 0,
label: 'service',
mode: 'service', mode: 'service',
color: 'orange' color: 'orange',
}, },
{ {
icon: 'mdi-folder', icon: 'mdi-folder',
count: 0, label: 'product', count: 0,
label: 'product',
mode: 'product', mode: 'product',
color: 'green' color: 'green',
}, },
]); ]);
@ -144,6 +146,7 @@ const drawerInfo = ref(false);
const isEdit = ref(false); const isEdit = ref(false);
const modeView = ref(false); const modeView = ref(false);
const splitterModel = ref(25);
const dialogInputForm = ref(false); const dialogInputForm = ref(false);
const dialogProduct = ref(false); const dialogProduct = ref(false);
@ -1154,9 +1157,6 @@ onMounted(async () => {
text: 'manage', text: 'manage',
handler: () => { handler: () => {
productMode.value = 'group'; productMode.value = 'group';
}, },
}, },
]; ];
@ -1175,7 +1175,7 @@ watch(productMode, () => {
text: 'manage', text: 'manage',
handler: () => { handler: () => {
productMode.value = 'group'; productMode.value = 'group';
filterStat.value = [] filterStat.value = [];
}, },
}, },
]; ];
@ -1188,7 +1188,7 @@ watch(productMode, () => {
productMode.value = 'type'; productMode.value = 'type';
filterStat.value = filterStat.value.filter((item) => { filterStat.value = filterStat.value.filter((item) => {
return item !== 'type'; return item !== 'type';
}) });
}, },
}); });
} }
@ -1295,28 +1295,6 @@ watch(inputSearchProductAndService, async () => {
></q-fab-action> ></q-fab-action>
</ButtonAddComponent> </ButtonAddComponent>
<div class="column full-height no-wrap">
<div
v-if="stat[0].count === 0"
class="column col bordered rounded q-pa-md"
:no-padding="productGroup?.length !== 0"
>
<TooltipComponent
class="self-end"
title="messageTooltipNoProduct"
caption="messageTooltipProductCreate"
imgSrc="personnel-table-"
/>
<div class="row items-center justify-center" style="flex-grow: 1">
<AddButton
label="productCreate"
@trigger="() => (dialogInputForm = true)"
/>
</div>
</div>
<div v-if="stat[0].count !== 0" class="column full-height no-wrap">
<div class="text-body-2 q-mb-xs flex items-center"> <div class="text-body-2 q-mb-xs flex items-center">
{{ $t('dataSum') }} {{ $t('dataSum') }}
<q-btn <q-btn
@ -1338,7 +1316,7 @@ watch(inputSearchProductAndService, async () => {
<div style="display: inline-block"> <div style="display: inline-block">
<StatCard <StatCard
label-i18n label-i18n
:branch="stat.filter((v) => !filterStat.includes(v.mode) )" :branch="stat.filter((v) => !filterStat.includes(v.mode))"
:dark="$q.dark.isActive" :dark="$q.dark.isActive"
nowrap nowrap
/> />
@ -1346,15 +1324,184 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</transition> </transition>
<q-splitter
v-model="splitterModel"
:limits="[0, 100]"
style="width: 100%; height: 82%"
after-class="overflow-hidden"
>
<template v-slot:before>
<div class="surface-2 column full-height">
<div
class="row bordered-b q-pl-sm text-weight-bold items-center"
style="height: 56px"
>
<div class="col">จัดการสาขาทั้งหมด</div>
</div>
<div class="col" style="position: relative">
<div class="scroll" style="position: absolute; inset: 0">
<!-- <q-tree
:nodes="treeData"
node-key="id"
label-key="name"
children-key="branch"
style="color: var(--foreground)"
>
<template #default-header="{ node }">
<div
class="row items-center justify-between full-width no-wrap"
>
<span>{{ node.name }}</span>
<div
class="row q-gutter-xs items-center no-wrap"
@click.stop
>
<q-btn
v-if="node.isHeadOffice"
:id="`create-sub-branch-btn-${node.name}`"
@click.stop=""
icon="mdi-file-plus-outline"
size="sm"
dense
round
flat
/>
<q-btn
:id="`view-detail-btn-${node.name}`"
icon="mdi-dots-vertical"
size="sm"
dense
round
flat
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
:id="`view-detail-btn-${node.name}-view`"
@click.stop="
"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span
class="col-9 q-px-md flex items-center"
>
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${node.name}-edit`"
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="
() => {
}
"
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span
class="col-9 q-px-md flex items-center"
>
{{ $t('edit') }}
</span>
</q-item>
<q-item
:id="`view-detail-btn-${node.name}-delete`"
dense
:clickable="node.status === 'CREATED'"
class="row"
:class="{
'surface-3': node.status !== 'CREATED',
'app-text-muted':
node.status !== 'CREATED',
}"
style="white-space: nowrap"
@click=""
>
<q-icon
name="mdi-trash-can-outline"
size="xs"
class="col-3"
:class="{
'app-text-negative':
node.status === 'CREATED',
}"
/>
<span
class="col-9 q-px-md flex items-center"
>
{{ $t('delete') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
:id="`view-detail-btn-${node.name}-status`"
dense
size="sm"
:label="
node.status !== 'INACTIVE'
? $t('switchOnLabel')
: $t('switchOffLabel')
"
@click="
async () => {
}
"
:model-value="
node.status === 'CREATED' ||
node.status === 'ACTIVE'
"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
</template>
</q-tree> -->
</div>
</div>
</div>
</template>
<template v-slot:after>
<div class="column no-wrap full-height">
<!-- group/type --> <!-- group/type -->
<div <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
class="surface-2 col bordered rounded column no-wrap" class="col justify-between surface-2 items-center full-width full-height justify-between"
> >
<div class="row q-px-md q-py-sm items-center">
<div <div
v-if="productMode === 'group' || productMode === 'type'" class="q-px-md row bordered-b justify-between items-center"
class="row full-width justify-between" style="height: 56px"
> >
<q-input <q-input
style="width: 300px" style="width: 300px"
@ -1362,7 +1509,7 @@ watch(inputSearchProductAndService, async () => {
dense dense
unelavated unelavated
:label="$t('search')" :label="$t('search')"
class="q-mr-md" class=""
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="250" debounce="250"
@ -1488,18 +1635,18 @@ watch(inputSearchProductAndService, async () => {
</q-btn-toggle> </q-btn-toggle>
</div> </div>
</div> </div>
</div>
<div <div
v-if=" v-if="
(productMode === 'type' && productType?.length === 0) || ((productMode === 'type' && productType?.length === 0) ||
(productGroup?.length === 0 && productMode === 'group') (productGroup?.length === 0 && productMode === 'group')) &&
stat[0].count !== undefined
" "
class="flex full-height justify-center items-center q-mt-lg" class="surface-1 row items-center justify-center bordered q-pa-md full-width full-height"
style="min-height: 70vh; background-color: var(--surface-2)"
> >
<NoData :not-found="!!inputSearch" /> <NoData :not-found="!!inputSearch" />
</div> </div>
<template v-else> <template v-else>
<div class="col flex scroll full-height q-pa-md surface-1"> <div class="col flex scroll full-height q-pa-md surface-1">
<div class="full-width"> <div class="full-width">
@ -1512,7 +1659,7 @@ watch(inputSearchProductAndService, async () => {
" "
:columns="tbColumn.groupAndType" :columns="tbColumn.groupAndType"
class="full-width" class="full-width"
card-container-class="q-gutter-md " card-container-class="q-col-gutter-md"
row-key="name" row-key="name"
:rows-per-page-options="[0]" :rows-per-page-options="[0]"
hide-pagination hide-pagination
@ -1560,8 +1707,6 @@ watch(inputSearchProductAndService, async () => {
await fetchListType(); await fetchListType();
flowStore.rotate(); flowStore.rotate();
} }
} }
" "
> >
@ -1605,7 +1750,9 @@ watch(inputSearchProductAndService, async () => {
</q-td> </q-td>
<q-td <q-td
v-if=" v-if="
tbControl.groupAndType.fieldSelected.includes('detail') tbControl.groupAndType.fieldSelected.includes(
'detail',
)
" "
> >
{{ props.row.detail || '-' }} {{ props.row.detail || '-' }}
@ -2151,7 +2298,10 @@ watch(inputSearchProductAndService, async () => {
{ {
product: tbControl.product.fieldDisplay, product: tbControl.product.fieldDisplay,
service: tbControl.service.fieldDisplay, service: tbControl.service.fieldDisplay,
}[productAndServiceTab].map((x) => ({ label: $t(x), value: x })) }[productAndServiceTab].map((x) => ({
label: $t(x),
value: x,
}))
" "
:display-value="$t('displayField')" :display-value="$t('displayField')"
:model-value=" :model-value="
@ -2337,9 +2487,10 @@ watch(inputSearchProductAndService, async () => {
service: tbControl.service.fieldSelected, service: tbControl.service.fieldSelected,
}[productAndServiceTab].includes( }[productAndServiceTab].includes(
{ product: 'productName', service: 'serviceName' }[ {
productAndServiceTab product: 'productName',
], service: 'serviceName',
}[productAndServiceTab],
) )
" "
> >
@ -2347,7 +2498,8 @@ watch(inputSearchProductAndService, async () => {
<div <div
:class="{ :class="{
'status-active': props.row.status !== 'INACTIVE', 'status-active': props.row.status !== 'INACTIVE',
'status-inactive': props.row.status === 'INACTIVE', 'status-inactive':
props.row.status === 'INACTIVE',
}" }"
style=" style="
width: 50px; width: 50px;
@ -2445,7 +2597,10 @@ watch(inputSearchProductAndService, async () => {
<div class="col-4">{{ $t('agentPrice') }}</div> <div class="col-4">{{ $t('agentPrice') }}</div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
{{ {{
formatNumberDecimal(props.row.agentPrice || 0, 2) formatNumberDecimal(
props.row.agentPrice || 0,
2,
)
}} }}
</div> </div>
</div> </div>
@ -2453,7 +2608,9 @@ watch(inputSearchProductAndService, async () => {
class="tags col-3 column ellipsis-2-lines" class="tags col-3 column ellipsis-2-lines"
style="min-width: 50px" style="min-width: 50px"
> >
<div class="col-4">{{ $t('processingPrice') }}</div> <div class="col-4">
{{ $t('processingPrice') }}
</div>
<div class="col-4 text-weight-bold"> <div class="col-4 text-weight-bold">
{{ {{
formatNumberDecimal( formatNumberDecimal(
@ -2523,7 +2680,9 @@ watch(inputSearchProductAndService, async () => {
if (props.row.type === 'service') { if (props.row.type === 'service') {
currentIdService = props.row.id; currentIdService = props.row.id;
infoServiceEdit = false; infoServiceEdit = false;
assignFormDataProductService(props.row.id); assignFormDataProductService(
props.row.id,
);
dialogServiceEdit = true; dialogServiceEdit = true;
} }
await fetchListOfOptionBranch(); await fetchListOfOptionBranch();
@ -2564,7 +2723,9 @@ watch(inputSearchProductAndService, async () => {
if (props.row.type === 'service') { if (props.row.type === 'service') {
currentIdService = props.row.id; currentIdService = props.row.id;
infoServiceEdit = true; infoServiceEdit = true;
assignFormDataProductService(props.row.id); assignFormDataProductService(
props.row.id,
);
dialogServiceEdit = true; dialogServiceEdit = true;
} }
@ -2721,7 +2882,9 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</template> </template>
<!-- footer --> <!-- footer -->
<div class="row items-center justify-between q-py-sm q-px-md surface-2"> <div
class="row items-center justify-between q-py-sm q-px-md surface-2"
>
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center">
<div class="app-text-muted" style="width: 80px"> <div class="app-text-muted" style="width: 80px">
@ -2783,7 +2946,8 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</q-splitter>
<FormDialog <FormDialog
v-model:modal="dialogInputForm" v-model:modal="dialogInputForm"