加二级页面

src/views/usergold/gold/clientCountWallet.vue

@@ -26,12 +26,83 @@ const { t } = useI18n()
 const dialogVisible = ref(false)
 
 // 定义加载状态，获取地区数据
-const isLoadingmarket = ref(false);
 const markets = ref([])
 
 
 // 充值明细表格
-const tableData = ref([])
+// 替换你代码中的 tableData 初始化部分
+const tableData = ref([
+  {
+    name: "张三",
+    jwcode: "100001",
+    market: "香港总部",
+    hkGold: 15800.50,
+    sgHcGold: 8900.00,
+    myGold: 5600.75,
+    sgGold: 7800.20,
+    caGold: 3200.00,
+    thHsGold: 1800.50,
+    thHaGold: 2500.80,
+    vnGold: 950.30,
+    bjGold: 4500.00
+  },
+  {
+    name: "李四",
+    jwcode: "100002",
+    market: "新加坡分部",
+    hkGold: 9800.00,
+    sgHcGold: 12500.80,
+    myGold: 7800.00,
+    sgGold: 15600.90,
+    caGold: 4200.50,
+    thHsGold: 3600.00,
+    thHaGold: 1900.20,
+    vnGold: 1200.75,
+    bjGold: 3800.00
+  },
+  {
+    name: "王五",
+    jwcode: "100003",
+    market: "马来西亚分部",
+    hkGold: 6500.30,
+    sgHcGold: 4800.50,
+    myGold: 18900.00,
+    sgGold: 5600.80,
+    caGold: 2100.00,
+    thHsGold: 2800.60,
+    thHaGold: 3200.00,
+    vnGold: 1800.50,
+    bjGold: 2900.75
+  },
+  {
+    name: "赵六",
+    jwcode: "100004",
+    market: "加拿大分部",
+    hkGold: 4200.00,
+    sgHcGold: 3600.80,
+    myGold: 2900.50,
+    sgGold: 4100.00,
+    caGold: 25800.90,
+    thHsGold: 1500.30,
+    thHaGold: 1800.00,
+    vnGold: 850.20,
+    bjGold: 1800.50
+  },
+  {
+    name: "孙七",
+    jwcode: "100005",
+    market: "泰国HS分部",
+    hkGold: 7800.75,
+    sgHcGold: 6500.00,
+    myGold: 4200.80,
+    sgGold: 5900.50,
+    caGold: 1800.00,
+    thHsGold: 32500.20,
+    thHaGold: 8900.00,
+    vnGold: 2500.80,
+    bjGold: 3600.30
+  }
+]);
 const tableRef = ref(null)
 const scrollTableTop = () => {
   tableRef.value?.setScrollTop?.(0)
@@ -59,7 +130,8 @@ const total = ref(100)
 // 搜索对象时间
 const getTime = ref([])
 // 搜索User
-const user = ref({
+const selectData = ref({
+  jwcode: '',
   markets: [],
 })
 // 不分页的搜索对象
@@ -82,119 +154,45 @@ const get = async function (val) {
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
-
-    // 添加排序字段和排序方式到请求参数
-    user.value.sortField = sortField.value
-    user.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-
-    // 发送POST请求
-    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
-    console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
-    //console.log('请求参数', requestData);
-    // 检查markets数组中是否包含'总部'或'研发部'
-    // if (user.value.markets.includes('9') || user.value.markets.includes('9999')) {
-    //   user.value.markets = [];
-    // }
-    if (user.value.jwcode) {
+    if (selectData.value.jwcode) {
       // 纯数字
       const numberRegex = /^\d{1,9}$/;
-
       // 检查是否不是数字
-      if (!numberRegex.test(user.value.jwcode)) {
+      if (!numberRegex.test(selectData.value.jwcode)) {
         ElMessage.error(t('elmessage.checkJwcodeFormat'))
-        // 上面提示过了
         return
       }
     }
-    const result = await API({
-      url: '/goldDetail/getGold',
-      method: 'post',
-      data: { ...getObj.value, user: { ...user.value, flag: flag.value } }
-    })
-    console.log('响应数据', result)
-    tableData.value = result.data.list
-    total.value = result.data.total
 
-    console.log('兄弟你是什么 user', user.value)
+    console.log('搜索参数', getObj.value, selectData.value)
+    // const result = await API({
+    //   url: '/goldDetail/getGold',
+    //   method: 'post',
+    //   data: { ...getObj.value, selectData: { ...selectData.value, flag: flag.value } }
+    // })
+    // console.log('响应数据', result)
+    // tableData.value = result.data.list
+    // total.value = result.data.total
+
     // 获取合计数
-    const resultGoldTotal = await API({
-      url: '/goldDetail/goldTotal',
-      data: {
-        jwcode: user.value.jwcode,
-        markets: user.value.markets,
-        flag: flag.value
-      }
-    })
+    // const resultGoldTotal = await API({
+    //   url: '/goldDetail/goldTotal',
+    //   data: {
+    //     jwcode: selectData.value.jwcode,
+    //     markets: selectData.value.markets,
+    //     flag: flag.value
+    //   }
+    // })
     // 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组
-    if (result.data.list.length === 0) {
-      // 将表格数据设置为空数组
-      tableData.value = []
-      // 将合计数设置为 0
-      statisticsData.value = {
-        hkGold: 0,
-        sgHcGold: 0,
-        myGold: 0,
-        sgGold: 0,
-        caGold: 0,
-        thHsGold: 0,
-        thHaGold: 0,
-        vnGold: 0,
-        bjGold: 0
-      }
-
-      // // 新增金币总数变量
-      // const goldtotal = ref(0)
-      // 分页总数设置为 0
-      total.value = 0
-      // ElMessage.warning('精网号不存在，请检查输入')
-    }
-    // 判断合计数是否存在,不存在时 result.data.list 为空数组
-    else if (resultGoldTotal.data === 0) {
-      // 将表格数据设置为空数组
-      tableData.value = []
-      // 将合计数设置为 0
-      statisticsData.value = {
-        hkGold: 0,
-        sgHcGold: 0,
-        myGold: 0,
-        sgGold: 0,
-        caGold: 0,
-        thHsGold: 0,
-        thHaGold: 0,
-        vnGold: 0,
-        bjGold: 0
-      }
-    }
-    else {
-      // 将响应结果存储到响应式数据中
-      console.log('总数据请求成功', result)
-      // 存储表格数据
-      tableData.value = result.data.list
-      await nextTick()
-      scrollTableTop()
-      console.log('tableData', tableData.value)
-
-      // 从接口返回数据中获取各金币数值
-      if (resultGoldTotal.data) {
-        statisticsData.value = { ...resultGoldTotal.data }
-      } else {
-        console.error('合计数数据格式错误', resultGoldTotal)
-        ElMessage.error(t('elmessage.getTotalFailed'))
-      }
-      // 存储分页总数
-      total.value = result.data.total
-      console.log('total', total.value)
-    }
   } catch (error) {
     console.log('请求失败', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// 精网号去空格，同时处理 user 和 putExcel 中的 jwcode
+// 精网号去空格，同时处理 selectData 和 putExcel 中的 jwcode
 const trimJwCode = () => {
-  if (user.value.jwcode) {
-    user.value.jwcode = user.value.jwcode.replace(/\s/g, '');
+  if (selectData.value.jwcode) {
+    selectData.value.jwcode = selectData.value.jwcode.replace(/\s/g, '');
   }
 
 }
@@ -206,7 +204,7 @@ const search = function () {
 }
 // 重置
 const reset = function () {
-  user.value = {
+  selectData.value = {
     jwcode: '',
     markets: [],
   }
@@ -218,11 +216,76 @@ const reset = function () {
   get()
 }
 const cellClick = function (row, column) {
-  console.log('cellClick', column.label)
-  if (column.label === t('common.name')) {
-    dialogVisible.value = true
-    userInfo.value = row
+  console.log('cellClick', column)
+  
+    const propToMarketName = {
+      hkGold: '香港',
+      sgHcGold: '新加坡HC',
+      myGold: '马来西亚',
+      sgGold: '新加坡',
+      caGold: '加拿大',
+      thHsGold: '泰国HS',
+      thHaGold: '泰国HA',
+      vnGold: '越南',
+      bjGold: '北京'
+    }
+    const marketName = propToMarketName[column.property]
+    if (marketName) {
+      currentWalletInfo.value = {
+        userName: row.name,
+        jwcode: row.jwcode,
+        marketName: row.market, // 用户所属地区
+        walletName: marketName + '钱包', // 钱包名称
+        currentBalance: row[column.property] || 0
+      }
+      walletDetailQuery.value.pageNum = 1
+      getWalletDetail()
+      walletDetailVisible.value = true
+    }
+}
+
+// 钱包明细弹窗相关
+const walletDetailVisible = ref(false)
+const walletDetailList = ref([])
+const walletDetailTotal = ref(0)
+const walletDetailLoading = ref(false)
+const currentWalletInfo = ref({})
+const walletDetailQuery = ref({
+  pageNum: 1,
+  pageSize: 20
+})
+
+const getWalletDetail = async () => {
+  walletDetailLoading.value = true
+  try {
+    // 模拟数据，实际应调用接口
+    // const res = await API({ url: '/goldDetail/getWalletDetail', data: { ...walletDetailQuery.value, jwcode: currentWalletInfo.value.jwcode, walletType: currentWalletInfo.value.walletName } })
+    // 模拟延迟
+    await new Promise(resolve => setTimeout(resolve, 500))
+    
+    walletDetailList.value = Array(10).fill(0).map((_, index) => ({
+      time: '2026-01-02 12:00:00',
+      type: index % 2 === 0 ? '充值' : '消耗',
+      amount: index % 2 === 0 ? 5000 : -5000,
+      desc: index % 2 === 0 ? 'Stripe充值' : '购买大黄蜂',
+      orderNo: 'CZLINKXXXXXXXXX' + index,
+      status: index % 2 === 0 ? 1 : 2,
+    }))
+    walletDetailTotal.value = 400
+  } catch (error) {
+    console.error(error)
+  } finally {
+    walletDetailLoading.value = false
+  }
 }
+
+const handleWalletDetailSizeChange = (val) => {
+  walletDetailQuery.value.pageSize = val
+  getWalletDetail()
+}
+const handleWalletDetailCurrentChange = (val) => {
+  walletDetailQuery.value.pageNum = val
+  getWalletDetail()
 }
 // 处理排序事件
 const handleSortChange = (column) => {
@@ -251,9 +314,9 @@ const handleCurrentChange = function (val) {
 }
 const exportExcel = async function () {
   const params = {
-    user: {
-      jwcode: user.value.jwcode || '',
-      markets: user.value.markets || [],
+    selectData: {
+      jwcode: selectData.value.jwcode || '',
+      markets: selectData.value.markets || [],
       flag: flag.value
     }
 
@@ -264,8 +327,74 @@ const exportExcel = async function () {
   }
 }
 
-const exportListVisible = ref(false)
+const selectWallet = async function () {
+  selectWalletVisible.value = true
+}
+const exportExcelOnlyOne = async function () {
+  if (!selectWalletForm.value.companyWalletId) {
+    ElMessage.error('请选择公司钱包')
+    return
+  }
+  console.log('selectWalletForm', selectWalletForm.value.companyWalletId)
+  selectWalletVisible.value = false
+}
+
 
+const exportListVisible = ref(false)
+const selectWalletVisible = ref(false)
+const selectWalletFormRef = ref(null)
+const selectWalletRules = {
+  companyWalletId: [
+    { required: true, message: '请选择公司钱包', trigger: 'change' }
+  ]
+}
+// 关闭选择公司钱包弹窗
+const closeSelectWallet = () => {
+  // 重置表单
+  selectWalletFormRef.value.resetFields()
+  selectWalletForm.value = {}
+  selectWalletVisible.value = false
+}
+
+const selectWalletForm = ref({})
+const companyWalletList = ref([
+  {
+    id: 1,
+    name: '香港钱包'
+  },
+  {
+    id: 2,
+    name: '新加坡HC'
+  },
+  {
+    id: 3,
+    name: '马来西亚'
+  },
+  {
+    id: 4,
+    name: '新加坡CM'
+  },
+  {
+    id: 5,
+    name: '加拿大'
+  },
+  {
+    id: 6,
+    name: '泰国HS'
+  },
+  {
+    id: 7,
+    name: '泰国HA'
+  },
+  {
+    id: 8,
+    name: '越南'
+  },
+  {
+    id: 9,
+    name: '北京'
+  }
+])
 // 打开导出列表弹窗
 const openExportList = () => {
   getExportList()
@@ -345,10 +474,10 @@ const handleMarketChange = (value) => {
     const lastValue = value[value.length - 1];
     // 确保返回值是数组，如果不是则包装成数组
     const marketValue = reverseMarketMapping[lastValue];
-    user.value.markets = Array.isArray(marketValue) ? marketValue : [marketValue];
+    selectData.value.markets = Array.isArray(marketValue) ? marketValue : [marketValue];
   } else {
     // 保持[]格式
-    user.value.markets = [];
+    selectData.value.markets = [];
   }
 };
 // 获取地区，修改为级联下拉框
@@ -398,7 +527,7 @@ const format3 = (num) => {
     <div class="head-card">
       <div class="head-card-element">
         <el-text class="mx-1" size="large">{{ $t('common.jwcode') }}：</el-text>
-        <el-input v-model="user.jwcode" style="width: 160px" :placeholder="$t('common.jwcodePlaceholder')" clearable />
+        <el-input v-model="selectData.jwcode" style="width: 160px" :placeholder="$t('common.jwcodePlaceholder')" clearable />
       </div>
       <div class="head-card-element">
         <el-text class="mx-1" size="large">{{ $t('common.market') }}：</el-text>
@@ -409,9 +538,10 @@ const format3 = (num) => {
         <!-- <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox> -->
       </div>
       <el-button type="primary" @click="search()">{{ $t('common.search') }}</el-button>
+      <el-button @click="reset" type="success">{{ $t('common.reset') }}</el-button>
       <el-button type="primary" @click="exportExcel()">{{ $t('common.exportExcel') }}</el-button>
+      <el-button type="primary" @click="selectWallet()">导出公司钱包明细</el-button>
       <el-button type="primary" @click="openExportList">{{ $t('common.viewExportList') }}</el-button>
-      <el-button @click="reset" type="success">{{ $t('common.reset') }}</el-button>
     </div>
     <!-- </div> -->
   </el-card>
@@ -572,6 +702,75 @@ const format3 = (num) => {
       </div>
     </template>
   </el-dialog>
+
+   <el-dialog v-model="selectWalletVisible" width="30%" top="20%" :before-close="closeSelectWallet">
+     <el-form :model="selectWalletForm" :rules="selectWalletRules" ref="selectWalletFormRef" label-width="120px">
+      <el-form-item label="公司钱包" prop="companyWalletId" style="margin-top: 30px;">
+        <el-select v-model="selectWalletForm.companyWalletId" placeholder="请选择公司钱包" style="width: 80%;">
+          <el-option v-for="item in companyWalletList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div style="display: flex; justify-content: flex-end;">
+        <el-button type="primary" @click="exportExcelOnlyOne()">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="walletDetailVisible" width="70%" top="20vh">
+    <template #header>
+      <div class="wallet-detail-header" style="display: flex; gap: 40px; justify-content: space-between; align-items: center; font-size: 16px;">
+        <span style="font-weight: bold; color: #F56C6C;">* {{ currentWalletInfo.walletName }}</span>
+        <span><span style="color: #F56C6C;">*</span> 用户: {{ currentWalletInfo.userName }} (ID: {{ currentWalletInfo.jwcode }})</span>
+        <span><span style="color: #F56C6C;">*</span> 地区: {{ currentWalletInfo.marketName }}</span>
+      </div>
+      <div style="margin-top: 15px; font-size: 16px;">
+        <span style="color: #F56C6C; font-weight: bold;">* 当前余额: {{ format3(currentWalletInfo.currentBalance || 0) }} 金币</span>
+      </div>
+    </template>
+    
+    <el-table :data="walletDetailList" v-loading="walletDetailLoading" style="width: 100%; height: 50vh; overflow-y: auto;" border stripe>
+      <el-table-column prop="time" label="时间" align="center" width="180">
+         <template #default="scope">{{ scope.row.time }}</template>
+      </el-table-column>
+      <el-table-column prop="type" label="交易类型" align="center" width="120" />
+      <el-table-column prop="amount" label="金额" align="center" width="120">
+        <template #default="scope">
+          <span :style="{ color: scope.row.amount >= 0 ? '#67C23A' : '#F56C6C', fontWeight: 'bold' }">
+            {{ scope.row.amount > 0 ? '+' + format3(scope.row.amount) : format3(scope.row.amount) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="desc" label="交易说明" align="center" />
+      <el-table-column prop="orderNo" label="交易单号" align="center" width="220" />
+      <el-table-column prop="status" label="交易状态" align="center" width="220" fixed="right">
+        <template #default="scope">
+          <el-tag :type="scope.row.status === 1 ? 'success' : scope.row.status === 2 ? 'danger' : 'info'" :effect="scope.row.status === 1 ? 'light' : 'plain'">
+            {{ scope.row.status === 1 ? '正常' : scope.row.status === 2 ? '已退款' : '异常数据' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <template #footer>
+      <div class="dialog-footer" style="display: flex; justify-content: space-between; align-items: center;">
+        <div class="pagination-container">
+           <el-pagination
+            background
+            :current-page="walletDetailQuery.pageNum"
+            :page-size="walletDetailQuery.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="walletDetailTotal"
+            @size-change="handleWalletDetailSizeChange"
+            @current-change="handleWalletDetailCurrentChange"
+          />
+        </div>
+        <el-button text @click="walletDetailVisible = false">{{ $t('common_export.close') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style scoped lang="scss">