框架重构

2 days ago · 203075c55b
parent 658979f6ab
commit 203075c55b
11 changed files with 316 additions and 286 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
    />
    <title><%= title %></title>
    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_boclsb2vb14.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3756681_wqiwqo0ahpj.css" />
  </head>
  <body>
    <script>
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/src/components/Basic/src/BasicArrow.vue
@ -1,15 +1,15 @@
 <!--
- * @Author: Vben
- * @Description: Arrow component with animation
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-07-17 08:39:50
 -->
 <template>
  <span :class="getClass">
-    <Icon icon="ion:chevron-forward" style="font-size: 12px;" />
+    <span class="iconfont icon-zhankaishouqi-xiao-danse"></span>
  </span>
 </template>
 <script lang="ts" setup>
  import { computed } from 'vue'
-  import { Icon } from '/@/components/Icon'
  import { useDesign } from '/@/hooks/web/useDesign'

  const props = defineProps({
@ -49,16 +49,17 @@
 </script>
 <style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-basic-arrow';
-
  .@{prefix-cls} {
    display: inline-block;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s ease 0.1s;
    transform-origin: center center;
-
+    .icon-zhankaishouqi-xiao-danse {
+      margin: 0;
+    }
    &--active {
-      transform: rotate(90deg);
+      transform: rotate(180deg);
    }

    &.inset {
@ -66,15 +67,15 @@
    }

    &.up {
-      transform: rotate(-90deg);
+      transform: rotate(-0deg);
    }

    &.down {
-      transform: rotate(90deg);
+      transform: rotate(180deg);
    }

    &.up.@{prefix-cls}--active {
-      transform: rotate(90deg);
+      transform: rotate(180deg);
    }

    &.down.@{prefix-cls}--active {
--- a/src/components/Form/src/components/FormAction.vue
+++ b/src/components/Form/src/components/FormAction.vue
@ -26,23 +26,24 @@
        <slot name="advanceBefore"></slot>
        <a-button
          v-if="showAdvancedButton && !hideAdvanceBtn"
-          type="link"
+          :class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
          size="small"
          @click="toggleAdvanced"
        >
-          <BasicArrow :style="{color: '#257AFA'}" :expand="!isAdvanced" up /> 
-          <span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span>
+          <BasicArrow :expand="!isAdvanced" up /> 
+          <!-- <span id="formFold" style="margin-left: 3px;">{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}</span> -->
        </a-button>
        <slot name="advanceAfter"></slot>
        <slot name="resetBefore"></slot>
        <Button
+          :class="{'ds-tb-form-tg-h': getDarkMode == 'black', 'ds-tb-form-tg-l': getDarkMode == 'blue', 'ds-tb-form-tg-b': getDarkMode == 'white'}"
          v-if="showResetButton"
-          type="default"
-          class="mr-2"
+          size="small"
          v-bind="getResetBtnOptions"
          @click="resetAction"
        >
-          {{ getResetBtnOptions.text }}
+          <span class="iconfont icon-zhongzhi-xiao-danse"></span>
+          <!-- {{ getResetBtnOptions.text }} -->
        </Button>
        <!-- <slot name="submitBefore"></slot> -->

@ -75,7 +76,7 @@
  import { useI18n } from '/@/hooks/web/useI18n'
  import { propTypes } from '/@/utils/propTypes'
  import AdvancedSearch from './AdvancedSearch.vue'
-
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting'
  type ButtonOptions = Partial<ButtonProps> & { text: string }

  export default defineComponent({
@ -180,10 +181,11 @@
        }
        emit('toggle-advanced')
      }
-
+      const { getDarkMode } = useRootSetting()
      return {
        t,
        actionColOpt,
+        getDarkMode,
        getResetBtnOptions,
        getSubmitBtnOptions,
        toggleAdvanced,
@ -197,7 +199,10 @@
 </script>

 <style scoped>
-#formFold {
-  color: #257afa!important;
-}
+  .icon-zhongzhi-xiao-danse {
+    margin: 0;
+  }
+  .ds-tb-form-tg-h {
+    
+  }
 </style>
--- a/src/components/SimpleMenu/src/components/menu.less
+++ b/src/components/SimpleMenu/src/components/menu.less
@ -183,9 +183,10 @@
      padding-left: 0px!important;
    }
    &-vertical &-item-active &-submenu-title {
-      .light-border();
      font-weight: 700;
      color: @primary-color;
+      border-radius: 4px;
+      background: rgba(255, 255, 255, 0.15)!important;
      // background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(217, 232, 255, 1) 100%);
    }
    &-vertical .@{menu-prefix-cls} {
--- a/src/components/SimpleMenu/src/index.less
+++ b/src/components/SimpleMenu/src/index.less
@ -6,6 +6,8 @@
    background-color: @sider-dark-bg-color;
    > .@{prefix-cls}-submenu-title {
      background-color: @sider-dark-bg-color;
+      font-size: 14px;
+      color: #ffffff;
    }
  }
  .ant-col {
@ -14,6 +16,7 @@
  &-dark&-vertical .@{simple-prefix-cls}__children,
  &-dark&-popup .@{simple-prefix-cls}__children {
    height: 30px;
+    color: rgba(255, 255, 255, 0.5);
    // background-color: @sider-dark-lighten-bg-color;
    > .@{prefix-cls}-submenu-title {
      // background-color: @sider-dark-lighten-bg-color;
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@ -34,7 +34,7 @@
        show-overflow
        show-header-overflow
        show-footer-overflow
-        :min-height="tableHeightRef + 35"
+        :min-height="tableHeightRef + 36"
        :height="tableHeightRef + 35"
        :row-config="{ isCurrent: true, isHover: true }"
        :column-config="{ resizable: true }"
@ -104,7 +104,12 @@
      </Table>
      <slot name="right" class="right" ></slot>
    </div>
-    <Pagination v-if="getBindValues.tableComponent === 'vxe'" v-bind="getBindValues.pagination" @change="pageChange" @showSizeChange="onShowSizeChange" />
+    <Pagination
+      v-if="getBindValues.tableComponent === 'vxe'"
+      v-bind="getBindValues.pagination"
+      @change="pageChange"
+      @showSizeChange="onShowSizeChange"
+    />
  </div>
 </template>
 <script lang="ts">
@ -581,7 +586,7 @@ export default defineComponent({
    .ant-form {
      width: 100%;
      padding: 10px 8px 10px;
-      background-color: #F5F9FC;
+      background-color: #F0F2F5;
    }
  }

@ -672,8 +677,9 @@ export default defineComponent({
  color: #257afa!important;
 }
 .vxe-cell--sort {
-  font-size: 0.8em!important;
-  height: 1.5em!important;
+  font-size: 0.7em!important;
+  height: 1.3em!important;
+  margin-left: 3px;
 }
 .vxe-header--row {
  background: #f0f4fa!important;
--- a/src/design/ant/pagination.less
+++ b/src/design/ant/pagination.less
@ -5,19 +5,17 @@ html[data-theme='dark'] {
      .ant-pagination-next,
      .ant-pagination-item {
        background-color: rgb(255 255 255 / 4%) !important;
-
        a {
          color: #8b949e !important;
        }
      }
-
      .ant-select-arrow {
        color: @text-color-secondary !important;
      }

      .ant-pagination-item-active {
        background-color: @primary-color !important;
-        border: none;
+        border: 1px solid @primary-color;
        border-radius: none !important;

        a {
@ -65,20 +63,20 @@ html[data-theme='dark'] {
    }

    .ant-pagination-item-active {
-      // background-color: @primary-color !important;
-      border: none;
-      border-radius: none !important;
-
+      border: 1px solid @primary-color;
+      color: @primary-color;
      a {
-        color: rgba(70, 145, 255, 1) !important;
+        color: @primary-color!important;
      }
    }

    .ant-pagination-options {
      padding-right: 20px;
+      position: relative;
+      top: -2.5px;
      .ant-select-selector, .ant-input-number-input-wrap {
-        height: 20px!important;
-        min-height: 20px!important;
+        height: 26px!important;
+        min-height: 26px!important;
      }
      margin-left: 12px;
      .ant-select-selector {
@ -93,7 +91,7 @@ html[data-theme='dark'] {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 1px;
-          line-height: 20px !important;
+          line-height: 26px !important;
          color: rgba(122, 135, 152, 1);
        }
      }
@ -103,17 +101,16 @@ html[data-theme='dark'] {
    }

    .ant-pagination-options-quick-jumper input {
-      height: 20px!important;
+      height: 26px!important;
      margin: 3px 6px;
      border: none !important;
      text-align: center;
      border-radius: 4px;
      background: rgba(240, 244, 250, 1);
-      line-height: 22px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 1px;
-      line-height: 20px !important;
+      line-height: 26px !important;
      color: rgba(122, 135, 152, 1);
    }

--- a/src/design/ant/table.less
+++ b/src/design/ant/table.less
@ -1,12 +1,28 @@
 // 列表页面表单和表格的整体样式管理
 .ds-table, .ds-mini-table {
-  .table-wrapper {
-    padding-left: 20px;
-  }
+  border: 1px solid #CCD6DF;
+  border-radius: 6px;
+  padding: 20px 20px 0!important;
+  height: auto!important;
 }
 .ds-table, .ds-table-detail, .ds-mini-table, .ds-mini-table-detail {
+  .vxe-header--column {
+    font-weight: 400;
+    color: #121826;
+    background-color: #F0F2F5;
+    .vxe-cell--sort {
+      line-height: 1.2em;
+      .sort--active {
+        color: @primary-color;
+      }
+      i {
+        font-size: 0.8em;
+      }
+    }
+  }
  .ant-form {
-    padding: 10px 19px 1px!important;
+    padding: 10px 20px 11px!important;
+    border-radius: 6px;
    .ant-btn {
      height: 26px;
      margin: 0 0 0px 10px;
@ -58,7 +74,7 @@
    }
  }
  .ant-pagination {
-    margin: 2px 0 3px!important;
+    margin: 10px 0 11px!important;
    font-size: 12px;
  }
  .ant-pagination-total-text {
--- a/src/design/public.less
+++ b/src/design/public.less
@ -193,6 +193,9 @@ h5 {
 .pl0 {
  padding-left: 0 !important;
 }
+.p20 {
+  padding: 20px;
+}
 // 表格状态使用
 .ds-green-tag,
 .ds-blue-tag,
--- a/src/views/operation/seaexport/changeConfig/index.vue
+++ b/src/views/operation/seaexport/changeConfig/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p20">
    <BasicTable class="ds-table" @register="registerTable">
      <template #tableTitle>
      </template>
@ -120,7 +120,7 @@
 </template>
 <script lang="ts" setup>
  import { onMounted } from 'vue'
-  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { BasicTable, useTable } from '/@/components/Table'
  import { GetSeaExportRefundList } from './api'
  import { formatParams } from '/@/hooks/web/common'
  import { columns, searchFormSchema } from '../columns'
@ -151,7 +151,9 @@
    bordered: true,
    showIndexColumn: true,
    canResize: true,
-    resizeHeightOffset: 15,
+    resizeHeightOffset: 45,
+    tableComponent: 'vxe',
+    autoHeight: window.innerHeight - 330.5
    // actionColumn: {
    //   width: 80,
    //   title: '操作',
--- a/src/views/operation/seaexport/index.vue
+++ b/src/views/operation/seaexport/index.vue
@ -1,244 +1,243 @@
 <template>
  <div class="ds-sea-export-table">
-    <BasicTable class="ds-table" @register="registerTable" @rowDbClick="handledbclick">
-      <template #tableTitle>
-        <div>
-          <TableActionBar :selectRow="getVxeSelectRows" :reload="reload">
-            <tableActionBarRight :selectRow="getVxeSelectRows" :reload="reload"></tableActionBarRight>
-            <Divider type="vertical" style="margin-top: 11px; background-color: #CED5D9;" />
-          </TableActionBar>
-        </div>
-      </template>
-      <template v-slot:bodyCell="{ column, record }">
-        <!-- 订单状态 -->
-        <template v-if="column.dataIndex == 'businessStatusName'">
-          <span v-if="record.businessStatusName == '已提交'" class="TIJIAO">{{ record.businessStatusName }}</span>
-          <span v-else-if="record.businessStatusName == '已审单'" class="YSDAN">{{ record.businessStatusName }}</span>
-          <span v-else-if="record.businessStatusName == '已放单'" class="YFD">{{ record.businessStatusName }}</span>
-          <span v-else-if="record.businessStatusName == '已放舱'" class="YFC">{{ record.businessStatusName }}</span>
-          <span v-else-if="record.businessStatusName == '已收到BC'" class="YSDBC">{{ record.businessStatusName }}</span>
-          <span v-else-if="record.businessStatusName == '已订舱'" class="YDC">{{ record.businessStatusName }}</span>
-          <span v-else class="WTJ">{{ record.businessStatusName || '未提交' }}</span>
-        </template>
-        <!-- 委托编号 -->
-        <template v-if="column.dataIndex == 'customerNo'">
-          <div class="customerNo">
-            <span v-if="record.customerNo" @click="FnCopy(record.customerNo)" class="iconfont icon-fuzhi3"></span>
-            <span>{{ record.customerNo }}</span>
-          </div>
-        </template>
-        <!-- 应收费用 -->
-        <template v-if="column.dataIndex == 'arFeeStatus'">
-          <span v-if="record.arFeeStatus == 0" class="ds-green-tag">
-            {{ record.arFeeStatusName }}</span>
-          <span v-else-if="record.arFeeStatus == 1" class="ds-blue-tag">{{
-            record.arFeeStatusName
-          }}</span>
-          <span v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" class="ds-orange-tag">{{
-            record.arFeeStatusName
-          }}</span>
-          <span v-else-if="/^7|8$/.test(record.arFeeStatus)" class="ds-red-tag">{{
-            record.arFeeStatusName
-          }}</span>
-          <span v-else class="ds-purple-tag">{{ record.arFeeStatusName }}</span>
-        </template>
-        <!-- 应付费用 -->
-        <template v-if="column.dataIndex == 'apFeeStatus'">
-          <span v-if="record.apFeeStatus == 0" class="ds-green-tag">{{
-            record.apFeeStatusName
-          }}</span>
-          <span v-else-if="record.apFeeStatus == 1" class="ds-blue-tag">{{
-            record.apFeeStatusName
-          }}</span>
-          <span v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" class="ds-orange-tag">{{
-            record.apFeeStatusName
-          }}</span>
-          <span v-else-if="/^7|8$/.test(record.apFeeStatus)" class="ds-red-tag">{{
-            record.apFeeStatusName
-          }}</span>
-          <span v-else class="ds-purple-tag">{{ record.apFeeStatusName }}</span>
-        </template>
-        <!-- 主题单号 -->
-        <template v-if="column.dataIndex == 'mblno'">
-          <div class="mblno">
-            <span v-if="record.mblno" @click="FnCopy(record.mblno)" class="iconfont icon-fuzhi3"></span>
-            <!-- <span @click="editColumns(record.mblno)">{{ record.mblno }}</span> -->
-            <span>{{ record.mblno }}</span>
-          </div>
-        </template>
-        <!-- 应收开票 -->
-        <template v-if="column.dataIndex == 'arInvoiceStatus'">
-          <a-tooltip>
-            <template #title>{{ record.arInvoiceStatusName }}</template>
-            <i v-if="record.arInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
-            <i v-else-if="record.arInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
-            <i v-else class="iconfont icon-chahao"></i>
-          </a-tooltip>
-        </template>
-        <!-- 应付开票 -->
-        <template v-if="column.dataIndex == 'apInvoiceStatus'">
-          <a-tooltip>
-            <template #title>{{ record.apInvoiceStatusName }}</template>
-            <i v-if="record.apInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
-            <i v-else-if="record.apInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
-            <i v-else class="iconfont icon-chahao"></i>
-          </a-tooltip>
-        </template>
-        <!-- 应收对账 -->
-        <template v-if="column.dataIndex == 'arCheckStatus'">
-          <a-tooltip>
-            <template #title>{{ record.arCheckStatusName }}</template>
-            <i v-if="record.arCheckStatus == 2" class="iconfont icon-bingtu3"></i>
-            <i v-else-if="record.arCheckStatus == 1" class="iconfont icon-duihao1"></i>
-            <i v-else class="iconfont icon-chahao"></i>
-          </a-tooltip>
-        </template>
-        <!-- 业务锁定 -->
-        <template v-if="column.dataIndex == 'isBusinessLocking'">
-          <span v-if="record.isBusinessLocking">
-            <i class="iconfont icon-locksuo"></i>
-          </span>
-          <span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
-        </template>
-        <!-- 费用锁定 -->
-        <template v-if="column.dataIndex == 'isFeeLocking'">
-          <span v-if="record.isFeeLocking">
-            <i class="iconfont icon-locksuo"></i>
-          </span>
-          <span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
-        </template>
-        <!-- 运踪 -->
-        <template v-if="column.dataIndex == 'bookStatus'">
+    <div class="ds-table">
+      <BasicTable @register="registerTable" @rowDbClick="handledbclick">
+        <template #tableTitle>
          <div>
-            <span v-if="record.isBookingYZ !== '0'" @click="checkBookStatus(record.id)" style="cursor: pointer; color: rgb(7, 231, 56);"
-              class="iconfont icon-refresh-1-copy"></span>
-            <span v-for="(item, index) in record.bookingStatus" :key="item.id">
-              <a-tooltip placement="top" v-if="item.statusTime">
-                <template #title>{{ item.statusTime }}</template>
-                <span @click="handleGetWebDataYZ(record, item.statusCode)" :class="{ yzActive: item.isChecked }">
-                  {{ item.statusName }}
-                </span>
-              </a-tooltip>
-              <span style="cursor: pointer" @click="handleGetWebDataYZ(record, record.statusCode)"
-                :class="{ active: item.isChecked }" v-else>{{ item.statusName }}</span>
-              <span v-if="index != record.bookingStatus?.length - 1">-</span>
-            </span>
+            <TableActionBar :selectRow="getVxeSelectRows" :reload="reload">
+              <tableActionBarRight :selectRow="getVxeSelectRows" :reload="reload"></tableActionBarRight>
+              <Divider type="vertical" style="margin-top: 11px; background-color: #CED5D9;" />
+            </TableActionBar>
          </div>
        </template>
-        <!-- 提箱返场 -->
-        <template v-if="column.dataIndex == 'statusLog'">
-          <div v-if="record.statusLog" class="txfc">
-            <div >
-              <div class="billtrace-btn1 txfc" style="display: flex; align-items: center">
-                <i style="cursor: pointer; color: rgb(7, 231, 56); margin-right: 5px"
-                  @click="handleRefshYard(record.id)" class="iconfont icon-refresh-1-copy"></i>
-                <a-popover v-if="record.statusLog.length > 0">
-                  <template #content>
-                    <div>
-                      <span class="txfcSpan" style="width: 120px">箱号</span>
-                      <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">提箱</span>
-                      <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">返场</span>
-                    </div>
-                    <div v-for="(item, index) in record.statusLog" :key="index">
-                      <span class="txfcSpan" style="width: 120px">{{ item.cntrno }}</span>
-                      <span class="txfcSpan">{{ item.txOpTime }}</span>
-                      <span class="txfcSpan">{{ item.fcOpTime }}</span>
-                    </div>
-                  </template>
-                  <span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].txOpTime }">
-                    提箱
-                  </span>
-                  <span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].fcOpTime }">
-                    返场
+        <template v-slot:bodyCell="{ column, record }">
+          <!-- 订单状态 -->
+          <template v-if="column.dataIndex == 'businessStatusName'">
+            <span v-if="record.businessStatusName == '已提交'" class="TIJIAO">{{ record.businessStatusName }}</span>
+            <span v-else-if="record.businessStatusName == '已审单'" class="YSDAN">{{ record.businessStatusName }}</span>
+            <span v-else-if="record.businessStatusName == '已放单'" class="YFD">{{ record.businessStatusName }}</span>
+            <span v-else-if="record.businessStatusName == '已放舱'" class="YFC">{{ record.businessStatusName }}</span>
+            <span v-else-if="record.businessStatusName == '已收到BC'" class="YSDBC">{{ record.businessStatusName }}</span>
+            <span v-else-if="record.businessStatusName == '已订舱'" class="YDC">{{ record.businessStatusName }}</span>
+            <span v-else class="WTJ">{{ record.businessStatusName || '未提交' }}</span>
+          </template>
+          <!-- 委托编号 -->
+          <template v-if="column.dataIndex == 'customerNo'">
+            <div class="customerNo">
+              <span v-if="record.customerNo" @click="FnCopy(record.customerNo)" class="iconfont icon-fuzhi3"></span>
+              <span>{{ record.customerNo }}</span>
+            </div>
+          </template>
+          <!-- 应收费用 -->
+          <template v-if="column.dataIndex == 'arFeeStatus'">
+            <span v-if="record.arFeeStatus == 0" class="ds-green-tag">
+              {{ record.arFeeStatusName }}</span>
+            <span v-else-if="record.arFeeStatus == 1" class="ds-blue-tag">{{
+              record.arFeeStatusName
+            }}</span>
+            <span v-else-if="/^2|3|4|5|6$/.test(record.arFeeStatus)" class="ds-orange-tag">{{
+              record.arFeeStatusName
+            }}</span>
+            <span v-else-if="/^7|8$/.test(record.arFeeStatus)" class="ds-red-tag">{{
+              record.arFeeStatusName
+            }}</span>
+            <span v-else class="ds-purple-tag">{{ record.arFeeStatusName }}</span>
+          </template>
+          <!-- 应付费用 -->
+          <template v-if="column.dataIndex == 'apFeeStatus'">
+            <span v-if="record.apFeeStatus == 0" class="ds-green-tag">{{
+              record.apFeeStatusName
+            }}</span>
+            <span v-else-if="record.apFeeStatus == 1" class="ds-blue-tag">{{
+              record.apFeeStatusName
+            }}</span>
+            <span v-else-if="/^2|3|4|5|6$/.test(record.apFeeStatus)" class="ds-orange-tag">{{
+              record.apFeeStatusName
+            }}</span>
+            <span v-else-if="/^7|8$/.test(record.apFeeStatus)" class="ds-red-tag">{{
+              record.apFeeStatusName
+            }}</span>
+            <span v-else class="ds-purple-tag">{{ record.apFeeStatusName }}</span>
+          </template>
+          <!-- 主题单号 -->
+          <template v-if="column.dataIndex == 'mblno'">
+            <div class="mblno">
+              <span v-if="record.mblno" @click="FnCopy(record.mblno)" class="iconfont icon-fuzhi3"></span>
+              <!-- <span @click="editColumns(record.mblno)">{{ record.mblno }}</span> -->
+              <span>{{ record.mblno }}</span>
+            </div>
+          </template>
+          <!-- 应收开票 -->
+          <template v-if="column.dataIndex == 'arInvoiceStatus'">
+            <a-tooltip>
+              <template #title>{{ record.arInvoiceStatusName }}</template>
+              <i v-if="record.arInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
+              <i v-else-if="record.arInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
+              <i v-else class="iconfont icon-chahao"></i>
+            </a-tooltip>
+          </template>
+          <!-- 应付开票 -->
+          <template v-if="column.dataIndex == 'apInvoiceStatus'">
+            <a-tooltip>
+              <template #title>{{ record.apInvoiceStatusName }}</template>
+              <i v-if="record.apInvoiceStatus == 2" class="iconfont icon-bingtu3"></i>
+              <i v-else-if="record.apInvoiceStatus == 1" class="iconfont icon-duihao1"></i>
+              <i v-else class="iconfont icon-chahao"></i>
+            </a-tooltip>
+          </template>
+          <!-- 应收对账 -->
+          <template v-if="column.dataIndex == 'arCheckStatus'">
+            <a-tooltip>
+              <template #title>{{ record.arCheckStatusName }}</template>
+              <i v-if="record.arCheckStatus == 2" class="iconfont icon-bingtu3"></i>
+              <i v-else-if="record.arCheckStatus == 1" class="iconfont icon-duihao1"></i>
+              <i v-else class="iconfont icon-chahao"></i>
+            </a-tooltip>
+          </template>
+          <!-- 业务锁定 -->
+          <template v-if="column.dataIndex == 'isBusinessLocking'">
+            <span v-if="record.isBusinessLocking">
+              <i class="iconfont icon-locksuo"></i>
+            </span>
+            <span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
+          </template>
+          <!-- 费用锁定 -->
+          <template v-if="column.dataIndex == 'isFeeLocking'">
+            <span v-if="record.isFeeLocking">
+              <i class="iconfont icon-locksuo"></i>
+            </span>
+            <span v-else> <i class="iconfont icon-a-jiesuo1_jiesuo"></i> </span>
+          </template>
+          <!-- 运踪 -->
+          <template v-if="column.dataIndex == 'bookStatus'">
+            <div>
+              <span v-if="record.isBookingYZ !== '0'" @click="checkBookStatus(record.id)" style="cursor: pointer; color: rgb(7, 231, 56);"
+                class="iconfont icon-refresh-1-copy"></span>
+              <span v-for="(item, index) in record.bookingStatus" :key="item.id">
+                <a-tooltip placement="top" v-if="item.statusTime">
+                  <template #title>{{ item.statusTime }}</template>
+                  <span @click="handleGetWebDataYZ(record, item.statusCode)" :class="{ yzActive: item.isChecked }">
+                    {{ item.statusName }}
                  </span>
-                </a-popover>
-                <span v-if="record.statusLog.length > 0" style="margin-left: 5px">未提：{{ record.txopNumber }}/{{ record.statusLog.length }}</span>
-              </div>
+                </a-tooltip>
+                <span style="cursor: pointer" @click="handleGetWebDataYZ(record, record.statusCode)"
+                  :class="{ active: item.isChecked }" v-else>{{ item.statusName }}</span>
+                <span v-if="index != record.bookingStatus?.length - 1">-</span>
+              </span>
            </div>
-          </div>
-        </template>
-        <!-- 格式单比对 -->
-        <template v-if="column.dataIndex == 'lstDraftCompareRlt'">
-          <div class="goods-status">
-            <a-popover>
-              <template #content>
-                <p>
-                  比对时间: <span>{{ record.lstDraftCompareDate }}</span>
-                </p>
-              </template>
-              <div>
-                <div v-if="record.lstDraftCompareRlt == 'DIFF'">
-                  <i class="icon-shibai iconfont compareIcon" style="color: red;"></i>
-                </div>
-                <div v-else-if="record.lstDraftCompareRlt == 'NO DIFF'">
-                  <i class="icon-chenggong iconfont compareIcon" style="color: green;"></i>
+          </template>
+          <!-- 提箱返场 -->
+          <template v-if="column.dataIndex == 'statusLog'">
+            <div v-if="record.statusLog" class="txfc">
+              <div >
+                <div class="billtrace-btn1 txfc" style="display: flex; align-items: center">
+                  <i style="cursor: pointer; color: rgb(7, 231, 56); margin-right: 5px"
+                    @click="handleRefshYard(record.id)" class="iconfont icon-refresh-1-copy"></i>
+                  <a-popover v-if="record.statusLog.length > 0">
+                    <template #content>
+                      <div>
+                        <span class="txfcSpan" style="width: 120px">箱号</span>
+                        <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">提箱</span>
+                        <span @click="handleGetWebData(record, 'YARD')" class="txfcSpan">返场</span>
+                      </div>
+                      <div v-for="(item, index) in record.statusLog" :key="index">
+                        <span class="txfcSpan" style="width: 120px">{{ item.cntrno }}</span>
+                        <span class="txfcSpan">{{ item.txOpTime }}</span>
+                        <span class="txfcSpan">{{ item.fcOpTime }}</span>
+                      </div>
+                    </template>
+                    <span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].txOpTime }">
+                      提箱
+                    </span>
+                    <span @click="handleGetWebData(record, 'YARD')" :class="{ active: record.statusLog[0].fcOpTime }">
+                      返场
+                    </span>
+                  </a-popover>
+                  <span v-if="record.statusLog.length > 0" style="margin-left: 5px">未提：{{ record.txopNumber }}/{{ record.statusLog.length }}</span>
                </div>
              </div>
-            </a-popover>
-            <i v-if="record.lstDraftCompareRlt" title="查看比对结果" style="margin-left: 10px"
-              @click="handleFormatContrast(record)" class="icon-shiyongwendang iconfont compareIcon"></i>
-          </div>
-        </template>
-        <!-- 下货纸比对 -->
-        <template v-if="column.dataIndex == 'lstShipOrderCompareRlt'">
-          <div class="goods-status">
-            <RedoOutlined style="margin-left: 10px" @click="excuteShippingOrderCompareBatch(record)" />
-            <a-popover>
-              <template #content>
-                <p>
-                  比对方式:
-                  <span>{{
-                    record.lstShipOrderCompareMode
-                      ? record.lstShipOrderCompareMode == 'MANUAL'
-                        ? '手动'
-                        : '自动'
-                      : ''
-                  }}</span>
-                  <span>-{{ record.lstShipOrderCompareRltName }}</span>
-                </p>
-                <p>
-                  比对时间: <span>{{ record.lstShipOrderCompareDate }}</span>
-                </p>
-              </template>
-              <div style="cursor: pointer" @click="handleOpenResult(record)">
-                <div v-if="record.lstShipOrderCompareRlt == 'DIFF'">
-                  <CloseCircleFilled :style="{ color: 'red' }" />
-                </div>
-                <div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF'">
-                  <CheckCircleFilled :style="{ color: '#54bc25' }" />
-                </div>
-                <div v-if="record.lstShipOrderCompareRlt == 'BEFORE_EQUAL'">
-                  <CheckCircleFilled :style="{ color: 'rgb(187,37,155)' }" />
-                </div>
-                <div v-if="record.lstShipOrderCompareRlt == 'BEFORE_DIFF'">
-                  <CloseCircleFilled :style="{ color: 'red' }" />
-                </div>
-                <div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF_U'">
-                  <CheckCircleFilled :style="{ color: '#54bc25' }" />
+            </div>
+          </template>
+          <!-- 格式单比对 -->
+          <template v-if="column.dataIndex == 'lstDraftCompareRlt'">
+            <div class="goods-status">
+              <a-popover>
+                <template #content>
+                  <p>
+                    比对时间: <span>{{ record.lstDraftCompareDate }}</span>
+                  </p>
+                </template>
+                <div>
+                  <div v-if="record.lstDraftCompareRlt == 'DIFF'">
+                    <i class="icon-shibai iconfont compareIcon" style="color: red;"></i>
+                  </div>
+                  <div v-else-if="record.lstDraftCompareRlt == 'NO DIFF'">
+                    <i class="icon-chenggong iconfont compareIcon" style="color: green;"></i>
+                  </div>
                </div>
-                <div v-if="record.lstShipOrderCompareRlt == 'DIFF_U'">
-                  <CloseCircleFilled :style="{ color: 'red' }" />
+              </a-popover>
+              <i v-if="record.lstDraftCompareRlt" title="查看比对结果" style="margin-left: 10px"
+                @click="handleFormatContrast(record)" class="icon-shiyongwendang iconfont compareIcon"></i>
+            </div>
+          </template>
+          <!-- 下货纸比对 -->
+          <template v-if="column.dataIndex == 'lstShipOrderCompareRlt'">
+            <div class="goods-status">
+              <RedoOutlined style="margin-left: 10px" @click="excuteShippingOrderCompareBatch(record)" />
+              <a-popover>
+                <template #content>
+                  <p>
+                    比对方式:
+                    <span>{{
+                      record.lstShipOrderCompareMode
+                        ? record.lstShipOrderCompareMode == 'MANUAL'
+                          ? '手动'
+                          : '自动'
+                        : ''
+                    }}</span>
+                    <span>-{{ record.lstShipOrderCompareRltName }}</span>
+                  </p>
+                  <p>
+                    比对时间: <span>{{ record.lstShipOrderCompareDate }}</span>
+                  </p>
+                </template>
+                <div style="cursor: pointer" @click="handleOpenResult(record)">
+                  <div v-if="record.lstShipOrderCompareRlt == 'DIFF'">
+                    <CloseCircleFilled :style="{ color: 'red' }" />
+                  </div>
+                  <div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF'">
+                    <CheckCircleFilled :style="{ color: '#54bc25' }" />
+                  </div>
+                  <div v-if="record.lstShipOrderCompareRlt == 'BEFORE_EQUAL'">
+                    <CheckCircleFilled :style="{ color: 'rgb(187,37,155)' }" />
+                  </div>
+                  <div v-if="record.lstShipOrderCompareRlt == 'BEFORE_DIFF'">
+                    <CloseCircleFilled :style="{ color: 'red' }" />
+                  </div>
+                  <div v-if="record.lstShipOrderCompareRlt == 'NO_DIFF_U'">
+                    <CheckCircleFilled :style="{ color: '#54bc25' }" />
+                  </div>
+                  <div v-if="record.lstShipOrderCompareRlt == 'DIFF_U'">
+                    <CloseCircleFilled :style="{ color: 'red' }" />
+                  </div>
                </div>
-              </div>
-            </a-popover>
-          </div>
-        </template>
-      </template>
-      <template v-slot:tableAction="{ record }">
-        <a-tooltip placement="top" :mouseEnterDelay="0.5">
-          <template #title>
-            <span>编辑</span>
+              </a-popover>
+            </div>
          </template>
-          <a-button type="link" @click="handledbclick(record)">
-            <span class="iconfont icon-icon_519"></span>
-          </a-button>
-        </a-tooltip>
-      </template>
-    </BasicTable>
-    <!-- 合计 -->
-    <div class="static-box">
-      <h5 v-if="calcData.length" style="position: absolute; bottom: 68px; left: 22px">合计</h5>
-      <a-table class="ds-table" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table>
+        </template>
+        <template v-slot:tableAction="{ record }">
+          <a-tooltip placement="top" :mouseEnterDelay="0.5">
+            <template #title>
+              <span>编辑</span>
+            </template>
+            <a-button type="link" @click="handledbclick(record)">
+              <span class="iconfont icon-icon_519"></span>
+            </a-button>
+          </a-tooltip>
+        </template>
+      </BasicTable>
+      <!-- 合计 -->
+      <a-table class="static-box" :columns="calcColumns" :data-source="calcData" :pagination="false"></a-table>
    </div>
    <!-- 多提单号查询 -->
    <a-modal class="ds-modal-small" title="多提单号查询" :maskClosable="false" :width="400" :visible="moreNumVisible"
@ -335,8 +334,6 @@ import { formatParams } from '/@/hooks/web/common'
 const appStore = useAppStore()
 const { createMessage } = useMessage()
 const go = useGo()
-// 空数据表格高度
-const tbHeight = window.innerHeight - 310
 // 合计列
 const calcColumns = [
  {
@ -508,10 +505,10 @@ const [registerTable, { reload, getVxeSelectRows, setLoading }] = useTable({
    width: 60,
  },
  canResize: true,
-  resizeHeightOffset: 75,
+  resizeHeightOffset: 131,
  immediate: false,
  tableComponent: 'vxe',
-  autoHeight: tbHeight,
+  autoHeight: window.innerHeight - 416.5,
  id: '0',
  actionColumn: {
    width: 60,
@ -657,6 +654,7 @@ onActivated(() => {

 <style lang="less">
 .ds-sea-export-table {
+  padding: 20px;
  height: 100%;

  .TIJIAO {
@ -699,9 +697,7 @@ onActivated(() => {
  }

  .static-box {
-    position: fixed;
-    bottom: 0;
-    padding-left: 20px;
+    margin-bottom: 20px;
  }

  .icon-fuzhi3 {