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

refactor: กดย้อนกลับ

Browse source
This commit is contained in:
Net 2024-07-09 17:17:08 +07:00
parent 7b89fd7cb6
commit 726ba370ad
2 changed files with 479 additions and 404 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/pages/01_branch-management/MainPage.vue
View file

@ -151,7 +151,18 @@ async function calculateStats() {
onMounted(async () => { onMounted(async () => {
utilsStore.currentTitle.title = 'branchManagement'; utilsStore.currentTitle.title = 'branchManagement';
utilsStore.currentTitle.path = [{ text: 'branchManagementCaption' }]; utilsStore.currentTitle.path = [
{
text: 'branchManagementCaption',
handler: () => {
fieldSelectedBranch.value.value = 'branchHQLabel';
currentHq.value = {
id: '',
code: '',
};
},
},
];
await branchStore.fetchList({ pageSize: 99999 }); await branchStore.fetchList({ pageSize: 99999 });
await calculateStats(); await calculateStats();

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

@ -207,9 +207,7 @@ const serviceTab = [
const hideStat = ref(false); const hideStat = ref(false);
const tbColumn = { const tbColumn = {
groupAndType: [ groupAndType: [
{ {
name: 'name', name: 'name',
align: 'left', align: 'left',
@ -233,11 +231,7 @@ const tbColumn = {
align: 'left', align: 'left',
label: 'createdAt', label: 'createdAt',
field: 'createdAt', field: 'createdAt',
} },
], ],
product: [ product: [
@ -280,7 +274,7 @@ const tbColumn = {
align: 'left', align: 'left',
label: 'createdAt', label: 'createdAt',
field: 'createdAt', field: 'createdAt',
} },
], ],
} satisfies { } satisfies {
groupAndType: QTableProps['columns']; groupAndType: QTableProps['columns'];
@ -289,7 +283,6 @@ const tbColumn = {
}; };
const tbControl = reactive({ const tbControl = reactive({
groupAndType: { groupAndType: {
fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'], fieldDisplay: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'], fieldSelected: ['name', 'detail', 'formDialogInputRemark', 'createdAt'],
@ -309,8 +302,18 @@ const tbControl = reactive({
], ],
}, },
service: { service: {
fieldDisplay: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'], fieldDisplay: [
fieldSelected: ['serviceName', 'serviceDetail', 'serviceWorkTotal' ,'createdAt'], 'serviceName',
'serviceDetail',
'serviceWorkTotal',
'createdAt',
],
fieldSelected: [
'serviceName',
'serviceDetail',
'serviceWorkTotal',
'createdAt',
],
}, },
}); });
@ -1105,7 +1108,14 @@ function cloneData() {
onMounted(async () => { onMounted(async () => {
utilsStore.currentTitle.title = 'mainProductTitle'; utilsStore.currentTitle.title = 'mainProductTitle';
utilsStore.currentTitle.path = [{ text: 'mainProductCaption' }]; utilsStore.currentTitle.path = [
{
text: 'manage',
handler: () => {
productMode.value = 'group';
},
},
];
calculateStats(); calculateStats();
await fetchListGroups(); await fetchListGroups();
@ -1115,7 +1125,15 @@ onMounted(async () => {
watch(productMode, () => { watch(productMode, () => {
inputSearch.value = ''; inputSearch.value = '';
currentStatus.value = 'All'; currentStatus.value = 'All';
const tmp: typeof utilsStore.currentTitle.path = [];
const tmp: typeof utilsStore.currentTitle.path = [
{
text: 'manage',
handler: () => {
productMode.value = 'group';
},
},
];
if (productMode.value === 'type' || productMode.value === 'service') { if (productMode.value === 'type' || productMode.value === 'service') {
tmp.push({ tmp.push({
@ -1358,7 +1376,12 @@ watch(inputSearchProductAndService, async () => {
v-if="modeView === false" v-if="modeView === false"
id="select-field" id="select-field"
for="select-field" for="select-field"
:options=" tbControl.groupAndType.fieldDisplay.map(x => ({ label: $t(x), value: x })) " :options="
tbControl.groupAndType.fieldDisplay.map((x) => ({
label: $t(x),
value: x,
}))
"
:display-value="$t('displayField')" :display-value="$t('displayField')"
v-model="tbControl.groupAndType.fieldSelected" v-model="tbControl.groupAndType.fieldSelected"
option-label="label" option-label="label"
@ -1438,7 +1461,11 @@ watch(inputSearchProductAndService, async () => {
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr class="surface-2" :props="props"> <q-tr class="surface-2" :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props"> <q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
{{ $t(col.label) }} {{ $t(col.label) }}
</q-th> </q-th>
<q-th auto-width /> <q-th auto-width />
@ -1453,7 +1480,8 @@ watch(inputSearchProductAndService, async () => {
'status-inactive': props.row.status === 'INACTIVE', 'status-inactive': props.row.status === 'INACTIVE',
}" }"
:props="props" :props="props"
@click="async ()=>{ @click="
async () => {
if (productMode === 'type') { if (productMode === 'type') {
pathTypeName = props.row.name; pathTypeName = props.row.name;
currentIdType = props.row.id; currentIdType = props.row.id;
@ -1466,16 +1494,18 @@ watch(inputSearchProductAndService, async () => {
flowStore.rotate(); flowStore.rotate();
} }
if (productMode === 'group') { if (productMode === 'group') {
pathGroupName = props.row.name; pathGroupName = props.row.name;
currentId = props.row.id; currentId = props.row.id;
productMode = 'type'; productMode = 'type';
await fetchListType(); await fetchListType();
flowStore.rotate(); flowStore.rotate();
} }
}" }
"
>
<q-td
v-if="tbControl.groupAndType.fieldSelected.includes('name')"
> >
<q-td v-if="tbControl.groupAndType.fieldSelected.includes('name')">
<div class="row items-center"> <div class="row items-center">
<div <div
style=" style="
@ -1484,24 +1514,24 @@ watch(inputSearchProductAndService, async () => {
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
" "
> >
<div :class="`icon-color-${productMode ==='group' ? 'pink' : 'purple'}`" class="table__icon"> <div
:class="`icon-color-${productMode === 'group' ? 'pink' : 'purple'}`"
class="table__icon"
>
<q-icon <q-icon
size="md" size="md"
style="scale: 0.8" style="scale: 0.8"
:name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'" :name="
productMode === 'group'
? 'mdi-folder'
: 'mdi-folder-table'
"
/> />
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="col"> <div class="col">
{{ props.row.name }} {{ props.row.name }}
</div> </div>
<div class="col app-text-muted"> <div class="col app-text-muted">
{{ props.row.code || '-' }} {{ props.row.code || '-' }}
@ -1509,20 +1539,32 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
</q-td> </q-td>
<q-td v-if="tbControl.groupAndType.fieldSelected.includes('detail')"> <q-td
v-if="
tbControl.groupAndType.fieldSelected.includes('detail')
"
>
{{ props.row.detail || '-' }} {{ props.row.detail || '-' }}
</q-td> </q-td>
<q-td v-if="tbControl.groupAndType.fieldSelected.includes('formDialogInputRemark')"> <q-td
v-if="
tbControl.groupAndType.fieldSelected.includes(
'formDialogInputRemark',
)
"
>
{{ props.row.remark || '-' }} {{ props.row.remark || '-' }}
</q-td> </q-td>
<q-td v-if="tbControl.groupAndType.fieldSelected.includes('createdAt')"> <q-td
v-if="
tbControl.groupAndType.fieldSelected.includes('createdAt')
"
>
{{ dateFormat(props.row.createdAt) }} {{ dateFormat(props.row.createdAt) }}
</q-td> </q-td>
<q-td> <q-td>
<q-btn <q-btn
icon="mdi-eye-outline" icon="mdi-eye-outline"
@ -1532,7 +1574,6 @@ watch(inputSearchProductAndService, async () => {
flat flat
@click.stop=" @click.stop="
() => { () => {
if (productMode === 'type') { if (productMode === 'type') {
currentStatusProduct = currentStatusProduct =
props.row.status === 'INACTIVE'; props.row.status === 'INACTIVE';
@ -1543,16 +1584,14 @@ watch(inputSearchProductAndService, async () => {
drawerInfo = true; drawerInfo = true;
} }
if (productMode === 'group') { if (productMode === 'group') {
currentStatusProduct =
props.row.status === 'INACTIVE';
currentStatusProduct = props.row.status === 'INACTIVE';
clearFormGroup(); clearFormGroup();
assignFormDataGroup(props.row); assignFormDataGroup(props.row);
isEdit = false; isEdit = false;
currentId = props.row.id; currentId = props.row.id;
drawerInfo = true; drawerInfo = true;
} }
} }
" "
/> />
@ -1582,9 +1621,8 @@ watch(inputSearchProductAndService, async () => {
drawerInfo = true; drawerInfo = true;
} }
if (productMode === 'group') { if (productMode === 'group') {
currentStatusProduct =
props.row.status === 'INACTIVE';
currentStatusProduct = props.row.status === 'INACTIVE';
clearFormGroup(); clearFormGroup();
assignFormDataGroup(props.row); assignFormDataGroup(props.row);
isEdit = false; isEdit = false;
@ -1625,7 +1663,6 @@ watch(inputSearchProductAndService, async () => {
drawerInfo = true; drawerInfo = true;
} }
if (productMode === 'group') { if (productMode === 'group') {
clearFormGroup(); clearFormGroup();
assignFormDataGroup(props.row); assignFormDataGroup(props.row);
isEdit = true; isEdit = true;
@ -1656,14 +1693,16 @@ watch(inputSearchProductAndService, async () => {
'app-text-muted': props.row.status !== 'CREATED', 'app-text-muted': props.row.status !== 'CREATED',
}" }"
style="white-space: nowrap" style="white-space: nowrap"
@click="()=>{ @click="
() => {
if (productMode === 'type') { if (productMode === 'type') {
deleteProductById(props.row.id); deleteProductById(props.row.id);
} }
if (productMode === 'group') { if (productMode === 'group') {
deleteProductById(props.row.id) deleteProductById(props.row.id);
} }
}" }
"
> >
<q-icon <q-icon
name="mdi-trash-can-outline" name="mdi-trash-can-outline"
@ -1694,10 +1733,16 @@ watch(inputSearchProductAndService, async () => {
@click=" @click="
async () => { async () => {
if (productMode === 'type') { if (productMode === 'type') {
toggleStatusType(props.row.id, props.row.status); toggleStatusType(
props.row.id,
props.row.status,
);
} }
if (productMode === 'group') { if (productMode === 'group') {
toggleStatusGroup(props.row.id, props.row.status); toggleStatusGroup(
props.row.id,
props.row.status,
);
} }
} }
" "
@ -1754,9 +1799,8 @@ watch(inputSearchProductAndService, async () => {
drawerInfo = true; drawerInfo = true;
} }
if (productMode === 'group') { if (productMode === 'group') {
currentStatusProduct =
props.row.status === 'INACTIVE';
currentStatusProduct = props.row.status === 'INACTIVE';
clearFormGroup(); clearFormGroup();
assignFormDataGroup(props.row); assignFormDataGroup(props.row);
isEdit = false; isEdit = false;
@ -1775,7 +1819,6 @@ watch(inputSearchProductAndService, async () => {
drawerInfo = true; drawerInfo = true;
} }
if (productMode === 'group') { if (productMode === 'group') {
clearFormGroup(); clearFormGroup();
assignFormDataGroup(props.row); assignFormDataGroup(props.row);
isEdit = true; isEdit = true;
@ -1791,7 +1834,7 @@ watch(inputSearchProductAndService, async () => {
deleteProductById(props.row.id); deleteProductById(props.row.id);
} }
if (productMode === 'group') { if (productMode === 'group') {
deleteProductById(props.row.id) deleteProductById(props.row.id);
} }
} }
" "
@ -1809,7 +1852,6 @@ watch(inputSearchProductAndService, async () => {
flowStore.rotate(); flowStore.rotate();
} }
if (productMode === 'group') { if (productMode === 'group') {
pathGroupName = props.row.name; pathGroupName = props.row.name;
currentId = props.row.id; currentId = props.row.id;
productMode = 'type'; productMode = 'type';
@ -2149,22 +2191,25 @@ watch(inputSearchProductAndService, async () => {
</q-menu> </q-menu>
</q-btn> </q-btn>
<q-select <q-select
v-if="modeView === false" v-if="modeView === false"
id="select-field" id="select-field"
for="select-field" for="select-field"
:options=" { :options="
{
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="
{ product: tbControl.product.fieldSelected, {
product: tbControl.product.fieldSelected,
service: tbControl.service.fieldSelected, service: tbControl.service.fieldSelected,
}[productAndServiceTab] }[productAndServiceTab]
" "
@update:model-value="(v) => tbControl[productAndServiceTab].fieldSelected = v @update:model-value="
(v) => (tbControl[productAndServiceTab].fieldSelected = v)
" "
option-label="label" option-label="label"
option-value="value" option-value="value"
@ -2356,11 +2401,18 @@ watch(inputSearchProductAndService, async () => {
margin-bottom: var(--size-2); margin-bottom: var(--size-2);
" "
> >
<div class="table__icon" :class="`icon-color-${productAndServiceTab ==='product' ? 'green' : 'orange'}`"> <div
class="table__icon"
:class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
>
<q-icon <q-icon
size="md" size="md"
style="scale: 0.8" style="scale: 0.8"
:name="productAndServiceTab === 'product' ? 'mdi-folder' : 'mdi-server-network'" :name="
productAndServiceTab === 'product'
? 'mdi-folder'
: 'mdi-server-network'
"
/> />
</div> </div>
</div> </div>
@ -2420,26 +2472,44 @@ watch(inputSearchProductAndService, async () => {
) )
" "
> >
<div
<div class="row tags-color-green q-gutter-x-md no-wrap items-center text-right "> class="row tags-color-green q-gutter-x-md no-wrap items-center text-right"
<div class="tags col-3 column ellipsis-2-lines " style=" min-width: 50px;"> >
<div
class="tags col-3 column ellipsis-2-lines"
style="min-width: 50px"
>
<div class="col-4">{{ $t('salePrice') }}</div> <div class="col-4">{{ $t('salePrice') }}</div>
<div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.price || 0 , 2) }}</div> <div class="col-4 text-weight-bold">
{{ formatNumberDecimal(props.row.price || 0, 2) }}
</div> </div>
<div class="tags col-3 column ellipsis-2-lines" style=" min-width: 50px;"> </div>
<div
class="tags col-3 column ellipsis-2-lines"
style="min-width: 50px"
>
<div class="col-4">{{ $t('agentPrice') }}</div> <div class="col-4">{{ $t('agentPrice') }}</div>
<div class="col-4 text-weight-bold">{{ formatNumberDecimal(props.row.agentPrice || 0 , 2) }}</div> <div class="col-4 text-weight-bold">
{{
formatNumberDecimal(props.row.agentPrice || 0, 2)
}}
</div> </div>
<div class="tags col-3 column ellipsis-2-lines" style=" min-width: 50px;"> </div>
<div
class="tags col-3 column ellipsis-2-lines"
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">{{ formatNumberDecimal(props.row.processingPrice || 0 , 2) }}</div> <div class="col-4 text-weight-bold">
{{
formatNumberDecimal(
props.row.processingPrice || 0,
2,
)
}}
</div>
</div> </div>
</div> </div>
</q-td> </q-td>
<q-td <q-td
@ -3371,7 +3441,6 @@ watch(inputSearchProductAndService, async () => {
} }
.table__icon { .table__icon {
background-color: hsla(var(--_color) / 0.15); background-color: hsla(var(--_color) / 0.15);
color: hsla(var(--_color) / 1); color: hsla(var(--_color) / 1);
@ -3397,8 +3466,6 @@ watch(inputSearchProductAndService, async () => {
transform: rotate(-45deg); transform: rotate(-45deg);
color: hsla(var(--_branch-card-bg) / 1); color: hsla(var(--_branch-card-bg) / 1);
} }
} }
.tags { .tags {
@ -3408,7 +3475,4 @@ watch(inputSearchProductAndService, async () => {
border-radius: var(--radius-2); border-radius: var(--radius-2);
padding-inline: var(--size-2); padding-inline: var(--size-2);
} }
</style> </style>