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

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import ElementPlus from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import moment from 'moment'
import { ta } from 'element-plus/es/locales.mjs'
import API from '@/util/http'
import { writeFile, utils } from 'xlsx'
// 变量
//这是获取用户信息的接口
const adminData = ref({})
const getAdminData = async function () {
  try {
    const result = await API({
      url: '/admin/userinfo',
      method: 'post',
      data: {}
    })
    adminData.value = result
    console.log('请求成功', result)
    console.log('用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}
// 充值明细表格
const tableData = ref([])
// 计算用户各金币总数的不分页对象
// const tableAllData = ref([]);
// 各金币总数
const rechargeCoin = ref(0)
const freeCoin = ref(0)
const taskCoin = ref(0)
// 搜索===========================================
//分页总条目
const total = ref(100)
// 搜索对象时间
const getTime = ref([])
// 搜索detailY
const detailY = ref({})
// 不分页的搜索对象
const getAllObj = ref({})
// 搜索对象
const getObj = ref({
  pageNum: 1,
  pageSize: 50
})
//开启条件筛选导出excel
const getPutEX = ref(false)

// 支付方式选项
const num = [
  {
    value: '1',
    label: '增加'
  },
  {
    value: '2',
    label: '减少'
  }
]

// //表格高度
// const tableHeight = computed(function () {
//   return (getObj.value.pageSize + 2) * 38 + "px";
// });

// 方法
// 搜索===========================================================================
// 搜索方法
const get = async function (val) {
  try {
    // 地区赋值
    if (adminData.value.area === '泰国') {
      detailY.value.areas = ['泰国', '越南']
    } else if (adminData.value.area !== '总部') {
      detailY.value.area = adminData.value.area
    }
    // 搜索参数页码赋值
    if (typeof val === 'number') {
      getObj.value.pageNum = val
    }
    // 搜索参数时间赋值
    if (getTime.value != null) {
      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
        detailY.value.startDate = getTime.value[0]
        detailY.value.endDate = getTime.value[1]
      }
    } else {
      detailY.value.startDate = ''
      detailY.value.endDate = ''
    }
    // 添加排序字段和排序方式到请求参数
    detailY.value.sortField = sortField.value
    detailY.value.sortOrder = sortOrder.value
    console.log('搜索参数', getObj.value)
    // 发送POST请求
    const result = await API({
      url: '/detailY',
      method: 'post',
      data: { ...getObj.value, detailY: { ...detailY.value } }
    })
    // const result2 = await API.post("http://54.251.137.151:10702/detailY", {
    //   ...getAllObj.value,
    //   detailY: { ...detailY.value },
    // });
    // 将响应结果存储到响应式数据中
    console.log('请求成功', result)
    // console.log("请求成功2", result2);
    // 存储表格数据
    tableData.value = result.data.list
    console.log('tableData', tableData.value)
    // tableAllData.value = result2.data;
    // console.log("tableAllData", tableAllData.value);
    // 存储分页总数
    total.value = result.data.total
    console.log('total', total.value)
    // 计算各金币总数并除以100
    // 下列各数除以100，并最多显示两位小数
    // rechargeCoin.value = parseFloat((tableAllData.value.sumR / 100).toFixed(2));
    // freeCoin.value = parseFloat((tableAllData.value.sumF / 100).toFixed(2));
    // taskCoin.value = parseFloat((tableAllData.value.sumT / 100).toFixed(2));
    // for (let i = 0; i < tableAllData.value.length; i++) {
    //   rechargeCoin.value += tableAllData.value[i].rechargeCoin;
    //   freeCoin.value += tableAllData.value[i].freeCoin;
    //   taskCoin.value += tableAllData.value[i].taskCoin;
    // }
    // console.log(
    //   "各金币总数",
    //   rechargeCoin.value,
    //   freeCoin.value,
    //   taskCoin.value
    // );
  } catch (error) {
    console.log('请求失败', error)
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
}
// 搜索
const search = function () {
  getObj.value.pageNum = 1
  get()
}
// 重置
const reset = function () {
  // 删除精网号字段
  delete detailY.value.jwcode
  // 删除更新类型字段
  delete detailY.value.num
  // 删除开始时间字段
  delete detailY.value.startDate
  // 删除结束时间字段
  delete detailY.value.endDate
  // 删除所属地区字段
  delete detailY.value.area
  delete sortField.value
  delete sortOrder.value
  getTime.value = {}
  // 删除平台信息字段
  delete detailY.value.consumePlatform
}
// 今天
const getToday = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate()
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  getTime.value = [startDate, endDate]
  console.log('getTime', getTime.value)
  get()
}
// 昨天
const getYesterday = function () {
  const yesterday = new Date()
  yesterday.setDate(yesterday.getDate() - 1)
  const startDate = new Date(
    yesterday.getFullYear(),
    yesterday.getMonth(),
    yesterday.getDate()
  )
  const endDate = new Date(
    yesterday.getFullYear(),
    yesterday.getMonth(),
    yesterday.getDate() + 1
  )
  getTime.value = [startDate, endDate]
  console.log('getTime', getTime.value)
  get()
}
// 近7天
const get7Days = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() - 6
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  getTime.value = [startDate, endDate]
  console.log('getTime', getTime.value)
  get()
}

// 验证跳转输入框的数字是否合法
const checkNumber = function () {
  if (typeof parseInt(getObj.value.pageNum) === 'number') {
    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
    if (
      getObj.value.pageNum > 0 &&
      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
    ) {
      getObj.value.pageNum = parseInt(getObj.value.pageNum)
      console.log('输入的数字合法')
      get()
    } else {
      //提示
      ElMessage({
        type: 'error',
        message: '请检查输入内容'
      })
    }
  } else {
    //提示
    ElMessage({
      type: 'error',
      message: '请检查输入内容'
    })
  }
}

// 挂载
onMounted(async function () {
  await getAdminData()
  await get()
})

// 这是导出excel表格的方法
// 导出Excel的方法
// 定义字段映射
const json_fields = (row) => {
  return [
    row.jwcode, // 姓名
    row.area, // 精网号
    row.platform, // 所属地区
    row.consumePlatform, // 平台信息
    row.gold, // 更新数量
    row.rechargeCoin, // 免费金币
    row.freeCoin, // 永久金币
    row.taskCoin, // 任务金币
    row.createAdmin, // 提交人
    row.createTime,
    row.name,
    row.id
  ]
}

// 定义元数据
const json_meta = [
  [
    {
      key: 'charset',
      value: 'utf-8'
    }
  ]
]
const headers = [
  '精网号',
  '地区',
  '平台信息',
  '数量',
  '数量更新类型',
  '永久金币',
  '免费金币',
  '任务金币',
  '提交人',
  '更新时间',
  '用户名',
  'id'
]
const exportExcel = () => {
  // 先将 json_fields 应用到数据上
  const data = excelInfo.value.map(json_fields)
  const ws = utils.aoa_to_sheet(data)
  // 添加表头到工作表
  utils.sheet_add_aoa(ws, [headers], { origin: 'A1' })
  const wb = utils.book_new()
  utils.book_append_sheet(wb, ws, 'Sheet1')
  writeFile(wb, '客户金币明细.xlsx')
}
const today = new Date()
const startDate = new Date(
  today.getFullYear(),
  today.getMonth(),
  today.getDate()
)
const endDate = new Date(
  today.getFullYear(),
  today.getMonth(),
  today.getDate() + 1
)
const putExcel = ref({
  startDate: startDate,
  endDate: endDate
})
const excelInfo = ref({})
const loading = ref(false)
const areyour = async function () {
  try {
    loading.value = true
    const result = await API({
      url: '/detailY/searchAll',
      method: 'post',
      data: { ...putExcel.value }
    })
    excelInfo.value = result.data

    // 处理 excelInfo 中的数据
    if (Array.isArray(excelInfo.value)) {
      excelInfo.value.forEach((item) => {
        if (item.rechargeCoin) {
          item.rechargeCoin = item.rechargeCoin / 100
        }
        if (item.freeCoin) {
          item.freeCoin = item.freeCoin / 100
        }
        if (item.taskCoin) {
          item.taskCoin = item.taskCoin / 100
        }
      })
    }

    areyouright.value = true
    ElMessage({
      type: 'success',
      message: '查询成功'
    })
    loading.value = false
  } catch (error) {
    console.log('请求失败', error)
    loading.value = false
  }
}

const areyouright = ref(false)

//选地区
const area = [
  {
    value: '马来西亚',
    label: '马来西亚'
  },
  {
    value: '新加坡',
    label: '新加坡'
  },
  {
    value: '香港',
    label: '香港'
  },
  {
    value: '泰国',
    label: '泰国'
  },
  {
    value: '加拿大',
    label: '加拿大'
  },
  {
    value: '越南HCM',
    label: '越南HCM'
  }
]
//选消费平台
const platform = [
  {
    value: '4',
    label: '金币系统'
  },

  {
    value: '1',
    label: 'ERP系统'
  },
  {
    value: '2',
    label: 'Homily Chart'
  },
  {
    value: '3',
    label: 'Homily Link'
  },
  {
    value: '0',
    label: '初始化金币'
  }
]
const TimeGet = ref('1')

// 今天
const getT = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate()
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  putExcel.value.startDate = startDate
  putExcel.value.endDate = endDate
  console.log('putExcel', putExcel.value)
}
//3天
const get3 = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() - 2
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  putExcel.value.startDate = startDate
  putExcel.value.endDate = endDate
  console.log('putExcel', putExcel.value)
}
// 7天
const get7 = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() - 6
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  putExcel.value.startDate = startDate
  putExcel.value.endDate = endDate
  console.log('putExcel', putExcel.value)
}
// 30天
const get30 = function () {
  const today = new Date()
  const startDate = new Date(
    today.getFullYear(),
    today.getMonth() - 1,
    today.getDate()
  )
  const endDate = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate() + 1
  )
  putExcel.value.startDate = startDate
  putExcel.value.endDate = endDate
  console.log('putExcel', putExcel.value)
}

// 新增排序字段和排序方式
const sortField = ref('')
const sortOrder = ref('')
// 处理排序事件
const handleSortChange = (column) => {
  console.log('排序字段：', column.prop)
  console.log('排序方式：', column.order)
  if (column.prop === 'rechargeCoin') {
    sortField.value = 'recharge_coin'
  } else if (column.prop === 'taskCoin') {
    sortField.value = 'task_coin'
  } else if (column.prop === 'freeCoin') {
    sortField.value = 'free_coin'
  } else if (column.prop === 'createTime') {
    sortField.value = 'create_time'
  } else if (column.prop === 'gold') {
    sortField.value = 'gold'
  }
  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
}
get()
const handlePageSizeChange = function (val) {
  getObj.value.pageSize = val
  get()
}
const handleCurrentChange = function (val) {
  getObj.value.pageNum = val
  get()
}
</script>

<template>
  <el-dialog
    v-model="areyouright"
    title=""
    width="500"
    :close-on-click-modal="false"
  >
    <el-button type="success" @click="exportExcel()">导出</el-button>
  </el-dialog>

  <!-- 这是导出excel的弹窗 -->
  <el-dialog
    v-model="getPutEX"
    title="请选择导出条件"
    width="500"
    :close-on-click-modal="false"
  >
    <template #footer>
      <el-form
        v-loading="loading"
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="putExcel"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item prop="activityName" label="精网号:">
          <el-input
            v-model="putExcel.jwcode"
            placeholder="请输入精网号"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="所属地区："
          ><el-select
            v-model="putExcel.area"
            placeholder="请选择所属地区"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="更新时间：">
          <el-radio-group v-model="TimeGet">
            <el-radio value="1" @click="getT()">今天</el-radio>
            <el-radio value="3" @click="get3()">近三天</el-radio>
            <el-radio value="7" @click="get7()">近一周</el-radio>
            <el-radio value="30" @click="get30()">近一个月</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px"
          @click="areyour()"
          >确定</el-button
        >
      </el-form>
    </template>
  </el-dialog>

  <el-row>
    <el-col>
      <el-card style="margin-bottom: 20px">
        <el-row style="margin-bottom: 10px">
          <el-col :span="6">
            <div class="head-card-element">
              <el-text class="mx-1" size="large">精网号：</el-text>
              <el-input
                v-model="detailY.jwcode"
                style="width: 240px"
                placeholder="请输入精网号"
                clearable
              />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="head-card-element">
              <el-text class="mx-1" size="large">平台信息：</el-text>
              <el-select
                v-model="detailY.consumePlatform"
                placeholder="请选择平台信息"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="item in platform"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="head-card-element">
              <el-text class="mx-1" size="large">数量更新类型：</el-text>
              <el-select
                v-model="detailY.num"
                placeholder="请选择更新类型"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="item in num"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="head-card-element">
              <el-text class="mx-1" size="large">所属地区：</el-text>
              <el-select
                v-model="detailY.area"
                placeholder="请选择所属地区"
                style="width: 200px"
                clearable
              >
                <el-option
                  v-for="item in area"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-col>
        </el-row>

        <div class="head-card-element">
          <el-text class="mx-1" size="large">更新时间：</el-text>
          <el-date-picker
            v-model="getTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            style="margin-right: 700px"
          />
          <el-button type="success" @click="getPutEX = true"
            >导出Excel表格</el-button
          >
          <el-button @click="reset()">重置</el-button>
          <el-button type="primary" @click="search()">查询</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row>
    <el-col>
      <el-card>
        <!-- <div>
          现有金币：永久金币：{{ Math.abs(rechargeCoin) }}，免费金币：{{
            Math.abs(freeCoin)
          }}，任务金币：{{ Math.abs(taskCoin) }}
        </div> -->
        <!-- 设置表格容器的高度和滚动样式 -->
        <div style="height: 584px; overflow-y: auto">
          <el-table
            :data="tableData"
            style="width: 100%"
            @sort-change="handleSortChange"
            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="username"
              label="姓名"
              width="150"
            />
            <el-table-column
              fixed="left"
              prop="jwcode"
              label="精网号"
              width="120"
            />
            <el-table-column prop="area" label="所属地区" width="120" />
            <el-table-column
              prop="consumePlatform"
              label="平台信息"
              width="140"
            >
              <template #default="scope">
                <!-- 使用非严格相等比较 -->
                <span v-if="scope.row.consumePlatform == 0">初始化金币</span>
                <span v-if="scope.row.consumePlatform == 1">ERP系统</span>
                <span v-if="scope.row.consumePlatform == 3">Homily Link</span>
                <span v-if="scope.row.consumePlatform == 2">Homily Chart</span>
                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="gold"
              label="更新数量"
              width="120"
              sortable="“custom”"
            >
              <template #default="scope">
                <span>{{ scope.row.gold / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="updateType" label="更新类型" width="110">
              <!-- 模板内容 -->
              <template #default="scope">
                <span v-if="scope.row.updateType == 1">
                  <span>消费</span>
                </span>
                <span v-if="scope.row.updateType == 0">
                  <span>充值</span>
                </span>
                <span v-if="scope.row.updateType == 2">
                  <span>退款</span>
                </span>
                <span v-if="scope.row.updateType == 3">
                  <span>其他</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rechargeCoin"
              sortable="“custom”"
              label="永久金币"
              width="110"
            >
              <template #default="scope">
                <span>{{ scope.row.rechargeCoin / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="freeCoin"
              sortable="“custom”"
              label="免费金币"
              width="110"
            >
              <template #default="scope">
                <span>{{ scope.row.freeCoin / 100 }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="taskCoin"
              sortable="“custom”"
              label="任务金币"
              width="110"
            >
              <template #default="scope">
                <span>{{ scope.row.taskCoin / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="提交人" width="110" />
            <el-table-column
              prop="createTime"
              sortable="“custom”"
              label="更新时间"
              width="210"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span>{{
                  moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px">
          <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>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.pagination {
  display: flex;
}

.status {
  display: flex;
}

.head-card {
  display: flex;
}

/* .head-card-element {
  margin-right: 20px;
} */

/* .head-card-btn {
  margin-left: auto;
} */
</style>