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

refactor: แสดง tree

Browse source
This commit is contained in:
Net 2024-07-15 14:12:53 +07:00
parent 382ebe6e06
commit 7dc01a301d
1 changed files with 328 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,7 @@ import {
Attributes, Attributes,
ServiceAndProduct, ServiceAndProduct,
} from 'src/stores/product-service/types'; } from 'src/stores/product-service/types';
import { computed } from 'vue';
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const utilsStore = useUtilsStore(); const utilsStore = useUtilsStore();
@ -94,7 +95,8 @@ const {
fetchListProductAndService, fetchListProductAndService,
} = productServiceStore; } = productServiceStore;
const { workNameItems } = storeToRefs(productServiceStore); const { workNameItems, recordTreeProductType } =
storeToRefs(productServiceStore);
const stat = ref< const stat = ref<
{ {
@ -138,6 +140,30 @@ const stat = ref<
const { t } = useI18n(); const { t } = useI18n();
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL); const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
const expandedTree = ref<string[]>([]);
const editByTree = ref<'group' | 'type' | undefined>();
const treeProductTypeAndGroup = computed(() => {
const tempValue =
productGroup.value?.map((item) => {
return {
...item,
type: 'group',
children:
item.id === currentId.value
? recordTreeProductType.value[currentId.value]?.map((item) => ({
...item,
type: 'type',
})) ?? []
: recordTreeProductType.value[item.id]?.map((item) => ({
...item,
type: 'type',
})) ?? [],
};
}) ?? [];
return tempValue;
});
const inputSearch = ref(''); const inputSearch = ref('');
const inputSearchProductAndService = ref(''); const inputSearchProductAndService = ref('');
@ -747,6 +773,25 @@ async function deleteProductById(productId?: string) {
persistent: true, persistent: true,
message: t('deleteConfirmMessage'), message: t('deleteConfirmMessage'),
action: async () => { action: async () => {
if (editByTree !== undefined) {
if (editByTree.value === 'type') {
// Product Type
await deleteProductServiceType(productId ?? currentIdType.value);
await fetchListType();
}
if (editByTree.value === 'group') {
// Product Group
const res = await deleteProductService(productId ?? currentId.value);
if (res) {
}
await fetchListGroups();
}
flowStore.rotate();
calculateStats();
editByTree.value = undefined;
drawerInfo.value = false;
} else {
if (productMode.value === 'type') { if (productMode.value === 'type') {
// Product Type // Product Type
await deleteProductServiceType(productId ?? currentIdType.value); await deleteProductServiceType(productId ?? currentIdType.value);
@ -759,9 +804,11 @@ async function deleteProductById(productId?: string) {
} }
await fetchListGroups(); await fetchListGroups();
} }
flowStore.rotate(); flowStore.rotate();
calculateStats(); calculateStats();
drawerInfo.value = false; drawerInfo.value = false;
}
}, },
cancel: () => {}, cancel: () => {},
}); });
@ -1163,6 +1210,10 @@ onMounted(async () => {
calculateStats(); calculateStats();
await fetchListGroups(); await fetchListGroups();
console.log(treeProductTypeAndGroup.value);
console.log('ddd');
flowStore.rotate(); flowStore.rotate();
}); });
@ -1341,50 +1392,112 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
<div class="col" style="position: relative"> <div class="col" style="position: relative">
<div class="scroll" style="position: absolute; inset: 0"> <div
<!-- <q-tree class="q-pa-md scroll surface-1"
:nodes="treeData" style="position: absolute; inset: 0"
>
<q-tree
:nodes="treeProductTypeAndGroup"
node-key="id" node-key="id"
label-key="name" label-key="name"
children-key="branch" children-key="children"
style="color: var(--foreground)" v-model:expanded="expandedTree"
> >
<template #default-header="{ node }"> <template #default-header="{ node }">
<div <div
class="row items-center justify-between full-width no-wrap" @click.stop="
> async () => {
<span>{{ node.name }}</span> if (node.type === 'group' && node._count.type > 0) {
<div pathGroupName = node.name;
class="row q-gutter-xs items-center no-wrap" currentId = node.id;
@click.stop productMode = 'type';
await fetchListType();
expandedTree.push(node.id);
flowStore.rotate();
}
}
"
class="column full-width items-center no-wrap"
:class="{
'cursor-pointer':
node.type === 'group' && node._count.type > 0,
}"
> >
<div class="col row full-width">
<div class="col-9">{{ node.name }}</div>
<div class="col no-wrap">
<q-btn <q-btn
v-if="node.isHeadOffice" icon="mdi-eye-outline"
:id="`create-sub-branch-btn-${node.name}`" :id="`btn-tree-eye-${node.name}`"
@click.stop=""
icon="mdi-file-plus-outline"
size="sm" size="sm"
dense dense
round round
flat flat
@click.stop="
() => {
if (node.type === 'type') {
editByTree = 'type';
currentStatusProduct =
node.status === 'INACTIVE';
clearFormGroup();
currentIdType = node.id;
assignFormDataGroup(node);
isEdit = false;
drawerInfo = true;
}
if (node.type === 'group') {
editByTree = 'group';
currentStatusProduct =
node.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(node);
isEdit = false;
currentId = node.id;
drawerInfo = true;
}
}
"
/> />
<q-btn <q-btn
:id="`view-detail-btn-${node.name}`"
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
:id="`btn-tree-dots-${node.name}`"
size="sm" size="sm"
dense dense
round round
flat flat
@click.stop
:key="node.id"
> >
<q-menu class="bordered"> <q-menu class="bordered">
<q-list v-close-popup> <q-list v-close-popup>
<q-item <q-item
v-close-popup
clickable
:id="`view-detail-btn-${node.name}-view`" :id="`view-detail-btn-${node.name}-view`"
@click.stop=" @click.stop="
() => {
editByTree = node.type;
if (node.type === 'type') {
currentStatusProduct =
node.status === 'INACTIVE';
clearFormGroup();
currentIdType = node.id;
assignFormDataGroup(node);
isEdit = false;
drawerInfo = true;
}
if (node.type === 'group') {
currentStatusProduct =
node.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(node);
isEdit = false;
currentId = node.id;
drawerInfo = true;
}
}
" "
clickable
dense dense
class="row q-py-sm" class="row q-py-sm"
style="white-space: nowrap" style="white-space: nowrap"
@ -1395,22 +1508,36 @@ watch(inputSearchProductAndService, async () => {
size="xs" size="xs"
style="color: hsl(var(--green-6-hsl))" style="color: hsl(var(--green-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('viewDetail') }} {{ $t('viewDetail') }}
</span> </span>
</q-item> </q-item>
<q-item <q-item
:id="`view-detail-btn-${node.name}-edit`" :id="`view-detail-btn-${node.name}-edit`"
v-close-popup
clickable clickable
dense dense
class="row q-py-sm" class="row q-py-sm"
style="white-space: nowrap" style="white-space: nowrap"
@click=" @click.stop="
() => { () => {
editByTree = node.type;
if (node.type === 'type') {
clearFormGroup();
currentIdType = node.id;
assignFormDataGroup(node);
isEdit = true;
drawerInfo = true;
}
if (node.type === 'group') {
clearFormGroup();
assignFormDataGroup(node);
isEdit = true;
currentId = node.id;
drawerInfo = true;
}
} }
" "
> >
@ -1420,24 +1547,33 @@ watch(inputSearchProductAndService, async () => {
size="xs" size="xs"
style="color: hsl(var(--cyan-6-hsl))" style="color: hsl(var(--cyan-6-hsl))"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('edit') }} {{ $t('edit') }}
</span> </span>
</q-item> </q-item>
<q-item <q-item
v-close-popup
:id="`view-detail-btn-${node.name}-delete`" :id="`view-detail-btn-${node.name}-delete`"
dense dense
:clickable="node.status === 'CREATED'" :clickable="node.status === 'CREATED'"
class="row" class="row"
:class="{ :class="{
'surface-3': node.status !== 'CREATED', 'surface-3': node.status !== 'CREATED',
'app-text-muted': 'app-text-muted': node.status !== 'CREATED',
node.status !== 'CREATED',
}" }"
style="white-space: nowrap" style="white-space: nowrap"
@click="" @click.stop="
() => {
editByTree = node.type;
if (node.type === 'type') {
deleteProductById(node.id);
}
if (node.type === 'group') {
deleteProductById(node.id);
}
}
"
> >
<q-icon <q-icon
name="mdi-trash-can-outline" name="mdi-trash-can-outline"
@ -1448,9 +1584,7 @@ watch(inputSearchProductAndService, async () => {
node.status === 'CREATED', node.status === 'CREATED',
}" }"
/> />
<span <span class="col-9 q-px-md flex items-center">
class="col-9 q-px-md flex items-center"
>
{{ $t('delete') }} {{ $t('delete') }}
</span> </span>
</q-item> </q-item>
@ -1467,16 +1601,23 @@ watch(inputSearchProductAndService, async () => {
? $t('switchOnLabel') ? $t('switchOnLabel')
: $t('switchOffLabel') : $t('switchOffLabel')
" "
@click=" @click.stop="
async () => { async () => {
if (node.type === 'type') {
toggleStatusType(
node.id,
node.status,
);
}
if (node.type === 'group') {
toggleStatusGroup(
node.id,
node.status,
);
}
} }
" "
:model-value=" :model-value="node.status !== 'INACTIVE'"
node.status === 'CREATED' ||
node.status === 'ACTIVE'
"
/> />
</div> </div>
</q-item-section> </q-item-section>
@ -1486,8 +1627,13 @@ watch(inputSearchProductAndService, async () => {
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="col row full-width">
<div class="col- app-text-muted">{{ node.code }}</div>
</div>
</div>
</template> </template>
</q-tree> --> </q-tree>
</div> </div>
</div> </div>
</div> </div>
@ -2978,14 +3124,46 @@ watch(inputSearchProductAndService, async () => {
ref="formDialogRef" ref="formDialogRef"
v-model:drawerOpen="drawerInfo" v-model:drawerOpen="drawerInfo"
:title=" :title="
$t(productMode === 'group' ? 'productGroup' : 'productType', { $t(
editByTree !== undefined
? editByTree === 'group'
? 'productGroup'
: editByTree === 'type'
? 'productType'
: undefined
: productMode === 'group'
? 'productGroup'
: productMode === 'type'
? 'productType'
: undefined,
{
name: formDataGroup.code, name: formDataGroup.code,
}) },
)
" "
:undo="() => undoProductGroup()" :undo="() => undoProductGroup()"
:isEdit="isEdit" :isEdit="isEdit"
:editData="() => (isEdit = true)" :editData="() => (isEdit = true)"
:submit="() => (productMode === 'type' ? submitType() : submitGroup())" :submit="
() => {
if (editByTree !== undefined) {
if (editByTree === 'group') {
submitGroup();
}
if (editByTree === 'type') {
submitType();
}
editByTree = undefined;
} else {
if (productMode === 'group') {
submitGroup();
}
if (productMode === 'type') {
submitType();
}
}
}
"
:delete-data="() => deleteProductById()" :delete-data="() => deleteProductById()"
:close="() => (drawerInfo = false)" :close="() => (drawerInfo = false)"
> >