update

src/assets/configurations.example.ts

@@ -191,4 +191,7 @@ export enum API_PATHS {
 
   // xác nhận
   depositUpdateStatus = 'deposit/updateStatus',
+
+  // cập nhật booking
+  bookingUpdate = 'booking/update',
 }

src/assets/type.ts

@@ -4,10 +4,15 @@ export type PaginationResponse<DataType> = {
   pageIndex: null | number;
   pageSize: null | number;
   totalPages: number;
-  totalRecords: number;
+  totalRecords: string;
   beginIndex: number;
   endIndex: number;
   data: DataType[];
+  deposit: string;
+  fineFee: string;
+  refundAmount: string;
+  totalDepositRequired: string;
+  totalExpectedFee: string;
 };
 export type FileUploadType = {
   byteSize: number;
@@ -362,7 +367,7 @@ export type CustomerType = {
   representative: string;
   position: string;
   level: CustomerLevelType;
-  representativeEmail: string
+  representativeEmail: string;
 };
 export type CustomerLevelType = {
   id: number;
@@ -533,9 +538,11 @@ export type ListBooking = {
   performStatus: number;
   fee: string;
   bookingRandomCode: string;
-  expectFee: string
-  customerName: string
-  createTime: string
+  expectFee: string;
+  customerName: string;
+  createTime: string;
+  TotalListBooking: TotalListBooking;
+  customerDto: customerDto;
 };
 
 export type ListArrayArtist = {
@@ -896,3 +903,35 @@ export type ListFinedAmount = {
   updateTime: string | null;
   artistBooking: ListBooking;
 };
+
+export type TotalListBooking = {
+  deposit: number;
+  fineFee: number;
+  refundAmount: number;
+  totalDepositRequired: number;
+  totalExpectedFee: number;
+};
+
+export type customerDto = {
+  address: string;
+  approvalStatus: null;
+  cccd: null;
+  code: string;
+  companyName: string;
+  email: string;
+  fullName: string;
+  guest: null;
+  id: number;
+  level: string;
+  levelId: null;
+  password: string;
+  phone: string;
+  position: null;
+  representative: string;
+  representativeEmail: null;
+  representativePhone: null;
+  status: number;
+  taxCode: string;
+  type: null;
+  userName: string;
+};

src/boot/functions.ts

@@ -42,13 +42,31 @@ const isHasVietnamese = (str: string) => {
 
 const formatMoney = (str: { amount: string  }) => {
   try {
-    return str == null || str.amount == null
-      ? ''
-      : str.amount
-          .toString()
-          .replace(/\D/g, '')
-          .replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-  } catch (e) {}
+    const decimalCount = 0;
+    const thousands = ',';
+    const decimal = '.';
+
+    const negativeSign = Number(str.amount) < 0 ? '-' : '';
+
+    const i = parseInt(
+      (str.amount = Math.abs(Number(str.amount) || 0).toFixed(decimalCount))
+    ).toString();
+    const j = i.length > 3 ? i.length % 3 : 0;
+
+    return (
+      negativeSign +
+      (j ? i.substr(0, j) + thousands : '') +
+      i.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousands) +
+      (decimalCount
+        ? decimal +
+          Math.abs(Number(str.amount) - Number(i))
+            .toFixed(decimalCount)
+            .slice(2)
+        : '')
+    );
+  } catch (e) {
+    console.log(e);
+  }
 };
 
 const isNullOrEmpty = (str: any) => {

src/components/booking/listFinedAmount.vue

@@ -46,6 +46,7 @@
               <template v-slot:body-cell-artistName="item">
                 <td style="text-align: center">
                   <div>{{ item.row.artistBooking.artistName }}</div>
+                  <div>SĐT: {{ item.row.artistBooking.artistName }}</div>
                 </td>
               </template>
                        <template v-slot:body-cell-bookingRandomCode="item">

src/pages/danh-sach-booking/index.vue

@@ -141,6 +141,27 @@
     </div>
 
     <div class="col-12 q-mt-sm">
+      <div class="q-ml-sm" style="font-size: 14px">
+        <span style="font-weight: bold"></span>
+        <span
+          >Đặt cọc:
+          <span style="color: red; padding-right: 5px">{{
+            TotalDeposit
+          }}</span></span
+        >
+        <span
+          >Tiền phạt:
+          <span style="color: red; padding-right: 5px">{{
+            TotalFineFee
+          }}</span></span
+        >
+        <span
+          >Tiền hoàn trả:
+          <span style="padding-right: 5px; color: red">{{
+            TotalRefundAmount
+          }}</span></span
+        >
+      </div>
       <q-table
         :rows="listBooking"
         :columns="tableColumns"
@@ -157,6 +178,16 @@
       >
         <template v-slot:body-cell-action="rowData">
           <q-td style="padding: 0; text-align: center">
+            <div style="display: flex;">
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-pencil-outline"
+                @click="openDialogUpdate(rowData.row)"
+              >
+                <q-tooltip :offset="[10, 10]">{{ 'Cập nhật' }}</q-tooltip>
+              </q-btn>
               <q-btn
                 flat
                 round
@@ -168,12 +199,13 @@
                   $t('listBooking.toolTipMessage')
                 }}</q-tooltip>
               </q-btn>
+            </div>
           </q-td>
         </template>
 
         <template v-slot:body-cell-bookingRandomCode="item">
           <q-td :item="item" style="text-align: center">
-            <div style="cursor: pointer;" @click="detail(item.row.id)">
+            <div style="cursor: pointer" @click="detail(item.row.id)">
               {{ item.row.bookingRandomCode }}
             </div>
           </q-td>
@@ -208,7 +240,9 @@
           <td align="center">
             <div>
               {{ item.row.customerDto.fullName }}
-              <span v-if="item.row.customerDto.phone">- {{ item.row.customerDto.phone }}</span>
+              <span v-if="item.row.customerDto.phone"
+                >- {{ item.row.customerDto.phone }}</span
+              >
             </div>
           </td>
         </template>
@@ -300,6 +334,12 @@
         @toggle="closedialogfinedAmount"
         :data="detailInfoBooking"
       ></listFinedAmount>
+
+      <update
+        :open="openUpdate"
+        @toggle="openUpdate = !openUpdate"
+        :data="detailInfoBooking"
+      ></update>
     </div>
   </div>
 </template>
@@ -311,9 +351,11 @@ import { AxiosResponse } from 'axios';
 import { i18n } from 'src/boot/i18n';
 import { defineComponent, onMounted, Ref, ref } from 'vue';
 import Pagination from 'components/pagination/index.vue';
+import update from 'components/booking/updateBooking.vue';
 import {
   PaginationResponse,
   ListBooking,
+  TotalListBooking,
   ListArrayArtist,
   ListArrayCust,
 } from 'src/assets/type';
@@ -328,6 +370,7 @@ export default defineComponent({
     detailBooking,
     Pagination,
     listFinedAmount,
+    update,
   },
   setup() {
     const tableColumns = [
@@ -523,11 +566,19 @@ export default defineComponent({
     const showDialog = ref(false);
     const detailInfoBooking: Ref<ListBooking | null> = ref(null);
     const listBooking: Ref<unknown[]> = ref([]);
+    const TotalDeposit: Ref<string | undefined> = ref('');
+    const TotalFineFee: Ref<string | undefined> = ref('');
+    const openUpdate = ref(false);
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(1);
     const sreachArtist: Ref<ListArrayArtist | null> = ref(null);
     const sreachUserName: Ref<ListArrayArtist | null> = ref(null);
+    const totalItem: Ref<TotalListBooking | null> = ref(null);
+    const TotalRefundAmount: Ref<string | undefined> = ref('');
+    const TotalExpectedFee: Ref<string | undefined> = ref('');
+    const DepositRequiredTotal: Ref<string | undefined> = ref('');
+    const totalRecords: Ref<string | undefined> = ref('');
     const sreachStatus: Ref<
       { id: number; name: string; color: string } | undefined
     > = ref(undefined);
@@ -584,6 +635,12 @@ export default defineComponent({
         });
       });
     };
+
+    const openDialogUpdate = (item: ListBooking) => {
+      openUpdate.value = true;
+      detailInfoBooking.value = item;
+    };
+
     const getArrayCust = async () => {
       const response = (await api({
         url: API_PATHS.getArrayCust,
@@ -614,7 +671,6 @@ export default defineComponent({
     const openDialogfinedAmount = (item: ListBooking) => {
       dialogfinedAmount.value = true;
       detailInfoBooking.value = item;
-      console.log(2312312);
     };
 
     const getListBooking = async () => {
@@ -643,6 +699,25 @@ export default defineComponent({
         if (response.data.error.code === config.API_RES_CODE.OK.code) {
           listBooking.value = response.data.data.data;
           totalPage.value = response.data.data.totalPages;
+          TotalDeposit.value = formatMoney({
+            amount: response.data.data.deposit,
+          });
+          TotalFineFee.value = formatMoney({
+            amount: response.data.data.fineFee,
+          });
+          TotalRefundAmount.value = formatMoney({
+            amount: response.data.data.refundAmount,
+          });
+
+          // DepositRequiredTotal = formatMoney({
+          //   amount: response.data.data.totalDepositRequired,
+          // });
+
+          // TotalExpectedFee = formatMoney({
+          //   amount: response.data.data.totalExpectedFee,
+          // });
+
+          // totalRecords = formatMoney({amount: response.data.data.totalRecords})
         }
       } catch (error) {}
     };
@@ -712,13 +787,22 @@ export default defineComponent({
       pageIndex,
       pageSize,
       totalPage,
+      TotalDeposit,
+      TotalFineFee,
+      TotalRefundAmount,
+      TotalExpectedFee,
+      DepositRequiredTotal,
       changePageSize,
       getListBooking,
       isformatMoney,
+      openDialogUpdate,
+      totalItem,
       ListStatusBooking,
       ListPerformStatus,
       sreachStatus,
       sreachPerformStatus,
+      totalRecords,
+      openUpdate,
     };
   },
 });

src/pages/nghe-sy/index.vue

@@ -455,7 +455,7 @@ export default defineComponent({
     const pageIndex = ref(1);
     const pageSize = ref(20);
     const totalPage = ref(0);
-    const totalRecords = ref(0);
+    const totalRecords:Ref<string | undefined> = ref('');
     const fullNameKeyword = ref('');
     const sexOptions = ref([
       { id: 1, name: 'Nam' },