style：实现destination delivery功能中部分样式

src/styles/theme.scss

@@ -324,6 +324,8 @@
   --color-steps-unfinished-line: #b5b9bf;
   --color-steps-current-icon-color: #e0a100;
   --color-steps-current-icon-bg: #fff4d1;
+  --color-steps-rejected-bg: #fedcde;
+  --color-steps-approved-bg: #e8fbe4;
   --color-booking-info-linear-bg: linear-gradient(90deg, #c4c9ee 0%, #e8e8ff 49.52%, #bfe1ff 100%);
   --color-process-data-value-bg: #e8ebef;
 
@@ -529,6 +531,8 @@
   --color-steps-unfinished-line: #6a6d73;
   --color-steps-current-icon-color: #e0a100;
   --color-steps-current-icon-bg: #534b30;
+  --color-steps-rejected-bg: #4f353d;
+  --color-steps-approved-bg: #394e44;
   --color-booking-info-linear-bg: linear-gradient(90deg, #636db7 0%, #515195 49.52%, #7b9bc9 100%);
   --color-process-data-value-bg: #4f5760;
 

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

@@ -7,6 +7,7 @@ import dayjs from 'dayjs'
 import { formatTimezone, formatNumber } from '@/utils/tools'
 import BookingDetailDialog from './components/BookingDetailDialog.vue'
 import EmailDialog from './components/EmailDialog.vue'
+import TipsDialog from './components/TipsDialog.vue'
 
 const props = defineProps({
   height: {
@@ -276,6 +277,9 @@ const handleCreate = () => {
   // Handle create new booking logic here
   console.log('Create new booking')
 }
+
+const tipsDialogModel = ref(true)
+
 defineExpose({
   SearchOperationLog
 })
@@ -341,7 +345,11 @@ defineExpose({
           <span style="color: 'red'" class="font_family icon-icon_email_b"> </span>
         </el-button>
         <!-- edit -->
-        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
+        <el-button
+          @click="tipsDialogModel = true"
+          class="action-btn el-button--blue"
+          style="height: 24px; width: 24px"
+        >
           <span style="color: 'red'" class="font_family icon-icon_edit_b"> </span>
         </el-button>
         <!-- confirm -->
@@ -375,6 +383,7 @@ defineExpose({
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
     <BookingDetailDialog ref="bookingDetailDiaRef" />
     <EmailDialog ref="emailDialogRef" />
+    <TipsDialog ref="tipsDialogRef" v-model="tipsDialogModel" type="approve" booking-no="123" />
   </div>
 </template>
 

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

@@ -24,11 +24,17 @@ const stepList: any = ref([
     icon: 'icon_time_b',
     status: 'current'
   },
+  {
+    label: 'Rejected',
+    date: 'Jun-03-2024',
+    icon: 'icon_reject_b',
+    status: 'rejected'
+  },
   {
     label: 'Approved',
-    date: '--',
+    date: 'Jun-03-2024',
     icon: 'icon_confirm_b',
-    status: 'unfinished'
+    status: 'current'
   }
 ])
 

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

@@ -5,7 +5,7 @@ const props = defineProps<{
     label: string
     date?: string
     icon: string
-    status: 'completed' | 'current' | 'unfinished'
+    status: 'completed' | 'current' | 'unfinished' | 'rejected' | 'approved'
   }>
 }>()
 </script>
@@ -19,7 +19,11 @@ const props = defineProps<{
           class="step-icon"
           :class="{
             'step-icon-unfinished': step.status === 'unfinished',
-            'step-icon-current': step.status === 'current'
+            'step-icon-current': step.status === 'current',
+            'step-icon-rejected': step.status === 'rejected',
+            'step-icon-approved':
+              step.label === 'Approved' &&
+              (step.status === 'completed' || step.status === 'current')
           }"
         >
           <span
@@ -34,7 +38,21 @@ const props = defineProps<{
             'step-text-unfinished': step.status === 'unfinished'
           }"
         >
-          <div class="step-title">{{ step.label }}</div>
+          <div class="step-title">
+            {{ step.label }}
+            <el-tooltip
+              trigger="hover"
+              effect="dark"
+              placement="top"
+              content="This is some description information about the pending task, if there is too much content."
+            >
+              <span
+                style="font-size: 12px"
+                v-if="step.status === 'rejected'"
+                class="font_family icon-icon_info_b"
+              ></span>
+            </el-tooltip>
+          </div>
           <div class="step-date">{{ step.date || '--' }}</div>
         </div>
       </div>
@@ -91,6 +109,18 @@ const props = defineProps<{
       color: var(--color-steps-current-icon-color);
     }
   }
+  &.step-icon-rejected {
+    background: var(--color-steps-rejected-bg);
+    span {
+      color: #c9353f;
+    }
+  }
+  &.step-icon-approved {
+    background: var(--color-steps-approved-bg);
+    span {
+      color: #5bb462;
+    }
+  }
 }
 
 .step-text {
@@ -101,6 +131,9 @@ const props = defineProps<{
     .step-title,
     .step-date {
       color: var(--color-steps-unfinished-line);
+      span {
+        color: var(--color-steps-unfinished-line);
+      }
     }
   }
 }
@@ -108,6 +141,9 @@ const props = defineProps<{
 .step-title {
   font-weight: 600;
   color: var(--color-neutral-1);
+  span {
+    color: var(--color-neutral-1);
+  }
 }
 
 .step-date {

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

@@ -1,11 +1,108 @@
 <script setup lang="ts">
-const model = ref(false)
+const props = defineProps<{
+  type: 'approve' | 'reject' | 'cancel'
+  bookingNo: string
+}>()
+const model = defineModel<boolean>({ type: Boolean, default: false })
+
+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 typeList = ref({
+  approve: 'Approve',
+  reject: 'Reject',
+  cancel: 'Cancel'
+})
+
+const isShowRequired = computed(() => {
+  return props.type === 'reject'
+})
+const openDialog = () => {
+  model.value = true
+}
+defineExpose({
+  openDialog
+})
 </script>
 
 <template>
-  <el-dialog v-model="model">
-    <template></template>
+  <el-dialog
+    v-model="model"
+    :show-close="false"
+    title=""
+    width="800px"
+    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>
+    </div>
+    <el-input
+      :autosize="false"
+      type="textarea"
+      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="submit-btn"
+        :class="{
+          'el-button--success': props.type === 'approve',
+          'el-button--danger': props.type === 'reject',
+          'el-button--warning': props.type === 'cancel'
+        }"
+        >{{ typeList[props.type] }} Booking</el-button
+      >
+    </template>
   </el-dialog>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.tips-dialog-title {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 24px;
+  .font_family {
+    margin-right: 4px;
+    color: #f19d38;
+    font-size: 28px;
+  }
+}
+.input-textarea {
+  :deep(.el-textarea__inner) {
+    height: 120px;
+    resize: none;
+    line-height: 22px;
+  }
+}
+
+.cancel-btn {
+  width: 100px;
+  height: 40px;
+}
+.submit-btn {
+  height: 40px;
+}
+</style>
+<style lang="scss">
+.tips-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__footer {
+    padding-top: 2px;
+    border-top: none;
+  }
+}
+</style>