create add artist page

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

@@ -35,10 +35,10 @@ import {
   TypeCardType,
 } from 'src/assets/type';
 
-export type AvatarType ={
-  file?:File,
-  url?:string | null
-}
+export type AvatarType = {
+  file?: File;
+  url?: string | null;
+};
 export default defineComponent({
   components: {
     PersonalInformation,
@@ -51,7 +51,7 @@ export default defineComponent({
     UpdateHotProduct,
     UploadEmbedDialog,
   },
- 
+
   setup() {
     const route = useRoute();
     const tab = ref('information');
@@ -166,10 +166,10 @@ export default defineComponent({
         );
       }
     };
-    
-    const setAvatar =(value:BannerType)=>{
+
+    const setAvatar = (value: BannerType) => {
       console.log(value);
-      avatar.value = value.url as string
+      avatar.value = value.url as string;
     };
     const getFieldOptions = async () => {
       const response = (await api({
@@ -333,6 +333,7 @@ export default defineComponent({
           method: 'POST',
           data: {
             id: route.params.id,
+            avatar: avatar.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
             birthday: birthday.value,
@@ -450,7 +451,7 @@ export default defineComponent({
       getTypeCardOptions,
       rowDataAccBank,
       avatar,
-      setAvatar
+      setAvatar,
     };
   },
 });

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"
+              :avatar="avatar"
+              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="isOpenAddAccountBankDialog = true"
+              @clickEditAccBankBtn="openDialogEditAccBank"
+            ></BankAccount>
+          </q-tab-panel>
+
+          <q-tab-panel name="hotProduct">
+            <HotProduct
+              :products="products"
+              @deleteRow="confirmDeleteRow($event)"
+              @reset="resetOldData"
+              :DataInsertHotProduct="DataInsertHotProduct"
+              @click:addHotProduct="openAddHotProduct = true"
+              @click:openUpadateHotProduct="openUpdateHotProduct = true"
+              @setDataUpdate="SetProduct($event)"
+            ></HotProduct>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+    <AddNewBankAccountDialog
+      v-model:is-open-add-account-bank-dialog="isOpenAddAccountBankDialog"
+      :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"
+      :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>
+
+    <!-- <UploadEmbedDialog
+      v-model:is-open-dialog-embed="isOpenDialogEmbed"
+      v-model:social-embedded="socialEmbedded"
+      @uploadEmbed="isOpenDialogEmbed = false"
+      @click:CloseBtn="isOpenDialogEmbed = false"
+    ></UploadEmbedDialog> -->
+
+    <AddHotProductDialog
+      @insertData="pushData"
+      v-model:status-hot-product="statusHotProduct"
+      v-model:open-add-hot-product="openAddHotProduct"
+      @click:CloseBtnAddHotProduct="openAddHotProduct = false"
+    ></AddHotProductDialog>
+
+    <UpdateHotProduct
+      :dataUpdate="DataUpdateHotProduct"
+      @UpdateData="UpdateData($event)"
+      @click:CloseBtnUpdateHotProduct="openUpdateHotProduct = false"
+      v-model:open-update-hot-product="openUpdateHotProduct"
+    ></UpdateHotProduct>
+    <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>

src/router/routes.ts

@@ -52,6 +52,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/cap-nhat-thong-tin-nghe-sy/index.vue'),
         name: Pages.informationArtist,
       },
+      {
+        path: '/nghe-sy/them-nghe-sy',
+        component: () => import('pages/them-nghe-sy/index.vue'),
+        name: Pages.addArtist,
+      },
       {
         path: '/khach-hang',
         component: () => import('pages/khach-hang/index.vue'),