tyj_admin_ui/src/views/gameRole/account/index.vue

<template>
  <div class="game-account-container">
    <el-card shadow="hover">
      <div class="game-account-search mb15">
        <el-form :inline="true">
          <el-form-item label="服务器">
            <el-select v-model="serverSwitch" class="m-2" placeholder="选择服务器" size="large" style="width: 80px">
              <el-option label="全部" :value="0"/>
              <el-option label="ios" :value="1"/>
              <el-option label="安卓" :value="2"/>
              <el-option label="其他" :value="3"/>
            </el-select>
            <el-select v-model="queryParams.serverId" class="m-2" placeholder="选择服务器" filterable>
              <el-option v-for="item in switchServer()" :key="item.id" :label="item.name" :value="item.id+''"/>
            </el-select>
          </el-form-item>
          <el-form-item label="账号">
            <el-input size="default" v-model="queryParams.account" placeholder="请输入账号" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="id">
            <el-input size="default" v-model="queryParams.id" placeholder="请输入uid" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="uid">
            <el-input size="default" v-model="queryParams.uid" placeholder="请输入uid" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="身份证:">
            <el-input size="default" v-model="queryParams.ident" placeholder="身份证" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item label="名字:">
            <el-input size="default" v-model="queryParams.name" placeholder="名字" class="w-50 m-2" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="accountList">
              <el-icon>
                <ele-Search/>
              </el-icon>
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%" stripe>
        <el-table-column type="index" label="id" width="60"/>
        <el-table-column prop="AccountName" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="uid" label="uid" show-overflow-tooltip></el-table-column>
        <el-table-column prop="StringId" label="id" show-overflow-tooltip></el-table-column>
        <el-table-column prop="AccountType" label="账号类型" show-overflow-tooltip></el-table-column>
        <el-table-column prop="RealName" label="名字" show-overflow-tooltip></el-table-column>
        <el-table-column prop="Identity" label="身份证" show-overflow-tooltip></el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-row justify="space-evenly">
        <el-pagination :hide-on-single-page="true" :total="tableData.total" v-model:page-size="queryParams.pageSize"
                       v-model:current-page="queryParams.pageNum" @current-change="accountList"/>
      </el-row>
    </el-card>
  </div>
</template>

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

// 定义接口来定义对象的类型
interface TableData {
  uid: number;
  name: string;
  region: number;
  totalTime: number;
  rechargeTotal: number;
  CreateTime: string;
  AccountType: string;
}

interface TableDataState {
  serverSwitch: number;
  queryParams: {
    account: string,
    serverId: number,
    id: string,
    pageSize: number,
    pageNum: number,
  };
  tableData: {
    data: Array<TableData>;
    total: 0,
    accountType: Array<{ label: string, value: number }>
  };
  servers: object[]
}

export default defineComponent({
  name: 'apiV1GameRoleAccount',
  setup() {
    const state = reactive<TableDataState>({
      serverSwitch: 0,
      queryParams: {
        account: "",
        serverId: 1,
        id: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableData: {
        data: [],
        total: 0,
        accountType: [{label: "正常", value: 0}, {label: "黑名单", value: 0}, {label: "GM", value: 0}]
      },
      servers: []
    });

    const accountList = () => {
      console.log(state.queryParams);
      gameAccountList(state.queryParams).then(res => {
        if (!res.data.list || res.data.list.length == 0) {
          ElMessage.error('未查询到用户信息！');
          return;
        }
        console.log(res);
        const list = res.data.list ?? [];
        state.tableData.total = res.data.total;
        list.map((item: TableData) => {
          item.AccountType = state.tableData.accountType.find(r => r.value == item.AccountType).label;
          item.CreateTime = new Date(item.CreateTime).toLocaleString();
        });
        state.tableData.data = list;
      })
    };
    // 页面加载时
    onMounted(() => {
      serverList().then(res => {
        state.servers = res;
      });
    });

    const switchServer = () => {
      return gSwitchServer(state.serverSwitch, state.servers)

    };

    return {
      switchServer,
      accountList,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.el-form-item {
  display: -moz-flex;
  vertical-align: middle;
  margin-right: 32px;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #ffffd5;
}

::v-deep .el-table .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: inherit;
}
</style>