update

src/assets/configurations.example.ts

@@ -42,7 +42,9 @@ export enum API_PATHS {
   getDetailArtist = '/artist/detail',
   deleteManagingUnits = '/artistOwner/delete',
   deleteArtist = '/artist/delete',
-  getArtistDicitionaryOptions = 'artist/dictionary',
+  getArtistDictionaryOptions = 'artist/dictionary',
   artistOwnerAdd = 'artistOwner/add',
   updateArtist = 'artist/update',
+  bankOptions = 'bank',
+  cardTypeOptions = 'cardType',
 }

src/assets/type.ts

@@ -87,13 +87,11 @@ export type CardBankType = {
   id: number;
   name: string;
   status: number;
-  numIndex: number;
+  code: string;
 };
 export type TypeCardType = {
   id: number;
   name: string;
-  status: number;
-  numIndex: number;
 };
 export type WorkType = {
   id: number;
@@ -132,8 +130,8 @@ export type StoriesType = {
 export type BankAccountType = {
   accountNumber: string;
   cardNumber: string;
-  bankName: string;
-  cardType: number;
+  bank: CardBankType;
+  cardType: TypeCardType;
   isDefault: number;
   id: number;
   nameInCard: string | null;

src/components/artist-information/bank-account/BankAccount.ts

@@ -36,8 +36,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'bankName',
-        field: 'bankName',
+        name: 'bank',
+        field: 'bank',
         required: true,
         label: i18n.global.t('artist.bankAccount.tableColumnsBank.bankName'),
         align: 'center',

src/components/artist-information/bank-account/add-new-bank-account-dialog/AddAccountBankDialog.ts

-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
 
 import { BankAccountType } from 'src/assets/type';
 import { Notify } from 'quasar';
-
+import { CardBankType, TypeCardType } from 'src/assets/type';
 export default defineComponent({
   props: {
     isOpenAddAccountBankDialog: {
@@ -14,13 +14,29 @@ export default defineComponent({
       type: Array as PropType<BankAccountType[]>,
       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 },
+    cardBankOptions: {
+      type: Array as PropType<CardBankType[]>,
+      required: true,
+    },
+    typeBankOptions: {
+      type: Array as PropType<TypeCardType[]>,
+      required: true,
+    },
   },
+
   setup(props, context) {
+    watch(
+      () => props.isOpenAddAccountBankDialog,
+      (value) => {
+        if (value) {
+          accountNumber.value = '';
+          cardNumber.value = '';
+          bank.value = null;
+          cardType.value = null;
+          isDefault.value = 2;
+        }
+      }
+    );
     const accountNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -34,18 +50,18 @@ export default defineComponent({
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardNumber'),
     ];
     const bankNameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('artist.dialogLabel.validateMessages.requireBankName'),
+      (val: number | null) =>
+        val !== null ||
+        i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     const cardTypeRules = [
-      (val: number | undefined) =>
-        val !== undefined ||
+      (val: number | null) =>
+        val !== null ||
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     const confirmAddAccBank = () => {
       if (
-        props.isDefault === 1 &&
+        isDefault.value === 1 &&
         props.bankAccounts.filter((item) => item.isDefault === 1).length
       ) {
         Notify.create({
@@ -61,15 +77,46 @@ export default defineComponent({
             'artist.dialogLabel.validateMessages.addAccess'
           ),
         });
-        context.emit('addNewBankAccount');
+        let bankFilter = {};
+        props.cardBankOptions.map((item) => {
+          if (item.id === bank.value) {
+            bankFilter = item;
+          }
+        });
+
+        let typeCardFilter = {};
+        props.typeBankOptions.map((item) => {
+          if (item.id === cardType.value) {
+            typeCardFilter = item;
+          }
+        });
+        context.emit('addNewBankAccount', {
+          accountNumber: accountNumber.value,
+          cardNumber: cardNumber.value,
+          bank: bankFilter,
+          cardType: typeCardFilter,
+          isDefault: isDefault.value,
+        });
       }
     };
+
+    const accountNumber: Ref<string> = ref('');
+    const cardNumber: Ref<string> = ref('');
+    const bank: Ref<number | null> = ref(null);
+    const cardType: Ref<number | null> = ref(null);
+    const isDefault: Ref<number> = ref(2);
+
     return {
       defaultStatus,
-      bankNameRules,
-      cardTypeRules,
       accountNumberRules,
       cardNumberRules,
+      accountNumber,
+      cardNumber,
+      bank,
+      cardType,
+      isDefault,
+      bankNameRules,
+      cardTypeRules,
       confirmAddAccBank,
     };
   },
@@ -79,7 +126,7 @@ export default defineComponent({
     'addNewBankAccount',
     'update:accountNumber',
     'update:cardNumber',
-    'update:bankName',
+    'update:bank',
     'update:cardType',
     'update:isDefault',
   ],

src/components/artist-information/bank-account/add-new-bank-account-dialog/index.vue

@@ -23,8 +23,7 @@
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <q-input
-                :model-value="accountNumber"
-                @update:model-value="$emit('update:accountNumber', $event)"
+                v-model="accountNumber"
                 :label="$t('artist.dialogLabel.fieldLabels.accountNumber')"
                 :rules="accountNumberRules"
                 hide-bottom-space
@@ -33,7 +32,7 @@
                 outlined
               ></q-input>
               <q-input
-                :model-value="cardNumber"
+                v-model="cardNumber"
                 @update:model-value="$emit('update:cardNumber', $event)"
                 :label="$t('artist.dialogLabel.fieldLabels.cardNumber')"
                 :rules="cardNumberRules"
@@ -42,32 +41,42 @@
                 class="q-my-sm"
                 outlined
               ></q-input>
-              <q-input
-                :model-value="bankName"
-                @update:model-value="$emit('update:bankName', $event)"
-                :label="$t('artist.dialogLabel.fieldLabels.bankName')"
+
+              <q-select
+                v-model="bank"
+                :options="cardBankOptions"
                 :rules="bankNameRules"
-                hide-bottom-space
+                label="Chọn ngân hàng"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></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
+                clearable
+              ></q-select>
+              <q-select
+                v-model="cardType"
+                :options="typeBankOptions"
+                label="Chọn loại thẻ"
+                :rules="cardTypeRules"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></q-input>
+                hide-bottom-space
+                clearable
+              ></q-select>
 
               <div class="flex">
                 <div class="flex flex-center text-body1 q-ml-xs">Mặc định</div>
-                <!-- :label="$t('artist.dialogLabel.fieldLabels.isDefault')" -->
                 <q-checkbox
-                  :model-value="isDefault"
+                  v-model="isDefault"
                   :true-value="1"
                   :false-value="2"
                   @update:model-value="$emit('update:isDefault', $event)"

src/components/artist-information/bank-account/edit-bank-account/EditBankAcc.ts

-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
 
-import { BankAccountType } from 'src/assets/type';
+import { BankAccountType, CardBankType, TypeCardType } from 'src/assets/type';
 import { Notify } from 'quasar';
 
 export default defineComponent({
@@ -14,17 +14,38 @@ export default defineComponent({
       type: Array as PropType<BankAccountType[]>,
       required: true,
     },
+    cardBankOptions: {
+      type: Array as PropType<CardBankType[]>,
+      required: true,
+    },
+    typeBankOptions: {
+      type: Array as PropType<TypeCardType[]>,
+      required: true,
+    },
     rowBankAccIdx: {
       type: Number,
       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 },
+    rowDataAccBank: {
+      type: Object as PropType<BankAccountType>,
+      required: true,
+    },
   },
+
   setup(props, context) {
+    watch(
+      () => props.isOpenEditAccountBankDialog,
+      (value) => {
+        if (value) {
+          accountNumber.value = props.rowDataAccBank.accountNumber;
+          cardNumber.value = props.rowDataAccBank.cardNumber;
+          bank.value = props.rowDataAccBank.bank.id;
+          cardType.value = props.rowDataAccBank.cardType.id;
+          isDefault.value = props.rowDataAccBank.isDefault;
+          // console.log(props.rowDataAccBank, 'rowrowDataAccBank');
+        }
+      }
+    );
     const accountNumberRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -38,27 +59,19 @@ export default defineComponent({
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardNumber'),
     ];
     const bankNameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
+      (val: number | null) =>
+        val !== null ||
         i18n.global.t('artist.dialogLabel.validateMessages.requireBankName'),
     ];
     const cardTypeRules = [
-      (val: number | undefined) =>
-        val !== undefined ||
+      (val: number | null) =>
+        val !== null ||
         i18n.global.t('artist.dialogLabel.validateMessages.requireCardType'),
     ];
     const confirmEditAccBank = () => {
-      let idx = 0;
-      for (let index = 0; index < props.bankAccounts.length; index++) {
-        const element = props.bankAccounts[index];
-        if ((element.isDefault = 1)) {
-          idx = index;
-        }
-      }
       if (
-        props.isDefault === 1 &&
-        props.bankAccounts.filter((item) => item.isDefault === 1).length &&
-        idx !== props.rowBankAccIdx
+        isDefault.value === 1 &&
+        props.bankAccounts.filter((item) => item.isDefault === 1).length
       ) {
         Notify.create({
           type: 'negative',
@@ -70,18 +83,48 @@ export default defineComponent({
         Notify.create({
           type: 'positive',
           message: i18n.global.t(
-            'artist.dialogLabel.validateMessages.editAccess'
+            'artist.dialogLabel.validateMessages.addAccess'
           ),
         });
-        context.emit('editBankAccount');
+        let bankFilter = {};
+        props.cardBankOptions.map((item) => {
+          if (item.id === bank.value) {
+            bankFilter = item;
+          }
+        });
+
+        let typeCardFilter = {};
+        props.typeBankOptions.map((item) => {
+          if (item.id === cardType.value) {
+            typeCardFilter = item;
+          }
+        });
+        context.emit('editBankAccount', {
+          accountNumber: accountNumber.value,
+          cardNumber: cardNumber.value,
+          bank: bankFilter,
+          cardType: typeCardFilter,
+          isDefault: isDefault.value,
+        });
       }
     };
+    const accountNumber: Ref<string> = ref('');
+    const cardNumber: Ref<string> = ref('');
+    const bank: Ref<number | null> = ref(null);
+    const cardType: Ref<number | null> = ref(null);
+    const isDefault: Ref<number> = ref(2);
+
     return {
       defaultStatus,
       bankNameRules,
       cardTypeRules,
       accountNumberRules,
       cardNumberRules,
+      accountNumber,
+      cardNumber,
+      bank,
+      cardType,
+      isDefault,
       confirmEditAccBank,
     };
   },

src/components/artist-information/bank-account/edit-bank-account/index.vue

@@ -23,8 +23,7 @@
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <q-input
-                :model-value="accountNumber"
-                @update:model-value="$emit('update:accountNumber', $event)"
+                v-model="accountNumber"
                 :label="$t('artist.dialogLabel.fieldLabels.accountNumber')"
                 :rules="accountNumberRules"
                 hide-bottom-space
@@ -33,8 +32,7 @@
                 outlined
               ></q-input>
               <q-input
-                :model-value="cardNumber"
-                @update:model-value="$emit('update:cardNumber', $event)"
+                v-model="cardNumber"
                 :label="$t('artist.dialogLabel.fieldLabels.cardNumber')"
                 :rules="cardNumberRules"
                 hide-bottom-space
@@ -42,32 +40,43 @@
                 class="q-my-sm"
                 outlined
               ></q-input>
-              <q-input
-                :model-value="bankName"
-                @update:model-value="$emit('update:bankName', $event)"
-                :label="$t('artist.dialogLabel.fieldLabels.bankName')"
+
+              <q-select
+                v-model="bank"
+                :options="cardBankOptions"
                 :rules="bankNameRules"
-                hide-bottom-space
+                label="Chọn ngân hàng"
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></q-input>
-              <q-input
-                :model-value="cardType"
+                hide-bottom-space
+                clearable
+              ></q-select>
+              <q-select
+                v-model="cardType"
                 @update:model-value="$emit('update:cardType', $event)"
-                :label="$t('artist.dialogLabel.fieldLabels.cardType')"
+                :options="typeBankOptions"
+                label="Chọn loại thẻ"
                 :rules="cardTypeRules"
-                hide-bottom-space
+                emit-value
+                map-options
+                option-value="id"
+                option-label="name"
                 type="text"
                 class="q-my-sm"
                 outlined
-              ></q-input>
+                hide-bottom-space
+                clearable
+              ></q-select>
 
               <div class="flex">
                 <div class="flex flex-center text-body1 q-ml-xs">Mặc định</div>
-                <!-- :label="$t('artist.dialogLabel.fieldLabels.isDefault')" -->
                 <q-checkbox
-                  :model-value="isDefault"
+                  v-model="isDefault"
                   :true-value="1"
                   :false-value="2"
                   @update:model-value="$emit('update:isDefault', $event)"

src/components/artist-information/bank-account/index.vue

@@ -20,6 +20,20 @@
         separator="cell"
         hide-pagination
       >
+        <template v-slot:body-cell-bank="rowData">
+          <q-td>
+            <div align="center">
+              {{ rowData.value.name }}
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-cardType="rowData">
+          <q-td>
+            <div align="center">
+              {{ rowData.value.name }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-isDefault="rowData">
           <q-td>
             <div align="center">

src/components/managingunits/add-new-managingunits-dialog/NewManagingUnits.ts

@@ -195,7 +195,7 @@ export default defineComponent({
         field: '',
       };
       const response = (await api({
-        url: API_PATHS.getArtistDicitionaryOptions,
+        url: API_PATHS.getArtistDictionaryOptions,
         method: 'GET',
         params: {
           field: data.id,

src/pages/cap-nhat-thong-tin-nghe-sy/index.vue

@@ -100,24 +100,19 @@
     </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"
+      :card-bank-options="cardBankOptions"
+      :type-bank-options="typeBankOptions"
       :bank-accounts="bankAccounts"
       @addNewBankAccount="addAccBank"
       @click:CloseBtn="isOpenAddAccountBankDialog = false"
     ></AddNewBankAccountDialog>
     <EditBankAccountDialog
       v-model:is-open-edit-account-bank-dialog="isOpenEditAccountBankDialog"
-      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"
+      :card-bank-options="cardBankOptions"
+      :type-bank-options="typeBankOptions"
       :row-bank-acc-idx="rowBankAccIdx"
       :bank-accounts="bankAccounts"
+      :row-data-acc-bank="rowDataAccBank"
       @editBankAccount="editAccBank"
       @click:CloseBtn="isOpenEditAccountBankDialog = false"
     ></EditBankAccountDialog>

src/pages/cap-nhat-thong-tin-nghe-sy/updateInformationArtist.ts

@@ -70,17 +70,8 @@ export default defineComponent({
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
     const professionOptions: Ref<QualificationType[]> = ref([]);
     const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
-    const cardBankOptions: Ref<CardBankType[]> = ref([
-      { id: 1, name: 'TPBank', status: 1, numIndex: 1 },
-      { id: 2, name: 'BIDV', status: 1, numIndex: 1 },
-      { id: 3, name: 'VietinBank', status: 1, numIndex: 1 },
-      { id: 4, name: 'VietcomBank', status: 1, numIndex: 1 },
-    ]);
-    const typeBankOptions: Ref<TypeCardType[]> = ref([
-      { id: 1, name: 'ATM', status: 1, numIndex: 1 },
-      { id: 2, name: 'Visa', status: 1, numIndex: 1 },
-      { id: 3, name: 'Credit', status: 1, numIndex: 1 },
-    ]);
+    const cardBankOptions: Ref<CardBankType[]> = ref([]);
+    const typeBankOptions: Ref<TypeCardType[]> = ref([]);
     const workOptions: Ref<WorkType[]> = ref([]);
     const sexOptions = ref([
       { id: 1, name: 'Nam' },
@@ -94,18 +85,7 @@ export default defineComponent({
     const artistName: Ref<string | null | undefined> = ref();
     const birthday: Ref<string | null | undefined> = ref('29/04/2021');
     const sex: Ref<number | undefined> = ref();
-    const cardBank: Ref<CardBankType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
-    const typeCard: Ref<TypeCardType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
+
     const nationality: Ref<NationalityType> = ref({
       id: 0,
       name: '',
@@ -149,10 +129,11 @@ export default defineComponent({
 
     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 bank: Ref<number | null> = ref(null);
+    const cardType: Ref<number | null> = ref(null);
     const isDefault: Ref<number | undefined> = ref(1);
     const rowBankAccIdx: Ref<number> = ref(0);
+    const rowDataAccBank: Ref<BankAccountType | null> = ref(null);
 
     //satate hot product
     const statusHotProduct: Ref<number> = ref(2);
@@ -258,15 +239,29 @@ 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);
+    const getBankOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.bankOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<CardBankType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        cardBankOptions.value = response.data.data;
+      }
+    };
+    const getTypeCardOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.cardTypeOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<TypeCardType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        typeBankOptions.value = response.data.data;
+      }
+    };
+
+    const addAccBank = (value: BankAccountType) => {
+      bankAccounts.value.push(value);
       isOpenAddAccountBankDialog.value = false;
     };
 
@@ -292,8 +287,8 @@ export default defineComponent({
     const openDialogAddAccBank = () => {
       accountNumber.value = null;
       cardNumber.value = null;
-      bankName.value = null;
-      cardType.value = undefined;
+      bank.value = null;
+      cardType.value = null;
       isDefault.value = 2;
       isOpenAddAccountBankDialog.value = true;
     };
@@ -315,32 +310,15 @@ export default defineComponent({
       itemIdx: number
     ) => {
       console.log(itemData, 'rowData');
-      accountNumber.value = itemData.accountNumber;
-      cardNumber.value = itemData.cardNumber;
-      bankName.value = itemData.bankName;
-      cardType.value = itemData.cardType;
-      isDefault.value = itemData.isDefault;
+      rowDataAccBank.value = itemData;
       rowBankAccIdx.value = itemIdx;
       console.log(rowBankAccIdx.value);
 
       isOpenEditAccountBankDialog.value = true;
     };
-    const editAccBank = () => {
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].accountNumber = accountNumber.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].cardNumber = cardNumber.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].bankName = bankName.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].cardType = cardType.value as number;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].isDefault = isDefault.value as number;
+    const editAccBank = (value: BankAccountType) => {
+      console.log(value, 'editAccBankeditAccBankeditAccBankeditAccBank');
+      bankAccounts.value[rowBankAccIdx.value] = value;
       isOpenEditAccountBankDialog.value = false;
     };
 
@@ -414,19 +392,17 @@ export default defineComponent({
         }
       } catch (error) {}
     };
-    const UpdateData = (value:ProductType)=>{
-    
-     
-      for(let i=0; i<products.value.length;i++){
-        if(products.value[i].id === value?.id){
+    const UpdateData = (value: ProductType) => {
+      for (let i = 0; i < products.value.length; i++) {
+        if (products.value[i].id === value?.id) {
           // console.log(products.value[i],'Item đẹpo');
-          products.value[i] = value
+          products.value[i] = value;
         }
       }
       // console.log(products.value);
     };
     const SetProduct = (value: ProductType) => {
-      DataUpdatHotProduct.value= value
+      DataUpdatHotProduct.value = value;
     };
     onMounted(() => {
       void getInformationArtist();
@@ -435,6 +411,8 @@ export default defineComponent({
       void getArtistLevelOptions();
       void getQualificationOptions();
       void getWorkOptions();
+      void getBankOptions();
+      void getTypeCardOptions();
     });
     return {
       tab,
@@ -482,8 +460,6 @@ export default defineComponent({
       clickBtn,
       accountNumber,
       cardNumber,
-      bankName,
-      cardType,
       isDefault,
       addAccBank,
       schedules,
@@ -496,8 +472,8 @@ export default defineComponent({
       openDialogAddHotProduct,
       cardBankOptions,
       typeBankOptions,
-      cardBank,
-      typeCard,
+      bank,
+      cardType,
       isOpenEditAccountBankDialog,
       openDialogEditAccBank,
       editAccBank,
@@ -513,7 +489,10 @@ export default defineComponent({
       openUpdateHotProduct,
       SetProduct,
       DataUpdatHotProduct,
-      UpdateData
+      UpdateData,
+      getBankOptions,
+      getTypeCardOptions,
+      rowDataAccBank,
     };
   },
 });

src/pages/them-nghe-sy/AddArtist.ts

-import { defineComponent, onMounted, ref, Ref } from 'vue';
-import PersonalInformation from '../../components/artist-information/personal-information/index.vue';
-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 AddHotProductDialog from '../../components/artist-information/AddHotProduct/index.vue';
-import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
-import EditBankAccountDialog from 'components/artist-information/bank-account/edit-bank-account/index.vue';
-import UploadEmbedDialog from 'components/artist-information/upload-embed-dialog/index.vue';
-import { api, BaseResponseBody } from 'src/boot/axios';
-import { API_PATHS, config } from 'src/assets/configurations';
-import { useRoute } from 'vue-router';
-import { AxiosResponse } from 'axios';
-import moment from 'moment';
-import { i18n } from 'src/boot/i18n';
-import { Dialog, Notify } from 'quasar';
-
-import {
-  ArtistInfoType,
-  FieldType,
-  NationalityType,
-  ArtistLevelType,
-  QualificationType,
-  WorkType,
-  BankAccountType,
-  ProductType,
-  BannerType,
-  StoriesType,
-  SchedulesType,
-  CardBankType,
-  TypeCardType,
-} from 'src/assets/type';
-
-export default defineComponent({
-  components: {
-    PersonalInformation,
-    VabAccount,
-    BankAccount,
-    HotProduct,
-    AddNewBankAccountDialog,
-    UploadEmbedDialog,
-    AddHotProductDialog,
-    EditBankAccountDialog,
-  },
-  watch: {
-    tab(value) {
-      if (value === 'information') {
-        console.log('information');
-      } else if (value === 'vabAccount') {
-        console.log('vabAccount');
-        // console.log(this.$router.currentRoute.value.params, 'asdasd');
-      } else if (value === 'bankAccount') {
-        console.log('bankAccount');
-      } else console.log('hotProduct');
-    },
-  },
-
-  setup() {
-    const tab = ref('information');
-    const clickBtn = () => {
-      console.log('askdaskdkasds');
-    };
-    const isOpenAddAccountBankDialog: Ref<boolean> = ref(false);
-    const isOpenEditAccountBankDialog: Ref<boolean> = ref(false);
-    const openAddHotProduct: Ref<boolean> = ref(false);
-
-    const isOpenDialogEmbed: Ref<boolean> = ref(false);
-    const fieldOptions: Ref<FieldType[]> = ref([]);
-    const nationalityOptions: Ref<NationalityType[]> = ref([]);
-    const professionOptions: Ref<QualificationType[]> = ref([]);
-    const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
-    const cardBankOptions: Ref<CardBankType[]> = ref([
-      { id: 1, name: 'TPBank', status: 1, numIndex: 1 },
-      { id: 2, name: 'BIDV', status: 1, numIndex: 1 },
-      { id: 3, name: 'VietinBank', status: 1, numIndex: 1 },
-      { id: 4, name: 'VietcomBank', status: 1, numIndex: 1 },
-    ]);
-    const typeBankOptions: Ref<TypeCardType[]> = ref([
-      { id: 1, name: 'ATM', status: 1, numIndex: 1 },
-      { id: 2, name: 'Visa', status: 1, numIndex: 1 },
-      { id: 3, name: 'Credit', status: 1, numIndex: 1 },
-    ]);
-    const workOptions: Ref<WorkType[]> = ref([]);
-    const sexOptions = ref([
-      { id: 1, name: 'Nam' },
-      { id: 2, name: 'Nữ' },
-    ]);
-    // const status: Ref<boolean | number> = ref(true);
-    const id: Ref<number> = ref(0);
-    const account: Ref<string> = ref('');
-    const artistCode: Ref<string> = ref('');
-    const fullName: Ref<string> = ref('');
-    const artistName: Ref<string | null | undefined> = ref();
-    const birthday: Ref<string | null | undefined> = ref('29/04/2021');
-    const sex: Ref<number | undefined> = ref();
-    const cardBank: Ref<CardBankType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
-    const typeCard: Ref<TypeCardType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
-    const nationality: Ref<NationalityType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
-    const qualification: Ref<QualificationType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      numIndex: 1,
-    });
-    const artistLevel: Ref<ArtistLevelType> = ref({
-      id: 0,
-      name: '',
-      status: 1,
-      artistLevel: 1,
-      description: '',
-    });
-    const address: Ref<string | null | undefined> = ref();
-    const status: Ref<number> = ref(1);
-    const fields: Ref<FieldType[]> = ref([]);
-    const works: Ref<WorkType[]> = ref([]);
-    const phoneNumber: Ref<string | null | undefined> = ref();
-    const email: Ref<string | null | undefined> = ref();
-    const facebook: Ref<string | null | undefined> = ref();
-    const facebookMessage: Ref<string | null | undefined> = ref();
-    const instagram: Ref<string | null | undefined> = ref();
-    const whatsapp: Ref<string | null | undefined> = ref();
-    const bankAccounts: Ref<BankAccountType[]> = ref([]);
-    const products: Ref<ProductType[]> = ref([]);
-    const banners: Ref<BannerType[]> = ref([]);
-    const shortDescription: Ref<string | null> = ref('');
-    const socialEmbedded: Ref<string | null> = ref('');
-    const stories: Ref<StoriesType[]> = ref([]);
-    const schedules: Ref<SchedulesType[]> = ref([]);
-    const formatSchedules: Ref<string[]> = 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(1);
-    const rowBankAccIdx: Ref<number> = ref(0);
-
-    const getInformationArtist = async () => {
-      const response = (await api({
-        url: API_PATHS.getDetailArtist,
-        method: 'GET',
-        params: { artistId: route.params.id },
-      })) as AxiosResponse<BaseResponseBody<ArtistInfoType>>;
-      console.log(response, 'Artist Detail Info');
-      const ArtistInformation = response.data.data;
-      id.value = ArtistInformation.id;
-      account.value = ArtistInformation.account;
-      artistCode.value = ArtistInformation.artistCode;
-      fullName.value = ArtistInformation.fullName;
-      artistName.value = ArtistInformation.artistName;
-      birthday.value = moment(
-        ArtistInformation.birthday,
-        'DD/MM/YYYY HH:mm:ss'
-      ).format('YYYY-MM-DD');
-      address.value = ArtistInformation.address;
-      status.value = ArtistInformation.status;
-      phoneNumber.value = ArtistInformation.phoneNumber;
-      email.value = ArtistInformation.email;
-      facebook.value = ArtistInformation.facebook;
-      facebookMessage.value = ArtistInformation.facebookMessage;
-      instagram.value = ArtistInformation.instagram;
-      whatsapp.value = ArtistInformation.whatsapp;
-      nationality.value = ArtistInformation.nationality;
-      qualification.value = ArtistInformation.qualification;
-      works.value = ArtistInformation.works;
-      artistLevel.value = ArtistInformation.artistLevel;
-      sex.value = ArtistInformation.sex;
-      fields.value = ArtistInformation.fields;
-      bankAccounts.value = ArtistInformation.bankAccounts;
-      products.value = ArtistInformation.products;
-      banners.value = ArtistInformation.banners || [];
-      socialEmbedded.value = ArtistInformation.socialEmbedded;
-      stories.value = ArtistInformation.stories;
-      schedules.value = ArtistInformation.schedules;
-      for (let index = 0; index < schedules.value.length; index++) {
-        const element = schedules.value[index];
-
-        formatSchedules.value.push(
-          moment(element.scheduleTime, 'DD/MM/YYYY HH:mm:ss').format(
-            'YYYY/MM/DD'
-          )
-        );
-      }
-    };
-    const getFieldOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getFieldOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<FieldType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        fieldOptions.value = response.data.data;
-        console.log(fieldOptions.value, 'fieldOptions');
-      }
-    };
-
-    const getNationalityOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getNationalityOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<NationalityType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        nationalityOptions.value = response.data.data;
-      }
-    };
-    const getArtistLevelOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getArtistLevelOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<ArtistLevelType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        artistLevelOptions.value = response.data.data;
-      }
-    };
-    const getQualificationOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getQualificationOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<QualificationType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        professionOptions.value = response.data.data;
-      }
-    };
-    const getWorkOptions = async () => {
-      const response = (await api({
-        url: API_PATHS.getWorkOptions,
-        method: 'GET',
-        params: {},
-      })) as AxiosResponse<BaseResponseBody<WorkType[]>>;
-      if (response.data.error.code === config.API_RES_CODE.OK.code) {
-        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;
-    };
-
-    const confirmDeleteAccBank = (value: number) => {
-      Dialog.create({
-        title: i18n.global.t(
-          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankTitle'
-        ),
-        message: i18n.global.t(
-          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankContent'
-        ),
-        cancel: i18n.global.t(
-          'artist.bankAccount.confirmActionsTitle.confirmDeleteAccBankBtnLabel'
-        ),
-        color: 'negative',
-      }).onOk(() => {
-        deleteAccBank(value);
-      });
-    };
-    const openDialogAddHotProduct = () => {
-      console.log('object');
-      // console.log(openAddHotProduct.value);
-      openAddHotProduct.value = true;
-    };
-    const openDialogAddAccBank = () => {
-      accountNumber.value = null;
-      cardNumber.value = null;
-      bankName.value = null;
-      cardType.value = undefined;
-      isDefault.value = 2;
-      isOpenAddAccountBankDialog.value = true;
-    };
-    const deleteAccBank = (index: number) => {
-      Notify.create({
-        type: 'positive',
-        message: i18n.global.t(
-          'artist.dialogLabel.validateMessages.deleteAccess'
-        ),
-      });
-      bankAccounts.value.splice(index, 1);
-    };
-    const selectedFile = (value: BannerType) => {
-      banners.value.push(value);
-      console.log(banners.value);
-    };
-    const openDialogEditAccBank = (
-      itemData: BankAccountType,
-      itemIdx: number
-    ) => {
-      console.log(itemData, 'rowData');
-      accountNumber.value = itemData.accountNumber;
-      cardNumber.value = itemData.cardNumber;
-      bankName.value = itemData.bankName;
-      cardType.value = itemData.cardType;
-      isDefault.value = itemData.isDefault;
-      rowBankAccIdx.value = itemIdx;
-      console.log(rowBankAccIdx.value);
-
-      isOpenEditAccountBankDialog.value = true;
-    };
-    const editAccBank = () => {
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].accountNumber = accountNumber.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].cardNumber = cardNumber.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].bankName = bankName.value as string;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].cardType = cardType.value as number;
-      bankAccounts.value[
-        rowBankAccIdx.value
-      ].isDefault = isDefault.value as number;
-      isOpenEditAccountBankDialog.value = false;
-    };
-
-    onMounted(() => {
-      void getFieldOptions();
-      void getNationalityOptions();
-      void getArtistLevelOptions();
-      void getQualificationOptions();
-      void getWorkOptions();
-    });
-    return {
-      tab,
-      getInformationArtist,
-      id,
-      route,
-      artistCode,
-      fullName,
-      artistName,
-      birthday,
-      sex,
-      nationality,
-      address,
-      status,
-      fields,
-      works,
-      qualification,
-      artistLevel,
-      phoneNumber,
-      email,
-      facebook,
-      facebookMessage,
-      instagram,
-      whatsapp,
-      socialEmbedded,
-      sexOptions,
-      fieldOptions,
-      nationalityOptions,
-      professionOptions,
-      artistLevelOptions,
-      workOptions,
-      getFieldOptions,
-      getNationalityOptions,
-      getArtistLevelOptions,
-      getQualificationOptions,
-      getWorkOptions,
-      bankAccounts,
-      products,
-      account,
-      banners,
-      shortDescription,
-      stories,
-      isOpenAddAccountBankDialog,
-      openAddHotProduct,
-      clickBtn,
-      accountNumber,
-      cardNumber,
-      bankName,
-      cardType,
-      isDefault,
-      addAccBank,
-      schedules,
-      formatSchedules,
-      confirmDeleteAccBank,
-      selectedFile,
-      isOpenDialogEmbed,
-      deleteAccBank,
-      openDialogAddAccBank,
-      openDialogAddHotProduct,
-      cardBankOptions,
-      typeBankOptions,
-      cardBank,
-      typeCard,
-      isOpenEditAccountBankDialog,
-      openDialogEditAccBank,
-      editAccBank,
-      rowBankAccIdx,
-    };
-  },
-});

src/pages/them-nghe-sy/index.vue

-<template>
-  <div class="q-mt-sm row q-col-gutter-sm">
-    <div class="col-12" width="100%">
-      <q-card>
-        <q-tabs
-          v-model="tab"
-          dense
-          class="text-grey"
-          active-color="primary"
-          indicator-color="primary"
-          align="justify"
-          narrow-indicator
-        >
-          <q-tab
-            name="information"
-            :label="$t('artist.artistInformation.tabLabel.personalInformation')"
-          />
-          <q-tab
-            name="vabAccount"
-            :label="$t('artist.artistInformation.tabLabel.vabAccout')"
-          />
-          <q-tab
-            name="bankAccount"
-            :label="$t('artist.artistInformation.tabLabel.bankAcount')"
-          />
-          <q-tab
-            name="hotProduct"
-            :label="$t('artist.artistInformation.tabLabel.hotProduct')"
-          />
-        </q-tabs>
-
-        <q-separator />
-
-        <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="information">
-            <PersonalInformation
-              :id="id"
-              v-model:artist-code="artistCode"
-              v-model:full-name="fullName"
-              v-model:artist-name="artistName"
-              v-model:birthday="birthday"
-              v-model:sex="sex"
-              v-model:nationality="nationality"
-              v-model:status="status"
-              v-model:address="address"
-              v-model:fields="fields"
-              v-model:works="works"
-              v-model:qualification="qualification"
-              v-model:artist-level="artistLevel"
-              v-model:phone-number="phoneNumber"
-              v-model:email="email"
-              v-model:facebook="facebook"
-              v-model:facebook-message="facebookMessage"
-              v-model:instagram="instagram"
-              v-model:whatsapp="whatsapp"
-              :sex-options="sexOptions"
-              :field-options="fieldOptions"
-              :nationality-options="nationalityOptions"
-              :profession-options="professionOptions"
-              :artist-level-options="artistLevelOptions"
-              :work-options="workOptions"
-            ></PersonalInformation>
-          </q-tab-panel>
-          <q-tab-panel name="vabAccount">
-            <VabAccount
-              v-model:account="account"
-              v-model:short-description="shortDescription"
-              v-model:content="stories[0].content"
-              v-model:format-schedules="formatSchedules"
-              @selectedFile="selectedFile"
-              @deleteBanner="banners.splice($event, 1)"
-              @openDialogUploadEmbed="isOpenDialogEmbed = true"
-              :social-embedded="socialEmbedded"
-              :banners="banners"
-              :stories="stories"
-            ></VabAccount>
-          </q-tab-panel>
-
-          <q-tab-panel name="bankAccount">
-            <BankAccount
-              :bank-accounts="bankAccounts"
-              @confirmDeleteAccBank="confirmDeleteAccBank"
-              @click:addBankBtn="openDialogAddAccBank"
-              @clickEditAccBankBtn="openDialogEditAccBank"
-            ></BankAccount>
-          </q-tab-panel>
-          <q-tab-panel name="hotProduct">
-            <HotProduct
-              @click:addHotProduct="openAddHotProduct = true"
-              :products="products"
-            ></HotProduct>
-          </q-tab-panel>
-        </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"
-      :bank-accounts="bankAccounts"
-      @addNewBankAccount="addAccBank"
-      @click:CloseBtn="isOpenAddAccountBankDialog = false"
-    ></AddNewBankAccountDialog>
-    <EditBankAccountDialog
-      v-model:is-open-edit-account-bank-dialog="isOpenEditAccountBankDialog"
-      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"
-      :row-bank-acc-idx="rowBankAccIdx"
-      :bank-accounts="bankAccounts"
-      @editBankAccount="editAccBank"
-      @click:CloseBtn="isOpenEditAccountBankDialog = false"
-    ></EditBankAccountDialog>
-    <UploadEmbedDialog
-      v-model:is-open-dialog-embed="isOpenDialogEmbed"
-      v-model:social-embedded="socialEmbedded"
-      @uploadEmbed="isOpenDialogEmbed = false"
-      @click:CloseBtn="isOpenDialogEmbed = false"
-    ></UploadEmbedDialog>
-    <AddHotProductDialog
-      v-model:status="status"
-      v-model:open-add-hot-product="openAddHotProduct"
-      @click:CloseBtnAddHotProduct="openAddHotProduct = false"
-    ></AddHotProductDialog>
-    <div class="col-12 q-mt-md">
-      <div class="row">
-        <q-space></q-space>
-        <div class="col-auto">
-          <q-btn
-            to="/nghe-sy"
-            color="grey"
-            no-caps
-            :label="$t('crudActions.back')"
-          ></q-btn>
-        </div>
-        <div class="col-auto q-mx-md">
-          <q-btn
-            color="primary"
-            no-caps
-            :label="$t('crudActions.update')"
-          ></q-btn>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" src="./AddArtist.ts"></script>