Merge branch 'dev/net' into develop
This commit is contained in:
Net
commit
74cdbfe91b
1 changed files with 405 additions and 13 deletions
|
|
@ -1,38 +1,152 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import useBranchStore from 'stores/branch';
|
||||||
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
import BtnAddComponet from 'components/01_branch-management/BtnAddComponent.vue';
|
||||||
import StatCardComponet from 'components/StatCardComponet.vue';
|
import TableCardComponet from 'components/01_branch-management/TableCardComponent.vue';
|
||||||
import TooltipComponet from 'src/components/TooltipComponet.vue';
|
import CardDetailsComponent from 'components/01_branch-management/CardDetailsComponent.vue';
|
||||||
|
import StatCardComponet from 'components/StatCardComponent.vue';
|
||||||
|
import TooltipComponet from 'components/TooltipComponent.vue';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
|
||||||
|
const BranchStore = useBranchStore();
|
||||||
|
const test = ref<string>('');
|
||||||
|
const testDate = ref<string>();
|
||||||
|
|
||||||
|
const shape = ref<boolean>(false);
|
||||||
|
|
||||||
|
const inputSelectBranch = ref<string>('ทั้งหมด');
|
||||||
|
const inputFilter = ref<string>('คอลัมน์');
|
||||||
|
const inputSearch = ref<string>('');
|
||||||
|
const optionsBranch: string[] = ['ทั้งหมด', 'สำนักงานใหญ่', 'สาขา'];
|
||||||
|
const optionsFilter: string[] = [
|
||||||
|
'ชื่อสาขา',
|
||||||
|
'ที่อยู่',
|
||||||
|
'เบอร์โทร',
|
||||||
|
'สำนักงานใหญ่',
|
||||||
|
'ประเภท',
|
||||||
|
'สถานะ',
|
||||||
|
];
|
||||||
|
|
||||||
|
const expanded = ref<string[]>([]);
|
||||||
|
|
||||||
|
const rows: {
|
||||||
|
name: string;
|
||||||
|
branchName: string;
|
||||||
|
address: string;
|
||||||
|
phonNumber: string;
|
||||||
|
Headquarters: string;
|
||||||
|
type: string;
|
||||||
|
status: string;
|
||||||
|
}[] = [
|
||||||
|
{
|
||||||
|
name: 'HQ0001',
|
||||||
|
branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส',
|
||||||
|
address: '192',
|
||||||
|
phonNumber: '0639195701',
|
||||||
|
Headquarters: 'HQ0001',
|
||||||
|
type: 'สำนักงานใหญ่',
|
||||||
|
status: 'เปิดใช้งาน',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'HQ0002',
|
||||||
|
branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
|
||||||
|
address: '192',
|
||||||
|
phonNumber: '0639195701',
|
||||||
|
Headquarters: 'HQ0001',
|
||||||
|
type: 'สำนักงานใหญ่',
|
||||||
|
status: 'เปิดใช้งาน',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
name: 'HQ0002',
|
||||||
|
branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
|
||||||
|
address: '192',
|
||||||
|
phonNumber: '0639195701',
|
||||||
|
Headquarters: 'HQ0001',
|
||||||
|
type: 'สำนักงานใหญ่',
|
||||||
|
status: 'เปิดใช้งาน',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const simple = ref<
|
||||||
|
{
|
||||||
|
label: string;
|
||||||
|
isHeadOffice?: boolean;
|
||||||
|
children: {
|
||||||
|
label: string;
|
||||||
|
children?: { label: string }[];
|
||||||
|
}[];
|
||||||
|
}[]
|
||||||
|
>([
|
||||||
|
{
|
||||||
|
label: 'สำนักงานใหม่ 1',
|
||||||
|
isHeadOffice: true,
|
||||||
|
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: 'BR1001',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: 'BU2001',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Bui1001',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: 'สำนักงานใหม่ 2',
|
||||||
|
isHeadOffice: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: 'Bc1001',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Ba1001',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const branchStat = ref<
|
const branchStat = ref<
|
||||||
{
|
{
|
||||||
amount: string;
|
amount: number;
|
||||||
label: string;
|
label: string;
|
||||||
}[]
|
}[]
|
||||||
>([
|
>([
|
||||||
{
|
{
|
||||||
amount: '1',
|
amount: 1,
|
||||||
label: 'สำนักงานใหญ่ 1',
|
label: 'สำนักงานใหญ่ 1',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
amount: '2',
|
amount: 2,
|
||||||
label: 'สำนักงานใหญ่ 2',
|
label: 'สำนักงานใหญ่ 2',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amount: '3',
|
amount: 3,
|
||||||
label: 'สำนักงานใหญ่ 3',
|
label: 'สำนักงานใหญ่ 3',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amount: '4',
|
amount: 4,
|
||||||
label: 'สำนักงานใหญ่ 4',
|
label: 'สำนักงานใหญ่ 4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
amount: '5',
|
amount: 5,
|
||||||
label: 'สำนักงานใหญ่ 5',
|
label: 'สำนักงานใหญ่ 5',
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
|
||||||
|
console.log(BranchStore.data);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
@ -40,15 +154,23 @@ const branchStat = ref<
|
||||||
{{ $t('branchManagement') }}
|
{{ $t('branchManagement') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<app-box bordered class="q-mb-md">
|
<app-box
|
||||||
|
bordered
|
||||||
|
class="q-mb-md"
|
||||||
|
:class="{ 'bg-card-branch-title': $q.dark.isActive }"
|
||||||
|
>
|
||||||
<stat-card-componet :branch="branchStat" />
|
<stat-card-componet :branch="branchStat" />
|
||||||
</app-box>
|
</app-box>
|
||||||
|
|
||||||
<app-box bordered style="width: 100%; height: 500px">
|
<app-box v-if="false" bordered style="width: 100%; height: 500px">
|
||||||
<div class="column" style="height: 100%">
|
<div class="column" style="height: 100%">
|
||||||
<div class="col-1 self-end">
|
<div class="col-1 self-end">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<tooltip-componet imgSrc="img-table-" />
|
<tooltip-componet
|
||||||
|
title="branchNoMainOfficeYet"
|
||||||
|
caption="branchClickToCreateMainOffice"
|
||||||
|
imgSrc="img-table-"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -67,7 +189,277 @@ const branchStat = ref<
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</app-box>
|
</app-box>
|
||||||
|
|
||||||
|
<q-card
|
||||||
|
class="bordered branch-main-variable-color"
|
||||||
|
:class="{ dark: $q.dark.isActive }"
|
||||||
|
style="width: 100%; height: 500px"
|
||||||
|
>
|
||||||
|
<q-card-section class="bordered bg-card-branch-title">
|
||||||
|
<div class="row items-center">
|
||||||
|
<div
|
||||||
|
class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
|
||||||
|
>
|
||||||
|
{{ $t('headQuarters') }}
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<q-input
|
||||||
|
style="border-radius: 6px"
|
||||||
|
class="bordered"
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
v-model="test"
|
||||||
|
label="ค้นหา"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<iconify-icon icon="ic:baseline-search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-section class="no-padding row" style="height: 423px">
|
||||||
|
<div class="bordered q-pa-md bg-branch-tree-box" style="width: 21%">
|
||||||
|
<div
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
console.log('test');
|
||||||
|
}
|
||||||
|
"
|
||||||
|
class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
|
||||||
|
>
|
||||||
|
<div class="text-h4 q-mr-md">+</div>
|
||||||
|
{{ $t('btnCreate') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-scroll-area
|
||||||
|
class="bordered q-pa-sm bg-branch-tree-scroll"
|
||||||
|
style="height: 350px; width: 100%; border-radius: 6px"
|
||||||
|
>
|
||||||
|
<div class="col">
|
||||||
|
<q-tree
|
||||||
|
:nodes="simple"
|
||||||
|
dense
|
||||||
|
node-key="label"
|
||||||
|
v-model:expanded="expanded"
|
||||||
|
>
|
||||||
|
<template #default-header="prop">
|
||||||
|
<div
|
||||||
|
class="q-pa-sm color-brach-tree-text"
|
||||||
|
:class="{
|
||||||
|
'color-tree-active': expanded.includes(prop.node.label),
|
||||||
|
'bg-branch-tree':
|
||||||
|
prop.node.isHeadOffice &&
|
||||||
|
expanded.includes(prop.node.label),
|
||||||
|
'dark-tree': $q.dark.isActive,
|
||||||
|
}"
|
||||||
|
style="border-radius: 6px"
|
||||||
|
>
|
||||||
|
{{ prop.node.label }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<q-space />
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="color-brach-tree-btn"
|
||||||
|
@click.stop=""
|
||||||
|
size="xl"
|
||||||
|
flat
|
||||||
|
v-if="prop.node.isHeadOffice"
|
||||||
|
dense
|
||||||
|
>
|
||||||
|
<iconify-icon
|
||||||
|
v-if="expanded.includes(prop.node.label)"
|
||||||
|
icon="eva:file-add-fill"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<iconify-icon v-else icon="eva:file-add-outline" />
|
||||||
|
</q-btn>
|
||||||
|
|
||||||
|
<q-btn
|
||||||
|
class="color-brach-tree-btn"
|
||||||
|
@click.stop=""
|
||||||
|
size="xl"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
name="menu"
|
||||||
|
>
|
||||||
|
<iconify-icon icon="ri:more-2-fill" />
|
||||||
|
<q-menu class="bordered" style="width: 150px">
|
||||||
|
<q-list class="q-pa-sm">
|
||||||
|
<q-item clickable v-close-popup class="no-padding">
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon
|
||||||
|
style="color: hsla(var(--cyan-6-hsl) / 1)"
|
||||||
|
ize="22px"
|
||||||
|
name="mdi-pencil-outline"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>
|
||||||
|
{{ $t('edit') }}
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item clickable v-close-popup class="no-padding">
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon
|
||||||
|
style="color: hsla(var(--red-6-hsl) / 1)"
|
||||||
|
size="22px"
|
||||||
|
name="mdi-trash-can-outline"
|
||||||
|
/>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<q-item-section>{{ $t('delete') }}</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
|
||||||
|
<q-item clickable v-close-popup class="q-px-sm">
|
||||||
|
<q-item-section>
|
||||||
|
<div
|
||||||
|
class="bg-branch-tree-toggle q-pa-sm"
|
||||||
|
style="border-radius: 6px"
|
||||||
|
:class="{
|
||||||
|
'dark-toggle': $q.dark.isActive,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<q-toggle
|
||||||
|
dense
|
||||||
|
:label="$t('closedStatus')"
|
||||||
|
size="sm"
|
||||||
|
v-model="shape"
|
||||||
|
val="md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
|
</template>
|
||||||
|
</q-tree>
|
||||||
|
</div>
|
||||||
|
</q-scroll-area>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="false"
|
||||||
|
class="col bordered full-height"
|
||||||
|
style="overflow-y: auto"
|
||||||
|
>
|
||||||
|
<q-card-section class="q-pb-none">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<q-select
|
||||||
|
style="width: 150px"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="inputSelectBranch"
|
||||||
|
:options="optionsBranch"
|
||||||
|
label="เลือก"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 q-pr-md">
|
||||||
|
<q-input dense outlined v-model="inputSearch">
|
||||||
|
<template v-slot:append>
|
||||||
|
<iconify-icon icon="ic:baseline-search" />
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-select
|
||||||
|
style="width: 150px"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="inputFilter"
|
||||||
|
:options="optionsFilter"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
<q-card-section>
|
||||||
|
<table-card-componet :subBranch="true" :rows="rows" />
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col bordered full-height" style="overflow-y: auto">
|
||||||
|
<card-details-component class="q-pa-sm" />
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped>
|
||||||
|
.branch-main-variable-color {
|
||||||
|
--_color-branch-tree-text: var(--blue-6-hsl);
|
||||||
|
--_color-branch-title: var(--blue-10-hsl);
|
||||||
|
--_bg-branch-title: var(--_color-branch-title) / 0.08;
|
||||||
|
--_color-branch-btn: var(--cyan-6-hsl);
|
||||||
|
--_color-branch-tree-active: var(--blue-6-hsl);
|
||||||
|
--_bg-branch-tree-box: var(--gray-0-hsl);
|
||||||
|
--_bg-branch-tree-scroll: var(--gray-0-hsl);
|
||||||
|
--_color-branch-tree-scroll: var(--gray-0-hsl);
|
||||||
|
|
||||||
|
&.dark {
|
||||||
|
--_color-branch-title: var(--blue-0-hsl);
|
||||||
|
--_bg-branch-title: var(--gray-9-hsl) / 1;
|
||||||
|
--_color-branch-btn: var(--cyan-6-hsl);
|
||||||
|
--_color-branch-tree-active: var(--blue-6-hsl);
|
||||||
|
--_bg-branch-tree-box: var(--gray-10-hsl);
|
||||||
|
--_bg-branch-tree-scroll: var(--gray-11-hsl);
|
||||||
|
--_color-branch-tree-scroll: var(--gray-8-hsl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-branch-tree-toggle {
|
||||||
|
--_bg-branch-tree-toggle: var(--gray-3-hsl);
|
||||||
|
background: hsl(var(--_bg-branch-tree-toggle));
|
||||||
|
|
||||||
|
&.dark-toggle {
|
||||||
|
--_bg-branch-tree-toggle: var(--gray-9-hsl);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-branch-tree-scroll {
|
||||||
|
background: hsl(var(--_bg-branch-tree-scroll));
|
||||||
|
color: hsl(var(--_color-branch-tree-scroll));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-branch-tree-box {
|
||||||
|
background: hsl(var(--_bg-branch-tree-box));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-card-branch-title {
|
||||||
|
background: hsla(var(--_bg-branch-title));
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-card-branch-title {
|
||||||
|
color: hsl(var(--_color-branch-title));
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-card-branch-btn {
|
||||||
|
color: hsl(var(--_color-branch-btn));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-brach-tree-text,
|
||||||
|
.color-brach-tree-btn {
|
||||||
|
color: var(--stone-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-tree-active {
|
||||||
|
color: hsl(var(--_color-branch-tree-active));
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-branch-tree {
|
||||||
|
background: hsla(var(--_color-branch-tree-active) / 0.08);
|
||||||
|
|
||||||
|
&.dark-tree {
|
||||||
|
background: hsla(var(--_color-branch-tree-active) / 0.01);
|
||||||
|
border: 1px solid hsla(var(--_color-branch-tree-active));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue