dms-web/src/views/v1/center/game/index.vue

<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="6" :xs="24">
          <a-form-item label="主包" field="main_id">
            <a-select v-model="searchForm.main_id" :options="mainGameOptions" placeholder="请选择主包" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="游戏名称" field="name">
            <a-input v-model="searchForm.name" placeholder="请输入游戏名称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="平台" field="os">
            <sa-select v-model="searchForm.os" dict="os" placeholder="请选择平台" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="6" :xs="24">
          <a-form-item label="状态" field="status">
            <sa-select v-model="searchForm.status" dict="data_status" placeholder="请选择状态" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
      <template #status="{ record }">
        <a-tag :color="record.status === 1 ? 'green' : 'red'">
          {{ record.status === 1 ? '正常' : '停用' }}
        </a-tag>
      </template>
      <template #operationBeforeExtend="{ record }">
        <a-button type="text" @click="checkCpInfo(record)"><icon-thunderbolt /> cp对接信息</a-button>
      </template>
    </sa-table>

    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
    <!-- 查看CP对接信息 -->
    <cp-info ref="cpInfoRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import EditForm from './edit.vue'
import CpInfo from './cp-info.vue'
import api from '../../api/center/game'
import apiCommon from '../../api/center/common'

// 引用定义
const crudRef = ref()
const editRef = ref()
const cpInfoRef = ref()
const mainGameOptions = ref([])

// 搜索表单
const searchForm = ref({
  id: '',
  main_id: '',
  name: '',
  os: '',
  status: 1,
})

// SaTable 基础配置
const options = reactive({
  api: api.getPageList,
  operationColumnWidth: 280,
  add: {
    show: true,
    auth: ['/v1/center/Game/save'],
    func: async () => {
      editRef.value?.open()
    },
  },
  edit: {
    show: true,
    auth: ['/v1/center/Game/update'],
    func: async (record) => {
      console.log(record)
      editRef.value?.open('edit')
      editRef.value?.setFormData(record)
    },
  },
  delete: {
    show: false,
    auth: ['/v1/center/Game/destroy'],
    func: async (params) => {
      const resp = await api.destroy(params)
      if (resp.code === 200) {
        Message.success(`删除成功！`)
        crudRef.value?.refresh()
      }
    },
  },
})

// SaTable 列配置
const columns = reactive([
  { title: '游戏ID', dataIndex: 'id', width: 60 },
  { title: '游戏名称', dataIndex: 'name', width: 130 },
  // { title: "产品归属", dataIndex: "main_game_name", width: 130 },
  { title: '包名', dataIndex: 'package_name', width: 130 },
  {
    title: '平台',
    dataIndex: 'os',
    type: 'dict',
    dict: 'os',
    width: 120,
  },

  { title: '状态', dataIndex: 'status', width: 80 },
  {
    title: '实名',
    dataIndex: 'realname_switch',
    width: 80,
    type: 'dict',
    dict: 'realname_switch',
  },
  { title: '充值回调地址', dataIndex: 'cp_callback_url', width: 180 },
  { title: '分成比例', dataIndex: 'divide', width: 120 },
  // { title: "创建时间", dataIndex: "create_time", width: 180 },
  { title: '修改时间', dataIndex: 'update_time', width: 180 },
])

// 页面数据初始化
const initPage = async () => {
  await getMainGameOptions()
}

// 获取主包下拉数据
const getMainGameOptions = async () => {
  const { code, data } = await apiCommon.getMainGameOptionsApi()
  if (code === 200) {
    mainGameOptions.value = data
  }
}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 查看CP对接信息
const checkCpInfo = async (record) => {
  let { appkey, login_key, pay_key, name, id, os } = record
  let cp_info = {
    name: name,
    game_id: id,
    appkey: appkey,
    login_key: login_key,
    pay_key: pay_key,
    os: os,
    channel_h5_url: `https://pf.game.com/game/login?appid=${id}`,
  }
  cpInfoRef.value?.open()
  cpInfoRef.value?.setFormData(cp_info)
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>

<script>
export default { name: 'v1/center/game' }
</script>