Files
peko-admin-web/src/views/discovery/DiscoveryAdminView.vue
2024-04-22 10:45:13 +08:00

771 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<!-- .content -->
<div id="table"></div>
<div id="toolbar">
名称:<input type="text" class="input-sm" name="name" id="searchName">
上架:<select name="displayType" id="searchDisplayType" class="input-sm">
<option value="0">--全部--</option>
<option value="1">上架</option>
<option value="2">下架</option>
</select>
app:
<select name="searchAppId" id="searchAppId" class="input-m">
<option value="">--全部--</option>
</select>
跳转类型:<select name="jumpType" id="searchJumpType" class="input-sm">
<option value="0">--全部--</option>
<option value="1">跳转链接</option>
<option value="2">跳转房间</option>
<option value="3">跳转游戏</option>
<option value="5">跳转App页面</option>
</select>
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>搜索
</button>
<button id="btnAdd" class="btn btn-default">
<i class="glyphicon glyphicon-add"></i>增加
</button>
</div>
</div>
</div>
</section>
<!--新增/编辑发现弹窗-->
<div class="modal fade" id="discoveryModal" 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="discoveryModalLabel">新增</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="discoveryForm">
<input type="hidden" id="editId">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="name" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">跳转类型:</label>
<div class="col-sm-9">
<input type="radio" name="jumpType" id="link" value="1">跳转链接
<input type="radio" name="jumpType" id="room" value="2">跳转房间
<input type="radio" name="jumpType" id="game" value="3">跳转游戏
<input type="radio" name="jumpType" id="app" value="5">跳转App页面
</div>
</div>
<div class="form-group" style="display:none" id="linkGroup">
<label for="jumpLink" class="col-sm-3 control-label">跳转链接:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="link" id="jumpLink">
</div>
</div>
<div class="form-group" style="display:none" id="roomGroup">
<label for="jumpRoom" class="col-sm-3 control-label">跳转房间:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="roomId" id="jumpRoom">
</div>
</div>
<div class="form-group" style="display:none" id="gameGroup">
<label for="jumpGame" class="col-sm-3 control-label">跳转游戏:</label>
<input type="hidden" id="gameId">
<select name="jumpGame" id="jumpGame" class="col-sm-7 input-sm">
</select>
</div>
<div class="form-group" style="display:none" id="jumpAppGroup">
<label for="routerType" class="col-sm-3 control-label">跳转类型值:</label>
<div class="col-sm-3">
<input type="text" class="col-sm-3 form-control" name="routerType" id="routerType">
</div>
<label for="routerValue" class="col-sm-3 control-label">跳转参数值:</label>
<div class="col-sm-3">
<input type="text" class="col-sm-3 form-control" name="routerValue" id="routerValue">
</div>
</div>
<div class="form-group">
<label for="pic" class="col-sm-3 control-label">活动图片(大图)</label>
<div class="col-sm-9">
<img src="" id="picImage" style="width:250px;height:90px;" alt="">
<input type="file" id="picFile" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
<button class="btn btn-success" type="button"
onclick="uploadfile('picFile','picImage','pic','picInfo')">上传</button>
<input type="hidden" id="pic" name="icon" class="form-control" />
<span id="picInfo" style="color:red;"></span>
</div>
</div>
<div class="form-group">
<label for="pic" class="col-sm-3 control-label">活动图片(小图)</label>
<div class="col-sm-9">
<img src="" id="picMinImage" style="width:250px;height:90px;" alt="">
<input type="file" id="picMinFile" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
<button class="btn btn-success" type="button"
onclick="uploadfile('picMinFile','picMinImage','minPic','minPicInfo')">上传</button>
<input type="hidden" id="minPic" name="icon" class="form-control" />
<span id="minPicInfo" style="color:red;"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">活动类型:</label>
<div class="col-sm-9">
<label class="radio-inline"><input type="radio" name="activityType" id="noOne" value=""
checked></label>
<label class="radio-inline"><input type="radio" name="activityType" id="sign"
value="1">签到</label>
<label class="radio-inline"><input type="radio" name="activityType" id="task"
value="2">任务</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">是否上架:</label>
<div class="col-sm-9">
<input type="radio" name="displayType" id="up" value="1">
<input type="radio" name="displayType" id="down" value="2">
</div>
</div>
<div class="form-group">
<label for="appId" class="col-sm-3 control-label">app:</label>
<select name="appId" id="appId" class="col-sm-2 validate[required]">
<option value="">请选择...</option>
</select>
</div>
<div class="form-group">
<label for="seqNo" class="col-sm-3 control-label">排序:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="seqNo" id="seqNo">
</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="add">提交</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
var app = {};
var validApp = {};
export default {
name: "DiscoveryAdminView",
setup() {
function uploadfile(file, image, path, info) {
$(this).attr('disabled', "true");
$.ajaxFileUpload({
fileElementId: file, //需要上传的文件域的ID即<input type="file">的ID。
url: '/admin/upload/img', //后台方法的路径
type: 'post', //当要提交自定义参数时这个参数要设置成post
dataType: 'json', //服务器返回的数据类型。可以为xml,script,json,html。如果不填写jQuery会自动判断。
secureuri: false, //是否启用安全提交默认为false。
async: true, //是否是异步
success: function (json) { //提交成功后自动执行的处理函数参数data就是服务器返回的数据。
if (json.path) {
$('#' + path).val(json.path);
$('#' + image).attr("src", json.path);
if (json.path != '') {
$("#" + info).html('已上传成功');
} else {
$("#" + info).html('未上传成功');
}
console.log(json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
$(this).removeAttr("disabled");
console.error(e);
}
});
}
window.uploadfile = uploadfile;
return {
uploadfile,
};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
getAppNames();
function getAppNames() {
$.get('/admin/appName/listAll', {}, function (res) {
if (res.rows.length > 0) {
renderSelect(res.rows);
renderAppObj(res.rows);
}
})
}
function renderSelect(data) {
var $select = $('#searchAppId');
for (var i = 0; i < data.length; i++) {
var $option = $('<option value="' + data[i].app + '" />');
$option.html(data[i].appName);
$select.append($option);
}
}
function renderAppObj(rows) {
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
app[row.app] = row.appName;
// 有效的app
if (row.status == 1) {
validApp[row.app] = row.appName;
}
}
}
$('#table').bootstrapTable('destroy');
//初始化表格数据
initTable();
// 查询刷新
$('#btnSearch').on('click', function () {
$('#table').bootstrapTable('destroy');
initTable();
});
// 新增家族弹窗
$("#btnAdd").on("click", function () {
clearForm("discoveryForm");
// 处理appId
$('#appId').empty();
$('#appId').append('<option value="">请选择...</option>');
for (var key in validApp) {
$('#appId').append('<option value="' + key + '">' + validApp[key] + '</option>');
}
$("#link").prop("checked", true);
$("#up").prop("checked", true);
$("#linkGroup").show();
$("#jumpAppGroup").hide();
$("#discoveryModal").modal('show');
$("#jumpLink").removeClass("validate[required]");
$("#jumpRoom").removeClass("validate[required]");
$("#jumpGame").removeClass("validate[required]");
$("#app").removeClass("validate[required]");
$("#noOne").prop("checked", true);
});
//跳转链接
$("#link").on("click", function () {
$("#linkGroup").show();
$("#roomGroup").hide();
$("#gameGroup").hide();
$("#jumpAppGroup").hide();
});
//跳转房间
$("#room").on("click", function () {
$("#linkGroup").hide();
$("#roomGroup").show();
$("#gameGroup").hide();
$("#jumpAppGroup").hide();
});
//跳转游戏
$("#game").on("click", function () {
$("#linkGroup").hide();
$("#roomGroup").hide();
$("#jumpAppGroup").hide();
getGame();
});
//跳转App页面
$("#app").on("click", function () {
$("#linkGroup").hide();
$("#roomGroup").hide();
$("#gameGroup").hide();
$("#jumpAppGroup").show();
});
//新增发现保存
$("#add").on("click", function () {
var id = $("#editId").val();
var name = $("#name").val();
var appId = $("#appId").val();
var isLink = $("#link").is(":checked");
var isRoom = $("#room").is(":checked");
var isGame = $("#game").is(":checked");
var isApp = $("#app").is(":checked");
var jumpType = null;
var link = null;
var roomId = null;
var gameId = null;
var routerType = null;
var routerValue = null;
if (isLink) {
jumpType = "1";
link = $("#jumpLink").val();
$("#jumpLink").addClass("validate[required]");
} else if (isRoom) {
jumpType = "2";
roomId = $("#jumpRoom").val();
$("#jumpRoom").addClass("validate[required]");
} else if (isGame) {
jumpType = "3";
gameId = $("#jumpGame").val();
$("#jumpGame").addClass("validate[required]");
} else if (isApp) {
jumpType = "5";
routerType = $("#routerType").val();
routerValue = $("#routerValue").val();
$("#routerType").addClass("validate[required]");
}
if (jumpType == null) {
$("#tipMsg").text("请选择跳转类型");
$("#tipModal").modal('show');
return;
}
if (!$('#appId').val()) {
$("#tipMsg").text("请选择app");
$("#tipModal").modal('show');
return;
}
var displayType = null;
var up = $("#up").is(":checked");
var down = $("#down").is(":checked");
if (up) {
displayType = "1";
} else if (down) {
displayType = "2";
}
var icon = $("#pic").val();
var minImage = $("#minPic").val();
var seqNo = $("#seqNo").val();
var activityType = null;
var sign = $("#sign").is(":checked");
var task = $("#task").is(":checked");
if (sign) {
activityType = "1";
} else if (task) {
activityType = "2";
}
if ($("#discoveryForm").validationEngine('validate')) {
$.ajax({
type: 'post',
url: '/admin/discovery/saveOrUpdate',
data: {
id: id,
name: name,
icon: icon,
displayType: displayType,
jumpType: jumpType,
roomUid: roomId,
link: link,
gameId: gameId,
seqNo: seqNo,
routerType: routerType,
routerValue: routerValue,
activityType: activityType,
minImage: minImage,
appId: appId
},
dataType: 'json',
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#discoveryModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
});
});
$("#table").on("click", '.opt-edit', function () {
clearForm("discoveryForm");
// 处理appId
$('#appId').empty();
$('#appId').append('<option value="">请选择...</option>');
for (var key in app) {
$('#appId').append('<option value="' + key + '">' + app[key] + '</option>');
}
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/discovery/getById",
data: { id: id },
dataType: "json",
success: function (json) {
if (json) {
$("#editId").val(id);
$("#name").val(json.name);
$("#appId").val(json.appId);
if (json.jumpType == "1") {
$("#linkGroup").show();
$("#roomGroup").hide();
$("#gameGroup").hide();
$("#jumpAppGroup").hide();
$("#link").prop("checked", true);
$("#room").prop("checked", false);
$("#game").prop("checked", false);
$("#app").prop("checked", false);
$("#jumpLink").val(json.link);
} else if (json.jumpType == "2") {
$("#linkGroup").hide();
$("#roomGroup").show();
$("#gameGroup").hide();
$("#jumpAppGroup").hide();
$("#link").prop("checked", false);
$("#room").prop("checked", true);
$("#game").prop("checked", false);
$("#app").prop("checked", false);
$("#jumpRoom").val(json.roomUid);
} else if (json.jumpType == "3") {
$("#linkGroup").hide();
$("#roomGroup").hide();
$("#jumpAppGroup").hide();
$("#gameGroup").show();
$("#link").prop("checked", false);
$("#room").prop("checked", false);
$("#game").prop("checked", true);
$("#app").prop("checked", false);
$("#gameId").val(json.gameId);
getGame();
} else if (json.jumpType == "5") {
$("#linkGroup").hide();
$("#roomGroup").hide();
$("#gameGroup").hide();
$("#jumpAppGroup").show();
$("#link").prop("checked", false);
$("#room").prop("checked", false);
$("#game").prop("checked", false);
$("#app").prop("checked", true);
$("#jumpLink").val(json.link);
$("#routerType").val(json.routerType);
$("#routerValue").val(json.routerValue);
}
if (json.displayType == '1') {
$("#up").prop("checked", true);
$("#down").prop("checked", false);
} else if (json.displayType == '2') {
$("#up").prop("checked", false);
$("#down").prop("checked", true);
}
if (json.activityType == '1') {
$("#sign").prop("checked", true);
$("#task").prop("checked", false);
} else if (json.activityType == '2') {
$("#sign").prop("checked", false);
$("#task").prop("checked", true);
}
$("#seqNo").val(json.seqNo);
// 设置礼物图片
$('#pic').val(json.icon);
$('#picImage').attr("src", json.icon);
if (json.icon != '') {
$("#picInfo").html('已上传');
} else {
$("#picInfo").html('未上传');
}
$('#minPic').val(json.minImage);
$('#picMinImage').attr("src", json.minImage);
if (json.icon != '') {
$("#minPicInfo").html('已上传');
} else {
$("#minPicInfo").html('未上传');
}
// 打开编辑弹窗
$("#discoveryModal").modal('show');
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
//删除发现(逻辑删除)
$("#table").on("click", ".opt-del", function () {
var id = $(this).attr("data-id");
if (confirm("你确认删除该记录吗?" +
"\r\n删除后再也不能找回请谨慎操作")) {
$.ajax({
type: 'post',
url: "/admin/discovery/saveOrUpdate",
data: {
'id': id,
'status': '0'
},
dataType: "json",
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
}
},
};
function clearForm(formId) {
var $form = $('#' + formId);
$form.find('input').val('');
$form.find('select').val('');
$form.find('textarea').val('');
$form.find('input:radio').attr("checked", false);
$form.find('img').attr("src", "");
$form.find('span').html("");
}
function getGame() {
$.ajax({
type: 'get',
url: '/admin/discovery/queryGame',
data: {},
dataType: 'json',
success: function (json) {
if (json) {
var gameStr = "";
if (json != null && json.length > 0) {
for (var i = 0; i < json.length; i++) {
gameStr = gameStr + "<option value='" + json[i].id + "'>" + json[i].name + "</option>";
}
}
$("#jumpGame").html(gameStr);
var gameId = $("#gameId").val();
if (gameId != null && gameId != "") {
$("#jumpGame").find("option[value='" + gameId + "']").attr("selected", "selected");
}
$("#gameGroup").show();
} else {
$("#tipMsg").text("查询游戏信息失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
}
}
});
}
function initTable() {
$('#table').bootstrapTable({
columns: [
{ field: 'tmp', title: 'id', align: 'center', checkbox: true, width: '5%', valign: 'middle' },
{ field: 'id', title: '编号', align: 'center', width: '5%', valign: 'middle' },
{ field: 'name', title: '名称', align: 'center', width: '5%', valign: 'middle' },
{
field: 'icon',
title: '图片',
align: 'center',
width: '5%',
//valign: 'middle',
formatter: function (val, row, index) {
if (val && val.indexOf("https") == 0) {
return "<img src='" + val + "' height='106'>";
} else {
return row.value;
}
}
},
{
field: 'displayType',
title: '上架',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (val == "1") {
return "是";
} else if (val == "2") {
return "否";
}
}
},
{
field: 'jumpType',
title: '跳转类型',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (val == 1) {
return "跳转链接";
} else if (val == "2") {
return "跳转房间";
} else if (val == "3") {
return "跳转游戏";
} else if (val == "5") {
return "跳转App页面";
} else {
return '-';
}
}
},
{
field: 'roomUid',
title: '跳转房间',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (row.jumpType == '2') {
return "ID:" + val;
} else {
return "否";
}
}
},
{
field: 'link',
title: '链接',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (row.jumpType == '1') {
return val;
} else {
return "否";
}
}
},
{
field: 'appId',
title: 'app',
align: 'center',
width: '10%',
valign: 'middle',
formatter: function (val, row, index) {
var name = app[val];
if (name != null) {
return name;
}
return val;
}
},
{
field: 'familyGame.name',
title: '游戏',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (row.jumpType == '3') {
return val;
} else {
return "否";
}
}
},
{ field: 'seqNo', title: '排序', align: 'center', width: '5%', valign: 'middle' },
{
field: 'pulishTime',
title: '发布时间',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
if (val) {
var date = new Date(val);
return date.format("yyyy-MM-dd hh:mm:ss");
} else {
return '-';
}
}
},
{
field: 'id',
title: '操作',
align: 'center',
width: '5%',
valign: 'middle',
formatter: function (val, row, index) {
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 id="btnMove" name="btnDel" class="btn btn-sm btn-success opt-del" data-id=' + val + '>' +
'<i class="glyphicon glyphicon-move"></i> 删除</button>&nbsp;&nbsp;';
}
}
],
cache: false,
striped: true,
showRefresh: false,
pageSize: 20,
pagination: true,
pageList: [20, 50, 100, 200, 300, 500],
search: false,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
name: $('#searchName').val(),
appId: $('#searchAppId').val(),
displayType: $('#searchDisplayType').val(),
jumpType: $('#searchJumpType').val(),
};
return param;
},
toolbar: '#toolbar',
url: '/admin/discovery/list',
onLoadSuccess: function () { //加载成功时执行
$(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
}
</script>
<style scoped></style>