feat: bankbook & i18n

This commit is contained in:
puriphatt 2024-08-02 11:13:21 +00:00
parent 5f26c8bcdc
commit 912fb7c4c3
9 changed files with 458 additions and 34 deletions

View file

@ -1,5 +1,57 @@
{
"eng": {
"bankBook": [
{
"label": "Bangkok Bank",
"value": "bbl"
},
{
"label": "Kasikorn Bank",
"value": "kbank"
},
{
"label": "Krungthai Bank",
"value": "ktb"
},
{
"label": "TMBThanachart Bank",
"value": "ttb"
},
{
"label": "Siam Commercial Bank",
"value": "scb"
},
{
"label": "UOB Bank",
"value": "uobt"
},
{
"label": "Krungsri Bank",
"value": "bay"
},
{
"label": "Government Savings Bank",
"value": "gsb"
},
{
"label": "Kiatnakin Phatra Bank",
"value": "kkp"
}
],
"accountType": [
{
"label": "Savings Account",
"value": "savingAccount"
},
{
"label": "Fixed Deposit Account",
"value": "fixedDeposit"
},
{
"label": "Current Account",
"value": "currentAccount"
}
],
"typeProduct": [
{
"label": "DOE",
@ -732,6 +784,58 @@
},
"tha": {
"bankBook": [
{
"label": "ธนาคารกรุงเทพ",
"value": "bbl"
},
{
"label": "ธนาคารกสิกรไทย",
"value": "kbank"
},
{
"label": "ธนาคารกรุงไทย",
"value": "ktb"
},
{
"label": "ธนาคารทหารไทยธนชาต",
"value": "ttb"
},
{
"label": "ธนาคารไทยพาณิชย์",
"value": "scb"
},
{
"label": "ธนาคารยูโอบี",
"value": "uobt"
},
{
"label": "ธนาคารกรุงศรีอยุธยา",
"value": "bay"
},
{
"label": "ธนาคารออมสิน",
"value": "gsb"
},
{
"label": "ธนาคารเกียรตินาคินภัทร",
"value": "kkp"
}
],
"accountType": [
{
"label": "บัญชีเงินฝากออมทรัพย์",
"value": "savingAccount"
},
{
"label": "บัญชีเงินฝากประจำ",
"value": "fixedDeposit"
},
{
"label": "บัญชีเงินฝากกระแสรายวัน",
"value": "currentAccount"
}
],
"typeProduct": [
{
"label": "DOE",

View file

@ -0,0 +1,240 @@
<script setup lang="ts">
import { BankBook } from 'src/stores/branch/types';
import useOptionStore from 'src/stores/options';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { onMounted, ref, watch } from 'vue';
import { deleteItem } from 'src/stores/utils';
import { QSelect } from 'quasar';
const optionStore = useOptionStore();
const bankBookList = defineModel<BankBook[]>('bankBookList', { default: [] });
defineProps<{
title?: string;
dense?: boolean;
outlined?: boolean;
readonly?: boolean;
view?: boolean;
}>();
const bankBookOptions = ref<Record<string, unknown>[]>([]);
let bankBoookFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
const accountTypeOptions = ref<Record<string, unknown>[]>([]);
let accountTypeFilter: (
value: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
) => void;
function addBankBook() {
bankBookList.value?.push({
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
});
}
onMounted(() => {
if (optionStore.globalOption) {
bankBoookFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.bankBook),
bankBookOptions,
'label',
);
accountTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.accountType),
accountTypeOptions,
'label',
);
}
});
watch(
() => optionStore.globalOption,
() => {
bankBoookFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.bankBook),
bankBookOptions,
'label',
);
accountTypeFilter = selectFilterOptionRefMod(
ref(optionStore.globalOption.accountType),
accountTypeOptions,
'label',
);
},
);
</script>
<template>
<div class="row col-12">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-bank"
style="background-color: var(--surface-3)"
/>
{{ $t(`${title}`) }}
<q-btn icon="mdi-plus" flat dense @click="addBankBook" v-if="!readonly" />
</div>
<div
v-for="(book, i) in bankBookList"
class="col-12 row q-col-gutter-sm"
:class="{ 'q-pt-lg': i !== 0 }"
:key="i"
>
<span class="col-12 app-text-muted-2 flex justify-between items-center">
{{ `${$t('bankBookNo')} ${i + 1}` }}
<q-btn
v-if="bankBookList.length !== 1 && !readonly"
flat
dense
size="sm"
color="negative"
icon="mdi-trash-can-outline"
@click="deleteItem(bankBookList, i)"
/>
</span>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
option-value="value"
input-debounce="0"
option-label="label"
v-model="book.bankName"
lazy-rules="ondemand"
class="col-3"
:dense="dense"
:label="$t('bankBook')"
:options="bankBookOptions"
:readonly="readonly"
:hide-dropdown-icon="readonly"
for="select-bankbook"
@filter="bankBoookFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-input
outlined
for="input-bankbook"
class="col-3"
lazy-rules="ondemand"
hide-bottom-space
v-model="book.accountNumber"
:dense="dense"
:readonly="readonly"
:label="$t('accountNumber')"
/>
<q-input
outlined
for="input-bankbook"
class="col-3"
lazy-rules="ondemand"
hide-bottom-space
v-model="book.bankBranch"
:dense="dense"
:readonly="readonly"
:label="$t('bankBranch')"
/>
<q-input
outlined
for="input-bankbook"
class="col-3"
lazy-rules="ondemand"
hide-bottom-space
v-model="book.accountName"
:dense="dense"
:readonly="readonly"
:label="$t('accountName')"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
option-value="value"
input-debounce="0"
option-label="label"
v-model="book.accountType"
lazy-rules="ondemand"
class="col-4"
:dense="dense"
:label="$t('bankType')"
:options="accountTypeOptions"
:readonly="readonly"
:hide-dropdown-icon="readonly"
for="select-bankbook"
@filter="accountTypeFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
option-value="value"
input-debounce="0"
option-label="label"
v-model="book.currentlyUse"
lazy-rules="ondemand"
class="col-3"
:dense="dense"
:label="$t('accountStatus')"
:options="[
{ label: $t('use'), value: true },
{ label: $t('notUse'), value: false },
]"
:readonly="readonly"
:hide-dropdown-icon="readonly"
for="select-bankbook"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('noResults') }}
</q-item-section>
</q-item>
</template>
</q-select>
</div>
</div>
</template>

8
src/i18n/en-US/bank.ts Normal file
View file

@ -0,0 +1,8 @@
export default {
accountNumber: 'Account Number',
bankBranch: 'Bank Branch',
accountName: 'Account Name',
bankType: 'Bank Type',
accountStatus: 'Account Status ',
bankBookNo: 'Bank Book',
};

View file

@ -11,6 +11,7 @@ import employerDialog from './employer-dialog';
import otherDocument from './other-document';
import productService from './product-service';
import alertDialog from './alert-dialog';
import bank from './bank';
export default {
ok: 'Confirm',
agree: 'Ok',
@ -69,6 +70,8 @@ export default {
notRecorded: 'You have not yet saved.',
editImage: 'Edit Image',
bankBook: 'Bank Book',
use: 'In Use',
notUse: 'Not Use',
...status,
...main,
...address,
@ -82,4 +85,5 @@ export default {
...otherDocument,
...productService,
...alertDialog,
...bank,
};

8
src/i18n/th-th/bank.ts Normal file
View file

@ -0,0 +1,8 @@
export default {
accountNumber: 'เลขที่บัญชี',
bankBranch: 'สาขาธนาคาร',
accountName: 'ชื่อบัญชี',
bankType: 'ประเภทของธนาคาร',
accountStatus: 'สถานะการใช้งาน ',
bankBookNo: 'ช่องทางที่',
};

View file

@ -11,6 +11,7 @@ import employerDialog from './employer-dialog';
import otherDocument from './other-document';
import productService from './product-service';
import alertDialog from './alert-dialog';
import bank from './bank';
export default {
ok: 'ยืนยัน',
agree: 'ตกลง',
@ -72,6 +73,8 @@ export default {
notRecorded: 'คุณยังไม่ได้บันทึก',
editImage: 'แก้ไขรูป',
bankBook: 'บัญชีธนาคาร',
use: 'ใช้งาน',
notUse: 'ไม่ใช้งาน',
...status,
...main,
...address,
@ -85,4 +88,5 @@ export default {
...otherDocument,
...productService,
...alertDialog,
...bank,
};

View file

@ -9,7 +9,12 @@ import type { QTableProps } from 'quasar';
import useBranchStore from 'stores/branch';
import useFlowStore from 'src/stores/flow';
import { BranchWithChildren, BranchCreate, Branch } from 'stores/branch/types';
import {
BranchWithChildren,
BranchCreate,
Branch,
BankBook,
} from 'stores/branch/types';
import { Status } from 'src/stores/types';
import useUtilsStore, { dialog } from 'src/stores/utils';
@ -29,6 +34,7 @@ import TreeCompoent from 'src/components/TreeCompoent.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
import FormBank from 'src/components/01_branch-management/FormBank.vue';
const $q = useQuasar();
const { t } = useI18n();
@ -70,11 +76,6 @@ const hideStat = ref(false);
const currentStatus = ref<Status | 'All'>('All');
const expandedTree = ref<string[]>([]);
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
{
icon: 'mdi-office-building-outline',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
{
icon: 'mdi-phone',
color: 'hsl(var(--info-bg))',
@ -90,15 +91,16 @@ const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
]);
const formBankBook = ref<BankBook[]>([
{
icon: 'mdi-qrcode',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
},
{
icon: 'mdi-piggy-bank-outline',
color: 'hsl(var(--info-bg))',
bgColor: 'var(--surface-1)',
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
},
]);
@ -294,6 +296,12 @@ async function fetchBranchById(id: string) {
imageUrl.value = res.imageUrl;
prevImageUrl.value = res.imageUrl;
const updatedBank = res.bank.map((item) => {
const { id: _id, branchId: _branchId, ...rest } = item;
return rest;
});
formBankBook.value = updatedBank;
formData.value = {
headOfficeId: res.headOfficeId,
taxNo: res.taxNo,
@ -326,6 +334,17 @@ function clearData() {
code: '',
};
profileFile.value = undefined;
formBankBook.value = [
{
bankName: '',
accountNumber: '',
bankBranch: '',
accountName: '',
accountType: '',
currentlyUse: true,
}
];
}
async function undo() {
@ -473,6 +492,7 @@ async function onSubmit() {
},
profileFile.value,
profileFileImg.value,
formBankBook.value,
);
await branchStore.fetchList({ pageSize: 99999 });
@ -490,11 +510,14 @@ async function onSubmit() {
delete formData.value['codeHeadOffice'];
}
await branchStore.create({
...formData.value,
qrCodeImage: profileFile.value,
imageUrl: profileFileImg.value,
});
await branchStore.create(
{
...formData.value,
qrCodeImage: profileFile.value,
imageUrl: profileFileImg.value,
},
formBankBook.value,
);
await branchStore.fetchList({ pageSize: 99999 });
modal.value = false;
@ -1484,7 +1507,7 @@ watch(currentHq, () => {
},
{
name: $t('bankBook'),
anchor: 'form-bankBook',
anchor: 'form-bank',
},
]"
background="transparent"
@ -1559,6 +1582,12 @@ watch(currentHq, () => {
}
"
/>
<FormBank
id="form-bank"
title="bankBook"
dense
v-model:bank-book-list="formBankBook"
/>
<!-- <FormImage
:readonly="formType === 'view'"
v-model:image="imageUrl"
@ -1639,7 +1668,7 @@ watch(currentHq, () => {
},
{
name: $t('bankBook'),
anchor: 'info-bankBook',
anchor: 'info-bank',
},
]"
background="transparent"
@ -1717,6 +1746,13 @@ watch(currentHq, () => {
}
"
/>
<FormBank
id="info-bank"
:readonly="formType === 'view'"
title="bankBook"
dense
v-model:bank-book-list="formBankBook"
/>
<!-- <FormImage
@upload="
() => {

View file

@ -2,7 +2,7 @@ import { ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { Pagination } from '../types';
import { api } from 'src/boot/axios';
import { Branch, BranchCreate } from './types';
import { BankBook, Branch, BranchCreate } from './types';
import { BranchContact } from '../branch-contact/types';
import axios from 'axios';
import useFlowStore from '../flow';
@ -120,6 +120,7 @@ const useBranchStore = defineStore('api-branch', () => {
async function create(
branch: BranchCreate,
bank?: BankBook[],
flow?: {
sessionId?: string;
refTransactionId?: string;
@ -134,13 +135,17 @@ const useBranchStore = defineStore('api-branch', () => {
qrCodeImageUploadUrl: string;
imageUploadUrl: string;
}
>('/branch', payload, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
>(
'/branch',
{ ...payload, bank: bank },
{
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
},
});
);
qrCodeImage &&
(await axios
@ -169,6 +174,7 @@ const useBranchStore = defineStore('api-branch', () => {
data: Partial<BranchCreate & { status: 'ACTIVE' | 'INACTIVE' | 'CREATED' }>,
qrCodeImage?: File | undefined,
imageHq?: File | undefined,
bank?: BankBook[],
flow?: {
sessionId?: string;
refTransactionId?: string;
@ -178,13 +184,17 @@ const useBranchStore = defineStore('api-branch', () => {
const { ...payload } = data;
const res = await api.put<
Branch & { qrCodeImageUploadUrl: string; imageUploadUrl: string }
>(`/branch/${id}`, payload, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
>(
`/branch/${id}`,
{ ...payload, bank: bank },
{
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
},
});
);
if (qrCodeImage) {
await axios

View file

@ -2,6 +2,15 @@ import { District, Province, SubDistrict } from '../address';
import { BranchContact } from '../branch-contact/types';
import { Status } from '../types';
export type BankBook = {
bankName: string;
accountNumber: string;
bankBranch: string;
accountName: string;
accountType: string;
currentlyUse: boolean;
};
export type Branch = {
subDistrict: SubDistrict | null;
district: District | null;
@ -31,6 +40,7 @@ export type Branch = {
id: string;
code: string;
telephoneNo: string;
bank: (BankBook & { id: string; branchId: string })[];
lineId: string;
contact: BranchContact[];
_count: {