update

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

@@ -31,7 +31,7 @@
         >
           <div class="row q-col-gutter-sm">
             <div class="col-12">
-              <q-input
+              <!-- <q-input
                 :model-value="code"
                 @update:model-value="$emit('update:code', $event)"
                 :label="$t('customerRank.dialogLabel.fieldLabels.code')"
@@ -40,18 +40,18 @@
                 outlined
                 :rules="codeRules"
                 clearable
-              ></q-input>
+              ></q-input> -->
               <q-input
-                :model-value="name"
-                @update:model-value="$emit('update:name', $event)"
-                :label="$t('customerRank.dialogLabel.fieldLabels.name')"
+                :model-value="level"
+                @update:model-value="$emit('update:level', $event)"
+                label="Số sao"
                 type="text"
                 class="q-my-sm"
                 outlined
-                :rules="nameRules"
+                :rules="levelRules"
                 clearable
               ></q-input>
-              <q-input
+              <!-- <q-input
                 :model-value="level"
                 @update:model-value="$emit('update:level', $event)"
                 :label="$t('customerRank.dialogLabel.fieldLabels.level')"
@@ -59,7 +59,7 @@
                 mask="#"
                 class="q-my-sm"
                 outlined
-              ></q-input>
+              ></q-input> -->
               <div class="q-pt-sm">
                 <span class="text-body1">{{
                   $t('customerRank.dialogLabel.fieldLabels.status')
@@ -109,8 +109,8 @@ export default defineComponent({
       required: true,
     },
     isUpdate: { type: Boolean, default: false },
-    code: { type: String, required: true },
-    name: { type: String, required: true },
+    // code: { type: String, required: true },
+    // name: { type: String, required: true },
     level: { type: Number, required: true },
     status: { type: Number, required: true },
   },
@@ -120,26 +120,23 @@ export default defineComponent({
         val !== undefined ||
         i18n.global.t('customerRank.validateMessages.requireLevel'),
     ];
-    const codeRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireCode'),
-    ];
-    const nameRules = [
-      (val?: string) =>
-        (val && val.trim().length) ||
-        i18n.global.t('customerRank.validateMessages.requireName'),
-    ];
+    // const codeRules = [
+    //   (val?: string) =>
+    //     (val && val.trim().length) ||
+    //     i18n.global.t('customerRank.validateMessages.requireCode'),
+    // ];
+    // const nameRules = [
+    //   (val?: string) =>
+    //     (val && val.trim().length) ||
+    //     i18n.global.t('customerRank.validateMessages.requireName'),
+    // ];
     return {
       levelRules,
-      codeRules,
-      nameRules,
     };
   },
   emits: [
     'update:isOpened',
-    'update:code',
-    'update:name',
+
     'update:level',
     'update:status',
     'saveCustomerRankInfo',

src/pages/khach-hang/index.vue

@@ -27,13 +27,22 @@
       <q-select
         v-model="levelSelected"
         :options="levelOptions"
-        option-label="name"
+        option-label="level"
         option-value="id"
         dense
         outlined
-        label="Xếp hạng"
+        label="Đánh giá sao"
         clearable
-      ></q-select>
+      >
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{{ scope.opt.level }}</q-item-label>
+              <!-- <q-item-label caption>{{ scope.opt.description }}</q-item-label> -->
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
     </div>
     <div class="col-auto">
       <q-btn

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

@@ -35,7 +35,7 @@
         clearable
       ></q-input>
     </div> -->
-    <div class="col-auto">
+    <!-- <div class="col-auto">
       <q-btn
         color="primary"
         no-caps
@@ -43,7 +43,7 @@
         @click="getListCustomerRank"
         style="width: 7.14rem"
       ></q-btn>
-    </div>
+    </div> -->
     <div class="col-auto">
       <q-btn
         color="primary"
@@ -72,7 +72,32 @@
       >
         <template v-slot:body-cell-stt="item">
           <q-td :item="item">
-            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+            <div align="center">
+              {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-level="rowData">
+          <q-td :item="rowData">
+            <div
+              align="center"
+              v-for="(item, index) in listRating"
+              :key="index"
+            >
+              <div v-if="rowData.value === item.value">
+                <q-rating
+                  v-model="item.text"
+                  :max="5"
+                  size="2rem"
+                  color="yellow"
+                  icon="star_border"
+                  icon-selected="star"
+                  icon-half="star_half"
+                  no-dimming
+                  readonly
+                />
+              </div>
+            </div>
           </q-td>
         </template>
         <template v-slot:body-cell-action="item">
@@ -131,8 +156,6 @@
 
     <AddUpdateCustomerRankDialog
       v-model:isOpened="addCustomerRankDialogIsOpened"
-      v-model:code="code"
-      v-model:name="name"
       v-model:level="level"
       v-model:status="status"
       isUpdate
@@ -141,8 +164,6 @@
 
     <AddUpdateCustomerRankDialog
       v-model:isOpened="updateCustomerRankDialogIsOpened"
-      v-model:code="code"
-      v-model:name="name"
       v-model:level="level"
       v-model:status="status"
       @saveCustomerRankInfo="updateNewCustomer"
@@ -182,8 +203,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: '',
-        field: '',
+        name: 'level',
+        field: 'level',
         required: true,
         label: 'Đánh giá sao',
         headerStyle: 'text-align: center !important;',
@@ -214,8 +235,7 @@ export default defineComponent({
     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);
@@ -235,8 +255,6 @@ export default defineComponent({
         url: API_PATHS.getListCustomersRank,
         method: 'GET',
         params: {
-          name: nameCustomerRank.value,
-          level: levelCustomerRank.value,
           code: codeCustomerRank.value,
         },
       })) as AxiosResponse<BaseResponseBody<CustomerRank[]>>;
@@ -245,6 +263,45 @@ export default defineComponent({
       }
     };
 
+    const listRating = ref([
+      {
+        text: 1,
+        value: '1',
+      },
+      {
+        text: 1.5,
+        value: '1.5',
+      },
+      {
+        text: 2,
+        value: '2',
+      },
+      {
+        text: 2.5,
+        value: '2.5',
+      },
+      {
+        text: 3,
+        value: '3',
+      },
+      {
+        text: 3.5,
+        value: '3.5',
+      },
+      {
+        text: 4,
+        value: '4',
+      },
+      {
+        text: 4.5,
+        value: '4.5',
+      },
+      {
+        text: 5,
+        value: '5',
+      },
+    ]);
+
     const confirmDeleteCustomerRank = (id: number) => {
       Dialog.create({
         title: i18n.global.t(
@@ -287,8 +344,6 @@ export default defineComponent({
     };
 
     const openAddCustomerRankDialog = () => {
-      code.value = '';
-      name.value = '';
       level.value = undefined;
       status.value = CustomerRankStatus.active;
       addCustomerRankDialogIsOpened.value = true;
@@ -297,8 +352,6 @@ export default defineComponent({
     //gọi api add
     const addNewCustomer = async () => {
       const data = {
-        name: name.value,
-        code: code.value,
         level: level.value,
         status: status.value,
       };
@@ -337,8 +390,7 @@ export default defineComponent({
         })) 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;
         }
@@ -349,8 +401,7 @@ export default defineComponent({
     const updateNewCustomer = async () => {
       const data = {
         id: customerRankId.value,
-        name: name.value,
-        code: code.value,
+
         level: level.value,
         status: status.value,
       };
@@ -387,10 +438,10 @@ export default defineComponent({
       getListCustomerRank,
       CustomerRankStatus,
       openAddCustomerRankDialog,
-      code,
-      name,
+
       level,
       status,
+      listRating,
       addNewCustomer,
       confirmDeleteCustomerRank,
       deleteCustomerRank,

src/pages/nghe-sy/xep-hang-nghe-sy/index.vue

@@ -35,7 +35,7 @@
         clearable
       ></q-input>
     </div> -->
-    <div class="col-auto">
+    <!-- <div class="col-auto">
       <q-btn
         color="primary"
         no-caps
@@ -43,7 +43,7 @@
         @click="getListCustomerRank"
         style="width: 7.14rem"
       ></q-btn>
-    </div>
+    </div> -->
     <div class="col-auto">
       <q-btn
         color="primary"
@@ -72,7 +72,33 @@
       >
         <template v-slot:body-cell-stt="item">
           <q-td :item="item">
-            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+            <div align="center">
+              {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+            </div>
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-level="rowData">
+          <q-td :item="rowData">
+            <div
+              align="center"
+              v-for="(item, index) in listRating"
+              :key="index"
+            >
+              <div v-if="rowData.value === item.value">
+                <q-rating
+                  v-model="item.text"
+                  :max="5"
+                  size="2rem"
+                  color="yellow"
+                  icon="star_border"
+                  icon-selected="star"
+                  icon-half="star_half"
+                  no-dimming
+                  readonly
+                />
+              </div>
+            </div>
           </q-td>
         </template>
         <template v-slot:body-cell-action="item">
@@ -127,8 +153,6 @@
 
     <AddUpdateCustomerRankDialog
       v-model:isOpened="addCustomerRankDialogIsOpened"
-      v-model:code="code"
-      v-model:name="name"
       v-model:level="level"
       v-model:status="status"
       isUpdate
@@ -137,8 +161,6 @@
 
     <AddUpdateCustomerRankDialog
       v-model:isOpened="updateCustomerRankDialogIsOpened"
-      v-model:code="code"
-      v-model:name="name"
       v-model:level="level"
       v-model:status="status"
       @saveCustomerRankInfo="updateNewCustomer"
@@ -179,8 +201,8 @@ export default defineComponent({
       },
 
       {
-        name: '',
-        field: '',
+        name: 'level',
+        field: 'level',
         required: true,
         label: 'Đánh giá sao',
         headerStyle: 'text-align: center !important;',
@@ -211,8 +233,7 @@ export default defineComponent({
     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);
@@ -232,15 +253,51 @@ export default defineComponent({
         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 listRating = ref([
+      {
+        text: 1,
+        value: '1',
+      },
+      {
+        text: 1.5,
+        value: '1.5',
+      },
+      {
+        text: 2,
+        value: '2',
+      },
+      {
+        text: 2.5,
+        value: '2.5',
+      },
+      {
+        text: 3,
+        value: '3',
+      },
+      {
+        text: 3.5,
+        value: '3.5',
+      },
+      {
+        text: 4,
+        value: '4',
+      },
+      {
+        text: 4.5,
+        value: '4.5',
+      },
+      {
+        text: 5,
+        value: '5',
+      },
+    ]);
 
     const confirmDeleteCustomerRank = (id: number) => {
       Dialog.create({
@@ -284,8 +341,6 @@ export default defineComponent({
     };
 
     const openAddCustomerRankDialog = () => {
-      code.value = '';
-      name.value = '';
       level.value = undefined;
       status.value = CustomerRankStatus.active;
       addCustomerRankDialogIsOpened.value = true;
@@ -294,8 +349,6 @@ export default defineComponent({
     //gọi api add
     const addNewCustomer = async () => {
       const data = {
-        name: name.value,
-        code: code.value,
         level: level.value,
         status: status.value,
       };
@@ -334,8 +387,7 @@ export default defineComponent({
         })) 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;
         }
@@ -346,8 +398,7 @@ export default defineComponent({
     const updateNewCustomer = async () => {
       const data = {
         id: customerRankId.value,
-        name: name.value,
-        code: code.value,
+
         level: level.value,
         status: status.value,
       };
@@ -384,8 +435,7 @@ export default defineComponent({
       getListCustomerRank,
       CustomerRankStatus,
       openAddCustomerRankDialog,
-      code,
-      name,
+      listRating,
       level,
       status,
       addNewCustomer,