ffix: 批量下载重新排版优化

src/views/order/podUs/index.vue

@@ -1050,9 +1050,7 @@
             </div>
           </template>
           <template #failReason="{ row }">
-            <div style="white-space: pre-line">
-              {{ row.failReason }}
-            </div>
+            <span v-html="row.failReason" style="white-space: pre-line"></span>
           </template>
           <template #operate="{ row }">
             <div
@@ -1083,6 +1081,7 @@
                 <ElButton
                   link
                   type="warning"
+                  :loading="reComposingLoadingMap[row.id]"
                   @click="handleReComposingDesign(row)"
                 >
                   重新排版
@@ -1889,7 +1888,7 @@ import { useValue } from '@/utils/hooks/useValue'
 import { showConfirm } from '@/utils/ui'
 import { DocumentCopy, EditPen } from '@element-plus/icons-vue'
 import { Column, ElFormItem } from 'element-plus'
-import { computed, onMounted, ref, nextTick } from 'vue'
+import { computed, onMounted, ref, nextTick, reactive } from 'vue'
 import FastProduction from './FastProduction.vue'
 import { filePath } from '@/api/axios'
 import PodMakeOrder from './PodMakeOrder.vue'
@@ -1945,6 +1944,7 @@ const resultRefs = ref<InstanceType<typeof ResultInfo> | null>(null)
 const confirmDialogShow = ref(false)
 const tifDownloadLoading = ref(false)
 const pngDownloadLoading = ref(false)
+const reComposingLoading = ref(false)
 const isChangeWay = ref(false)
 const confirmData = ref([])
 const logisticsWayData = ref([])
@@ -2164,11 +2164,8 @@ const handleReComposingDesign = async (row: PodUsOrderListData) => {
   } catch {
     return
   }
-  const loading = ElLoading.service({
-    fullscreen: true,
-    text: '操作中...',
-    background: 'rgba(0, 0, 0, 0.3)',
-  })
+  reComposingLoadingMap[row.id] = true
+
   try {
     const res = await batchDownloadRecomposingApi({ id: row.id })
     if (res.code !== 200) return
@@ -2178,7 +2175,7 @@ const handleReComposingDesign = async (row: PodUsOrderListData) => {
   } catch (e) {
     console.error(e)
   } finally {
-    loading.close()
+    reComposingLoadingMap[row.id] = false
   }
 }
 const tableColumns = computed(() => {
@@ -2187,20 +2184,20 @@ const tableColumns = computed(() => {
       {
         label: '批次号',
         prop: 'batchArrangeNum',
-        minWidth: 200,
+        width: 150,
         align: 'center',
       },
       {
         label: '下载状态',
         slot: 'downloadStatus',
-        width: 150,
+        width: 100,
         prop: 'downloadStatus',
         align: 'center',
       },
       {
         label: '订单数量',
         prop: 'productNum',
-        width: 120,
+        width: 100,
         align: 'center',
       },
       {
@@ -2211,27 +2208,27 @@ const tableColumns = computed(() => {
       },
       {
         label: '创建人',
-        width: 200,
+        width: 100,
         prop: 'employeeAccount',
         align: 'center',
       },
       {
         label: '失败原因',
-        width: 250,
+        minWidth: 300,
         prop: 'failReason',
         slot: 'failReason',
         align: 'left',
       },
       {
         label: '创建时间',
-        width: 250,
+        width: 200,
         prop: 'createTime',
         slot: 'createTime',
         align: 'center',
       },
       {
         label: '完成时间',
-        width: 250,
+        width: 200,
         prop: 'finishTime',
         slot: 'finishTime',
         align: 'center',
@@ -2370,7 +2367,6 @@ const onCellStyle = ({ column }: { column: Column }) => {
     column.property === 'time' ||
     column.property === 'innerLabel' ||
     column.property === 'goods' ||
-    column.property === 'operate' ||
     column.property === 'exceptionReason'
   ) {
     return { verticalAlign: 'top' }
@@ -3973,6 +3969,9 @@ function getPlatformImg(code: string) {
   }
   return ''
 }
+
+// 全局 loading 改为每行 loading map
+const reComposingLoadingMap = reactive<{ [key: number]: boolean }>({})
 </script>
 <style lang="scss" scoped>
 .header-filter-form {
@@ -4213,6 +4212,7 @@ function getPlatformImg(code: string) {
 .operate-box-vertical {
   display: flex;
   justify-content: space-around;
+  align-items: center;
   gap: 10px;
 }