Skip to content

Q
quasar-web-base
Commit c1ae9907 authored by Võ Quang Thành Đạt's avatar Võ Quang Thành Đạt
Browse files
Options

create add account bank

parent 31591ff3
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 95 deletions
src/assets/type.ts
View file @ c1ae9907
......@@ -116,16 +116,16 @@ export type StoriesType = {
};
export type BankAccountType = {
id: number;
isDefault: number;
nameInCard: string;
status: number;
accountNumber: string;
accountOwner: string;
bankName: string;
branchName: string;
cardNumber: string;
bankName: string;
cardType: number;
isDefault: number;
id: number;
nameInCard: string | null;
status: number;
accountOwner: string | null;
branchName: string | null;
};
export type ProductType = {
......
src/components/artist-information/bank-account/BankAccount.ts
View file @ c1ae9907
......@@ -111,4 +111,5 @@ export default defineComponent({
changePageSize,
};
},
emits: ['click:addBankBtn'],
});
src/components/artist-information/bank-account/add-new-bank-account-dialog/AddAccountBankDialog.ts
View file @ c1ae9907
......@@ -3,59 +3,56 @@ import { i18n } from 'src/boot/i18n';
export default defineComponent({
props: {
isOpenDialog: {
isOpenAddAccountBankDialog: {
type: Boolean,
required: true,
},
accountNumber: { type: String, required: true },
cardNumber: { type: String, required: true },
bankName: { type: String, required: true },
cardType: { type: Number, required: true },
isDefault: { type: Number, required: true },
},
setup() {
const idCard = ref('');
const numberCard = ref('');
const bankName: Ref<number | undefined> = ref();
const cardType: Ref<number | undefined> = ref();
const defaultStatus: Ref<boolean> = ref(false);
const bankOptions = ref([
{ id: 1, text: 'TP Bank' },
{ id: 2, text: 'MB Bank' },
{ id: 3, text: 'BIDV' },
]);
const cardTypeOptions = ref([
{ id: 1, text: 'ATM' },
{ id: 2, text: 'Visa' },
]);
const idCardRules = [
const accountNumberRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('userPage.validateMessages.requireUserName'),
i18n.global.t(
'artist.dialogLabel.validateMessages.requireAccountNumber'
),
];
const numberCardRules = [
const cardNumberRules = [
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('userPage.validateMessages.requireUserName'),
i18n.global.t('artist.dialogLabel.validateMessages.requireCardNumber'),
];
const bankNameRules = [
(val: number | undefined) =>
val !== undefined ||
i18n.global.t('userPage.validateMessages.requireUserName'),
(val?: string) =>
(val && val.trim().length) ||
i18n.global.t('artist.dialogLabel.validateMessages.requireBankName'),
];
const cardTypeRules = [
(val: number | undefined) =>
val !== undefined ||
i18n.global.t('userPage.validateMessages.requireUserName'),
i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
];
return {
idCard,
numberCard,
bankName,
cardType,
defaultStatus,
bankOptions,
cardTypeOptions,
bankNameRules,
cardTypeRules,
idCardRules,
numberCardRules,
accountNumberRules,
cardNumberRules,
};
},
emits: ['update:isOpenDialog', 'click:CloseBtn', 'addNewBankAccount'],
emits: [
'update:isOpenAddAccountBankDialog',
'click:CloseBtn',
'addNewBankAccount',
'update:accountNumber',
'update:cardNumber',
'update:bankName',
'update:cardType',
'update:isDefault',
'click:addAccountBankBtn',
],
});
src/components/artist-information/bank-account/add-new-bank-account-dialog/index.vue
View file @ c1ae9907
<template>
<q-dialog
persistent
:model-value="isOpenDialog"
@update:model-value="$emit('update:isOpenDialog', $event)"
:model-value="isOpenAddAccountBankDialog"
@update:model-value="$emit('update:isOpenAddAccountBankDialog', $event)"
>
<q-card style="min-width: 500px" bordered>
<q-form greedy @submit.prevent="$emit('addNewBankAccount')">
<q-card-section>
<q-item>
<q-item style="padding-top: 0; padding-bottom: 0">
<q-item-section>
<q-item-label class="text-h6 text-weight-regular">{{
$t('userPage.dialogLabel.title.addUser')
}}</q-item-label>
<q-item-label
><div class="text-h6 text-weight-regular" align="center">
{{ $t('artist.dialogLabel.title.addAccountBank') }}
</div></q-item-label
>
</q-item-section>
</q-item>
</q-card-section>
......@@ -19,59 +21,56 @@
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-6">
<div class="col-12">
<q-input
v-model="idCard"
:label="$t('userPage.dialogLabel.fieldLabels.userName')"
:rules="idCardRules"
:model-value="accountNumber"
@update:model-value="$emit('update:accountNumber', $event)"
:label="$t('artist.dialogLabel.fieldLabels.accountNumber')"
:rules="accountNumberRules"
hide-bottom-space
type="text"
class="q-my-sm"
outlined
></q-input>
<q-input
v-model="numberCard"
:label="$t('userPage.dialogLabel.fieldLabels.password')"
type="password"
class="q-my-sm"
outlined
:rules="numberCardRules"
:model-value="cardNumber"
@update:model-value="$emit('update:cardNumber', $event)"
:label="$t('artist.dialogLabel.fieldLabels.cardNumber')"
:rules="cardNumberRules"
hide-bottom-space
></q-input>
<q-select
v-model="bankName"
:label="$t('userPage.dialogLabel.fieldLabels.sex')"
type="text"
class="q-my-sm"
:options="bankOptions"
option-value="id"
option-label="text"
outlined
map-options
></q-input>
<q-input
:model-value="bankName"
@update:model-value="$emit('update:bankName', $event)"
:label="$t('artist.dialogLabel.fieldLabels.bankName')"
:rules="bankNameRules"
hide-bottom-space
></q-select>
<q-select
v-model="cardType"
:label="$t('userPage.dialogLabel.fieldLabels.sex')"
type="text"
class="q-my-sm"
:options="cardTypeOptions"
option-value="id"
option-label="text"
outlined
map-options
></q-input>
<q-input
:model-value="cardType"
@update:model-value="$emit('update:cardType', $event)"
:label="$t('artist.dialogLabel.fieldLabels.cardType')"
:rules="cardTypeRules"
hide-bottom-space
></q-select>
<q-select
v-model="defaultStatus"
:label="$t('userPage.dialogLabel.fieldLabels.sex')"
type="text"
class="q-my-sm"
option-value="id"
option-label="text"
outlined
map-options
></q-input>
<q-input
:model-value="isDefault"
@update:model-value="$emit('update:isDefault', $event)"
:label="$t('artist.dialogLabel.fieldLabels.isDefault')"
hide-bottom-space
></q-select>
type="text"
class="q-my-sm"
outlined
></q-input>
</div>
</div>
</q-card-section>
......@@ -80,6 +79,7 @@
type="submit"
color="primary"
:label="$t('userPage.crudActions.save')"
@click="$emit('click:addAccountBankBtn')"
/>
<q-btn
color="black"
......
src/components/artist-information/bank-account/index.vue
View file @ c1ae9907
......@@ -3,7 +3,7 @@
<q-space></q-space>
<div class="col-auto">
<q-btn
@click="isOpenDialog"
@click="$emit('click:addBankBtn')"
color="primary"
no-caps
style="width: 100px"
......@@ -30,20 +30,10 @@
<template v-slot:body-cell-action>
<q-td style="padding: 0" class="flex flex-center">
<q-btn flat round color="primary" icon="mdi-information-outline">
<!-- <q-tooltip :offset="[20, 10]">{{
$t('userPage.toolTipMessage.informationUser')
}}</q-tooltip> -->
</q-btn>
<q-btn flat round color="primary" icon="mdi-minus-circle-outline">
<!-- <q-tooltip :offset="[20, 10]">{{
$t('userPage.toolTipMessage.updateUserInfo')
}}</q-tooltip> -->
</q-btn>
<q-btn flat round color="primary" icon="mdi-lock-outline">
<!-- <q-tooltip :offset="[20, 10]">{{
$t('userPage.toolTipMessage.updateUserInfo')
}}</q-tooltip> -->
</q-btn>
<q-btn flat round color="primary" icon="mdi-lock-outline"> </q-btn>
</q-td>
</template>
</q-table>
......@@ -77,10 +67,10 @@
</div>
</div> -->
</div>
<AddNewBankAccountDialog
<!-- <AddNewBankAccountDialog
v-model:is-open-dialog="isOpenDialog"
@click:CloseBtn="!isOpenDialog"
></AddNewBankAccountDialog>
></AddNewBankAccountDialog> -->
</div>
</template>
......
src/i18n/vi/index.ts
View file @ c1ae9907
......@@ -358,6 +358,20 @@ export default {
title: {
addArtist: 'Thêm nghệ sỹ',
updateArtist: 'Cập nhật nghệ sỹ',
addAccountBank: 'Thêm tài khoản ngân hàng',
},
fieldLabels: {
accountNumber: 'Mã thẻ',
cardNumber: 'Số ghi trên thẻ',
bankName: 'Ngân hàng',
cardType: 'Loại thẻ',
isDefault: 'Mặc định',
},
validateMessages: {
requireAccountNumber: 'Vui lòng nhập mã thẻ',
requireCardNumber: 'Vui lòng nhập số ghi trên thẻ',
requireBankName: 'Vui lòng chọn ngân hàng',
requireCardType: 'Vui lòng chọn loại thẻ',
},
},
confirmActionsTitle: {
......
src/pages/cap-nhat-thong-tin-nghe-sy/index.vue
View file @ c1ae9907
......@@ -71,7 +71,10 @@
></VabAccount>
</q-tab-panel>
<q-tab-panel name="bankAccount">
<BankAccount :bank-accounts="bankAccounts"></BankAccount>
<BankAccount
:bank-accounts="bankAccounts"
@click:addBankBtn="isOpenAddAccountBankDialog = true"
></BankAccount>
</q-tab-panel>
<q-tab-panel name="hotProduct">
<HotProduct :products="products"></HotProduct>
......@@ -79,6 +82,16 @@
</q-tab-panels>
</q-card>
</div>
<AddNewBankAccountDialog
v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
v-model:account-number="accountNumber"
v-model:card-number="cardNumber"
v-model:bank-name="bankName"
v-model:card-type="cardType"
v-model:is-default="isDefault"
@click:addAccountBankBtn="addAccBank"
@click:CloseBtn="isOpenAddAccountBankDialog = false"
></AddNewBankAccountDialog>
<div class="col-12 q-mt-md">
<div class="row">
<q-space></q-space>
......
src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts
View file @ c1ae9907
......@@ -3,6 +3,7 @@ import PersonalInformation from '../../components/artist-information/personal-in
import VabAccount from '../../components/artist-information/VAB-account/index.vue';
import BankAccount from '../../components/artist-information/bank-account/index.vue';
import HotProduct from '../../components/artist-information/hot-product/index.vue';
import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
import { api, BaseResponseBody } from 'src/boot/axios';
import { API_PATHS, config } from 'src/assets/configurations';
import { useRoute } from 'vue-router';
......@@ -26,6 +27,7 @@ export default defineComponent({
VabAccount,
BankAccount,
HotProduct,
AddNewBankAccountDialog,
},
watch: {
tab(value) {
......@@ -42,7 +44,10 @@ export default defineComponent({
setup() {
const tab = ref('information');
const clickBtn = () => {
console.log('askdaskdkasds');
};
const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
const fieldOptions: Ref<FieldType[]> = ref([]);
const nationalityOptions: Ref<NationalityType[]> = ref([]);
const professionOptions: Ref<QualificationType[]> = ref([]);
......@@ -96,6 +101,14 @@ export default defineComponent({
const stories: Ref<StoriesType[]> = ref([]);
const route = useRoute();
//state accountBank
const accountNumber: Ref<string | null | undefined> = ref();
const cardNumber: Ref<string | null | undefined> = ref();
const bankName: Ref<string | null | undefined> = ref();
const cardType: Ref<number | undefined> = ref();
const isDefault: Ref<number | undefined> = ref();
const getInformationArtist = async () => {
const response = (await api({
url: API_PATHS.getDetailArtist,
......@@ -183,6 +196,18 @@ export default defineComponent({
workOptions.value = response.data.data;
}
};
const addAccBank = () => {
const newAccount = {
accountNumber: accountNumber.value,
cardNumber: cardNumber.value,
bankName: bankName.value,
cardType: cardType.value,
isDefault: isDefault.value,
};
bankAccounts.value.push(newAccount as BankAccountType);
isOpenAddAccountBankDialog.value = false;
};
onMounted(() => {
void getInformationArtist();
void getFieldOptions();
......@@ -232,6 +257,14 @@ export default defineComponent({
banners,
shortDescription,
stories,
isOpenAddAccountBankDialog,
clickBtn,
accountNumber,
cardNumber,
bankName,
cardType,
isDefault,
addAccBank,
};
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment