feat: ระบบย้อนกลับ
This commit is contained in:
Net
parent
6afe1802f3
commit
944bf014d1
1 changed files with 173 additions and 104 deletions
|
|
@ -78,8 +78,8 @@ const currentHq = ref<{ id: string; code: string }>({
|
||||||
code: '',
|
code: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const beforeBranch = ref<{ id: string | undefined; code: string }>({
|
const beforeBranch = ref<{ id: string; code: string }>({
|
||||||
id: undefined,
|
id: '',
|
||||||
code: '',
|
code: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -158,109 +158,175 @@ function clearData() {
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="row" style="flex-grow: 1; flex-wrap: nowrap">
|
<div class="row" style="flex-grow: 1; flex-wrap: nowrap">
|
||||||
<div class="tree-container q-pa-md bordered-r">
|
<div class="tree-container q-pa-md bordered-r">
|
||||||
<q-tree
|
<div class="row">
|
||||||
:nodes="treeData"
|
<Icon
|
||||||
node-key="id"
|
icon="ep:arrow-left-bold"
|
||||||
label-key="name"
|
width="21px"
|
||||||
children-key="branch"
|
class="q-mr-sm"
|
||||||
>
|
:class="{
|
||||||
<template #default-header="{ node }">
|
'color-icon-arrow ': !currentHq.id,
|
||||||
<div class="row items-center justify-between full-width">
|
'cursor-pointer': currentHq.id,
|
||||||
<span>{{ node.name }}</span>
|
}"
|
||||||
<div class="q-gutter-xs" @click.stop>
|
@click="
|
||||||
<q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
|
() => {
|
||||||
<q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
|
if (currentHq.id) {
|
||||||
<q-menu class="bordered">
|
beforeBranch = currentHq;
|
||||||
<q-list v-close-popup>
|
currentHq = { id: '', code: '' };
|
||||||
<q-item
|
fieldSelectedBranch = {
|
||||||
clickable
|
label: t('branchHQLabel'),
|
||||||
dense
|
value: 'branchHQLabel',
|
||||||
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
|
|
||||||
clickable
|
|
||||||
dense
|
|
||||||
class="row q-py-sm"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
>
|
|
||||||
<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
|
|
||||||
dense
|
|
||||||
clickable
|
|
||||||
class="row"
|
|
||||||
style="white-space: nowrap"
|
|
||||||
>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-trash-can-outline"
|
|
||||||
size="xs"
|
|
||||||
class="col-3"
|
|
||||||
style="color: hsl(var(--red-6-hsl))"
|
|
||||||
/>
|
|
||||||
<span class="col-9 q-px-md flex items-center">
|
|
||||||
{{ $t('delete') }}
|
|
||||||
</span>
|
|
||||||
</q-item>
|
|
||||||
|
|
||||||
<q-item dense>
|
<Icon
|
||||||
<q-item-section class="q-py-sm">
|
icon="ep:arrow-right-bold"
|
||||||
<div class="q-pa-sm surface-2 rounded">
|
width="21px"
|
||||||
<q-toggle
|
class="q-mr-md"
|
||||||
dense
|
:class="{
|
||||||
size="sm"
|
'color-icon-arrow ': !beforeBranch.id,
|
||||||
:label="
|
'cursor-pointer': beforeBranch.id,
|
||||||
node.status !== 'INACTIVE'
|
}"
|
||||||
? $t('switchOnLabel')
|
@click="
|
||||||
: $t('switchOffLabel')
|
() => {
|
||||||
"
|
if (beforeBranch.id) {
|
||||||
@click="
|
currentHq = beforeBranch;
|
||||||
async () => {
|
beforeBranch = { id: '', code: '' };
|
||||||
const res = await branchStore.editById(
|
fieldSelectedBranch = {
|
||||||
node.id,
|
label: '',
|
||||||
{
|
value: '',
|
||||||
status:
|
};
|
||||||
node.status !== 'INACTIVE'
|
}
|
||||||
? 'INACTIVE'
|
}
|
||||||
: 'ACTIVE',
|
"
|
||||||
},
|
/>
|
||||||
);
|
|
||||||
if (res) node.status = res.status;
|
<q-space />
|
||||||
}
|
|
||||||
"
|
<Icon
|
||||||
:model-value="
|
icon="pixelarticons:plus"
|
||||||
node.status === 'CREATED' ||
|
height="26"
|
||||||
node.status === 'ACTIVE'
|
class="color-icon-plus cursor-pointer"
|
||||||
"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
</q-item-section>
|
<div class="bordered rounded q-mt-md">
|
||||||
</q-item>
|
<div
|
||||||
</q-list>
|
class="bordered-b q-pl-sm text-weight-bold surface-0"
|
||||||
</q-menu>
|
style="height: 50px; display: flex; align-items: center"
|
||||||
</q-btn>
|
>
|
||||||
|
<Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
|
||||||
|
ทั้งหมด
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-tree
|
||||||
|
:nodes="treeData"
|
||||||
|
node-key="id"
|
||||||
|
label-key="name"
|
||||||
|
children-key="branch"
|
||||||
|
>
|
||||||
|
<template #default-header="{ node }">
|
||||||
|
<div
|
||||||
|
class="row items-center justify-between full-width no-wrap"
|
||||||
|
>
|
||||||
|
<span>{{ node.name }}</span>
|
||||||
|
<div class="q-gutter-xs flex no-wrap" @click.stop>
|
||||||
|
<q-btn icon="mdi-file-plus-outline" fab-mini unelevated />
|
||||||
|
<q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
|
||||||
|
<q-menu class="bordered">
|
||||||
|
<q-list v-close-popup>
|
||||||
|
<q-item
|
||||||
|
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
|
||||||
|
clickable
|
||||||
|
dense
|
||||||
|
class="row q-py-sm"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
dense
|
||||||
|
clickable
|
||||||
|
class="row"
|
||||||
|
style="white-space: nowrap"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
name="mdi-trash-can-outline"
|
||||||
|
size="xs"
|
||||||
|
class="col-3"
|
||||||
|
style="color: hsl(var(--red-6-hsl))"
|
||||||
|
/>
|
||||||
|
<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
|
||||||
|
dense
|
||||||
|
size="sm"
|
||||||
|
:label="
|
||||||
|
node.status !== 'INACTIVE'
|
||||||
|
? $t('switchOnLabel')
|
||||||
|
: $t('switchOffLabel')
|
||||||
|
"
|
||||||
|
@click="
|
||||||
|
async () => {
|
||||||
|
const res = await branchStore.editById(
|
||||||
|
node.id,
|
||||||
|
{
|
||||||
|
status:
|
||||||
|
node.status !== 'INACTIVE'
|
||||||
|
? 'INACTIVE'
|
||||||
|
: 'ACTIVE',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (res) node.status = res.status;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:model-value="
|
||||||
|
node.status === 'CREATED' ||
|
||||||
|
node.status === 'ACTIVE'
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</q-tree>
|
||||||
</q-tree>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="branch-wrapper q-pa-md">
|
<div class="branch-wrapper q-pa-md">
|
||||||
<div class="q-mb-md flex" style="gap: var(--size-4)">
|
<div class="q-mb-md flex" style="gap: var(--size-4)">
|
||||||
|
|
@ -355,7 +421,10 @@ function clearData() {
|
||||||
code: item.branchLabelCode,
|
code: item.branchLabelCode,
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeBranch = currentHq;
|
beforeBranch = {
|
||||||
|
id: '',
|
||||||
|
code: '',
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue