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

fix: เพิ่มชื่อผิด

Browse source
This commit is contained in:
Net 2024-04-05 18:00:30 +07:00
parent c00df1b1c7
commit d54097b244
1 changed files with 405 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

418
src/pages/01_branch-management/MainPage.vue
View file

@ -1,38 +1,152 @@
<script setup lang="ts">
import useBranchStore from 'stores/branch';
import AppBox from 'components/app/AppBox.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
import StatCardComponet from 'components/StatCardComponet.vue';
import TooltipComponet from 'src/components/TooltipComponet.vue';
import BtnAddComponet from 'components/01_branch-management/BtnAddComponent.vue';
import TableCardComponet from 'components/01_branch-management/TableCardComponent.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 { 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<
{
amount: string;
amount: number;
label: string;
}[]
>([
{
amount: '1',
amount: 1,
label: 'สำนักงานใหญ่ 1',
},
{
amount: '2',
amount: 2,
label: 'สำนักงานใหญ่ 2',
},
{
amount: '3',
amount: 3,
label: 'สำนักงานใหญ่ 3',
},
{
amount: '4',
amount: 4,
label: 'สำนักงานใหญ่ 4',
},
{
amount: '5',
amount: 5,
label: 'สำนักงานใหญ่ 5',
},
]);
onMounted(() => {
BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
console.log(BranchStore.data);
});
</script>
<template>
<div class="column">
@ -40,15 +154,23 @@ const branchStat = ref<
{{ $t('branchManagement') }}
</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" />
</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="col-1 self-end">
<div class="row">
<tooltip-componet imgSrc="img-table-" />
<tooltip-componet
title="branchNoMainOfficeYet"
caption="branchClickToCreateMainOffice"
imgSrc="img-table-"
/>
</div>
</div>
@ -67,7 +189,277 @@ const branchStat = ref<
</div>
</div>
</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>
</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>