style: 完善Modif Booking 页面

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

@@ -16,13 +16,21 @@ const radioVModel = ref(1)
     <div class="header">
       <span>Modify Booking</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; width: 115px" type="default">
+          <span style="margin-right: 4px" class="font_family icon-icon_return_b"></span>
+          <span style="font-weight: 400">Cancel</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 style="height: 40px; width: 120px" class="el-button--main el-button--pain-theme">
+          <span
+            style="
+              display: inline-block;
+              margin-top: -4px;
+              margin-right: 4px;
+              transform: rotate(-60deg);
+            "
+            class="font_family icon-icon_submit_b"
+          ></span>
+          <span style="font-weight: 400">Submit</span>
         </el-button>
       </div>
     </div>
@@ -91,13 +99,20 @@ const radioVModel = ref(1)
               <div class="tag-item">Special Equipment</div>
             </div>
             <el-input
+              type="textarea"
+              class="input-textarea"
               v-model="inputVModel"
               placeholder="Enter any additional requirements or notes..."
             ></el-input>
           </div>
           <div class="modification-reason">
             <div class="label">*Modification Reason</div>
-            <el-input v-model="inputVModel" placeholder=""></el-input>
+            <el-input
+              class="input-textarea"
+              type="textarea"
+              v-model="inputVModel"
+              placeholder=""
+            ></el-input>
           </div>
         </div>
       </div>
@@ -220,6 +235,13 @@ const radioVModel = ref(1)
     .special-requirements {
       margin: 16px 0;
     }
+    .input-textarea {
+      :deep(.el-textarea__inner) {
+        height: 80px;
+        resize: none;
+        line-height: 22px;
+      }
+    }
     .tag-list {
       margin-top: 6px;
       margin-bottom: 8px;

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

@@ -67,9 +67,13 @@ watch(
   }
 )
 
+const tableLoadingColumn = ref(false)
+const tableLoadingTableData = ref(false)
+
 const tableOriginColumnsField = ref()
 // 获取表格列
 const getTableColumns = async () => {
+  tableLoadingColumn.value = true
   await $api.getOperationTableColumns().then((res: any) => {
     if (res.code === 200) {
       tableData.value.columns = [
@@ -87,6 +91,8 @@ const getTableColumns = async () => {
         })
       }
       tableOriginColumnsField.value = res.data.OperationTableColumns
+
+      tableLoadingColumn.value = false
     }
   })
 }
@@ -111,6 +117,7 @@ const assignTableData = (data: any) => {
 // 获取表格数据
 const getTableData = async () => {
   const rc = -1
+  tableLoadingTableData.value = true
   await $api
     .SearchOperationLog({
       cp: 1,
@@ -123,6 +130,9 @@ const getTableData = async () => {
         assignTableData(res.data)
       }
     })
+    .finally(() => {
+      tableLoadingTableData.value = false
+    })
 }
 
 onMounted(() => {
@@ -135,8 +145,13 @@ useRowClickStyle(tableRef)
 <template>
   <div class="shipment-table">
     <div class="label">*Select Shipments</div>
-    <vxe-grid ref="tableRef" v-bind="tableData" height="240">
-      <template #empty>
+    <vxe-grid
+      ref="tableRef"
+      v-vloading="tableLoadingTableData || tableLoadingColumn"
+      v-bind="tableData"
+      height="240"
+    >
+      <template #empty v-if="!tableLoadingTableData && tableData.data.length === 0">
         <div class="empty">No data</div>
       </template>
     </vxe-grid>