update

src/assets/configurations.example.ts

@@ -55,4 +55,9 @@ export enum API_PATHS {
   listCustomerLevel = 'customerLevel',
   addCustomer = 'customer/add',
   deleteCustomer = 'customer/delete',
+  getListCustomersRank = 'customerLevel',
+  deleteCustomerRank = 'customerLevel/delete',
+  addCustomerRank = 'customerLevel/add',
+  updateCustomerRank = 'customerLevel/update',
+  getDetailCustomerRank = 'customerLevel/detail',
 }

src/assets/enums.ts

@@ -16,5 +16,5 @@ export enum HotProductStatus {
 
 export enum CustomerRankStatus {
   active = 1,
-  inactive = 2,
+  inactive = 0,
 }

src/assets/type.ts

@@ -251,3 +251,37 @@ export type CustomerLevelType = {
   level: number;
   status: number;
 };
+
+export type CustomerRank = {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  level: number;
+  status: number;
+};
+
+export type AddCustomerRank = {
+  name: string;
+  description: string;
+  level: number;
+  status: number;
+};
+
+export type UpdateCustomerRank = {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  level: number;
+  status: number;
+};
+
+export type DetailCustomerRank = {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  level: number;
+  status: number;
+};

src/components/add-update-customer-rank/index.vue

@@ -4,7 +4,7 @@
     :model-value="isOpened"
     @update:model-value="$emit('update:isOpened', $event)"
   >
-    <q-card class="full-width" style="max-width: 50rem" bordered>
+    <q-card class="full-width" style="max-width: 30rem" bordered>
       <q-form
         greedy
         @submit.prevent="
@@ -30,70 +30,45 @@
           style="max-height: calc(100vh - 10rem)"
         >
           <div class="row q-col-gutter-sm">
-            <div class="col-6">
+            <div class="col-12">
               <q-input
-                :model-value="rankCode"
-                @update:model-value="$emit('update:rankCode', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.rankCode')"
+                :model-value="code"
+                @update:model-value="$emit('update:code', $event)"
+                :label="$t('customerRank.dialogLabel.fieldLabels.code')"
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="rankCodeRules"
+                :rules="codeRules"
                 clearable
               ></q-input>
               <q-input
-                :model-value="rankName"
-                @update:model-value="$emit('update:rankName', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.rankName')"
+                :model-value="name"
+                @update:model-value="$emit('update:name', $event)"
+                :label="$t('customerRank.dialogLabel.fieldLabels.name')"
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="rankNameRules"
+                :rules="nameRules"
                 clearable
               ></q-input>
-              <q-select
-                :model-value="rankType"
-                @update:model-value="$emit('update:rankType', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.rankType')"
-                :options="rankTypeOptions"
-                :rules="rankTypeRules"
-                map-options
-                option-value="id"
-                option-label="name"
-                class="q-my-sm"
-                outlined
-              ></q-select>
-            </div>
-            <div class="col-6">
               <q-input
-                :model-value="discount"
-                @update:model-value="$emit('update:discount', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.discount')"
-                type="text"
+                :model-value="level"
+                @update:model-value="$emit('update:level', $event)"
+                :label="$t('customerRank.dialogLabel.fieldLabels.level')"
+                :rules="levelRules"
+                type="number"
                 class="q-my-sm"
                 outlined
-                :rules="discountRules"
-                clearable
-              ></q-input>
-              <q-input
-                :model-value="discountCode"
-                @update:model-value="$emit('update:discountCode', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.discountCode')"
-                type="text"
-                class="q-my-sm"
-                outlined
-                :rules="discountCodeRules"
-                clearable
               ></q-input>
               <div class="q-pt-sm">
                 <span class="text-body1">{{
-                  $t('customerRank.dialogLabel.fieldLabels.rankStatus')
+                  $t('customerRank.dialogLabel.fieldLabels.status')
                 }}</span
                 ><q-toggle
-                  :model-value="rankStatus"
+                  :model-value="status"
                   :true-value="1"
                   :false-value="2"
-                  @update:model-value="$emit('update:rankStatus', $event)"
+                  @update:model-value="$emit('update:status', $event)"
                 />
               </div>
             </div>
@@ -134,56 +109,39 @@ export default defineComponent({
       required: true,
     },
     isUpdate: { type: Boolean, default: false },
-    rankCode: { type: String, required: true },
-    rankName: { type: String, required: true },
-    discount: { type: String, required: true },
-    discountCode: { type: String, required: true },
-    rankType: { type: Number, required: true },
-    rankTypeOptions: { type: Array, required: true },
-    rankStatus: { type: Number, required: true },
+    code: { type: String, required: true },
+    name: { type: String, required: true },
+    level: { type: Number, required: true },
+    status: { type: Number, required: true },
   },
   setup() {
-    const rankTypeRules = [
+    const levelRules = [
       (val?: number) =>
         val !== undefined ||
-        i18n.global.t('customerRank.validateMessages.requireRankType'),
-    ];
-    const rankCodeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireRankCode'),
-    ];
-    const rankNameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireRankName'),
+        i18n.global.t('customerRank.validateMessages.requireLevel'),
     ];
-    const discountRules = [
+    const codeRules = [
       (val?: string) =>
         (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireDiscount'),
+        i18n.global.t('customerRank.validateMessages.requireCode'),
     ];
-    const discountCodeRules = [
+    const nameRules = [
       (val?: string) =>
         (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireDiscountCode'),
+        i18n.global.t('customerRank.validateMessages.requireName'),
     ];
     return {
-      rankTypeRules,
-      rankCodeRules,
-      rankNameRules,
-      discountRules,
-      discountCodeRules,
+      levelRules,
+      codeRules,
+      nameRules,
     };
   },
   emits: [
     'update:isOpened',
-    'update:rankCode',
-    'update:rankName',
-    'update:rankType',
-    'update:discount',
-    'update:discountCode',
-    'update:rankStatus',
+    'update:code',
+    'update:name',
+    'update:level',
+    'update:status',
     'saveCustomerRankInfo',
   ],
 });

src/i18n/vi/index.ts

@@ -517,15 +517,13 @@ export default {
 
   //xếp hạng khách hàng
   customerRank: {
-    title: 'Xếp hạng',
+    title: 'Danh mục xếp hạng khách hàng',
     tableColumnsCustomerRank: {
       stt: 'STT',
-      rankCode: 'Mã xếp hạng',
-      rankName: 'Tên xếp hạng',
-      rankType: 'Loại xếp hạng',
-      discount: 'Chiết khấu (%)',
-      discountCode: 'Mã chiết khấu',
-      rankStatus: 'Trạng thái',
+      code: 'Mã xếp hạng',
+      name: 'Tên xếp hạng',
+      level: 'Loại xếp hạng',
+      status: 'Trạng thái',
       action: 'Chức năng',
     },
     statusLabel: {
@@ -534,16 +532,14 @@ export default {
     },
     dialogLabel: {
       title: {
-        addCustomerRank: 'Thêm xếp hạng',
-        updateCustomerRank: 'Cập nhật xếp hạng',
+        addCustomerRank: 'Thêm danh mục xếp hạng khách hàng',
+        updateCustomerRank: 'Cập nhật danh mục xếp hạng khách hàng',
       },
       fieldLabels: {
-        rankCode: 'Mã xếp hạng *',
-        rankName: 'Tên xếp hạng *',
-        rankType: 'Loại xếp hạng *',
-        discount: 'Chiết khấu (%) *',
-        discountCode: 'Mã chiết khấu *',
-        rankStatus: 'Trạng thái',
+        code: 'Mã xếp hạng *',
+        name: 'Tên xếp hạng *',
+        level: 'Loại xếp hạng *',
+        status: 'Trạng thái',
       },
     },
     toolTipMessage: {
@@ -555,22 +551,21 @@ export default {
       cancel: 'Đóng',
     },
     validateMessages: {
-      requireRankCode: 'Vui lòng nhập Mã xếp hạng',
-      requireRankName: 'Vui lòng nhập Tên xếp hạng',
-      requireRankType: 'Vui lòng chọn Loại xếp hạng',
-      requireDiscount: 'Vui lòng nhập % chiết khấu',
-      requireDiscountCode: 'Vui lòng nhập Mã chiết khấu',
+      requireCode: 'Vui lòng nhập Mã xếp hạng',
+      requireName: 'Vui lòng nhập Tên xếp hạng',
+      requireLevel: 'Vui lòng nhập Loại xếp hạng',
     },
     confirmActionsTitle: {
       confirmDeleteCustomerRankTitle: 'Xác nhận',
       confirmDeleteCustomerRankCancelBtnLabel: 'Huỷ',
       confirmDeleteCustomerRankContent:
-        'Bạn có chắc muốn xoá xếp hạng này không?',
+        'Bạn có chắc chắn muốn xoá danh mục xếp hạng khách hàng này không?',
     },
     actionMessages: {
-      addNewCustomerRankAccess: 'Thêm xếp hạng thành công',
-      deleteCustomerRankAccess: 'Xoá xếp hạng thành công',
-      updateCustomerRankAccess: 'Cập nhật xếp hạng thành công',
+      addNewCustomerRankAccess: 'Thêm danh mục xếp hạng khách hàng thành công',
+      deleteCustomerRankAccess: 'Xoá danh mục xếp hạng khách hàng thành công',
+      updateCustomerRankAccess:
+        'Cập nhật danh mục xếp hạng khách hàng thành công',
     },
   },
 };

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

@@ -9,7 +9,7 @@
       <q-input
         dense
         outlined
-        :label="$t('managingUnit.tableColumns.name')"
+        label="Tên đơn vị"
         v-model="unitNameKeyword"
         clearable
       ></q-input>
@@ -73,7 +73,7 @@
               flat
               round
               color="primary"
-              icon="mdi-delete"
+              icon="mdi-delete-outline"
               @click="confirmDeleteManagingUnits(item.row.id)"
             >
               <q-tooltip :offset="[20, 10]">{{

src/pages/xep-hang-khach-hang/index.vue

@@ -7,21 +7,33 @@
     <q-space></q-space>
     <div class="col-2">
       <q-input
+        v-model="codeCustomerRank"
+        type="text"
         dense
         outlined
-        :label="$t('customerRank.tableColumnsCustomerRank.rankName')"
+        label="Mã xếp hạng"
         clearable
       ></q-input>
     </div>
     <div class="col-2">
-      <q-select
-        label="Loại xếp hạng"
-        option-label="name"
-        option-value="id"
+      <q-input
+        v-model="nameCustomerRank"
+        type="text"
         dense
         outlined
+        label="Tên đơn vị"
         clearable
-      ></q-select>
+      ></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
@@ -51,22 +63,35 @@
         separator="cell"
         :no-data-label="$t('emptyData')"
         hide-pagination
+        class="sticky-header-table"
       >
-        <template v-slot:body-cell-action="">
+        <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">
+            <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">
+            <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-rankStatus="rowData">
+        <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
               <q-chip
@@ -89,31 +114,24 @@
         </template>
       </q-table>
     </div>
-    <div class="col-12 q-mt-sm">
-      <Pagination
-        v-model:currentPage="pageIndex"
-        v-model:pageSize="pageSize"
-        :totalPage="totalPage"
-        @update:pageSize="changePageSize"
-        @update:currentPage="getListCustomerRank"
-      />
-    </div>
 
     <AddUpdateCustomerRankDialog
       v-model:isOpened="addCustomerRankDialogIsOpened"
-      v-model:rankCode="rankCode"
-      v-model:rankName="rankName"
-      v-model:discount="discount"
-      v-model:discountCode="discountCode"
-      v-model:rankType="rankType"
-      v-model:rankStatus="rankStatus"
-      :rankTypeOptions="rankTypeOptions"
+      v-model:code="code"
+      v-model:name="name"
+      v-model:level="level"
+      v-model:status="status"
       isUpdate
-      @addNewCustomer="addNewCustomer"
+      @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>
@@ -121,18 +139,22 @@
 <script lang="ts">
 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, ref, Ref } from 'vue';
-import Pagination from 'components/pagination/index.vue';
-// import { API_PATHS } from 'src/assets/configurations';
-// import { AxiosResponse } from 'axios';
-// import { api, BaseResponseBody } from 'src/boot/axios';
-// import { PaginationResponse } from 'src/assets/type';
-// import { config } from 'src/assets/configurations';
+import { API_PATHS } from 'src/assets/configurations';
+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';
 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: {
-    Pagination,
     AddUpdateCustomerRankDialog,
   },
   setup() {
@@ -146,59 +168,37 @@ export default defineComponent({
       //   sortable: false,
       // },
       {
-        name: 'rankCode',
-        field: 'rankCode',
+        name: 'code',
+        field: 'code',
         required: true,
-        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankCode'),
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.code'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'rankName',
-        field: 'rankName',
+        name: 'name',
+        field: 'name',
         required: true,
-        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankName'),
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.name'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'rankType',
-        field: 'rankType',
+        name: 'level',
+        field: 'level',
         required: true,
-        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankType'),
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.level'),
         headerStyle: 'text-align: center !important;',
         align: 'left',
         sortable: false,
       },
       {
-        name: 'discount',
-        field: 'discount',
+        name: 'status',
+        field: 'status',
         required: true,
-        label: i18n.global.t('customerRank.tableColumnsCustomerRank.discount'),
-        headerStyle: 'text-align: center !important;',
-        align: 'left',
-        sortable: false,
-      },
-      {
-        name: 'discountCode',
-        field: 'discountCode',
-        required: true,
-        label: i18n.global.t(
-          'customerRank.tableColumnsCustomerRank.discountCode'
-        ),
-        headerStyle: 'text-align: center !important;',
-        align: 'left',
-        sortable: false,
-      },
-      {
-        name: 'rankStatus',
-        field: 'rankStatus',
-        required: true,
-        label: i18n.global.t(
-          'customerRank.tableColumnsCustomerRank.rankStatus'
-        ),
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.status'),
         headerStyle: 'text-align: center !important;',
         align: 'center',
         sortable: false,
@@ -215,136 +215,183 @@ export default defineComponent({
     ];
 
     const customerRankTableRows: Ref<unknown[]> = ref([]);
-
-    const pageIndex = ref(1);
-    const pageSize = ref(20);
-    const totalPage = ref(1);
     const addCustomerRankDialogIsOpened = ref(false);
     const updateCustomerRankDialogIsOpened = ref(false);
-    const rankCode = ref('');
-    const rankName = ref('');
-    const discount = ref('');
-    const discountCode = ref('');
-    const rankType: Ref<number | undefined> = ref(undefined);
-    const rankTypeOptions: Ref<number | undefined> = ref(undefined);
-    const rankStatus: Ref<number> = ref(CustomerRankStatus.active);
+    const code = ref('');
+    const name = ref('');
+    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('');
 
+    //gọi api ds
     const getListCustomerRank = async () => {
-      // try {
-      //   const response = (await api({
-      //     url: API_PATHS.getListUnits,
-      //     method: 'GET',
-      //     params: {
-      //       pageIndex: pageIndex.value,
-      //       pageSize: pageSize.value,
-      //       // name: unitNameKeyword.value,
-      //       // fields: fieldSelected.value?.id,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<PaginationResponse<ArtistOwner>>>;
-      //   if (response.data.error.code === config.API_RES_CODE.OK.code) {
-      //     customerRankTableRows.value = response.data.data.data;
-      //     totalPage.value = response.data.data.totalPages;
-      //   }
-      // } catch (error) {}
+      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 changePageSize = () => {
-      pageIndex.value = 1;
-      void getListCustomerRank();
+    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 đơn vị
-    // const confirmDeleteManagingUnits = (id: number) => {
-    //   Dialog.create({
-    //     title: i18n.global.t(
-    //       'managingUnit.confirmActionsTitle.confirmDeleteManagingUnitsTitle'
-    //     ),
-    //     message: i18n.global.t(
-    //       'managingUnit.confirmActionsTitle.confirmDeleteManagingUnitsContent'
-    //     ),
-    //     cancel: i18n.global.t(
-    //       'managingUnit.confirmActionsTitle.confirmDeleteManagingUnitsCancelBtnLabel'
-    //     ),
-    //     color: 'negative',
-    //   }).onOk(() => {
-    //     void deleteManagingUnits(id);
-    //   });
-    // };
-
-    // const deleteManagingUnits = async (id: number) => {
-    //   try {
-    //     const deleteResult = (await api({
-    //       url: API_PATHS.deleteManagingUnits,
-    //       method: 'GET',
-    //       params: {
-    //         id: id,
-    //       },
-    //     })) as AxiosResponse<BaseResponseBody<unknown>>;
+    //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(
-    //           'managingUnit.actionMessages.deleteManagingUnitsAccess'
-    //         ),
-    //       });
-    //       void getListUnits();
-    //     }
-    //   } catch (error) {}
-    // };
-
-    //gọi api lĩnh vực
-    // 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) {
-    //     fieldsOptions.value = response.data.data;
-    //   }
-    // };
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t(
+              'customerRank.actionMessages.deleteCustomerRankAccess'
+            ),
+          });
+          void getListCustomerRank();
+        }
+      } catch (error) {}
+    };
 
     const openAddCustomerRankDialog = () => {
-      rankCode.value = '';
-      rankName.value = '';
-      discount.value = '';
-      discountCode.value = '';
-      rankType.value = undefined;
-      rankStatus.value = CustomerRankStatus.active;
+      code.value = '';
+      name.value = '';
+      level.value = undefined;
+      status.value = CustomerRankStatus.active;
       addCustomerRankDialogIsOpened.value = true;
     };
 
-    const addNewCustomer = () => {
-      console.log(Object);
+    //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();
-      // void getFieldOptions();
     });
     return {
       addCustomerRankDialogIsOpened,
       updateCustomerRankDialogIsOpened,
-      // getFieldOptions,
-      status,
       customerRanlTableColumns,
       customerRankTableRows,
       getListCustomerRank,
-      pageIndex,
-      pageSize,
-      totalPage,
-      changePageSize,
       CustomerRankStatus,
       openAddCustomerRankDialog,
-      rankCode,
-      rankName,
-      discount,
-      discountCode,
-      rankType,
-      rankStatus,
-      rankTypeOptions,
+      code,
+      name,
+      level,
+      status,
       addNewCustomer,
+      confirmDeleteCustomerRank,
+      deleteCustomerRank,
+      openUpdateCustomerRankDialog,
+      getDetailCustomerRank,
+      updateNewCustomer,
+      nameCustomerRank,
+      levelCustomerRank,
+      codeCustomerRank,
     };
   },
 });

src/router/routes.ts

@@ -10,7 +10,7 @@ export enum Pages {
   informationArtist = 'cap-nhat-thong-tin-nghe-sy',
   customer = 'khach-hang',
   addArtist = 'them-nghe-sy',
-  customerRank = 'danh-muc-xep-hang',
+  customerRank = 'xep-hang-khach-hang',
 }
 
 const routes: RouteRecordRaw[] = [
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
         name: Pages.customer,
       },
       {
-        path: 'danh-muc-xep-hang',
+        path: 'xep-hang-khach-hang',
         component: () => import('pages/xep-hang-khach-hang/index.vue'),
         name: Pages.customerRank,
       },