update

src/assets/configurations.example.ts

@@ -97,6 +97,7 @@ export enum API_PATHS {
   getListBooking = 'booking',
   getBookingDetail = 'booking/detail',
   getArrayArtist = 'artist/arrayArtist',
+  getListBookingHis= 'booking/waitingCancellation',
   getArrayCust = 'customer/arrayCust',
   getlistMenu = 'web-page/list',
   getDetailMenu = 'web-page/detail',

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

+<template>
+  <div class="row q-col-gutter-sm flex-center q-mt-sm">
+    <!-- <div class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md">
+      {{ $t('listBooking.title') }}
+      <q-separator vertical spaced />
+    </div> -->
+    <q-space></q-space>
+    <!-- <div class="col-2 sreach">
+      <q-select
+        v-model="sreachArtist"
+        :options="artistOptions"
+        option-label="artistName"
+        option-value="id"
+        dense
+        outlined
+        :label="$t('listBooking.titleColumnsTable.artistName')"
+        clearable
+      ></q-select>
+    </div>
+    <div class="col-2 sreach">
+      <q-select
+        v-model="sreachUserName"
+        :options="customerOptions"
+        option-label="fullName"
+        option-value="id"
+        dense
+        outlined
+        :label="$t('listBooking.titleColumnsTable.userName')"
+        clearable
+      ></q-select>
+    </div>
+    <div class="col-2 sreach">
+      <q-select
+        v-model="sreachStatus"
+        :options="ListStatusBooking"
+        option-label="name"
+        option-value="id"
+        dense
+        outlined
+        :label="$t('listBooking.titleColumnsTable.status')"
+        clearable
+      ></q-select>
+    </div>
+    <div class="col-2 sreach">
+      <q-select
+        v-model="sreachPerformStatus"
+        :options="ListPerformStatus"
+        option-label="name"
+        option-value="id"
+        dense
+        outlined
+        :label="$t('listBooking.titleColumnsTable.performStatus')"
+        clearable
+      ></q-select>
+    </div>
+
+    <div class="col-2 sreach">
+      <q-input
+        v-model="date[0]"
+        :label="$t('listBooking.titleColumnsTable.fromTime')"
+        readonly
+        dense
+        outlined
+      >
+        <template v-slot:append>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy
+              ref="qDateProxy"
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date v-model="date[0]" mask="DD/MM/YYYY" no-unset>
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    :label="$t('listBooking.crudActions.cancel')"
+                    color="primary"
+                    flat
+                  ></q-btn>
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+    </div>
+    <div class="col-2 sreach">
+      <q-input
+        v-model="date[1]"
+        :label="$t('listBooking.titleColumnsTable.toTime')"
+        readonly
+        dense
+        outlined
+      >
+        <template v-slot:append>
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy
+              ref="qDateProxy"
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date v-model="date[1]" mask="DD/MM/YYYY" no-unset>
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    :label="$t('listBooking.crudActions.cancel')"
+                    color="primary"
+                    flat
+                  ></q-btn>
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+    </div> -->
+
+    <!-- <div class="col-auto">
+      <q-btn
+        class="q-mr-sm"
+        color="primary"
+        no-caps
+        @click="getListBooking"
+        :label="$t('crudActions.search')"
+        style="width: 100px"
+      >
+      </q-btn>
+    </div> -->
+
+    <div class="col-12 q-mt-sm">
+      <q-table
+        :rows="listBooking"
+        :columns="tableColumns"
+        :no-data-label="$t('emptyData')"
+        row-key="name"
+        separator="cell"
+        :rows-per-page-label="$t('recordPerPage')"
+        :pagination="{
+          rowsPerPage: 0,
+        }"
+        wrap-cells
+        hide-pagination
+        class="sticky-header-table"
+      >
+        <template v-slot:body-cell-action="rowData">
+          <q-td style="padding: 0; text-align: center">
+            <q-btn
+              flat
+              round
+              
+              color="primary"
+              icon="mdi-check-circle-outline"
+              @click="confirmDeleteCustomer(rowData.row.id)"
+            >
+              <q-tooltip :offset="[20, 10]">Xác nhận</q-tooltip>
+            </q-btn>
+            <q-btn
+            
+              flat
+              round
+              size="0.9em"
+              color="primary"
+              icon="mdi-block-helper"
+              @click="confirmRefusedBrowserCustomer(rowData.row.id)"
+            >
+              <q-tooltip>Từ chối</q-tooltip>
+            </q-btn>
+   
+          </q-td>
+        </template>
+        <template v-slot:body-cell-stt="item">
+          <q-td :item="item" style="text-align: center">
+            {{ 1 + item.rowIndex + pageSize * (pageIndex - 1) }}
+          </q-td>
+        </template>
+
+        <template v-slot:body-cell-status="item">
+          <q-td align="center">
+            <template v-for="(data, idx) in ListStatusBooking">
+              <q-chip
+                v-if="item.row.status === data.id"
+                :key="`status-${idx}-${item}`"
+                size="sm"
+                label
+                :color="data.color"
+                >{{ data.name }}</q-chip
+              >
+            </template>
+          </q-td>
+        </template>
+        
+        <template v-slot:body-cell-isArtistCancel="rowData">
+          <q-td>
+            <div align="center">
+              <q-chip
+                v-if="rowData.value === 1"
+            
+              
+                size="sm"
+              >
+                Nghệ sĩ
+              </q-chip>
+
+              <q-chip
+              v-else
+        
+                
+                size="sm"
+              >
+              Khách hàng
+              </q-chip>
+            </div>
+          </q-td>
+        </template>
+        <template v-slot:body-cell-reasonRefuse="item">
+<td>
+         <div>{{item.row.reasonRefuse}}</div>
+</td>
+        </template>
+
+        <template v-slot:body-cell-content="item">
+          <td>
+            <div class="ellipsis-3-lines">
+              {{ !item.row.content ? '' : item.row.content }}
+              <q-tooltip :offset="[10, 10]" max-width="35%">{{
+                !item.row.content ? '' : item.row.content
+              }}</q-tooltip>
+            </div>
+          </td>
+        </template>
+      </q-table>
+    </div>
+    <div class="col-12 q-mt-sm">
+      <Pagination
+        v-model:currentPage="pageIndex"
+        v-model:pageSize="pageSize"
+        :totalPage="totalPage"
+        @update:pageSize="changePageSize"
+        @update:currentPage="getListBooking"
+      />
+
+      <detailBooking
+        v-model:show-dialog="showDialog"
+        :detail-info-booking="detailInfoBooking"
+        @click:CloseBtn="showDialog = false"
+      ></detailBooking>
+
+      <RefusedBrowser
+        :id="idBooking"
+        v-model:open-dialog-refused-browser="openDialogRefusedBrowser"
+        @click:CloseBtn="openDialogRefusedBrowser = false"
+        @editReCustomer="getListBooking"
+      >
+      </RefusedBrowser>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { api, BaseResponseBody } from 'src/boot/axios';
+import { config, API_PATHS } from 'src/assets/configurations.example';
+import RefusedBrowser from '../../components/booking/openDialogRefusedBrowser.vue';
+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 {
+  PaginationResponse,
+  ListBooking,
+  ListArrayArtist,
+  ListArrayCust,
+} from 'src/assets/type';
+import detailBooking from '../../components/detailBooking/index.vue';
+import { Dialog, Notify } from 'quasar';
+import moment from 'moment';
+
+export default defineComponent({
+  components: {
+    detailBooking,
+    Pagination,
+    RefusedBrowser,
+  },
+  setup() {
+    const tableColumns = [
+      {
+        name: 'stt',
+        field: 'stt',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.stt'),
+        headerStyle: 'text-align: center !important; width: 4%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'bookingCode',
+        field: 'bookingRandomCode',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.bookingCode'),
+        headerStyle: 'text-align: center !important; width: 4%',
+        align: 'center',
+        sortable: false,
+      },
+      {
+        name: 'artistName',
+        field: 'artistName',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.artistName'),
+        align: 'left',
+        headerStyle: 'text-align: center !important; width: 9%',
+        sortable: false,
+      },
+      {
+        name: 'userName',
+        field: 'userName',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.userName'),
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'address',
+        field: 'address',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.address'),
+        headerStyle: 'text-align: center !important; width: 13%',
+        align: 'left',
+        sortable: false,
+      },
+      // {
+      //   name: 'content',
+      //   field: 'content',
+      //   required: true,
+      //   label: i18n.global.t('listBooking.titleColumnsTable.content'),
+      //   headerStyle: 'text-align: center !important; width: 13%',
+      //   align: 'left',
+      //   sortable: false,
+      // },
+      {
+        name: 'fromTime',
+        field: 'fromTime',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.fromTime'),
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'toTime',
+        field: 'toTime',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.toTime'),
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+      {
+        name: 'fee',
+        field: 'fee',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.fee'),
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+
+            {
+        name: 'isArtistCancel',
+        field: 'isArtistCancel',
+        required: true,
+        label: 'Người yêu cầu hủy',
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+                  {
+        name: 'reasonRefuse',
+        field: 'reasonRefuse',
+        required: true,
+        label: 'Lý do',
+        headerStyle: 'text-align: center !important; width: 9%',
+        align: 'left',
+        sortable: false,
+      },
+
+      
+      // {
+      //   name: 'favoriteScore',
+      //   field: 'favoriteScore',
+      //   required: true,
+      //   label: i18n.global.t('listBooking.titleColumnsTable.favoriteScore'),
+      //   headerStyle: 'text-align: center !important; width: 7%',
+      //   align: 'center',
+      //   sortable: false,
+      // },
+      {
+        name: 'status',
+        field: 'status',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.status'),
+        headerStyle: 'text-align: center !important; width: 8%',
+        align: 'center',
+        sortable: false,
+      },
+
+
+      {
+        name: 'action',
+        field: 'action',
+        required: true,
+        label: i18n.global.t('listBooking.titleColumnsTable.action'),
+        headerStyle: 'text-align: center !important; width: 13%',
+        align: 'center',
+        sortable: false,
+      },
+    ];
+
+    const ListStatusBooking = ref([
+      { id: 4, name: 'Chờ hủy', color: 'warning' },
+
+    ]);
+
+    const ListPerformStatus = ref([
+      { id: 0, name: 'Chờ nhận', color: 'secondary' },
+      { id: 1, name: 'Đã thực hiện', color: 'info' },
+      { id: 2, name: 'Chưa thực hiện', color: 'warning' },
+      { id: 3, name: 'Hoãn lịch', color: 'warning' },
+      { id: 4, name: 'Hủy lịch', color: 'warning' },
+      { id: 5, name: 'Thay đổi lịch', color: 'secondary' },
+    ]);
+
+    const showDialog = ref(false);
+    const openDialogRefusedBrowser = ref(false);
+    const idBooking: Ref<number | null> = ref(null);
+    const detailInfoBooking: Ref<ListBooking | null> = ref(null);
+    const listBooking: Ref<unknown[]> = ref([]);
+    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 sreachStatus: Ref<
+      { id: number; name: string; color: string } | undefined
+    > = ref(undefined);
+    const sreachPerformStatus: Ref<
+      { id: number; name: string; color: string } | undefined
+    > = ref(undefined);
+    const changePageSize = () => {
+      pageIndex.value = 1;
+      void getListBooking();
+    };
+    const confirmRefusedBrowserCustomer = (id: number) => {
+      idBooking.value = id;
+      openDialogRefusedBrowser.value = true;
+    };
+    const confirmDeleteCustomer = (id: number) => {
+      Dialog.create({
+        title: i18n.global.t(
+          'customer.confirmActionsTitle.confirmDeleteUserTitle'
+        ),
+        message: i18n.global.t('Bạn có chắc muốn xác nhận hủy booking này không?'),
+        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.bookingBrowsing,
+          method: 'POST',
+          data: {
+            id: id,
+            approvalStatus: 1,
+            reason: null,
+          },
+        })) as AxiosResponse<BaseResponseBody<unknown>>;
+
+        if (deleteResult.data.error.code === config.API_RES_CODE.OK.code) {
+          Notify.create({
+            type: 'positive',
+            message: 'Hủy booking thành công',
+            actions: [{ icon: 'close', color: 'white' }],
+          });
+          void getListBooking();
+        }
+      } catch (error) {}
+    };
+
+    const date = ref([
+      moment(new Date()).format('DD/MM/YYYY'),
+      moment(new Date()).add(7, 'days').format('DD/MM/YYYY'),
+    ]);
+    const changeTime = () => {
+      const startTime = Number(
+        moment(date.value[0], 'DD/MM/YYYY').format('YYYYMMDD')
+      );
+      const endTime = Number(
+        moment(date.value[1], 'DD/MM/YYYY').format('YYYYMMDD')
+      );
+      if (startTime > endTime) {
+        date.value = [date.value[1], date.value[0]];
+      }
+    };
+
+    const artistOptions: Ref<ListArrayArtist[] | null> = ref([]);
+    const customerOptions: Ref<ListArrayCust[] | null> = ref([]);
+
+    const getArrayArtist = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayArtist,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayArtist[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        artistOptions.value = response.data.data;
+      }
+    };
+
+    const getArrayCust = async () => {
+      const response = (await api({
+        url: API_PATHS.getArrayCust,
+        method: 'GET',
+        params: {},
+      })) as AxiosResponse<BaseResponseBody<ListArrayCust[]>>;
+      if (response.data.error.code === config.API_RES_CODE.OK.code) {
+        customerOptions.value = response.data.data;
+      }
+    };
+
+    const getListBooking = async () => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getListBookingHis,
+          method: 'GET',
+          params: {
+            pageIndex: pageIndex.value,
+            pageSize: pageSize.value,
+            artistId: sreachArtist.value?.id,
+            custId: sreachUserName.value?.id,
+            status: sreachStatus.value?.id,
+            performStatus: sreachPerformStatus.value?.id,
+            fromTime: moment(date.value[0], 'DD/MM/YYYY').format('DD/MM/YYYY'),
+            toTime: moment(date.value[1], 'DD/MM/YYYY').format('DD/MM/YYYY'),
+          },
+        })) as AxiosResponse<BaseResponseBody<PaginationResponse<ListBooking>>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          listBooking.value = response.data.data.data;
+          totalPage.value = response.data.data.totalPages;
+        }
+      } catch (error) {}
+    };
+
+    const getDetail = async (id: number) => {
+      try {
+        const response = (await api({
+          url: API_PATHS.getBookingDetail,
+          method: 'GET',
+          params: {
+            id: id,
+          },
+        })) as AxiosResponse<BaseResponseBody<ListBooking>>;
+        if (response.data.error.code === config.API_RES_CODE.OK.code) {
+          detailInfoBooking.value = response.data.data;
+          showDialog.value = true;
+        }
+      } catch (error) {}
+    };
+    const detail = (id: number) => {
+      void getDetail(id);
+    };
+
+    // const filterOrganizational = (
+    //   val: string, update: (fn : () => void) => void
+    // ) => {
+    //   if (!val) {
+    //     update(() => {
+    //       organizationalList.value = [...filterArrayOrganizational.value];
+    //     });
+    //     return;
+    //   } else {
+    //     update(() => {
+    //       const needle = val.toLowerCase();
+    //       organizationalList.value = filterArrayOrganizational.value.filter(
+    //         (item: { id: number; name: string }) =>
+    //           item.name.toLowerCase().indexOf(needle) > -1
+    //       );
+    //     });
+    //   }
+    // };
+
+    onMounted(() => {
+      void getListBooking();
+      void getArrayArtist();
+      void getArrayCust();
+    });
+    return {
+      date,
+      idBooking,
+      openDialogRefusedBrowser,
+      changeTime,
+      customerOptions,
+      artistOptions,
+      detailInfoBooking,
+      showDialog,
+      detail,
+      sreachArtist,
+      sreachUserName,
+      listBooking,
+      tableColumns,
+      pageIndex,
+      pageSize,
+      totalPage,
+      changePageSize,
+      getListBooking,
+      ListStatusBooking,
+      ListPerformStatus,
+      sreachStatus,
+      sreachPerformStatus,
+      confirmDeleteCustomer,
+      confirmRefusedBrowserCustomer,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.sreach {
+  width: 14rem;
+}
+</style>

src/router/routes.ts

@@ -36,6 +36,7 @@ export enum Pages {
   bcBK = 'bc-booking',
   DMQ = 'danh-muc-quyen',
   CHLS = 'cau-hinh-live-stream',
+  BookingHuy="danh-sach-booking-huy"
 }
 
 const routes: RouteRecordRaw[] = [
@@ -154,6 +155,11 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/danh-sach-booking-cho-duyet/index.vue'),
         name: Pages.listBookingBrowsing,
       },
+      {
+        path: 'danh-sach-booking-cho-huy',
+        component: () => import('pages/danh-sach-booking-cho-huy/index.vue'),
+        name: Pages.BookingHuy,
+      },
       {
         path: 'cong-viec',
         component: () => import('pages/cong-viec/index.vue'),