update

src/assets/enums.ts

@@ -13,3 +13,8 @@ export enum HotProductStatus {
   active = 1,
   inactive = 2,
 }
+
+export enum CustomerRankStatus {
+  active = 1,
+  inactive = 2,
+}

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

+<template>
+  <q-dialog
+    persistent
+    :model-value="isOpened"
+    @update:model-value="$emit('update:isOpened', $event)"
+  >
+    <q-card class="full-width" style="max-width: 50rem" bordered>
+      <q-form
+        greedy
+        @submit.prevent="
+          $emit('saveCustomerRankInfo', {});
+          $emit('update:isOpened', false);
+        "
+      >
+        <q-card-section class="q-pa-none">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular">{{
+                isUpdate
+                  ? $t('customerRank.dialogLabel.title.addCustomerRank')
+                  : $t('customerRank.dialogLabel.title.updateCustomerRank')
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-section
+          class="overflow-auto"
+          style="max-height: calc(100vh - 10rem)"
+        >
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <q-input
+                :model-value="rankCode"
+                @update:model-value="$emit('update:rankCode', $event)"
+                :label="$t('customerRank.dialogLabel.fieldLabels.rankCode')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="rankCodeRules"
+                clearable
+              ></q-input>
+              <q-input
+                :model-value="rankName"
+                @update:model-value="$emit('update:rankName', $event)"
+                :label="$t('customerRank.dialogLabel.fieldLabels.rankName')"
+                type="text"
+                class="q-my-sm"
+                outlined
+                :rules="rankNameRules"
+                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"
+                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')
+                }}</span
+                ><q-toggle
+                  :model-value="rankStatus"
+                  :true-value="1"
+                  :false-value="2"
+                  @update:model-value="$emit('update:rankStatus', $event)"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <div>
+            <q-btn
+              color="grey"
+              no-caps
+              style="width: 90px"
+              class="q-mr-sm"
+              :label="$t('customerRank.crudActions.cancel')"
+              @click="$emit('update:isOpened', false)"
+            />
+            <q-btn
+              type="submit"
+              color="primary"
+              no-caps
+              style="width: 90px"
+              :label="$t('customerRank.crudActions.save')"
+            />
+          </div>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { i18n } from 'src/boot/i18n';
+
+export default defineComponent({
+  props: {
+    isOpened: {
+      type: Boolean,
+      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 },
+  },
+  setup() {
+    const rankTypeRules = [
+      (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'),
+    ];
+    const discountRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customerRank.validateMessages.requireDiscount'),
+    ];
+    const discountCodeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customerRank.validateMessages.requireDiscountCode'),
+    ];
+    return {
+      rankTypeRules,
+      rankCodeRules,
+      rankNameRules,
+      discountRules,
+      discountCodeRules,
+    };
+  },
+  emits: [
+    'update:isOpened',
+    'update:rankCode',
+    'update:rankName',
+    'update:rankType',
+    'update:discount',
+    'update:discountCode',
+    'update:rankStatus',
+    'saveCustomerRankInfo',
+  ],
+});
+</script>

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

@@ -185,7 +185,6 @@ export default defineComponent({
     artistStatus: { type: Number, required: true },
     contractTimeFrom: { type: String, required: true },
     contractTimeTo: { type: String, required: true },
-    //gọi api lĩnh vực
   },
   setup() {
     const artistNameRules = [

src/i18n/vi/index.ts

@@ -514,4 +514,63 @@ export default {
     uploadStory: 'Tải lên Story',
     titleEmbedDialog: 'Thay đổi Embed',
   },
+
+  //xếp hạng khách hàng
+  customerRank: {
+    title: 'Xếp 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',
+      action: 'Chức năng',
+    },
+    statusLabel: {
+      active: 'Đang hoạt động',
+      inactive: 'Ngừng hoạt động',
+    },
+    dialogLabel: {
+      title: {
+        addCustomerRank: 'Thêm xếp hạng',
+        updateCustomerRank: 'Cập nhật xếp 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',
+      },
+    },
+    toolTipMessage: {
+      updateCustomerRankInfo: 'Cập nhật',
+      deleteCustomerRank: 'Xoá',
+    },
+    crudActions: {
+      save: 'Lưu',
+      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',
+    },
+    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?',
+    },
+    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',
+    },
+  },
 };

src/pages/xep-hang-khach-hang/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
+        dense
+        outlined
+        :label="$t('customerRank.tableColumnsCustomerRank.rankName')"
+        clearable
+      ></q-input>
+    </div>
+    <div class="col-2">
+      <q-select
+        label="Loại xếp hạng"
+        option-label="name"
+        option-value="id"
+        dense
+        outlined
+        clearable
+      ></q-select>
+    </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="customerRanlTableColumns"
+        row-key="unitCode"
+        separator="cell"
+        :no-data-label="$t('emptyData')"
+        hide-pagination
+      >
+        <template v-slot:body-cell-action="">
+          <q-td style="padding: 0" class="flex flex-center">
+            <q-btn flat round color="primary" icon="mdi-account-edit-outline">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customerRank.toolTipMessage.updateCustomerRankInfo')
+              }}</q-tooltip>
+            </q-btn>
+            <q-btn flat round color="primary" icon="mdi-delete">
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customerRank.toolTipMessage.deleteCustomerRank')
+              }}</q-tooltip>
+            </q-btn>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-rankStatus="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>
+    <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"
+      isUpdate
+      @addNewCustomer="addNewCustomer"
+    />
+
+    <AddUpdateCustomerRankDialog
+      v-model:isOpened="updateCustomerRankDialogIsOpened"
+    />
+  </div>
+</template>
+
+<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 { CustomerRankStatus } from 'src/assets/enums';
+import AddUpdateCustomerRankDialog from 'components/add-update-customer-rank/index.vue';
+
+export default defineComponent({
+  components: {
+    Pagination,
+    AddUpdateCustomerRankDialog,
+  },
+  setup() {
+    const customerRanlTableColumns = [
+      // {
+      //   name: 'index',
+      //   field: 'index',
+      //   required: true,
+      //   label: 'STT',
+      //   align: 'center',
+      //   sortable: false,
+      // },
+      {
+        name: 'rankCode',
+        field: 'rankCode',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankCode'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'rankName',
+        field: 'rankName',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankName'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'rankType',
+        field: 'rankType',
+        required: true,
+        label: i18n.global.t('customerRank.tableColumnsCustomerRank.rankType'),
+        headerStyle: 'text-align: center !important;',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'discount',
+        field: 'discount',
+        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'
+        ),
+        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 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 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 changePageSize = () => {
+      pageIndex.value = 1;
+      void getListCustomerRank();
+    };
+
+    //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>>;
+
+    //     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;
+    //   }
+    // };
+
+    const openAddCustomerRankDialog = () => {
+      rankCode.value = '';
+      rankName.value = '';
+      discount.value = '';
+      discountCode.value = '';
+      rankType.value = undefined;
+      rankStatus.value = CustomerRankStatus.active;
+      addCustomerRankDialogIsOpened.value = true;
+    };
+
+    const addNewCustomer = () => {
+      console.log(Object);
+    };
+
+    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,
+      addNewCustomer,
+    };
+  },
+});
+</script>

src/router/routes.ts

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