update

src/assets/configurations.example.ts

@@ -39,4 +39,5 @@ export enum API_PATHS {
   getArtistLevelOptions = '/artistLevel',
   getQualificationOptions = '/qualification',
   getWorkOptions = '/work',
+  getDetailArtist = '/artist/detail',
 }

src/assets/type.ts

@@ -37,17 +37,22 @@ export type ArtistInfoType = {
   sex: number;
   address: string | null;
   status: number;
-  nationality: NationalityType;
-  field: FieldType;
-  work: WorkType;
-  qualification: QualificationType;
-  artistLevel: FieldType;
   phoneNumber: string | null;
   email: string | null;
   facebook: string | null;
   facebookMessage: string | null;
   instagram: string | null;
   whatsapp: string | null;
+  nationality: NationalityType;
+  fields: FieldType[];
+  works: WorkType[];
+  qualification: QualificationType;
+  artistLevel: ArtistLevelType;
+  bankAccounts: BankAccountType[];
+  banners: BannerType[];
+  products: ProductType[];
+  schedules: SchedulesType[];
+  stories: StoriesType[];
 };
 
 export type FieldType = {
@@ -83,15 +88,11 @@ export type WorkType = {
   numIndex: number;
 };
 
-export type ArtistOwner = {
+export type BannerType = {
+  bannerUrl: string;
   id: number;
-  code: string;
-  name: string;
-  representative: string;
-  fields: string;
-  email: string;
-  phoneNumber: number;
-  status: number;
+  numIndex: number;
+  status: 1;
 };
 
 export type SchedulesType = {
@@ -111,3 +112,37 @@ export type StoriesType = {
   imageUrl: string;
   status: number;
 };
+
+export type BankAccountType = {
+  id: number;
+  isDefault: number;
+  nameInCard: string;
+  status: number;
+  accountNumber: string;
+  accountOwner: string;
+  bankName: string;
+  branchName: string;
+  cardNumber: string;
+  cardType: number;
+};
+
+export type ProductType = {
+  code: string;
+  embeddedUrl: string;
+  id: number;
+  imageUrl: string;
+  name: string;
+  numIndex: number;
+  status: number;
+};
+
+export type ArtistOwner = {
+  id: number;
+  code: string;
+  name: string;
+  representative: string;
+  fields: string;
+  email: string;
+  phoneNumber: number;
+  status: number;
+};

src/components/artist-information/personal-information/PersonalInformation.ts

 import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+import { isEmail } from '../../../boot/functions';
+import { isMobilePhone } from '../../../boot/functions';
 export default defineComponent({
   props: {
     id: { type: Number, required: true },
     artistCode: { type: String, required: true },
     fullName: { type: String, required: true },
-    artistName: { type: String, default: '' },
-    birthday: { type: String, default: '' },
+    artistName: { type: String, required: true },
+    birthday: { type: String, required: true },
     sex: { type: Number, required: true },
-    nationality: { type: String, default: '' },
-    address: { type: String, default: '' },
+    nationality: { type: Number, required: true },
     status: { type: Number, required: true },
-    field: { type: String, default: '' },
-    work: { type: String, default: '' },
-    qualification: { type: String, default: '' },
-    artistLevel: { type: String, default: '' },
-    phoneNumber: { type: String, default: '' },
-    email: { type: String, default: '' },
-    facebook: { type: String, default: '' },
-    facebookMessage: { type: String, default: '' },
-    instagram: { type: String, default: '' },
-    whatsapp: { type: String, default: '' },
+    address: { type: String, required: true },
+    fields: { type: Array, required: true },
+    works: { type: Number, required: true },
+    qualification: { type: Number, required: true },
+    artistLevel: { type: Number, required: true },
+    phoneNumber: { type: String, required: true },
+    email: { type: String, required: true },
+    facebook: { type: String, required: true },
+    facebookMessage: { type: String, required: true },
+    instagram: { type: String, required: true },
+    whatsapp: { type: String, required: true },
+    sexOptions: { type: Array, required: true },
+    fieldOptions: { type: Array, required: true },
+    nationalityOptions: { type: Array, required: true },
+    professionOptions: { type: Array, required: true },
+    artistLevelOptions: { type: Array, required: true },
+    workOptions: { type: Array, required: true },
+  },
+  setup() {
+    const artistCodeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireArtistCode'
+        ),
+    ];
+    const fullNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireFullName'
+        ),
+    ];
+    const artistNameRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireArtistName'
+        ),
+    ];
+    const birthdayRules = [
+      (val?: string) =>
+        val !== undefined ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireBirthday'
+        ),
+    ];
+    const emailRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('artist.artistInformation.validateMessages.requireEmail'),
+      (val: string) =>
+        isEmail(val) ||
+        i18n.global.t('artist.artistInformation.validateMessages.isEmail'),
+    ];
+    const addressRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireAddress'
+        ),
+    ];
+    const phoneNumberRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requirePhoneNumber'
+        ),
+      (val: string) =>
+        isMobilePhone(val) ||
+        i18n.global.t('artist.artistInformation.validateMessages.isPhone'),
+    ];
+    const sexRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('artist.artistInformation.validateMessages.requireSex'),
+    ];
+    const nationalityRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireNationality'
+        ),
+    ];
+    const fieldRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('artist.artistInformation.validateMessages.requireField'),
+    ];
+    const workRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t('artist.artistInformation.validateMessages.requiredWork'),
+    ];
+    const qualificationRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireQualification'
+        ),
+    ];
+    const artistLevelRules = [
+      (val?: number) =>
+        val !== undefined ||
+        i18n.global.t(
+          'artist.artistInformation.validateMessages.requireArtistLevel'
+        ),
+    ];
+    return {
+      artistCodeRules,
+      fullNameRules,
+      artistNameRules,
+      birthdayRules,
+      emailRules,
+      addressRules,
+      phoneNumberRules,
+      sexRules,
+      nationalityRules,
+      fieldRules,
+      workRules,
+      qualificationRules,
+      artistLevelRules,
+    };
   },
   emits: [
+    'update:artistCode',
     'update:fullName',
     'update:artistName',
     'update:birthday',
-    'update:sex',
-    'update:nationality',
-    'update:address',
-    'update:status',
-    'update:field',
-    'update:work',
-    'update:qualification',
-    'update:artistLevel',
-    'update:phoneNumber',
     'update:email',
     'update:facebook',
     'update:facebookMessage',
     'update:instagram',
     'update:whatsapp',
+    'update:address',
+    'update:phoneNumber',
+    'update:sex',
+    'update:nationality',
+    'update:fields',
+    'update:works',
+    'update:qualification',
+    'update:artistLevel',
+    'update:status',
+    'addNewArtist',
   ],
 });

src/components/artist-information/personal-information/index.vue

@@ -2,17 +2,26 @@
   <div class="row q-col-gutter-sm q-mt-md">
     <q-space></q-space>
     <div class="col-5">
-      <div class="row flex-center">
+      <!-- <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.id') }}
         </div>
         <div class="col-8">{{ id }}</div>
-      </div>
-      <div class="row q-mt-md flex-center">
+      </div> -->
+      <div class="row q-mt-sm flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.artistCode') }}
         </div>
-        <div class="col-8">{{ artistCode }}</div>
+        <div class="col-8">
+          <q-input
+            :model-value="artistCode"
+            :rules="artistCodeRules"
+            @update:model-value="$emit('update:artistCode', $event)"
+            outlined
+            dense
+            hide-bottom-space
+          ></q-input>
+        </div>
       </div>
       <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
@@ -21,9 +30,11 @@
         <div class="col-8">
           <q-input
             :model-value="fullName"
+            :rules="fullNameRules"
             @update:model-value="$emit('update:fullName', $event)"
             outlined
             dense
+            hide-bottom-space
           ></q-input>
         </div>
       </div>
@@ -35,25 +46,32 @@
           <q-input
             :model-value="artistName"
             @update:model-value="$emit('update:artistName', $event)"
+            :rules="artistNameRules"
             outlined
             dense
+            hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row q-mt-sm flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.birthday') }}
         </div>
         <div class="col-8">
-          <q-select
+          <q-input
             :model-value="birthday"
             @update:model-value="$emit('update:birthday', $event)"
+            :rules="birthdayRules"
+            class="q-my-sm"
+            type="date"
             outlined
             dense
-          ></q-select>
+            hide-bottom-space
+          >
+          </q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.sex') }}
         </div>
@@ -61,12 +79,22 @@
           <q-select
             :model-value="sex"
             @update:model-value="$emit('update:sex', $event)"
+            :options="sexOptions"
+            :rules="sexRules"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.nationality') }}
         </div>
@@ -74,12 +102,22 @@
           <q-select
             :model-value="nationality"
             @update:model-value="$emit('update:nationality', $event)"
+            :options="nationalityOptions"
+            :rules="nationalityRules"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row q-mt-xs flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.address') }}
         </div>
@@ -87,54 +125,82 @@
           <q-input
             :model-value="address"
             @update:model-value="$emit('update:address', $event)"
+            :rules="addressRules"
             outlined
+            hide-bottom-space
             dense
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-md flex-center">
+      <div class="row q-mt-xs flex-center">
         <div class="col-3 text-weight-medium">
-          {{ $t('artist.artistInformation.titleDataField.status') }}
+          {{ $t('artist.artistInformation.titleDataField.field') }}
         </div>
         <div class="col-8">
           <q-select
-            :model-value="status"
-            @update:model-value="$emit('update:status', $event)"
+            :model-value="fields"
+            @update:model-value="$emit('update:fields', $event)"
+            :rules="fieldRules"
+            :options="fieldOptions"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
+            multiple
+            use-input
+            use-chips
           ></q-select>
         </div>
       </div>
-    </div>
-    <q-space></q-space>
-    <div class="col-5">
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
-          {{ $t('artist.artistInformation.titleDataField.field') }}
+          {{ $t('artist.artistInformation.titleDataField.work') }}
         </div>
         <div class="col-8">
           <q-select
-            :model-value="field"
-            @update:model-value="$emit('update:field', $event)"
+            :model-value="works"
+            :rules="workRules"
+            @update:model-value="$emit('update:works', $event)"
+            :options="workOptions"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
+            multiple
+            use-input
+            use-chips
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <!-- <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
-          {{ $t('artist.artistInformation.titleDataField.work') }}
+          {{ $t('artist.artistInformation.titleDataField.status') }}
         </div>
         <div class="col-8">
           <q-select
-            :model-value="work"
-            @update:model-value="$emit('update:work', $event)"
+            :model-value="status"
+            @update:model-value="$emit('update:status', $event)"
             outlined
             dense
           ></q-select>
         </div>
+      </div> -->
     </div>
-      <div class="row q-mt-sm flex-center">
+    <q-space></q-space>
+    <div class="col-5">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.qualification') }}
         </div>
@@ -142,20 +208,40 @@
           <q-select
             :model-value="qualification"
             @update:model-value="$emit('update:qualification', $event)"
+            :options="professionOptions"
+            :rules="qualificationRules"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
           ></q-select>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.artistLevel') }}
         </div>
         <div class="col-8">
           <q-select
             :model-value="artistLevel"
+            :rules="artistLevelRules"
             @update:model-value="$emit('update:artistLevel')"
+            :options="artistLevelOptions"
+            emit-value
+            map-options
+            option-value="id"
+            option-label="name"
+            type="text"
+            class="q-my-sm"
             outlined
+            hide-bottom-space
+            clearable
             dense
           ></q-select>
         </div>
@@ -168,12 +254,14 @@
           <q-input
             :model-value="phoneNumber"
             @update:model-value="$emit('update:phoneNumber', $event)"
+            :rules="phoneNumberRules"
             outlined
             dense
+            hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.email') }}
         </div>
@@ -181,12 +269,14 @@
           <q-input
             :model-value="email"
             @update:model-value="$emit('update:email', $event)"
+            :rules="emailRules"
             outlined
             dense
+            hide-bottom-space
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.facebook') }}
         </div>
@@ -199,7 +289,7 @@
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.facebookMessage') }}
         </div>
@@ -212,7 +302,7 @@
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.instagram') }}
         </div>
@@ -225,7 +315,7 @@
           ></q-input>
         </div>
       </div>
-      <div class="row q-mt-sm flex-center">
+      <div class="row q-mt-md flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.whatsapp') }}
         </div>

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

@@ -35,16 +35,16 @@
           <q-tab-panel name="information">
             <PersonalInformation
               :id="id"
-              :artist-code="artistCode"
+              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:address="address"
               v-model:status="status"
-              v-model:field="field"
-              v-model:work="work"
+              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"
@@ -53,6 +53,12 @@
               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">

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

-// import { route } from 'quasar/wrappers';
-// import { api } from 'src/boot/axios';
-// import router from 'src/router';
-// import routes from 'src/router/routes';
-// import router from 'src/router';
 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 { useRoute } from 'vue-router';
+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 {
+  ArtistInfoType,
+  FieldType,
+  NationalityType,
+  ArtistLevelType,
+  QualificationType,
+  WorkType,
+} from 'src/assets/type';
 
 export default defineComponent({
   components: {
@@ -33,84 +39,147 @@ export default defineComponent({
   setup() {
     const tab = ref('information');
 
+    const fieldOptions: Ref<FieldType[]> = ref([]);
+    const nationalityOptions: Ref<NationalityType[]> = ref([]);
+    const professionOptions: Ref<QualificationType[]> = ref([]);
+    const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
+    const workOptions: Ref<WorkType[]> = ref([]);
+    const sexOptions = ref([
+      { id: 1, name: 'Nam' },
+      { id: 2, name: 'Nữ' },
+    ]);
+
     const id: Ref<number> = ref(0);
     const artistCode: Ref<string> = ref('');
     const fullName: Ref<string> = ref('');
-    const artistName: Ref<string | undefined> = ref();
-    const birthday: Ref<string | undefined> = 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 nationality: Ref<string | undefined> = ref();
-    const address: Ref<string | undefined> = ref();
+    const nationality: Ref<NationalityType> = ref({
+      id: 0,
+      name: 'VN',
+      status: 1,
+      numIndex: 1,
+    });
+    const qualification: Ref<QualificationType> = ref({
+      id: 0,
+      name: 'Chuyen nghiep',
+      status: 1,
+      numIndex: 1,
+    });
+    const artistLevel: Ref<ArtistLevelType> = ref({
+      id: 0,
+      name: 'Hang 1',
+      status: 1,
+      artistLevel: 1,
+      description: '',
+    });
+    const address: Ref<string | null | undefined> = ref();
     const status: Ref<number> = ref(1);
-    const field: Ref<string | undefined> = ref();
-    const work: Ref<string | undefined> = ref();
-    const qualification: Ref<string | undefined> = ref();
-    const artistLevel: Ref<string | undefined> = ref();
-    const phoneNumber: Ref<string | undefined> = ref();
-    const email: Ref<string | undefined> = ref();
-    const facebook: Ref<string | undefined> = ref();
-    const facebookMessage: Ref<string | undefined> = ref();
-    const instagram: Ref<string | undefined> = ref();
-    const whatsapp: Ref<string | undefined> = ref();
+    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 route = useRoute();
-    const getInformationArtist = () => {
-      // const response = await api({
-      //   // url: API_PATHS.
-      //   method: 'GET',
-      //   params: {
-      //     id: route.params.id,
-      //   },
-      // });
-      const fakeData = {
-        id: 1,
-        artistCode: '0001',
-        fullName: 'Sơn Tùng',
-        stageName: 'SonTungMTP',
-        birthday: '04/02/1999',
-        sex: 1,
-        nationality: 'Việt Nam',
-        address: '',
-        status: 1,
-        field: 'Âm nhạc',
-        work: 'Ca sỹ',
-        qualification: 'Chuyên nghiệp',
-        artistLevel: 'Vip_1',
-        phoneNumber: '09999999999',
-        email: 'sontung@gmail.com',
-        facebook: '',
-        facebookMessage: '',
-        instagram: '',
-        whatsapp: '',
+    const route = useRoute();
+    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;
+      artistCode.value = ArtistInformation.artistCode;
+      fullName.value = ArtistInformation.fullName;
+      artistName.value = ArtistInformation.artistName;
+      // birthday.value = ArtistInformation.birthday;
+      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;
+    };
+
+    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');
+      }
     };
 
-      artistCode.value = fakeData.artistCode;
-      fullName.value = fakeData.fullName;
-      artistName.value = fakeData.stageName;
-      birthday.value = fakeData.birthday;
-      sex.value = fakeData.sex;
-      nationality.value = fakeData.nationality;
-      address.value = fakeData.address;
-      status.value = fakeData.status;
-      field.value = fakeData.field;
-      work.value = fakeData.work;
-      qualification.value = fakeData.qualification;
-      artistLevel.value = fakeData.artistLevel;
-      phoneNumber.value = fakeData.phoneNumber;
-      email.value = fakeData.email;
-      facebook.value = fakeData.facebook;
-      facebookMessage.value = fakeData.facebookMessage;
-      instagram.value = fakeData.instagram;
-      whatsapp.value = fakeData.whatsapp;
+    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;
+      }
     };
     onMounted(() => {
-      console.log('Information');
       void getInformationArtist();
+      void getFieldOptions();
+      void getNationalityOptions();
+      void getArtistLevelOptions();
+      void getQualificationOptions();
+      void getWorkOptions();
     });
     return {
       tab,
       getInformationArtist,
       id,
+      route,
       artistCode,
       fullName,
       artistName,
@@ -119,8 +188,8 @@ export default defineComponent({
       nationality,
       address,
       status,
-      field,
-      work,
+      fields,
+      works,
       qualification,
       artistLevel,
       phoneNumber,
@@ -129,6 +198,17 @@ export default defineComponent({
       facebookMessage,
       instagram,
       whatsapp,
+      sexOptions,
+      fieldOptions,
+      nationalityOptions,
+      professionOptions,
+      artistLevelOptions,
+      workOptions,
+      getFieldOptions,
+      getNationalityOptions,
+      getArtistLevelOptions,
+      getQualificationOptions,
+      getWorkOptions,
     };
   },
 });

src/pages/nghe-sy/index.vue

 <template>
   <div class="row q-col-gutter-sm flex-center q-mt-sm">
-    <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
-      {{ $t('artist.title') }}
-      <q-separator vertical spaced />
-    </div>
     <q-space></q-space>
     <div class="col-2">
       <q-input
@@ -11,7 +7,6 @@
         dense
         outlined
         :label="$t('artist.tableColumnsArtist.artistName')"
-        clearable
       ></q-input>
     </div>
     <div class="col-2" dense outlined>
@@ -23,7 +18,6 @@
         label="Lĩnh vực"
         dense
         outlined
-        clearable
       ></q-select>
     </div>
     <div class="col-2" dense outlined>
@@ -35,7 +29,6 @@
         dense
         outlined
         label="Độ chuyên"
-        clearable
       ></q-select>
     </div>
     <div class="col-2" dense outlined>
@@ -47,7 +40,6 @@
         dense
         outlined
         label="Xếp hạng"
-        clearable
       ></q-select>
     </div>
     <div class="col-auto">
@@ -55,7 +47,6 @@
         color="primary"
         no-caps
         :label="$t('crudActions.search')"
-        style="width: 100px"
         @click="filterListArtist"
       >
       </q-btn>
@@ -65,7 +56,6 @@
         color="primary"
         no-caps
         :label="$t('crudActions.add')"
-        style="width: 100px"
         @click="isOpenNewArtistDialog = true"
       ></q-btn>
     </div>
@@ -111,7 +101,7 @@
       </div>
       <AddNewArtistDialog
         v-model:is-open-new-artist-dialog="isOpenNewArtistDialog"
-        artistCode
+        v-model:artist-code="artistCode"
         v-model:full-name="fullName"
         v-model:artist-name="artistName"
         v-model:birthday="birthday"