yc_yyb_admin/src/views/index/page.vue

<template>
  <d2-container>

    <el-row style="width: 100%" justify="space-between">
      <el-col :span="20">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="游戏名">
            <el-input v-model="formInline.name" placeholder="游戏名"></el-input>
          </el-form-item>

          <el-form-item label="AppId">
            <el-input v-model="formInline.app_id" placeholder="app_id"></el-input>
          </el-form-item>

          <!--      <el-form-item label="类型">-->
          <!--        <el-select v-model="formInline.game_status" placeholder="类型">-->
          <!--          <el-option label="全部" value="0"></el-option>-->
          <!--          <el-option label="预约" value="1"></el-option>-->
          <!--          <el-option label="内测" value="2"></el-option>-->
          <!--          <el-option label="上架" value="3"></el-option>-->
          <!--        </el-select>-->
          <!--      </el-form-item>-->

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="onAdd">添加游戏</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column label="图标 & 游戏名" width="180">
        <template slot-scope="scope">
          <el-row :gutter="1" align="middle">
            <el-col :span="4">
              <el-image :src="scope.row.icon" lazy style="width: 30px; height: 30px" v-show="scope.row.icon"></el-image>
              <span class="tag-group__title" v-show="!scope.row.icon"> - </span>
            </el-col>
            <el-col :span="20" >
              <span>{{ scope.row.name }}</span>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <el-table-column label="游戏ID" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.app_id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="添加时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-row :gutter="1" align="middle" justify="center">
            <el-col :span="10">
              <el-link icon="el-icon-download" type="primary" :href="scope.row.url" v-show="scope.row.url">下载</el-link>
              <span class="tag-group__title" v-show="!scope.row.url"> - </span>
            </el-col>
            <el-col :span="10" >
              <el-button size="mini" type="success" v-clipboard:copy="scope.row.url" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pagination.page_sizes"
      :page-size="pagination.limit"
      :current-page="pagination.page"
      :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加游戏" :visible.sync="dialogVisible" width="20%" label-width="100px">
      <el-form ref="ruleAddForm" :model="form" label-width="80px" :rules="rules"  class="demo-ruleForm">
        <el-form-item label="游戏名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="AppId" prop="app_id">
          <el-input v-model="form.app_id"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onAddSubmit('ruleAddForm')">提交</el-button>
          <el-button @click="resetAddForm('ruleAddForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </d2-container>
</template>

<script>
import api from '@/api'
export default {
  name: 'game',
  data () {
    return {
      dialogVisible: false,
      form: {
        name: '',
        app_id: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入游戏名', trigger: 'blur' }
        ],
        app_id: [
          { required: true, message: '请输入 app_id', trigger: 'blur' }
        ]
      },
      formInline: {
        name: '',
        app_id: '',
        game_status: 3
      },
      tableData: [],
      loading: false,
      pagination: {
        page: 1, // 页数
        limit: 15, // 页数数量
        total: 0, // 总数
        page_sizes: [20, 50, 100, 500, 1000] // 页数数量
      }
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    // 提交
    onSubmit (res) {
      this.fetchData(this.formInline)
    },
    // 重置
    onReset () {
      this.fetchData()
    },
    onAdd () {
      this.dialogVisible = true
    },
    onAddSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.GAME_ADD(this.form).then(res => {
            this.$message({
              showClose: true,
              message: '添加成功！',
              type: 'success'
            })
            this.fetchData()
            this.dialogVisible = false
          }).catch(err => {
            console.log(err)
            this.$message({
              showClose: true,
              message: '添加失败！',
              type: 'error'
            })
          })
        }
      })
    },
    resetAddForm (formName) {
      this.$refs[formName].resetFields()
    },

    // 列表
    async fetchData (where = {}) {
      this.loading = true
      api.GAME_LIST(where).then(res => {
        this.tableData = res.data

        this.pagination.page = res.current_page
        this.pagination.limit = res.per_page
        this.pagination.total = res.total

        this.loading = false
        console.log('# GAME_LIST: ', res)
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },

    // table -- 操作按钮
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    onCopy () {
      this.$message({
        showClose: true,
        message: '复制成功！',
        type: 'success'
      })
    },
    onError () {
      this.$message({
        showClose: true,
        message: '复制失败！',
        type: 'error'
      })
    },

    // 分页
    handleSizeChange (val) {
      // this.pagination.limit = val
      this.fetchData({ limit: val })
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pagination.page = val
      this.fetchData({ page: val })
      console.log(`当前页: ${val}`)
    }
  }
}
</script>