feat: 联调delivery部分接口

src/api/module/Delivery.ts

@@ -274,4 +274,34 @@ export const reviewDliveryBooking = (params: any, config: any) => {
     },
     config
   )
+}
+
+/**
+ * 获取delivery date组件中展示数据
+ */
+export const getDeliveryDateData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'delivery_date_load',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取delivery email部分records
+ */
+export const getEmailRecords = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'destination_delivery_booking',
+      operate: 'email_message_init',
+      ...params
+    },
+    config
+  )
 }

src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -68,6 +69,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/VTag/src/VTag.vue

@@ -11,10 +11,14 @@ interface internalProps {
     | 'Completed'
     | 'Departed'
     | 'Pending Approval'
+    | 'Approved'
+    | 'Rejected'
   large?: boolean
 }
 
 const mappingTable = new Map([
+  ['Approved', 'approved'],
+  ['Rejected', 'rejected'],
   ['Confirmed', 'confirmed'],
   ['Cancelled', 'cancelled'],
   ['Created', 'created'],
@@ -131,6 +135,20 @@ defineProps<internalProps>()
       background-color: var(--color-tag-unfinished-approval);
     }
   }
+  &.v-tag__approved {
+    background-color: var(--color-tag-approved-bg);
+    color: var(--color-tag-approved);
+    .dot {
+      background-color: var(--color-tag-approved);
+    }
+  }
+  &.v-tag__rejected {
+    background-color: var(--color-tag-rejected-bg);
+    color: var(--color-tag-rejected);
+    .dot {
+      background-color: var(--color-tag-rejected);
+    }
+  }
   & + .v-tag {
     margin-left: 8px;
   }

src/styles/theme.scss

@@ -72,9 +72,15 @@
   --color-tag-arrived-bg: #e7faf8;
   --color-tag-completed-bg: #e8fbe4;
   --color-tag-Departed-bg: #d9edfa;
-  --color-tag-unfinished-approval-bg: #fbfbfe;
+  --color-tag-unfinished-approval-bg: #fff4d1;
   --color-tag-unfinished-approval: #e0a100;
 
+  --color-tag-approved-bg: rgb(232, 251, 228);
+  --color-tag-approved: rgb(91, 180, 98);
+
+  --color-tag-rejected-bg: rgba(201, 53, 63,0.2);
+  --color-tag-rejected: rgb(201, 53, 63);
+
   --color-border: #eaebed;
   --color-select-border: #eaebed;
   --border-color-2: #eaebed;
@@ -327,6 +333,7 @@
   --color-steps-current-icon-bg: #fff4d1;
   --color-steps-rejected-bg: #fedcde;
   --color-steps-approved-bg: #e8fbe4;
+  --color-steps-cancelled-bg: #ebeef1;
   --color-booking-info-linear-bg: linear-gradient(90deg, #c4c9ee 0%, #e8e8ff 49.52%, #bfe1ff 100%);
   --color-process-data-value-bg: #e8ebef;
 
@@ -341,6 +348,7 @@
 
   --color-guide-icon-bg: rgba(237, 237, 237, 0.6);
   --color-guide-icon-hover-bg: rgba(237, 237, 237, 0.45);
+  --color--process-data-tips-bg: #e8ebef;
 }
 
 :root.dark {
@@ -536,7 +544,9 @@
     }
   }
 
-  --color-tag-unfinished-approval-bg: #eeeff6;
+  --color-tag-unfinished-approval-bg: rgba(224, 161, 0, 0.2);
+  --color-tag-approved-bg: rgba(91, 180, 98, 0.2);
+  --color-tag-rejected-bg: rgb(255, 220, 222);
 
   --color-card-icon-box-bg: #4f535c;
   --color-card-number-cancelled: #babcc0;
@@ -545,6 +555,8 @@
   --color-steps-current-icon-bg: #534b30;
   --color-steps-rejected-bg: #4f353d;
   --color-steps-approved-bg: #394e44;
+  --color-steps-cancelled: #c2c4c7;
+  --color-steps-cancelled-bg: rgba(240, 241, 243, 0.2);
   --color-booking-info-linear-bg: linear-gradient(90deg, #636db7 0%, #515195 49.52%, #7b9bc9 100%);
   --color-process-data-value-bg: #4f5760;
 
@@ -559,4 +571,5 @@
 
   --color-guide-icon-bg: rgba(237, 237, 237, 0.1);
   --color-guide-icon-hover-bg: rgba(237, 237, 237, 0.15);
+  --color--process-data-tips-bg: #4f5760;
 }

src/views/DestinationDelivery/src/components/DeliveryDate.vue

@@ -36,19 +36,30 @@ watch(
   },
   { immediate: true, deep: true }
 )
-
-const stateDataList = {
-  '2025-06-01': {
-    pending: 3,
-    approved: 3
-  },
-  '2025-05-20': {
-    pending: 2,
-    approved: 1
-  }
+const getDeliveryDateData = () => {
+  $api.getDeliveryDateData().then((res) => {
+    if (res.code === 200) {
+      const data = res.data.data
+      stateDataList.value = data
+    }
+  })
 }
+onMounted(() => {
+  getDeliveryDateData()
+})
+
+const stateDataList = ref({
+  // '2025-06-01': {
+  //   pending: 3,
+  //   approved: 3
+  // },
+  // '2025-05-20': {
+  //   pending: 2,
+  //   approved: 1
+  // }
+})
 const isShowStatus = (date: string) => {
-  return stateDataList[date] ? true : false
+  return stateDataList.value[date] ? true : false
 }
 
 const emit = defineEmits(['DateRangeChange', 'DateChange'])

src/views/DestinationDelivery/src/components/TableView/src/TableView.vue

@@ -60,11 +60,7 @@ const getTableColumns = async () => {
   tableLoadingColumn.value = true
   await $api.getDeliveryBookingTableColumn().then((res: any) => {
     if (res.code === 200) {
-      tableData.value.columns = [
-        { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.TrackingTableColumns)
-      ]
-      console.log('tableData.value.columns', tableData.value.columns)
+      tableData.value.columns = [...handleColumns(res.data.TrackingTableColumns)]
       const index = tableData.value.columns.findIndex((item: any) => item.title === 'Action')
       if (index === -1) {
         tableData.value.columns.push({
@@ -342,8 +338,11 @@ const handleLinkClick = (row: any, column: any) => {
 }
 
 const tipsDialogRef = ref()
-const handleTips = (type: string) => {
-  tipsDialogRef.value.openDialog(type)
+const handleTips = (type: string, row: any) => {
+  tipsDialogRef.value.openDialog(type, row)
+}
+const handleChangeRowState = () => {
+  SearchOperationLog()
 }
 
 defineExpose({
@@ -393,8 +392,8 @@ defineExpose({
         </div>
       </template>
       <!-- action操作的插槽 -->
-      <template #action="{ row }">
-        <!-- view  -->
+      <template #action="{ row, rowIndex }">
+        <!-- view -->
         <el-button
           @click="clickViewBtn(row)"
           class="action-btn el-button--blue"
@@ -404,10 +403,10 @@ defineExpose({
         </el-button>
         <!-- email -->
         <el-button
+          v-if="isEmployeeRole && row.status === 'Approved'"
           @click="clickEmailBtn(row)"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
-          v-if="isEmployeeRole && row.status === 'Approved'"
         >
           <span class="font_family icon-icon_email_b"> </span>
         </el-button>
@@ -422,18 +421,18 @@ defineExpose({
         </el-button>
         <!-- cancel -->
         <el-button
-          @click="handleTips('cancel')"
+          @click="handleTips('cancel', row)"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
           v-if="isEmployeeRole && row.status === 'Pending Approval'"
         >
           <span class="font_family icon-icon_cancelled_b"> </span>
         </el-button>
-        <!-- confirm -->
+        <!-- approve -->
         <el-button
-          v-if="!isEmployeeRole && row.status === 'Pending Approval'"
-          @click="handleTips('confirm')"
+          @click="handleTips('approve', row)"
           class="action-btn el-button--blue"
+          v-if="!isEmployeeRole && row.status === 'Pending Approval'"
           style="height: 24px; width: 24px"
         >
           <span class="font_family icon-icon_confirm_b"> </span>
@@ -441,7 +440,7 @@ defineExpose({
         <!-- reject -->
         <el-button
           v-if="!isEmployeeRole && row.status === 'Pending Approval'"
-          @click="handleTips('reject')"
+          @click="handleTips('reject', row)"
           class="action-btn el-button--blue"
           style="height: 24px; width: 24px"
         >
@@ -483,7 +482,7 @@ defineExpose({
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
     <BookingDetailDialog ref="bookingDetailDiaRef" />
     <EmailDialog ref="emailDialogRef" />
-    <TipsDialog ref="tipsDialogRef" type="reject" booking-no="123" />
+    <TipsDialog ref="tipsDialogRef" @state-change="handleChangeRowState" />
   </div>
 </template>
 

src/views/DestinationDelivery/src/components/TableView/src/components/BookingDetailDialog.vue

@@ -8,24 +8,21 @@ const visible = ref(false)
 const loading = ref(false)
 
 const shipmentInfoTableData = ref([])
+const processList = ref()
+const rowData = ref()
 const openDialog = (row: any) => {
   visible.value = true
   loading.value = true
   $api
     .getDeliveryBookingDialogData({ serial_no: row._serial_no })
     .then((res) => {
-      console.log('res', res)
       const data = res.data.data
       if (data.update_time !== data.create_time && data.status === 'Pending Approval') {
         data.status = 'Modified'
       }
       handleStepData(data.status, data)
-      deliveryInfoData.value = {
-        modeType: data.delivery_mode || '--',
-        deliveryDate: data.delivery_date || '--',
-        deliveryAddress: data.delivery_address || '--',
-        specialRequirements: data.special_requirements || '--'
-      }
+      processList.value = data.operation_log
+      const rowData = data
       shipmentInfoTableData.value = data.shipmentsData || []
     })
     .finally(() => {
@@ -64,42 +61,33 @@ const handleStepData = (status, data) => {
   } else if (status === 'Approved') {
     stepList.value.push({
       label: 'Approved',
-      date: '--',
+      date: data.update_time || '--',
       icon: 'icon_confirm_b',
-      status: 'unfinished'
+      status: ''
     })
   } else if (status === 'Rejected') {
     stepList.value.push({
       label: 'Rejected',
-      date: 'Jun-05-2024',
+      date: data.update_time || '--',
       icon: 'icon_reject_b',
-      status: 'rejected'
+      status: 'rejected',
+      description:
+        'This is some description information about the pending task, if there is too much content.'
     })
   } else if (status === 'Cancelled') {
     stepList.value.push({
       label: 'Cancelled',
-      date: 'Jun-05-2024',
+      date: data.update_time || '--',
       icon: 'icon_cancelled_b',
-      status: 'completed'
+      status: 'cancelled'
     })
   }
 }
-const deliveryInfoData = ref({
-  modeType: '',
-  deliveryDate: '',
-  deliveryAddress: '',
-  specialRequirements: ''
-})
 
 const clearData = () => {
   shipmentInfoTableData.value = []
   stepList.value = []
-  deliveryInfoData.value = {
-    modeType: '',
-    deliveryDate: '',
-    deliveryAddress: '',
-    specialRequirements: ''
-  }
+  rowData.value = {}
 }
 defineExpose({
   openDialog
@@ -121,10 +109,10 @@ defineExpose({
       <DetailStep :stepList="stepList" />
       <div class="booking-info">
         <div class="booking-no">
-          <span class="no">Booking No.B83131200164</span>
-          <v-tag class="tag" type="Pending Approval">Pending Approval</v-tag>
+          <span class="no">Booking No.{{ rowData?.booking_no }}</span>
+          <v-tag class="tag" :type="rowData?.status">{{ rowData?.status }}</v-tag>
         </div>
-        <div class="created-time">Created Time:Jun-01-2024</div>
+        <div class="created-time">{{ formatTimezone(rowData?.created_time) }}</div>
       </div>
       <ShipmentInforTable :data="shipmentInfoTableData" />
       <div class="delivery-information">
@@ -132,35 +120,33 @@ defineExpose({
         <div class="delivery-info">
           <div class="delivery-item inline-flex" style="width: 200px">
             <span class="item-label">Mode Type</span>
-            <span class="item-value">{{ deliveryInfoData.modeType }}</span>
+            <span class="item-value">{{ rowData?.delivery_mode || '--' }}</span>
           </div>
           <div class="delivery-item inline-flex">
             <span class="item-label">Delivery Date</span>
             <span class="item-value">
               <span class="font_family icon-icon_date_b" style="margin-right: 4px"></span>
-              <span style="margin-top: 1px">{{
-                formatTimezone(deliveryInfoData.deliveryDate)
-              }}</span>
+              <span style="margin-top: 1px">{{ formatTimezone(rowData?.delivery_date) }}</span>
             </span>
           </div>
           <div class="delivery-item">
             <span class="item-label">Delivery Address</span>
             <span class="item-value">
               <span class="font_family icon-icon_location_b" style="margin-right: 2px"></span>
-              <span style="margin-top: 1px">{{ deliveryInfoData.deliveryAddress }}</span>
+              <span style="margin-top: 1px">{{ rowData?.delivery_address || '--' }}</span>
             </span>
           </div>
           <div class="delivery-item">
             <span class="item-label">Special Requirements</span>
             <span class="item-value">
               <span class="font_family icon-icon_paragraph_b" style="margin-right: 2px"></span>
-              <span style="margin-top: 1px">{{ deliveryInfoData.specialRequirements }}</span>
+              <span style="margin-top: 1px">{{ rowData?.special_requirements || '--' }}</span>
             </span>
           </div>
         </div>
       </div>
       <el-divider style="margin-top: 8px; margin-bottom: 20px" />
-      <OperationLogProcess />
+      <OperationLogProcess :processList="processList" />
     </div>
   </el-dialog>
 </template>

src/views/DestinationDelivery/src/components/TableView/src/components/DetailStep.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
     label: string
     date?: string
     icon: string
-    status: 'completed' | 'current' | 'unfinished' | 'rejected' | 'approved'
+    status: 'completed' | 'current' | 'unfinished' | 'rejected' | 'approved' | 'cancelled'
     description?: string
   }>
 }>()
@@ -20,12 +20,11 @@ const props = defineProps<{
         <div
           class="step-icon"
           :class="{
+            'step-icon-approved': step.label === 'Approved' && step.status !== 'unfinished',
             'step-icon-unfinished': step.status === 'unfinished',
             'step-icon-current': step.status === 'current',
             'step-icon-rejected': step.status === 'rejected',
-            'step-icon-approved':
-              step.label === 'Approved' &&
-              (step.status === 'completed' || step.status === 'current')
+            'step-icon-cancelled': step.status === 'cancelled'
           }"
         >
           <span
@@ -127,6 +126,12 @@ const props = defineProps<{
       color: #5bb462;
     }
   }
+  &.step-icon-cancelled {
+    background: var(--color-steps-cancelled-bg);
+    span {
+      color: var(--color-steps-cancelled);
+    }
+  }
 }
 
 .step-text {

src/views/DestinationDelivery/src/components/TableView/src/components/EmailDialog.vue

@@ -7,8 +7,20 @@ import { formatTimezone } from '@/utils/tools'
 i18nChangeLanguage('en')
 
 const visible = ref(false)
+const rowData = ref()
 const openDialog = (row) => {
+  emailData.value.email = row.kln_pic
+  $api
+    .getEmailRecords({
+      serial_no: row._serial_no
+    })
+    .then((res) => {
+      if (res.code === 200) {
+        emailRecords.value = res.data.emailRecords
+      }
+    })
   visible.value = true
+  rowData.value = row
 }
 const props = defineProps({
   data: Object
@@ -16,17 +28,10 @@ const props = defineProps({
 
 const emailData = ref({
   email: '',
-  ccEmail: '',
-  serial_no: ''
+  ccEmail: ''
 })
 
-const emailRecords: any = ref([
-  {
-    name: 'John Doe',
-    content: 'This is a test email content.',
-    creatTime: '2024-06-01T16:25:31Z'
-  }
-])
+const emailRecords: any = ref([])
 watch(
   () => props.data,
   (newVal) => {
@@ -34,7 +39,6 @@ watch(
       const email = newVal?.email
       emailData.value.email = email?.email
       emailData.value.ccEmail = email?.cc_email
-      emailData.value.serial_no = newVal?.serial_no
       emailRecords.value = email?.emailRecords
     }
   },
@@ -151,9 +155,10 @@ const sendEmail = () => {
     .saveDliveryBookingEmail({
       email: emailData.value.email,
       communication_cc: emailData.value.ccEmail,
-      serial_no: emailData.value.serial_no,
+      serial_no: rowData.value._serial_no,
       content: html,
-      text
+      text,
+      h_bol: rowData.value.h_bol
     })
     .then((res: any) => {
       if (res.code === 200) {
@@ -166,6 +171,15 @@ const sendEmail = () => {
     })
 }
 
+const clearData = () => {
+  valueHtml.value = ''
+  emailData.value = {
+    email: '',
+    ccEmail: ''
+  }
+  emailRecords.value = []
+}
+
 defineExpose({
   openDialog
 })
@@ -174,11 +188,12 @@ defineExpose({
 <template>
   <el-dialog
     title="Communication"
-    class="booking-detail-email-dialog"
+    class="delivery-email-dialog"
     v-model="visible"
     :close-on-click-modal="false"
     width="1000px"
-    top="15vh"
+    top="12vh"
+    @closed="clearData"
     v-if="visible"
   >
     <div class="email-view">
@@ -259,16 +274,10 @@ defineExpose({
 .email-view {
   display: flex;
   flex-direction: column;
-
   padding: 16px;
   padding-bottom: 0;
   border-radius: 12px;
   background: var(--color-email-bg);
-
-  .show-records {
-    max-height: 370px;
-    overflow: auto;
-  }
 }
 
 :deep(.w-e-text-container) {
@@ -373,3 +382,11 @@ defineExpose({
   }
 }
 </style>
+<style>
+.delivery-email-dialog {
+  .show-records {
+    max-height: 300px;
+    overflow: auto;
+  }
+}
+</style>

src/views/DestinationDelivery/src/components/TableView/src/components/OperationLogProcess.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
-const processList = ref([
+import { formatTimezone } from '@/utils/tools'
+const props = withDefaults(
+  defineProps<{
+    processList: Array<any>
+  }>(),
   {
-    time: 'Jun-01-2024 16:25:31 ',
-    timezone: 'UTC+3',
-    label: 'Submit Booking',
-    createdBy: 'Customer A',
-    tips: '--'
-  },
-  {
-    time: 'May-15-2024 16:25:31 ',
-    timezone: 'UTC+3',
-    label: 'Reject Booking',
-    createdBy: 'John Doe',
-    tips: 'Too early'
+    processList: []
   }
-])
+)
+// const processList = ref([
+//   {
+//     time: 'Jun-01-2024 16:25:31 ',
+//     timezone: 'UTC+3',
+//     label: 'Submit Booking',
+//     createdBy: 'Customer A',
+//     tips: '--'
+//   },
+//   {
+//     time: 'May-15-2024 16:25:31 ',
+//     timezone: 'UTC+3',
+//     label: 'Reject Booking',
+//     createdBy: 'John Doe',
+//     tips: 'Too early'
+//   }
+// ])
 </script>
 
 <template>
@@ -29,11 +38,11 @@ const processList = ref([
             <div class="process-line" v-if="index !== processList.length - 1"></div>
           </div>
           <div class="process-content">
-            <p class="process-time">{{ item.time }}</p>
+            <p class="process-time">{{ formatTimezone(item.time, item.timezone) }}</p>
             <div class="process-data">
               <div class="process-data-label">{{ item.label }}</div>
               <div class="process-data-user">{{ item.createdBy }}</div>
-              <div class="--process-data-tips">{{ item.tips }}</div>
+              <div class="--process-data-tips">{{ item.tips || '--' }}</div>
             </div>
           </div>
         </div>
@@ -118,7 +127,7 @@ const processList = ref([
               padding: 0 8px;
               border-radius: 6px;
               line-height: 28px;
-              background: var(--color---process-data-tips-bg);
+              background: var(--color--process-data-tips-bg);
             }
           }
         }

src/views/DestinationDelivery/src/components/TableView/src/components/TipsDialog.vue

@@ -1,28 +1,60 @@
 <script setup lang="ts">
-const props = defineProps<{
-  type: 'approve' | 'reject' | 'cancel'
-  bookingNo: string
-}>()
-const model = defineModel<boolean>({ type: Boolean, default: false })
-
+const dialogType = ref()
+const bookingNo = ref()
+const dialogVisible = ref(false)
+const serialNo = ref()
 const tipList = ref({
   reject: 'Are you sure you want to Reject Booking ',
   approve: 'Are you sure you want to Approve Booking ',
   cancel: 'Are you sure you want to Cancel Booking '
 })
+const notes = ref()
 
-const typeList = ref({
+const typeList = {
   approve: 'Approve',
   reject: 'Reject',
   cancel: 'Cancel'
-})
+}
 
-const isShowRequired = computed(() => {
-  return props.type === 'reject'
-})
-const openDialog = () => {
-  model.value = true
+const openDialog = (type: string, row: any) => {
+  dialogVisible.value = true
+  bookingNo.value = row.booking_no
+  dialogType.value = type
+  serialNo.value = row._serial_no
 }
+const emit = defineEmits(['stateChange'])
+
+const handleSubmit = () => {
+  if (dialogType.value === 'reject' && !notes.value) {
+    ElMessage.warning('A remark must be filled in for the rejection operation.')
+    return
+  }
+  $api
+    .reviewDliveryBooking({
+      serial_no: serialNo.value,
+      status: typeList[dialogType.value],
+      notes: notes.value
+    })
+    .then((res) => {
+      if (res.code === 200) {
+        dialogVisible.value = false
+        ElMessage.success(`${typeList[dialogType.value]} successfully`)
+        emit('stateChange')
+      } else {
+        ElMessage.error(`${typeList[dialogType.value]} failed, Please try again.`)
+      }
+    })
+    .catch(() => {
+      ElMessage.error(`${typeList[dialogType.value]} failed, Please try again.`)
+    })
+}
+const clearData = () => {
+  bookingNo.value = ''
+  dialogType.value = ''
+  serialNo.value = ''
+  notes.value = ''
+}
+
 defineExpose({
   openDialog
 })
@@ -30,35 +62,38 @@ defineExpose({
 
 <template>
   <el-dialog
-    v-model="model"
+    v-model="dialogVisible"
     :show-close="false"
     title=""
     width="800px"
+    @closed="clearData"
     top="20vh"
     class="tips-dialog"
   >
     <div class="tips-dialog-title">
       <span style="" class="font_family icon-icon_tipsfilled_b"></span>
-      <span style="color: #c9353f" v-if="isShowRequired">*</span>
-      <span> {{ tipList[props.type] + props.bookingNo + '?' }}</span>
+      <span style="color: #c9353f" v-if="dialogType === 'reject'">*</span>
+      <span> {{ tipList[dialogType] + bookingNo + '?' }}</span>
     </div>
     <el-input
       :autosize="false"
       type="textarea"
+      v-model="notes"
       class="input-textarea"
       style="height: 120px"
       placeholder="Input remarks"
     ></el-input>
     <template #footer>
-      <el-button class="cancel-btn" type="default" @click="model = false">Cancel</el-button>
+      <el-button class="cancel-btn" type="default" @click="dialogVisible = false">Cancel</el-button>
       <el-button
         class="submit-btn"
         :class="{
-          'el-button--success': props.type === 'approve',
-          'el-button--danger': props.type === 'reject',
-          'el-button--warning': props.type === 'cancel'
+          'el-button--success': dialogType === 'approve',
+          'el-button--danger': dialogType === 'reject',
+          'el-button--warning': dialogType === 'cancel'
         }"
-        >{{ typeList[props.type] }} Booking</el-button
+        @click="handleSubmit"
+        >{{ typeList[dialogType] }} Booking</el-button
       >
     </template>
   </el-dialog>