update

src/assets/configurations.example.ts

@@ -20,6 +20,7 @@ export const config = {
 
 export enum API_PATHS {
   login = '/user/login',
+  
   getUserGroups = '/group/get_list',
   getListPages = '/user/page/list',
   getListGroupUsers = '/user/group/list',
@@ -38,6 +39,7 @@ export enum API_PATHS {
   getFieldOptions = '/field',
   getNationalityOptions = '/nationality',
   getProvinceOptions = '/common/province',
+  getMusicTypeOptions= '/common/musicType',
   getArtistLevelOptions = '/artistLevel',
   getQualificationOptions = '/qualification',
   getWorkOptions = '/work',

src/assets/type.ts

+import { type } from "os";
+
 export type PaginationResponse<DataType> = {
   pageIndex: null | number;
   pageSize: null | number;
@@ -76,11 +78,19 @@ export type ArtistInfoType = {
   favoriteScore: number;
 };
  export type ProvinceType = {
-    nam: string,
+    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;

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

@@ -23,8 +23,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 },
     works: { type: Number, required: true },
     qualification: { type: Number, required: true },
     artistLevel: { type: Number, required: true },
@@ -43,6 +44,7 @@ export default defineComponent({
     professionOptions: { type: Array, required: true },
     artistLevelOptions: { type: Array, required: true },
     workOptions: { type: Array, required: true },
+    musicOptions: { type:Array, required: true},
     favoriteScore: { type: Number, required: true },
     artistCodeRules: { type: Boolean, required: true },
     fullNameRules: { type: Boolean, required: true },
@@ -56,6 +58,7 @@ export default defineComponent({
     sexRules: { type: Boolean, required: true },
     nationalityRules: { type: Boolean, required: true },
     fieldRules: { type: Boolean, required: true },
+    musicsRules: { type: Boolean, required: true },
     workRules: { type: Boolean, required: true },
     qualificationRules: { type: Boolean, required: true },
     artistLevelRules: { type: Boolean, required: true },
@@ -207,6 +210,7 @@ export default defineComponent({
     'update:mnFbmess',
     'update:mnIns',
     'update:mnWhatsapp',
+    'update:musics',
     'addNewArtist',
     'SetAvatar',
     'deleteAvatar',

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

@@ -282,16 +282,21 @@
           {{ $t('artist.artistInformation.titleDataField.type') }}
           <span style="color: red">*</span>
         </div>
-           <!-- :model-value="types"
-            @update:model-value="$emit('update:types', $event)"
-            :error="typeRules"
-            :error-message="errorMessTypes"
-            :options="typeOptions" -->
+          
+            <!-- :error="musicsRules"
+            :error-message="errorMessTypes" -->
+          
+            
         <div class="col-8">
           <q-select
+           :model-value="musics"
+            @update:model-value="$emit('update:musics', $event)"
+            :options="musicOptions"
+            multiple
             map-options
             option-value="id"
             option-label="name"
+            type="text"
             class="q-my-sm"
             outlined
             hide-bottom-space

src/pages/nghe-sy/index.vue

@@ -35,18 +35,18 @@
         clearable
       ></q-select>
     </div>
-    <!-- <div class="col-2" dense outlined>
+    <div class="col-2" dense outlined>
       <q-select
-        v-model="artistLevelSelected"
-        :options="artistLevelOptions"
-        option-label="name"
-        option-value="id"
+        v-model="provinceSelected"
+        :options="provinceOptions"
+        option-label="fullName"
+        option-value="name"
         dense
         outlined
-        label="Xếp hạng"
+        label="Địa chỉ"
         clearable
       ></q-select>
-    </div> -->
+    </div>
     <div class="col-auto">
       <q-btn
         color="primary"
@@ -191,6 +191,8 @@ import {
   ArtistLevelType,
   QualificationType,
   WorkType,
+  ProvinceType,
+  MusicType
   
 } from 'src/assets/type';
 import Pagination from 'components/pagination/index.vue';
@@ -319,10 +321,13 @@ export default defineComponent({
     const nationalityOptions: Ref<NationalityType[]> = ref([]);
     const professionOptions: Ref<QualificationType[]> = ref([]);
     const artistLevelOptions: Ref<ArtistLevelType[]> = ref([]);
+    const provinceOptions: Ref<ProvinceType[]> = ref([]);
+    const musicOptions: Ref<MusicType[]> = ref([]);
     const workOptions: Ref<WorkType[]> = ref([]);
     const fieldSelected: Ref<FieldType | null> = ref(null);
     const professionSelected: Ref<QualificationType | null> = ref(null);
     const artistLevelSelected: Ref<ArtistLevelType | null> = ref(null);
+    const provinceSelected: Ref<ProvinceType | null> = ref(null);
     const isOpenNewArtistDialog = ref(false);
     const id: Ref<number> = ref(0);
     const artistCode: Ref<string> = ref('');
@@ -364,7 +369,7 @@ export default defineComponent({
             name: fullNameKeyword.value,
             field: fieldSelected.value?.id,
             qualification: professionSelected.value?.id,
-            artistLevel: artistLevelSelected.value?.id,
+            address: provinceSelected.value?.name
           },
         })) as AxiosResponse<
           BaseResponseBody<PaginationResponse<ArtistInfoType>>
@@ -400,6 +405,7 @@ export default defineComponent({
       }
     };
 
+   /// xếp hạng
 
     const getArtistLevelOptions = async () => {
       const response = (await api({
@@ -411,6 +417,34 @@ 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,
+        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({
         url: API_PATHS.getQualificationOptions,
@@ -475,6 +509,8 @@ export default defineComponent({
       void getArtistLevelOptions();
       void getQualificationOptions();
       void getWorkOptions();
+      void getProvinceOptions();
+      void getMusicTypeOptions();
     
     });
     return {
@@ -521,11 +557,16 @@ export default defineComponent({
       professionSelected,
       professionOptions,
       artistLevelSelected,
+      provinceSelected,
       artistLevelOptions,
+      provinceOptions,
+      getProvinceOptions,
+      getMusicTypeOptions,
       getFieldOptions,
       nationalityOptions,
       getNationalityOptions,
       workOptions,
+       musicOptions,
       getArtistLevelOptions,
       getQualificationOptions,
       getWorkOptions,

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

@@ -26,6 +26,7 @@ import {
   ArtistLevelType,
   QualificationType,
   WorkType,
+  MusicType,
   BankAccountType,
   ProductType,
   BannerType,
@@ -34,7 +35,7 @@ import {
   CardBankType,
   TypeCardType,
   FileUploadType,
-  ProvinceType
+  ProvinceType,
 } from 'src/assets/type';
 
 export type AvatarType = {
@@ -81,6 +82,7 @@ export default defineComponent({
     const cardBankOptions: Ref<CardBankType[]> = ref([]);
     const typeBankOptions: Ref<TypeCardType[]> = ref([]);
     const workOptions: Ref<WorkType[]> = ref([]);
+    const musicOptions: Ref<MusicType[]>= ref([]);
     const provinceOptions:Ref<ProvinceType[]> = ref([]);
     const sexOptions = ref([
       { id: 1, name: 'Nam' },
@@ -111,9 +113,10 @@ export default defineComponent({
     const mnEmail: Ref<string | null> = ref(null);
     const qualification: Ref<QualificationType | null> = ref(null);
     const artistLevel: Ref<ArtistLevelType | null> = ref(null);
-    const address: Ref<string | null> = ref(null);
+    const address: Ref<ProvinceType | null> = ref(null);
     const status: Ref<number> = ref(1);
     const fields: Ref<FieldType | null> = ref(null);
+    const musics: Ref<MusicType | null> = ref(null);
     const works: Ref<WorkType[]> = ref([]);
     const phoneNumber: Ref<string | null> = ref(null);
     const email: Ref<string | null> = ref(null);
@@ -162,6 +165,7 @@ export default defineComponent({
     const nationalityRules = ref(false);
     const fieldRules = ref(false);
     const workRules = ref(false);
+    const musicRules = ref(false);
     const qualificationRules = ref(false);
     const artistLevelRules = ref(false);
     const errorMessEmail = ref(
@@ -235,7 +239,7 @@ export default defineComponent({
       }
     );
     watch(
-      () => address.value,
+      () => address,
       (value) => {
         if (value) {
           addressRules.value = false;
@@ -298,6 +302,14 @@ export default defineComponent({
         }
       }
     );
+    watch(
+     () => musics.value,
+      (value) => {
+        if(value) {
+          musicRules.value = false;
+        }
+      }
+    );
     watch(
       () => qualification.value,
       (value) => {
@@ -344,7 +356,6 @@ export default defineComponent({
         params: {},
       })) as AxiosResponse<BaseResponseBody<ProvinceType[]>>;
       if(response.data.error.code === config.API_RES_CODE.OK.code){
- 
         provinceOptions.value = response.data.data
       }
    } 
@@ -381,6 +392,20 @@ export default defineComponent({
         workOptions.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 getBankOptions = async () => {
       const response = (await api({
         url: API_PATHS.bankOptions,
@@ -765,14 +790,15 @@ export default defineComponent({
           url: API_PATHS.addArtist,
           method: 'POST',
           data: {
+            musicTypeDto:musics.value  ,
             id: route.params.id,
             avatar: avatarUploaded.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-            birthday: birthday.value + ' 00:00:00',
+            birthday: birthday.value + '00:00:00',
             sex: sex.value,
-            address: address.value,
+            address: address.value?.name,
             phoneNumber: phoneNumber.value,
             email: email.value,
             facebook: facebook.value,
@@ -841,6 +867,7 @@ export default defineComponent({
       void getBankOptions();
       void getTypeCardOptions();
       void getProvinceOptions();
+      void getMusicTypeOptions()
     });
     return {
       hidden_img,
@@ -857,6 +884,8 @@ export default defineComponent({
       status,
       fields,
       works,
+     musics,
+
       qualification,
       artistLevel,
       phoneNumber,
@@ -884,6 +913,8 @@ export default defineComponent({
       professionOptions,
       artistLevelOptions,
       workOptions,
+      musicOptions,
+    
       getFieldOptions,
       getNationalityOptions,
       getArtistLevelOptions,
@@ -947,6 +978,7 @@ export default defineComponent({
       nationalityRules,
       fieldRules,
       workRules,
+      musicRules,
       qualificationRules,
       artistLevelRules,
       errorMessEmail,
@@ -956,6 +988,7 @@ export default defineComponent({
       check_infoBooking,
       getProvinceOptions,
       provinceOptions,
+      getMusicTypeOptions,
     };
   },
 });

src/pages/them-nghe-sy/index.vue

@@ -43,6 +43,7 @@
             v-model:status="status"
             v-model:address="address"
             v-model:fields="fields"
+            v-model:musics="musics"
             v-model:works="works"
             v-model:qualification="qualification"
             v-model:artist-level="artistLevel"
@@ -89,6 +90,7 @@
             :profession-options="professionOptions"
             :artist-level-options="artistLevelOptions"
             :work-options="workOptions"
+            :music-options="musicOptions"
             @SetAvatar="setAvatar($event)"
             @deleteAvatar="deleteAvatar"
             @UpdateBirtday="UpdateBirtday($event)"

src/pages/xep-hang-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('customerRank.title') }}
+      <q-separator vertical spaced />
+    </div>
+    <q-space></q-space>
+    <div class="col-2">
+      <q-input
+        v-model="codeCustomerRank"
+        type="text"
+        dense
+        outlined
+        label="Mã xếp hạng"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-2">
+      <q-input
+        v-model="nameCustomerRank"
+        type="text"
+        dense
+        outlined
+        label="Tên xếp hạng"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-2">
+      <q-input
+        v-model="levelCustomerRank"
+        type="number"
+        dense
+        outlined
+        label="Loại xếp hạng"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.search')"
+        @click="getListCustomerRank"
+        style="width: 7.14rem"
+      ></q-btn>
+    </div>
+    <div class="col-auto">
+      <q-btn
+        color="primary"
+        no-caps
+        :label="$t('crudActions.add')"
+        style="width: 7.14rem"
+        @click="openAddCustomerRankDialog"
+      >
+      </q-btn>
+    </div>
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="customerRankTableRows"
+        :columns="customerRankTableColumns"
+        row-key="customerRankCode"
+        separator="cell"
+        :no-data-label="$t('emptyData')"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template>
+        <template v-slot:body-cell-action="item">
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-account-edit-outline"
+              @click="openUpdateCustomerRankDialog(item.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customerRank.toolTipMessage.updateCustomerRankInfo')
+              }}</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete-outline"
+              @click="confirmDeleteCustomerRank(item.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customerRank.toolTipMessage.deleteCustomerRank')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-status="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                :color="
+                  rowData.value === CustomerRankStatus.active
+                    ? 'positive'
+                    : 'orange'
+                "
+                text-color="white"
+                size="sm"
+              >
+                {{
+                  rowData.value === CustomerRankStatus.active
+                    ? $t('customerRank.statusLabel.active')
+                    : $t('customerRank.statusLabel.inactive')
+                }}
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+
+    <AddUpdateCustomerRankDialog
+      v-model:isOpened="addCustomerRankDialogIsOpened"
+      v-model:code="code"
+      v-model:name="name"
+      v-model:level="level"
+      v-model:status="status"
+      isUpdate
+      @saveCustomerRankInfo="addNewCustomer"
+    />
+
+    <AddUpdateCustomerRankDialog
+      v-model:isOpened="updateCustomerRankDialogIsOpened"
+      v-model:code="code"
+      v-model:name="name"
+      v-model:level="level"
+      v-model:status="status"
+      @saveCustomerRankInfo="updateNewCustomer"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { i18n } from 'src/boot/i18n';
+import { defineComponent, onMounted, ref, Ref } from 'vue';
+import { API_PATHS } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import {
+  CustomerRank,
+  AddCustomerRank,
+  DetailCustomerRank,
+  UpdateCustomerRank,
+} from 'src/assets/type';
+import { config } from 'src/assets/configurations.example';
+import { CustomerRankStatus } from 'src/assets/enums';
+import AddUpdateCustomerRankDialog from 'components/add-update-customer-rank/index.vue';
+import { Dialog, Notify } from 'quasar';
+
+export default defineComponent({
+  components: {
+    AddUpdateCustomerRankDialog,
+  },
+  setup() {
+    const customerRankTableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: 'STT',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'code',
+        field: 'code',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.code'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'name',
+        field: 'name',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.name'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'level',
+        field: 'level',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.level'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.status'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.action'),
+        headerStyle: 'text-align: center !important;',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
+    const customerRankTableRows: Ref<unknown[]> = ref([]);
+    const addCustomerRankDialogIsOpened = ref(false);
+    const updateCustomerRankDialogIsOpened = ref(false);
+    const code = ref('');
+    const name = ref('');
+    const pageIndex = ref(1);
+    const pageSize = ref(20);
+    const totalPage = ref(0);
+    const level: Ref<number | undefined> = ref(undefined);
+    const status: Ref<number> = ref(CustomerRankStatus.active);
+    const customerRankId: Ref<number | undefined> = ref(undefined);
+    const nameCustomerRank = ref('');
+    const levelCustomerRank: Ref<number | undefined> = ref(undefined);
+    const codeCustomerRank = ref('');
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListCustomerRank();
+    };
+    //gọi api ds
+    const getListCustomerRank = async () => {
+      const response = (await api({
+        url: API_PATHS.getListCustomersRank,
+        method: 'GET',
+        params: {
+          name: nameCustomerRank.value,
+          level: levelCustomerRank.value,
+          code: codeCustomerRank.value,
+        },
+      })) as AxiosResponse<BaseResponseBody<CustomerRank[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        customerRankTableRows.value = response.data.data;
+      }
+    };
+
+    const confirmDeleteCustomerRank = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'customerRank.confirmActionsTitle.confirmDeleteCustomerRankTitle'
+        ),
+        message: i18n.global.t(
+          'customerRank.confirmActionsTitle.confirmDeleteCustomerRankContent'
+        ),
+        cancel: i18n.global.t(
+          'customerRank.confirmActionsTitle.confirmDeleteCustomerRankCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteCustomerRank(id);
+      });
+    };
+
+    //gói api xóa
+    const deleteCustomerRank = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteCustomerRank,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t(
+              'customerRank.actionMessages.deleteCustomerRankAccess'
+            ),
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+          void getListCustomerRank();
+        }
+      } catch (error) {}
+    };
+
+    const openAddCustomerRankDialog = () => {
+      code.value = '';
+      name.value = '';
+      level.value = undefined;
+      status.value = CustomerRankStatus.active;
+      addCustomerRankDialogIsOpened.value = true;
+    };
+
+    //gọi api add
+    const addNewCustomer = async () => {
+      const data = {
+        name: name.value,
+        code: code.value,
+        level: level.value,
+        status: status.value,
+      };
+      const response = (await api({
+        url: API_PATHS.addCustomerRank,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<AddCustomerRank[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        addCustomerRankDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'customerRank.actionMessages.addNewCustomerRankAccess'
+          ),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListCustomerRank();
+      }
+    };
+
+    const openUpdateCustomerRankDialog = (id: number) => {
+      void getDetailCustomerRank(id);
+      updateCustomerRankDialogIsOpened.value = true;
+    };
+
+    //gọi api detail
+    const getDetailCustomerRank = async (id: number) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getDetailCustomerRank,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<DetailCustomerRank>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          customerRankId.value = response.data.data.id;
+          name.value = response.data.data.name;
+          code.value = response.data.data.code;
+          level.value = response.data.data.level;
+          status.value = response.data.data.status;
+        }
+      } catch (error) {}
+    };
+
+    //gọi api update
+    const updateNewCustomer = async () => {
+      const data = {
+        id: customerRankId.value,
+        name: name.value,
+        code: code.value,
+        level: level.value,
+        status: status.value,
+      };
+      const response = (await api({
+        url: API_PATHS.updateCustomerRank,
+        method: 'POST',
+        data,
+      })) as AxiosResponse<BaseResponseBody<UpdateCustomerRank[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        updateCustomerRankDialogIsOpened.value = false;
+        Notify.create({
+          type: 'positive',
+          message: i18n.global.t(
+            'customerRank.actionMessages.updateCustomerRankAccess'
+          ),
+          actions: [{ icon: 'close', color: 'white' }],
+        });
+        void getListCustomerRank();
+      }
+    };
+
+    onMounted(() => {
+      void getListCustomerRank();
+    });
+    return {
+      pageSize,
+      totalPage,
+      changePageSize,
+      pageIndex,
+      addCustomerRankDialogIsOpened,
+      updateCustomerRankDialogIsOpened,
+      customerRankTableColumns,
+      customerRankTableRows,
+      getListCustomerRank,
+      CustomerRankStatus,
+      openAddCustomerRankDialog,
+      code,
+      name,
+      level,
+      status,
+      addNewCustomer,
+      confirmDeleteCustomerRank,
+      deleteCustomerRank,
+      openUpdateCustomerRankDialog,
+      getDetailCustomerRank,
+      updateNewCustomer,
+      nameCustomerRank,
+      levelCustomerRank,
+      codeCustomerRank,
+    };
+  },
+});
+</script>

src/router/routes.ts

@@ -7,10 +7,12 @@ export enum Pages {
   cmsUser = 'nguoi-dung',
   managingUnit = 'don-vi-chu-quan',
   artist = 'nghe-sy',
+
   informationArtist = 'cap-nhat-thong-tin-nghe-sy',
   customer = 'khach-hang',
   addArtist = 'them-nghe-sy',
   customerRank = 'xep-hang-khach-hang',
+  artistRank = 'Xep-hang-nghi-sy',
   field = 'linh-vuc-hoat-dong',
   post = 'bai-viet',
   postCategory = 'danh-muc-bai-viet',
@@ -70,6 +72,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/them-nghe-sy/index.vue'),
         name: Pages.addArtist,
       },
+      {
+        path: '/xep-hang-nghe-sy',
+        component: () => import('pages/xep-hang-nghe-sy/index.vue'),
+        name:Pages.artistRank
+      },
       {
         path: '/khach-hang',
         component: () => import('pages/khach-hang/index.vue'),