feat: 实现Destination Delivery页面表格和Booking Detail弹窗其中部分样式

src/views/DestinationDelivery/src/DestinationDelivery.vue

@@ -42,7 +42,7 @@ const numberCards = [
   {
     label: 'Total Bookings',
     value: 0,
-    color: '#ed6d00'
+    color: '#2b2f36'
   },
   {
     label: 'Pending Approval',
@@ -220,8 +220,15 @@ const tableRef = ref()
     }
     &.is-active {
       background-color: var(--color-mune-active-bg);
-      .card-label {
-        color: var(--color-theme);
+      .card-label,
+      .card-value {
+        color: var(--color-theme) !important;
+      }
+      .icon-box {
+        background-color: rgba(#ff7500, 0.1);
+        span {
+          color: var(--color-theme);
+        }
       }
     }
 
@@ -230,8 +237,6 @@ const tableRef = ref()
       font-size: 32px;
       font-weight: 700;
     }
-    .icon-box {
-    }
   }
 }
 

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

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+const visible = ref(false)
+
+const openDialog = (row: any) => {
+  visible.value = true
+  console.log(row)
+}
+
+const processList = ref([
+  {
+    id: 1,
+    label: 'Created',
+    time: 'Jun-01-2024',
+    icon: 'icon_submit_b'
+  },
+  {
+    label: 'Pending',
+    time: 'Current',
+    icon: 'icon_time_b'
+  },
+  {
+    label: 'Approved',
+    time: '--',
+    icon: 'icon_confirm_b'
+  }
+])
+
+defineExpose({
+  openDialog
+})
+</script>
+
+<template>
+  <el-dialog title="Booking Detail" v-model="visible" :close-on-click-modal="false" width="800px">
+    <div class="header-process">
+      <div class="process-item" v-for="(item, index) in processList" :key="index">
+        <div class="left-icon-box">
+          <span
+            class="font_family"
+            :class="'icon-' + item.icon"
+            :style="{ transform: item.label === 'Created' ? 'rotate(-65deg)' : 'rotate(0)' }"
+          ></span>
+        </div>
+        <div class="right-info">
+          <div class="process-label">{{ item.label }}</div>
+          <div class="process-time">{{ item.time }}</div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.header-process {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 100px 20px;
+  .process-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .left-icon-box {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: var(--color-neutral-1);
+
+      border-radius: 50%;
+      margin-right: 10px;
+      span {
+        color: var(--color-mode);
+      }
+    }
+    .right-info {
+      .process-label {
+        font-weight: 600;
+        color: var(--color-text);
+      }
+      .process-time {
+        font-size: 12px;
+        color: var(--color-neutral-2);
+      }
+    }
+  }
+}
+</style>

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

@@ -5,6 +5,7 @@ import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
 import { formatTimezone, formatNumber } from '@/utils/tools'
+import BookingDetailDialog from '../../BookingDetailDialog.vue'
 
 const props = defineProps({
   height: {
@@ -61,8 +62,18 @@ const getTableColumns = async () => {
     if (res.code === 200) {
       tableData.value.columns = [
         { type: 'checkbox', width: 50, fixed: 'left' },
-        ...handleColumns(res.data.OperationTableColumns)
+        ...handleColumns(res.data.OperationTableColumns),
+        {}
       ]
+      const index = tableData.value.columns.findIndex((item: any) => item.title === 'Action')
+      if (index !== -1) {
+        tableData.value.columns.push({
+          title: 'Action',
+          fixed: 'right',
+          width: 120,
+          slots: { default: 'action' }
+        })
+      }
       tableOriginColumnsField.value = res.data.OperationTableColumns
     }
   })
@@ -80,15 +91,18 @@ const assignTableData = (data: any) => {
   tableData.value.data = data.searchData || []
   pageInfo.value.total = Number(data.rc) || 0
   tempSearch.value = data.tmp_search
-  // 拥有所有字段的表格
-  setTimeout(() => {
-    allTable.value.columns = handleColumns(tableData.value.columns, 'all')
-    allTable.value.data = data.searchData || []
-    // 为了让导出的表格列宽度自适应
-    nextTick(() => {
-      tableRef.value && autoWidth(tableData.value, tableRef.value)
-    })
-  }, 1000)
+
+  if (tableData.value.columns.length > 0) {
+    const index = tableData.value.columns.findIndex((item: any) => item.title === 'Action')
+    if (index === -1) {
+      tableData.value.columns.push({
+        title: 'Action',
+        fixed: 'right',
+        width: 120,
+        slots: { default: 'action' }
+      })
+    }
+  }
 }
 
 let searchdata: any = {}
@@ -111,7 +125,7 @@ const getTableData = async (isPageChange?: boolean) => {
     .finally(() => {
       selectedTableData.value = []
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTableData.value = false
       })
     })
@@ -134,7 +148,7 @@ const SearchOperationLog = (val: any) => {
     .finally(() => {
       selectedTableData.value = []
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTableData.value = false
       })
     })
@@ -142,7 +156,7 @@ const SearchOperationLog = (val: any) => {
 onMounted(() => {
   Promise.all([getTableColumns(), getTableData(false)]).finally(() => {
     nextTick(() => {
-      // tableRef.value && autoWidth(tableData.value, tableRef.value)
+      tableRef.value && autoWidth(tableData.value, tableRef.value)
     })
   })
 })
@@ -215,19 +229,6 @@ const tableData = ref<VxeGridProps<any>>({
     modes: ['current', 'selected', 'all']
   }
 })
-const allTableRef = ref<VxeGridInstance>()
-const allTable = ref<VxeGridProps<any>>({
-  columns: [],
-  data: [],
-  showHeaderOverflow: true,
-  showOverflow: true,
-  scrollY: { enabled: true, oSize: 5, gt: 2 },
-  scrollX: { enabled: true, gt: 2 },
-  exportConfig: {
-    types: ['csv', 'html', 'txt', 'xlsx'],
-    modes: ['current', 'selected', 'all']
-  }
-})
 
 // 实现行点击样式
 useRowClickStyle(tableRef)
@@ -252,7 +253,7 @@ const handleCustomizeColumns = () => {
 const customizeColumns = async () => {
   await getTableColumns()
   nextTick(() => {
-    tableRef.value && autoWidth(bookingTable.value, tableRef.value)
+    tableRef.value && autoWidth(tableData.value, tableRef.value)
   })
 }
 
@@ -261,6 +262,10 @@ const tableLoadingTableData = ref(false)
 
 const selectedTableData = ref([])
 
+const bookingDetailDiaRef = ref()
+const clickViewBtn = (row: any) => {
+  bookingDetailDiaRef.value.openDialog(row)
+}
 defineExpose({
   SearchOperationLog
 })
@@ -294,8 +299,35 @@ defineExpose({
       <template #empty v-if="!tableLoadingTableData && tableData.data.length === 0">
         <VEmpty> </VEmpty>
       </template>
+      <!-- action操作的插槽 -->
+      <template #action="{ row }">
+        <!-- view  -->
+        <el-button
+          @click="clickViewBtn(row)"
+          class="action-btn el-button--blue"
+          style="height: 24px; width: 24px"
+        >
+          <span style="color: 'red'" class="font_family icon-icon_view_b"> </span>
+        </el-button>
+        <!-- edit -->
+        <el-button 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 -->
+        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
+          <span style="color: 'red'" class="font_family icon-icon_confirm_b"> </span>
+        </el-button>
+        <!-- reject -->
+        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
+          <span style="color: 'red'" class="font_family icon-icon_reject_b"> </span>
+        </el-button>
+        <!-- email -->
+        <el-button class="action-btn el-button--blue" style="height: 24px; width: 24px">
+          <span style="color: 'red'" class="font_family icon-icon_email_b"> </span>
+        </el-button>
+      </template>
     </vxe-grid>
-    <vxe-grid :height="10" ref="allTableRef" class="all-table" v-bind="allTable"> </vxe-grid>
+
     <div class="bottom-pagination">
       <div class="left-total-records">Total {{ formatNumber(pageInfo.total) }}</div>
       <div class="right-pagination">
@@ -314,6 +346,7 @@ defineExpose({
     </div>
 
     <CustomizeColumns @customize="customizeColumns" ref="CustomizeColumnsRef" />
+    <BookingDetailDialog ref="bookingDetailDiaRef" />
   </div>
 </template>
 
@@ -360,4 +393,12 @@ defineExpose({
     width: 20px;
   }
 }
+
+.action-btn {
+  height: 24px;
+  width: 24px;
+  &:hover {
+    background-color: var(--color-btn-action-bg-hover);
+  }
+}
 </style>