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

@@ -40,15 +40,33 @@ const isHasVietnamese = (str: string) => {
 //   } catch (e) {}
 // })
 
-const formatMoney = (str: { amount: 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/components/booking/updateBooking.vue

+<template>
+  <q-dialog persistent :model-value="open">
+    <q-card style="min-width: 750px" bordered>
+      <q-form greedy @submit.prevent="confirmAdd">
+        <q-card-section style="padding-bottom: 10px">
+          <q-item style="padding-left: 10px">
+            <q-item-section>
+              <q-item-label class="text-h6 text-weight-regular"
+                >Cập nhật booking</q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-card-section>
+
+        <q-card-section style="padding-top: 0px">
+          <!-- 
+          <q-input
+                :model-value="contractTimeFrom"
+                :label="
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.contractTimeFrom')
+                "
+                class="q-my-sm"
+                outlined
+                :rules="contractTimeFromRules"
+                readonly
+              >
+                <template v-slot:append>
+                  <q-icon name="event" class="cursor-pointer"> </q-icon>
+                </template>
+
+                <q-popup-proxy
+                  ref="qDateProxy"
+                  transition-show="scale"
+                  transition-hide="scale"
+                  :breakpoint="100000"
+                >
+                  <q-date
+                    :model-value="contractTimeFrom"
+                    @update:model-value="
+                      $emit('update:contractTimeFrom', $event)
+                    "
+                    mask="DD/MM/YYYY"
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="Ok" color="primary" flat />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-input> -->
+          <!-- <q-input
+                :model-value="contractTimeTo"
+                :label="
+                  $t('managingUnitAdd.dialogLabel.fieldLabels.contractTimeTo')
+                "
+                class="q-my-sm"
+                outlined
+                :rules="contractTimeToRules"
+                readonly
+                ><template v-slot:append>
+                  <q-icon name="event" class="cursor-pointer"> </q-icon>
+                </template>
+                <q-popup-proxy
+                  ref="qDateProxy"
+                  transition-show="scale"
+                  transition-hide="scale"
+                  :breakpoint="100000"
+                >
+                  <q-date
+                    :model-value="contractTimeTo"
+                    mask="DD/MM/YYYY"
+                    @update:model-value="$emit('update:contractTimeTo', $event)"
+                  >
+                    <div class="row items-center justify-end">
+                      <q-btn v-close-popup label="Ok" color="primary" flat />
+                    </div>
+                  </q-date>
+                </q-popup-proxy>
+              </q-input> -->
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="customer"
+              outlined
+              hide-bottom-space
+              dense
+              type="text"
+              label="Tên khách hàng"
+            />
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="phone"
+              outlined
+              hide-bottom-space
+              dense
+              type="text"
+              label="Số điện thoại"
+            />
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="contractTimeFrom"
+              :label="'Thời gian bắt đầu'"
+              class="q-my-sm"
+              outlined
+              readonly
+            >
+              <template v-slot:append>
+                <q-icon name="event" class="cursor-pointer"> </q-icon>
+              </template>
+
+              <q-popup-proxy
+                ref="qDateProxy"
+                transition-show="scale"
+                transition-hide="scale"
+                :breakpoint="100000"
+              >
+                <q-date v-model="contractTimeFrom" mask="DD/MM/YYYY">
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="Ok" color="primary" flat />
+                  </div>
+                </q-date>
+              </q-popup-proxy>
+            </q-input>
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="contractTimeTo"
+              :label="'Thời gian kết thúc'"
+              class="q-my-sm"
+              outlined
+              readonly
+              ><template v-slot:append>
+                <q-icon name="event" class="cursor-pointer"> </q-icon>
+              </template>
+              <q-popup-proxy
+                ref="qDateProxy"
+                transition-show="scale"
+                transition-hide="scale"
+                :breakpoint="100000"
+              >
+                <q-date v-model="contractTimeTo" mask="DD/MM/YYYY">
+                  <div class="row items-center justify-end">
+                    <q-btn v-close-popup label="Ok" color="primary" flat />
+                  </div>
+                </q-date>
+              </q-popup-proxy>
+            </q-input>
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="email"
+              outlined
+              hide-bottom-space
+              dense
+              type="text"
+              label="Email"
+            />
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="money"
+              outlined
+              hide-bottom-space
+              dense
+              type="text"
+              label="Số tiền"
+            />
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="content"
+              outlined
+              hide-bottom-space
+              dense
+              type="textarea"
+              label="Nội dung"
+            />
+          </div>
+
+          <div class="cols-6 q-mb-md">
+            <q-input
+              v-model="location"
+              outlined
+              hide-bottom-space
+              dense
+              type="textarea"
+              label="Địa điểm"
+            />
+          </div>
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            color="grey"
+            no-caps
+            style="width: 90px"
+            label="Hủy"
+            @click="closeDialog"
+          />
+          <q-btn
+            type="submit"
+            color="primary"
+            no-caps
+            style="width: 90px"
+            label="Cập nhật"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, Ref, ref, watch } from 'vue';
+import { Dialog, Notify } from 'quasar';
+import { API_PATHS, config } from 'src/assets/configurations.example';
+import { AxiosResponse } from 'axios';
+import { api, BaseResponseBody } from 'src/boot/axios';
+
+import { ListBooking } from 'src/assets/type';
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    data: {
+      type: Object as PropType<ListBooking>,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const content: Ref<string | null> = ref(null);
+    const customer: Ref<string | null> = ref(null);
+    const phone: Ref<string | null> = ref(null);
+    const contractTimeFrom: Ref<string | null> = ref(null);
+    const contractTimeTo: Ref<string | null> = ref(null);
+    const email: Ref<string | null> = ref(null);
+    const money: Ref<string | null> = ref(null);
+    const location: Ref<string | null> = ref(null);
+
+    watch(
+      () => props.open,
+      (value) => {
+        if (value) {
+          console.log(props.data, '1231231231');
+          void getDataItem();
+        }
+      }
+    );
+
+    const getDataItem = () => {
+      content.value = props.data.content;
+      customer.value = props.data.userName;
+      phone.value = props.data.customerDto.phone;
+      contractTimeFrom.value = props.data.fromTime;
+      contractTimeTo.value = props.data.toTime;
+      email.value = props.data.customerDto.email;
+      money.value = props.data.expectFee;
+      location.value = props.data.address;
+    };
+
+    const confirmAdd = async () => {
+      try {
+        const browserResult = (await api({
+          url: API_PATHS.bookingUpdate,
+          method: 'POST',
+          data: {
+            id: props.data.id,
+            status: 1,
+            address: location.value,
+            content:  content.value ,
+            expectFee:  money.value ,
+            fromTime:  contractTimeFrom.value,
+            toTime:  contractTimeTo.value ,
+            email:  email.value ,
+            phoneCustomer:  phone.value,
+            customerName:  customer.value,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+        if (browserResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Cập nhật thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+          context.emit('toggle');
+          context.emit('success');
+        }
+      } catch (error) {}
+    };
+
+    const closeDialog = () => {
+      context.emit('toggle');
+    };
+
+    // const errorMoney = [
+    //   (val?: string) => (val && val.trim().length) || 'Vui lòng nhập số tiền',
+    // ];
+
+    // const errorContent = [
+    //   (val?: string) => (val && val.trim().length) || 'Vui lòng nhập nội dung',
+    // ];
+
+    return {
+      //
+      closeDialog,
+      confirmAdd,
+      //
+      money,
+      content,
+      customer,
+      phone,
+      contractTimeFrom,
+      contractTimeTo,
+      email,
+      location,
+      //   errorMoney,
+      //   errorContent,
+    };
+  },
+  emits: ['toggle', 'success'],
+});
+</script>

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,23 +178,34 @@
       >
         <template v-slot:body-cell-action="rowData">
           <q-td style="padding: 0; text-align: center">
-            <q-btn
-              flat
-              round
-              color="primary"
-              icon="mdi-information-outline"
-              @click="detail(rowData.row.id)"
-            >
-              <q-tooltip :offset="[10, 10]">{{
-                $t('listBooking.toolTipMessage')
-              }}</q-tooltip>
-            </q-btn>
+            <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
+                color="primary"
+                icon="mdi-information-outline"
+                @click="detail(rowData.row.id)"
+              >
+                <q-tooltip :offset="[10, 10]">{{
+                  $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' },