tyj_admin_ui/src/views/gameOrder/count/index.vue

<template>
  <div class="game-order-count-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :inline="true">
          <el-form-item label="充值金额">
            <el-input size="default" v-model="tableData.param.amount" placeholder="请输金额" class="input-with-select" clearable>
              <template #prepend>
                <el-select v-model="tableData.param.compareType" class="m-2" placeholder="" size="default" style="width: 60px">
                  <el-option v-for="item in tableData.compareType" :key="item.value" :label="item.label"
                             :value="item.value"/>
                </el-select>
              </template>
            </el-input>

          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="tableData.param.gender">
              <el-radio :label=1>男</el-radio>
              <el-radio :label=2>女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="countList">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"/>
        <el-table-column prop="server" label="区服" show-overflow-tooltip></el-table-column>
        <el-table-column prop="num" label="充值人数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="times" label="充值笔数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="allMoney" label="充值金额" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalNum" label="总充值人数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalTimes" label="总充值笔数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalMoney" label="总金额" show-overflow-tooltip></el-table-column>
      </el-table>
    </el-card>
    <EditRole ref="editRoleRef" @getRoleList="countList"/>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, defineComponent} from 'vue';
//import { ElMessageBox, ElMessage } from 'element-plus';
import {gameRoleList} from "/@/api/game";

// 定义接口来定义对象的类型
interface TableData {
  serverId: number;
  num: number;
  times: number;
  allMoney: number;
  totalNum: number;
  totalTimes: number;
  totalMoney: number;
}

interface TableDataState {
  tableData: {
    data: Array<TableData>;
    param: {
      amount: number;
      compareType: number;
      gender: number;
      lowAge: number;
      upAge: number;
      serverId: number;
    }
    compareType: object
  };
}

export default defineComponent({
  name: 'apiV1SystemRoleList',
  setup() {

    const state = reactive<TableDataState>({
      tableData: {
        data: [],
        param: {
          amount: 0,
          compareType: 0,
          gender: 0,
          lowAge: 0,
          upAge: 0,
          serverId: 0,
        },
        compareType: [
          {
            value: 1,
            label: '=',
          }, {
            value: 2,
            label: '<=',
          },
          {
            value: 3,
            label: '<',
          },
          {
            value: 4,
            label: '>',
          },
          {
            value: 5,
            label: '>=',
          }
        ]
      },
    });


    // 初始化表格数据
    // const initTableData = () => {
    // 	roleList()
    // };
    const countList = () => {
      const data: Array<TableData> = [];
      gameRoleList(state.tableData.param).then(res => {
        const list = res.data.list ?? []
        list.map((item: TableData) => {
          data.push({
            serverId: item.serverId,
            num: item.num,
            times: item.times,
            allMoney: item.allMoney,
            totalMoney: item.totalMoney,
            totalNum: item.totalNum,
            totalTimes: item.totalTimes,
          });
        })
        state.tableData.data = data;
      })
    };



    onMounted(() => {
      //	initTableData();
    });
    return {

      //onHandleSizeChange,
      //onHandleCurrentChange,
      countList,
      ...toRefs(state),
    };
  },
});
</script>