yinmeng/yinmeng-admin-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增游戏分类设置功能

Browse Source
This commit is contained in:
liaozetao
2023-12-22 15:52:51 +08:00
parent 00457d24ba
commit 0d84d17309
6 changed files with 437 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/common/upload.js Normal file
View File

@@ -0,0 +1,23 @@
import '@/utils/ajaxfileupload';
export const uploadFile = id => {
return new Promise((resolve, reject) => {
$.ajaxFileUpload({
fileElementId: id,
url: '/admin/upload/img',
type: 'post',
dataType: 'json',
secureuri: false,
async: true,
submitType: 'ajax',
success: function (res) {
resolve(res);
},
error: function (res, status, e) {
console.error(res);
console.error(status);
reject(e);
}
});
});
};

8
src/api/game/gamePartner.js Normal file
View File

@@ -0,0 +1,8 @@
import request from "@/utils/request";
export const getGamePartnerList = () => {
return request({
url: '/admin/gamePartner/info/listAll',
method: 'get',
});
}

33
src/api/home/homeGameTab.js Normal file
View File

@@ -0,0 +1,33 @@
import request from "@/utils/request";
export const getHomeGameTabPage = query => {
return request({
url: '/admin/home/game/tab/page',
method: 'get',
params: query,
});
}
export const saveHomeGameTab = data => {
return request({
url: '/admin/home/game/tab',
method: 'post',
data: data,
});
}
export const updateHomeGameTab = data => {
return request({
url: '/admin/home/game/tab',
method: 'post',
data: data,
});
}
export const delHomeGameTab = query => {
return request({
url: '/admin/home/game/tab',
method: 'get',
params: query,
});
}

12
src/utils/maintainer.js
View File

@@ -57,3 +57,15 @@ export function param(json) {
encodeURIComponent(json[key])
})).join('&')
}
export function buildSelectOption(id, defVal, array) {
let $select = $(id);
for(let i in array) {
let obj = array[i];
let selected = false;
if (obj.value == defVal) {
selected = true;
}
$select.append('<option value="' + obj.value + '"' + (selected ? 'selected' : '') + '>' + obj.text + '</option>');
}
}

300
src/views/home/HomeGameTabAdminView.vue Normal file
View File

@@ -0,0 +1,300 @@
<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">&times;</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 { 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;
TableHelper.destroy('#table');
$('#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 = 0;
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.category.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>

100
src/views/room/RoomTabHomeView.vue
View File

@@ -15,7 +15,7 @@
</div>
</div>-->
<div class="col-sm-12">
<label for="erbanNo" class="col-sm-2 control-label">房主音萌号:</label>
<label for="erbanNo" class="col-sm-2 control-label">房主平台号:</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="erbanNo" id="erbanNo" placeholder="">
</div>
@@ -23,6 +23,13 @@
<div class="col-sm-2">
<input type="text" class="form-control" name="roomTitle" id="roomTitle" placeholder="">
</div>
<label for="isTop" class="col-sm-2 control-label">是否置顶:</label>
<div class="col-sm-2">
<select name="isTop" id="isTop" class="form-control">
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>查询
</button>
@@ -92,13 +99,21 @@
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { formatTime } from '@/utils/maintainer';
// tab类型选择变化查询
/*function selectOnTabChange(obj){
// console.log(obj);
TableHelper.doRefresh('#table');
}*/
export default {
name: "RoomTabHomeView",
setup() { },
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
@@ -106,11 +121,6 @@ export default {
},
methods: {
initData() {
// tab类型选择变化查询
/*function selectOnTabChange(obj){
// console.log(obj);
TableHelper.doRefresh('#table');
}*/
$(function () {
$('.datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
@@ -118,12 +128,11 @@ export default {
});
// 拉取所有tab
//getRoomTabs();
$('#table').bootstrapTable('destroy');
// 清空分页组件的容器
$('.fixed-table-pagination').empty();
$('#table').bootstrapTable({
columns: [
{ field: 'erbanNo', title: '房主音萌号', align: 'center', width: '5%' },
{ field: 'erbanNo', title: '房主平台号', align: 'center', width: '5%' },
{ field: 'roomUid', title: '房主Uid', align: 'center', width: '5%' },
{ field: 'roomTitle', title: '房间标题', align: 'center', width: '8%' },
{ field: 'roomTag', title: '房间标签', align: 'center', width: '5%' },
@@ -144,6 +153,7 @@ export default {
} else {
return '否';
}
}
},
{ field: 'seq', title: '置顶排序', align: 'center', width: '5%' },
@@ -155,10 +165,10 @@ export default {
align: 'center',
width: '10%',
formatter: function (val, row, index) {
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id="' + val + '" >' +
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
'&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
'&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id="' + val +
'"><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
@@ -181,7 +191,8 @@ export default {
page: params.pageNumber,
pageSize: params.pageSize,
erbanNo: $('#erbanNo').val(),
roomTitle: $('#roomTitle').val()
roomTitle: $('#roomTitle').val(),
isTop: $('#isTop').val(),
//tabId: tabId
};
console.log(param);
@@ -214,21 +225,23 @@ export default {
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
// 编辑或者新增
$("#btnConfirm").click(function () {
var id = $("#id").val();
var seq = $("#modal_seq").val();
var isTop = $("#modal_isTop").val();
var iconContent = $("#modal_iconContent").val();
var topStart = $("#modal_topStart").val();
var topEnd = $("#modal_topEnd").val();
if (!iconContent) {
iconContent = '';
}
var topStart = $("#modal_topStart").val();
var topEnd = $("#modal_topEnd").val();
if ($("#addForm").validationEngine('validate')) {
$.ajax({
type: "post",
@@ -257,34 +270,39 @@ export default {
}
});
}
});
// 获取信息
$("#table").on("click", '.opt-edit', function () {
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/roomTabHome/get.action",
data: { id: id },
dataType: "json",
success: function (ret) {
if (ret.code == 200) {
var json = ret.data.roomTabHome;
$("#id").val(id);
$("#modal_iconContent").val(json.iconContent);
$("#modal_seq").val(json.seq);
$("#modal_isTop").val(json.isTop ? 1 : 0);
$("#modal_topStart").val(formatTime(json.topStart));
$("#modal_topEnd").val(formatTime(json.topEnd));
// 打开编辑弹窗
$("#roomTabHomeModal").modal('show');
$("#modalLabel").text("编辑");
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
if (id && id != 'null') {
$.ajax({
type: "get",
url: "/admin/roomTabHome/get.action",
data: { id: id },
dataType: "json",
success: function (ret) {
if (ret.code == 200) {
var json = ret.data.roomTabHome;
$("#id").val(id);
$("#modal_iconContent").val(json.iconContent);
$("#modal_seq").val(json.seq);
$("#modal_isTop").val(json.isTop ? 1 : 0);
$("#modal_topStart").val(formatTime(json.topStart));
$("#modal_topEnd").val(formatTime(json.topEnd));
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
}
});
});
}
// 打开编辑弹窗
$("#roomTabHomeModal").modal('show');
$("#modalLabel").text("编辑");
});
// 删除操作
$("#table").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
@@ -312,6 +330,7 @@ export default {
});
}
});
// 通过接口获取所有房间tab
function getRoomTabs() {
$.ajax({
@@ -337,9 +356,12 @@ export default {
}
});
}
});
}
}
},
};
</script>
<style scoped></style>