合并完成导出excel找回

gold-system/.env.production

@@ -1,12 +1,5 @@
 # VITE_API_BASE='http://54.251.137.151:10702/'
-<<<<<<< HEAD
-<<<<<<< HEAD
-VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
-=======
-VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
-# VITE_API_BASE='http://192.168.8.220:8080/'
->>>>>>> zry
-=======
 VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
->>>>>>> a117177bbbe1dd3064874e0b27bedb0c3b15c3e3
+# VITE_API_BASE='http://192.168.8.220:8080/'
+

gold-system/src/views/goldBeen/goldenBeenDetail.vue

@@ -73,10 +73,65 @@
       <el-form-item>
         <el-button type="primary" @click="search">查询</el-button>
         <el-button type="success" @click="reset(ruleFormRef)">重置</el-button>
-        <el-button type="primary" @click="exportExcel">导出excel</el-button>
+        <el-button type="primary" @click="showExportInfoPanel = true">导出excel</el-button>
       </el-form-item>
     </el-form>
   </div>
+
+  <!-- 导出excel提前展示的信息面板 -->
+<el-dialog
+v-model="showExportInfoPanel"
+title="导出信息确认"
+width="400px"
+:close-on-click-modal="false"
+>
+<div class="info-panel-header">导出信息</div>
+<div v-if="!detailY.jwcode && !detailY.deptName && !detailY.orderNo && !detailY.type && !detailY.startTime && !detailY.endTime">
+  你正在导出所有数据
+</div>
+<div v-else>
+  你正在导出以下数据
+</div>
+<div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div>
+<div v-if="detailY.deptName">所属地区：{{ detailY.deptName || '' }}</div>
+<div v-if="detailY.orderNo">订单号：{{ detailY.orderNo || '' }}</div>
+<div v-if="detailY.type">充值类型：{{ detailY.type || '' }}</div>
+<div v-if="detailY.startTime || detailY.endTime">
+<span>更新时间：</span>
+<span>{{ detailY.startTime || '无起始时间' }} 至 {{ detailY.endTime || '无结束时间' }}</span>
+</div>
+<template #footer>
+<span class="dialog-footer">
+<el-button @click="showExportInfoPanel = false">取消</el-button>
+<el-button type="primary" @click="doExportExcel">导出</el-button>
+</span>
+</template>
+</el-dialog>
+
+
+<!-- 导出进度弹窗 -->
+<el-dialog
+v-model="isExporting"
+title="正在导出"
+width="400px"
+:close-on-click-modal="false"
+:show-close="false"
+>
+<el-progress 
+  :percentage="exportProgress" 
+  :stroke-width="15"
+  striped
+  animated
+/>
+<div class="export-status">
+  已导出 {{ exportedCount }} 条 / 共 {{ totalExport }} 条
+</div>
+<template #footer>
+<el-button type="danger" @click="cancelExport">取消导出</el-button>
+</template>
+</el-dialog>
+
+
   <div class="table-box">
     <div
       >金豆总数：充值金豆总数：{{ countValue }}，合计金额数：{{
@@ -136,7 +191,7 @@
     </div>
   </div>
   <!-- 这是导出excel的弹窗 -->
-  <el-dialog
+  <!-- <el-dialog
     v-model="dialogVisible"
     title="请选择导出条件"
     width="500"
@@ -198,16 +253,143 @@
         >
       </el-form>
     </template>
-  </el-dialog>
+  </el-dialog> -->
 </template>
 <script setup lang="ts">
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, onUnmounted } from 'vue'
 import { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http'
 import { utils, write } from 'xlsx'
 import { saveAs } from 'file-saver'
+
+const showExportInfoPanel = ref(false)
+const isExporting = ref(false)
+const exportProgress = ref(0)
+const totalExport = ref(0)
+const exportedCount = ref(0)
+let cancelToken: any = null
+let allExportData: any[] = []
+
+// 取消导出
+const cancelExport = () => {
+  if (cancelToken) {
+    cancelToken.cancel('导出已取消')
+  }
+  isExporting.value = false
+  exportProgress.value = 0
+  exportedCount.value = 0
+  allExportData = []
+  ElMessage.info('导出已取消')
+}
+
+// 导出 Excel
+const doExportExcel = async () => {
+  try {
+    isExporting.value = true
+    exportProgress.value = 0
+    exportedCount.value = 0
+    allExportData = []
+
+    // 获取总数据量
+    const totalResult = await API({
+      url: '/dou/getPay',
+      data: {
+        pay: {
+          jwcode: detailY.value.jwcode,
+          deptName: detailY.value.deptName,
+          startTime: detailY.value.startTime || '',
+          endTime: detailY.value.endTime || '',
+          payStyle: detailY.value.payStyle,
+          type: detailY.value.type,
+          orderNo: detailY.value.orderNo,
+          sortField: '',
+          sortOrder: ''
+        },
+        pageNum: 1,
+        pageSize: 1
+      }
+    })
+    totalExport.value = totalResult.data.total
+
+    if (totalExport.value === 0) {
+      ElMessage.error('没有数据可导出')
+      isExporting.value = false
+      return
+    }
+
+    const pageSize = 100 // 每批次获取 100 条数据
+    const totalPages = Math.ceil(totalExport.value / pageSize)
+
+    for (let page = 1; page <= totalPages; page++) {
+      if (!isExporting.value) break // 如果取消导出，停止循环
+
+      const result = await API({
+        url: '/dou/getPay',
+        data: {
+          pay: {
+            jwcode: detailY.value.jwcode,
+            deptName: detailY.value.deptName,
+            startTime: detailY.value.startTime || '',
+            endTime: detailY.value.endTime || '',
+            payStyle: detailY.value.payStyle,
+            type: detailY.value.type,
+            orderNo: detailY.value.orderNo,
+            sortField: '',
+            sortOrder: ''
+          },
+          pageNum: page,
+          pageSize: pageSize
+        }
+      })
+
+      const data = result.data.list
+      allExportData = allExportData.concat(data)
+      exportedCount.value = allExportData.length
+      exportProgress.value = Math.round((exportedCount.value / totalExport.value) * 100)
+    }
+
+    if (isExporting.value) {
+      // 导出的数据将字段映射
+      const exportData = allExportData.map((item) => {
+        return {
+          姓名: item.nickname,
+          精网号: item.jwcode,
+          地区: item.ipAddress,
+          订单号: item.orderNo,
+          金豆数量: item.money,
+          付费金豆: item.moneyBuy,
+          免费金豆: item.moneyFree,
+          金额: item.price,
+          类型: item.type,
+          充值时间: !!item.time ? moment.unix(item.time).format('YYYY-MM-DD HH:mm:ss') : '-'
+        }
+      })
+
+      const worksheet = utils.json_to_sheet(exportData)
+      const workbook = utils.book_new()
+      utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+      const wbout = write(workbook, { bookType: 'xlsx', type: 'array' })
+      saveAs(
+        new Blob([wbout], { type: 'application/octet-stream' }),
+        '金豆充值明细导出.xlsx'
+      )
+
+      showExportInfoPanel.value = false
+      isExporting.value = false
+      ElMessage.success('导出成功')
+    }
+  } catch (error) {
+    if (error.message === '导出已取消') {
+      return
+    }
+    console.log('导出失败', error)
+    isExporting.value = false
+    ElMessage.error('导出失败，请稍后重试')
+  }
+}
 // 充值明细表格
 const tableData = ref([])
 //分页总条目
@@ -257,13 +439,13 @@ const platformList = ref<string[]>([
   // 'system',
   // '金币系统'
 ])
-const typeList = ref<string[]>([
-  '金币换金豆',
-  '金币换免费金豆',
-  '赠送金豆',
-  '购买金豆',
-  '客服操作'
-])
+// const typeList = ref<string[]>([
+//   '金币换金豆',
+//   '金币换免费金豆',
+//   '赠送金豆',
+//   '购买金豆',
+//   '客服操作'
+// ])
 //搜索表单数据
 const detailY = ref({
   jwcode: '',
@@ -271,84 +453,86 @@ const detailY = ref({
   orderNo: '',
   payStyle: '',
   type: '',
-  createTime: ''
+  createTime: '',
+  startTime:'',
+  endTime:''
 })
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
-const exportExcel = function () {
-  dialogVisible.value = true
-  isExport.value = true
-}
-const exportConfirm = function () {
-  if (excelData.timegap == '1') {
-    excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '3') {
-    excelData.startTime = moment()
-      .subtract(3, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '7') {
-    excelData.startTime = moment()
-      .subtract(7, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '30') {
-    excelData.startTime = moment()
-      .subtract(30, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  }
-  getInit(
-    {
-      sortField: '',
-      sortOrder: ''
-    },
-    (data) => {
-      console.log('导出数据', data)
-      //导出的数据将字段映射
-      data = data.map((item) => {
-        return {
-          姓名: item.name,
-          精网号: item.jwcode,
-          地区: item.deptName,
-          订单号: item.orderNo,
-          充值平台: item.payStyle,
-          金豆数量: item.count,
-          充值时间: moment(item.successTime).format('YYYY-MM-DD'),
-          金额: item.price
-        }
-      })
-      if (data.length == 0) {
-        ElMessage.error('没有数据')
-        isExport.value = false
-        dialogVisible.value = false
-        return
-      }
-      console.log('导出数据', data)
-      excelExport(data)
-    }
-  )
-}
+// const exportExcel = function () {
+//   dialogVisible.value = true
+//   isExport.value = true
+// }
+// const exportConfirm = function () {
+//   if (excelData.timegap == '1') {
+//     excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
+//     excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+//   } else if (excelData.timegap == '3') {
+//     excelData.startTime = moment()
+//       .subtract(3, 'days')
+//       .startOf('day')
+//       .format('YYYY-MM-DD HH:mm:ss')
+//     excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+//   } else if (excelData.timegap == '7') {
+//     excelData.startTime = moment()
+//       .subtract(7, 'days')
+//       .startOf('day')
+//       .format('YYYY-MM-DD')
+//     excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+//   } else if (excelData.timegap == '30') {
+//     excelData.startTime = moment()
+//       .subtract(30, 'days')
+//       .startOf('day')
+//       .format('YYYY-MM-DD HH:mm:ss')
+//     excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+//   }
+//   getInit(
+//     {
+//       sortField: '',
+//       sortOrder: ''
+//     },
+//     (data) => {
+//       console.log('导出数据', data)
+//       //导出的数据将字段映射
+//       data = data.map((item) => {
+//         return {
+//           姓名: item.name,
+//           精网号: item.jwcode,
+//           地区: item.deptName,
+//           订单号: item.orderNo,
+//           充值平台: item.payStyle,
+//           金豆数量: item.count,
+//           充值时间: moment(item.successTime).format('YYYY-MM-DD'),
+//           金额: item.price
+//         }
+//       })
+//       if (data.length == 0) {
+//         ElMessage.error('没有数据')
+//         isExport.value = false
+//         dialogVisible.value = false
+//         return
+//       }
+//       console.log('导出数据', data)
+//       excelExport(data)
+//     }
+//   )
+// }
 //数据导出excel
-const excelExport = async function (data) {
-  const worksheet = utils.json_to_sheet(data)
-  const workbook = utils.book_new()
-  utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+// const excelExport = async function (data) {
+//   const worksheet = utils.json_to_sheet(data)
+//   const workbook = utils.book_new()
+//   utils.book_append_sheet(workbook, worksheet, 'Sheet1')
 
-  const wbout = write(workbook, { bookType: 'xlsx', type: 'array' })
-  saveAs(
-    new Blob([wbout], { type: 'application/octet-stream' }),
-    '数据导出.xlsx'
-  )
-  isExport.value = false
-  dialogVisible.value = false
-}
+//   const wbout = write(workbook, { bookType: 'xlsx', type: 'array' })
+//   saveAs(
+//     new Blob([wbout], { type: 'application/octet-stream' }),
+//     '数据导出.xlsx'
+//   )
+//   isExport.value = false
+//   dialogVisible.value = false
+// }
 const ruleFormRef = ref<FormInstance>()
 //初始化
 const getInit = async function (
@@ -359,7 +543,7 @@ const getInit = async function (
     sortField?: string
     sortOrder?: string
   },
-  callback?: Function
+  // callback?: Function
 ) {
   try {
     console.log('搜索参数', getObj.value)
@@ -370,40 +554,40 @@ const getInit = async function (
       url: '/dou/getPay',
       data: {
         pay: {
-          jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode,
-          deptName: isExport.value ? excelData.area : detailY.value.deptName,
-          startTime: isExport.value ? excelData.startTime : startTime || '',
-          endTime: isExport.value ? excelData.endTime : endTime || '',
-          payStyle: isExport.value ? '' : detailY.value.payStyle,
-          type: isExport.value ? '' : detailY.value.type,
-          orderNo: isExport.value ? '' : detailY.value.orderNo,
+          jwcode: detailY.value.jwcode,
+          deptName: detailY.value.deptName,
+          startTime: detailY.value.startTime || '',
+          endTime: detailY.value.endTime || '',
+          payStyle: detailY.value.payStyle,
+          type: detailY.value.type,
+          orderNo: detailY.value.orderNo,
           sortField,
           sortOrder
         },
-        pageNum: isExport.value ? '' : getObj.value.pageNum,
-        pageSize: isExport.value ? '' : getObj.value.pageSize
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize
       }
     })
 
-    if (isExport.value) {
-      !!callback && callback(result.data)
-    } else {
+    // if (isExport.value) {
+    //   !!callback && callback(result.data)
+    // } else {
       tableData.value = result.data.list
       total.value = result.data.total
-    }
+    // }
   } catch (error) {
     console.log('请求失败', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// const handleSortChange = (column) => {
-//   const { prop, order } = column
-//   if (order === 'ascending') {
-//     getInit({ sortField: prop, sortOrder: 'ASC' })
-//   } else if (order === 'descending') {
-//     getInit({ sortField: prop, sortOrder: 'DESC' })
-//   }
-// }
+const handleSortChange = (column) => {
+  const { prop, order } = column
+  if (order === 'ascending') {
+    getInit({ sortField: prop, sortOrder: 'ASC' })
+  } else if (order === 'descending') {
+    getInit({ sortField: prop, sortOrder: 'DESC' })
+  }
+}
 // 精网号、订单号、充值类型去空格
 const trim = () => {
   if (detailY.value.jwcode) {
@@ -507,4 +691,37 @@ onMounted(() => {
   align-items: center;
   margin-top: 10px;
 }
+
+
+.filter-box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  padding-bottom: 0px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  border-radius: 5px;
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 20px;
+    column-gap: 20px;
+  }
+}
+.table-box {
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+.pagination {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
 </style>

gold-system/src/views/goldBeen/onLineDetail.vue

@@ -2,10 +2,9 @@
   <!-- 这是线上充值明细页面 -->
 
   <!-- 这是搜索表单 -->
-   <!-- 咱就是说为什么不加注释！ -->
   <div class="filter-box">
     <el-form :model="detailY" ref="ruleFormRef">
-      <el-form-item prop="jwcode" >
+      <el-form-item prop="jwcode">
         <el-text class="mx-1" size="large">精网号：</el-text>
         <el-input
           v-model="detailY.jwcode"
@@ -37,13 +36,6 @@
           style="width: 220px"
         />
       </el-form-item>
-      <!-- <el-form-item prop="type" label="充值类型">
-        <el-input
-          v-model="detailY.type"
-          placeholder="请输入充值类型"
-          style="width: 220px"
-        />
-      </el-form-item> -->
       <el-form-item prop="payStyle">
         <el-text class="mx-1" size="large">充值平台：</el-text>
         <el-select
@@ -72,15 +64,17 @@
           value-format="YYYY-MM-DD HH:mm:ss"
           :unlinkPanels="true"
         />
+        <el-button style="margin-left: 10px" @click="getToday()">今</el-button>
+        <el-button @click="getYesterday()">昨</el-button>
+        <el-button @click="get7Days()">近7天</el-button>
       </el-form-item>
       <el-col :span="10">
         <el-form-item>
           <el-button type="primary" @click="search">查询</el-button>
           <el-button type="success" @click="reset(ruleFormRef)">重置</el-button>
-        <el-button type="primary" @click="exportExcel">导出excel</el-button>
+          <el-button type="primary" @click="showExportInfoPanel = true">导出excel</el-button>
         </el-form-item>
       </el-col>
-
     </el-form>
   </div>
   <div class="table-box">
@@ -97,17 +91,9 @@
       <el-table-column fixed="left" prop="jwcode" label="精网号" width="120" />
       <el-table-column prop="deptName" label="地区" width="120" />
       <el-table-column prop="orderNo" label="订单号" width="120" />
-      <el-table-column prop="count" label="金豆数量" width="120">
-      </el-table-column>
-      <!-- <el-table-column prop="moneyBuy" label="付费金豆" width="120">
-      </el-table-column>
-      <el-table-column prop="moneyFree" label="免费金豆" width="120">
-      </el-table-column> -->
-      <el-table-column prop="price" label="金额"></el-table-column>
-      <!-- <el-table-column prop="type" label="类型"></el-table-column> -->
-      <el-table-column prop="payStyle" label="充值平台" width="140">
-      </el-table-column>
-      <!-- <el-table-column prop="notes" label="备注" width="210"></el-table-column> -->
+      <el-table-column prop="count" label="金豆数量" width="120" />
+      <el-table-column prop="price" label="金额" />
+      <el-table-column prop="payStyle" label="充值平台" width="140" />
       <el-table-column
         prop="successTime"
         label="充值时间"
@@ -117,7 +103,7 @@
         <template #default="scope">
           <span>{{
             !!scope.row.successTime
-              ? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss')
+              ? moment.unix(scope.row.successTime).format('YYYY-MM-DD HH:mm:ss')
               : '-'
           }}</span>
         </template>
@@ -137,91 +123,73 @@
       </el-pagination>
     </div>
   </div>
-  <!-- 这是导出excel的弹窗 -->
+
+  <!-- 导出excel提前展示的信息面板 -->
   <el-dialog
-    v-model="dialogVisible"
-    title="请选择导出条件"
-    width="500"
+    v-model="showExportInfoPanel"
+    title="导出信息确认"
+    width="400px"
     :close-on-click-modal="false"
-    @close="
-      () => {
-        dialogVisible = false
-        isExport = false
-      }
-    "
   >
+    <div class="info-panel-header">导出信息</div>
+    <div v-if="!detailY.jwcode && !detailY.deptName && !detailY.orderNo && !detailY.payStyle && (!Array.isArray(detailY.createTime) || !detailY.createTime.length)">
+      你正在导出所有数据
+    </div>
+    <div v-else>
+      你正在导出以下数据
+    </div>
+    <div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div>
+    <div v-if="detailY.deptName">所属地区：{{ detailY.deptName || '' }}</div>
+    <div v-if="detailY.orderNo">订单号：{{ detailY.orderNo || '' }}</div>
+    <div v-if="detailY.payStyle">充值平台：{{ platformList.find(item => item === detailY.payStyle) || '' }}</div>
+    <div v-if="Array.isArray(detailY.createTime) && detailY.createTime.length">
+      <span>更新时间：</span>
+      <span>{{ detailY.createTime[0] || '无起始时间' }} 至 {{ detailY.createTime[1] || '无结束时间' }}</span>
+    </div>
     <template #footer>
-      <el-form
-        ref="ruleFormRef"
-        style="max-width: 600px"
-        :model="excelData"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        status-icon
-      >
-        <el-form-item prop="activityName" label="精网号:">
-          <el-input
-            v-model="excelData.jwcode"
-            placeholder="请输入精网号"
-            style="width: 220px"
-          />
-        </el-form-item>
-        <el-form-item label="所属地区："
-          ><el-select
-            v-model="excelData.area"
-            placeholder="请选择所属地区"
-            style="width: 240px"
-            clearable
-          >
-            <el-option
-              v-for="item in areaList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
+      <span class="dialog-footer">
+        <el-button @click="showExportInfoPanel = false">取消</el-button>
+        <el-button type="primary" @click="doExportExcel">导出</el-button>
+      </span>
+    </template>
+  </el-dialog>
 
-        <el-form-item label="更新时间：">
-          <el-radio-group v-model="excelData.timegap">
-            <el-radio value="1">今天</el-radio>
-            <el-radio value="3">近三天</el-radio>
-            <el-radio value="7">近一周</el-radio>
-            <el-radio value="30">近一个月</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-button
-          type="primary"
-          size="small"
-          style="margin-left: 10px"
-          @click="exportConfirm()"
-          >确定</el-button
+  <!-- 导出进度弹窗 -->
+  <el-dialog
+    v-model="isExporting"
+    title="正在导出"
+    width="400px"
+    :close-on-click-modal="false"
+    :show-close="false"
   >
-      </el-form>
+    <el-progress 
+      :percentage="exportProgress" 
+      :stroke-width="15"
+      striped
+      animated
+    />
+    <div class="export-status">
+      已导出 {{ Math.round((exportProgress / 100) * totalExport) }} 条 / 共 {{ totalExport }} 条
+    </div>
+    <template #footer>
+      <el-button type="danger" @click="cancelExport">取消导出</el-button>
     </template>
   </el-dialog>
 </template>
+
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { FormInstance } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http'
 import { utils, write } from 'xlsx'
 import { saveAs } from 'file-saver'
+
 // 充值明细表格
 const tableData = ref([])
-//分页总条目
+// 分页总条目
 const total = ref(100)
-const dialogVisible = ref(false)
-const excelData = reactive({
-  jwcode: '',
-  area: '',
-  timegap: '',
-  startTime: '',
-  endTime: ''
-})
 const priceValue = ref(0)
 const countValue = ref(0)
 const areaList = ref<string[]>([])
@@ -230,193 +198,137 @@ const rules = ref({
   jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
   area: [{ required: true, message: '请选择所属地区', trigger: 'change' }]
 })
-const handlePageSizeChange = (val) => {
+const platformList = ref<string[]>([])
+
+// 今天
+const getToday = () => {
+  const today = new Date()
+  // 格式化开始时间
+  const startDate = moment(today).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  // 格式化结束时间
+  const endDate = moment(today).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  detailY.value.createTime = [startDate, endDate]
+  search()
+}
+
+// 昨天
+const getYesterday = () => {
+  const yesterday = moment().subtract(1, 'days')
+  // 格式化开始时间
+  const startDate = yesterday.startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  // 格式化结束时间
+  const endDate = yesterday.endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  detailY.value.createTime = [startDate, endDate]
+  search()
+}
+
+// 近7天
+const get7Days = () => {
+  // 格式化开始时间
+  const startDate = moment().subtract(6, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss')
+  // 格式化结束时间
+  const endDate = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  detailY.value.createTime = [startDate, endDate]
+  search()
+}
+
+const handlePageSizeChange = (val: number) => {
   getObj.value.pageSize = val
   getObj.value.pageNum = 1
   getInit({})
 }
-const handleCurrentChange = function (val) {
+
+const handleCurrentChange = (val: number) => {
   getObj.value.pageNum = val
   getInit({})
 }
-const platformList = ref<string[]>([
-  // 'stripe',
-  // 'ios',
-  // 'FirstData',
-  // 'paymentasia',
-  // 'system',
-  // '金币系统'
-])
-const typeList = ref<string[]>([
-  '金币换金豆',
-  '金币换免费金豆',
-  '赠送金豆',
-  '购买金豆',
-  '客服操作'
-])
-
-
-//搜索表单数据
+
+// 搜索表单数据
 const detailY = ref({
   jwcode: '',
   deptName: '',
   orderNo: '',
   payStyle: '',
   type: '',
-  createTime: ''
+  createTime: [] as [string, string] | []
 })
+
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
-const exportExcel = function () {
-  dialogVisible.value = true
-  isExport.value = true
-}
-const exportConfirm = function () {
-  if (excelData.timegap == '1') {
-    excelData.startTime = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '3') {
-    excelData.startTime = moment()
-      .subtract(3, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '7') {
-    excelData.startTime = moment()
-      .subtract(7, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  } else if (excelData.timegap == '30') {
-    excelData.startTime = moment()
-      .subtract(30, 'days')
-      .startOf('day')
-      .format('YYYY-MM-DD HH:mm:ss')
-    excelData.endTime = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  }
-  getInit(
-    {
-      sortField: '',
-      sortOrder: ''
-    },
-    (data) => {
-      console.log('导出数据', data)
-      //导出的数据将字段映射
-      data = data.map((item) => {
-        return {
-          姓名: item.name,
-          精网号: item.jwcode,
-          地区: item.deptName,
-          订单号: item.orderNo,
-          充值平台: item.payStyle,
-          金豆数量: item.count,
-          充值时间: moment(item.successTime).format('YYYY-MM-DD'),
-          金额: item.price
-        }
-      })
-      if (data.length == 0) {
-        ElMessage.error('没有数据')
-        isExport.value = false
-        dialogVisible.value = false
-        return
-      }
-      console.log('导出数据', data)
-      excelExport(data)
-    }
-  )
-}
-//数据导出excel
-const excelExport = async function (data) {
-  const worksheet = utils.json_to_sheet(data)
-  const workbook = utils.book_new()
-  utils.book_append_sheet(workbook, worksheet, 'Sheet1')
 
-  const wbout = write(workbook, { bookType: 'xlsx', type: 'array' })
-  saveAs(
-    new Blob([wbout], { type: 'application/octet-stream' }),
-    '数据导出.xlsx'
-  )
-  isExport.value = false
-  dialogVisible.value = false
-}
 const ruleFormRef = ref<FormInstance>()
-//初始化
-const getInit = async function (
+
+// 初始化
+const getInit = async (
   {
     sortField = '',
     sortOrder = ''
   }: {
     sortField?: string
     sortOrder?: string
-  },
-  callback?: Function
-) {
+  }
+) => {
   try {
     console.log('搜索参数', getObj.value)
-    const [startTime, endTime] = detailY.value.createTime
+    let startTime = ''
+    let endTime = ''
+    if (Array.isArray(detailY.value.createTime) && detailY.value.createTime.length === 2) {
+      [startTime, endTime] = detailY.value.createTime
+    }
     console.log(startTime, endTime)
     // 发送POST请求
     const result = await API({
       url: '/dou/SearchPay',
       data: {
         pay: {
-          jwcode: isExport.value ? excelData.jwcode : detailY.value.jwcode,
-          deptName: isExport.value ? excelData.area : detailY.value.deptName,
-          startTime: isExport.value ? excelData.startTime : startTime || '',
-          endTime: isExport.value ? excelData.endTime : endTime || '',
-          payStyle: isExport.value ? '' : detailY.value.payStyle,
-          // type: isExport.value ? '' : detailY.value.type,
-          orderNo: isExport.value ? '' : detailY.value.orderNo,
+          jwcode: detailY.value.jwcode,
+          deptName: detailY.value.deptName,
+          startTime: startTime || '',
+          endTime: endTime || '',
+          payStyle: detailY.value.payStyle,
+          orderNo: detailY.value.orderNo,
           sortField,
           sortOrder
         },
-        pageNum: isExport.value ? '' : getObj.value.pageNum,
-        pageSize: isExport.value ? '' : getObj.value.pageSize
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize
       }
     })
 
-    if (isExport.value) {
-      !!callback && callback(result.data)
-    } else {
     tableData.value = result.data.list
     total.value = result.data.total
-    }
   } catch (error) {
     console.log('请求失败', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// const handleSortChange = (column) => {
-//   const { prop, order } = column
-//   if (order === 'ascending') {
-//     getInit({ sortField: prop, sortOrder: 'ASC' })
-//   } else if (order === 'descending') {
-//     getInit({ sortField: prop, sortOrder: 'DESC' })
-//   }
-// }
+
 // 精网号、订单号去空格
 const trimJwCode = () => {
   if (detailY.value.jwcode) {
-    detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); 
+    detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, '')
   }
   if (detailY.value.orderNo) {
-    detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, ''); 
+    detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, '')
   }
 }
+
 // 搜索
-const search = function () {
-  trimJwCode();
+const search = () => {
+  trimJwCode()
   getObj.value.pageNum = 1
   getInit({})
   getCount()
 }
+
 // 重置
-const reset = function (formEl) {
+const reset = (formEl: FormInstance) => {
   formEl.resetFields()
 }
-//充值平台接口
+
+// 充值平台接口
 const getPayPlatform = async () => {
   try {
     const result = await API({
@@ -427,7 +339,8 @@ const getPayPlatform = async () => {
     console.log('请求失败', error)
   }
 }
-//获取地区接口
+
+// 获取地区接口
 const getArea = async () => {
   try {
     const result = await API({
@@ -438,33 +351,39 @@ const getArea = async () => {
     console.log('请求失败', error)
   }
 }
-//获取支付方式接口
+
+// 获取支付方式接口
 const getPayType = async () => {
   try {
     const result = await API({
       url: '/dou/getStyle'
     })
     platformList.value = result.data
-    // typeList.value = result.data
   } catch (error) {
     console.log('请求失败', error)
   }
 }
-//获取金豆数接口
+
+// 获取金豆数接口
 const getCount = async () => {
   try {
+    let startTime = ''
+    let endTime = ''
+    if (Array.isArray(detailY.value.createTime) && detailY.value.createTime.length === 2) {
+      [startTime, endTime] = detailY.value.createTime
+    }
     const result = await API({
       url: '/dou/getRechargeTotal',
       data: {
         jwcode: detailY.value.jwcode,
         deptName: detailY.value.deptName,
-        startTime: detailY.value.createTime[0],
-        endTime: detailY.value.createTime[1],
+        startTime: startTime || '',
+        endTime: endTime || '',
         orderNo: detailY.value.orderNo,
         payStyle: detailY.value.payStyle
       }
     })
-    if (!!result.data) {
+    if (result.data) {
       console.log('合计数', result.data)
       const { priceTotal, countTotal } = result.data
       console.log('金豆总数', priceTotal, countTotal)
@@ -478,12 +397,141 @@ const getCount = async () => {
     console.log('请求失败', error)
   }
 }
-getInit({})
-getArea()
-getPayType()
-getCount()
-getPayPlatform()
+
+// 导出相关变量
+const showExportInfoPanel = ref(false)
+const isExporting = ref(false)
+const exportProgress = ref(0)
+const totalExport = ref(0)
+let allExportData: any[] = []
+let cancelToken: any = null
+
+// 取消导出
+const cancelExport = () => {
+  if (cancelToken) {
+    cancelToken.cancel('导出已取消')
+  }
+  isExporting.value = false
+  exportProgress.value = 0
+  allExportData = []
+  ElMessage.info('导出已取消')
+}
+
+// 导出 Excel
+const doExportExcel = async () => {
+  try {
+    isExporting.value = true
+    exportProgress.value = 0
+    allExportData = []
+
+    let startTime = ''
+    let endTime = ''
+    if (Array.isArray(detailY.value.createTime) && detailY.value.createTime.length === 2) {
+      [startTime, endTime] = detailY.value.createTime
+    }
+
+    // 获取总数据量
+    const totalResult = await API({
+      url: '/dou/SearchPay',
+      data: {
+        pay: {
+          jwcode: detailY.value.jwcode,
+          deptName: detailY.value.deptName,
+          startTime: startTime || '',
+          endTime: endTime || '',
+          payStyle: detailY.value.payStyle,
+          orderNo: detailY.value.orderNo
+        },
+        pageNum: 1,
+        pageSize: 1
+      }
+    })
+    totalExport.value = totalResult.data.total
+
+    if (totalExport.value === 0) {
+      ElMessage.error('没有数据可导出')
+      isExporting.value = false
+      showExportInfoPanel.value = false
+      return
+    }
+
+    const pageSize = 100 // 每批次获取 100 条数据
+    const totalPages = Math.ceil(totalExport.value / pageSize)
+
+    for (let page = 1; page <= totalPages; page++) {
+      if (!isExporting.value) break // 如果取消导出，停止循环
+
+      const result = await API({
+        url: '/dou/SearchPay',
+        data: {
+          pay: {
+            jwcode: detailY.value.jwcode,
+            deptName: detailY.value.deptName,
+            startTime: startTime || '',
+            endTime: endTime || '',
+            payStyle: detailY.value.payStyle,
+            orderNo: detailY.value.orderNo
+          },
+          pageNum: page,
+          pageSize: pageSize
+        }
+      })
+
+      const data = result.data.list
+      allExportData = allExportData.concat(data)
+      const exportedCount = allExportData.length
+      exportProgress.value = Math.round((exportedCount / totalExport.value) * 100)
+    }
+
+    if (isExporting.value) {
+      // 导出的数据将字段映射
+      const exportData = allExportData.map((item) => {
+        return {
+          姓名: item.name,
+          精网号: item.jwcode,
+          地区: item.deptName,
+          订单号: item.orderNo,
+          金豆数量: item.count,
+          金额: item.price,
+          充值平台: item.payStyle,
+          充值时间: !!item.successTime ? moment.unix(item.successTime).format('YYYY-MM-DD HH:mm:ss') : '-'
+        }
+      })
+
+      const worksheet = utils.json_to_sheet(exportData)
+      const workbook = utils.book_new()
+      utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+      const wbout = write(workbook, { bookType: 'xlsx', type: 'array' })
+      saveAs(
+        new Blob([wbout], { type: 'application/octet-stream' }),
+        '线上充值明细导出.xlsx'
+      )
+
+      isExporting.value = false
+      showExportInfoPanel.value = false
+      ElMessage.success('导出成功')
+    }
+  } catch (error) {
+    if (error instanceof Error && error.message === '导出已取消') {
+      return
+    }
+    console.log('导出失败', error)
+    isExporting.value = false
+    showExportInfoPanel.value = false
+    ElMessage.error('导出失败，请稍后重试')
+  }
+}
+
+onMounted(() => {
+  getInit({})
+  getArea()
+  getPayType()
+  getCount()
+  getPayPlatform()
+})
 </script>
+
 <style scoped lang="scss">
 .filter-box {
   width: 100%;
@@ -516,3 +564,4 @@ getPayPlatform()
   margin-top: 10px;
 }
 </style>
+

gold-system/src/views/usergold/index.vue

@@ -426,12 +426,17 @@ const handleCurrentChange = function (val) {
     :close-on-click-modal="false"
   >
     <div class="info-panel-header">导出信息</div>
-    <div>你正在导出以下数据</div>
     <!-- 直接使用 detailY 显示信息，添加可选链操作符 -->
     <!-- detailY是一个ref，所以在模板中应该直接使用detailY.consumePlatform，
      而不是detailY.value.consumePlatform。
      因为在模板中，ref变量会自动解包，不需要.value。
-     例如，在代码中，用户可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 -->
+     例如，在代码中，我们可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 -->
+    <div v-if="!detailY.jwcode && !detailY.consumePlatform && !detailY.num && !detailY.area && (getTime.length < 2)">
+      你正在导出所有数据
+    </div>
+    <div v-else>
+      你正在导出以下数据
+    </div>
     <div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div>
     <div v-if="detailY.consumePlatform">平台信息：{{ detailY.consumePlatform ? (platform.find(item => item.value === detailY.consumePlatform)?.label) : '' }}</div>
     <div v-if="detailY.num">数量更新类型：{{ detailY.num ? (num.find(item => item.value === detailY.num)?.label || '') : '' }}</div>