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

<template>
  <!-- 这是线上充值明细页面 -->
  <div class="filter-box">
    <el-form :model="detailY" ref="ruleFormRef">
      <el-form-item prop="jwcode" >
        <el-text class="mx-1" size="large">精网号：</el-text>
        <el-input
          v-model="detailY.jwcode"
          placeholder="请输入精网号"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item prop="deptName">
        <el-text class="mx-1" size="large">地区：</el-text>
        <el-select
          v-model="detailY.deptName"
          placeholder="请选择所属地区"
          style="width: 240px"
          clearable
        >
          <el-option
            v-for="item in areaList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="orderNo">
        <el-text class="mx-1" size="large">订单号：</el-text>
        <el-input
          v-model="detailY.orderNo"
          placeholder="请输入订单号"
          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
          v-model="detailY.payStyle"
          placeholder="请选择充值平台"
          style="width: 240px"
          clearable
        >
          <el-option
            v-for="item in platformList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="createTime">
        <el-text class="mx-1" size="large">充值时间：</el-text>
        <el-date-picker
          v-model="detailY.createTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          :unlinkPanels="true"
        />
      </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-form-item>
      </el-col>

    </el-form>
  </div>
  <div class="table-box">
    <div>金豆总数：充值金豆总数：{{ countValue }}，合计金额数：{{ priceValue }}</div>
    <el-table :data="tableData" style="width: 100%" height="584px">
      <el-table-column type="index" label="序号" width="100px" fixed="left">
        <template #default="scope">
          <span>{{
            scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" prop="name" label="姓名" width="150" />
      <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="successTime"
        label="充值时间"
        width="210"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span>{{
            !!scope.row.successTime
              ? moment.unix(scope.row.time).format('YYYY-MM-DD HH:mm:ss')
              : '-'
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :page-size="getObj.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
  <!-- 这是导出excel的弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="请选择导出条件"
    width="500"
    :close-on-click-modal="false"
    @close="
      () => {
        dialogVisible = false
        isExport = false
      }
    "
  >
    <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>

        <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-form>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } 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[]>([])
const isExport = ref<boolean>(false)
const rules = ref({
  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
  area: [{ required: true, message: '请选择所属地区', trigger: 'change' }]
})
const handlePageSizeChange = (val) => {
  getObj.value.pageSize = val
  getObj.value.pageNum = 1
  getInit({})
}
const handleCurrentChange = function (val) {
  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: ''
})
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 (
  {
    sortField = '',
    sortOrder = ''
  }: {
    sortField?: string
    sortOrder?: string
  },
  callback?: Function
) {
  try {
    console.log('搜索参数', getObj.value)
    const [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,
          sortField,
          sortOrder
        },
        pageNum: isExport.value ? '' : getObj.value.pageNum,
        pageSize: isExport.value ? '' : 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, ''); 
  }
  if (detailY.value.orderNo) {
    detailY.value.orderNo = detailY.value.orderNo.replace(/\s/g, ''); 
  }
}
// 搜索
const search = function () {
  trimJwCode();
  getObj.value.pageNum = 1
  getInit({})
  getCount()
}
// 重置
const reset = function (formEl) {
  formEl.resetFields()
}
//充值平台接口
const getPayPlatform = async () => {
  try {
    const result = await API({
      url: '/dou/SearchStyle'
    })
    platformList.value = result.data
  } catch (error) {
    console.log('请求失败', error)
  }
}
//获取地区接口
const getArea = async () => {
  try {
    const result = await API({
      url: '/dou/SearchPayIp'
    })
    areaList.value = result.data
  } catch (error) {
    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 {
    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],
        orderNo: detailY.value.orderNo,
        payStyle: detailY.value.payStyle
      }
    })
    if (!!result.data) {
      console.log('合计数', result.data)
      const { priceTotal, countTotal } = result.data
      console.log('金豆总数', priceTotal, countTotal)
      priceValue.value = priceTotal
      countValue.value = countTotal
    } else {
      priceValue.value = 0
      countValue.value = 0
    }
  } catch (error) {
    console.log('请求失败', error)
  }
}
getInit({})
getArea()
getPayType()
getCount()
getPayPlatform()
</script>
<style scoped lang="scss">
.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>