fix(operator): fix operator edit issue

src/views/asset-management/asset-information/components/WalletTransactionCard.vue

@@ -3,10 +3,26 @@
     <template #header>
       <div class="card-header wallet-header">
         <div class="header-left">
-          <span>钱包流水</span>
-          <ElTag type="info" size="small"> 共 {{ total }} 条 </ElTag>
+          <span class="wallet-title">钱包</span>
+          <ElTag v-if="walletInfo" :type="getWalletStatusType(walletInfo.status)" size="small">
+            {{ walletInfo.status_text || '-' }}
+          </ElTag>
+          <template v-if="walletInfo">
+            <ElDivider direction="vertical" />
+            <span class="balance-item"
+              >💰 总余额 <strong>{{ formatAmount(walletInfo.balance) }}</strong></span
+            >
+            <ElDivider direction="vertical" />
+            <span class="balance-item"
+              >✅ 可用 <strong>{{ formatAmount(walletInfo.available_balance) }}</strong></span
+            >
+            <ElDivider direction="vertical" />
+            <span class="balance-item"
+              >🔒 冻结 <strong>{{ formatAmount(walletInfo.frozen_balance) }}</strong></span
+            >
+          </template>
         </div>
-        <div class="filter-section">
+        <div v-if="!props.boundDeviceId" class="filter-section">
           <ElSelect
             v-model="filterForm.transaction_type"
             placeholder="交易类型"
@@ -28,11 +44,27 @@
           />
           <ElButton type="primary" @click="handleQuery">查询</ElButton>
           <ElButton @click="handleReset">重置</ElButton>
+          <ElTag type="info" size="small">共 {{ total }} 条</ElTag>
         </div>
       </div>
     </template>
-    <div class="wallet-table-wrapper">
-      <!-- 流水表格 -->
+
+    <!-- 绑定设备提示 -->
+    <ElEmpty v-if="props.boundDeviceId" :image-size="100">
+      <template #description>
+        <span>该卡已绑定设备，请点击 </span>
+        <ElButton
+          type="primary"
+          link
+          style="font-size: 15px; font-weight: 600"
+          @click="emit('navigateToDevice', props.boundDeviceNo!)"
+          >{{ props.boundDeviceNo }}</ElButton
+        >
+        <span> 进行查看</span>
+      </template>
+    </ElEmpty>
+
+    <div v-else class="wallet-table-wrapper">
       <ElTable
         v-if="transactionList && transactionList.length > 0"
         :data="transactionList"
@@ -115,7 +147,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, onMounted } from 'vue'
+  import { ref, watch } from 'vue'
   import {
     ElCard,
     ElTable,
@@ -127,30 +159,46 @@
     ElDatePicker,
     ElPagination,
     ElEmpty,
-    ElMessage
+    ElMessage,
+    ElDivider
   } from 'element-plus'
   import { useAssetFormatters } from '../composables/useAssetFormatters'
   import { formatDateTime } from '@/utils/business/format'
   import { AssetService } from '@/api/modules'
 
-  // Props
-  interface Props {
-    assetIdentifier: string // ICCID or virtual_no
+  interface WalletInfo {
+    balance: number
+    available_balance: number
+    frozen_balance: number
+    status: number
+    status_text?: string
   }
 
-  const props = defineProps<Props>()
+  interface Props {
+    assetIdentifier: string
+    walletInfo: WalletInfo | null
+    walletLoading?: boolean
+    boundDeviceId?: number
+    boundDeviceNo?: string
+  }
 
-  // 使用格式化工具
-  const { formatAmount, getTransactionTypeTag } = useAssetFormatters()
+  const props = withDefaults(defineProps<Props>(), {
+    walletLoading: false,
+    boundDeviceId: undefined,
+    boundDeviceNo: ''
+  })
+
+  const emit = defineEmits<{
+    (e: 'navigateToDevice', deviceNo: string): void
+  }>()
+
+  const { formatAmount, getTransactionTypeTag, getWalletStatusType } = useAssetFormatters()
 
   // State
   const loading = ref(false)
   const transactionList = ref<any[]>([])
   const total = ref(0)
-  const pagination = ref({
-    page: 1,
-    page_size: 20
-  })
+  const pagination = ref({ page: 1, page_size: 20 })
   const filterForm = ref<{
     transaction_type: string | null
     date_range: [Date, Date] | null
@@ -158,8 +206,6 @@
     transaction_type: null,
     date_range: null
   })
-
-  // API调用参数
   const queryParams = ref({
     page: 1,
     page_size: 20,
@@ -168,10 +214,8 @@
     end_time: null as string | null
   })
 
-  // 加载钱包流水列表
   const loadTransactions = async () => {
     if (!props.assetIdentifier) return
-
     try {
       loading.value = true
       const response = await AssetService.getWalletTransactions(
@@ -193,13 +237,10 @@
     }
   }
 
-  // 处理查询按钮点击
   const handleQuery = () => {
     queryParams.value.page = 1
     pagination.value.page = 1
     queryParams.value.transaction_type = filterForm.value.transaction_type
-
-    // 处理日期范围
     if (filterForm.value.date_range && filterForm.value.date_range.length === 2) {
       queryParams.value.start_time = filterForm.value.date_range[0].toISOString()
       queryParams.value.end_time = filterForm.value.date_range[1].toISOString()
@@ -207,16 +248,13 @@
       queryParams.value.start_time = null
       queryParams.value.end_time = null
     }
-
     loadTransactions()
   }
 
-  // 处理重置按钮点击
+  const handleFilterChange = () => handleQuery()
+
   const handleReset = () => {
-    filterForm.value = {
-      transaction_type: null,
-      date_range: null
-    }
+    filterForm.value = { transaction_type: null, date_range: null }
     queryParams.value = {
       page: 1,
       page_size: 20,
@@ -224,14 +262,10 @@
       start_time: null,
       end_time: null
     }
-    pagination.value = {
-      page: 1,
-      page_size: 20
-    }
+    pagination.value = { page: 1, page_size: 20 }
     loadTransactions()
   }
 
-  // 处理分页大小变化
   const handlePageSizeChange = (size: number) => {
     queryParams.value.page_size = size
     queryParams.value.page = 1
@@ -239,30 +273,19 @@
     loadTransactions()
   }
 
-  // 处理页码变化
   const handlePageChange = (page: number) => {
     queryParams.value.page = page
     loadTransactions()
   }
 
-  // 监听资产标识符变化
+  // 仅监听 assetIdentifier 变化加载数据（去掉 onMounted 避免重复调用）
   watch(
     () => props.assetIdentifier,
     (newVal) => {
-      if (newVal) {
-        // 重置状态
-        handleReset()
-      }
+      if (newVal) handleReset()
     },
     { immediate: true }
   )
-
-  // 组件挂载时加载数据
-  onMounted(() => {
-    if (props.assetIdentifier) {
-      loadTransactions()
-    }
-  })
 </script>
 
 <style scoped lang="scss">
@@ -277,14 +300,30 @@
 
         .header-left {
           display: flex;
+          flex-wrap: wrap;
           gap: 8px;
           align-items: center;
+
+          .wallet-title {
+            font-size: 15px;
+            font-weight: 500;
+          }
+
+          .balance-item {
+            font-size: 13px;
+            color: var(--el-text-color-regular);
+
+            strong {
+              font-weight: 600;
+              color: var(--el-text-color-primary);
+            }
+          }
         }
 
         .filter-section {
           display: flex;
           flex-wrap: wrap;
-          gap: 12px;
+          gap: 10px;
           align-items: center;
         }
       }
@@ -315,7 +354,7 @@
         .pagination-wrapper {
           display: flex;
           justify-content: flex-end;
-          margin-top: 20px;
+          margin-top: 16px;
         }
       }
     }