feat: 调整manage address弹窗样式以及暗黑模式样式

src/views/DestinationDelivery/src/components/CreateNewBooking/src/CreateNewbooking.vue

@@ -458,6 +458,9 @@ const getInitBookingData = () => {
       }
     })
 }
+const clearManageDialog = () => {
+  ManageAddressList.value = []
+}
 // 查询Shipments
 const SearchShipment = () => {
   let obj = {
@@ -536,6 +539,7 @@ const selectChangeEvent = (val: any, date: any, submitInfo: any) => {
   }
 }
 
+const manageLoading = ref(false)
 // 点击 Address Book
 const handleClickAddress = () => {
   if (!isAddNewAddressVisible.value) {
@@ -545,6 +549,7 @@ const handleClickAddress = () => {
     (item) => item.contact_type !== 'Delete'
   )
   if (a == undefined) {
+    manageLoading.value = true
     $api
       .getAddressBookList({
         ...getAddressListData.value
@@ -558,6 +563,9 @@ const handleClickAddress = () => {
           ManageVisible.value = true
         }
       })
+      .finally(() => {
+        manageLoading.value = false
+      })
   }
 }
 
@@ -1022,51 +1030,71 @@ onMounted(() => {
         :rows="4"
       ></el-input>
     </div>
-    <el-dialog v-model="ManageVisible" width="640" class="ManageDialog" :show-close="false">
-      <div class="manage_empty_address" v-if="ManageAddressList.length == 0">
-        <img :src="AddNewAddress" width="48" style="margin-bottom: 8px" />
-        <el-button
-          :disabled="isNotClickAddress"
-          class="el-button--main"
-          @click="AddNewAddressDelivery"
-        >
-          + Add New Address</el-button
-        >
-      </div>
-      <el-radio-group v-model="Addressradio" style="max-height: 45vh">
-        <el-radio v-for="(item, index) in ManageAddressList" :key="index" :value="index">
-          <div class="addressradio">
-            <div class="radio_top">
-              <div class="radio_title">{{ item.contact_person }}({{ item.contact_number }})</div>
-              <div v-if="item.create_user == 'Online_D_Address'">
-                <el-button @click="handleClickEditAddress(item)" class="el-button--blue"
-                  ><span class="font_family icon-icon_edit_b"></span
-                ></el-button>
-                <el-button @click="handleDeleteAddress(item)" class="el-button--blue"
-                  ><span class="font_family icon-icon_delete_b"></span
-                ></el-button>
-              </div>
-            </div>
-            <div class="radio_content">
-              <div v-if="item.address_1 != null && item.address_1 != ''" class="radio_content_text">
-                {{ item.address_1 }}
-              </div>
-              <div v-if="item.address_2 != null && item.address_2 != ''" class="radio_content_text">
-                {{ item.address_2 }}
-              </div>
-              <div v-if="item.address_3 != null && item.address_3 != ''" class="radio_content_text">
-                {{ item.address_3 }}
-              </div>
-              <div v-if="item.address_4 != null && item.address_4 != ''" class="radio_content_text">
-                {{ item.address_4 }}
+    <el-dialog
+      @closed="clearManageDialog"
+      v-model="ManageVisible"
+      width="640"
+      class="ManageDialog"
+      :show-close="false"
+    >
+      <div v-vloading="manageLoading">
+        <div class="manage_empty_address" v-if="ManageAddressList.length == 0">
+          <img :src="AddNewAddress" width="48" style="margin-bottom: 8px" />
+          <el-button
+            :disabled="isNotClickAddress"
+            class="el-button--main"
+            @click="AddNewAddressDelivery"
+          >
+            + Add New Address</el-button
+          >
+        </div>
+        <el-radio-group v-model="Addressradio" style="max-height: 50vh; overflow: auto">
+          <el-radio v-for="(item, index) in ManageAddressList" :key="index" :value="index">
+            <div class="addressradio">
+              <div class="radio_top">
+                <div class="radio_title">{{ item.contact_person }}({{ item.contact_number }})</div>
+                <div v-if="item.create_user == 'Online_D_Address'">
+                  <el-button @click="handleClickEditAddress(item)" class="el-button--blue"
+                    ><span class="font_family icon-icon_edit_b"></span
+                  ></el-button>
+                  <el-button @click="handleDeleteAddress(item)" class="el-button--blue"
+                    ><span class="font_family icon-icon_delete_b"></span
+                  ></el-button>
+                </div>
               </div>
-              <div class="radio_content_text">
-                {{ item.country }},{{ item.city }},{{ item.postal_code }}
+              <div class="radio_content">
+                <div
+                  v-if="item.address_1 != null && item.address_1 != ''"
+                  class="radio_content_text"
+                >
+                  {{ item.address_1 }}
+                </div>
+                <div
+                  v-if="item.address_2 != null && item.address_2 != ''"
+                  class="radio_content_text"
+                >
+                  {{ item.address_2 }}
+                </div>
+                <div
+                  v-if="item.address_3 != null && item.address_3 != ''"
+                  class="radio_content_text"
+                >
+                  {{ item.address_3 }}
+                </div>
+                <div
+                  v-if="item.address_4 != null && item.address_4 != ''"
+                  class="radio_content_text"
+                >
+                  {{ item.address_4 }}
+                </div>
+                <div class="radio_content_text">
+                  {{ item.country }},{{ item.city }},{{ item.postal_code }}
+                </div>
               </div>
             </div>
-          </div>
-        </el-radio>
-      </el-radio-group>
+          </el-radio>
+        </el-radio-group>
+      </div>
       <template #header>
         <div class="my-header">
           <div class="header_Title">Manage Address</div>
@@ -1593,7 +1621,7 @@ onMounted(() => {
   font-size: 18px;
 }
 .addressradio {
-  background-color: #f8f9fd;
+  background-color: var(--color-prompt-diaolog-bg);
   border-radius: 12px;
   padding: 13px 8px 16px 16px;
 }

src/views/DestinationDelivery/src/components/CreateNewBooking/src/components/NewbookingTable.vue

@@ -31,7 +31,7 @@ const tableData = ref<VxeGridProps<any>>({
     backgroundColor: 'var(--color-table-header-bg)'
   },
   columnConfig: { resizable: true, useKey: true },
-  rowConfig: { isHover: true, isCurrent: true }
+  rowConfig: { isHover: true }
 })
 
 const tableRef = ref<VxeGridInstance | null>(null)