Merge branch 'dev/net' into develop
This commit is contained in:
Net
commit
d33f1795cc
1 changed files with 260 additions and 60 deletions
|
|
@ -7,11 +7,21 @@ import AppBox from 'components/app/AppBox.vue';
|
|||
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
|
||||
import TooltipComponent from 'components/TooltipComponent.vue';
|
||||
import StatCardComponent from 'components/StatCardComponent.vue';
|
||||
import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
|
||||
import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
|
||||
import FormDialog from 'src/components/FormDialog.vue';
|
||||
|
||||
const BranchStore = useBranchStore();
|
||||
import { BranchWithChildren, Branch } from 'src/stores/branch/types';
|
||||
|
||||
const branchStore = useBranchStore();
|
||||
const test = ref<string>('');
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
|
||||
const showCurrentBaranch = ref<Branch | boolean | null>();
|
||||
|
||||
const shape = ref<boolean>(false);
|
||||
const openBranchDrawer = ref<boolean>(true);
|
||||
|
||||
const inputSelectBranch = ref<string>('ทั้งหมด');
|
||||
const inputFilter = ref<string>('คอลัมน์');
|
||||
|
|
@ -26,6 +36,39 @@ const optionsFilter: string[] = [
|
|||
'สถานะ',
|
||||
];
|
||||
|
||||
const formData = ref({
|
||||
hqId: '',
|
||||
branchId: '',
|
||||
tel: '',
|
||||
gender: '',
|
||||
email: '',
|
||||
addressL: {
|
||||
address: '',
|
||||
province: '',
|
||||
district: '',
|
||||
subDistrict: '',
|
||||
zip: '',
|
||||
},
|
||||
addressEng: {
|
||||
address: '',
|
||||
province: '',
|
||||
district: '',
|
||||
subDistrict: '',
|
||||
zip: '',
|
||||
},
|
||||
});
|
||||
|
||||
const selected = ref<string>('');
|
||||
|
||||
const headOfficeCode = ref<string>('');
|
||||
const headOfficeName = ref<string>('');
|
||||
const taxIDNumber = ref<string>('');
|
||||
const nameHeadOfficeEN = ref<string>('');
|
||||
const inputPhone = ref<string>('');
|
||||
const inputIdLine = ref<string>('');
|
||||
const inputPhonHeadOffice = ref<string>('');
|
||||
const inputEmailHeadOffice = ref<string>('');
|
||||
|
||||
const expanded = ref<string[]>([]);
|
||||
|
||||
const rows: {
|
||||
|
|
@ -67,47 +110,6 @@ const rows: {
|
|||
},
|
||||
];
|
||||
|
||||
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<
|
||||
{
|
||||
amount: number;
|
||||
|
|
@ -137,9 +139,41 @@ const branchStat = ref<
|
|||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
|
||||
console.log(BranchStore.data);
|
||||
const treeData = ref<BranchWithChildren[]>([]);
|
||||
|
||||
function openDialog() {
|
||||
console.log('openDialog');
|
||||
|
||||
modal.value = true;
|
||||
}
|
||||
|
||||
async function getTree() {
|
||||
const result = await branchStore.fetchList<BranchWithChildren>({
|
||||
tree: true,
|
||||
});
|
||||
|
||||
if (result) {
|
||||
treeData.value = result.result;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchBranch(id: string) {
|
||||
if (typeof branchStore.fetchById(id) === 'object') {
|
||||
showCurrentBaranch.value = await branchStore.fetchById(id);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
getTree();
|
||||
|
||||
if (
|
||||
typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
|
||||
'object'
|
||||
) {
|
||||
showCurrentBaranch.value = await branchStore.fetchById(
|
||||
'bfff119e-079d-4b56-9699-0466ade4b517',
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -156,7 +190,7 @@ onMounted(() => {
|
|||
<StatCardComponent :branch="branchStat" />
|
||||
</app-box>
|
||||
|
||||
<app-box v-if="false" bordered style="width: 100%; height: 500px">
|
||||
<app-box bordered style="width: 100%; height: 500px">
|
||||
<div class="column" style="height: 100%">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
|
|
@ -174,7 +208,7 @@ onMounted(() => {
|
|||
>
|
||||
<BtnAddComponent
|
||||
:label="'สร้างสำนักงานใหญ่'"
|
||||
@trigger="() => console.log('test')"
|
||||
@trigger="() => openDialog()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -225,24 +259,27 @@ onMounted(() => {
|
|||
>
|
||||
<div class="col">
|
||||
<q-tree
|
||||
:nodes="simple"
|
||||
:nodes="treeData"
|
||||
dense
|
||||
node-key="label"
|
||||
node-key="name"
|
||||
v-model:expanded="expanded"
|
||||
v-model:selected="selected"
|
||||
children-key="branch"
|
||||
>
|
||||
<template #default-header="prop">
|
||||
<div
|
||||
@click="fetchBranch(prop.node.id)"
|
||||
class="q-pa-sm color-brach-tree-text"
|
||||
:class="{
|
||||
'color-tree-active': expanded.includes(prop.node.label),
|
||||
'color-tree-active': expanded.includes(prop.node.name),
|
||||
'bg-branch-tree':
|
||||
prop.node.isHeadOffice &&
|
||||
expanded.includes(prop.node.label),
|
||||
expanded.includes(prop.node.name),
|
||||
'dark-tree': $q.dark.isActive,
|
||||
}"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
{{ prop.node.label }}
|
||||
{{ prop.node.name }}
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
|
@ -256,7 +293,7 @@ onMounted(() => {
|
|||
dense
|
||||
>
|
||||
<Icon
|
||||
v-if="expanded.includes(prop.node.label)"
|
||||
v-if="expanded.includes(prop.node.name)"
|
||||
icon="eva:file-add-fill"
|
||||
/>
|
||||
|
||||
|
|
@ -328,11 +365,7 @@ onMounted(() => {
|
|||
</q-scroll-area>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="false"
|
||||
class="col bordered full-height"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<div class="col bordered full-height" style="overflow-y: auto">
|
||||
<q-card-section class="q-pb-none">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -369,15 +402,182 @@ onMounted(() => {
|
|||
</q-card-section>
|
||||
</div>
|
||||
|
||||
<div class="col bordered full-height" style="overflow-y: auto">
|
||||
<CardDetailsComponent class="q-pa-sm" />
|
||||
<div
|
||||
v-if="false"
|
||||
class="col bordered full-height"
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<CardDetailsComponent
|
||||
:data="showCurrentBaranch as Branch"
|
||||
class="q-pa-sm"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DeatailsBranchDrawerComponent
|
||||
@open="openBranchDrawer = !openBranchDrawer"
|
||||
:open="openBranchDrawer"
|
||||
:data="showCurrentBaranch as Branch"
|
||||
/>
|
||||
|
||||
<FormDialog
|
||||
v-model:modal="modal"
|
||||
v-model:addressL="formData.addressL"
|
||||
v-model:addressEng="formData.addressEng"
|
||||
title="เพิ่มสำนักงานใหญ่"
|
||||
addressLocaleTitle="ที่อยู่พนักงาน"
|
||||
addressEngTitle="ที่อยู่พนักงาน ENG"
|
||||
>
|
||||
<template #top>
|
||||
<div class="row full-width">
|
||||
<div class="col">
|
||||
<q-input
|
||||
v-model="headOfficeCode"
|
||||
dense
|
||||
outlined
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col q-pl-md">
|
||||
<q-input
|
||||
v-model="taxIDNumber"
|
||||
dense
|
||||
outlined
|
||||
label="เลขประจำตัวผู้เสียภาษี"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row full-width">
|
||||
<div class="col">
|
||||
<q-input
|
||||
v-model="headOfficeName"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสำนักงานใหญ่"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col q-pl-md">
|
||||
<q-input
|
||||
v-model="nameHeadOfficeEN"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<AppBox class="q-mt-md" style="background: var(--gray-1)">
|
||||
<div class="row q-mb-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
v-model="inputPhone"
|
||||
dense
|
||||
outlined
|
||||
label="เบอร์โทรศัพท์"
|
||||
/>
|
||||
</div>
|
||||
<div class="col q-pl-md">
|
||||
<q-input v-model="inputIdLine" dense outlined label="id line" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
border: 2px dashed var(--gray-4);
|
||||
border-radius: 10px;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
var(--indigo-0),
|
||||
var(--sand-0)
|
||||
);
|
||||
"
|
||||
class="q-pa-md column items-center justify-center full-width"
|
||||
>
|
||||
<div class="col q-pb-md" style="opacity: 0.3">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="bg-white"
|
||||
style="border: 3px solid grey; border-radius: 6px"
|
||||
>
|
||||
<Icon icon="teenyicons:add-outline" width="20px" height="50px" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-btn
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
"
|
||||
unelevated
|
||||
rounded
|
||||
label="อัปโหลด QR Code"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</AppBox>
|
||||
</template>
|
||||
|
||||
<template #midBottom>
|
||||
<div>
|
||||
<div class="row full-width q-pb-md">
|
||||
<div class="col q-pr-md">
|
||||
<q-input
|
||||
v-model="inputPhonHeadOffice"
|
||||
dense
|
||||
outlined
|
||||
label="เบอร์โทรศัพท์สำนักงานใหฐ่"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
v-model="inputEmailHeadOffice"
|
||||
dense
|
||||
outlined
|
||||
label="อีเมลติดต่อสำนักงานใหญ่ "
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="column q-pa-sm full-width bordered"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
<div class="col">location</div>
|
||||
<div class="col self-center bg-image q-pa-md">
|
||||
<q-btn
|
||||
rounded
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
"
|
||||
class="flex flrx-center"
|
||||
label="location"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<q-btn label="test" @click="openBranchDrawer = !openBranchDrawer" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bg-image {
|
||||
background-image: url(/map.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
.branch-main-variable-color {
|
||||
--_color-branch-tree-text: var(--blue-6-hsl);
|
||||
--_color-branch-title: var(--blue-10-hsl);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue