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/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,
+      },
     ],
   },