fix: 01 sub branch stat, hold dialog, tree table
This commit is contained in:
puriphatt
parent
61ccab506e
commit
97c5c88721
1 changed files with 110 additions and 19 deletions
|
|
@ -30,7 +30,7 @@ const $q = useQuasar();
|
|||
const { t } = useI18n();
|
||||
const utilsStore = useUtilsStore();
|
||||
|
||||
const labelBtnStatus = ref<string>(t('all'));
|
||||
const holdDialog = ref(false);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -492,6 +492,11 @@ function changeTitle(
|
|||
return '';
|
||||
}
|
||||
|
||||
function handleHold() {
|
||||
if ($q.screen.gt.xs) return;
|
||||
holdDialog.value = true;
|
||||
}
|
||||
|
||||
watch(locale, () => {
|
||||
fieldSelectedBranch.value = {
|
||||
label: t(`${fieldSelectedBranch.value.label}`),
|
||||
|
|
@ -524,13 +529,26 @@ watch(
|
|||
style="transition: 0.1s ease-in-out"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<transition name="slide">
|
||||
<StatCard
|
||||
v-if="!hideStat"
|
||||
class="q-pb-md"
|
||||
label-i18n
|
||||
:branch="stats"
|
||||
:branch="
|
||||
expandedTree[0]
|
||||
? [
|
||||
{
|
||||
...stats[1],
|
||||
count: (() => {
|
||||
const foundItem = treeData.find(
|
||||
(i) => i.id === expandedTree[0],
|
||||
);
|
||||
return foundItem ? foundItem._count.branch : 0;
|
||||
})(),
|
||||
},
|
||||
]
|
||||
: stats
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
/>
|
||||
</transition>
|
||||
|
|
@ -568,10 +586,10 @@ watch(
|
|||
<template v-slot:before>
|
||||
<div class="surface-1 column full-height">
|
||||
<div
|
||||
class="row bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
||||
class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
|
||||
:style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
|
||||
>
|
||||
<div class="col">จัดการสาขาทั้งหมด</div>
|
||||
<div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
|
|
@ -601,20 +619,21 @@ watch(
|
|||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="scroll q-pa-md">
|
||||
<div class="col full-width">
|
||||
<div class="q-pa-md">
|
||||
<q-tree
|
||||
:nodes="treeData"
|
||||
node-key="id"
|
||||
label-key="name"
|
||||
children-key="branch"
|
||||
v-model:expanded="expandedTree"
|
||||
color="transparent"
|
||||
v-model:expanded="expandedTree"
|
||||
style="color: var(--foreground)"
|
||||
>
|
||||
<template #default-header="{ node }">
|
||||
<div
|
||||
class="column full-width q-py-sm"
|
||||
class="full-width q-py-sm"
|
||||
v-touch-hold.mouse="handleHold"
|
||||
@click.stop="
|
||||
() => {
|
||||
if (
|
||||
|
|
@ -658,21 +677,29 @@ watch(
|
|||
<div
|
||||
class="row col items-center justify-between full-width no-wrap"
|
||||
>
|
||||
<span
|
||||
:class="{
|
||||
'text-weight-bold': expandedTree[0] === node.id,
|
||||
'app-text-info': expandedTree[0] === node.id,
|
||||
}"
|
||||
>
|
||||
{{ node.name }}
|
||||
<div class="app-text-muted text-caption">
|
||||
<div class="col row">
|
||||
<span
|
||||
class="ellipsis col-12"
|
||||
style="white-space: nowrap"
|
||||
:class="{
|
||||
'text-weight-bold':
|
||||
expandedTree[0] === node.id,
|
||||
'app-text-info': expandedTree[0] === node.id,
|
||||
}"
|
||||
>
|
||||
{{ node.name }}
|
||||
</span>
|
||||
<span
|
||||
class="app-text-muted text-caption ellipsis"
|
||||
>
|
||||
{{ node.code }}
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row q-gutter-xs items-center no-wrap"
|
||||
@click.stop
|
||||
v-if="$q.screen.gt.xs"
|
||||
>
|
||||
<q-btn
|
||||
v-if="node.isHeadOffice"
|
||||
|
|
@ -1048,6 +1075,8 @@ watch(
|
|||
id: '',
|
||||
code: '',
|
||||
};
|
||||
expandedTree = [];
|
||||
expandedTree.push(props.row.id);
|
||||
}
|
||||
}
|
||||
"
|
||||
|
|
@ -1275,6 +1304,8 @@ watch(
|
|||
id: '',
|
||||
code: '',
|
||||
};
|
||||
expandedTree = [];
|
||||
expandedTree.push(props.row.id);
|
||||
}
|
||||
}
|
||||
"
|
||||
|
|
@ -1659,6 +1690,66 @@ watch(
|
|||
</InfoForm>
|
||||
</template>
|
||||
</DrawerInfo>
|
||||
|
||||
<q-dialog v-model="holdDialog" position="bottom">
|
||||
<div class="surface-1 full-width rounded column" style="height: 280px">
|
||||
<div class="flex q-py-sm justify-center full-width">
|
||||
<div
|
||||
class="rounded"
|
||||
style="
|
||||
width: 8%;
|
||||
height: 4px;
|
||||
background-color: hsla(0, 0%, 50%, 0.75);
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<q-list>
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-file-plus" class="app-text-muted-2" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
{{ $t('formDialogTitleCreateSubBranch') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="mdi-eye-outline"
|
||||
style="color: hsl(var(--green-6-hsl))"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ $t('viewDetail') }}</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="mdi-pencil-outline"
|
||||
style="color: hsl(var(--cyan-6-hsl))"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ $t('edit') }}</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="mdi-trash-can-outline" class="app-text-negative" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ $t('delete') }}</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-toggle dense size="sm" :model-value="holdDialog" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ $t('switchOnLabel') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue