fetch(modify): 中英文以及黑屏

src/views/finance/commission/agent-commission/index.vue

@@ -1,221 +1,224 @@
 <template>
-  <ArtTableFullScreen>
-    <div class="agent-commission-page" id="table-full-screen">
-      <!-- 搜索栏 -->
-      <ElCard shadow="never" class="search-card">
-        <ElForm :inline="true" :model="searchForm" class="search-form">
-          <ElFormItem label="店铺名称">
-            <ElInput
-              v-model="searchForm.shop_name"
-              placeholder="请输入店铺名称"
-              clearable
-              style="width: 200px"
-            />
-          </ElFormItem>
-          <ElFormItem label="店铺编码">
-            <ElInput
-              v-model="searchForm.shop_code"
-              placeholder="请输入店铺编码"
-              clearable
-              style="width: 200px"
-            />
-          </ElFormItem>
-          <ElFormItem>
-            <ElButton type="primary" @click="handleSearch">查询</ElButton>
-            <ElButton @click="handleReset">重置</ElButton>
-          </ElFormItem>
-        </ElForm>
-      </ElCard>
+  <div class="agent-commission-container">
+    <ArtTableFullScreen>
+      <div class="agent-commission-page" id="table-full-screen">
+        <!-- 搜索栏 -->
+        <ElCard shadow="never" class="search-card">
+          <ElForm :inline="true" :model="searchForm" class="search-form">
+            <ElFormItem label="店铺名称">
+              <ElInput
+                v-model="searchForm.shop_name"
+                placeholder="请输入店铺名称"
+                clearable
+                style="width: 200px"
+              />
+            </ElFormItem>
+            <ElFormItem label="店铺编码">
+              <ElInput
+                v-model="searchForm.shop_code"
+                placeholder="请输入店铺编码"
+                clearable
+                style="width: 200px"
+              />
+            </ElFormItem>
+            <ElFormItem>
+              <ElButton type="primary" @click="handleSearch">查询</ElButton>
+              <ElButton @click="handleReset">重置</ElButton>
+            </ElFormItem>
+          </ElForm>
+        </ElCard>
 
-      <ElCard shadow="never" class="art-table-card">
-        <!-- 表格头部 -->
-        <ArtTableHeader
-          :columnList="columnOptions"
-          v-model:columns="columnChecks"
-          @refresh="handleRefresh"
-        />
+        <ElCard shadow="never" class="art-table-card">
+          <!-- 表格头部 -->
+          <ArtTableHeader
+            :columnList="columnOptions"
+            v-model:columns="columnChecks"
+            @refresh="handleRefresh"
+          />
 
-        <!-- 表格 -->
-        <ArtTable
-          ref="tableRef"
-          row-key="shop_id"
-          :loading="loading"
-          :data="summaryList"
-          :currentPage="pagination.page"
-          :pageSize="pagination.pageSize"
-          :total="pagination.total"
-          :marginTop="10"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        >
-          <template #default>
-            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
-          </template>
-        </ArtTable>
-      </ElCard>
-    </div>
-  </ArtTableFullScreen>
+          <!-- 表格 -->
+          <ArtTable
+            ref="tableRef"
+            row-key="shop_id"
+            :loading="loading"
+            :data="summaryList"
+            :currentPage="pagination.page"
+            :pageSize="pagination.pageSize"
+            :total="pagination.total"
+            :marginTop="10"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+            <template #default>
+              <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+            </template>
+          </ArtTable>
+        </ElCard>
+      </div>
+    </ArtTableFullScreen>
 
-  <!-- 详情抽屉 -->
-  <ElDrawer
-    v-model="detailDrawerVisible"
-    :title="`${currentShop?.shop_name || ''} - 佣金详情`"
-    size="60%"
-    destroy-on-close
-  >
-    <ElTabs v-model="activeTab" class="detail-tabs">
-      <!-- 佣金明细 Tab -->
-      <ElTabPane label="佣金明细" name="commission">
-        <ArtTable
-          ref="commissionTableRef"
-          row-key="id"
-          :loading="commissionLoading"
-          :data="commissionRecords"
-          :currentPage="commissionPagination.page"
-          :pageSize="commissionPagination.pageSize"
-          :total="commissionPagination.total"
-          :marginTop="10"
-          :height="500"
-          @size-change="handleCommissionSizeChange"
-          @current-change="handleCommissionCurrentChange"
-        >
-          <template #default>
-            <ElTableColumn label="佣金金额" prop="amount" width="120">
-              <template #default="scope">
-                <span style="font-weight: 500; color: var(--el-color-success)">
-                  {{ formatMoney(scope.row.amount) }}
-                </span>
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="入账后余额" prop="balance_after" width="120">
-              <template #default="scope">
-                {{ formatMoney(scope.row.balance_after) }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="佣金类型" prop="commission_type" width="120">
-              <template #default="scope">
-                <ElTag
-                  :type="
-                    CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
-                      ?.type || 'info'
-                  "
-                >
+    <!-- 详情抽屉 -->
+    <ElDrawer
+      v-model="detailDrawerVisible"
+      :title="`${currentShop?.shop_name || ''} - 佣金详情`"
+      size="60%"
+      destroy-on-close
+    >
+      <ElTabs v-model="activeTab" class="detail-tabs">
+        <!-- 佣金明细 Tab -->
+        <ElTabPane label="佣金明细" name="commission">
+          <ArtTable
+            ref="commissionTableRef"
+            row-key="id"
+            :loading="commissionLoading"
+            :data="commissionRecords"
+            :currentPage="commissionPagination.page"
+            :pageSize="commissionPagination.pageSize"
+            :total="commissionPagination.total"
+            :marginTop="10"
+            :height="500"
+            @size-change="handleCommissionSizeChange"
+            @current-change="handleCommissionCurrentChange"
+          >
+            <template #default>
+              <ElTableColumn label="佣金金额" prop="amount" width="120">
+                <template #default="scope">
+                  <span style="font-weight: 500; color: var(--el-color-success)">
+                    {{ formatMoney(scope.row.amount) }}
+                  </span>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="入账后余额" prop="balance_after" width="120">
+                <template #default="scope">
+                  {{ formatMoney(scope.row.balance_after) }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="佣金类型" prop="commission_type" width="120">
+                <template #default="scope">
+                  <ElTag
+                    :type="
+                      CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
+                        ?.type || 'info'
+                    "
+                  >
+                    {{
+                      CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
+                        ?.label || scope.row.commission_type
+                    }}
+                  </ElTag>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="状态" prop="status" width="100">
+                <template #default="scope">
+                  <ElTag
+                    :type="
+                      CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
+                        ?.type || 'info'
+                    "
+                  >
+                    {{
+                      CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
+                        ?.label || scope.row.status
+                    }}
+                  </ElTag>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
+              <ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
+              <ElTableColumn label="设备号" prop="device_no" min-width="150" show-overflow-tooltip />
+              <ElTableColumn label="入账时间" prop="created_at" width="180">
+                <template #default="scope">
+                  {{ formatDateTime(scope.row.created_at) }}
+                </template>
+              </ElTableColumn>
+            </template>
+          </ArtTable>
+        </ElTabPane>
+
+        <!-- 提现记录 Tab -->
+        <ElTabPane label="提现记录" name="withdrawal">
+          <ArtTable
+            ref="withdrawalTableRef"
+            row-key="id"
+            :loading="withdrawalLoading"
+            :data="withdrawalRecords"
+            :currentPage="withdrawalPagination.page"
+            :pageSize="withdrawalPagination.pageSize"
+            :total="withdrawalPagination.total"
+            :marginTop="10"
+            :height="500"
+            @size-change="handleWithdrawalSizeChange"
+            @current-change="handleWithdrawalCurrentChange"
+          >
+            <template #default>
+              <ElTableColumn
+                label="提现单号"
+                prop="withdrawal_no"
+                min-width="180"
+                show-overflow-tooltip
+              />
+              <ElTableColumn label="提现金额" prop="amount" width="120">
+                <template #default="scope">
+                  <span style="font-weight: 500; color: var(--el-color-danger)">
+                    {{ formatMoney(scope.row.amount) }}
+                  </span>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="实际到账" prop="actual_amount" width="120">
+                <template #default="scope">
+                  {{ formatMoney(scope.row.actual_amount) }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="手续费" prop="fee" width="100">
+                <template #default="scope">
+                  {{ formatMoney(scope.row.fee) }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
+                <template #default="scope">
                   {{
-                    CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
-                      ?.label || scope.row.commission_type
+                    WithdrawalMethodMap[
+                      scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
+                    ]?.label || scope.row.withdrawal_method
                   }}
-                </ElTag>
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="状态" prop="status" width="100">
-              <template #default="scope">
-                <ElTag
-                  :type="
-                    CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
-                      ?.type || 'info'
-                  "
-                >
-                  {{
-                    CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
-                      ?.label || scope.row.status
-                  }}
-                </ElTag>
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
-            <ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
-            <ElTableColumn label="设备号" prop="device_no" min-width="150" show-overflow-tooltip />
-            <ElTableColumn label="入账时间" prop="created_at" width="180">
-              <template #default="scope">
-                {{ formatDateTime(scope.row.created_at) }}
-              </template>
-            </ElTableColumn>
-          </template>
-        </ArtTable>
-      </ElTabPane>
-
-      <!-- 提现记录 Tab -->
-      <ElTabPane label="提现记录" name="withdrawal">
-        <ArtTable
-          ref="withdrawalTableRef"
-          row-key="id"
-          :loading="withdrawalLoading"
-          :data="withdrawalRecords"
-          :currentPage="withdrawalPagination.page"
-          :pageSize="withdrawalPagination.pageSize"
-          :total="withdrawalPagination.total"
-          :marginTop="10"
-          :height="500"
-          @size-change="handleWithdrawalSizeChange"
-          @current-change="handleWithdrawalCurrentChange"
-        >
-          <template #default>
-            <ElTableColumn
-              label="提现单号"
-              prop="withdrawal_no"
-              min-width="180"
-              show-overflow-tooltip
-            />
-            <ElTableColumn label="提现金额" prop="amount" width="120">
-              <template #default="scope">
-                <span style="font-weight: 500; color: var(--el-color-danger)">
-                  {{ formatMoney(scope.row.amount) }}
-                </span>
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="实际到账" prop="actual_amount" width="120">
-              <template #default="scope">
-                {{ formatMoney(scope.row.actual_amount) }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="手续费" prop="fee" width="100">
-              <template #default="scope">
-                {{ formatMoney(scope.row.fee) }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
-              <template #default="scope">
-                {{
-                  WithdrawalMethodMap[
-                    scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
-                  ]?.label || scope.row.withdrawal_method
-                }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="状态" prop="status" width="100">
-              <template #default="scope">
-                <ElTag
-                  :type="
-                    WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
-                      ?.type || 'info'
-                  "
-                >
-                  {{
-                    WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
-                      ?.label || scope.row.status
-                  }}
-                </ElTag>
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="申请时间" prop="created_at" width="180">
-              <template #default="scope">
-                {{ formatDateTime(scope.row.created_at) }}
-              </template>
-            </ElTableColumn>
-            <ElTableColumn label="处理时间" prop="processed_at" width="180">
-              <template #default="scope">
-                {{ formatDateTime(scope.row.processed_at) }}
-              </template>
-            </ElTableColumn>
-          </template>
-        </ArtTable>
-      </ElTabPane>
-    </ElTabs>
-  </ElDrawer>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="状态" prop="status" width="100">
+                <template #default="scope">
+                  <ElTag
+                    :type="
+                      WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
+                        ?.type || 'info'
+                    "
+                  >
+                    {{
+                      WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
+                        ?.label || scope.row.status
+                    }}
+                  </ElTag>
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="申请时间" prop="created_at" width="180">
+                <template #default="scope">
+                  {{ formatDateTime(scope.row.created_at) }}
+                </template>
+              </ElTableColumn>
+              <ElTableColumn label="处理时间" prop="processed_at" width="180">
+                <template #default="scope">
+                  {{ formatDateTime(scope.row.processed_at) }}
+                </template>
+              </ElTableColumn>
+            </template>
+          </ArtTable>
+        </ElTabPane>
+      </ElTabs>
+    </ElDrawer>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { h } from 'vue'
+  import { h, watch, onBeforeUnmount } from 'vue'
+  import { useRoute } from 'vue-router'
   import { CommissionService } from '@/api/modules'
   import { ElMessage, ElTag } from 'element-plus'
   import type {
@@ -235,6 +238,8 @@
 
   defineOptions({ name: 'AgentCommission' })
 
+  const route = useRoute()
+
   // 主表格状态
   const loading = ref(false)
   const tableRef = ref()
@@ -464,6 +469,23 @@
     }
   })
 
+  // 监听路由变化，关闭抽屉
+  watch(
+    () => route.path,
+    () => {
+      if (detailDrawerVisible.value) {
+        detailDrawerVisible.value = false
+      }
+    }
+  )
+
+  // 组件卸载前关闭抽屉
+  onBeforeUnmount(() => {
+    if (detailDrawerVisible.value) {
+      detailDrawerVisible.value = false
+    }
+  })
+
   // 加载佣金明细
   const loadCommissionRecords = async () => {
     if (!currentShop.value) return
@@ -540,6 +562,10 @@
 </script>
 
 <style lang="scss" scoped>
+  .agent-commission-container {
+    height: 100%;
+  }
+
   .agent-commission-page {
     .search-card {
       margin-bottom: 16px;