feat: 新增Modif Booking 页面

src/components/VTag/src/VTag.vue

@@ -125,10 +125,10 @@ defineProps<internalProps>()
     }
   }
   &.v-tag__pending-approval {
-    background-color: var(--color-tag-pending-approval-bg);
-    color: var(--color-tag-pending-approval);
+    background-color: var(--color-tag-unfinished-approval-bg);
+    color: var(--color-tag-unfinished-approval);
     .dot {
-      background-color: var(--color-tag-pending-approval);
+      background-color: var(--color-tag-unfinished-approval);
     }
   }
   & + .v-tag {

src/router/index.ts

@@ -147,6 +147,15 @@ const router = createRouter({
           path: '/destination-delivery',
           name: 'Destination Delivery',
           component: () => import('../views/DestinationDelivery')
+        },
+        {
+          path: '/destination-delivery/modify-booking',
+          name: 'Modify Booking',
+          component: () => import('../views/DestinationDelivery/src/components/ModifyBooking'),
+          meta: {
+            breadName: 'Modify Booking',
+            activeMenu: '/destination-delivery'
+          }
         }
       ]
     }

src/stores/modules/breadCrumb.ts

@@ -68,6 +68,19 @@ export const useBreadCrumb = defineStore('breadCrumb', {
             query: toRoute.query
           }
         ]
+      } else if (toRoute.name === 'Modify Booking') {
+        this.routeList = [
+          {
+            label: 'Destination Delivery',
+            path: '/destination-delivery',
+            query: ''
+          },
+          {
+            label: 'Modify Booking',
+            path: '/destination-delivery/modify-booking',
+            query: toRoute.query
+          }
+        ]
       } else if (toRoute.name && whiteList.includes(toRoute.name)) {
         this.routeList.push({
           label: toRoute?.meta?.breadName || toRoute.name,

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -2,7 +2,9 @@
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import TableView from './components/TableView'
 import DeliveryDate from './components/DeliveryDate.vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const OperationSearch = ref()
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 376, [filterRef])
@@ -28,16 +30,6 @@ const userTypeList = [
     value: 'employee'
   }
 ]
-const questionTypeList = [
-  {
-    label: 'Predefined Question',
-    value: 'predefinedQuestion'
-  },
-  {
-    label: 'free text',
-    value: 'freeText'
-  }
-]
 
 const numberCards = [
   {
@@ -87,6 +79,11 @@ const handleCreate = () => {
   // Handle create new booking logic here
 }
 
+const handleTest = () => {
+  // Handle test logic here
+  router.push({ name: 'Modify Booking' })
+}
+
 const DateStart = ref([])
 const tableRef = ref()
 </script>
@@ -107,6 +104,8 @@ const tableRef = ref()
           <span style="margin-right: 4px" class="font_family icon-icon_add_b"></span>
           <span style="font-weight: 400">Create New Booking</span>
         </el-button>
+
+        <el-button @click="handleTest">测试</el-button>
       </div>
     </div>
     <div class="display">

src/views/DestinationDelivery/src/components/ModifyBooking/index.ts

@@ -0,0 +1 @@
+export { default } from './src/ModifyBooking.vue'

src/views/DestinationDelivery/src/components/ModifyBooking/src/ModifyBooking.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+
+const OperationSearch = ref()
+const filterRef: Ref<HTMLElement | null> = ref(null)
+const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
+</script>
+<template>
+  <div class="modify-booking">
+    <div class="header">
+      <span>Chat Log</span>
+      <div class="operator">
+        <el-button style="height: 40px" type="default">
+          <span style="margin-right: 4px" class="font_family icon-icon_filter_b1"></span>
+          <span style="font-weight: 400">Configurations</span></el-button
+        >
+        <el-button style="height: 40px" class="el-button--main el-button--pain-theme">
+          <span style="margin-right: 4px" class="font_family icon-icon_add_b"></span>
+          <span style="font-weight: 400">Create New Booking</span>
+        </el-button>
+      </div>
+    </div>
+    <div class="content">
+      <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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.modify-booking {
+  position: relative;
+  background-color: var(--color-mode);
+}
+.header {
+  display: flex;
+  height: 68px;
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-6);
+  font-weight: 700;
+  padding: 0 24px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content {
+  padding: 16px 24px 48px;
+}
+
+.booking-info {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 16px;
+  border-radius: 12px;
+  background-image: var(--color-booking-info-linear-bg);
+
+  .booking-no {
+    display: flex;
+    align-items: center;
+    .no {
+      margin-top: 2px;
+      font-size: 18px;
+      font-weight: 700;
+      line-height: 21px;
+    }
+    .tag {
+      margin-left: 8px;
+    }
+  }
+  .created-time {
+    margin-top: 8px;
+    font-size: 12px;
+    color: var(--color-neutral-2);
+  }
+}
+</style>

src/views/Tracking/src/components/TrackingTable/src/components/VGMView.vue

@@ -61,7 +61,7 @@ const generalInfo = ref({
 const tableRef = ref<VxeGridInstance | null>(null)
 const tableData = ref<VxeGridProps<any>>({
   minHeight: 70,
-  height: '330',
+  height: '390',
   border: true,
   round: true,
   columns: [],