update

src/assets/type.ts

@@ -67,7 +67,7 @@ export type ArtistInfoType = {
   banners: BannerType[];
   products: ProductType[];
   schedules: SchedulesType[];
-  musicTypeDto:MusicType[];
+  musicTypeDto: MusicType[];
   provinceDto: ProvinceType[];
   stories: StoriesType[];
   mnName: string | null;
@@ -79,21 +79,24 @@ export type ArtistInfoType = {
   mnIns: string | null;
   mnWhatsapp: string | null;
   favoriteScore: number;
+  artistOwner: {
+    name: string;
+  };
+};
+export type ProvinceType = {
+  name: string;
+  fullname: string;
+  code: string;
+  level: string;
+};
+
+export type MusicType = {
+  id: number;
+  name: string;
+  status: number;
+  code: string;
+  numIndex: number;
 };
- export type ProvinceType = {
-    name: string,
-    fullname: string,
-    code: string,
-    level: string,
- };
-
- export type MusicType = {
-     id:number,
-     name: string,
-     status: number,
-     code: string,
-     numIndex: number,
- };
 export type FieldType = {
   id: number;
   name: string;
@@ -102,16 +105,14 @@ export type FieldType = {
   numIndex: number;
 };
 
-
 export type ClassificationOptions = {
   id: number;
   name: string;
-  status:number | null;
+  status: number | null;
   description: string | null;
   numIndex: number;
 };
 
-
 export type NationalityType = {
   id: number;
   name: string;
@@ -268,11 +269,9 @@ export type DetailUnit = {
   password: string;
   fields: Array<FieldType>;
   contracts: Array<Contract>;
-  classification: Array<ClassificationOptions>
+  classification: Array<ClassificationOptions>;
 };
 
- 
-
 export type CustomerType = {
   id: number;
   code: string | null;
@@ -463,11 +462,9 @@ export type ListArrayArtist = {
   artistName: string;
 };
 export type ListDeposit = {
-  artistBookingDepositDtos: []
-
+  artistBookingDepositDtos: [];
 };
 
-
 export type ListArrayCust = {
   id: number;
   fullName: string;
@@ -620,18 +617,18 @@ export type ListBannerConfig = {
   updateTime: string;
 };
 
-export type ListHomeConfig  = {
-  artistId: number,
+export type ListHomeConfig = {
+  artistId: number;
   artistName: {
-    artistName: string,
-    id: number
-  },
-  code: string,
-  embeddedUrl: string,
-  id: number,
-  imageUrl: string,
-  name: string
-}
+    artistName: string;
+    id: number;
+  };
+  code: string;
+  embeddedUrl: string;
+  id: number;
+  imageUrl: string;
+  name: string;
+};
 
 export type DetailBannerConfig = {
   id: number;
@@ -675,8 +672,8 @@ export type AddBannerConfig = {
 };
 export type listTypeFormalityDeposit = {
   id: number;
-  name:string
- }
+  name: string;
+};
 export type ListConfigPartner = {
   id: number;
   name: string;

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

@@ -70,36 +70,35 @@
           </div>
         </div>
       </div>
-    <div class="row flex-center">
-     <div class="col-3 text-weight-medium" >
-      <div>Tên đăng nhập <span style="color: red">*</span></div>
-    </div>
-  <div class="col-8">
-      <q-input
-      v-if="id"
-        :model-value="account"
-        @update:model-value="$emit('update:account', $event)"
-        readonly
-         class="q-my-sm"
-        dense
-        hide-bottom-space
-       outlined
-      ></q-input>
-      <q-input
-      v-else
-        :model-value="account"
-        @update:model-value="$emit('update:account', $event)"
-         :error="accountRules"
-        :error-message="errorMessAccount"
-         class="q-my-sm"
-        dense
-        hide-bottom-space
-       outlined
-      ></q-input>
-  </div>
-
-    </div>
-    <!-- <div class="col-auto" style="margin-top: 2px">
+      <div class="row flex-center">
+        <div class="col-3 text-weight-medium">
+          <div>Tên đăng nhập <span style="color: red">*</span></div>
+        </div>
+        <div class="col-8">
+          <q-input
+            v-if="id"
+            :model-value="account"
+            @update:model-value="$emit('update:account', $event)"
+            readonly
+            class="q-my-sm"
+            dense
+            hide-bottom-space
+            outlined
+          ></q-input>
+          <q-input
+            v-else
+            :model-value="account"
+            @update:model-value="$emit('update:account', $event)"
+            :error="accountRules"
+            :error-message="errorMessAccount"
+            class="q-my-sm"
+            dense
+            hide-bottom-space
+            outlined
+          ></q-input>
+        </div>
+      </div>
+      <!-- <div class="col-auto" style="margin-top: 2px">
       <q-btn color="primary" no-caps label="Reset Pass"></q-btn>
     </div> -->
 
@@ -110,7 +109,6 @@
         </div>
 
         <div class="col-8">
-          
           <q-input
             :model-value="artistCode"
             @update:model-value="$emit('update:artistCode', $event)"
@@ -147,13 +145,11 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-            <!-- :error-message="errorMessArtistName" -->
-             <!-- :error="artistNameRules" -->
+          <!-- :error-message="errorMessArtistName" -->
+          <!-- :error="artistNameRules" -->
           <q-input
             :model-value="artistName"
             @update:model-value="$emit('update:artistName', $event)"
-           
-          
             class="q-my-sm"
             outlined
             dense
@@ -168,11 +164,10 @@
         </div>
         <div class="col-8">
           <!-- :error="birthdayRules" -->
-            <!-- :error-message="errorMessBirthday" -->
+          <!-- :error-message="errorMessBirthday" -->
           <q-input
             :model-value="birthday"
             @update:model-value="$emit('update:birthday', $event)"
-            
             class="q-my-sm"
             outlined
             @click="openDialog = true"
@@ -186,7 +181,7 @@
                     style="width: 100%"
                     v-model="BirthdayDatePicker"
                     first-day-of-week="1"
-                     locale="vi"
+                    locale="vi"
                   ></q-date>
 
                   <q-card-actions align="right">
@@ -209,13 +204,12 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-           <!-- :error="sexRules"
+          <!-- :error="sexRules"
             :error-message="errorMessSex" -->
           <q-select
             :model-value="sex"
             @update:model-value="$emit('update:sex', $event)"
             :options="sexOptions"
-           
             emit-value
             map-options
             option-value="id"
@@ -237,12 +231,11 @@
         <div class="col-8">
           <!-- :error="nationalityRules"
             :error-message="errorMessNationality" -->
-          
+
           <q-select
             :model-value="nationality"
             @update:model-value="$emit('update:nationality', $event)"
             :options="nationalityOptions"
-            
             map-options
             option-value="id"
             option-label="name"
@@ -254,7 +247,7 @@
           ></q-select>
         </div>
       </div>
-      
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.address') }}
@@ -263,12 +256,11 @@
 
         <div class="col-8">
           <!-- {{address}} -->
-           <!-- :error="addressRules"
+          <!-- :error="addressRules"
             :error-message="errorMessAddress" -->
           <q-select
             :model-value="address"
             @update:model-value="$emit('update:address', $event)"
-            
             :options="provinceOptions1"
             option-value="fullName"
             option-label="fullName"
@@ -283,32 +275,29 @@
             map-options
             @filter="filterFn"
           >
-          <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              Không có dữ liệu
-            </q-item-section>
-          </q-item>
-          </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey">
+                  Không có dữ liệu
+                </q-item-section>
+              </q-item>
+            </template>
           </q-select>
-  
-
         </div>
       </div>
-      
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.field') }}
           <!-- <span style="color: red">*</span> -->
         </div>
-        
+
         <div class="col-8">
-           <!-- :error="fieldRules"
+          <!-- :error="fieldRules"
             :error-message="errorMessFields" -->
           <q-select
             :model-value="fields"
             @update:model-value="$emit('update:fields', $event)"
-           
             :options="fieldOptions"
             multiple
             map-options
@@ -325,20 +314,19 @@
           ></q-select>
         </div>
       </div>
- <!-- thể loại -->
-       <div class="row flex-center">
+      <!-- thể loại -->
+      <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.type') }}
           <!-- <span style="color: red">*</span> -->
         </div>
-          
-            <!-- :error="musicsRules"
+
+        <!-- :error="musicsRules"
             :error-message="errorMessTypes" -->
-          
-            
+
         <div class="col-8">
           <q-select
-           :model-value="musics"
+            :model-value="musics"
             @update:model-value="$emit('update:musics', $event)"
             :options="musicOptions"
             multiple
@@ -356,7 +344,7 @@
           ></q-select>
         </div>
       </div>
-       
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.work') }}
@@ -366,7 +354,6 @@
           <q-select
             :model-value="works"
             @update:model-value="$emit('update:works', $event)"
-        
             :options="workOptions"
             map-options
             option-value="id"
@@ -383,20 +370,19 @@
           ></q-select>
         </div>
       </div>
-      
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.qualification') }}
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-            <!-- :error="qualificationRules"
+          <!-- :error="qualificationRules"
             :error-message="errorMessQualification" -->
           <q-select
             :model-value="qualification"
             @update:model-value="$emit('update:qualification', $event)"
             :options="professionOptions"
-          
             map-options
             option-value="id"
             option-label="name"
@@ -409,7 +395,7 @@
           ></q-select>
         </div>
       </div>
-      
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.favoriteScore') }}
@@ -427,7 +413,7 @@
         </div>
       </div>
     </div>
-    
+
     <div class="col-5 q-ml-xl">
       <!-- <div class="row flex-center">
         <div class="col-3 text-weight-medium">
@@ -456,12 +442,11 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-           <!-- :error="phoneNumberRules"
+          <!-- :error="phoneNumberRules"
             :error-message="errorMessPhoneNumber" -->
           <q-input
             :model-value="phoneNumber"
             @update:model-value="$emit('update:phoneNumber', $event)"
-          
             mask="##########"
             class="q-my-sm"
             outlined
@@ -476,12 +461,11 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-            <!-- :error="emailRules"
+          <!-- :error="emailRules"
             :error-message="errorMessEmail" -->
           <q-input
             :model-value="email"
             @update:model-value="$emit('update:email', $event)"
-          
             outlined
             class="q-my-sm"
             dense
@@ -546,6 +530,20 @@
           ></q-input>
         </div>
       </div>
+      
+      <div class="row flex-center">
+        <div class="col-3 text-weight-medium">Đơn vị chủ quản</div>
+        <div class="col-8">
+          <q-input
+            :model-value="unitName"
+            
+            class="q-my-sm"
+            outlined
+            dense
+            disable
+          ></q-input>
+        </div>
+      </div>
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{ $t('artist.artistInformation.titleDataField.userAdminister') }}
@@ -560,6 +558,7 @@
           ></q-input>
         </div>
       </div>
+
       <div class="row flex-center">
         <div class="col-3 text-weight-medium">
           {{
@@ -611,14 +610,13 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-           <!-- :error="mnBookingPhoneRules"
+          <!-- :error="mnBookingPhoneRules"
             :error-message="errorMessmnBookingPhone" -->
           <q-input
             :model-value="mnBookingPhone"
             @update:model-value="$emit('update:mnBookingPhone', $event)"
             mask="##########"
             class="q-my-sm"
-           
             outlined
             dense
             hide-bottom-space
@@ -631,12 +629,11 @@
           <!-- <span style="color: red">*</span> -->
         </div>
         <div class="col-8">
-            <!-- :error="mnBookingEmailRules"
+          <!-- :error="mnBookingEmailRules"
             :error-message="errorMessmnBookingEmail" -->
           <q-input
             :model-value="mnBookingEmail"
             @update:model-value="$emit('update:mnBookingEmail', $event)"
-          
             outlined
             class="q-my-sm"
             dense
@@ -691,8 +688,8 @@
     </div>
   </div>
 </template>
- <script lang="ts">
-import { defineComponent, onMounted ,PropType, ref, Ref } from 'vue';
+<script lang="ts">
+import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 // import UploadImage from '../../upload-image/index.vue';
 import moment from 'moment';
@@ -700,11 +697,8 @@ import { FieldType, NationalityType } from 'src/assets/type';
 import { API_PATHS, config } from 'src/assets/configurations.example';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { AxiosResponse } from 'axios';
-import {
-  ProvinceType,
-}  from 'src/assets/type'
+import { ProvinceType } from 'src/assets/type';
 export default defineComponent({
-
   props: {
     mnBookingPhone: { type: String, required: true },
     mnBookingEmail: { type: String, required: true },
@@ -712,6 +706,7 @@ export default defineComponent({
     mnIns: { type: String, required: true },
     mnWhatsapp: { type: String, required: true },
     mnName: { type: String, required: true },
+    unitName: { type: String, required: true },
     mnPhone: { type: String, required: true },
     mnEmail: { type: String, required: true },
     hidden_img: { type: Boolean, required: true },
@@ -724,9 +719,9 @@ export default defineComponent({
     sex: { type: Number, required: true },
     nationality: { type: Object as PropType<NationalityType>, required: true },
     status: { type: Number, required: true },
-    address: { type: String ,required: true },
+    address: { type: String, required: true },
     fields: { type: Object as PropType<FieldType>, required: true },
-    musics: {type: String, required: true },
+    musics: { type: String, required: true },
     works: { type: Number, required: true },
     qualification: { type: Number, required: true },
     artistLevel: { type: Number, required: true },
@@ -745,7 +740,7 @@ export default defineComponent({
     professionOptions: { type: Array, required: true },
     artistLevelOptions: { type: Array, required: true },
     workOptions: { type: Array, required: true },
-    musicOptions: { type:Array, required: true},
+    musicOptions: { type: Array, required: true },
     favoriteScore: { type: Number, required: true },
     artistCodeRules: { type: Boolean, required: true },
     fullNameRules: { type: Boolean, required: true },
@@ -756,7 +751,7 @@ export default defineComponent({
     phoneNumberAdministerRules: { type: Boolean, required: true },
     // addressRules: { type: Boolean, required: true },
     account: { type: String, required: true },
-    accountRules:{type:Boolean, required: true},
+    accountRules: { type: Boolean, required: true },
     // phoneNumberRules: { type: Boolean, required: true },
     // sexRules: { type: Boolean, required: true },
     // nationalityRules: { type: Boolean, required: true },
@@ -771,16 +766,13 @@ export default defineComponent({
     // errorMessmnBookingEmail: { type: String, required: true },
     // mnBookingEmailRules: { type: Boolean, required: true },
     // mnBookingPhoneRules: { type: Boolean, required: true },
-   
+
     // options:  { type: String, required: true },
-    provinceOptions: {type: Array,
-      required: true,},
+    provinceOptions: { type: Array, required: true },
   },
   // components: {
   //   UploadImage,
   // },
-  
-  
 
   setup(_, context) {
     const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
@@ -793,42 +785,37 @@ export default defineComponent({
         context.emit('update:hidden_img', false);
       }
     };
-  
-     const provinceOptions1:Ref<ProvinceType[]> = ref([]);
 
-   
-   const getProvinceOptions = async () => {
-      const response = (await api ({
-        url : API_PATHS.getProvinceOptions,
+    const provinceOptions1: Ref<ProvinceType[]> = ref([]);
+
+    const getProvinceOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getProvinceOptions,
         method: 'GET',
         params: {},
       })) as AxiosResponse<BaseResponseBody<ProvinceType[]>>;
-      if(response.data.error.code === config.API_RES_CODE.OK.code){
-        provinceOptions1.value = response.data.data
-      
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        provinceOptions1.value = response.data.data;
       }
-   } 
+    };
+
+    const options = ref(provinceOptions1);
 
-  const options = ref(provinceOptions1)
-                            
-    const filterFn = (val:string, update:(fn: () => void) => void) => {
-        
+    const filterFn = (val: string, update: (fn: () => void) => void) => {
       if (!val) {
         update(() => {
-          options.value = [...provinceOptions1.value]
+          options.value = [...provinceOptions1.value];
         });
-        return ;
-      }
-       else {
-        update(() => { 
+        return;
+      } else {
+        update(() => {
           const needle = val.toLowerCase();
-            options.value = provinceOptions1.value.filter(
-              (v: {  name: string }) =>
-                v.name.toLowerCase().indexOf(needle) > 1 
-            );
+          options.value = provinceOptions1.value.filter(
+            (v: { name: string }) => v.name.toLowerCase().indexOf(needle) > 1
+          );
         });
       }
-    }
+    };
 
     const upload = ref(null);
     const uploadBanner = () => {
@@ -855,10 +842,10 @@ export default defineComponent({
     const onCancelClick = () => {
       openDialog.value = false;
     };
-      
- 
-   const errorMessAccount = i18n.global.t( 'artist.artistInformation.validateMessages.requireAccount'
-   );
+
+    const errorMessAccount = i18n.global.t(
+      'artist.artistInformation.validateMessages.requireAccount'
+    );
     const errorMessArtistCode = i18n.global.t(
       'artist.artistInformation.validateMessages.requireArtistCode'
     );
@@ -871,7 +858,7 @@ export default defineComponent({
     // const errorMessBirthday = i18n.global.t(
     //   'artist.artistInformation.validateMessages.requireBirthday'
     // );
-  
+
     // const errorMessSex = i18n.global.t(
     //   'artist.artistInformation.validateMessages.requireSex'
     // );
@@ -894,7 +881,7 @@ export default defineComponent({
       'artist.artistInformation.validateMessages.requireArtistLevel'
     );
     onMounted(() => {
-    void getProvinceOptions()
+      void getProvinceOptions();
     });
     return {
       check_infoBooking: ref(false),
@@ -916,7 +903,7 @@ export default defineComponent({
       // errorMessBirthday,
       // errorMessSex,
       // errorMessNationality,
-  
+
       // errorMessAddress,
       // errorMessFields,
       errorMessWorks,
@@ -924,9 +911,9 @@ export default defineComponent({
       errorMessArtistLevel,
       provinceOptions1,
       options,
-     
+
       // filterArrayOrganizational,
-      getProvinceOptions
+      getProvinceOptions,
     };
   },
 
@@ -956,6 +943,7 @@ export default defineComponent({
     'update:hidden_img',
     'update:status',
     'update:mnName',
+    'update:unitName',
     'update:mnPhone',
     'update:mnEmail',
     'update:mnBookingPhone',
@@ -969,15 +957,6 @@ export default defineComponent({
     'SetAvatar',
     'deleteAvatar',
     'UpdateBirtday',
-   
   ],
-   
 });
- </script>
-
-
-
-
-
-
-
+</script>

src/components/units-manager/add-update-unit-dialog/index.vue

@@ -165,8 +165,7 @@
           <!-- nghệ sỹ -->
           <div class="row">
             <div class="col-auto text-h6 text-weight-regular flex q-ml-md">
-              {{ $t('managingUnitAdd.titleAdd')
-              }}
+              {{ $t('managingUnitAdd.titleAdd') }}
             </div>
             <q-space></q-space>
             <div class="col-auto">
@@ -836,8 +835,8 @@ export default defineComponent({
       const newArtistList = [...props.artistList];
       if (selectedContract.value) {
         newArtistList[selectedContract.value.index] = {
-          contractFrom: contractTimeFrom.value,
-          contractTo: contractTimeTo.value,
+          contractFrom: `${contractTimeFrom.value} 00:00:00`,
+          contractTo: `${contractTimeTo.value} 00:00:00`,
           timeAdd: `${contractTimeFrom.value} - ${contractTimeTo.value}`,
           status: artistStatus.value,
           artistId: artistName.value?.id,

src/components/user-management/add-new-user-dialog/index.vue

@@ -126,7 +126,7 @@
                 @update:model-value="$emit('update:birthday', $event)"
                 :label="$t('userPage.dialogLabel.fieldLabels.birthday')"
                 outlined
-           
+                readonly
                 hide-bottom-space
               >
                 <template v-slot:append>

src/components/user-management/update-user-dialog/index.vue

@@ -75,7 +75,6 @@
                 type="text"
                 class="q-my-sm"
                 outlined
-              
                 hide-bottom-space
               ></q-input>
 
@@ -98,7 +97,7 @@
                 @update:model-value="$emit('update:birthday', $event)"
                 :label="$t('userPage.dialogLabel.fieldLabels.birthday')"
                 outlined
-
+                readonly
                 hide-bottom-space
               >
                 <template v-slot:append>

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

@@ -65,6 +65,7 @@
             v-model:mn-whatsapp="mnWhatsapp"
             v-model:favorite-score="favoriteScore"
             v-model:check_infoBooking="check_infoBooking"
+            v-model:unitName="unitName"
              :accountRules="accountRules"
             :errorMessmnBookingPhone="errorMessmnBookingPhone"
             :errorMessmnBookingEmail="errorMessmnBookingEmail"

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

@@ -103,6 +103,7 @@ export default defineComponent({
     const artistName: Ref<string | null> = ref(null);
     const birthday: Ref<string | null> = ref(null);
     const sex: Ref<number | null> = ref(null);
+    const unitName: Ref<string | null> = ref(null);
     const nationality: Ref<NationalityType> = ref({
       id: 1,
       name: 'Việt Nam',
@@ -377,6 +378,7 @@ export default defineComponent({
       email.value = ArtistInformation.email;
       facebook.value = ArtistInformation.facebook;
       facebookMessage.value = ArtistInformation.facebookMessage;
+      unitName.value = ArtistInformation.artistOwner?.name
       instagram.value = ArtistInformation.instagram;
       whatsapp.value = ArtistInformation.whatsapp;
       mnName.value = ArtistInformation.mnName;
@@ -995,7 +997,7 @@ export default defineComponent({
       sex,
       nationality,
       address,
-
+      unitName,
       status,
       fields,
       works,

src/pages/don-vi-chu-quan/index.vue

@@ -458,7 +458,7 @@ export default defineComponent({
         email: unitEmail.value,
         phoneNumber: unitPhoneNumber.value,
         status: unitStatus.value,
-        classification: unitField.value,
+        classification: unitField.value === null ? null : unitField.value,
         userName: unitUserName.value,
         password: unitPassword.value,
         contracts: unitArtistList.value,

src/pages/khach-hang/index.vue

@@ -367,6 +367,8 @@ export default defineComponent({
             pageIndex: pageIndex.value,
             pageSize: pageSize.value,
             customerLevel: levelSelected.value?.id,
+            companyName: companyNameSelected.value,
+            taxCode: taxCodeSelected.value,
           },
         })) as AxiosResponse<
           BaseResponseBody<PaginationResponse<CustomerType>>

src/pages/nghe-sy/index.vue

 <template>
   <div class="row q-col-gutter-sm flex-center q-mt-sm">
     <q-space></q-space>
+
     <div class="col-2">
       <q-input
         v-model="fullNameKeyword"
         dense
         outlined
-        :label="$t('artist.tableColumnsArtist.artistName')"
+        label="Tên nghệ sỹ/nghệ danh"
         clearable
       ></q-input>
     </div>
@@ -57,6 +58,16 @@
       >
       </q-btn>
     </div>
+    <div class="col-auto">
+      <q-btn
+        @click="openDialogFilter = true"
+        square
+        color="primary"
+        icon="mdi-plus"
+      >
+        <q-tooltip :offset="[20, 10]">Bộ lọc nâng cao</q-tooltip>
+      </q-btn>
+    </div>
     <div class="col-auto">
       <q-btn
         class="q-mr-md"
@@ -130,6 +141,108 @@
         </template>
       </q-table>
     </div>
+    <q-dialog v-model="openDialogFilter" persistent>
+      <q-card style="min-width: 550px">
+        <q-card-section style="border-bottom: 1px solid #5d319e">
+          <div style="font-size: 20px">Bộ lọc nâng cao</div>
+        </q-card-section>
+        <!-- <div class="row">
+          <div class="col-6 px-4" >
+            <q-input
+              v-model="fullNameKeyword"
+              dense
+              outlined
+              label="Chi phí từ"
+              clearable
+            ></q-input>
+          </div>
+          <div class="col-6">
+            <q-input
+              v-model="fullNameKeyword"
+              dense
+              outlined
+              label="Chi phí đến"
+              clearable
+            ></q-input>
+          </div>
+          <div class="col-6">
+            <q-input
+              v-model="fullNameKeyword"
+              dense
+              outlined
+              label="Cấp độ"
+              clearable
+            ></q-input>
+          </div>
+          <div class="col-6"></div>
+          <div class="col-6"></div>
+          <div class="col-6"></div>
+          <div class="col-12"></div>
+        </div> -->
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 15rem)"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-6" style="padding: 12px">
+              <q-input
+                v-model="costFrom"
+                dense
+                outlined
+                label="Chi phí từ"
+                clearable
+              ></q-input>
+            </div>
+
+            <div class="col-6" style="padding: 12px">
+              <q-input
+                v-model="costTo"
+                dense
+                outlined
+                label="Chi phí đến"
+                clearable
+              ></q-input>
+            </div>
+
+            <!-- <div class="col-6" style="padding: 12px">
+              <q-input
+                v-model="level"
+                dense
+                outlined
+                label="Cấp độ"
+                clearable
+              ></q-input>
+            </div> -->
+
+            <div class="col-12" style="padding: 8px 12px 8px 12px">
+              <q-select
+                v-model="musics"
+                :options="musicOptions"
+          
+                option-value="id"
+                option-label="name"
+                label="Thể loại"
+                outlined
+                hide-bottom-space
+                clearable
+                dense
+                map-options
+                use-input
+                use-chips
+                 type="text"
+              ></q-select>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat color="primary" v-close-popup>Đóng</q-btn>
+          <q-btn flat color="primary" v-close-popup @click="filter">Lưu</q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
     <div class="col-12 q-mt-sm">
       <Pagination
         v-model:currentPage="pageIndex"
@@ -172,7 +285,6 @@
       :nationality-options="nationalityOptions"
       :profession-options="professionOptions"
       :artist-level-options="artistLevelOptions"
-    
       :work-options="workOptions"
       @click:CloseBtn="isOpenNewArtistDialog = false"
     ></AddNewArtistDialog>
@@ -192,8 +304,7 @@ import {
   QualificationType,
   WorkType,
   ProvinceType,
-  MusicType
-  
+  MusicType,
 } from 'src/assets/type';
 import Pagination from 'components/pagination/index.vue';
 import { api, BaseResponseBody } from 'src/boot/axios';
@@ -223,7 +334,7 @@ export default defineComponent({
         align: 'left',
         sortable: false,
       },
-            {
+      {
         name: 'accountName',
         field: 'accountName',
         required: true,
@@ -315,6 +426,7 @@ export default defineComponent({
       },
     ];
 
+    const openDialogFilter = ref(false);
     const userTableRowsArtist: Ref<unknown[]> = ref([]);
     const pageIndex = ref(1);
     const pageSize = ref(20);
@@ -326,6 +438,8 @@ export default defineComponent({
       { id: 3, name: 'Khác' },
     ]);
     const configImg = config;
+
+    const musics: Ref<MusicType | null> = ref(null);
     const fieldOptions: Ref<FieldType[]> = ref([]);
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
     const professionOptions: Ref<QualificationType[]> = ref([]);
@@ -365,7 +479,14 @@ export default defineComponent({
     const mnFbmess: Ref<string | null> = ref(null);
     const mnIns: Ref<string | null> = ref(null);
     const mnWhatsapp: Ref<string | null> = ref(null);
-    
+    const costFrom = ref(0);
+    const costTo = ref(100000000);
+    // const level: Ref<string | null> = ref(null);
+
+    const filter = () => {
+  
+      void getListArtists();
+    };
 
     const getListArtists = async () => {
       try {
@@ -378,7 +499,10 @@ export default defineComponent({
             name: fullNameKeyword.value,
             field: fieldSelected.value?.id,
             qualification: professionSelected.value?.id,
-            address: provinceSelected.value?.name
+            address: provinceSelected.value?.name,
+            musicTypeDto: musics.value?.id,
+            fromMoney: costFrom.value,
+            toMoney: costTo.value,
           },
         })) as AxiosResponse<
           BaseResponseBody<PaginationResponse<ArtistInfoType>>
@@ -414,7 +538,7 @@ export default defineComponent({
       }
     };
 
-   /// xếp hạng
+    /// xếp hạng
 
     const getArtistLevelOptions = async () => {
       const response = (await api({
@@ -426,33 +550,29 @@ export default defineComponent({
         artistLevelOptions.value = response.data.data;
       }
     };
-      
-      // thể loại
-      const getMusicTypeOptions = async () => {
-       const response = (await api ({
-         url: API_PATHS.getMusicTypeOptions,
-         method: 'GET',
-         params: {},
-       })) as AxiosResponse<BaseResponseBody<MusicType[]>>;
-       if(response.data.error.code === config.API_RES_CODE.OK.code) {
-         musicOptions.value = response.data.data
-       }
 
-      };
-     
-      const getProvinceOptions = async () => {
-      const response = (await api ({
-        url : API_PATHS.getProvinceOptions,
+    // thể loại
+    const getMusicTypeOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getMusicTypeOptions,
         method: 'GET',
         params: {},
-      })) as AxiosResponse<BaseResponseBody<ProvinceType[]>>;
-      if(response.data.error.code === config.API_RES_CODE.OK.code){
- 
-        provinceOptions.value = response.data.data
+      })) as AxiosResponse<BaseResponseBody<MusicType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        musicOptions.value = response.data.data;
       }
-   } 
+    };
 
-     
+    const getProvinceOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.getProvinceOptions,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ProvinceType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        provinceOptions.value = response.data.data;
+      }
+    };
 
     const getQualificationOptions = async () => {
       const response = (await api({
@@ -520,9 +640,9 @@ export default defineComponent({
       void getWorkOptions();
       void getProvinceOptions();
       void getMusicTypeOptions();
-    
     });
     return {
+      openDialogFilter,
       configImg,
       userTableColumnsArtist,
       userTableRowsArtist,
@@ -546,6 +666,7 @@ export default defineComponent({
       phoneNumber,
       email,
       facebook,
+      musics,
       facebookMessage,
       instagram,
       whatsapp,
@@ -569,18 +690,22 @@ export default defineComponent({
       provinceSelected,
       artistLevelOptions,
       provinceOptions,
+      costFrom,
+      costTo,
+      // level,
       getProvinceOptions,
       getMusicTypeOptions,
       getFieldOptions,
       nationalityOptions,
       getNationalityOptions,
       workOptions,
-       musicOptions,
+      musicOptions,
       getArtistLevelOptions,
       getQualificationOptions,
       getWorkOptions,
       confirmDeleteArtist,
       deleteArtist,
+      filter,
     };
   },
 });

src/pages/nguoi-dung/User.ts

@@ -89,7 +89,7 @@ export default defineComponent({
       },
     ];
     const userTableRows: Ref<UserObject[]> = ref([]);
-    const keyword = ref('');
+    const keyword:Ref<string | null> =  ref(null);
     const showDialog = ref(false);
     const showDialogUpdate = ref(false);
 
@@ -116,6 +116,10 @@ export default defineComponent({
     const listScheduleAccess = ref(['Chưa có lịch truy cập']);
     const $store = useStore();
 
+
+    const searchItem = () =>{
+     void  getListUsers()
+    }
     const getListUsers = async () => {
       try {
         const response = (await api({
@@ -124,7 +128,7 @@ export default defineComponent({
           params: {
             pageIndex: pageIndex.value,
             pageSize: pageSize.value,
-            name: keyword.value.trim(),
+            name: keyword.value?.trim(),
           },
         })) as AxiosResponse<BaseResponseBody<PaginationResponse<UserObject>>>;
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
@@ -424,6 +428,7 @@ export default defineComponent({
       openAddUserDialog,
       getListUsers,
       changePageSize,
+      searchItem
     };
   },
 });

src/pages/nguoi-dung/index.vue

@@ -12,15 +12,16 @@
         outlined
         :label="$t('userPage.tableColumns.keywordSearch')"
         clearable
+
       ></q-input>
     </div>
     <div class="col-auto">
       <q-btn
         color="primary"
-        no-caps
+       
         :label="$t('crudActions.search')"
         style="width: 100px"
-        @click="getListUsers"
+        @click="searchItem"
       >
       </q-btn>
     </div>

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

@@ -810,7 +810,7 @@ export default defineComponent({
           url: API_PATHS.addArtist,
           method: 'POST',
           data: {
-            musicTypeDto:musics.value  ,
+            musicTypeDto: musics.value,
             id: route.params.id,
             avatar: avatarUploaded.value,
             artistCode: artistCode.value,