ThreeGamesFrontEnd/src/views/user/list.vue

<template>
  <div class="app-container">
    <el-form ref="searchArr" :inline="true" :model="search" class="demo-form-inline" size="mini">
      <el-form-item label="用戶名">
        <el-input v-model="search.nickname" clearable />
      </el-form-item>
      <el-form-item label="狀態">
        <el-select v-model="search.status" clearable>
          <el-option :value="0" label="waiting" />
          <el-option :value="1" label="processing" />
          <el-option :value="2" label="end" />
        </el-select>
      </el-form-item>
      <el-form-item label="開始日期">
        <el-date-picker
          v-model="search.scaleStart"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="遊戲次數">
        <el-input v-model="search.gameCount" clearable />
      </el-form-item>
      <el-form-item label="版本">
        <el-input v-model="search.versions" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="nextPage()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <router-link to="/user/add">
          <el-button type="primary" size="small">添加</el-button>
        </router-link>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="download()">下載</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @sort-change="sortChange"
    >
      <el-table-column align="center" label="ID" width="55">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column sortable prop="nickname" align="center" label="用戶名">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="狀態">
        <template slot-scope="scope">
          <div v-if="scope.row.status===0" class="green">waiting</div>
          <div v-if="scope.row.status===1" class="green">processing</div>
          <div v-if="scope.row.status===2" class="green">end</div>
        </template>
      </el-table-column>
<!--      <el-table-column align="center" label="性别">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if="scope.row.gender===1" class="green">男</div>-->
<!--          <div v-if="scope.row.gender===2" class="green">女</div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column sortable="custom" prop="createTime" align="center" label="創建日期">
        <template slot-scope="scope">
          {{ scope.row.createTime.substring(0,10) }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="開始日期" prop="scaleStart">
        <template slot-scope="scope">
          {{ scope.row.scaleStart.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="scaleEnd" label="結束日期">
        <template slot-scope="scope">
          {{ scope.row.scaleEnd.substring(0,10) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="量表提示時間">
        <template slot-scope="scope">
          {{ scope.row.scaleTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="遊戲數字顯示的時長" prop="showTime">
        <template slot-scope="scope">
          {{ scope.row.showTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable label="數字交換間隔" prop="hideTime">
        <template slot-scope="scope">
          {{ scope.row.hideTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="正確數字出現次數" sortable prop="correct">
        <template slot-scope="scope">
          {{ scope.row.correct }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="隨機數字出現次數">
        <template slot-scope="scope">
          {{ scope.row.supporting }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="遊戲練習結束進入測試的時長" sortable prop="practice">
        <template slot-scope="scope">
          {{ scope.row.practice }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="遊戲前練習正確數字出現次數" sortable prop="practice">
        <template slot-scope="scope">
          {{ scope.row.exerciseRight }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="遊戲前練習隨機數字出現次數" sortable prop="practice">
        <template slot-scope="scope">
          {{ scope.row.exercise }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="每天遊戲次數" sortable prop="gameCount">
        <template slot-scope="scope">
          {{ scope.row.gameCount }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="每天遊戲版本">
        <template slot-scope="scope">
          {{ scope.row.version }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登出">
        <template slot-scope="scope">
          <div v-if="scope.row.loginOut===0" class="green">yes</div>
          <div v-if="scope.row.loginOut===1" class="green">no</div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="{row}">
          <el-button v-if="checkPermission(['admin'])" type="warning" size="mini" @click="openeditor(row,true,row.enable)">
            編輯
          </el-button>
          <el-button v-if="checkPermission(['admin'])" size="mini" @click="openeditor(row,false,row.enable)">
            查看
          </el-button>
          <el-button v-if="checkPermission(['admin'])" size="mini" @click="openPlayTimeDetail(row.id)">
            查看推送時間
          </el-button>
          <el-button type="danger" v-if="checkPermission(['admin'])" size="mini" @click="opendel(row)">
            刪除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.size"
      @pagination="nextPage"
    />
    <el-dialog title="編輯用戶" :visible.sync="customerVisible" width="300">
      <el-form ref="loginForm" :model="rateForm" label-width="160px" class="customer-form" size="mini">

        <el-form-item label="用戶名字" prop="nickname">
          <el-input v-model="rateForm.nickname" />
        </el-form-item>
        <el-form-item label="登錄密碼" prop="password">
          <el-input v-model="rateForm.password" />
        </el-form-item>
        <el-form-item label="禁止登出" prop="enable">
          <el-switch
            v-model="rateForm.loginOut"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
<!--        <el-form-item label="性別" prop="password">-->
<!--          <el-radio-group v-model="rateForm.gender">-->
<!--            <el-radio :label="1">男</el-radio>-->
<!--            <el-radio :label="2">女</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="時間">
          <el-date-picker
            v-model="rateForm.period"
            type="daterange"
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @input="choseDate"
          />
        </el-form-item>
        <el-form-item label="量表提示時間">
          <el-time-picker
            v-model="rateForm.scaleTime"
            placeholder="量表提示時間"
            value-format="HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="數字顯示時長" prop="password">
          <el-input v-model="rateForm.showTime">
            <template slot="append">ms</template>
          </el-input>
        </el-form-item>
        <el-form-item label="數字交換間隔" prop="password">
          <el-input v-model="rateForm.hideTime">
            <template slot="append">ms</template>
          </el-input>
        </el-form-item>
        <el-form-item label="正確數字出現次數" prop="password">
          <el-input v-model="rateForm.correct" />
        </el-form-item>
        <el-form-item label="隨機數字出現次數" prop="password">
          <el-input v-model="rateForm.supporting" />
        </el-form-item>
        <el-form-item label="遊戲練習結束進入測試的時長" prop="practice">
          <el-input v-model="rateForm.practice">
            <template slot="append">ms</template>
          </el-input>
        </el-form-item>
        <el-form-item label="遊戲前練習正確數字出現次數" prop="practice">
          <el-input v-model="rateForm.exerciseRight" type="number" />
        </el-form-item>
        <el-form-item label="遊戲前練習隨機數字出現次數" prop="practice">
          <el-input v-model="rateForm.exercise" type="number" />
        </el-form-item>
        <el-form-item label="游戏版本" prop="practice">
          <el-checkbox-group v-model="rateForm.versions">
            <el-checkbox label="A" style="margin-right: 10px" />
            <el-checkbox label="B" style="margin-right: 10px" />
            <el-checkbox label="C" style="margin-right: 10px" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="遊戲時間段" style="width: 800px">
          <el-row v-for="(items, index) in gameConfigs" :key="index" style="display: flex;align-items: center">
            <div />
            <el-time-select
              v-model="items.startTime"
              size="mini"
              placeholder="遊戲時間段"
              style="width: 150px"
              :picker-options="{
              start: '00:00',
              end: '23:59',
              minTime: index > 0 ? gameConfigs[index-1].endTime : null,
            }"
            />
            <el-time-select
              v-model="items.endTime"
              size="mini"
              placeholder="遊戲時間段"
              style="width: 150px"
              :picker-options="{
              step: '00:15:00',
              minTime: items.startTime,
              start: '00:00',
              end: '23:59'
            }"
            />
            <div>
              <i v-if="editor"  class="el-icon-circle-plus" @click="addConfig()" />
              <i v-if="gameConfigs.length != 1&&editor"  class="el-icon-remove a_style" @click="deleteConfig(index)" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="">
          <el-button v-if="editor" size="small" type="primary" @click="updateUser">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="遊戲時間詳情" :visible.sync="showPlayTimeDetail" width="40%" center>
      <el-table :data="playTimeDetail" size="mini">
        <el-table-column align="center" label="時間">
          <template slot-scope="scope">
            {{ scope.row.gameTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="類型">
          <template slot-scope="scope">
            {{ scope.row.type === 0 ? '遊戲' : '量表' }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getuserList, deluser, updateUser, download } from '@/api/user'
import checkPermission from '@/utils/permission'
import { Message } from 'element-ui'
import GameApi from '@/api/game'

export default {
  name: 'List',
  components: { Pagination },
  data() {
    return {
      list: [],
      search: {},
      order: {},
      listLoading: false,
      customerVisible: false,
      page: { total: 0, size: 0, pageNum: 0 },
      rateForm: {
        period: []
      },
      userConfig: {},
      gameConfigs: [{}],
      editor: false,
      playTimeDetail: [],
      showPlayTimeDetail: false
    }
  },
  created() {
    this.nextPage()
  },
  mounted() {

  },
  methods: {
    checkPermission,
    openeditor(r, t, e) {
      this.editor = t
      var thiz = this
      GameApi.gameConfig({ uid: r.id }).then(response => {
        if (response.data.length > 0) {
          this.gameConfigs = response.data
        } else {
          this.gameConfigs = []
        }
        Object.keys(r).forEach(function(key) {
          thiz.$set(thiz.rateForm, key, r[key])
        })
        if (this.rateForm.version != null) {
          this.$set(this.rateForm, 'versions', this.rateForm.version.split(','))
        } else {
          this.$set(this.rateForm, 'versions', [])
        }
        this.$set(this.rateForm, 'period', [r.scaleStart, r.scaleEnd])
        this.customerVisible = true
        console.log(this.rateForm)
      })
    },
    opendel(r) {
      this.$confirm('此操作将永久 ' + r.nickname + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delUser(r)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openPlayTimeDetail(uid) {
      GameApi.playTimeDetail(uid).then(response => {
        if (response.code === 200) {
          this.playTimeDetail = response.data
          this.showPlayTimeDetail = true
        }
      })
    },
    delUser(r) {
      deluser({ id: r.userId }).then(response => {
        Message({
          message: '刪除成功',
          type: 'success',
          duration: 2 * 1000
        })
        if (response.code === 200) {
          this.nextPage()
        }
      })
    },
    choseDate(e) {
      this.$nextTick(() => {
        this.rateForm.period = null
        this.$set(this.rateForm, 'period', [e[0], e[1]])
        this.rateForm.scaleStart = this.rateForm.period[0]
        this.rateForm.scaleEnd = this.rateForm.period[1]
      })
    },
    updateUser() {
      this.rateForm.version = this.rateForm.versions.join(',')
      this.rateForm.configs =  JSON.stringify(this.gameConfigs)
      updateUser(this.rateForm).then(response => {
        if (response.code === 200) {
          this.nextPage()
          this.customerVisible = false
        }
      })
    },
    nextPage() {
      this.listLoading = true
      getuserList({ page: this.page.pageNum, search: JSON.stringify(this.search), order: JSON.stringify(this.order) }).then(response => {
        this.list = response.data.list
        this.page.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      })
    },
    sortChange(column) {
      // console.log(column)
      this.order[column.prop] = column.order
      this.nextPage()
    },
    download() {
      download({ search: JSON.stringify(this.search), order: JSON.stringify(this.order) }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', response.headers['filename'])
        document.body.appendChild(link)
        link.click()
      })
    },
    addConfig() {
      this.gameConfigs.push({ versions: [] })
    },
    deleteConfig(index) {
      this.gameConfigs.splice(index, 1)
    },
    back() {
      this.search = {}
      this.order = {}
      this.nextPage()
    }
  }
}
</script>

<style scoped>
  .flex.vc {
    -moz-box-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

</style>