create customer page

src/assets/configurations.example.ts

@@ -51,4 +51,8 @@ export enum API_PATHS {
   getDetailUnit = 'artistOwner/detail',
   updateUnit = 'artistOwner/update',
   addArtist = 'artist/add',
+  listCustomers = 'customer',
+  listCustomerLevel = 'customerLevel',
+  addCustomer = 'customer/add',
+  deleteCustomer = 'customer/delete',
 }

src/assets/type.ts

@@ -216,3 +216,28 @@ export type DetailUnit = {
   fields: Array<FieldType>;
   contracts: Array<Contract>;
 };
+
+export type CustomerType = {
+  id: number;
+  code: string;
+  userName: string;
+  fullName: string;
+  companyName: string;
+  taxCode: string;
+  email: string;
+  status: number;
+  phone: string;
+  password: string;
+  address: string;
+  type: string;
+  representative: string;
+  position: string;
+  level: string;
+};
+export type CustomerLevelType = {
+  id: number;
+  name: string;
+  description: string;
+  level: number;
+  status: number;
+};

src/components/customer/add-new-customer-dialog/AddNewCustomerDialog.ts

-import { defineComponent } from 'vue';
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';
+import { CustomerLevelType } from 'src/assets/type';
 
 export default defineComponent({
   props: {
@@ -9,27 +10,84 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
-    ratingsOptions: {type: Array, required: true},
-    businessTypeOptions: {type: Array, required: true},
-    userName: { type: String, required: true },
-    customerName: { type: String, required: true },
-    businessName: { type: String, required: true },
-    taxCode: { type: Number, required: true },
-    email: { type: String, required: true },
-    ratings: { type: String, required: true },
-    address: { type: String, required: true },
-    businessType: { type: String, required: true },
-    representative: { type: String, required: true },
-    position: { type: String, required: true },
-    phone: { type: String, required: true },
-    status: { type: Boolean, required: true },
+    levelOptions: {
+      type: Array as PropType<CustomerLevelType[]>,
+      required: true,
+    },
   },
-  setup() {
+  setup(props, context) {
+    watch(
+      () => props.showDialog,
+      (value) => {
+        if (value) {
+          void resetData();
+        }
+      }
+    );
+    const code: Ref<string | null> = ref(null);
+    const userName: Ref<string | null> = ref(null);
+    const fullName: Ref<string | null> = ref(null);
+    const companyName: Ref<string | null> = ref(null);
+    const taxCode: Ref<string | null> = ref(null);
+    const email: Ref<string | null> = ref(null);
+    const status: Ref<number | null> = ref(2);
+    const phone: Ref<string | null> = ref(null);
+    const password: Ref<string | null> = ref(null);
+    const address: Ref<string | null> = ref(null);
+    const type: Ref<string | null> = ref(null);
+    const representative: Ref<string | null> = ref(null);
+    const position: Ref<string | null> = ref(null);
+    const level: Ref<CustomerLevelType | null> = ref(null);
+
+    const confirmAddCustomer = () => {
+      context.emit('addNewCustomer', {
+        code: code.value,
+        userName: userName.value,
+        fullName: fullName.value,
+        companyName: companyName.value,
+        taxCode: taxCode.value,
+        email: email.value,
+        status: status.value,
+        phone: phone.value,
+        password: password.value,
+        address: address.value,
+        type: type.value,
+        representative: representative.value,
+        position: position.value,
+        level: level.value,
+      });
+    };
+    const resetData = () => {
+      code.value = null;
+      userName.value = null;
+      fullName.value = null;
+      companyName.value = null;
+      taxCode.value = null;
+      email.value = null;
+      status.value = 2;
+      phone.value = null;
+      password.value = null;
+      address.value = null;
+      type.value = null;
+      representative.value = null;
+      position.value = null;
+      level.value = null;
+    };
     const userNameRules = [
       (val?: string) =>
         (val && val.trim().length) ||
         i18n.global.t('customer.validateMessages.requireUserName'),
     ];
+    const passwordRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requirePassword'),
+    ];
+    const codeRules = [
+      (val?: string) =>
+        (val && val.trim().length) ||
+        i18n.global.t('customer.validateMessages.requireCode'),
+    ];
     const customerNameRules = [
       (val?: string) =>
         (val && val.trim().length) ||
@@ -89,6 +147,8 @@ export default defineComponent({
       userNameRules,
       customerNameRules,
       businessNameRules,
+      passwordRules,
+      codeRules,
       taxCodeRules,
       emailRules,
       ratingsRules,
@@ -97,23 +157,22 @@ export default defineComponent({
       representativeRules,
       positionRules,
       phoneRules,
+      userName,
+      fullName,
+      companyName,
+      taxCode,
+      email,
+      status,
+      phone,
+      password,
+      address,
+      type,
+      representative,
+      position,
+      level,
+      code,
+      confirmAddCustomer,
     };
   },
-  emits: [
-    'update:showDialog',
-    'click:CloseBtn',
-    'update:userName',
-    'update:customerName',
-    'update:businessName',
-    'update:taxCode',
-    'update:email',
-    'update:ratings',
-    'update:address',
-    'update:businessType',
-    'update:representative',
-    'update:position',
-    'update:phone',
-    'update:status',
-    'addNewCustomer',
-  ],
+  emits: ['update:showDialog', 'click:CloseBtn', 'addNewCustomer'],
 });

src/components/customer/add-new-customer-dialog/index.vue

@@ -5,7 +5,7 @@
     @update:model-value="$emit('update:showDialog', $event)"
   >
     <q-card style="min-width: 900px" bordered>
-      <q-form greedy @submit.prevent="$emit('addNewCustomer')">
+      <q-form greedy @submit.prevent="confirmAddCustomer">
         <q-card-section>
           <q-item>
             <q-item-section>
@@ -21,94 +21,82 @@
           <div class="row q-col-gutter-sm">
             <div class="col-6">
               <q-input
-                :model-value="userName"
-                @update:model-value="$emit('update:userName', $event)"
+                v-model="userName"
                 :label="$t('customer.dialogLabel.fieldLabels.userName')"
                 :rules="userNameRules"
                 hide-bottom-space
                 type="text"
                 class="q-my-sm"
                 outlined
-                clearable
               ></q-input>
               <q-input
-                :model-value="customerName"
-                @update:model-value="$emit('update:customerName', $event)"
+                v-model="password"
+                :label="$t('customer.dialogLabel.fieldLabels.password')"
+                :rules="passwordRules"
+                hide-bottom-space
+                type="password"
+                class="q-my-sm"
+                outlined
+              ></q-input>
+              <q-input
+                v-model="code"
+                :label="$t('customer.dialogLabel.fieldLabels.code')"
+                :rules="codeRules"
+                hide-bottom-space
+                type="text"
+                class="q-my-sm"
+                outlined
+              ></q-input>
+              <q-input
+                v-model="fullName"
                 :label="$t('customer.dialogLabel.fieldLabels.customerName')"
                 type="text"
                 class="q-my-sm"
                 outlined
                 :rules="customerNameRules"
                 hide-bottom-space
-                clearable
               ></q-input>
               <q-input
-                :model-value="businessName"
-                @update:model-value="$emit('update:businessName', $event)"
+                v-model="companyName"
                 :label="$t('customer.dialogLabel.fieldLabels.businessName')"
                 type="text"
                 class="q-my-sm"
                 outlined
                 :rules="businessNameRules"
                 hide-bottom-space
-                clearable
               ></q-input>
               <q-input
-                :model-value="taxCode"
-                @update:model-value="$emit('update:taxCode', $event)"
+                v-model="taxCode"
                 :label="$t('customer.dialogLabel.fieldLabels.taxCode')"
                 type="number"
                 class="q-my-sm"
                 outlined
                 :rules="taxCodeRules"
                 hide-bottom-space
-                clearable
               ></q-input>
               <q-input
-                :model-value="email"
-                @update:model-value="$emit('update:email', $event)"
-                :label="$t('customer.dialogLabel.fieldLabels.email')"
+                v-model="address"
+                :label="$t('customer.dialogLabel.fieldLabels.address')"
                 type="text"
                 class="q-my-sm"
+                :rules="addressRules"
                 outlined
-                :rules="emailRules"
                 hide-bottom-space
-                clearable
               ></q-input>
-              <q-select
-                :model-value="ratings"
-                @update:model-value="$emit('update:ratings', $event)"
-                :label="$t('customer.dialogLabel.fieldLabels.ratings')"
-                :options="ratingsOptions"
-                :rules="ratingsRules"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="text"
-                type="text"
-                class="q-my-sm"
-                outlined
-                hide-bottom-space
-                clearable
-              ></q-select>
             </div>
             <div class="col-6">
               <q-input
-                :model-value="address"
-                @update:model-value="$emit('update:address', $event)"
-                :label="$t('customer.dialogLabel.fieldLabels.address')"
+                v-model="email"
+                :label="$t('customer.dialogLabel.fieldLabels.email')"
                 type="text"
                 class="q-my-sm"
-                :rules="addressRules"
                 outlined
+                :rules="emailRules"
                 hide-bottom-space
-                clearable
               ></q-input>
-              <q-select
-                :model-value="businessType"
-                @update:model-value="$emit('update:businessType', $event)"
+              <q-input
+                v-model="type"
                 :label="$t('customer.dialogLabel.fieldLabels.businessType')"
-                :options="businessTypeOptions"
                 :rules="businessTypeRules"
                 emit-value
                 map-options
@@ -117,52 +105,54 @@
                 class="q-my-sm"
                 outlined
                 hide-bottom-space
+              ></q-input>
+              <q-select
+                v-model="level"
+                :label="$t('customer.dialogLabel.fieldLabels.ratings')"
+                :options="levelOptions"
+                :rules="ratingsRules"
+                map-options
+                option-value="id"
+                option-label="name"
+                type="text"
+                class="q-my-sm"
+                outlined
                 clearable
+                hide-bottom-space
               ></q-select>
+
               <q-input
-                :model-value="representative"
-                emit-value
-                @update:model-value="$emit('update:representative', $event)"
+                v-model="representative"
                 :label="$t('customer.dialogLabel.fieldLabels.representative')"
                 class="q-my-sm"
                 type="text"
                 outlined
                 :rules="representativeRules"
                 hide-bottom-space
-                clearable
               ></q-input>
               <q-input
-                :model-value="position"
-                emit-value
-                @update:model-value="$emit('update:position', $event)"
+                v-model="position"
                 :label="$t('customer.dialogLabel.fieldLabels.position')"
                 class="q-my-sm"
                 type="text"
                 outlined
                 :rules="positionRules"
                 hide-bottom-space
-                clearable
               ></q-input>
               <q-input
-                :model-value="phone"
-                emit-value
-                @update:model-value="$emit('update:phone', $event)"
+                v-model="phone"
                 :label="$t('customer.dialogLabel.fieldLabels.phone')"
                 class="q-my-sm"
                 type="number"
                 :rules="phoneRules"
                 outlined
                 hide-bottom-space
-                clearable
               ></q-input>
               <div style="padding-top: 13px; padding-left: 12px">
                 <span class="text-body1">{{
                   $t('customer.dialogLabel.fieldLabels.status')
                 }}</span
-                ><q-toggle
-                  :model-value="status"
-                  @update:model-value="$emit('update:status', $event)"
-                />
+                ><q-toggle :true-value="1" :false-value="2" v-model="status" />
               </div>
             </div>
           </div>

src/i18n/vi/index.ts

@@ -317,6 +317,8 @@ export default {
       fieldLabels: {
         userName: 'Tên đăng nhập *',
         customerName: 'Họ tên *',
+        password: 'Mật khẩu *',
+        code: 'Mã khách hàng *',
         businessName: 'Tên doanh nghiệp *',
         taxCode: 'Mã số thuế *',
         email: 'Email *',
@@ -332,6 +334,7 @@ export default {
     toolTipMessage: {
       updateCustomerInfo: 'Cập nhật',
       informationCustomer: 'Thông tin',
+      deleteCustomer: 'Xoá',
     },
     crudActions: {
       save: 'Lưu',
@@ -339,6 +342,8 @@ export default {
     },
     validateMessages: {
       requireUserName: 'Vui lòng nhập Tên đăng nhập',
+      requirePassword: 'Vui lòng nhập Mật khẩu',
+      requireCode: 'Vui lòng nhập Mã khách hàng',
       requireCustomerName: 'Vui lòng nhập Họ tên',
       requireBusinessName: 'Vui lòng nhập Tên Doanh nghiệp',
       requireTaxCode: 'Vui lòng nhập Mã số thuế',
@@ -355,13 +360,13 @@ export default {
     confirmActionsTitle: {
       confirmDeleteUserTitle: 'Xác nhận',
       confirmDeleteUserCancelBtnLabel: 'Huỷ',
-      confirmDeleteUserContent: 'Bạn có chắc muốn xoá tài khoản',
+      confirmDeleteUserContent: 'Bạn có chắc muốn xoá khách hàng này không ?',
       confirmResetPasswordContent:
-        'Bạn có muốn reset mật khẩu của người dùng này không',
+        'Bạn có muốn reset mật khẩu của người dùng này không ?',
     },
     actionMessages: {
       addNewUserAccess: 'Thêm tài khoản thành công',
-      deleteUserAccess: 'Xoá tài khoản thành công',
+      deleteUserAccess: 'Xoá khách hàng thành công',
       updateUserAccess: 'Cập nhật thông tin tài khoản thành công',
       resetPasswordAccess: 'Reset mật khẩu thành công',
     },

src/pages/khach-hang/customer.ts

 import { i18n } from 'src/boot/i18n';
-import { defineComponent, onMounted, ref, Ref } from 'vue';
+import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
 import AddNewCustomerDialogComponent from '../../components/customer/add-new-customer-dialog/index.vue';
 import UpdateNewCustomerDialogComponent from '../../components/customer/update-new-customer-dialog/index.vue';
-// import { API_PATHS } from 'src/assets/configurations.example';
-export type CustomerInfoType = {
-  id: number;
-  userName: string | null;
-  customerName: string | null;
-  businessName: string | null;
-  taxCode: number;
-  email: string | null;
-  ratings: string | null;
-  address: string | null;
-  businessType: string | null;
-  representative: string | null;
-  position: string | null;
-  phone: string | null;
-  status: number;
-};
+import { API_PATHS, config } from 'src/assets/configurations';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+import {
+  CustomerType,
+  PaginationResponse,
+  CustomerLevelType,
+} from 'src/assets/type';
+import { Dialog, Notify } from 'quasar';
 export default defineComponent({
   components: {
     AddNewCustomerDialogComponent,
@@ -37,11 +30,11 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'customerCode',
-        field: 'customerCode',
+        name: 'code',
+        field: 'code',
         required: true,
         label: i18n.global.t('customer.tableColumnsCustomer.customerCode'),
-        align: 'left',
+        align: 'center',
         headerStyle: 'text-align: center !important;',
         sortable: false,
       },
@@ -64,8 +57,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'businessName',
-        field: 'businessName',
+        name: 'companyName',
+        field: 'companyName',
         required: true,
         label: i18n.global.t('customer.tableColumnsCustomer.businessName'),
         headerStyle: 'text-align: center !important;',
@@ -91,8 +84,8 @@ export default defineComponent({
         sortable: false,
       },
       {
-        name: 'ratings',
-        field: 'ratings',
+        name: 'level',
+        field: 'level',
         required: true,
         label: i18n.global.t('customer.tableColumnsCustomer.ratings'),
         headerStyle: 'text-align: center !important;',
@@ -122,104 +115,145 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(10);
+    const companyNameSelected: Ref<string | null> = ref(null);
+    const taxCodeSelected: Ref<string | null> = ref(null);
+    const levelSelected: Ref<CustomerLevelType | null> = ref(null);
 
-    const id: Ref<number> = ref(0);
-    const businessName: Ref<string | undefined> = ref();
-    const taxCode: Ref<number | undefined> = ref();
-    const userName: Ref<string | undefined> = ref();
-    const email: Ref<string | undefined> = ref();
-    const address: Ref<string | undefined> = ref();
-    const customerName: Ref<string | undefined> = ref();
-    const ratings: Ref<number | undefined> = ref();
-    const ratingsOptions = ref([
-      { id: 1, text: 'VIP_1' },
-      { id: 2, text: 'VIP_2' },
-      { id: 3, text: 'VIP_3' },
-    ]);
-    const businessType: Ref<number | undefined> = ref();
-    const businessTypeOptions = ref([
-      { id: 1, text: 'Doanh nghiệp A' },
-      { id: 2, text: 'Doanh nghiệp B' },
-      { id: 3, text: 'Doanh nghiệp C' },
-    ]);
-    const representative: Ref<string | undefined> = ref();
-    const position: Ref<string | undefined> = ref();
-    const phone: Ref<string | undefined> = ref();
-    const status: Ref<boolean | number> = ref(true);
-    const getListCustomer = () => {
-      //   const response = (await api({
-      //     url: API_PATHS.getListArtist,
-      //     method: 'GET',
-      //     params: {
-      //       pageIndex: pageIndex.value,
-      //       pageSize: pageSize.value,
-      //     },
-      //   })) as AxiosResponse<BaseResponseBody<unknown>>;
-      const fakeData: unknown[] = [
-        {
-          id: 1,
-          stt: 1,
-          customerCode: '0001',
-          userName: 'DuongNA01',
-          fullName: 'Nguyễn Tùng Dương',
-          businessName: 'TNHH Hà Đông',
-          taxCode: '1234567890',
-          email: 'info@hadong.vn',
-          ratings: 'VIP_1',
-          status: 1,
+    const id: Ref<number | undefined> = ref(undefined);
+    const code: Ref<string | null> = ref(null);
+    const userName: Ref<string | null> = ref(null);
+    const fullName: Ref<string | null> = ref(null);
+    const companyName: Ref<string | null> = ref(null);
+    const taxCode: Ref<string | null> = ref(null);
+    const email: Ref<string | null> = ref(null);
+    const status: Ref<number | null> = ref(2);
+    const phone: Ref<string | null> = ref(null);
+    const password: Ref<string | null> = ref(null);
+    const address: Ref<string | null> = ref(null);
+    const type: Ref<string | null> = ref(null);
+    const representative: Ref<string | null> = ref(null);
+    const position: Ref<string | null> = ref(null);
+    const level: Ref<CustomerLevelType | null> = ref(null);
+
+    const levelOptions: Ref<CustomerLevelType[] | null> = ref([]);
+    const getListCustomers = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.listCustomers,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+            customerLevel: levelSelected.value?.id,
           },
-        {
-          id: 2,
-          stt: 2,
-          customerCode: '0001',
-          userName: 'DuongNA01',
-          fullName: 'Nguyễn Tùng Dương',
-          businessName: 'TNHH Hà Đông',
-          taxCode: '1234567890',
-          email: 'info@hadong.vn',
-          ratings: 'VIP_1',
-          status: 0,
+        })) as AxiosResponse<
+          BaseResponseBody<PaginationResponse<CustomerType>>
+        >;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          userTableRowsCustomer.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+          console.log(response.data.data);
+        }
+      } catch (error) {}
+    };
+    const getCustomerLevelOptions = async () => {
+      const response = (await api({
+        url: API_PATHS.listCustomerLevel,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<CustomerLevelType[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        levelOptions.value = response.data.data;
+      }
+    };
+    const confirmDeleteCustomer = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'customer.confirmActionsTitle.confirmDeleteUserTitle'
+        ),
+        message: i18n.global.t(
+          'customer.confirmActionsTitle.confirmDeleteUserContent'
+        ),
+        cancel: i18n.global.t(
+          'customer.confirmActionsTitle.confirmDeleteUserCancelBtnLabel'
+        ),
+        color: 'negative',
+      }).onOk(() => {
+        void deleteCustomer(id);
+      });
+    };
+    const deleteCustomer = async (id: number) => {
+      try {
+        const deleteResult = (await api({
+          url: API_PATHS.deleteCustomer,
+          method: 'GET',
+          params: {
+            id: id,
           },
-      ];
-      userTableRowsCustomer.value = fakeData;
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('customer.actionMessages.deleteUserAccess'),
+          });
+          void getListCustomers();
+        }
+      } catch (error) {}
     };
-    const filterListCustomer = () => {
-      // const response = (await api({
-      //   url: API_PATHS.filterListArtist,
-      //   method: 'GET',
-      //   params: {
-      //     businessName: businessName.value
-      //     taxCode: taxCode.value
-      //     ratings: ratings.value
-      //   },
-      // })) as AxiosResponse<BaseResponseBody<Artist[]>>;
-      // userTableRowsArtist.value =  response.data.data
+    const addCustomer = async (item: CustomerType) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.addCustomer,
+          method: 'POST',
+          data: {
+            code: item.code,
+            userName: item.userName,
+            fullName: item.fullName,
+            companyName: item.companyName,
+            taxCode: item.taxCode,
+            email: item.email,
+            status: item.status,
+            phone: item.phone,
+            password: item.password,
+            address: item.address,
+            type: item.type,
+            representative: item.representative,
+            position: item.position,
+            level: item.level,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: i18n.global.t('artist.actionMessages.addNewArtistAccess'),
+          });
+          void getListCustomers();
+          showDialog.value = false;
+        }
+      } catch (error) {}
     };
     const changePageSize = () => {
       pageIndex.value = 1;
-      void getListCustomer();
+      void getListCustomers();
     };
 
     const openAddCustomerDialog = () => {
       showDialog.value = true;
-      userName.value = '';
-      customerName.value = '';
-      businessName.value = '';
-      taxCode.value = undefined;
-      email.value = '';
-      ratings.value = undefined;
-      address.value = '';
-      businessType.value = undefined;
-      representative.value = '';
-      position.value = '';
-      phone.value = '';
+      userName.value = null;
+      fullName.value = null;
+      companyName.value = null;
+      taxCode.value = null;
+      email.value = null;
+      level.value = null;
+      address.value = null;
+      type.value = null;
+      representative.value = null;
+      position.value = null;
+      phone.value = null;
+      status.value = 2;
     };
 
-    const addNewCustomer = () => {
-      //gọi api thêm mới
-      try {
-      } catch (error) {}
-    };
     const getDetailCustomer = () => {
       // gọi api chi tiết cần có id để lấy value cho từng customer
       // const response = (await api({
@@ -250,40 +284,45 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      void getListCustomer();
+      void getListCustomers();
+      void getCustomerLevelOptions();
     });
     return {
       openUpdateCustomerDialog,
       updateCustomer,
       openAddCustomerDialog,
-      addNewCustomer,
+      addCustomer,
       showDialogUpdate,
       showDialog,
       id,
       userName,
-      customerName,
-      businessName,
+      fullName,
+      companyName,
       taxCode,
+      code,
+      password,
+      type,
       email,
-      ratings,
-      ratingsOptions,
+      level,
+      levelOptions,
       address,
-      businessType,
-      businessTypeOptions,
       representative,
       position,
+      levelSelected,
       phone,
+      companyNameSelected,
+      taxCodeSelected,
       status,
       userTableColumnsCustomer,
       userTableRowsCustomer,
-      getListCustomer,
+      getListCustomers,
       pageIndex,
       pageSize,
-      filterListCustomer,
-      // getDetailCustomer,
       dataTest,
       totalPage,
       changePageSize,
+      getCustomerLevelOptions,
+      confirmDeleteCustomer,
     };
   },
 });

src/pages/khach-hang/index.vue

@@ -7,7 +7,7 @@
     <q-space></q-space>
     <div class="col-2">
       <q-input
-        v-model="businessName"
+        v-model="companyNameSelected"
         dense
         outlined
         :label="$t('customer.tableColumnsCustomer.businessName')"
@@ -16,7 +16,7 @@
     </div>
     <div class="col-2">
       <q-input
-        v-model="taxCode"
+        v-model="taxCodeSelected"
         dense
         outlined
         :label="$t('customer.tableColumnsCustomer.taxCode')"
@@ -25,9 +25,9 @@
     </div>
     <div class="col-2" dense outlined>
       <q-select
-        v-model="ratings"
-        :options="ratingsOptions"
-        option-label="text"
+        v-model="levelSelected"
+        :options="levelOptions"
+        option-label="name"
         option-value="id"
         dense
         outlined
@@ -41,7 +41,7 @@
         no-caps
         :label="$t('crudActions.search')"
         style="width: 100px"
-        @click="filterListCustomer"
+        @click="getListCustomers"
       >
       </q-btn>
     </div>
@@ -65,13 +65,15 @@
         separator="cell"
         hide-pagination
       >
+        <template v-slot:body-cell-stt="item">
+          <q-td style="padding: 0; height: 100%">
+            <div align="center">
+              {{ item.rowIndex + 1 }}
+            </div>
+          </q-td>
+        </template>
         <template v-slot:body-cell-action="rowData">
           <q-td style="padding: 0" class="flex flex-center">
-            <q-btn flat round color="primary" icon="mdi-information-outline">
-              <q-tooltip :offset="[20, 10]">{{
-                $t('customer.toolTipMessage.informationCustomer')
-              }}</q-tooltip>
-            </q-btn>
             <q-btn
               flat
               round
@@ -83,18 +85,29 @@
                 $t('customer.toolTipMessage.updateCustomerInfo')
               }}</q-tooltip>
             </q-btn>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-delete-outline"
+              @click="confirmDeleteCustomer(rowData.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">{{
+                $t('customer.toolTipMessage.deleteCustomer')
+              }}</q-tooltip>
+            </q-btn>
           </q-td>
         </template>
         <template v-slot:body-cell-status="rowData">
           <q-td>
             <div align="center">
               <q-chip
-                :color="rowData.value ? 'positive' : 'orange'"
+                :color="rowData.value === 1 ? 'positive' : 'orange'"
                 text-color="white"
                 size="sm"
               >
                 {{
-                  rowData.value
+                  rowData.value === 1
                     ? $t('customer.statusLabel.active')
                     : $t('customer.statusLabel.inactive')
                 }}
@@ -109,30 +122,17 @@
           v-model:pageSize="pageSize"
           :totalPage="totalPage"
           @update:pageSize="changePageSize"
-          @update:currentPage="getListCustomer"
+          @update:currentPage="getListCustomers"
         />
 
         <AddNewCustomerDialogComponent
           v-model:show-dialog="showDialog"
-          v-model:user-name="userName"
-          v-model:customer-name="customerName"
-          v-model:business-name="businessName"
-          v-model:tax-code="taxCode"
-          v-model:email="email"
-          v-model:ratings="ratings"
-          v-model:address="address"
-          v-model:business-type="businessType"
-          v-model:representative="representative"
-          v-model:position="position"
-          v-model:phone="phone"
-          v-model:status="status"
-          :ratings-options="ratingsOptions"
-          :business-type-options="businessTypeOptions"
+          :level-options="levelOptions"
           @click:CloseBtn="showDialog = false"
-          @addNewCustomer="addNewCustomer"
+          @addNewCustomer="addCustomer"
         ></AddNewCustomerDialogComponent>
 
-        <UpdateNewCustomerDialogComponent
+        <!-- <UpdateNewCustomerDialogComponent
           v-model:show-dialog-update="showDialogUpdate"
           v-model:user-name="userName"
           v-model:customer-name="customerName"
@@ -150,7 +150,7 @@
           :business-type-options="businessTypeOptions"
           @click:CloseBtn="showDialogUpdate = false"
           @updateNewCustomer="updateCustomer"
-        ></UpdateNewCustomerDialogComponent>
+        ></UpdateNewCustomerDialogComponent> -->
       </div>
     </div>
   </div>

src/pages/nghe-sy/index.vue

@@ -104,7 +104,7 @@
                 flat
                 round
                 color="primary"
-                icon="mdi-delete"
+                icon="mdi-delete-outline"
                 @click="confirmDeleteArtist(item.row.id)"
               >
                 <q-tooltip :offset="[20, 10]">{{

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

@@ -368,7 +368,8 @@ export default defineComponent({
             avatar: avatar.value,
             artistCode: artistCode.value,
             artistName: artistName.value,
-            birthday: birthday.value,
+            // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+            birthday: birthday.value + '00:00:00',
             sex: sex.value,
             address: address.value,
             phoneNumber: phoneNumber.value,