123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459 |
- <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>
|