create add new bank account dialog

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

 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
+import AddNewBankAccountDialog from 'components/artist-information/bank-account/add-new-bank-account-dialog/index.vue';
 export default defineComponent({
   components: {
     Pagination,
+    AddNewBankAccountDialog,
   },
   setup() {
     const userTableColumnsBankAccount = [
@@ -66,6 +68,7 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
+    const isOpenDialog: Ref<boolean> = ref(false);
     const getListBankAccount = () => {
       //   const response = (await api({
       //     url: API_PATHS.getListArtist,
@@ -95,6 +98,7 @@ export default defineComponent({
       void getListBankAccount();
     });
     return {
+      isOpenDialog,
       userTableColumnsBankAccount,
       userTableRowsBankAccount,
       pageIndex,

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

+import { defineComponent, Ref, ref } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    isOpenDialog: {
+      type: Boolean,
+      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 = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireUserName'),
+    ];
+    const numberCardRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('userPage.validateMessages.requireUserName'),
+    ];
+    const bankNameRules = [
+      (val: number | undefined) =>
+        val !== undefined ||
+        i18n.global.t('userPage.validateMessages.requireUserName'),
+    ];
+    const cardTypeRules = [
+      (val: number | undefined) =>
+        val !== undefined ||
+        i18n.global.t('userPage.validateMessages.requireUserName'),
+    ];
+    return {
+      idCard,
+      numberCard,
+      bankName,
+      cardType,
+      defaultStatus,
+      bankOptions,
+      cardTypeOptions,
+      bankNameRules,
+      cardTypeRules,
+      idCardRules,
+      numberCardRules,
+    };
+  },
+  emits: ['update:isOpenDialog', 'click:CloseBtn', 'addNewBankAccount'],
+});

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpenDialog"
+    @update:model-value="$emit('update:isOpenDialog', $event)"
+  >
+    <q-card style="min-width: 500px" bordered>
+      <q-form greedy @submit.prevent="$emit('addNewBankAccount')">
+        <q-card-section>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                $t('userPage.dialogLabel.title.addUser')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                v-model="idCard"
+                :label="$t('userPage.dialogLabel.fieldLabels.userName')"
+                :rules="idCardRules"
+                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"
+                hide-bottom-space
+              ></q-input>
+              <q-select
+                v-model="bankName"
+                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                class="q-my-sm"
+                :options="bankOptions"
+                option-value="id"
+                option-label="text"
+                outlined
+                map-options
+                :rules="bankNameRules"
+                hide-bottom-space
+              ></q-select>
+              <q-select
+                v-model="cardType"
+                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                class="q-my-sm"
+                :options="cardTypeOptions"
+                option-value="id"
+                option-label="text"
+                outlined
+                map-options
+                :rules="cardTypeRules"
+                hide-bottom-space
+              ></q-select>
+              <q-select
+                v-model="defaultStatus"
+                :label="$t('userPage.dialogLabel.fieldLabels.sex')"
+                class="q-my-sm"
+                option-value="id"
+                option-label="text"
+                outlined
+                map-options
+                hide-bottom-space
+              ></q-select>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            color="primary"
+            :label="$t('userPage.crudActions.save')"
+          />
+          <q-btn
+            color="black"
+            :label="$t('userPage.crudActions.cancel')"
+            @click="$emit('click:CloseBtn')"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" src="./AddAccountBankDialog.ts"></script>

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

@@ -2,7 +2,13 @@
   <div class="row q-col-gutter-sm flex-center">
     <q-space></q-space>
     <div class="col-auto">
-      <q-btn color="primary" no-caps :label="$t('crudActions.add')"> </q-btn>
+      <q-btn
+        @click="isOpenDialog"
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+      >
+      </q-btn>
     </div>
     <div class="col-12 q-mt-sm">
       <q-table
@@ -70,6 +76,10 @@
         </div>
       </div>
     </div>
+    <AddNewBankAccountDialog
+      v-model:is-open-dialog="isOpenDialog"
+      @click:CloseBtn="!isOpenDialog"
+    ></AddNewBankAccountDialog>
   </div>
 </template>