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/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>