feat: 修改Modif Booking 页面

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

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import SelectShipmentsTable from './components/SelectShipmentsTable.vue'
 
-const OperationSearch = ref()
-const filterRef: Ref<HTMLElement | null> = ref(null)
-const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
+const selectVModel = ref('')
+const optionOptions = ref([
+  { key: '1', value: 'option1', label: 'Option 1' },
+  { key: '2', value: 'option2', label: 'Option 2' },
+  { key: '3', value: 'option3', label: 'Option 3' }
+])
+
+const inputVModel = ref('')
 </script>
 <template>
   <div class="modify-booking">
@@ -27,6 +32,60 @@ const containerHeight = useCalculatingHeight(document.documentElement, 290, [fil
           <v-tag class="tag" type="Pending Approval">Pending Approval</v-tag>
         </div>
       </div>
+      <el-divider style="margin: 8px 0" />
+      <SelectShipmentsTable></SelectShipmentsTable>
+      <el-divider style="margin: 8px 0 20px" />
+      <div class="delivery-information">
+        <div class="label">Delivery Information</div>
+        <div class="delivery-info-content">
+          <div class="delivery-address-header">
+            <div class="label">*Delivery Address</div>
+            <div class="operator">
+              <el-button type="default" size="small" class="el-button--pain-theme">
+                <span class="font_family icon-icon_edit_b1" style="margin-right: 4px"></span>
+                <span>Edit</span>
+              </el-button>
+            </div>
+          </div>
+          <div class="delivery-address-content">这是内容</div>
+          <div class="filetr-item mode-type">
+            <div class="label">*Mode Type</div>
+            <el-select v-model="selectVModel" placeholder="请选择">
+              <el-option
+                v-for="item in optionOptions"
+                :key="item.key"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="filetr-item mode-type">
+            <div class="label">*Preferred Delivery Date</div>
+            <el-select v-model="selectVModel" placeholder="请选择">
+              <el-option
+                v-for="item in optionOptions"
+                :key="item.key"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="special-requirements">
+            <div class="label">Special Requirements</div>
+            <div class="tag-list">
+              <div class="tag-item">Tail Lift Required</div>
+              <div class="tag-item">Side Loading</div>
+              <div class="tag-item">Forklift Required</div>
+              <div class="tag-item">Special Equipment</div>
+            </div>
+            <el-input v-model="inputVModel" placeholder="请输入"></el-input>
+          </div>
+          <div class="modification-reason">
+            <div class="label">*Modification Reason</div>
+            <el-input v-model="inputVModel" placeholder="请输入"></el-input>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -78,4 +137,41 @@ const containerHeight = useCalculatingHeight(document.documentElement, 290, [fil
     color: var(--color-neutral-2);
   }
 }
+
+.delivery-information {
+  & > .label {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  .delivery-info-content {
+    padding: 16px;
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    .delivery-address-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & > .label {
+        font-size: 14px;
+        color: var(--color-neutral-2);
+      }
+      & > .operator {
+        display: flex;
+        align-items: center;
+        .el-button--pain-theme {
+          height: 32px;
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+    .delivery-address-content {
+      padding: 12px 12px 8px 8px;
+      border-radius: 12px;
+      background-color: var(--color-share-link-bg);
+    }
+  }
+}
 </style>

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

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
+// import { autoWidth } from '@/utils/table'
+import { useRowClickStyle } from '@/hooks/rowClickStyle'
+import { formatTimezone, formatNumber } from '@/utils/tools'
+
+const props = defineProps({
+  data: Object
+})
+const tableRef = ref<VxeGridInstance | null>(null)
+const tableData = ref<VxeGridProps<any>>({
+  minHeight: 70,
+  border: true,
+  round: true,
+  columns: [],
+  data: [],
+  scrollY: { enabled: true, oSize: 20, gt: 30 },
+  emptyText: ' ',
+  showHeaderOverflow: true,
+  showOverflow: true,
+  headerRowStyle: {
+    backgroundColor: 'var(--color-table-header-bg)'
+  },
+  columnConfig: { resizable: true, useKey: true },
+  rowConfig: { isHover: true }
+})
+
+const handleColumns = (columns: any) => {
+  const newColumns = columns.map((item: any) => {
+    let curColumn: any = {
+      title: item.title,
+      field: item.field,
+      minWidth: 30
+    }
+
+    // 格式化
+    if (item.formatter === 'date' || item.formatter === 'dateTime') {
+      curColumn = {
+        ...curColumn,
+        formatter: ({ cellValue }: any) => formatTimezone(cellValue)
+      }
+    } else if (item.formatter === 'number') {
+      curColumn = {
+        ...curColumn,
+        formatter: ({ cellValue }: any) => formatNumber(Number(cellValue), item?.digits)
+      }
+    }
+    return curColumn
+  })
+  return newColumns
+}
+watch(
+  () => props.data,
+  (newVal) => {
+    const containers = newVal?.containers
+    if (containers && containers.container_column) {
+      tableData.value.columns = handleColumns(containers.container_column)
+      tableData.value.data = containers.container_data
+      // nextTick(() => {
+      //   tableRef.value && autoWidth(tableData.value, tableRef.value)
+      // })
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const tableOriginColumnsField = ref()
+// 获取表格列
+const getTableColumns = async () => {
+  await $api.getOperationTableColumns().then((res: any) => {
+    if (res.code === 200) {
+      tableData.value.columns = [
+        { type: 'checkbox', width: 50, fixed: 'left' },
+        ...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
+    }
+  })
+}
+let searchdata: any = {}
+// 获得表格数据后赋值
+const assignTableData = (data: any) => {
+  tableData.value.data = data.searchData || []
+
+  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' }
+      })
+    }
+  }
+}
+
+// 获取表格数据
+const getTableData = async () => {
+  const rc = -1
+  await $api
+    .SearchOperationLog({
+      cp: 1,
+      ps: 6,
+      rc,
+      ...searchdata
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        assignTableData(res.data)
+      }
+    })
+}
+
+onMounted(() => {
+  Promise.all([getTableColumns(), getTableData()]).finally(() => {})
+})
+// 实现行点击样式
+useRowClickStyle(tableRef)
+</script>
+
+<template>
+  <div class="shipment-table">
+    <div class="label">*Select Shipments</div>
+    <vxe-grid ref="tableRef" v-bind="tableData" height="240">
+      <template #empty>
+        <div class="empty">No data</div>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.shipment-table {
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  .label {
+    margin-bottom: 16px;
+    font-size: 18px;
+    font-weight: 700;
+  }
+}
+</style>