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

Merge branch 'dev/net' into develop

Browse source
This commit is contained in:
Net 2024-04-10 16:04:00 +07:00
commit 3eece7822e
4 changed files with 341 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/01_branch-management/CardDetailsComponent.vue
View file

@ -78,7 +78,7 @@ defineProps<{
<div class="row card-details-row-height">
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-2">{{ data?.code }}</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
<div class="row q-pt-sm q-pb-md card-details-row-height">

4
src/components/01_branch-management/DeatailsBranchDrawerComponent.vue
View file

@ -78,7 +78,7 @@ const open = defineModel('open', { type: Boolean, default: false });
<div class="row card-details-row-height">
<div class="col-3 color-text-static">รหัสไปรษณีย์</div>
<div class="col-2">{{ data?.code }}</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
<div class="row q-pt-sm q-pb-md card-details-row-height">
@ -106,7 +106,7 @@ const open = defineModel('open', { type: Boolean, default: false });
<div class="row card-details-row-height">
<div class="col-3 color-text-static">Zip code</div>
<div class="col-2">{{ data?.code }}</div>
<div class="col-2">{{ data?.zipCode }}</div>
</div>
</q-card>
</section>

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

@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue';
import { Icon } from '@iconify/vue';
import useBranchStore from 'stores/branch';
import useBranchContactStore from 'stores/branch-contact';
import AppBox from 'components/app/AppBox.vue';
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
@ -13,13 +14,23 @@ import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/D
import FormDialog from 'src/components/FormDialog.vue';
import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
import { BranchWithChildren, Branch } from 'src/stores/branch/types';
import { BranchContactCreate } from 'src/stores/branch-contact/types';
import {
BranchWithChildren,
Branch,
BranchCreate,
} from 'src/stores/branch/types';
const branchStore = useBranchStore();
const branchContactStore = useBranchContactStore();
const { data: branchData } = storeToRefs(branchStore);
const modal = ref<boolean>(false);
const currentBranchIdEdit = ref<string>('');
const currentBranchContactIdEdit = ref<string>('');
const showCurrentBranch = ref<Branch>();
const shape = ref<boolean>(false);
@ -40,39 +51,35 @@ const optionsFilter: string[] = [
'สถานะ',
];
const formData = ref({
hqId: '',
branchId: '',
tel: '',
gender: '',
const formDataContact = ref<BranchContactCreate>({
lineId: '',
telephoneNo: '',
qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
});
const formType = ref<'edit' | 'create' | 'delete'>('create');
const typeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
const branchContact = ref<BranchContactCreate[]>();
const inputCode = ref<string>('');
const formData = ref<BranchCreate>({
taxNo: '',
nameEN: '',
name: '',
addressEN: '',
address: '',
zipCode: '',
email: '',
addressTitle: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
addressENTitle: {
address: '',
province: '',
district: '',
subDistrict: '',
zip: '',
},
telephoneNo: '',
longitude: '',
latitude: '',
subDistrictId: '',
districtId: '',
provinceId: '',
headOfficeId: null,
});
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 inputPhoneHeadOffice = ref<string>('');
const inputEmailHeadOffice = ref<string>('');
const expanded = ref<string[]>([]);
const branchStat = ref<
@ -119,6 +126,30 @@ const rowsBranch = ref<
}[]
>([]);
function clearData() {
formData.value = {
taxNo: '',
nameEN: '',
name: '',
addressEN: '',
address: '',
zipCode: '',
email: '',
telephoneNo: '',
longitude: '',
latitude: '',
subDistrictId: '',
districtId: '',
provinceId: '',
headOfficeId: null,
};
formDataContact.value = {
lineId: '',
telephoneNo: '',
qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
};
}
function openDialog() {
modal.value = true;
}
@ -127,6 +158,7 @@ async function getTree() {
const result = await branchStore.fetchList<BranchWithChildren>({
tree: true,
});
if (result) {
treeData.value = result.result;
rowsBranch.value = treeData.value
@ -145,6 +177,175 @@ async function getTree() {
}
}
function changeSubject(
formType: 'edit' | 'create' | 'delete',
typeBranch: 'headOffice' | 'subBranch',
) {
if (typeBranch === 'headOffice') {
if (formType === 'create') {
return 'เพิ่มสำนักงานใหญ่';
}
return 'แก้ไขสำนักงานใหญ่';
}
if (typeBranch === 'subBranch') {
if (formType === 'create') {
return 'เพิ่มสาขา';
}
return 'แก้ไขสาขา';
}
}
function triggerCreateSubBranch(code: string, id: string) {
clearData();
formType.value = 'create';
typeBranch.value = 'subBranch';
inputCode.value = code;
formData.value.headOfficeId = id;
openDialog();
}
function triggerEditSubBranch(code: string, id: string) {
clearData();
formType.value = 'edit';
typeBranch.value = 'subBranch';
inputCode.value = code;
formData.value.headOfficeId = id;
currentBranchIdEdit.value = id;
fetchFormEditBranch(id);
fetchFormEditBranchContact(id);
openDialog();
}
function triggerDeleteSubBranch(id: string) {
clearData();
formType.value = 'delete';
typeBranch.value = 'subBranch';
formData.value.headOfficeId = id;
openDialog();
}
function triggerCreateHeadOffice() {
clearData();
formType.value = 'create';
typeBranch.value = 'headOffice';
openDialog();
}
function triggerEditHeadOffice(id: string) {
clearData();
formType.value = 'edit';
typeBranch.value = 'headOffice';
currentBranchIdEdit.value = id;
fetchFormEditBranch(id);
fetchFormEditBranchContact(id);
openDialog();
}
function triggerDeleteHeadOffice() {
clearData();
formType.value = 'delete';
typeBranch.value = 'headOffice';
openDialog();
}
async function fetchFormEditBranch(id: string) {
const result = await branchStore.fetchById<Branch>(id);
if (result) {
formData.value = {
taxNo: result.taxNo,
nameEN: result.nameEN,
name: result.name,
addressEN: result.addressEN,
address: result.address,
zipCode: result.zipCode,
email: result.email,
telephoneNo: result.telephoneNo,
longitude: result.longitude,
latitude: result.latitude,
subDistrictId: result.subDistrictId,
districtId: result.districtId,
provinceId: result.provinceId,
headOfficeId: result.headOfficeId,
};
}
}
async function fetchFormEditBranchContact(id: string) {
const result = await branchContactStore.fetchList(id);
if (result) {
const resultFilter = result.result.filter((v) => v.branchId === id);
currentBranchContactIdEdit.value = resultFilter[0].id;
formDataContact.value = {
lineId: resultFilter[0].lineId,
telephoneNo: resultFilter[0].telephoneNo,
qrCodeImage: new File([], 'ชื่อไฟล์.png', { type: 'image/png' }),
};
}
}
async function submitForm(
typeSubmit: 'create' | 'edit' | 'delete',
formTypeSubmit: 'headOffice' | 'subBranch',
inputBranchCreate: BranchCreate,
inputBranchContactCreate: BranchContactCreate,
) {
if (formTypeSubmit === 'headOffice') {
if (typeSubmit === 'create') {
const result = await branchStore.create(inputBranchCreate);
if (result) {
await branchContactStore.create(result.id, inputBranchContactCreate);
getTree();
modal.value = false;
return;
}
}
if (typeSubmit === 'edit') {
await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
await branchContactStore.editById(
currentBranchIdEdit.value,
currentBranchContactIdEdit.value,
inputBranchContactCreate,
);
getTree();
modal.value = false;
return;
}
if (typeSubmit === 'delete') {
return;
}
}
if (formTypeSubmit === 'subBranch') {
if (typeSubmit === 'create') {
const result = await branchStore.create(inputBranchCreate);
if (result) {
await branchContactStore.create(result.id, inputBranchContactCreate);
getTree();
modal.value = false;
return;
}
}
if (typeSubmit === 'edit') {
await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
await branchContactStore.editById(
currentBranchIdEdit.value,
currentBranchContactIdEdit.value,
inputBranchContactCreate,
);
getTree();
modal.value = false;
return;
}
if (typeSubmit === 'delete') {
return;
}
}
}
async function fetchCard(id: string) {
const result = await branchStore.fetchById<Branch>(id);
@ -241,7 +442,7 @@ onMounted(async () => {
<AppBox class="no-padding row bordered-t" style="border-radius: 0">
<div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
<div
@click="openDialog()"
@click="triggerCreateHeadOffice()"
class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
>
<div class="text-h4 q-mr-md">+</div>
@ -281,7 +482,9 @@ onMounted(async () => {
<q-btn
class="color-brach-tree-btn"
@click.stop
@click.stop="
triggerCreateSubBranch(prop.node.code, prop.node.id)
"
v-if="prop.node.isHeadOffice"
size="lg"
flat
@ -295,8 +498,9 @@ onMounted(async () => {
<Icon v-else icon="eva:file-add-outline" />
</q-btn>
<!-- subBranch -->
<q-btn
v-else
class="color-brach-tree-btn"
@click.stop
size="lg"
@ -307,7 +511,14 @@ onMounted(async () => {
<Icon icon="ri:more-2-fill" width="16px" />
<q-menu class="bordered" style="width: 150px">
<q-list>
<q-item clickable v-close-popup dense>
<q-item
clickable
v-close-popup
dense
@click="
triggerEditSubBranch(prop.node.code, prop.node.id)
"
>
<q-item-section avatar class="q-py-sm">
<q-icon
style="color: hsl(var(--cyan-6-hsl))"
@ -317,7 +528,75 @@ onMounted(async () => {
<q-item-section>{{ $t('edit') }}</q-item-section>
</q-item>
<q-item clickable v-close-popup dense>
<q-item
clickable
v-close-popup
dense
@click="triggerDeleteSubBranch(prop.node.id)"
>
<q-item-section avatar class="q-py-sm">
<q-icon
style="color: hsl(var(--red-6-hsl))"
name="mdi-trash-can-outline"
/>
</q-item-section>
<q-item-section>{{ $t('delete') }}</q-item-section>
</q-item>
<q-item v-close-popup dense>
<q-item-section class="q-py-sm">
<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>
<q-btn
v-if="prop.node.isHeadOffice"
class="color-brach-tree-btn"
@click.stop
size="lg"
dense
flat
name="menu"
>
<Icon icon="ri:more-2-fill" width="16px" />
<q-menu class="bordered" style="width: 150px">
<q-list>
<q-item
clickable
v-close-popup
dense
@click="triggerEditHeadOffice(prop.node.id)"
>
<q-item-section avatar class="q-py-sm">
<q-icon
style="color: hsl(var(--cyan-6-hsl))"
name="mdi-pencil-outline"
/>
</q-item-section>
<q-item-section>{{ $t('edit') }}</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
dense
@click="triggerDeleteHeadOffice()"
>
<q-item-section avatar class="q-py-sm">
<q-icon
style="color: hsl(var(--red-6-hsl))"
@ -416,26 +695,32 @@ onMounted(async () => {
<FormDialog
v-model:modal="modal"
address-title="test"
addressENTitle=""
title="เพิ่มสำนักงานใหญ่"
addressLocaleTitle="ที่อยู่พนักงาน"
addressEngTitle="ที่อยู่พนักงาน ENG"
addressTitle="ที่อยู่"
addressENTitle="address"
v-model:address="formData.address"
v-modeladdressEN="formData.addressEN"
v-model:provinceId="formData.provinceId as string"
v-model:districtId="formData.districtId as string"
v-model:subDistrictId="formData.subDistrictId as string"
v-model:zipCode="formData.zipCode"
:title="changeSubject(formType, typeBranch) as string"
:submit="() => submitForm(formType, typeBranch, formData, formDataContact)"
>
<template #top>
<div class="row full-width">
<div class="col">
<q-input
v-model="headOfficeCode"
v-model="inputCode"
dense
outlined
label="รหัสสำนักงานใหญ่"
readonly
/>
</div>
<div class="col q-pl-md">
<q-input
v-model="taxIDNumber"
v-model="formData.taxNo"
dense
outlined
label="เลขประจำตัวผู้เสียภาษี"
@ -446,7 +731,7 @@ onMounted(async () => {
<div class="row full-width">
<div class="col">
<q-input
v-model="headOfficeName"
v-model="formData.name"
dense
outlined
label="ชื่อสำนักงานใหญ่"
@ -455,7 +740,7 @@ onMounted(async () => {
<div class="col q-pl-md">
<q-input
v-model="nameHeadOfficeEN"
v-model="formData.nameEN"
dense
outlined
label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
@ -469,14 +754,19 @@ onMounted(async () => {
<div class="row q-mb-md">
<div class="col">
<q-input
v-model="inputPhone"
v-model="formDataContact.telephoneNo"
dense
outlined
label="เบอร์โทรศัพท์"
/>
</div>
<div class="col q-pl-md">
<q-input v-model="inputIdLine" dense outlined label="id line" />
<q-input
v-model="formDataContact.lineId"
dense
outlined
label="id line"
/>
</div>
</div>
@ -522,7 +812,7 @@ onMounted(async () => {
<div class="row full-width q-pb-md">
<div class="col q-pr-md">
<q-input
v-model="inputPhoneHeadOffice"
v-model="formData.telephoneNo"
dense
outlined
label="เบอร์โทรศัพท์สำนักงานใหฐ่"
@ -530,7 +820,7 @@ onMounted(async () => {
</div>
<div class="col">
<q-input
v-model="inputEmailHeadOffice"
v-model="formData.email"
dense
outlined
label="อีเมลติดต่อสำนักงานใหญ่ "

1
src/stores/branch-contact/types.ts
View file

@ -7,6 +7,7 @@ export type BranchContact = {
updateBy: string;
createdAt: string;
createdBy: string;
branchId: string;
};
export type BranchContactCreate = {