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

<template>
	<div class="game-order-container">
		<el-card shadow="hover">
			<div class="game-order-search mb15">

        <el-form :inline="true">
          <el-form-item label="账号">
            <el-input size="default" v-model="tableData.param.account" placeholder="请输入账号" class="w-50 m-2" clearable/>
          </el-form-item>

          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="roleList">
              <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="id" width="60" />
        <el-table-column prop="region" label="区服" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="桃谷uid" show-overflow-tooltip></el-table-column>
        <el-table-column prop="uid" label="桃谷名字" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalTime" label="总在线时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="rechargeTotal" label="累计充值" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="lastLeaveTime" label="离线时间" show-overflow-tooltip></el-table-column>
<!--				<el-table-column label="操作" width="100">-->
<!--					<template #default="scope">-->
<!--						<el-button size="small" type="text" @click="onOpenEditRole(scope.row)">修改名字</el-button>-->
<!--						<el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>-->
<!--					</template>-->
<!--				</el-table-column>-->
			</el-table>
      <pagination
          v-show="tableData.total>0"
          :total="tableData.total"
          v-model:page="tableData.param.pageNum"
          v-model:limit="tableData.param.pageSize"
          @pagination="roleList"
      />
		</el-card>
		<EditRole ref="editRoleRef" @getRoleList="roleList"/>
	</div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted,  defineComponent, } from 'vue';
//import { ElMessageBox, ElMessage } from 'element-plus';
import { gameRoleList} from "/@/api/game";
import {ServerList} from "/@/utils/game";
import {ChannelList} from "/@/utils/game";
// 定义接口来定义对象的类型
interface TableData {
  uid:number;
  name:string;
	region: number;
  totalTime: number;
  rechargeTotal: number;
  createTime:string;
  lastLeaveTime: string;

}
interface TableDataState {
	tableData: {
		data: Array<TableData>;
    param: {
      account:string
    };

	};
  servers:object;
  channels:object;
}

export default defineComponent({
	name: 'apiV1GameOrderOrderList',
	setup() {
   // const {proxy} = getCurrentInstance() as any;

		const state = reactive<TableDataState>({
			tableData: {
				data: [],
        param:{
          account:"",
        },

			},
      servers:ServerList,
      channels:ChannelList,
		});
		// 初始化表格数据
		// const initTableData = () => {
		// 	roleList()
		// };
    const roleList = ()=>{
      const data: Array<TableData> = [];
      gameRoleList(state.tableData.param).then(res=>{
        const list = res.data.list??[]
        list.map((item:TableData)=>{
          data.push({
            uid:item.uid,
            name:item.name,
            region: item.region,
            totalTime: item.totalTime,
            rechargeTotal: item.rechargeTotal,
            createTime:new Date(item.createTime).toLocaleString(),
            lastLeaveTime:new Date(item.lastLeaveTime).toLocaleString(),
          });
        })
        state.tableData.data = data;
      })
    };



		// // 分页改变
		// const onHandleSizeChange = (val: number) => {
		// 	state.tableData.param.pageSize = val;
		// };
		// // 分页改变
		// const onHandleCurrentChange = (val: number) => {
		// 	state.tableData.param.pageNum = val;
		// };
		// 页面加载时
		onMounted(() => {
		//	initTableData();
		});
		return {

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