301 lines
13 KiB
Vue
301 lines
13 KiB
Vue
<template>
|
|
<section class="content">
|
|
<div class="box box-danger">
|
|
<div class="box-body">
|
|
<!-- Content Header (Page header) -->
|
|
<section class="content-header">
|
|
<h1 id="itemTitle"></h1>
|
|
</section>
|
|
<!-- .content -->
|
|
<section class="content">
|
|
<div id="table"></div>
|
|
<div id="toolbar">
|
|
<button id="addBtn" class="btn btn-default">
|
|
<i class="glyphicon glyphicon-plus"></i>添加
|
|
</button>
|
|
</div>
|
|
</section><!-- .content -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="modalLabel">添加分类</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form class="form-horizontal">
|
|
<input type="hidden" name="id" v-model="homeGameTab.id" />
|
|
<div class="form-group">
|
|
<label for="seqNo" class="col-sm-3 control-label">排序<font color="red">*</font>:</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
|
|
v-model="homeGameTab.seqNo" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="tabName" class="col-sm-3 control-label">名称<font color="red">*</font>:</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control validate[required]" name="tabName" id="tabName"
|
|
v-model="homeGameTab.tabName" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="gameId" class="col-sm-3 control-label">游戏类型:</label>
|
|
<div class="col-sm-8">
|
|
<select name="gameId" class="form-control" id="gameId" v-model="homeGameTab.gameId">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="erbanNoStr" class="col-sm-3 control-label">用户列表:</label>
|
|
<div class="col-sm-8">
|
|
<input type="text" class="form-control validate[required]" name="erbanNoStr" id="erbanNoStr" placeholder="多个用,隔开"
|
|
v-model="homeGameTab.erbanNoStr" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label">选中状态图</label>
|
|
<div class="col-sm-8">
|
|
<input type="hidden" class="form-control" name="onClick" v-model="homeGameTab.onClick" />
|
|
<img :src="homeGameTab.onClick" style="width:120px;"/>
|
|
<input type="file" class="form-control" id="onClickFile" name="uploadFile">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label"></label>
|
|
<div class="col-sm-8">
|
|
<button class="btn btn-success col-sm-4" type="button" id="onClickUploadBtn">上传</button>
|
|
<span class="btn col-sm-4" id="onClickUploadInfo" style="color:red;"></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label">未选中状态图</label>
|
|
<div class="col-sm-8">
|
|
<input type="hidden" class="form-control" name="onUnclick" v-model="homeGameTab.onUnclick" />
|
|
<img :src="homeGameTab.onUnclick" style="width:120px;"/>
|
|
<input type="file" class="form-control" id="onUnclickFile" name="uploadFile">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-3 control-label"></label>
|
|
<div class="col-sm-8">
|
|
<button class="btn btn-success col-sm-4" type="button" id="onUnclickUploadBtn">上传</button>
|
|
<span class="btn col-sm-4" id="onUnclickUploadInfo" style="color:red;"></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
|
<button type="button" class="btn btn-primary" id="save">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TableHelper from '@/utils/bootstrap-table-helper';
|
|
import { getHomeGameTabPage, saveHomeGameTab, updateHomeGameTab, delHomeGameTab } from '@/api/home/homeGameTab';
|
|
import { getGamePartnerList } from '@/api/game/gamePartner';
|
|
import { uploadFile } from '@/api/common/upload';
|
|
import { apiResult, buildSelectOption } from '@/utils/maintainer';
|
|
|
|
export default {
|
|
name: 'HomeGameTabAdminView',
|
|
data() {
|
|
return {
|
|
columns: [
|
|
{ field: 'seqNo', title: '排序', align: 'center', width: '5%' },
|
|
{ field: 'tabName', title: '游戏名', align: 'center', width: '5%' },
|
|
{
|
|
field: 'onClick',
|
|
title: '点击状态下图片',
|
|
align: 'center',
|
|
width: '5%',
|
|
formatter: function (val, row, index) {
|
|
return '<img src="' + val + '" width="70" height="60"/>';
|
|
}
|
|
},
|
|
{
|
|
field: 'onUnclick',
|
|
title: '未点击状态下图片',
|
|
align: 'center',
|
|
width: '5%',
|
|
formatter: function (val, row, index) {
|
|
return '<img src="' + val + '" width="70" height="60"/>';
|
|
}
|
|
},
|
|
{ field: 'erbanNoStr', title: '配置用户列表', align: 'center', width: '5%' },
|
|
{
|
|
field: 'id',
|
|
title: '操作',
|
|
align: 'center',
|
|
width: '20%',
|
|
formatter: function (val, row, index) {
|
|
let value = '<button class="btn btn-sm btn-success opt-edit" data-id="' + val + '" data-index="' + index + '">编辑</button>';
|
|
value += '<button class="btn btn-sm btn-danger opt-del" data-id="' + val + '" data-index="' + index + '">删除</button>';
|
|
return value;
|
|
}
|
|
}
|
|
],
|
|
gamePartners: [],
|
|
homeGameTab: {
|
|
id: 0,
|
|
tabName: '',
|
|
gameId: 0,
|
|
onClick: '',
|
|
onUnclick: '',
|
|
erbanNoStr: '',
|
|
seqNo: 0,
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getGame();
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.$nextTick(function () {
|
|
let $this = this;
|
|
$this.initTable();
|
|
$('#addBtn').click(function () {
|
|
$this.add();
|
|
});
|
|
$('#table').on('click', '.opt-edit', function () {
|
|
$this.edit(this);
|
|
});
|
|
$('#table').on('click', '.opt-del', function () {
|
|
$this.del(this);
|
|
});
|
|
$('#save').click(function () {
|
|
$this.save();
|
|
});
|
|
$('#onClickUploadBtn').click(function () {
|
|
uploadFile('onClickFile').then(res => {
|
|
$this.homeGameTab.onClick = res.path;
|
|
});
|
|
});
|
|
$('#onUnclickUploadBtn').click(function () {
|
|
uploadFile('onUnclickFile').then(res => {
|
|
$this.homeGameTab.onUnclick = res.path;
|
|
});
|
|
});
|
|
});
|
|
},
|
|
initTable() {
|
|
let $this = this;
|
|
$('#table').bootstrapTable('destroy');
|
|
$('#table').bootstrapTable({
|
|
columns: $this.columns,
|
|
cache: false,
|
|
striped: true,
|
|
showRefresh: false,
|
|
pageSize: 10,
|
|
pagination: true,
|
|
pageList: [1, 10, 20, 30, 50],
|
|
search: false,
|
|
sidePagination: 'server',
|
|
queryParamsType: 'undefined',
|
|
queryParams: function queryParams(params) {
|
|
var param = {
|
|
pageNum: params.pageNumber,
|
|
pageSize: params.pageSize,
|
|
};
|
|
return param;
|
|
},
|
|
ajax:function(request){
|
|
getHomeGameTabPage(request.data).then(res => {
|
|
let data = res.data;
|
|
request.success({
|
|
'rows': data.records,
|
|
'total': data.total
|
|
});
|
|
});
|
|
},
|
|
toolbar: '#toolbar',
|
|
});
|
|
},
|
|
add() {
|
|
this.homeGameTab.id = null;
|
|
this.homeGameTab.tabName = '';
|
|
this.homeGameTab.gameId = 0;
|
|
this.homeGameTab.onClick = '';
|
|
this.homeGameTab.onUnclick = '';
|
|
this.homeGameTab.erbanNoStr = '';
|
|
this.homeGameTab.seqNo = 0;
|
|
this.show();
|
|
},
|
|
edit(obj) {
|
|
const index = $(obj).data('index');
|
|
const record = TableHelper.getData('#table')[index];
|
|
this.homeGameTab.id = record.id;
|
|
this.homeGameTab.tabName = record.tabName;
|
|
this.homeGameTab.gameId = record.gameId;
|
|
this.homeGameTab.onClick = record.onClick;
|
|
this.homeGameTab.onUnclick = record.onUnclick;
|
|
this.homeGameTab.erbanNoStr = record.erbanNoStr;
|
|
this.homeGameTab.seqNo = record.seqNo;
|
|
this.show();
|
|
},
|
|
show() {
|
|
$('#editModal').modal('show');
|
|
},
|
|
save() {
|
|
let data = {
|
|
id: this.homeGameTab.id,
|
|
tabName: this.homeGameTab.tabName,
|
|
gameId: new Number(this.homeGameTab.gameId),
|
|
onClick: this.homeGameTab.onClick,
|
|
onUnclick: this.homeGameTab.onUnclick,
|
|
erbanNoStr: this.homeGameTab.erbanNoStr,
|
|
seqNo: new Number(this.homeGameTab.seqNo),
|
|
};
|
|
(data.id ? updateHomeGameTab(data) : saveHomeGameTab(data)).then(res => {
|
|
console.log(res);
|
|
apiResult(res);
|
|
TableHelper.doRefresh('#table');
|
|
$('#editModal').modal('hide');
|
|
});
|
|
|
|
},
|
|
del(obj) {
|
|
const index = $(obj).data('index');
|
|
const record = TableHelper.getData('#table')[index];
|
|
const id = record.id;
|
|
if (!confirm('是否确定要删除？')) {
|
|
return;
|
|
}
|
|
delHomeGameTab(id).then(res => {
|
|
console.log(res);
|
|
apiResult(res);
|
|
TableHelper.doRefresh('#table');
|
|
});
|
|
},
|
|
getGame() {
|
|
getGamePartnerList().then(res => {
|
|
let data = res.data;
|
|
if (data) {
|
|
this.gamePartners = data.map(v => {
|
|
return {
|
|
value: v.gameId,
|
|
text: v.gameName
|
|
};
|
|
});
|
|
}
|
|
if (this.gamePartners.length > 0) {
|
|
buildSelectOption('#gameId', this.gamePartners[0].value, this.gamePartners);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style> |