pmrx-gm/web/src/views/HomeView.vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import itemList from "@/assets/items.json"
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'


// 第一个卡片：表单数据
const gmFormRef = ref()
const form = ref({
  playerName: '',
  item: '',
  itemNum: '',
  recharge: ''
})
const items = ref(itemList)
const recharges = ref(['充值1', '充值2', '充值3'])

// 第二个卡片：角色表格数据
const roleList = ref([])
const roleSearch = ref('')
const fetchRoleList = async () => {
  try {
    const response = await axios.get('/api/roles', {
      params: { search: roleSearch.value }
    })
    roleList.value = response.data.map(e => {
      e.lastLoginTime = dayjs(e.lastLoginTime).format("YYYY-MM-DD HH:mm:ss")
      e.createTime = dayjs(e.createTime).format("YYYY-MM-DD HH:mm:ss")
      return { ...e }
    })
  } catch (error) {
    console.error('获取角色列表失败:', error)
  }
}

// 第三个卡片：充值流水表格数据
const rechargeList = ref([])
const rechargeSearch = ref('')
const fetchRechargeList = async () => {
  try {
    const response = await axios.get('/api/recharges', {
      params: { search: rechargeSearch.value }
    })
    rechargeList.value = response.data
  } catch (error) {
    console.error('获取充值流水失败:', error)
  }
}

// 页面加载时初始化数据
onMounted(() => {
  fetchRoleList()
  fetchRechargeList()
})

// 提交表单
const submitForm = (formEl) => {
  formEl.validate().then(async () => {
    console.log(form.value);
    const params = form.value
    const res = await axios.post("/api/item/send", { roleName: params.playerName, itemId: params.item, itemNum: params.itemNum })
    const result = res?.data
    if (res.data.code == 0) ElMessage.success(result.msg)
    else ElMessage.error(result.msg)
  })

}
</script>

<template>
  <div class="home-container">
    <!-- 第一个卡片：表单 -->
    <el-card class="card-item">
      <template #header>
        <div class="card-header">
          <span>GM操作台</span>
          <el-button type="primary" @click="submitForm(gmFormRef)">提交</el-button>
        </div>
      </template>
      <el-form ref="gmFormRef" :model="form" label-width="100px">
        <div class="grid grid-cols-2">
          <el-form-item label="玩家角色名" prop="playerName" required>
            <el-input v-model="form.playerName" placeholder="请输入玩家角色名"></el-input>
          </el-form-item>
          <el-form-item label="物品道具" prop="item">
            <el-select-v2 v-model="form.item" placeholder="请选择物品" :options="items"
              :props="{ label: 'name', value: 'resId' }" filterable />
          </el-form-item>
          <el-form-item label="物品数量" prop="itemNum">
            <el-input type="number" v-model="form.itemNum" placeholder="请输入发送的物品数量"></el-input>
          </el-form-item>
          <el-form-item label="充值" prop="recharges">
            <el-select v-model="form.recharge" placeholder="请选择充值">
              <el-option v-for="recharge in recharges" :key="recharge" :label="recharge" :value="recharge"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 第二个卡片：角色表格 -->
    <el-card class="card-item">
      <template #header>
        <div class="card-header">
          <span>角色列表</span>
          <el-input style="width: 240px;" v-model="roleSearch" placeholder="请输入角色名称或ID" @change="fetchRoleList"
            clearable />
        </div>
      </template>
      <el-table :data="roleList" style="width: 100%" border height="400">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="lv" label="等级"></el-table-column>
        <el-table-column prop="lastLoginTime" label="上次登录" width="220" />
        <el-table-column prop="createTime" label="创建时间" width="220" />
        <el-table-column label="是否禁用">
          <template v-slot="{ row }">
            <el-switch v-model="row.ban" disabled />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 第三个卡片：充值流水表格 -->
    <el-card class="card-item">
      <template #header>
        <div class="card-header">
          <span>充值流水</span>
          <el-input style="width: 240px;" v-model="rechargeSearch" placeholder="请输入角色名称或流水单号"
            @input="fetchRechargeList"></el-input>
        </div>
      </template>
      <el-table :data="rechargeList" style="width: 100%" border>
        <el-table-column prop="id" label="流水单号" width="180"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
        <el-table-column prop="amount" label="充值金额"></el-table-column>
        <el-table-column prop="time" label="充值时间"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.card-item {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>