代码搬迁【第二版】
This commit is contained in:
liaozetao
871
src/views/face/FaceJsonAdminView.vue
Normal file
871
src/views/face/FaceJsonAdminView.vue
Normal file
@@ -0,0 +1,871 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<div class="box-body">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
配置类型:
|
||||
<select name="configType" id="configType" class="input-sm">
|
||||
<option value="2">表情图片</option>
|
||||
<option value="1">表情Json</option>
|
||||
</select>
|
||||
表情名称:<input type="text" class="input-sm" name="faceName" id="faceName">
|
||||
表情ID:<input type="text" class="input-sm" name="faceId" id="faceId">
|
||||
状态:
|
||||
<select name="faceStatus" id="faceStatus" class="input-sm">
|
||||
<option value="2">--全部--</option>
|
||||
<option value="1">显示</option>
|
||||
<option value="0">隐藏</option>
|
||||
</select>
|
||||
类型:
|
||||
<select name="selectFaceType" id="selectFaceType" class="input-sm">
|
||||
<option value="">--全部--</option>
|
||||
<option value="1">普通表情</option>
|
||||
<option value="2">贵族表情</option>
|
||||
</select>
|
||||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||||
<button id="btnAddFaceJson" class="btn btn-sm btn-primary">新增FaceJson</button>
|
||||
<button id="deletePatch" class="btn btn-sm btn-primary">批量删除</button>
|
||||
<button id="updateImgs" class="btn btn-sm btn-primary">批量上传图片</button>
|
||||
<button id="updateFaceInfo" class="btn btn-sm btn-primary">保存更新</button>
|
||||
<button id="restoreFaceInfo" class="btn btn-sm btn-primary">一键还原</button>
|
||||
<br />
|
||||
<!--<div class="form-group" id="versionInfo" hidden="true">-->
|
||||
<h4 id="version"></h4>
|
||||
<!--</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class=" modal fade" id="faceJsonImgsUpload" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
|
||||
<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="modalLabel1">新增表情图片</h4>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow:auto;width: 100%;max-height: 80%">
|
||||
<ul id="bigImg"></ul>
|
||||
</div>
|
||||
<div class="modal-footer" style="height: 20%">
|
||||
<span>上传图片</span>
|
||||
<input type="file" name="logoFile1" id="logoFile1" onchange="setImg(this);" style="display:inline;"
|
||||
accept="image/*" multiple>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="addImg">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade" id="renameImg" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="img" class="col-sm-3 control-label">图片:</label>
|
||||
<div class="col-sm-9">
|
||||
<img src="" id="img" style="width:90px;height:60px;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="beforeImgName" class="col-sm-3 control-label">原图片名:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="beforeImgName"
|
||||
id="beforeImgName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="afterImgName" class="col-sm-3 control-label">重命名:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="afterImgName" id="afterImgName">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="btnRenameImg">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="faceJsonModal" tabindex="-1" role="dialog" aria-labelledby="modalLabe3">
|
||||
<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="modalLabel3">新增表情配置Item</h4>
|
||||
</div>
|
||||
<div class="modal-body" style="overflow:auto;width: 100%;max-height: 80%">
|
||||
<form class="form-horizontal" id="addForm">
|
||||
<input type="hidden" class="form-control" name="jsonConfigType" id="jsonConfigType">
|
||||
<div class="form-group">
|
||||
<label for="addFaceId" class="col-sm-3 control-label">表情名ID:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="addFaceId" id="addFaceId">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="addFaceName" class="col-sm-3 control-label">表情名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="addFaceName"
|
||||
id="addFaceName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="pinyin" class="col-sm-3 control-label">表情拼音:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="pinyin" id="pinyin">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">表情类型</label>
|
||||
<div class="col-sm-9">
|
||||
<label class="radio-inline">
|
||||
<input name="faceKind" type="radio" id="normalFace" value="1"
|
||||
checked="checked">普通</label>
|
||||
<label class="radio-inline">
|
||||
<input name="faceKind" type="radio" id="vipFace" value="2">贵族</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">审核中表情状态</label>
|
||||
<div class="col-sm-9">
|
||||
<label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFace" value="0"
|
||||
checked>显示</label>
|
||||
<label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFaceNo"
|
||||
value="1">隐藏</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="imageCount" class="col-sm-3 control-label">表情图片总数:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="imageCount"
|
||||
id="imageCount">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="iconPos" class="col-sm-3 control-label">表情封面图片的index:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="iconPos" id="iconPos">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="animStartPos" class="col-sm-3 control-label">表情开始的index:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="animStartPos" id="animStartPos">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="animEndPos" class="col-sm-3 control-label">表情结束的index:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="animEndPos" id="animEndPos">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="animDuration" class="col-sm-3 control-label">表情的展示的总的时间(毫秒):</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="animDuration" id="animDuration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="resultCount" class="col-sm-3 control-label">表情结束时候公屏展示结束图片的个数:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="resultCount" id="resultCount">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">表情帧动画结束时候结果图片是否互斥:</label>
|
||||
<div class="col-sm-9">
|
||||
<label class="radio-inline"><input name="canResultRepeat" type="radio" id="canResultRepeat"
|
||||
value="1" checked>不互斥</label>
|
||||
<label class="radio-inline"><input name="canResultRepeat" type="radio"
|
||||
id="canResultRepeatNo" value="0">互斥</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="animRepeatCount" class="col-sm-3 control-label">表情帧动画展示的次数:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="canResultRepeatanimRepeatCount"
|
||||
id="animRepeatCount">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="resultStartPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的开始index:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="resultStartPos" id="resultStartPos">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="resultEndPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的结束index:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="resultEndPos" id="resultEndPos">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="resultDuration" class="col-sm-3 control-label">表情帧动画展示结束，结果图片展示的时间(毫秒):</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="resultDuration" id="resultDuration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">表情显示类型:</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="faceType" id="faceType" class="input-sm">
|
||||
<option value="1" selected="selected">正常表情，需要在表情面板显示</option>
|
||||
<option value="2">功能表情不需要在表情面板显示</option>
|
||||
<option value="3">类似一起玩的表情使用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">结果图片排列的类型:</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="displayType" id="displayType" class="input-sm">
|
||||
<option value="0" selected="selected">只有一张图片</option>
|
||||
<option value="1">紧凑排列</option>
|
||||
<option value="2">重叠排列</option>
|
||||
<option value="3">并排排列</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" style="height: 20%">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="addFaceJson">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
const NORMAL_FACE = 1; // 普通表情
|
||||
const VIP_FACE = 2; // 贵族表情
|
||||
|
||||
export default {
|
||||
name: "FaceJsonAdminView",
|
||||
setup() {
|
||||
function setImg(obj) {
|
||||
var f = $(obj).val();
|
||||
if (f == null || f == undefined || f == '') {
|
||||
return false;
|
||||
}
|
||||
var filePaths = $(obj)[0].files;
|
||||
var num = filePaths.length;
|
||||
var data = new FormData();
|
||||
for (var i = 0; i <= num - 1; i++) {
|
||||
var file = $(obj)[0].files[i];
|
||||
var fileName = file.name;
|
||||
if (!/\.(?:png|jpg|bmp|gif|jpeg|PNG|JPG|BMP|GIF|JPEG)$/.test(fileName)) {
|
||||
console.log(fileName + '不是图片');
|
||||
$("#tipMsg").text(fileName + '不是图片');
|
||||
$("#tipModal").modal('show');
|
||||
continue;
|
||||
}
|
||||
var fileNameSplit = fileName.split('_');
|
||||
if (fileNameSplit.length < 3) {
|
||||
console.log(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
|
||||
$("#tipMsg").text(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
|
||||
$("#tipModal").modal('show');
|
||||
continue;
|
||||
}
|
||||
data.append('file_' + i, file);
|
||||
}
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/admin/faceJson/updateImg.action",
|
||||
data: data,
|
||||
cache: false,
|
||||
contentType: false, //不可缺
|
||||
processData: false, //不可缺
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'false') {
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
else {
|
||||
for (var j = 0; j <= json.length - 1; j++) {
|
||||
$("#tipMsg").text("上传成功");
|
||||
$("#tipModal").modal('show');
|
||||
var path = '/admin/faceJson/getPicInputStream.action?type=1&picName=' + json[j];
|
||||
var info = json[j].split('.');
|
||||
var name = info[0];
|
||||
var nameSuffix = info[1];
|
||||
var div = document.getElementById(json[j]);
|
||||
var liId = 'l_' + name + '_' + nameSuffix;
|
||||
if (div != null) {
|
||||
div.attr("src", path);
|
||||
return;
|
||||
}
|
||||
else {
|
||||
var a_hidden = "<li id='" + liId + "'>";
|
||||
var img_html = "<img src='" + path + "' width='60' height='60'>";
|
||||
var a_html = "<a href='#' onclick='deleteImg(\"" + name + "\",\"" + nameSuffix + "\")'>删除</a>";
|
||||
var li_html = "</li>";
|
||||
$('#bigImg').append(a_hidden + img_html + ' ' + json[j] + ' ' + a_html + li_html);
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (i >= filePaths.length - 1) {
|
||||
// $("#logoFile1").val("");
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteImg(val, valRes) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/deleteFile.action",
|
||||
data: {
|
||||
picName: val + '.' + valRes,
|
||||
type: 1,
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
var a = 'l_' + val + '_' + valRes;
|
||||
$('#' + a).remove();
|
||||
$("#logoFile1").val("");
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
window.setImg = setImg;
|
||||
window.deleteImg = deleteImg;
|
||||
return {
|
||||
setImg,
|
||||
deleteImg
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'tmp', title: 'ID', align: 'center', checkbox: true, width: '5%' },
|
||||
{ field: 'id', title: '表情id', align: 'center', width: '5%' },
|
||||
{ field: 'name', title: '表情名', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'pinyinName',
|
||||
title: '表情图片',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
var info = val.split('.');
|
||||
if (info.length > 1) {
|
||||
var a = '/admin/faceJson/getPicInputStream.action?picName=' + val;
|
||||
return "<img src='" + a + "' width='40' height='40'>";
|
||||
|
||||
}
|
||||
else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'pinyinName', title: '表情图片名', align: 'center', width: '8%' },
|
||||
{
|
||||
field: 'isLuckFace',
|
||||
title: '表情状态',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
return '隐藏';
|
||||
} else {
|
||||
return '显示';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'faceKind',
|
||||
title: '表情类型',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val === VIP_FACE) {
|
||||
return '贵族表情'
|
||||
} else {
|
||||
return '普通表情'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'pinyinName',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
formatter: function (val, val1, 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>' +
|
||||
' <button id="btnDelete" name="btnDelete" class="btn btn-sm btn-danger opt-remove" data-id=' + val +
|
||||
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
configType: $('#configType').val(),
|
||||
faceId: $('#faceId').val(),
|
||||
faceName: $('#faceName').val(),
|
||||
faceStatus: $('#faceStatus').val(),
|
||||
faceKind: $('#selectFaceType').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/faceJson/list.action',
|
||||
onLoadSuccess: function (json) { //加载成功时执行
|
||||
if (json.code != 200) {
|
||||
console.log(json.msg);
|
||||
}
|
||||
else {
|
||||
var version = json.version;
|
||||
var fileName = json.fileName;
|
||||
$("#version").html('当前版本号: ' + version +
|
||||
' 当前文件: ' + fileName);
|
||||
}
|
||||
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log('加载失败')
|
||||
}
|
||||
});
|
||||
|
||||
$("#updateImgs").click(function () {
|
||||
var div = document.getElementById("bigImg");
|
||||
while (div.hasChildNodes()) {
|
||||
div.removeChild(div.firstChild);
|
||||
}
|
||||
$("#logoFile1").val("");
|
||||
$("#faceJsonImgsUpload").modal('show');
|
||||
});
|
||||
$("#deletePatch").click(function () {
|
||||
var rows = $("#table").bootstrapTable("getSelections");
|
||||
if (rows.length == 0) {
|
||||
alert("请先选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
var idArr = [];
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
console.log(rows[i]['pinyinName'])
|
||||
idArr.push(rows[i]['pinyinName']);
|
||||
}
|
||||
if (confirm("你确认批量删除该记录吗?" +
|
||||
"\r\n删除后再也不能找回，请谨慎操作！")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: "/admin/faceJson/deletePatch.action",
|
||||
data: {
|
||||
ids: JSON.stringify(idArr),
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
$("#updateFaceInfo").click(function () {
|
||||
if (confirm("确认更新吗？")) {
|
||||
$("#tipMsg").text("正在压缩上传");
|
||||
$("#tipModal").modal('show');
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/updateFaceInfo.action",
|
||||
data: {},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("一键更新成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh('#table');
|
||||
} else {
|
||||
$("#tipMsg").text("一键更新失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
$("#restoreFaceInfo").click(function () {
|
||||
if (confirm("确认还原所有操作吗？")) {
|
||||
$("#tipMsg").text("正在还原");
|
||||
$("#tipModal").modal('show');
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/restoreFaceInfo.action",
|
||||
data: {},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("一键还原成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh('#table');
|
||||
} else {
|
||||
$("#tipMsg").text("一键还原失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#btnAddFaceJson").click(function () {
|
||||
document.getElementById("addForm").reset();
|
||||
$("#jsonConfigType").val("1");
|
||||
$("#canResultRepeat").prop("checked", true);
|
||||
$("#normalFace").prop("checked", true);
|
||||
$("#isLuckFace").prop("checked", true);
|
||||
$("#addFaceId").attr("disabled", false);
|
||||
$("#addFaceName").attr("disabled", false);
|
||||
$("#pinyin").attr("disabled", false);
|
||||
$("#divNobleId").hide();
|
||||
$("#faceJsonModal").modal('show');
|
||||
});
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
|
||||
$("#table").on("click", '.opt-edit', function () {
|
||||
var id = $(this).attr("data-id");
|
||||
var info = id.split('.');
|
||||
if (info.length > 1) {
|
||||
var path = '/admin/faceJson/getPicInputStream.action?picName=' + id;
|
||||
$("#img").attr("src", path);
|
||||
$("#beforeImgName").val(id);
|
||||
$("#afterImgName").val("");
|
||||
$('#renameImg').modal('show');
|
||||
}
|
||||
else {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/getFaceJsonItem.action",
|
||||
data: {
|
||||
picName: id,
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'false') {
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
else {
|
||||
$("#addFaceId").attr("disabled", true);
|
||||
$("#addFaceName").attr("disabled", true);
|
||||
$("#pinyin").attr("disabled", true);
|
||||
$("#jsonConfigType").val("2");
|
||||
$("#addFaceId").val(json.id);
|
||||
$("#addFaceName").val(json.name);
|
||||
$("#pinyin").val(json.pinyin);
|
||||
$("#imageCount").val(json.imageCount);
|
||||
$("#iconPos").val(json.iconPos);
|
||||
$("#animStartPos").val(json.animStartPos);
|
||||
$("#animEndPos").val(json.animEndPos);
|
||||
$("#animDuration").val(json.animDuration);
|
||||
$("#resultCount").val(json.resultCount);
|
||||
$("#animRepeatCount").val(json.animRepeatCount);
|
||||
$("#resultStartPos").val(json.resultStartPos);
|
||||
$("#resultEndPos").val(json.resultEndPos);
|
||||
$("#resultDuration").val(json.resultDuration);
|
||||
$("#displayType").val(json.displayType);
|
||||
if (json.canResultRepeat == 1) {
|
||||
$("#canResultRepeat").prop("checked", true);
|
||||
}
|
||||
else {
|
||||
$("#canResultRepeatNo").prop("checked", true);
|
||||
}
|
||||
if (json.isLuckFace) {
|
||||
$("#isLuckFaceNo").prop("checked", true);
|
||||
}
|
||||
else {
|
||||
$("#isLuckFace").prop("checked", true);
|
||||
}
|
||||
if (json.faceKind === VIP_FACE) {
|
||||
$("#vipFace").prop("checked", true);
|
||||
} else {
|
||||
$("#normalFace").prop("checked", true);
|
||||
}
|
||||
$("#faceType").val(json.faceType);
|
||||
$("#faceJsonModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-remove', function () {
|
||||
var id = $(this).attr("data-id");
|
||||
var info = id.split('.');
|
||||
if (info.length > 1) {
|
||||
if (confirm("确认删除表情图片吗?")) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/deleteFile.action",
|
||||
data: {
|
||||
picName: id,
|
||||
type: 2,
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (confirm("确认删除表情json吗(相应表情图片也将删除)?")) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/deleteFaceJsonItem.action",
|
||||
data: {
|
||||
picName: id,
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#addImg").click(function () {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/addImg.action",
|
||||
data: {},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("上传成功");
|
||||
$("#tipModal").modal('show');
|
||||
$("#faceJsonImgsUpload").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("上传失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
$("#faceJsonImgsUpload").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#btnRenameImg").click(function () {
|
||||
var beforeImgName = $("#beforeImgName").val();
|
||||
var afterImgName = $("#afterImgName").val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/renameImg.action",
|
||||
data: {
|
||||
beforeImgName: beforeImgName,
|
||||
afterImgName: afterImgName,
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("重命名成功");
|
||||
$("#tipModal").modal('show');
|
||||
$("#renameImg").modal('hide');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("重命名失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
$("#renameImg").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#addFaceJson").click(function () {
|
||||
var jsonConfigType = $("#jsonConfigType").val();
|
||||
var addFaceId = $("#addFaceId").val();
|
||||
var addFaceName = $("#addFaceName").val();
|
||||
var pinyin = $("#pinyin").val();
|
||||
var nobleId = $("#nobleId").val();
|
||||
var imageCount = $("#imageCount").val();
|
||||
var iconPos = $("#iconPos").val();
|
||||
var animStartPos = $("#animStartPos").val();
|
||||
var animEndPos = $("#animEndPos").val();
|
||||
var animDuration = $("#animDuration").val();
|
||||
var resultCount = $("#resultCount").val();
|
||||
var animRepeatCount = $("#animRepeatCount").val();
|
||||
var resultStartPos = $("#resultStartPos").val();
|
||||
var resultEndPos = $("#resultEndPos").val();
|
||||
var resultDuration = $("#resultDuration").val();
|
||||
var displayType = $("#displayType").val();
|
||||
var faceType = $("#faceType").val();
|
||||
var canResultRepeat = $('input[name="canResultRepeat"]:checked').val();
|
||||
var isLuckFace = $('input[name="luckFace"]:checked').val();
|
||||
var isNobleFace = $('input[name="noble"]:checked').val();
|
||||
var faceKind = $('input[name="faceKind"]:checked').val();
|
||||
console.log(canResultRepeat + '--' + isNobleFace);
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/faceJson/configFaceJsonSingle.action?jsonConfigType=" + jsonConfigType,
|
||||
data: {
|
||||
id: addFaceId,
|
||||
name: addFaceName,
|
||||
pinyin: pinyin,
|
||||
nobleId: nobleId,
|
||||
imageCount: imageCount,
|
||||
iconPos: iconPos,
|
||||
animStartPos: animStartPos,
|
||||
animEndPos: animEndPos,
|
||||
animDuration: animDuration,
|
||||
resultCount: resultCount,
|
||||
canResultRepeat: canResultRepeat,
|
||||
animRepeatCount: animRepeatCount,
|
||||
resultStartPos: resultStartPos,
|
||||
resultEndPos: resultEndPos,
|
||||
resultDuration: resultDuration,
|
||||
displayType: displayType,
|
||||
faceType: faceType,
|
||||
isLuckFace: isLuckFace,
|
||||
isNobleFace: isNobleFace,
|
||||
faceKind: faceKind
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#faceJsonModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败," + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
// $("#faceJsonModal").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar1,
|
||||
.bar2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
label.col-sm-1 {
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
/*padding-right: 4px;*/
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.record {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.record .title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 13px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.opt-group .col-sm-7 {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
779
src/views/family/FamilyAdminView.vue
Normal file
779
src/views/family/FamilyAdminView.vue
Normal file
@@ -0,0 +1,779 @@
|
||||
<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">
|
||||
<form id="searchForm" action="/admin/family/export" method="get" target="_blank">
|
||||
<div class="col-sm-12">
|
||||
<label for="familyId" class="col-sm-1 control-label">家族ID:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="familyId" id="familyId">
|
||||
</div>
|
||||
|
||||
<label for="familyNick" class="col-sm-1 control-label">家族昵称:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="familyNick" id="familyNick">
|
||||
</div>
|
||||
|
||||
<label for="leaderId" class="col-sm-1 control-label">族长ID:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="leaderId" id="leaderId">
|
||||
</div>
|
||||
|
||||
<label for="leaderNick" class="col-sm-1 control-label">族长昵称:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="leaderNick" id="leaderNick">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>搜索
|
||||
</button>
|
||||
<button id="btnAdd" class="btn btn-default opt-apply">
|
||||
<i class="glyphicon glyphicon-adjust"></i>增加
|
||||
</button>
|
||||
<button id="btnExport" class="btn btn-default ">
|
||||
<i class="glyphicon glyphicon-export"></i>导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--新增家族弹窗-->
|
||||
<div class="modal fade" id="addFamilyModal" 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" id="addFamilyForm">
|
||||
<div class="form-group">
|
||||
<label for="familyName" class="col-sm-3 control-label">家族名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="name" id="familyName"
|
||||
placeholder="请输入家族名称,不超过15个字">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="leader" class="col-sm-3 control-label">族长ID:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="leader" id="leader"
|
||||
placeholder="请输入族长ID">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="enableMo" class="col-sm-3 control-label">是否开放家族币:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="radio" name="openMoney" id="enableMo" value="true">是
|
||||
<input type="radio" name="openMoney" id="enableMoNo" value="false">否
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="familyMoNameGroup">
|
||||
<label for="familyMoName" class="col-sm-3 control-label">家族币名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="moneyName"
|
||||
id="familyMoName" placeholder="请输入家族币名称，不超过3个字">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="familyMoAwardGroup">
|
||||
<label for="familyMoAward" class="col-sm-3 control-label">创建家族币奖励:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="money" id="familyMoAward"
|
||||
placeholder="请输入创建家族币奖励">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="familyGameGroup">
|
||||
<label for="enableGame" class="col-sm-3 control-label">是否开放家族游戏:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="radio" name="openGame" id="enableGame" value="true">是
|
||||
<input type="radio" name="openGame" id="enableGameNo" value="false">否
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<!-- 编辑家族弹窗 -->
|
||||
<div class="modal fade" id="editFamilyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="editFamilyLabel">编辑家族</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="editFamilyForm">
|
||||
<input type="hidden" name="editFamilyId" id="editFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="editFalilyNick" class="col-sm-3 control-label">家族昵称</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="editFalilyNick" id="editFalilyNick"
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editLeaderId" class="col-sm-3 control-label">族长ID</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="editLeaderId" id="editLeaderId" readonly="readonly" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editYes" class="col-sm-3 control-label">是否开放家族币:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="radio" name="editOpenMoney" id="editYes" value="true">是
|
||||
<input type="radio" name="editOpenMoney" id="editNo" value="false">否
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="editFamilyMoNameGroup">
|
||||
<label for="editFamilyMoName" class="col-sm-3 control-label">家族币名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="editFamilyMoName" id="editFamilyMoName"
|
||||
readonly="readonly">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="editFamilyGameGroup">
|
||||
<label for="editEnable" class="col-sm-3 control-label">是否开放家族游戏:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="radio" name="editOpenGame" id="editEnable" value="true">是
|
||||
<input type="radio" name="editOpenGame" id="editDisable" value="false">否
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="editPic" class="col-sm-3 control-label">家族头像：</label>
|
||||
<div class="col-sm-9">
|
||||
<img src="" id="editPicImage" style="width:250px;height:90px;" alt="">
|
||||
<input type="file" id="editPicFile" name="uploadFile"
|
||||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
|
||||
<button class="btn btn-success" type="button"
|
||||
onclick="uploadfile('editPicFile','editPicImage','editPic','editPicInfo')">上传</button>
|
||||
<input type="hidden" id="editPic" name="icon" class="form-control" />
|
||||
<span id="editPicInfo" 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="edit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--禁用家族弹窗-->
|
||||
<div class="modal fade" id="forbidFamilyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="forbFamilyLabel">禁用家族</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="forbFamilyForm">
|
||||
<input type="hidden" name="forbFamilyId" id="forbFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="forbReason" class="col-sm-3 control-label">禁用原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="forbReason" id="forbReason"
|
||||
class="form-control validate[required]">
|
||||
</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="forb">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--解禁家族弹窗-->
|
||||
<div class="modal fade" id="recoverFamilyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="recoverFamilyLabel">解禁家族</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="recoverFamilyForm">
|
||||
<input type="hidden" name="forbFamilyId" id="recoverFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="forbReason" class="col-sm-3 control-label">解禁原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="forbReason" id="recoverReason"
|
||||
class="form-control validate[required]">
|
||||
</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="recover">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--解散家族弹窗-->
|
||||
<div class="modal fade" id="dissFamilyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="dissFamilyLabel">解散家族</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="dissFamilyForm">
|
||||
<input type="hidden" name="dissFamilyId" id="dissFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="dissReason" class="col-sm-3 control-label">解散原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="dissReason" id="dissReason"
|
||||
class="form-control validate[required]">
|
||||
</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="move">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
|
||||
|
||||
export default {
|
||||
name: "FamilyAdminView",
|
||||
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 () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
})
|
||||
// 新增家族弹窗
|
||||
$("#btnAdd").click(function () {
|
||||
clearForm("addFamilyForm");
|
||||
//默认开放家族币和家族游戏
|
||||
$("#enableMo").prop("checked", true);
|
||||
$("#enableGame").prop("checked", true);
|
||||
$("#addFamilyModal").modal('show');
|
||||
});
|
||||
|
||||
//选择开放家族币联动
|
||||
$("#enableMo").on("click", function () {
|
||||
$("#familyMoNameGroup").show();
|
||||
$("#familyMoAwardGroup").show();
|
||||
$("#familyGameGroup").show();
|
||||
});
|
||||
$("#editYes").on("click", function () {
|
||||
$("#editFamilyMoNameGroup").show();
|
||||
$("#editFamilyGameGroup").show();
|
||||
});
|
||||
//不开放家族币联动
|
||||
$("#enableMoNo").on("click", function () {
|
||||
$("#familyMoNameGroup").hide();
|
||||
$("#familyMoAwardGroup").hide();
|
||||
$("#familyGameGroup").hide();
|
||||
});
|
||||
$("#editNo").on("click", function () {
|
||||
$("#editFamilyMoNameGroup").hide();
|
||||
$("#editFamilyGameGroup").hide();
|
||||
});
|
||||
|
||||
//新增家族保存
|
||||
$("#add").on("click", function () {
|
||||
var familyName = $("#familyName").val();
|
||||
var leaderId = $("#leader").val();
|
||||
var enableMo = $("#enableMo").is(":checked");
|
||||
var familyMoName = $("#familyMoName").val();
|
||||
var familyMoAward = $("#familyMoAward").val();
|
||||
var enableGame = $("#enableGame").is(":checked");
|
||||
var pic = $("#pic").val();
|
||||
if ($("#addFamilyForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
name: familyName,
|
||||
leader: leaderId,
|
||||
openMoney: enableMo,
|
||||
moneyName: familyMoName,
|
||||
money: familyMoAward,
|
||||
openGame: enableGame,
|
||||
icon: pic
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#addFamilyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
//初始化表格数据
|
||||
function initTable() {
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'tmp', title: 'familyId', align: 'center', checkbox: true, width: '5%', valign: 'middle' },
|
||||
//{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
|
||||
{ field: 'familyId', title: '家族ID', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'familyName', title: '家族昵称', align: 'center', width: '5%', valign: 'middle' },
|
||||
{
|
||||
field: 'familyIcon',
|
||||
title: '家族头像',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
//valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
if (val.indexOf("https") == 0) {
|
||||
return "<img src='" + val + "' height='106'>";
|
||||
} else {
|
||||
return row.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'leader.erbanNo', title: '族长ID', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'leader.name', title: '族长昵称', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'memberCount', title: '家族成员(人)', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'moneyName', title: '家族币昵称', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'leader.money', title: '家族币数量', align: 'center', width: '5%', valign: 'middle' },
|
||||
{
|
||||
field: 'groups',
|
||||
title: '家族群',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var count = val.length;
|
||||
return count;
|
||||
} else {
|
||||
return '0';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
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:00");
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'temp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var key = row.familyId;
|
||||
var returnStr = '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + key + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 编辑</button> ';
|
||||
if (row.status == 1) {//正在使用
|
||||
returnStr = returnStr + '<button id="btnStop" name="btnStop" class="btn btn-sm btn-success opt-stop" data-id=' + key + '>' +
|
||||
'<i class="glyphicon glyphicon-stop"></i> 禁用</button> ';
|
||||
} else if (row.status == 2) {//已禁用
|
||||
returnStr = returnStr + '<button id="btnRecover" name="btnStop" class="btn btn-sm btn-danger opt-recover" data-id=' + key + '>' +
|
||||
'<i class="glyphicon glyphicon-stop"></i> 解禁</button> ';
|
||||
}
|
||||
return returnStr + '<button id="btnMove" name="btnMove" class="btn btn-sm btn-success opt-move" data-id=' + key + '>' +
|
||||
'<i class="glyphicon glyphicon-move"></i> 解散</button> ';
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
familyId: $('#familyId').val(),
|
||||
familyNick: $('#familyNick').val(),
|
||||
leaderId: $('#leaderId').val(),
|
||||
leaderNick: $('#leaderNick').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/family/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
$(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$("#table").on("click", '.opt-edit', function () {
|
||||
clearForm("editFamilyForm");
|
||||
var id = $(this).attr("data-id");
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/family/getById.action",
|
||||
data: { familyId: id },
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json) {
|
||||
$("#editFamilyId").val(id);
|
||||
$("#editFalilyNick").val(json.name);
|
||||
$("#editLeaderId").val(json.leader);
|
||||
ComboboxHelper.setDef("#editYes", json.openMoney);
|
||||
|
||||
ComboboxHelper.setDef("#editEnable", json.openGame);
|
||||
|
||||
// 礼物状态的值跟其他不同, 1为有效 0为无效
|
||||
if (json.openMoney == true) {
|
||||
//$("input:radio[name='enable']")[0].checked = true;
|
||||
$("#editYes").prop("checked", true);
|
||||
$("#editFamilyMoNameGroup").show();
|
||||
$("#editFamilyGameGroup").show();
|
||||
} else {
|
||||
$("#editNo").prop("checked", true);
|
||||
$("#editFamilyMoNameGroup").hide();
|
||||
$("#editFamilyGameGroup").hide();
|
||||
}
|
||||
//已经设置过家族币名称
|
||||
if (json.moneyName != null && json.moneyName != "") {
|
||||
$("#editFamilyMoName").val(json.moneyName);
|
||||
$("#editFamilyMoName").attr("readonly", "readonly");
|
||||
} else {
|
||||
$("#editFamilyMoName").removeAttr("readonly");
|
||||
}
|
||||
if (json.openGame == true) {
|
||||
$("#editEnable").prop("checked", true);
|
||||
} else {
|
||||
$("#editDisable").prop("checked", true);
|
||||
}
|
||||
|
||||
// 设置礼物图片
|
||||
$('#editPic').val(json.icon);
|
||||
$('#editPicImage').attr("src", json.icon);
|
||||
if (json.icon != '') {
|
||||
$("#editPicInfo").html('已上传');
|
||||
} else {
|
||||
$("#editPicInfo").html('未上传');
|
||||
}
|
||||
// 打开编辑弹窗
|
||||
$("#editFamilyModal").modal('show');
|
||||
} else {
|
||||
$("#tipMsg").text("获取菜单信息出错");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//编辑家族保存
|
||||
$("#edit").on("click", function () {
|
||||
var familyId = $("#editFamilyId").val();
|
||||
var familyName = $("#editFalilyNick").val();
|
||||
|
||||
var enableMo = $("#editYes").is(":checked");
|
||||
var familyMoName = $("#editFamilyMoName").val();
|
||||
var familyMoAward = $("#editFamilyMoAward").val();
|
||||
var enableGame = $("#editEnable").is(":checked");
|
||||
var pic = $("#editPic").val();
|
||||
if ($("#editFamilyForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
id: familyId,
|
||||
name: familyName,
|
||||
openMoney: enableMo,
|
||||
moneyName: familyMoName,
|
||||
money: familyMoAward,
|
||||
openGame: enableGame,
|
||||
icon: pic,
|
||||
status: 1
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#editFamilyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//打开禁用家族弹窗
|
||||
$("#table").on('click', '.opt-stop', function () {
|
||||
//清除数据
|
||||
clearForm("forbidFamilyForm");
|
||||
//设置数据
|
||||
var familyId = $(this).attr("data-id");
|
||||
$('#forbFamilyId').val(familyId);
|
||||
$('#forbidFamilyModal').modal('show');
|
||||
});
|
||||
|
||||
//禁用家族保存
|
||||
$("#forb").on("click", function () {
|
||||
var familyId = $("#forbFamilyId").val();
|
||||
//TODO 权限教研暂时没做
|
||||
if ($("#forbFamilyForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
id: familyId,
|
||||
status: 2,
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#forbidFamilyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//打开解禁家族弹窗
|
||||
$("#table").on('click', '.opt-recover', function () {
|
||||
//清除数据
|
||||
clearForm("recoverFamilyForm");
|
||||
//设置数据
|
||||
var familyId = $(this).attr("data-id");
|
||||
$('#recoverFamilyId').val(familyId);
|
||||
$('#recoverFamilyModal').modal('show');
|
||||
});
|
||||
|
||||
//禁用家族保存
|
||||
$("#recover").on("click", function () {
|
||||
var familyId = $("#recoverFamilyId").val();
|
||||
//TODO 权限教研暂时没做
|
||||
if ($("#recoverFamilyForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
id: familyId,
|
||||
status: 1,
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#recoverFamilyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//打开解散家族弹窗
|
||||
$("#table").on('click', '.opt-move', function () {
|
||||
//清除数据
|
||||
clearForm("dissFamilyForm");
|
||||
//设置数据
|
||||
var familyId = $(this).attr("data-id");
|
||||
$('#dissFamilyId').val(familyId);
|
||||
$('#dissFamilyModal').modal('show');
|
||||
});
|
||||
|
||||
//解散家族保存
|
||||
$("#move").on("click", function () {
|
||||
var familyId = $("#dissFamilyId").val();
|
||||
//TODO 权限教研暂时没做
|
||||
$("#tipMsg").text("操作中，请稍后...");
|
||||
$("#tipModal").modal('show');
|
||||
if ($("#dissFamilyForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/remove.action',
|
||||
data: {
|
||||
familyId: familyId
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#dissFamilyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
function clearForm(formId) {
|
||||
var $form = $('#' + formId);
|
||||
debugger;
|
||||
//清空输入框
|
||||
$form.find('input').val('');
|
||||
//清空单选按钮
|
||||
$form.find('input:radio').attr("checked", false);
|
||||
//清空文本域
|
||||
$form.find('textarea').val('');
|
||||
//清空图片
|
||||
$form.find('img').attr("src", "");
|
||||
//清空已上传
|
||||
$form.find('span').html("");
|
||||
}
|
||||
|
||||
/**导出家族列表*/
|
||||
$("#btnExport").on("click", function () {
|
||||
$("#searchForm").submit();
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
207
src/views/family/FamilyMemberAdminView.vue
Normal file
207
src/views/family/FamilyMemberAdminView.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<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">
|
||||
<form id="searchForm" action="/admin/family/member/export" method="get" target="_blank">
|
||||
<div class="col-sm-12">
|
||||
<label for="familyId" class="col-sm-1 control-label">家族ID:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="familyId" id="familyId">
|
||||
</div>
|
||||
|
||||
<label for="familyNick" class="col-sm-1 control-label">家族昵称:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="familyNick" id="familyNick">
|
||||
</div>
|
||||
|
||||
<label for="memberId" class="col-sm-1 control-label">用户ID:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="memberId" id="memberId">
|
||||
</div>
|
||||
|
||||
<label for="memberId" class="col-sm-1 control-label">用户昵称:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="memberNick" id="memberNick">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>搜索
|
||||
</button>
|
||||
<button id="btnExport" class="btn btn-default ">
|
||||
<i class="glyphicon glyphicon-export"></i>导出
|
||||
</button>
|
||||
<button id="btnBatchDel" class="btn btn-default ">
|
||||
<i class="glyphicon glyphicon-wrench"></i>批量删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FamilyMemberAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
});
|
||||
|
||||
//批量删除
|
||||
$("#btnBatchDel").on('click', function () {
|
||||
var rows = $("#table").bootstrapTable("getSelections");
|
||||
if (rows.length == 0) {
|
||||
alert("请先选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
console.log("rows: " + rows.length);
|
||||
var idArr = [];
|
||||
var familyIdArr = [];
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
if (rows[i]['position'] == '10') {
|
||||
alert(rows[i]['name'] + "是" + rows[i]['familyName'] + "家族的族长，不允许删除");
|
||||
return;
|
||||
}
|
||||
idArr.push(rows[i]['uid']);
|
||||
familyIdArr.push(rows[i]['familyId']);
|
||||
}
|
||||
console.log(idArr);
|
||||
console.log(familyIdArr);
|
||||
if (confirm("你确认批量删除该记录吗?" +
|
||||
"\r\n删除后再也不能找回，请谨慎操作！")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: "/admin/family/member/del.action",
|
||||
data: {
|
||||
'ids': JSON.stringify(idArr),
|
||||
'familyIds': JSON.stringify(familyIdArr)
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
function initTable() {
|
||||
//初始化表格数据
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'tmp', valign: 'middle', title: 'uid', align: 'center', checkbox: true, width: '5%' },
|
||||
//{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
|
||||
{ field: 'familyId', title: '家族ID', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'familyName', title: '家族昵称', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'erbanNo', title: '用户ID', align: 'center', width: '5%', valign: 'middle' },
|
||||
{ field: 'name', title: '用户昵称', align: 'center', width: '5%', valign: 'middle' },
|
||||
{
|
||||
field: 'position',
|
||||
title: '职位',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == '10') {
|
||||
|
||||
return "族长";
|
||||
} else if (val == '0') {
|
||||
return '成员';
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{ field: 'money', title: '家族币余额', align: 'center', width: '5%', valign: 'middle' },
|
||||
{
|
||||
field: 'joinTime',
|
||||
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:00");
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
familyId: $('#familyId').val(),
|
||||
familyNick: $('#familyNick').val(),
|
||||
memberId: $('#memberId').val(),
|
||||
memberNick: $('#memberNick').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/family/member/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
//复选框居中
|
||||
$(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**导出功能*/
|
||||
$("#btnExport").on("click", function () {
|
||||
$("#searchForm").submit();
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
478
src/views/family/FamilyMoneyAdminView.vue
Normal file
478
src/views/family/FamilyMoneyAdminView.vue
Normal file
@@ -0,0 +1,478 @@
|
||||
<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">
|
||||
家族ID:<input type="text" class="input-sm" name="familyId" id="familyId">
|
||||
|
||||
家族昵称:<input type="text" class="input-sm" name="familyNick" id="familyNick">
|
||||
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--分配家族币弹窗-->
|
||||
<div class="modal fade" id="distriMoneyModal" 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="distriMoneyLabel">家族币分配</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="distriMoneyForm">
|
||||
<input type="hidden" name="distriTargetId" id="distriTargetId">
|
||||
<input type="hidden" name="distriFamilyId" id="distriFamilyId">
|
||||
<div class="form-group">
|
||||
<label for="distriAmount" class="col-sm-3 control-label">家族币分配数量:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="distriAmount" id="distriAmount">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="distriType" class="col-sm-3 control-label">分配方式:</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="distriType" id="distriType">
|
||||
<option value="">-- 请选择 --</option>
|
||||
<option value="1">系统奖励</option>
|
||||
<option value="2">活动奖励</option>
|
||||
<option value="3">活跃奖励</option>
|
||||
</select>
|
||||
</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="distri">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 禁用家族币弹窗 -->
|
||||
<div class="modal fade" id="forbMoneyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="forbMoneyLabel">禁用家族币</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="forbMoneyForm">
|
||||
<input type="hidden" name="forbFamilyId" id="forbFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="forbReason" class="col-sm-3 control-label">禁用原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="forbReason" id="forbReason"
|
||||
class="form-control validate[required]">
|
||||
</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="forb">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解禁家族币弹窗 -->
|
||||
<div class="modal fade" id="recoverMoneyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="recoverMoneyLabel">解禁家族币</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="recoverMoneyForm">
|
||||
<input type="hidden" name="recoverFamilyId" id="recoverFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="forbReason" class="col-sm-3 control-label">解禁原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="forbReason" id="recoverReason"
|
||||
class="form-control validate[required]">
|
||||
</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="recover">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--扣除家族币弹窗-->
|
||||
<div class="modal fade" id="discountMoneyModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="discountMoneyLabel">扣除家族币</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="discountMoneyForm">
|
||||
<input type="hidden" name="dissTargetId" id="dissTargetId" />
|
||||
<input type="hidden" name="dissFamilyId" id="dissFamilyId" />
|
||||
<div class="form-group">
|
||||
<label for="discountAmount" class="col-sm-3 control-label">家族币扣除数量</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="discountAmount" id="discountAmount"
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="discountReason" class="col-sm-3 control-label">扣除原因</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" name="discountReason" id="discountReason"
|
||||
class="form-control validate[required]">
|
||||
</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="discount">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FamilyMoneyAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
});
|
||||
|
||||
//打开家族币分配弹窗
|
||||
$("#table").on('click', '.opt-edit', function () {
|
||||
clearForm("distriMoneyForm");
|
||||
var targetId = $(this).attr("data-id-1");
|
||||
var familyId = $(this).attr("data-id-2");
|
||||
var openMoney = $(this).attr("data-id-3");
|
||||
if (openMoney == "false") {
|
||||
$("#tipMsg").text("该家族家族币已被禁用，无法进行分配操作！");
|
||||
$("#tipModal").modal('show');
|
||||
return false;
|
||||
}
|
||||
$("#distriTargetId").val(targetId);
|
||||
$("#distriFamilyId").val(familyId);
|
||||
$("#distriMoneyModal").modal("show");
|
||||
})
|
||||
|
||||
//家族币分配保存
|
||||
$("#distri").on("click", function () {
|
||||
var familyId = $("#distriFamilyId").val();
|
||||
var targetId = $("#distriTargetId").val();
|
||||
var changeAmount = $("#distriAmount").val();
|
||||
var title = $("#distriType").val();
|
||||
if (!changeAmount || !title) {
|
||||
$("#tipMsg").text("分配数量和分配方式不能为空");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
var titles = "交易";
|
||||
if ("1" == title) {
|
||||
titles = "系统奖励";
|
||||
} else if ("2" == title) {
|
||||
titles = "活动奖励";
|
||||
} else if ("3" == title) {
|
||||
titles = "活跃奖励";
|
||||
}
|
||||
var password = $("#distriPassword").val();
|
||||
//TODO 权限密码校验目前没做
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/money/update.action',
|
||||
data: {
|
||||
familyId: familyId,
|
||||
targetId: targetId,
|
||||
changeAmount: changeAmount,
|
||||
titles: titles,
|
||||
type: 1
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#distriMoneyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//打开家族币扣除弹窗
|
||||
$("#table").on('click', '.opt-move', function () {
|
||||
clearForm("discountMoneyModal");
|
||||
var targetId = $(this).attr("data-id-1");
|
||||
var familyId = $(this).attr("data-id-2");
|
||||
var openMoney = $(this).attr("data-id-3");
|
||||
if (openMoney == "false") {
|
||||
$("#tipMsg").text("该家族家族币已被禁用，无法进行扣除操作！");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
$("#dissTargetId").val(targetId);
|
||||
$("#dissFamilyId").val(familyId);
|
||||
$("#discountMoneyModal").modal("show");
|
||||
})
|
||||
|
||||
//家族币扣除保存
|
||||
$("#discount").on("click", function () {
|
||||
var familyId = $("#dissFamilyId").val();
|
||||
var targetId = $("#dissTargetId").val();
|
||||
var changeAmount = $("#discountAmount").val();
|
||||
var titles = $("#discountReason").val();
|
||||
var password = $("#distriPassword").val();
|
||||
if (!changeAmount || !titles) {
|
||||
$("#tipMsg").text("扣除数量和扣除原因不能为空");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
//TODO 权限密码校验目前没做
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/money/update.action',
|
||||
data: {
|
||||
familyId: familyId,
|
||||
targetId: targetId,
|
||||
changeAmount: changeAmount,
|
||||
titles: titles,
|
||||
type: 2
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#discountMoneyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//打开禁用家族币弹窗
|
||||
$("#table").on('click', '.opt-stop', function () {
|
||||
//清除数据
|
||||
clearForm("forbMoneyForm");
|
||||
//设置数据
|
||||
var familyId = $(this).attr("data-id-2");
|
||||
$('#forbFamilyId').val(familyId);
|
||||
$('#forbMoneyModal').modal('show');
|
||||
});
|
||||
|
||||
//禁用家族币保存
|
||||
$("#forb").on("click", function () {
|
||||
var familyId = $("#forbFamilyId").val();
|
||||
//TODO 权限教研暂时没做
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
id: familyId,
|
||||
openMoney: 0,
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#forbMoneyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//打开解禁家族币弹窗
|
||||
$("#table").on('click', '.opt-recover', function () {
|
||||
//清除数据
|
||||
clearForm("recoverMoneyForm");
|
||||
//设置数据
|
||||
var familyId = $(this).attr("data-id-2");
|
||||
$('#recoverFamilyId').val(familyId);
|
||||
$('#recoverMoneyModal').modal('show');
|
||||
});
|
||||
|
||||
//解禁家族币保存
|
||||
$("#recover").on("click", function () {
|
||||
var familyId = $("#recoverFamilyId").val();
|
||||
//TODO 权限教研暂时没做
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/family/saveOrUpdate.action',
|
||||
data: {
|
||||
id: familyId,
|
||||
openMoney: 1,
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#recoverMoneyModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function initTable() {
|
||||
//初始化表格数据
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'tmp', valign: 'middle', title: 'familyId', align: 'center', checkbox: true, width: '10%' },
|
||||
//{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
|
||||
{ field: 'familyId', title: '家族ID', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'familyName', title: '家族昵称', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'moneyName', title: '家族币名称', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'income', title: '家族币总收入', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'cost', title: '家族币总支出', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'surplus', title: '家族币总剩余', align: 'center', width: '10%', valign: 'middle' },
|
||||
{ field: 'consume', title: '总消耗', align: 'center', width: '10%', valign: 'middle' },
|
||||
{
|
||||
field: 'createTime',
|
||||
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:00");
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'temp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var familyId = row.familyId;
|
||||
var leaderId = row.leaderId;
|
||||
var openMoney = row.openMoney;
|
||||
var returnStr = '<button id="btnGive" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id-1="' + leaderId + '" data-id-2="' + familyId + '" data-id-3="' + openMoney + '">' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 分配</button> ';
|
||||
if (row.openMoney) {
|
||||
returnStr = returnStr + '<button id="btnStop" name="btnStop" class="btn btn-sm btn-success opt-stop" data-id-1="' + leaderId + '" data-id-2="' + familyId + '">' +
|
||||
'<i class="glyphicon glyphicon-stop"></i> 禁用</button> ';
|
||||
} else {
|
||||
returnStr = returnStr + '<button id="btnRecover" name="btnStop" class="btn btn-sm btn-danger opt-recover" data-id-1="' + leaderId + '" data-id-2="' + familyId + '">' +
|
||||
'<i class="glyphicon glyphicon-stop"></i> 解禁</button> ';
|
||||
}
|
||||
return returnStr + '<button id="btnTake" name="btnMove" class="btn btn-sm btn-success opt-move" data-id-1="' + leaderId + '" data-id-2="' + familyId + '" data-id-3="' + openMoney + '">' +
|
||||
'<i class="glyphicon glyphicon-move"></i> 扣除</button> ';
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
familyId: $('#familyId').val(),
|
||||
familyNick: $('#familyNick').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/family/money/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
//复选框居中
|
||||
$(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
|
||||
$("th[data-field^='income']").attr("title", "族长所有收入");
|
||||
$("th[data-field^='cost']").attr("title", "族长所有支出");
|
||||
$("th[data-field^='consume']").attr("title", "家族内所有成员家族币消耗");
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clearForm(formId) {
|
||||
var $form = $('#' + formId);
|
||||
$form.find('input').val('');
|
||||
$form.find('select').val('');
|
||||
$form.find('textarea').val('');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
149
src/views/family/FamilyStatisticsView.vue
Normal file
149
src/views/family/FamilyStatisticsView.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<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">
|
||||
<div class="col-sm-12">
|
||||
<h3 id="version"></h3>
|
||||
<div class="pull-left">
|
||||
<form id="searchForm" class="col-sm-pull-12" action="/admin/family/statistics/export"
|
||||
method="post" target="_blank">
|
||||
家族ID :<input type="text" class="input-sm" name="familyId" id="familyId">
|
||||
<div class="pull-right">
|
||||
<label for="beginDate" class="col-sm-2 control-label">开始日期:</label>
|
||||
<div class="col-sm-4"><input type="text" class="form-control" name="beginDate"
|
||||
id="beginDate">
|
||||
</div>
|
||||
<label for="endDate" class="col-sm-2 control-label">结束日期:</label>
|
||||
<div class="col-sm-4"><input type="text" class="form-control" name="endDate"
|
||||
id="endDate"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
<button id="btnExport" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-export"></i>导出
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FamilyStatisticsView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'familyId', title: '家族ID', align: 'center', width: '5%' },
|
||||
{ field: 'familyName', title: '家族名', align: 'center', width: '5%' },
|
||||
{ field: 'totalNum', title: '总数', align: 'center', width: '5%' },
|
||||
// {
|
||||
// field: 'dateStr',
|
||||
// title: '日期',
|
||||
// align: 'center',
|
||||
// valign: 'middle',
|
||||
// width: '5%',
|
||||
// formatter: function (val, row, index) {
|
||||
// if (val) {
|
||||
// var date = new Date(val);
|
||||
// return date.format("yyyy-MM-dd");
|
||||
// } else {
|
||||
// return '-';
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
familyId: $('#familyId').val(),
|
||||
beginDate: $('#beginDate').val(),
|
||||
endDate: $('#endDate').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/family/statistics/list.action',
|
||||
onLoadSuccess: function (json) { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
// 导出EXCEL
|
||||
$('#btnExport').on('click', function () {
|
||||
if (!$('#beginDate').val() || !$('#endDate').val()) {
|
||||
$("#tipMsg").text("请选择导出的开始和结束日期");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
var form = $("#searchForm");
|
||||
form.submit();
|
||||
});
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
var picker1 = $("#beginDate").datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
});
|
||||
var picker2 = $('#endDate').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
});
|
||||
picker1.on('changeDate', function () {
|
||||
var date = $('#beginDate').datetimepicker('getDate');
|
||||
picker2.datetimepicker('beginDate', date);
|
||||
});
|
||||
picker2.on('changeDate', function () {
|
||||
var date = $('#endDate').datetimepicker('getDate');
|
||||
picker1.datetimepicker('setEndDate', date);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
191
src/views/finance/FinanceStatisticsView.vue
Normal file
191
src/views/finance/FinanceStatisticsView.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<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">
|
||||
<div class="col-sm-12">
|
||||
<h3 id="version"></h3>
|
||||
<div class="pull-left">
|
||||
<form id="searchForm" class="col-sm-pull-12" action="/admin/finance/export" method="post"
|
||||
target="_blank">
|
||||
<div class="col-sm-11">
|
||||
<label for="beginDate" class="col-sm-2 control-label">开始日期:</label>
|
||||
<div class="col-sm-4"><input type="text" class="form-control" name="beginDate"
|
||||
id="beginDate">
|
||||
</div>
|
||||
<label for="endDate" class="col-sm-2 control-label">结束日期:</label>
|
||||
<div class="col-sm-4"><input type="text" class="form-control" name="endDate"
|
||||
id="endDate"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
<button id="btnExport" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-export"></i>导出总额
|
||||
</button>
|
||||
<button id="btnExportDetail" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-export"></i>导出明细
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FinanceStatisticView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
// {field: 'tmp', title: 'id', align: 'center', checkbox: true, width: '5%'},
|
||||
{
|
||||
field: 'billTime',
|
||||
title: '日期',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format("yyyy-MM-dd hh:mm:ss");
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'goldIncreaseNum', title: '金币增加', align: 'center', width: '5%' },
|
||||
{ field: 'goldDecreaseNum', title: '金币减少', align: 'center', width: '5%' },
|
||||
{ field: 'goldNum', title: '金币余额', align: 'center', width: '5%' },
|
||||
{ field: 'diamondIncreaseNum', title: '钻石增加', align: 'center', width: '5%' },
|
||||
{ field: 'diamondDecreaseNum', title: '钻石减少', align: 'center', width: '5%' },
|
||||
{ field: 'diamondNum', title: '钻石余额', align: 'center', width: '5%' },
|
||||
{ field: 'totalNum', title: '总额', align: 'center', width: '5%' },
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageNum: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
selectType: $('#selectType').val(),
|
||||
beginDate: $('#beginDate').val(),
|
||||
endDate: $('#endDate').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/finance/statistics.action',
|
||||
onLoadSuccess: function (json) { //加载成功时执行
|
||||
var updateTime = json.updateTime;
|
||||
$("#version").html('财务数据' + ' ' + updateTime + ' 更新');
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
// 导出EXCEL
|
||||
$('#btnExport').on('click', function () {
|
||||
if (!$('#beginDate').val() || !$('#endDate').val()) {
|
||||
$("#tipMsg").text("请选择导出的开始和结束日期");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
// var rows = $("#table").bootstrapTable("getSelections");
|
||||
// if (rows.length == 0) {
|
||||
// alert("请先选择要导出行");
|
||||
// return;
|
||||
// }
|
||||
// var idArr = [];
|
||||
// for (var i = 0; i < rows.length; i++) {
|
||||
// console.log(rows[i]['pinyinName'])
|
||||
// idArr.push(rows[i]['pinyinName']);
|
||||
// }
|
||||
var form = $("#searchForm");
|
||||
form.attr("action", "/admin/finance/export?type=1");
|
||||
// form.attr('type', 1);
|
||||
form.submit();
|
||||
});
|
||||
$('#btnExportDetail').on('click', function () {
|
||||
if (!$('#beginDate').val() || !$('#endDate').val()) {
|
||||
$("#tipMsg").text("请选择导出的开始和结束日期");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
// var rows = $("#table").bootstrapTable("getSelections");
|
||||
// if (rows.length == 0) {
|
||||
// alert("请先选择要导出行");
|
||||
// return;
|
||||
// }
|
||||
// var idArr = [];
|
||||
// for (var i = 0; i < rows.length; i++) {
|
||||
// console.log(rows[i]['pinyinName'])
|
||||
// idArr.push(rows[i]['pinyinName']);
|
||||
// }
|
||||
var form = $("#searchForm");
|
||||
form.attr("action", "/admin/finance/export?type=2");
|
||||
// form.attr('type', 2);
|
||||
form.submit();
|
||||
});
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
var chargeStart = $('#beginDate').datepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
autoclose: true
|
||||
});
|
||||
var chargeEnd = $('#endDate').datepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
autoclose: true
|
||||
});
|
||||
chargeStart.on('changeDate', function () {
|
||||
var date = $('#beginDate').datepicker('getDate');
|
||||
chargeEnd.datepicker('setStartDate', date);
|
||||
});
|
||||
chargeEnd.on('changeDate', function () {
|
||||
var date = $('#endDate').datepicker('getDate');
|
||||
chargeStart.datepicker('setEndDate', date);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
252
src/views/findlove/PlatformPrizeDataAdminView.vue
Normal file
252
src/views/findlove/PlatformPrizeDataAdminView.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div id="toolbar">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="timeBegin" class="control-label">开始时间：</label>
|
||||
<input type="text" class="input-sm" id="timeBegin" placeholder="开始时间">
|
||||
</div>
|
||||
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="timeEnd" class="control-label">结束时间：</label>
|
||||
<input type="text" class="input-sm" id="timeEnd" placeholder="结束时间">
|
||||
</div>
|
||||
|
||||
<div class="form-group col-sm-4">
|
||||
<label for="erbanNo" class="control-label">用户ID：</label>
|
||||
<input type="text" class="input-sm" name="erbanNo" id="erbanNo" placeholder="">
|
||||
</div>
|
||||
</form>
|
||||
<div class="row"></div>
|
||||
<button class="btn btn-primary" id="searchBtn">查询</button>
|
||||
<div class="row"></div>
|
||||
<div class="dataCount">
|
||||
<p>
|
||||
<span>抽奖用户总数：</span>
|
||||
<span id="peopleNum"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>抽奖记录总数：</span>
|
||||
<span id="countNum"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>用户投入钻石总数：</span>
|
||||
<span id="userInputDiamonds"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>平台产出总价值：</span>
|
||||
<span id="giftOutputDiamonds"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="table"></div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "PlatformPrizeDataAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
var picker1 = $('#timeBegin').datetimepicker({
|
||||
language: 'zh-CN',
|
||||
format: 'yyyy-mm-dd',
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
minView: 'month',
|
||||
endDate: new Date()
|
||||
});
|
||||
|
||||
var picker2 = $('#timeEnd').datetimepicker({
|
||||
language: 'zh-CN',
|
||||
format: 'yyyy-mm-dd',
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
minView: 'month',
|
||||
endDate: new Date()
|
||||
});
|
||||
|
||||
var $timeBegin = '', $timeEnd = '';
|
||||
var main = {
|
||||
init: function () {
|
||||
this.eventRegister();
|
||||
this.valueChange();
|
||||
this.tableRefresh();
|
||||
},
|
||||
|
||||
eventRegister: function () {
|
||||
picker1.on('changeDate', function () {
|
||||
var date = $('#timeBegin').datetimepicker('getDate');
|
||||
picker2.datetimepicker('setStartDate', date);
|
||||
});
|
||||
picker2.on('changeDate', function () {
|
||||
var date = $('#timeEnd').datetimepicker('getDate');
|
||||
picker1.datetimepicker('setEndDate', date);
|
||||
});
|
||||
|
||||
$('#searchBtn').on('click', function () {
|
||||
var $dataCount = $('.dataCount');
|
||||
// var $startDate = $('#timeBegin').val().replace(/\//g,'-');
|
||||
var $startDate;
|
||||
if ($('#timeBegin').val() == "" || $('#timeBegin').val() == 'undefined') {
|
||||
$startDate = '';
|
||||
} else {
|
||||
/*var arr = $('#timeBegin').val().split('/');
|
||||
var length = arr.length;
|
||||
var $startDate = arr[length-1] +'-' + arr[0] + '-' + arr[length - 2];*/
|
||||
$startDate = $('#timeBegin').val();
|
||||
}
|
||||
|
||||
var $endDate;
|
||||
if ($('#timeEnd').val() == '' || $('#timeEnd').val() == 'undefined') {
|
||||
$endDate = $startDate;
|
||||
} else {
|
||||
/*var arr2 = $('#timeEnd').val().split('/');
|
||||
var length2 = arr2.length;
|
||||
var $endDate = arr2[length2-1] + '-' + arr2[0] + '-' + arr2[length2-2];*/
|
||||
$endDate = $('#timeEnd').val();
|
||||
}
|
||||
|
||||
if ($startDate == '') {
|
||||
$timeBegin = '';
|
||||
$timeEnd = '';
|
||||
} else {
|
||||
$timeBegin = $startDate + ' 00:00:00';
|
||||
$timeEnd = $endDate + ' 23:59:59';
|
||||
}
|
||||
|
||||
$.get('/admin/findLove/data/platform/total', {
|
||||
erbanNo: $('#erbanNo').val(),
|
||||
startDate: $timeBegin,
|
||||
endDate: $timeEnd,
|
||||
}, function (res) {
|
||||
console.log(res);
|
||||
|
||||
if (res.code == 200) {
|
||||
var data = res.data;
|
||||
console.info(data)
|
||||
$dataCount.find('#peopleNum').html(data.peopleNum);
|
||||
$dataCount.find('#countNum').html(data.countNum);
|
||||
$dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
|
||||
$dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);
|
||||
main.tableRefresh();
|
||||
} else {
|
||||
console.log('数据错误,导致加载失败,' + res.code);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('#table').on('click', '#details', function () {
|
||||
console.log($(this).data('id'));
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
valueChange: function () {
|
||||
var $dataCount = $('.dataCount');
|
||||
$.get('/admin/findLove/data/platform/total', {
|
||||
erbanNo: $('#erbanNo').val(),
|
||||
startDate: $timeBegin,
|
||||
endDate: $timeEnd,
|
||||
}, function (res) {
|
||||
console.log(res);
|
||||
|
||||
if (res.code == 200) {
|
||||
var data = res.data;
|
||||
$dataCount.find('#peopleNum').html(data.peopleNum);
|
||||
$dataCount.find('#countNum').html(data.countNum);
|
||||
$dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
|
||||
$dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);
|
||||
|
||||
TableHelper.doRefresh('#table');
|
||||
} else {
|
||||
console.log('数据错误,导致加载失败,' + res.code);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
tableRefresh: function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'date', title: '日期', align: 'center', valign: 'middle', width: '20%' },
|
||||
{ field: 'peopleNum', title: '抽奖人数', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'countNum', title: '抽奖记录数', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'userInputDiamonds', title: '用户投入钻石数', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'giftOutputDiamonds', title: '平台产出价值数', align: 'center', valign: 'middle', width: '10%' }
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pagination: false,
|
||||
sidePagination: "none", //表示服务端请求
|
||||
queryParamsType: 'undefined',
|
||||
queryParams: function queryParams(params) {
|
||||
var param = {
|
||||
startDate: $timeBegin,
|
||||
endDate: $timeEnd,
|
||||
erbanNo: $('#erbanNo').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'date',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/findLove/data/platform/list',
|
||||
onLoadSuccess: function () {
|
||||
console.log('load success');
|
||||
},
|
||||
onLoadError: function () {
|
||||
console.log('load fail');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
main.init();
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataCount {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dataCount>p {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background: #ccc;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.qry_col {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
925
src/views/findlove/PoolItemAdminView.vue
Normal file
925
src/views/findlove/PoolItemAdminView.vue
Normal file
@@ -0,0 +1,925 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
|
||||
<div class="header-section">
|
||||
<div class="pool-line-name">常规线</div>
|
||||
<div class="dataCount">
|
||||
<p>
|
||||
<span>奖池线包含组数：</span>
|
||||
<span id="baseLineGroupCount"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>奖池线礼物数：</span>
|
||||
<span id="baseLinePrizeCount"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>总礼物价值：</span>
|
||||
<span id="baseLinePrizeValue"></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>单线比：</span>
|
||||
<span id="baseLinePrizeRate"></span>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn btn-primary js-deploy">发布</button>
|
||||
<button class="btn btn-primary js-deployed">已发布奖池</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-table-section">
|
||||
<div class="prize-group-wrapper js-normal-prize-group-wrapper">
|
||||
<div class="header-wrapper">
|
||||
<div class="title">普通礼物组</div>
|
||||
<div class="right-content js-no-editing">
|
||||
<!--<div class="undeploy js-deploy-status">未发布</div>-->
|
||||
<div class="action-btn-wrap"><button class="btn btn-primary js-edit-group"
|
||||
data-pool-type="1">编辑</button></div>
|
||||
</div>
|
||||
<div class="right-content right-content-edit js-editing">
|
||||
<div class="action-btn-wrap">
|
||||
<button class="btn btn-primary js-add-prize" data-pool-type="1">新增</button>
|
||||
<button class="btn btn-danger js-save-edit" data-pool-type="1">保存</button>
|
||||
<button class="btn btn-default js-cancel-edit" data-pool-type="1">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-wrapper">
|
||||
<div>
|
||||
<span>礼物个数：</span>
|
||||
<span class="js-prize-total-count"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>礼物价值：</span>
|
||||
<span class="js-prize-total-value"></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="prize-group-table table table-hover table-striped">
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>礼物等级</th>
|
||||
<th>平台价值</th>
|
||||
<th>个数</th>
|
||||
<th>总价值</th>
|
||||
<th>核算概率</th>
|
||||
<th>展示概率</th>
|
||||
</tr>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>糖果</td>-->
|
||||
<!-- <td>1</td>-->
|
||||
<!-- <td>123</td>-->
|
||||
<!-- <td>21333</td>-->
|
||||
<!-- <td>21.223%</td>-->
|
||||
<!-- <td>21.221%</td>-->
|
||||
<!-- </tr>-->
|
||||
</table>
|
||||
</div>
|
||||
<div class="prize-group-wrapper js-senior-prize-group-wrapper">
|
||||
<div class="header-wrapper">
|
||||
<div class="title">高级礼物组</div>
|
||||
<div class="right-content js-no-editing">
|
||||
<!--<div class="undeploy js-deploy-status">未发布</div>-->
|
||||
<div class="action-btn-wrap"><button class="btn btn-primary js-edit-group"
|
||||
data-pool-type="2">编辑</button></div>
|
||||
</div>
|
||||
<div class="right-content right-content-edit js-editing">
|
||||
<div class="action-btn-wrap">
|
||||
<button class="btn btn-primary js-add-prize" data-pool-type="2">新增</button>
|
||||
<button class="btn btn-danger js-save-edit" data-pool-type="2">保存</button>
|
||||
<button class="btn btn-default js-cancel-edit" data-pool-type="2">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-wrapper">
|
||||
<div>
|
||||
<span>礼物个数：</span>
|
||||
<span class="js-prize-total-count"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>礼物价值：</span>
|
||||
<span class="js-prize-total-value"></span>
|
||||
</div>
|
||||
</div>
|
||||
<table class="prize-group-table table table-hover table-striped">
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>礼物等级</th>
|
||||
<th>平台价值</th>
|
||||
<th>个数</th>
|
||||
<th>总价值</th>
|
||||
<th>核算概率</th>
|
||||
<th>展示概率</th>
|
||||
</tr>
|
||||
<!-- <tr>-->
|
||||
<!-- <td>糖果</td>-->
|
||||
<!-- <td>1</td>-->
|
||||
<!-- <td>123</td>-->
|
||||
<!-- <td>21333</td>-->
|
||||
<!-- <td>21.223%</td>-->
|
||||
<!-- <td>21.221%</td>-->
|
||||
<!-- </tr>-->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 添加弹窗 -->
|
||||
<div class="modal fade" id="addModal" 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">x</span>
|
||||
</button>
|
||||
|
||||
<h4 class="modal-title" id="addModalLabel">新增礼物</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form action="" class="form-horizontal" id="addForm">
|
||||
<!-- 礼物组 -->
|
||||
<div class="form-group">
|
||||
<label for="prizePoolName" class="col-sm-3 control-label">礼物组：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="hidden" id="prizePoolType" name="prizePoolType" disabled class=""
|
||||
placeholder="">
|
||||
<input type="text" id="prizePoolName" name="prizePoolName" disabled class="" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择奖品 -->
|
||||
<div class="form-group">
|
||||
<label for="awardChoose" class="col-sm-3 control-label">选择奖品：</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="awardChoose" id="awardChoose">
|
||||
<!-- <option value=""></option> -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 奖品id -->
|
||||
<div class="form-group">
|
||||
<label for="addPrizeId" class="col-sm-3 control-label">奖品id：</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="addPrizeId" name="addPrizeId" disabled placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 奖品等级 -->
|
||||
<div class="form-group">
|
||||
<label for="prizeLevel" class="col-sm-3 control-label">奖品等级：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="prizeLevel" name="prizeLevel" class="validate[required]"
|
||||
placeholder="单行输入">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 奖品个数 -->
|
||||
<div class="form-group">
|
||||
<label for="jackpotNumber" class="col-sm-3 control-label">奖品个数：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="text" id="jackpotNumber" name="jackpotNumber" class="validate[required]"
|
||||
placeholder="单行输入">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" type="button" id="addCancel">取消</button>
|
||||
<button class="btn btn-primary" type="button" id="addSave">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">提示信息</h4>
|
||||
</div>
|
||||
<div class="modal-body" id="tipMsg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="deployedModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">已发布奖池</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>奖池长度：<span id="deployedTotalSize"></span> | 高级奖池长度：<span id="deployedSeniorSize"></span> |
|
||||
普通奖池长度：<span id="deployedNormalSize"></span></div>
|
||||
<div>高级奖池：<span id="deployedSeniorItems"></span></div>
|
||||
<div>普通奖池：<span id="deployedNormalItems"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="modal fade" id="deployConfirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">本次奖池线发布</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>期望值 <span id="deployedPrizeRate"></span> 变为 <span id="currPrizeRate"></span></div>
|
||||
<div>当前奖池线: <span id="currPoolLineId"></span></div>
|
||||
<div>生效奖池线: <span id="activePoolLineId"></span></div>
|
||||
<div>确认发布?</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-default" type="button" id="deployCancel">取消发布</button>
|
||||
<button class="btn btn-primary" type="button" id="deployConfirm">确认发布</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "PoolItemAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
const POOL_TYPE = {
|
||||
normal: 1,
|
||||
senior: 2,
|
||||
}
|
||||
|
||||
const POOL_NAME = {
|
||||
1: '普通礼物组',
|
||||
2: '高级礼物组',
|
||||
}
|
||||
|
||||
var giftMap = {};
|
||||
|
||||
function calculateStatisticsDatas(normalPrizeItems, seniorPrizeItems) {
|
||||
let normalPrizeCount = 0;
|
||||
let normalPrizeTotalValue = 0;
|
||||
normalPrizeItems.forEach(item => {
|
||||
normalPrizeCount += item.num;
|
||||
normalPrizeTotalValue += item.num * item.diamonds
|
||||
})
|
||||
let seniorPrizeCount = 0;
|
||||
let seniorPrizeTotalValue = 0;
|
||||
seniorPrizeItems.forEach(item => {
|
||||
seniorPrizeCount += item.num;
|
||||
seniorPrizeTotalValue += item.num * item.diamonds
|
||||
})
|
||||
|
||||
const totalPrizeCount = normalPrizeCount * seniorPrizeCount + seniorPrizeCount;
|
||||
const totalPrizeValue = normalPrizeTotalValue * seniorPrizeCount + seniorPrizeTotalValue;
|
||||
|
||||
let prizeRate = 0;
|
||||
if (totalPrizeCount != 0) {
|
||||
prizeRate = parseFloat(totalPrizeValue) / (totalPrizeCount * 100)
|
||||
}
|
||||
|
||||
return {
|
||||
normalPrizeCount,
|
||||
normalPrizeTotalValue,
|
||||
seniorPrizeCount,
|
||||
seniorPrizeTotalValue,
|
||||
totalPrizeCount,
|
||||
totalPrizeValue,
|
||||
prizeRate,
|
||||
};
|
||||
}
|
||||
|
||||
function renderStatisticsDatas(statisticsDatas) {
|
||||
$('#baseLineGroupCount').text(statisticsDatas.seniorPrizeCount);
|
||||
$('#baseLinePrizeCount').text(statisticsDatas.totalPrizeCount);
|
||||
$('#baseLinePrizeValue').text(statisticsDatas.totalPrizeValue);
|
||||
$('#baseLinePrizeRate').text((100 * statisticsDatas.prizeRate).toFixed(2) + '%');
|
||||
}
|
||||
|
||||
function changeDateValue(poolType, propName, idx, inputValue) {
|
||||
let prizeGroup;
|
||||
if (poolType == POOL_TYPE.normal) {
|
||||
prizeGroup = editingNormalPrizeGroup;
|
||||
} else if (poolType == POOL_TYPE.senior) {
|
||||
prizeGroup = editingSeniorPrizeGroup;
|
||||
} else {
|
||||
throw Error("unkonw prize pool type")
|
||||
}
|
||||
prizeGroup[idx][propName] = inputValue;
|
||||
// prizeGroup.isUndeploy = true;
|
||||
|
||||
reRenderPage({
|
||||
normalPrizeGroup: editingNormalPrizeGroup,
|
||||
seniorPrizeGroup: editingSeniorPrizeGroup,
|
||||
})
|
||||
}
|
||||
|
||||
function inputChanged(e) {
|
||||
const propName = $(e.target).attr("name");
|
||||
const idx = $(e.target).attr("data-idx");
|
||||
const poolType = $(e.target).attr("data-pool-type");
|
||||
const inputValue = e.target.value;
|
||||
console.debug("input change", e, propName, idx, poolType, inputValue);
|
||||
changeDateValue(poolType, propName, idx, inputValue);
|
||||
}
|
||||
|
||||
function removePirzeItem(e) {
|
||||
const idx = $(e.target).attr("data-idx");
|
||||
const poolType = $(e.target).attr("data-pool-type");
|
||||
let prizeList = editingNormalPrizeGroup;
|
||||
if (poolType == POOL_TYPE.senior) {
|
||||
prizeList = editingSeniorPrizeGroup;
|
||||
}
|
||||
if (prizeList.length == 1) {
|
||||
$('#tipMsg').text('奖池中至少要有一个奖品');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确定要从奖池中移除该奖品吗？")) {
|
||||
prizeList.splice(idx, 1);
|
||||
console.debug("removePirzeItem prizeList", prizeList)
|
||||
reRenderPage({
|
||||
normalPrizeGroup: editingNormalPrizeGroup,
|
||||
seniorPrizeGroup: editingSeniorPrizeGroup,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderPrizeGroup(poolType, prizeGroup, statisticsDatas, isEdit) {
|
||||
let wrapperClassName = '.js-normal-prize-group-wrapper';
|
||||
let totalPrizeCount = statisticsDatas.normalPrizeCount;
|
||||
let totalPrizeValue = statisticsDatas.normalPrizeTotalValue;
|
||||
if (poolType == POOL_TYPE.senior) {
|
||||
wrapperClassName = '.js-senior-prize-group-wrapper';
|
||||
totalPrizeCount = statisticsDatas.seniorPrizeCount;
|
||||
totalPrizeValue = statisticsDatas.seniorPrizeTotalValue;
|
||||
}
|
||||
//console.debug("wrapperClassName", wrapperClassName);
|
||||
$(`${wrapperClassName} .js-prize-total-count`).text(totalPrizeCount);
|
||||
$(`${wrapperClassName} .js-prize-total-value`).text(totalPrizeValue);
|
||||
if (isEdit) {
|
||||
console.debug("show editing action btns")
|
||||
$(`${wrapperClassName} .js-no-editing`).hide();
|
||||
$(`${wrapperClassName} .js-editing`).show();
|
||||
} else {
|
||||
console.debug("hide editing action btns")
|
||||
$(`${wrapperClassName} .js-no-editing`).show();
|
||||
$(`${wrapperClassName} .js-editing`).hide();
|
||||
//if (prizeGroup.isUndeploy) {
|
||||
// $(`${wrapperClassName} .js-deploy-status`).show();
|
||||
//} else {
|
||||
// $(`${wrapperClassName} .js-deploy-status`).hide();
|
||||
//}
|
||||
}
|
||||
|
||||
const groupTableDom = $(`${wrapperClassName} .prize-group-table`);
|
||||
$(`${wrapperClassName} .prize-group-table input`).unbind("change");
|
||||
$(`${wrapperClassName} .prize-group-table .js-remove-item`).unbind("click");
|
||||
groupTableDom.html("<thead><tr>\n" +
|
||||
" <th>名称</th>\n" +
|
||||
" <th>礼物等级</th>\n" +
|
||||
" <th>平台价值</th>\n" +
|
||||
" <th>个数</th>\n" +
|
||||
" <th>总价值</th>\n" +
|
||||
" <th>核算概率</th>\n" +
|
||||
" <th>展示概率</th>\n" +
|
||||
" </tr></thead>");
|
||||
const prizeItems = prizeGroup;
|
||||
groupTableDom.append("<tbody>")
|
||||
prizeItems.forEach((item, idx) => {
|
||||
let accountingRate = item.num / (1 + statisticsDatas.normalPrizeCount) * 100;
|
||||
const tds = [];
|
||||
if (isEdit) {
|
||||
tds.push(`<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${idx}" data-pool-type="${poolType}"></i>${item.giftName}</td>`);
|
||||
} else {
|
||||
tds.push(`<td>${item.giftName}</td>`)
|
||||
}
|
||||
if (isEdit) {
|
||||
tds.push(`<td><input class="input-sm" name="level" data-idx="${idx}" data-pool-type="${poolType}" value="${item.level}"></td>`)
|
||||
} else {
|
||||
tds.push(`<td>${item.level}</td>`)
|
||||
}
|
||||
tds.push(`<td>${item.diamonds}</td>`);
|
||||
if (isEdit) {
|
||||
tds.push(`<td><input type="number" class="input-sm" name="num" data-idx="${idx}" data-pool-type="${poolType}" value="${item.num}"></td>`)
|
||||
} else {
|
||||
tds.push(`<td>${item.num}</td>`)
|
||||
}
|
||||
tds.push(`<td>${item.num * item.diamonds}</td>`);
|
||||
tds.push(`<td>${accountingRate.toFixed(4)}%</td>`);
|
||||
if (isEdit) {
|
||||
//tds.push(`<td><input type="number" min="0.01" step="0.01" class="input-sm" name="showRate" data-idx="${idx}" data-pool-type="${poolType}" value="${item.showRate}">%</td>`)
|
||||
tds.push(`<td><input type="text" onkeyup="value=value.replace(/^\\D*(\\d*(?:\\.\\d{0,2})?).*$/g, '$1')" name="showRate" data-idx="${idx}" data-pool-type="${poolType}" value="${item.showRate}">%</td>`)
|
||||
} else {
|
||||
tds.push(`<td>${item.showRate}%</td>`);
|
||||
}
|
||||
// if (isEdit) {
|
||||
// let disabled = false
|
||||
// if (poolType == POOL_TYPE.normal && idx == 0) {
|
||||
// disabled = true;
|
||||
// }
|
||||
// tds.push(`<td><input ${disabled ? "disabled" : ""} name="showRatio" data-idx="${idx}" data-pool-type="${poolType}" value="${parseFloat(item.showRatio)/RATE_SCALE.toFixed(3)}">%</td>`)
|
||||
// } else {
|
||||
// tds.push(`<td>${parseFloat(item.showRatio)/RATE_SCALE.toFixed(3)}%</td>`)
|
||||
// }
|
||||
let row = `<tr>${tds.join()}</tr>`;
|
||||
|
||||
groupTableDom.append(row);
|
||||
})
|
||||
groupTableDom.append("</tbody>")
|
||||
|
||||
// 注册输入框变更事件
|
||||
$(`${wrapperClassName} .prize-group-table input`).bind('change', inputChanged);
|
||||
// 注册删除事件
|
||||
$(`${wrapperClassName} .prize-group-table .js-remove-item`).bind("click", removePirzeItem);
|
||||
}
|
||||
|
||||
let normalPrizeGroupCache;
|
||||
let seniorPrizeGroupCache;
|
||||
let deployedNormalPrizes;
|
||||
let deployedSeniorPrizes;
|
||||
let statisticsDatas;
|
||||
let deployedStatisticsDatas;
|
||||
let editingNormalPrizeGroup;
|
||||
let currentPoolLineId;
|
||||
let maxLineId;
|
||||
let editingSeniorPrizeGroup;
|
||||
let isNormalPrizeEditing = false;
|
||||
let isSeniorPrizeEditing = false;
|
||||
|
||||
function renderPageWhenInit(groupData) {
|
||||
const normalPrizeGroup = groupData.normalPrizeGroup;
|
||||
const seniorPrizeGroup = groupData.highPrizeGroup;
|
||||
normalPrizeGroupCache = normalPrizeGroup;
|
||||
seniorPrizeGroupCache = seniorPrizeGroup;
|
||||
//deployedNormalPrizes = groupData.deployedNormalPrizes
|
||||
//deployedSeniorPrizes = groupData.deployedSeniorPrizes
|
||||
//currentPoolLineId = groupData.currentPoolLineId
|
||||
//maxLineId = groupData.maxLineId
|
||||
editingNormalPrizeGroup = null;
|
||||
editingSeniorPrizeGroup = null;
|
||||
isNormalPrizeEditing = false;
|
||||
isSeniorPrizeEditing = false;
|
||||
statisticsDatas = calculateStatisticsDatas(normalPrizeGroup, seniorPrizeGroup);
|
||||
//deployedStatisticsDatas = calculateStatisticsDatas(deployedNormalPrizes, deployedSeniorPrizes);
|
||||
renderStatisticsDatas(statisticsDatas);
|
||||
renderPrizeGroup(POOL_TYPE.normal, normalPrizeGroup, statisticsDatas, false)
|
||||
renderPrizeGroup(POOL_TYPE.senior, seniorPrizeGroup, statisticsDatas, false)
|
||||
}
|
||||
|
||||
function getPageInfo() {
|
||||
$.get('/admin/findLove/getPrizeGroupsInfo', {
|
||||
}, function (res) {
|
||||
console.log(res);
|
||||
|
||||
const data = res.data;
|
||||
|
||||
renderPageWhenInit(data);
|
||||
})
|
||||
}
|
||||
getPageInfo();
|
||||
|
||||
function deepClone(o) {
|
||||
// 判断如果不是引用类型，直接返回数据即可
|
||||
if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {
|
||||
return o
|
||||
} else if (Array.isArray(o)) { // 如果是数组，则定义一个新数组，完成复制后返回
|
||||
// 注意，这里判断数组不能用typeof，因为typeof Array 返回的是object
|
||||
// console.log(typeof []) // --> object
|
||||
var _arr = []
|
||||
o.forEach(item => { _arr.push(deepClone(item)) })
|
||||
return _arr
|
||||
} else if (typeof o === 'object') {
|
||||
var _o = {}
|
||||
for (let key in o) {
|
||||
_o[key] = deepClone(o[key])
|
||||
}
|
||||
return _o
|
||||
}
|
||||
}
|
||||
|
||||
$('.js-edit-group').on('click', function () {
|
||||
const poolType = $(this).attr('data-pool-type');
|
||||
// 进入编辑状态,则使用深度拷贝复制2组数据
|
||||
if (!editingNormalPrizeGroup || editingNormalPrizeGroup == null) {
|
||||
editingNormalPrizeGroup = deepClone(normalPrizeGroupCache);
|
||||
}
|
||||
if (!editingSeniorPrizeGroup || editingSeniorPrizeGroup == null) {
|
||||
editingSeniorPrizeGroup = deepClone(seniorPrizeGroupCache);
|
||||
}
|
||||
let prizeGroup;
|
||||
if (poolType == POOL_TYPE.normal) {
|
||||
prizeGroup = editingNormalPrizeGroup;
|
||||
isNormalPrizeEditing = true;
|
||||
} else if (poolType == POOL_TYPE.senior) {
|
||||
prizeGroup = editingSeniorPrizeGroup;
|
||||
isSeniorPrizeEditing = true;
|
||||
} else {
|
||||
throw Error("unkonw prize pool type")
|
||||
}
|
||||
|
||||
const statisticsDatasCopy = deepClone(statisticsDatas);
|
||||
renderPrizeGroup(poolType, prizeGroup, statisticsDatasCopy, true)
|
||||
|
||||
});
|
||||
|
||||
function reRenderPage (groupData) {
|
||||
//console.debug("reRenderPage groupData", groupData)
|
||||
const normalPrizeGroup = groupData.normalPrizeGroup;
|
||||
const seniorPrizeGroup = groupData.seniorPrizeGroup;
|
||||
statisticsDatas = calculateStatisticsDatas(normalPrizeGroup, seniorPrizeGroup);
|
||||
renderStatisticsDatas(statisticsDatas);
|
||||
renderPrizeGroup(POOL_TYPE.normal, normalPrizeGroup, statisticsDatas, isNormalPrizeEditing)
|
||||
renderPrizeGroup(POOL_TYPE.senior, seniorPrizeGroup, statisticsDatas, isSeniorPrizeEditing)
|
||||
}
|
||||
|
||||
$('.js-cancel-edit').on('click', function () {
|
||||
const poolType = $(this).attr('data-pool-type');
|
||||
console.debug("js-cancel-edit ", poolType, normalPrizeGroupCache, seniorPrizeGroupCache);
|
||||
let normalPrizeGroup = normalPrizeGroupCache;
|
||||
if (isNormalPrizeEditing && poolType != POOL_TYPE.normal) {
|
||||
// 普通组在编辑,并且当前取消编辑的不是普通组,则使用编辑中的数据来重新渲染页面
|
||||
normalPrizeGroup = editingNormalPrizeGroup;
|
||||
}
|
||||
let seniorPrizeGroup = seniorPrizeGroupCache;
|
||||
if (isSeniorPrizeEditing && poolType != POOL_TYPE.senior) {
|
||||
seniorPrizeGroup = editingSeniorPrizeGroup;
|
||||
}
|
||||
if (poolType == POOL_TYPE.normal) {
|
||||
editingNormalPrizeGroup = null;
|
||||
isNormalPrizeEditing = false;
|
||||
} else if (poolType == POOL_TYPE.senior) {
|
||||
editingSeniorPrizeGroup = null;
|
||||
isSeniorPrizeEditing = false;
|
||||
}
|
||||
|
||||
reRenderPage({
|
||||
normalPrizeGroup,
|
||||
seniorPrizeGroup,
|
||||
})
|
||||
});
|
||||
|
||||
$('.js-save-edit').on('click', function () {
|
||||
const poolType = $(this).attr('data-pool-type');
|
||||
let prizeGroup;
|
||||
if (poolType == POOL_TYPE.normal) {
|
||||
// 普通组在编辑,并且当前取消编辑的不是普通组,则使用编辑中的数据来重新渲染页面
|
||||
prizeGroup = editingNormalPrizeGroup;
|
||||
isNormalPrizeEditing = false;
|
||||
} else if (poolType == POOL_TYPE.senior) {
|
||||
prizeGroup = editingSeniorPrizeGroup;
|
||||
isSeniorPrizeEditing = false;
|
||||
} else {
|
||||
throw Error("unkonw prize pool type")
|
||||
}
|
||||
|
||||
console.debug("js-save-edit prizeGroup", prizeGroup);
|
||||
|
||||
console.info(JSON.stringify({
|
||||
poolItems: prizeGroup,
|
||||
prizePoolType: poolType,
|
||||
}))
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/findLove/saveDraft",
|
||||
data: JSON.stringify({
|
||||
poolItems: prizeGroup,
|
||||
prizePoolType: poolType,
|
||||
}),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
getPageInfo();
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function getDataFormBack() {
|
||||
$.get('/admin/gift/getAll', {}, function (res) {
|
||||
if (res.code == 200) {
|
||||
//console.log(res);
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
// id对象存储
|
||||
var id = '' + res.data[i].giftId;
|
||||
giftMap[id] = res.data[i];
|
||||
}
|
||||
renderAwardOption()
|
||||
}
|
||||
});
|
||||
}
|
||||
getDataFormBack();
|
||||
|
||||
function renderAwardOption() {
|
||||
$('#awardChoose').find('option').remove();
|
||||
// var str = '<option></option>';
|
||||
// $('#awardChoose').append(str);
|
||||
var str;
|
||||
for (var i in giftMap) {
|
||||
const gift = giftMap[i]
|
||||
str = '<option value=' + gift.giftId + '>' + gift.giftId + '-' + gift.giftName + '</option>';
|
||||
$('#awardChoose').append(str);
|
||||
}
|
||||
}
|
||||
|
||||
function clearModal() {
|
||||
$('#addForm').find('input[type=text],select,input[type=hidden]').each(function () {
|
||||
$(this).val('');
|
||||
});
|
||||
$('#editForm').find('input[type=text],select,input[type=hidden]').each(function () {
|
||||
$(this).val('');
|
||||
});
|
||||
}
|
||||
// 添加按钮事件
|
||||
$('.js-add-prize').on('click', function () {
|
||||
const poolType = $(this).attr('data-pool-type');
|
||||
clearModal();
|
||||
$('#prizePoolType').val(poolType);
|
||||
$('#prizePoolName').val(POOL_NAME[poolType]);
|
||||
$('#addModal').modal('show');
|
||||
});
|
||||
|
||||
// select监听事件
|
||||
$('#addModal').find('#awardChoose').on('change', function (e) {
|
||||
const chosenPrizeId = $(this).val()
|
||||
// console.debug("awardChoose change", e, chosenPrizeId)
|
||||
$('#addPrizeId').val(chosenPrizeId);
|
||||
});
|
||||
|
||||
// 保存按钮事件
|
||||
$('#addSave').on('click', function () {
|
||||
const chosenPrizeId = $('#awardChoose').val()
|
||||
const poolType = parseInt($('#prizePoolType').val());
|
||||
const currAllPrizeItems = [...editingNormalPrizeGroup, ...editingSeniorPrizeGroup];
|
||||
for (let i = 0; i < currAllPrizeItems.length; i++) {
|
||||
const exsistsPrize = currAllPrizeItems[i];
|
||||
if (exsistsPrize.giftId == chosenPrizeId) {
|
||||
$('#tipMsg').text('所选的奖品已添加到奖池中,不能重复添加');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const gift = giftMap[chosenPrizeId];
|
||||
const newPoolItem = {
|
||||
giftId: parseInt(chosenPrizeId),
|
||||
giftName: gift.giftName,
|
||||
level: parseInt($('#prizeLevel').val()),
|
||||
num: parseInt($('#jackpotNumber').val()),
|
||||
prizePoolType: poolType,
|
||||
diamonds: gift.goldPrice,
|
||||
showRatio: 0.0,
|
||||
}
|
||||
let prizeList = editingNormalPrizeGroup;
|
||||
if (poolType == POOL_TYPE.senior) {
|
||||
prizeList = editingSeniorPrizeGroup;
|
||||
}
|
||||
// 按平台价值递增排序
|
||||
let insertIdx = prizeList.length;
|
||||
for (let i = 0; i < prizeList.length; i++) {
|
||||
const exsistsPrize = prizeList[i];
|
||||
if (newPoolItem.diamonds < exsistsPrize.diamonds) {
|
||||
insertIdx = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
prizeList.splice(insertIdx, 0, newPoolItem);
|
||||
|
||||
reRenderPage({
|
||||
normalPrizeGroup: editingNormalPrizeGroup,
|
||||
seniorPrizeGroup: editingSeniorPrizeGroup,
|
||||
});
|
||||
|
||||
$('#addModal').modal('hide');
|
||||
});
|
||||
|
||||
$('#addCancel').on('click', function () {
|
||||
$('#addModal').modal('hide');
|
||||
});
|
||||
|
||||
// 发布
|
||||
$('.js-deploy').on('click', function () {
|
||||
if (isSeniorPrizeEditing || isNormalPrizeEditing) {
|
||||
$('#tipMsg').text('当前有礼物组未报错,请先保存礼物组后再尝试发布');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
//if (!normalPrizeGroupCache.isUndeploy && !seniorPrizeGroupCache.isUndeploy) {
|
||||
// $('#tipMsg').text('没有待发布的修改');
|
||||
// $('#tipModal').modal('show');
|
||||
// return;
|
||||
//}
|
||||
console.debug('js-deploy data', normalPrizeGroupCache, seniorPrizeGroupCache)
|
||||
if ((normalPrizeGroupCache.length <= 0) ||
|
||||
(seniorPrizeGroupCache.length <= 0)) {
|
||||
$('#tipMsg').text('所有的礼物组都必须至少添加一个奖品');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
|
||||
//$('#deployedPrizeRate').text(deployedStatisticsDatas.prizeRate.toFixed(4));
|
||||
//$('#currPrizeRate').text(statisticsDatas.prizeRate.toFixed(4));
|
||||
//$('#currPoolLineId').text(currentPoolLineId);
|
||||
//$('#activePoolLineId').text(maxLineId + 1);
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/findLove/deploy",
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("发布成功.等待奖池生成");
|
||||
$("#tipModal").modal('show');
|
||||
getPageInfo();
|
||||
} else {
|
||||
$("#tipMsg").text(json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//$('#deployConfirmModal').modal('show');
|
||||
})
|
||||
/*$('#deployCancel').on('click', function () {
|
||||
$('#deployConfirmModal').modal('hide');
|
||||
})
|
||||
|
||||
$('#deployConfirm').on('click', function () {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/findLove/deploy",
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("发布成功.等待奖池生成");
|
||||
$("#tipModal").modal('show');
|
||||
getPageInfo();
|
||||
} else {
|
||||
$("#tipMsg").text(json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#deployConfirmModal').modal('hide');
|
||||
})*/
|
||||
|
||||
// 发布
|
||||
$('.js-deployed').on('click', function () {
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/findLove/getDeployed",
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
const data = json.data
|
||||
const seniorSize = data.seniorPoolItems.map(i => i.num).reduce((prev, cur) => prev + cur)
|
||||
const normalSize = data.normalPoolItems.map(i => i.num).reduce((prev, cur) => prev + cur)
|
||||
$('#deployedSeniorSize').html(seniorSize)
|
||||
$('#deployedNormalSize').html(normalSize)
|
||||
$('#deployedTotalSize').html(seniorSize + seniorSize * normalSize)
|
||||
const seniorItems = data.seniorPoolItems.sort((a, b) => b.num - a.num).map(i => {
|
||||
return `${i.giftId}-${i.giftName} x ${i.num}`
|
||||
}).join("，")
|
||||
const normalItems = data.normalPoolItems.sort((a, b) => b.num - a.num).map(i => {
|
||||
return `${i.giftId}-${i.giftName} x ${i.num}`
|
||||
}).join("，")
|
||||
$('#deployedSeniorItems').html(seniorItems)
|
||||
$('#deployedNormalItems').html(normalItems)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#deployedModal').modal('show');
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pool-line-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.dataCount {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dataCount>p {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
/*background: #ccc;*/
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.group-table-section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group-table-section .prize-group-wrapper {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 512px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper .right-content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper .right-content.right-content-edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .header-wrapper .right-content .undeploy {
|
||||
color: red;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .data-wrapper {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .data-wrapper div {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.prize-group-wrapper .prize-group-table {
|
||||
margin-top: 12px;
|
||||
margin-right: 10px;
|
||||
max-width: 1024px;
|
||||
|
||||
}
|
||||
|
||||
.prize-group-wrapper .prize-group-table {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
#deployConfirmModal .modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
#deployConfirmModal .modal-body #currPrizeRate {
|
||||
color: red;
|
||||
|
||||
}
|
||||
|
||||
#deployConfirmModal .modal-body div:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#deployConfirmModal .modal-body div:last-child {
|
||||
margin-top: 10px;
|
||||
}</style>
|
||||
153
src/views/findlove/PrizeDrawRecordAdminView.vue
Normal file
153
src/views/findlove/PrizeDrawRecordAdminView.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<div class="pull-left">
|
||||
<form action="/admin/findLove/data/export.action" id="searchForm">
|
||||
平台号：<input type="text" id="msNo" name="msNo" class="input-sm" placeholder="请输入平台号">
|
||||
|
||||
奖品名称：<input type="text" id="prizeName" name="prizeName" class="input-sm"
|
||||
placeholder="请输入奖品名称">
|
||||
|
||||
日期：<input type="text" name="startDate" id="timeBegin" class="input-sm datetime"
|
||||
placeholder="起始时间">
|
||||
- <input type="text" name="endDate" id="timeEnd" class="input-sm datetime"
|
||||
placeholder="结束时间">
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="pull-right">
|
||||
<button id="searchBtn" class="btn btn-primary">筛选</button>
|
||||
<button id="exportBtn" class="btn btn-primary">导出</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "PrizeDrawRecordAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
|
||||
$('.datetime').datetimepicker({
|
||||
language: 'zh-CN',
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
var main = {
|
||||
init: function () {
|
||||
this.eventRegister();
|
||||
this.getDataFromBack();
|
||||
},
|
||||
|
||||
eventRegister: function () {
|
||||
// 筛选按钮点击事件
|
||||
$('#searchBtn').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
$("#exportBtn").on('click', function () {
|
||||
$("#searchForm").submit();
|
||||
})
|
||||
},
|
||||
|
||||
getDataFromBack: function () {
|
||||
|
||||
}
|
||||
};
|
||||
main.init();
|
||||
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'nick', title: '用户昵称', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'giftName', title: '奖品名称', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'num', title: '数量', align: 'center', valign: 'middle', width: '10%' },
|
||||
{
|
||||
field: 'createTime', title: '抽奖时间', align: 'center', valign: 'middle', width: '20%', formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'level', title: '礼物等级', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'diamonds', title: '钻石单价', align: 'center', valign: 'middle', width: '10%' },
|
||||
{
|
||||
field: 'poolType', title: '礼物组类型', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
|
||||
switch (row.poolType) {
|
||||
case 1:
|
||||
return '普通礼物组';
|
||||
|
||||
case 2:
|
||||
return '高级礼物组';
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 30, 50],
|
||||
sidePagination: 'server',
|
||||
queryParamsType: 'undefined',
|
||||
queryParams: function queryParams(params) {
|
||||
var param = {
|
||||
pageSize: params.pageSize,
|
||||
pageNumber: params.pageNumber,
|
||||
startDate: $('#timeBegin').val(),
|
||||
endDate: $('#timeEnd').val(),
|
||||
msNo: $('#msNo').val(),
|
||||
prizeName: $("#prizeName").val()
|
||||
};
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'id',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/findLove/data/listDrawRecord',
|
||||
onLOadSuccess: function () {
|
||||
console.log('load success');
|
||||
},
|
||||
onLoadError: function () {
|
||||
console.log('load fail');
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
1011
src/views/firstpage/FirstPageActivityBannerView.vue
Normal file
1011
src/views/firstpage/FirstPageActivityBannerView.vue
Normal file
File diff suppressed because it is too large
Load Diff
1029
src/views/firstpage/FirstPageBannerView.vue
Normal file
1029
src/views/firstpage/FirstPageBannerView.vue
Normal file
File diff suppressed because it is too large
Load Diff
366
src/views/firstpage/FirstPageOptView.vue
Normal file
366
src/views/firstpage/FirstPageOptView.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle">男神女神</h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
<!-- <button id="addBtn" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus"></i>增加
|
||||
</button> -->
|
||||
tab名称: <input type="text" id='seachName'>
|
||||
|
||||
状态: <select name="status" id="seachStatus" class="input-m">
|
||||
<option value="">--全部--</option>
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<div class="modal fade" id="actModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="addModalLabel">新增</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="actForm">
|
||||
<input type="hidden" name="id" id="id" value="0">
|
||||
<div class="form-group">
|
||||
<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"
|
||||
style="width:400px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status" class="col-sm-3 control-label">状态:</label>
|
||||
<select name="status" id="status" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
</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>
|
||||
<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">x</span></button>
|
||||
<h4 class="modal-title" id="editModalLabel">编辑</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="editForm">
|
||||
<input type="hidden" name="id" id="e_id">
|
||||
<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="e_name"
|
||||
style="width:400px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status" class="col-sm-3 control-label">状态:</label>
|
||||
<select name="status" id="e_status" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
</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="edit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="sure">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FirstPageOptView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
});
|
||||
|
||||
$('#addBtn').on('click', function () {
|
||||
cleanModal();
|
||||
$("#actForm")[0].reset();
|
||||
$('#actModal').modal('show');
|
||||
});
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
var id = $(this).attr("data-id-1");
|
||||
var name = $(this).attr("data-id-2");
|
||||
var status = $(this).attr("data-id-3");
|
||||
cleanModal();
|
||||
|
||||
$('#e_id').val(id);
|
||||
$('#e_name').val(name);
|
||||
$('#e_status').val(status);
|
||||
$('#editModal').modal('show');
|
||||
});
|
||||
$('#save').on('click', function () {
|
||||
if ($('#actForm').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpageopt/add.action",
|
||||
data: $('#actForm').serialize(),
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#actModal").modal('hide');
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
$('#edit').on('click', function () {
|
||||
if ($('#editForm').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpageopt/update.action",
|
||||
data: $('#editForm').serialize(),
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#editModal").modal('hide');
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
$("#table").on("click", '.opt-del', function () {
|
||||
var id = $(this).attr("data-id");
|
||||
if (id == 'undefined') {
|
||||
$("#tipMsg").text("id参数有误");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确认删除吗?")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/firstpageopt/delete.action',
|
||||
data: { 'id': id },
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function cleanModal() {
|
||||
$('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
|
||||
$(this).val('');
|
||||
})
|
||||
$('#actForm').find('img').attr('src', '');
|
||||
}
|
||||
function initTable() {
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'id', title: '序号', align: 'center', valign: 'middle', width: '5%' },
|
||||
{ field: 'name', title: '名称', align: 'center', valign: 'middle', width: '5%' },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
console.log(val);
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '展示';
|
||||
|
||||
case 2:
|
||||
return '隐藏';
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
title: '类型',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
console.log(val);
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '男';
|
||||
|
||||
case 2:
|
||||
return '女';
|
||||
|
||||
case 3:
|
||||
return '不限';
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '更新时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
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: 'createTime',
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
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: 'tmp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var id = row.id;
|
||||
var name = row.name;
|
||||
var status = row.status;
|
||||
return '<button class="btn btn-sm btn-success opt-edit" data-id-1 ="' + id + ' "data-id-2="' + name + '" data-id-3="' + status + '">' + '编辑</button>';
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 30, 50],
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageSize: params.pageSize,
|
||||
pageNumber: params.pageNumber,
|
||||
name: $("#seachName").val(),
|
||||
status: ($('#seachStatus').val()) ? $('#seachStatus').val() : null
|
||||
};
|
||||
// console.log(param);
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'name',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/firstpageopt/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#imgMask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
height: 600px;
|
||||
padding: 4px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#imgMask img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
593
src/views/firstpage/FirstPageTabRoomView.vue
Normal file
593
src/views/firstpage/FirstPageTabRoomView.vue
Normal file
@@ -0,0 +1,593 @@
|
||||
<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">
|
||||
<div class="col-sm-12">
|
||||
|
||||
tab名称:<input type="text" name="tabName" id="name" placeholder="请输入tab名称">
|
||||
|
||||
平台号:
|
||||
<input type="text" name="erbanNo" id="erbanNo" placeholder="请输入用户ID">
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-primary">
|
||||
<i class="glyphicon"></i>查询
|
||||
</button>
|
||||
|
||||
<button id="addRoom" class="btn btn-default">
|
||||
<i class="glyphicon"></i>添加房间
|
||||
</button>
|
||||
<!-- <button id="btnMultiDel" class="btn btn-default">
|
||||
<i class="glyphicon"></i>删除选中
|
||||
</button>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<input type="hidden" name="id" id="id">
|
||||
<input type="hidden" name="roomUid" id="roomUid">
|
||||
<div class="modal fade" id="addTabRoomModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="addTabRoomModalLabel">添加房间</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addTabRoom" class="form-horizontal">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tabName" class="col-sm-3 control-label">选择tab:</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="tabName" id="tabName">
|
||||
<option value="">-- 请选择 --</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group erbanNo">
|
||||
<label for="erbanNo" class="col-sm-3 control-label">用户ID:</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" id="uid" name="erbanNo" class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="form-group seqNo">
|
||||
<label for="seqNo" class="col-sm-3 control-label">排序:</label>
|
||||
<div class="col-sm-8 control-label">
|
||||
<input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
|
||||
placeholder="相同tab的房间排序不可重复">
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="form-group status">
|
||||
<label class="col-sm-3 control-label">展示状态:</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="status" id="status" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="0">隐藏</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="form-group">
|
||||
<label for="roomBadge" class="col-sm-3 control-label">角标:</label>
|
||||
<div class="col-sm-9">
|
||||
<img src="" id="roomBadgeUrl" style="width:250px;height:90px;" alt="">
|
||||
<input type="file" id="uploadRoomBadgeFile" name="uploadRoomBadgeFile"
|
||||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
|
||||
<button class="btn btn-success" type="button" id="uploadBtn">上传</button>
|
||||
<input type="hidden" class="form-control validate[required]" name="roomBadge"
|
||||
id="roomBadge"
|
||||
style="width:400px">
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">角标:</label>
|
||||
<div class="col-sm-8">
|
||||
<img src="" id="addImgUrl" style="width:250px;height:90px;" alt="">
|
||||
<input type="file" id="addUploadFile" name="uploadFile"
|
||||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
|
||||
<button class="btn btn-success" type="button" id="addUploadBtn">上传</button>
|
||||
<input type="hidden" id="addRoomBadge" name="roomBadge"
|
||||
class="form-control validate[required]" />
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="form-group roomBadge">
|
||||
<label for="roomBadge" class="col-sm-3 control-label">角标:</label>
|
||||
<div class="col-sm-8 control-label">
|
||||
<input type="text" class="form-control" name="roomBadge" id="roomBadge">
|
||||
</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="saveRoom">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="editTabModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="editTabModalLabel">编辑房间</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editTab" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="tabName" class="col-sm-3 control-label">tab名称:</label>
|
||||
<span id="e_tabName"></span>
|
||||
</div>
|
||||
<div class="form-group seqNo">
|
||||
<label for="erbanNo" class="col-sm-3 control-label">用户ID:</label>
|
||||
<span id="erbanNoEdit"></span>
|
||||
</div>
|
||||
<!--<div class="form-group seqNo">
|
||||
<label for="seqNo" class="col-sm-3 control-label">排序:</label>
|
||||
<div class="col-sm-8 control-label">
|
||||
<input type="text" class="form-control validate[custom[integer]]" name="seqNo" id="e_seqNo">
|
||||
</div>
|
||||
</div>-->
|
||||
<!--<div class="form-group">
|
||||
<span style="padding-left: 70px">*数字越小，房间排序越靠前，排序数字不可重复</span>
|
||||
</div>-->
|
||||
<div class="form-group showStatus">
|
||||
<label class="col-sm-3 control-label">展示状态:</label>
|
||||
<div class="col-sm-8">
|
||||
<select name="status" id="roomStatus" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="0">隐藏</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">角标:</label>
|
||||
<div class="col-sm-8">
|
||||
<img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
|
||||
<input type="file" id="uploadFile" name="uploadFile"
|
||||
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
|
||||
<button class="btn btn-success" type="button" id="uploadBtn">上传</button>
|
||||
<span class="attention">注意:图片尺寸750*250,选择图片后请点击上传按钮</span>
|
||||
<input type="hidden" id="roomBadge" name="roomBadge"
|
||||
class="form-control validate[required]" />
|
||||
<a href="javascript:void(0)" id="removeBadge">下角标</a>
|
||||
</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="edit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FirstPageTabRoomView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
getTitles();
|
||||
function getTitles() {
|
||||
$.get('/admin/firstpagetab/getTabNameList', {}, function (res) {
|
||||
if (res.rows.length > 0) {
|
||||
renderSelect(res.rows);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function renderSelect(data) {
|
||||
var $select = $('#tabName');
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var $option = $('<option value="' + data[i].tabId + '" />');
|
||||
$option.html(data[i].name);
|
||||
$select.append($option);
|
||||
}
|
||||
}
|
||||
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 10,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 30, 50],
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageSize: params.pageSize,
|
||||
pageNumber: params.pageNumber,
|
||||
tabName: $('#name').val(),
|
||||
erbanNo: $('#erbanNo').val()
|
||||
};
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'id',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/firstpagetabroom/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
},
|
||||
columns: [
|
||||
{ field: 'id', title: '序号', align: 'center', valign: 'middle', width: '1%', visible: false },
|
||||
{ field: 'tabId', title: '', align: 'center', valign: 'middle', width: '1%', visible: false },
|
||||
{ field: 'tabName', title: 'tab名称', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '5%' },
|
||||
{ field: 'roomTitle', title: '房间标题', align: 'center', valign: 'middle', width: '15%' },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
console.log(val);
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '展示';
|
||||
|
||||
case 0:
|
||||
return '隐藏';
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
//{field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '5%'},
|
||||
//{field: 'roomBadge', title: '角标', align: 'center', valign: 'middle', width: '10%'},
|
||||
{
|
||||
field: 'roomBadge',
|
||||
title: '角标',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == null || val == '') {
|
||||
return '-';
|
||||
}
|
||||
return "<img src='" + val + "' width='60' height='50'>";
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '房间创建时间',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format("yyyy-MM-dd hh:mm:ss");
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'tmp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '12%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var key = row.id;
|
||||
var status = row.status;
|
||||
|
||||
var str;
|
||||
str = "<button class='btn btn-sm btn-success opt-edit' style='margin-right: 4px;' data-id=" + key + ">编辑</button>";
|
||||
str += "<button class='btn btn-sm btn-danger opt-del' data-id=" + key + ">删除</button>";
|
||||
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
var picker1 = $('#startTime').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
})
|
||||
var picker2 = $("#endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('#table').on('click', '.opt-del', function () {
|
||||
var id = $(this).attr("data-id");
|
||||
if (id == 'undefined') {
|
||||
$("#tipMsg").text("id参数有误");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确认删除吗?")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/firstpagetabroom/delete.action',
|
||||
data: { 'id': id },
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败，错误码：" + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
var id = $(this).data('id');
|
||||
if (id == 'undefined' || !id) {
|
||||
return;
|
||||
}
|
||||
var data = $('#table').bootstrapTable('getRowByUniqueId', id);
|
||||
console.log(data);
|
||||
$('#id').val(id);
|
||||
$('#e_tabName').html(data.tabName);
|
||||
$('#erbanNoEdit').html(data.erbanNo);
|
||||
$("#roomStatus").val(data.status == true ? 1 : 0);
|
||||
//$("#e_seqNo").val(data.seqNo);
|
||||
$("#roomUid").val(data.roomUid);
|
||||
$('#imgUrl').attr('src', data.roomBadge);
|
||||
$("#roomBadge").val(data.roomBadge);
|
||||
$('#editTabModal').modal('show');
|
||||
})
|
||||
|
||||
/*$('#table').on('click', '.opt-show', function () {
|
||||
var id = $(this).data('id');
|
||||
if (id == 'undefined' || !id) {
|
||||
return;
|
||||
}
|
||||
var data = $('#table').bootstrapTable('getRowByUniqueId', id);
|
||||
|
||||
var status = (data.status == false) ? 1 : 0;
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/firstpagetabroom/changeRoomStatus.action',
|
||||
data: {
|
||||
status: status,
|
||||
id: id
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$("#tipMsg").text("修改状态成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败，错误码：" + res.code);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
})*/
|
||||
|
||||
function cleanModal(obj) {
|
||||
$('#addTabRoom').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
|
||||
$(this).val('');
|
||||
})
|
||||
$('#addTabRoom').find('img').attr('src', '');
|
||||
//清空输入框
|
||||
obj.find('input:text').val('');
|
||||
//清空隐藏域
|
||||
obj.find('input:hidden').val('');
|
||||
//清空单选按钮
|
||||
obj.find('input:radio').attr("checked", false);
|
||||
//清空文本域
|
||||
obj.find('textarea').val('');
|
||||
//清空图片
|
||||
obj.find('img').attr("src", "");
|
||||
//清空select
|
||||
obj.find('select').val("");
|
||||
}
|
||||
|
||||
$('#edit').on('click', function () {
|
||||
if ($('#editTab').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/firstpagetabroom/update.action',
|
||||
dataType: 'json',
|
||||
data: {
|
||||
id: $('#id').val(),
|
||||
//seqNo: $('#e_seqNo').val(),
|
||||
status: $('#roomStatus').val(),
|
||||
roomBadge: $('#roomBadge').val(),
|
||||
roomUid: $('#roomUid').val()
|
||||
},
|
||||
success: function (res) {
|
||||
if (res.success == 'true') {
|
||||
$("#editTabModal").modal('hide');
|
||||
$("#tipMsg").text("编辑成功");
|
||||
$("#tipModal").modal('show');
|
||||
//$('.seqNo').show();
|
||||
$(".showStatus").show();
|
||||
$(".roomBadge").show();
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("编辑失败，错误码：" + res.code);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
$("#addRoom").on('click', function () {
|
||||
cleanModal($("addTabRoom"));
|
||||
$('#addTabRoomModal').modal('show');
|
||||
})
|
||||
|
||||
$('#saveRoom').on('click', function () {
|
||||
if ($('#addTabRoom').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpagetabroom/add.action?tabId=" + $('#tabName').val()
|
||||
+ "&tabName=" + $("#tabName").find("option:selected").text(),
|
||||
dataType: 'json',
|
||||
data: $('#addTabRoom').serialize(),
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#addTabRoomModal").modal('hide');
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败，错误：" + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
$('#addUploadBtn').on('click', function () {
|
||||
var options = {
|
||||
type: 'post',
|
||||
url: '/admin/firstpagebanner/headimg.action',
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.path) {
|
||||
$('#addRoomBadge').val(json.path);
|
||||
$('#addImgUrl').attr('src', json.path);
|
||||
console.log(json.path);
|
||||
} else {
|
||||
$('#tipMsg').text(json.msg);
|
||||
$('#tipModal').modal('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
$('#addTabRoom').ajaxSubmit(options);
|
||||
});
|
||||
$('#uploadBtn').on('click', function () {
|
||||
var options = {
|
||||
type: 'post',
|
||||
url: '/admin/firstpagebanner/headimg.action',
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.path) {
|
||||
$('#roomBadge').val(json.path);
|
||||
$('#imgUrl').attr("src", json.path);
|
||||
console.log(json.path);
|
||||
} else {
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
};
|
||||
$("#editTab").ajaxSubmit(options);
|
||||
});
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
$('#removeBadge').on('click', function () {
|
||||
$('#imgUrl').attr('src', '');
|
||||
$('#uploadFile').val('');
|
||||
$('#roomBadge').val('');
|
||||
});
|
||||
|
||||
$('#btnMultiDel').on('click', function () {
|
||||
var rows = $("#table").bootstrapTable("getSelections");
|
||||
if (rows.length == 0) {
|
||||
alert("请先选择要删除的记录");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("rows: " + rows.length);
|
||||
var idArr = [];
|
||||
var moduleIdArr = null;
|
||||
var uidArr = [];
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
idArr.push(rows[i]['id']);
|
||||
if (moduleIdArr == null) {
|
||||
moduleIdArr = rows[i]['moduleId'] + "#" + rows[i]['uid'];
|
||||
} else {
|
||||
moduleIdArr += "," + rows[i]['moduleId'] + "#" + rows[i]['uid'];
|
||||
}
|
||||
uidArr.push(rows[i]['uid']);
|
||||
}
|
||||
console.log(idArr);
|
||||
|
||||
if (confirm("你确认删除选中房间吗?")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: "/admin/firstpagetabroom/delete.action",
|
||||
data: {
|
||||
'ids': JSON.stringify(idArr),
|
||||
'moduleIds': moduleIdArr,
|
||||
'uids': JSON.stringify(uidArr)
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("已删除选中房间");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("操作失败");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col-sm-1 {
|
||||
width: 15.333333%;
|
||||
}
|
||||
|
||||
.col-sm-2 {
|
||||
width: 34.666667%;
|
||||
}
|
||||
|
||||
.col-sm-10 {
|
||||
width: 73.333333%;
|
||||
}
|
||||
|
||||
#removeBadge {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
500
src/views/firstpage/FirstPageTabView.vue
Normal file
500
src/views/firstpage/FirstPageTabView.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle">新版首页tab配置</h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
<button id="addBtn" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus"></i>增加
|
||||
</button>
|
||||
tab名称: <input type="text" id='name'>
|
||||
|
||||
状态: <select name="status" id="seachStatus" class="input-m">
|
||||
<option value="">--全部--</option>
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
app: <select name="app" id="app" class="input-m">
|
||||
<option value="">--全部--</option>
|
||||
</select>
|
||||
|
||||
开始日期: <input type="text" name="timeBegin" id="beginTime" class="input-sm" value="">
|
||||
|
||||
结束日期: <input type="text" name="timeEnd" id="endTime" class="input-sm" value="">
|
||||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<input type="hidden" name="tabId" id="id">
|
||||
<div class="modal fade" id="actModal" 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">x</span></button>
|
||||
<h4 class="modal-title" id="addModalLabel">新增</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="actForm">
|
||||
<input type="hidden" name="id" id="actId" value="0">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<label for="name" class="col-sm-3 control-label">tab名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="name" id="tabName"
|
||||
style="width:400px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status" class="col-sm-3 control-label">状态:</label>
|
||||
<select name="status" id="status" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="showType" class="col-sm-3 control-label">展示类型:</label>
|
||||
<select name="showType" id="showType" class="col-sm-2">
|
||||
<!--<option value="1">3+N</option>-->
|
||||
<option value="2">2*N</option>
|
||||
</select>
|
||||
</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 validate[required]" name="seqNo" id="seqNo"
|
||||
style="width:400px" placeholder="数字越小越靠前">
|
||||
</div>
|
||||
</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>
|
||||
<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">x</span></button>
|
||||
<h4 class="modal-title" id="editModalLabel">编辑</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="editForm">
|
||||
<input type="hidden" name="tabId" id="tabId" value="0">
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<label for="name" class="col-sm-3 control-label">tab名称:</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="name" id="e_tabName"
|
||||
style="width:400px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status" class="col-sm-3 control-label">状态:</label>
|
||||
<select name="status" id="e_status" class="col-sm-2">
|
||||
<option value="1">展示</option>
|
||||
<option value="2">隐藏</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="showType" class="col-sm-3 control-label">展示类型:</label>
|
||||
<select name="showType" id="e_showType" class="col-sm-2">
|
||||
<!--<option value=1>3+N</option>-->
|
||||
<option value=2>2*N</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="appId" class="col-sm-3 control-label">app:</label>
|
||||
<select name="appId" id="e_appId" class="col-sm-2">
|
||||
</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 validate[required]" name="seqNo" id="e_seqNo"
|
||||
style="width:400px" placeholder="数字越小越靠前">
|
||||
</div>
|
||||
</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="edit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" id="sure">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
var app = {};
|
||||
var validApp = {};
|
||||
export default {
|
||||
name: "FirstPageTabView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
|
||||
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 = $('#app');
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
initTable();
|
||||
});
|
||||
|
||||
$('#addBtn').on('click', function () {
|
||||
cleanModal();
|
||||
$("#actForm")[0].reset();
|
||||
// 处理appId
|
||||
$('#appId').empty();
|
||||
$('#appId').append('<option value="">请选择</option>');
|
||||
for (var key in validApp) {
|
||||
$('#appId').append('<option value="' + key + '">' + validApp[key] + '</option>');
|
||||
}
|
||||
|
||||
$('#actModal').modal('show');
|
||||
});
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
cleanModal();
|
||||
// 处理appId
|
||||
$('#e_appId').empty();
|
||||
$('#e_appId').append('<option value="">请选择</option>');
|
||||
for (var key in app) {
|
||||
$('#e_appId').append('<option value="' + key + '">' + app[key] + '</option>');
|
||||
}
|
||||
var tabId = $(this).attr("data-id-1");
|
||||
var name = $(this).attr("data-id-2");
|
||||
var seqNo = $(this).attr("data-id-5");
|
||||
var appId = $(this).attr("data-id-6");
|
||||
var data = $('#table').bootstrapTable('getRowByUniqueId', tabId);
|
||||
$('#tabId').val(tabId);
|
||||
$('#e_tabName').val(name);
|
||||
$('#e_status').val(data.status);
|
||||
$('#e_showType').val(data.showType);
|
||||
$('#e_seqNo').val(seqNo);
|
||||
$('#e_appId').val(data.appId);
|
||||
$('#editModal').modal('show');
|
||||
});
|
||||
// 事件编辑
|
||||
var $timeBegin = $('#beginTime').datepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
autoclose: true
|
||||
});
|
||||
var $timeEnd = $('#endTime').datepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
autoclose: true,
|
||||
});
|
||||
|
||||
$timeBegin.on('changeDate', function () {
|
||||
var date = $('#beginTime').datepicker('getDate');
|
||||
$timeEnd.datepicker('setStartDate', date);
|
||||
});
|
||||
$timeEnd.on('changeDate', function () {
|
||||
var date = $('#endTime').datepicker('getDate');
|
||||
$timeBegin.datepicker('setEndDate', date);
|
||||
});
|
||||
$('#save').on('click', function () {
|
||||
if (!$('#appId').val()) {
|
||||
$("#tipMsg").text("请选择app");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if ($('#actForm').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpagetab/add.action",
|
||||
data: $('#actForm').serialize(),
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#actModal").modal('hide');
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败，错误码：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
$('#edit').on('click', function () {
|
||||
/*if(!$('#appId').val()){
|
||||
$("#tipMsg").text("请选择app");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}*/
|
||||
if ($('#editForm').validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpagetab/update.action",
|
||||
data: $('#editForm').serialize(),
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#editModal").modal('hide');
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败，错误码：" + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
$("#table").on("click", '.opt-del', function () {
|
||||
var tabId = $(this).attr("data-id");
|
||||
if (tabId == 'undefined') {
|
||||
$("#tipMsg").text("id参数有误");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确认删除吗?")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: '/admin/firstpagetab/delete.action',
|
||||
data: { 'tabId': tabId },
|
||||
dataType: 'json',
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败，错误码：" + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function cleanModal() {
|
||||
$('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
|
||||
$(this).val('');
|
||||
})
|
||||
$('#actForm').find('img').attr('src', '');
|
||||
}
|
||||
function initTable() {
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'tabId', title: '序号', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'name', title: 'tab名称', align: 'center', valign: 'middle', width: '10%' },
|
||||
{ field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '10%' },
|
||||
{
|
||||
field: 'status',
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
switch (val) {
|
||||
case '1':
|
||||
return '展示';
|
||||
|
||||
case '2':
|
||||
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: 'showType',
|
||||
title: '展示类型',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
switch (val) {
|
||||
case 1:
|
||||
return '3+N';
|
||||
|
||||
case 2:
|
||||
return '2*N';
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
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: 'tmp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
var id = row.tabId;
|
||||
var name = row.name;
|
||||
var status = row.status;
|
||||
var showType = row.showType;
|
||||
var seqNo = row.seqNo;
|
||||
var appId = row.appId;
|
||||
return '<button class="btn btn-sm btn-success opt-edit" data-id-1 ="' + id
|
||||
+ '"data-id-2="' + name
|
||||
+ '"data-id-3="' + status
|
||||
+ '"data-id-6="' + appId
|
||||
+ '"data-id-4="' + showType
|
||||
+ '"data-id-5="' + seqNo + '">' + '编辑</button>' + " " +
|
||||
"<button class='btn btn-sm btn-danger opt-del' data-id=" + id + ">删除</button>";
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 30, 50],
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
|
||||
var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
|
||||
var param = {
|
||||
pageSize: params.pageSize,
|
||||
pageNumber: params.pageNumber,
|
||||
beginTime: beginTime,
|
||||
endTime: endTime,
|
||||
name: ($('#name').val()) ? $('#name').val() : null,
|
||||
status: ($('#seachStatus').val()) ? $('#seachStatus').val() : null,
|
||||
appId: ($('#app').val()) ? $('#app').val() : null
|
||||
};
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'tabId',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/firstpagetab/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#imgMask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 250px;
|
||||
height: 600px;
|
||||
padding: 4px;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#imgMask img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
581
src/views/firstpage/RecommendResourceAdminView.vue
Normal file
581
src/views/firstpage/RecommendResourceAdminView.vue
Normal file
@@ -0,0 +1,581 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<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-plus"></i>增加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="roomTagModal" 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" id="addForm">
|
||||
<input type="hidden" name="id" id="id" />
|
||||
<!--A策略-->
|
||||
<div class="form-group">
|
||||
<label for="resourceA" class="col-sm-3 control-label">A策略<font color="red">*</font>：</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="status" id="resourceA" class="form-control validate[required]">
|
||||
<option value=""></option>
|
||||
<option value="1">牌照房</option>
|
||||
<option value="2">相亲房</option>
|
||||
<option value="3">PK房</option>
|
||||
<option value="4">游戏房</option>
|
||||
<option value="5">H5</option>
|
||||
<option value="6">自定义房间</option>
|
||||
<option value="7">个播房</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">A图标<font color="red">*</font>：</label>
|
||||
<div class="col-sm-8">
|
||||
<img src="" id="iconImgUrlA" style='width:108px;height:45px;' alt="">
|
||||
<input type="file" id="iconFileA" name='uploadFile'
|
||||
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
|
||||
<button class="btn btn-success" type='button' id="iconBtnA">上传</button>
|
||||
<input type="hidden" id="iconUrlA" name='alertWinPic'
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="boxA">
|
||||
<label for="contentA" class="col-sm-3 control-label" id="contentLabA"></label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="name" id="contentA">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--B策略-->
|
||||
<div class="form-group">
|
||||
<label for="resourceB" class="col-sm-3 control-label">B策略<font color="red">*</font>：</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="status" id="resourceB" class="form-control validate[required]">
|
||||
<option value=""></option>
|
||||
<option value="1">牌照房</option>
|
||||
<option value="2">相亲房</option>
|
||||
<option value="3">PK房</option>
|
||||
<option value="4">游戏房</option>
|
||||
<option value="5">H5</option>
|
||||
<option value="6">自定义房间</option>
|
||||
<option value="7">个播房</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">B图标<font color="red">*</font>：</label>
|
||||
<div class="col-sm-8">
|
||||
<img src="" id="iconImgUrlB" style='width:108px;height:45px;' alt="">
|
||||
<input type="file" id="iconFileB" name='uploadFile'
|
||||
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
|
||||
<button class="btn btn-success" type='button' id="iconBtnB">上传</button>
|
||||
<input type="hidden" id="iconUrlB" name='alertWinPic'
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="boxB">
|
||||
<label for="contentB" class="col-sm-3 control-label" id="contentLabB"></label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="name" id="contentB">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">生效时段<font color="red">*</font>:</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="input-sm datetime validate[required]" name="beginTime"
|
||||
id="beginTime">
|
||||
-<input type="text" class="input-sm datetime validate[required]" name="endTime"
|
||||
id="endTime">
|
||||
</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';
|
||||
import { serverError, formatTime } from '@/utils/maintainer';
|
||||
|
||||
export default {
|
||||
name: "RecommendResourceAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
|
||||
$('.datetime').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#beginTime").datetimepicker({
|
||||
minView: "month",
|
||||
language: 'zh-CN',
|
||||
todayBtn: 1,
|
||||
autoclose: 1
|
||||
}).on("changeDate", function (event) {
|
||||
$("#endTime").datetimepicker('setStartDate', event.date);
|
||||
});
|
||||
|
||||
$("#endTime").datetimepicker({
|
||||
minView: "month",
|
||||
language: 'zh-CN',
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
useCurrent: false
|
||||
}).on("changeDate", function (event) {
|
||||
$("#beginTime").datetimepicker('setEndDate', event.date);
|
||||
});
|
||||
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'id', title: '序号', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'resourceA',
|
||||
title: 'A',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
formatter: function (val) {
|
||||
return pardeResourceType(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'resourceB',
|
||||
title: 'B',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
formatter: function (val) {
|
||||
return pardeResourceType(val);
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'beginTime', title: '开始时间', align: 'center', valign: 'middle', width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'endTime', title: '结束时间', align: 'center', valign: 'middle', width: '10%',
|
||||
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: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (row.isDefault) return '';
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
|
||||
' <button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
|
||||
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: "-",
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 10,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageNum: params.pageNumber,
|
||||
pageSize: params.pageSize
|
||||
};
|
||||
return param;
|
||||
},
|
||||
ajax: function (request) { //使用ajax请求
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: '/admin/home/resource/list.action',
|
||||
contentType: 'application/json;charset=utf-8',
|
||||
dataType: 'json',
|
||||
data: request.data,
|
||||
success: function (res) {
|
||||
apiResult(res);
|
||||
request.success({
|
||||
rows: res.data.rows,
|
||||
total: res.data.total,
|
||||
});
|
||||
},
|
||||
error: function (req) {
|
||||
serverError(req);
|
||||
}
|
||||
})
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
//新建标签
|
||||
$("#btnAdd").click(function () {
|
||||
clearModal();
|
||||
$("#boxA").hide();
|
||||
$("#boxB").hide();
|
||||
$("#roomTagModal").modal('show');
|
||||
});
|
||||
|
||||
$("#add").click(function () {
|
||||
var strategySeq = $("#id").val();
|
||||
var resourceA = $("#resourceA").val();
|
||||
var resourceB = $("#resourceB").val();
|
||||
|
||||
var iconA = $("#iconUrlA").val();
|
||||
var iconB = $("#iconUrlB").val();
|
||||
|
||||
var contentA = $("#contentA").val();
|
||||
var contentB = $("#contentB").val();
|
||||
|
||||
var beginTime = $("#beginTime").val();
|
||||
var endTime = $("#endTime").val();
|
||||
|
||||
if (iconA == null || iconA == '') {
|
||||
$("#tipMsg").text("保存失败，请先上传图片！");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
|
||||
if (iconB == null || iconB == '') {
|
||||
$("#tipMsg").text("保存失败，请先上传图片！");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/home/resource/saveResource.action",
|
||||
data: {
|
||||
strategySeq: strategySeq,
|
||||
resourceA: resourceA,
|
||||
resourceB: resourceB,
|
||||
iconA: iconA,
|
||||
iconB: iconB,
|
||||
contentA: contentA,
|
||||
contentB: contentB,
|
||||
beginTime: beginTime,
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#roomTagModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#roomTagModal").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-edit', function () {
|
||||
var seq = $(this).attr("data-id");
|
||||
clearModal();
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/home/resource/getResourceByStrategySeq.action",
|
||||
data: { seq: seq },
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
var json = res.data;
|
||||
if (json) {
|
||||
$("#id").val(seq);
|
||||
$("#resourceA").val(json.resourceA);
|
||||
$("#resourceB").val(json.resourceB);
|
||||
|
||||
if (json.resourceA == 5 || json.resourceA == 6) {
|
||||
$("#contentA").val(json.contentA);
|
||||
$("#boxA").show();
|
||||
} else {
|
||||
$("#contentA").val('');
|
||||
$("#boxA").hide();
|
||||
}
|
||||
if (json.resourceB == 5 || json.resourceB == 6) {
|
||||
$("#contentB").val(json.contentB);
|
||||
$("#boxB").show();
|
||||
} else {
|
||||
$("#contentB").val('');
|
||||
$("#boxB").hide();
|
||||
}
|
||||
|
||||
$("#beginTime").val(formatTime(json.beginTime));
|
||||
$("#endTime").val(formatTime(json.endTime));
|
||||
|
||||
|
||||
$('#iconUrlA').val(json.iconA);
|
||||
$('#iconImgUrlA').attr('src', json.iconA);
|
||||
|
||||
$('#iconUrlB').val(json.iconB);
|
||||
$('#iconImgUrlB').attr('src', json.iconB);
|
||||
|
||||
// 打开编辑弹窗
|
||||
$("#roomTagModal").modal('show');
|
||||
$("#modalLabel").text("编辑房间标签");
|
||||
} else {
|
||||
$("#tipMsg").text("获取信息出错");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-remove', function () {
|
||||
var seq = $(this).attr("data-id");
|
||||
if (seq == 'undefined') {
|
||||
$("#tipMsg").text("id参数有误");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回，请谨慎操作！")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: "/admin/home/resource/deleteByStrategySeq.action",
|
||||
data: { seq: seq },
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败");
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function apiResult(json) {
|
||||
if (json.code == 200 && json.message == 'success') {
|
||||
return true;
|
||||
}
|
||||
$("#tipMsg").text("请求失败，错误信息：" + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
$('#iconBtnA').on('click', function () {
|
||||
if ($('#iconFileA').val() == '') {
|
||||
$('#tipMsg').text('上传图片为空');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
$.ajaxFileUpload({
|
||||
fileElementId: 'iconFileA', //需要上传的文件域的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) {
|
||||
$('#iconUrlA').val(json.path);
|
||||
$('#iconImgUrlA').attr("src", json.path);
|
||||
|
||||
console.log(json.path);
|
||||
|
||||
} else {
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
},
|
||||
error: function (data, status, e) { //提交失败自动执行的处理函数。
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$('#iconBtnB').on('click', function () {
|
||||
if ($('#iconFileB').val() == '') {
|
||||
$('#tipMsg').text('上传图片为空');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
$.ajaxFileUpload({
|
||||
fileElementId: 'iconFileB', //需要上传的文件域的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) {
|
||||
$('#iconUrlB').val(json.path);
|
||||
$('#iconImgUrlB').attr("src", json.path);
|
||||
|
||||
console.log(json.path);
|
||||
|
||||
} else {
|
||||
$("#tipMsg").text(json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
},
|
||||
error: function (data, status, e) { //提交失败自动执行的处理函数。
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#resourceA").change(function () {
|
||||
var optVal = $(this).val();
|
||||
if (optVal != undefined && optVal == 5) {
|
||||
$('#contentA').val('');
|
||||
$('#contentLabA').html('网址链接<font color="red">*</font>:');
|
||||
|
||||
$("#boxA").show();
|
||||
} else if (optVal != undefined && optVal == 6) {
|
||||
$('#contentA').val('');
|
||||
$('#contentLabA').html('房主平台号<font color="red">*</font>:');
|
||||
$("#boxA").show();
|
||||
} else {
|
||||
$('#contentA').val('');
|
||||
$("#boxA").hide();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#resourceB").change(function () {
|
||||
var optVal = $(this).val();
|
||||
if (optVal != undefined && optVal == 5) {
|
||||
$('#contentB').val('');
|
||||
$('#contentLabB').html('网址链接<font color="red">*</font>:');
|
||||
|
||||
$("#boxB").show();
|
||||
} else if (optVal != undefined && optVal == 6) {
|
||||
$('#contentB').val('');
|
||||
$('#contentLabB').html('房主平台号<font color="red">*</font>:');
|
||||
$("#boxB").show();
|
||||
} else {
|
||||
$('#contentB').val('');
|
||||
$("#boxB").hide();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function pardeResourceType(val) {
|
||||
if (val == 1) {
|
||||
return '牌照房';
|
||||
} else if (val == 2) {
|
||||
return '相亲房';
|
||||
} else if (val == 3) {
|
||||
return 'PK房';
|
||||
} else if (val == 4) {
|
||||
return '游戏房';
|
||||
} else if (val == 5) {
|
||||
return 'H5';
|
||||
} else if (val == 6) {
|
||||
return '自定义房间';
|
||||
} else if (val == 7) {
|
||||
return '个播房';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function clearModal() {
|
||||
$("#id").val('');
|
||||
|
||||
$('#iconUrlA').val('');
|
||||
$('#iconImgUrlA').attr('src', '');
|
||||
$('#iconFileA').val('');
|
||||
|
||||
$('#iconUrlB').val('');
|
||||
$('#iconImgUrlB').attr('src', '');
|
||||
$('#iconFileB').val('');
|
||||
|
||||
$('#contentA').val('');
|
||||
$('#contentB').val('');
|
||||
|
||||
|
||||
$('#resourceA').val('');
|
||||
$('#resourceB').val('');
|
||||
|
||||
$('#beginTime').val('');
|
||||
$('#endTime').val('');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
338
src/views/firstpage/RecommendRoomAdminView.vue
Normal file
338
src/views/firstpage/RecommendRoomAdminView.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<label for="erban_no" class="qry_col control-label">平台号:</label>
|
||||
<div class="col-sm-2"><input type="text" class="form-control" name="erbanNo" id="erban_no"></div>
|
||||
|
||||
<label for="label_type" class="qry_col control-label">标签分类:</label>
|
||||
<div class="col-sm-2"><select name="status" id="label_type" class="form-control"
|
||||
data-btn-class="btn-warning">
|
||||
<option value="" selected="selected">全部</option>
|
||||
<option value="1">男</option>
|
||||
<option value="2">女</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label for="status" class="qry_col control-label">状态:</label>
|
||||
<div class="col-sm-2"><select name="status" id="status" class="form-control"
|
||||
data-btn-class="btn-warning">
|
||||
<option value="" selected="selected">全部</option>
|
||||
<option value="1">待推荐</option>
|
||||
<option value="2">推荐中</option>
|
||||
<option value="3">已失效</option>
|
||||
</select></div>
|
||||
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<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-plus"></i>增加房间
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="recommendModal" 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" id="addForm">
|
||||
<div class="form-group">
|
||||
<label for="erbanNo" class="col-sm-2 control-label">平台号:</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control validate[required]" name="erbanNo" id="erbanNo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="labelType" class="col-sm-2 control-label">标签分类：</label>
|
||||
<div class="col-sm-10">
|
||||
<select name="labelType" class="form-control" id="labelType">
|
||||
<option value="1">男</option>
|
||||
<option value="2">女</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="seqNo" class="col-sm-2 control-label">排序</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control validate[required]" name="seqNo" id="seqNo">
|
||||
</div>
|
||||
<span style="padding-left: 120px">*必填!数字小的排前面，相同推荐时间内不可重复</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="startTime" class="col-sm-2 control-label">开始时间</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="startTime" type="date" name="startTime"
|
||||
class="form-control validate[required]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="endTime" class="col-sm-2 control-label">结束时间</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="endTime" type="date" name="endTime"
|
||||
class="form-control validate[required]">
|
||||
</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';
|
||||
|
||||
export default {
|
||||
name: "RecommendRoomAdminView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'roomUid', title: '房主uid', align: 'center', width: '10%' },
|
||||
{ field: 'erbanNo', title: '平台号', align: 'center', width: '10%' },
|
||||
{ field: 'roomTitle', title: '房间标题', align: 'center', width: '15%' },
|
||||
{
|
||||
field: 'labelType', title: '标签分类', align: 'center', valign: 'middle', width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == 1) {
|
||||
return '男';
|
||||
} else if (val == 2) {
|
||||
return '女';
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status', title: '列表状态', align: 'center', valign: 'middle', width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == 1) {
|
||||
return '待推荐';
|
||||
} else if (val == 2) {
|
||||
return '推荐中';
|
||||
} else {
|
||||
return '已失效';
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
{ field: 'seqNo', title: '排序', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'startTime', title: '上线时间', align: 'center', valign: 'middle', width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'endTime', title: '下线时间', align: 'center', valign: 'middle', width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'id',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (row.status != 3) {
|
||||
return '<button class="btn btn-sm btn-success opt-remove" data-id=' + val + '>' +
|
||||
'<i class="glyphicon glyphicon-remove"></i>下线</button>';
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageNum: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
erbanNo: $('#erban_no').val(),
|
||||
status: $('#status').val(),
|
||||
labelType: $('#label_type').val()
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/firstpage/room/recommend/list.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
var chargeStart = $('#startTime').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true,
|
||||
startDate: new Date()
|
||||
});
|
||||
|
||||
var chargeEnd = $('#endTime').datetimepicker({
|
||||
format: 'yyyy-mm-dd hh:ii:00',
|
||||
autoclose: true,
|
||||
startDate: new Date()
|
||||
});
|
||||
|
||||
//新建标题
|
||||
$("#btnAdd").click(function () {
|
||||
$("#erbanNo").val("");
|
||||
$("#seqNo").val("");
|
||||
$("#startTime").val("");
|
||||
$("#endTime").val("");
|
||||
$("#recommendModal").modal('show');
|
||||
});
|
||||
|
||||
$("#add").click(function () {
|
||||
var erbanNo = $("#erbanNo").val();
|
||||
var seqNo = $("#seqNo").val();
|
||||
var labelType = $("#labelType").val();
|
||||
|
||||
var startTime = $("#startTime").val();
|
||||
var endTime = $("#endTime").val();
|
||||
if (seqNo <= 0) {
|
||||
$("#tipMsg").text("请填写合理的排序位置");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (endTime <= new Date().format('yyyy-MM-dd hh:mm:ss') || endTime <= startTime) {
|
||||
$("#tipMsg").text("请选择合理的结束时间");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/firstpage/room/recommend/add.action",
|
||||
data: {
|
||||
erbanNo: erbanNo,
|
||||
seqNo: seqNo,
|
||||
labelType: labelType,
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.code == 200) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#recommendModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败，错误信息：" + json.data);
|
||||
$("#tipModal").modal('show');
|
||||
//TableHelper.doRefresh("#table");
|
||||
// $("#recommendModal").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-remove', function () {
|
||||
var id = $(this).attr("data-id");
|
||||
if (id == 'undefined') {
|
||||
$("#tipMsg").text("id参数有误");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
if (confirm("你确认下线该房间吗？")) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: "/admin/firstpage/room/recommend/offline.action",
|
||||
data: { id: id },
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log(json)
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("下线成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("下线失败，错误信息：" + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qry_col {
|
||||
float: left;
|
||||
}</style>
|
||||
178
src/views/floating/FloatingScreenView.vue
Normal file
178
src/views/floating/FloatingScreenView.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<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">
|
||||
<div class="col-sm-12">
|
||||
<button id="btnAdd" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus-sign"></i>新增
|
||||
</button>
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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">H5活动通用飘屏配置</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal">
|
||||
<input type="hidden" name="id" id="id" />
|
||||
<div class="form-group">
|
||||
<label for="fromErbanNo" class="col-sm-3 control-label">Peko号（非必填）：</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="fromErbanNo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="type" class="col-sm-3 control-label">表示形式：</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="type" id="type" class="form-control validate[required]">
|
||||
<option value="0">房间静态飘屏</option>
|
||||
<option value="1">全服动态飘屏</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="floatingContent" class="col-sm-3 control-label">发送内容：</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="floatingContent">
|
||||
</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>
|
||||
|
||||
<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">提示信息</h4>
|
||||
</div>
|
||||
<div class="modal-body" id="tipMsg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
export default {
|
||||
name: "FloatingScreenView.vue",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'fromErbanNo', title: 'Peko号', align: 'center', width: '5%' },
|
||||
{ field: 'content', title: '发送内容', align: 'center', width: '5%' },
|
||||
{ field: 'type', title: '表示形式', align: 'center', width: '5%' },
|
||||
{ field: 'createTime', title: '创建时间', align: 'center', width: '5%' },
|
||||
],
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/floating/screen/page',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
$('#btnAdd').on('click', function () {
|
||||
$("#fromErbanNo").val('');
|
||||
$("#type").val('');
|
||||
$("#floatingContent").val('');
|
||||
$("#editModal").modal('show');
|
||||
});
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
$("#save").click(function () {
|
||||
const msg = '确定要保存吗？';
|
||||
if (confirm(msg)) {
|
||||
var data = {
|
||||
erbanNo: $('#erbanNo').val(),
|
||||
type: $('#type').val(),
|
||||
content: $('#floatingContent').val(),
|
||||
};
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/floating/screen/save",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true' || json.code == 200) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#editModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
$("#editModal").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
486
src/views/flowteam/FlowTeamGroupManageView.vue
Normal file
486
src/views/flowteam/FlowTeamGroupManageView.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<label for="groupName" class="col-sm-4 control-label">团队名称:</label>
|
||||
<div class="col-sm-8"><input type="text" class="form-control" name="groupName" id="groupName"
|
||||
placeholder="输入团队名称"></div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
<button id="addBtn" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus"></i>新增团队
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="addGroupModal" 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" id="addForm">
|
||||
<input type="hidden" name="groupId" id="groupId" />
|
||||
<div class="form-group">
|
||||
<label for="modal_groupName" class="col-sm-3 control-label">团队名称</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="groupName"
|
||||
id="modal_groupName">
|
||||
</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>
|
||||
|
||||
<div class="modal fade" id="teamInfoModal" 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="teamModalTitle"></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="teamDetailTable"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="createTeam">创建小组</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade" id="addTeamModal" 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="addTeamModalLabel">创建/编辑小组</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="addTeamAddForm">
|
||||
<input type="hidden" name="teamId" id="teamId" />
|
||||
<input type="hidden" name="groupId" id="add-team-modal-groupId" />
|
||||
<div class="form-group">
|
||||
<label for="add-team-modal-groupName" class="col-sm-3 control-label">团队名称</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" disabled="disabled" class="form-control" name="groupName"
|
||||
id="add-team-modal-groupName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="add-team-modal-teamName" class="col-sm-3 control-label">小组名称</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="teamName"
|
||||
id="add-team-modal-teamName">
|
||||
</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="saveTeam">确定</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
let groupName = '';
|
||||
let modal_groupId = '';
|
||||
|
||||
export default {
|
||||
name: "FlowTeamGroupManageView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'groupId', title: '团队ID', align: 'center', width: '5%' },
|
||||
{ field: 'groupName', title: '团队名称', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'groupLeaders', title: '团长', align: 'center', width: '5%',
|
||||
formatter: function (val) {
|
||||
if (val == null || val.length == 0) {
|
||||
return '暂未设置'
|
||||
} else {
|
||||
const options = [];
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
const leader = val[i];
|
||||
options.push(leader.memberName + ' ' + leader.memberPhone + ' <br>')
|
||||
}
|
||||
return options.join('');
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'teamNum', title: '小组数量', align: 'center', width: '5%' },
|
||||
{ field: 'memberNum', title: '有效成员数量', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'status', title: '当前状态', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == 1) {
|
||||
return `<span class="text-success">有效</span>`;
|
||||
} else {
|
||||
return `<span style="color: grey">无效</span>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'createTime', title: '团队创建时间', align: 'center', width: '5%',
|
||||
formatter: function (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'memberId',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
let statusChangeBtn = '<button class="btn btn-sm btn-success opt-change-status" data-idx=' + row.groupId + ' data-new-status=' + 1 + '>设为生效</button>';
|
||||
if (row.status == 1) {
|
||||
statusChangeBtn = '<button class="btn btn-sm btn-primary opt-change-status" data-idx=' + row.groupId + ' data-new-status=' + 0 + '>设为无效</button>';
|
||||
}
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" data-idx=' + row.groupId + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 编辑基本信息</button>' +
|
||||
'<button class="btn btn-sm btn-success opt-show-team-detail" data-idx=' + row.groupId + '><i class="glyphicon glyphicon-edit"></i>编辑小组信息</button>'
|
||||
+ statusChangeBtn;
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
uniqueId: 'groupId',
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
groupName: $('#groupName').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/flowteam/group/listGroupByPage',
|
||||
onLoadSuccess: function (data) { //加载成功时执行
|
||||
console.log("load success", data);
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
//新建标签
|
||||
$("#addBtn").click(function () {
|
||||
$('#groupId').val(''),
|
||||
$('#modal_groupName').val(''),
|
||||
$("#addGroupModal").modal('show');
|
||||
});
|
||||
|
||||
//编辑成员信息
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
const groupId = $(this).attr('data-idx');
|
||||
var group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
|
||||
console.log("group ========", group);
|
||||
$('#groupId').val(group.groupId),
|
||||
$('#modal_groupName').val(group.groupName),
|
||||
$("#addGroupModal").modal('show');
|
||||
});
|
||||
|
||||
// 新增
|
||||
$("#save").click(function () {
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
const requestParam = {
|
||||
groupId: $('#groupId').val(),
|
||||
groupName: $('#modal_groupName').val(),
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/saveOrUpdateGroup",
|
||||
data: requestParam,
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#addGroupModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('#table').on('click', '.opt-change-status', function () {
|
||||
const groupId = $(this).attr('data-idx');
|
||||
const newStatus = $(this).attr('data-new-status');
|
||||
var group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
|
||||
let action = ""
|
||||
if (newStatus == 0) {
|
||||
action = `确定将“${group.groupName}”设为无效?`
|
||||
} else if (newStatus == 1) {
|
||||
action = `确定将“${group.groupName}”设为有效?`
|
||||
} else if (newStatus == -1) {
|
||||
action = `确定删除“${group.groupName}”?`
|
||||
}
|
||||
if (confirm(action)) {
|
||||
const requestParam = {
|
||||
groupId: groupId,
|
||||
status: newStatus
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/changeGroupStatus",
|
||||
data: requestParam,
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("修改成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-show-team-detail', function () {
|
||||
const groupId = $(this).attr('data-idx');
|
||||
const group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
|
||||
console.debug('---row', group);
|
||||
groupName = group.groupName;
|
||||
modal_groupId = groupId
|
||||
$('#teamInfoModal #teamModalTitle').text(`【${group.groupName}】小组管理 小组个数：${group.teamNum}`)
|
||||
$('#teamDetailTable').bootstrapTable('destroy');
|
||||
$('#teamDetailTable').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'teamId', title: '小组ID', align: 'center', width: '5%' },
|
||||
{ field: 'teamName', title: '小组名称', align: 'center', width: '5%', },
|
||||
{
|
||||
field: 'teamLeaders', title: '组长', align: 'center', width: '5%',
|
||||
formatter: function (val) {
|
||||
if (val == null || val.length == 0) {
|
||||
return '暂未设置'
|
||||
} else {
|
||||
const options = [];
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
const leader = val[i];
|
||||
options.push(leader.memberName + ' ' + leader.memberPhone + ' <br>')
|
||||
}
|
||||
return options.join('');
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'memberNum', title: '有效成员人数', align: 'center', width: '5%', },
|
||||
{
|
||||
field: 'tmp',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" ' +
|
||||
'data-idx=' + row.teamId + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 编辑基本信息</button>' +
|
||||
'<button class="btn btn-sm btn-success opt-del-team" data-idx=' + row.teamId + '><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
uniqueId: 'teamId',
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
groupId: groupId
|
||||
};
|
||||
return param;
|
||||
},
|
||||
url: '/admin/flowteam/group/listGroupTeamByPage',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
$("#teamInfoModal").modal('show');
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 创建小组
|
||||
$("#createTeam").click(function () {
|
||||
$('#teamId').val(''),
|
||||
$('#modal_groupName').val(''),
|
||||
$('#add-team-modal-groupName').val(groupName),
|
||||
$('#add-team-modal-groupId').val(modal_groupId),
|
||||
$('#add-team-modal-teamName').val(''),
|
||||
$("#addTeamModal").modal('show');
|
||||
});
|
||||
|
||||
//编辑小组信息
|
||||
$('#teamDetailTable').on('click', '.opt-edit', function () {
|
||||
const teamId = $(this).attr('data-idx');
|
||||
var team = $('#teamDetailTable').bootstrapTable('getRowByUniqueId', teamId);
|
||||
console.log("group ========", team);
|
||||
$('#teamId').val(teamId),
|
||||
$('#add-team-modal-groupName').val(groupName),
|
||||
$('#add-team-modal-groupId').val(modal_groupId),
|
||||
$('#add-team-modal-teamName').val(team.teamName),
|
||||
$("#addTeamModal").modal('show');
|
||||
});
|
||||
|
||||
// 新增编辑小组
|
||||
$("#saveTeam").click(function () {
|
||||
if ($("#addTeamAddForm").validationEngine('validate')) {
|
||||
const requestParam = {
|
||||
groupId: $('#add-team-modal-groupId').val(),
|
||||
teamName: $('#add-team-modal-teamName').val(),
|
||||
teamId: $('#teamId').val()
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/saveOrUpdateTeam",
|
||||
data: requestParam,
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#teamDetailTable");
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#addTeamModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// 删除小组
|
||||
$('#teamDetailTable').on('click', '.opt-del-team', function () {
|
||||
const teamId = $(this).attr('data-idx');
|
||||
var team = $('#teamDetailTable').bootstrapTable('getRowByUniqueId', teamId);
|
||||
if (confirm('删除后该小组将永久解散并删除数据，无法恢复！！是否确认删除？')) {
|
||||
const requestParam = {
|
||||
teamId: teamId
|
||||
}
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/delTeam",
|
||||
data: requestParam,
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("删除成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#teamDetailTable");
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("删除失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$('#addTeamModal').on("hidden.bs.modal", function () {
|
||||
$(document.body).addClass('modal-open');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>#teamInfoModal .modal-dialog {
|
||||
width: 60%;
|
||||
height: 50%;
|
||||
}</style>
|
||||
403
src/views/flowteam/FlowTeamInvitecodeManageView.vue
Normal file
403
src/views/flowteam/FlowTeamInvitecodeManageView.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<label for="erbanNo" class="col-sm-4 control-label">用户ID:</label>
|
||||
<div class="col-sm-8"><input type="text" class="form-control" name="erbanNo" id="erbanNo"
|
||||
placeholder="输入用户ID"></div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="modal fade" id="changeInviteModal" 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="addTeamModalLabel">换绑邀请码</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-horizontal" id="changeInviteForm">
|
||||
<input type="hidden" name="uid" id="modal_uid" />
|
||||
<div class="form-group">
|
||||
<label for="query-groupSelector" class="col-sm-3 control-label">所属团队</label>
|
||||
<div class="col-sm-9">
|
||||
<select onchange="initTeamSelector(this.options[this.selectedIndex].value)"
|
||||
id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="query-teamSelector" class="col-sm-3 control-label">所属小组</label>
|
||||
<div class="col-sm-9">
|
||||
<select id="query-teamSelector"
|
||||
onchange="initMemberSelector(this.options[this.selectedIndex].value)"
|
||||
class="form-control" data-btn-class="btn-warning"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="query-memberSelector" class="col-sm-3 control-label">成员名称</label>
|
||||
<div class="col-sm-9">
|
||||
<select id="query-memberSelector"
|
||||
onchange="initInvitecodeSelector(this.options[this.selectedIndex].value)"
|
||||
class="form-control" data-btn-class="btn-warning"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="query-invitecodeSelector" class="col-sm-3 control-label">邀请码</label>
|
||||
<div class="col-sm-9">
|
||||
<select id="query-invitecodeSelector" class="form-control"
|
||||
data-btn-class="btn-warning"></select>
|
||||
</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="saveChange">确定</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
|
||||
const TEAM_ROLE = {
|
||||
"1": '组员',
|
||||
"2": '组长',
|
||||
"3": '团长',
|
||||
};
|
||||
let flowTeams;
|
||||
let flowTeamsMap = {};
|
||||
|
||||
let flowGroups = [];
|
||||
let flowGroupsMap = {};
|
||||
let memberList = [];
|
||||
let groupName = '';
|
||||
export default {
|
||||
name: "FlowTeamInvitecodeManageView",
|
||||
setup() {
|
||||
// 初始化小组选择器
|
||||
function initTeamSelector(groupId) {
|
||||
const options = [];
|
||||
options.push('<option value="">选择小组</option>')
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeamByGroupId.action",
|
||||
data: {
|
||||
groupId: groupId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
||||
}
|
||||
$('#query-teamSelector').html(options.join(' '));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 初始化成员选择器
|
||||
function initMemberSelector(teamId) {
|
||||
const options = [];
|
||||
options.push('<option value="">选择成员</option>')
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listMember",
|
||||
data: {
|
||||
teamId: teamId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + flowTeam.memberId + '">' + flowTeam.memberName + '</option>')
|
||||
}
|
||||
$('#query-memberSelector').html(options.join(' '));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 初始化邀请码选择器
|
||||
function initInvitecodeSelector(memberId) {
|
||||
const options = [];
|
||||
options.push('<option value="">选择邀请码</option>')
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listMemberInviteCode",
|
||||
data: {
|
||||
memberId: memberId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option >' + flowTeam.inviteCode + '</option>')
|
||||
}
|
||||
$('#query-invitecodeSelector').html(options.join(' '));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
window.initTeamSelector = initTeamSelector;
|
||||
window.initMemberSelector = initMemberSelector;
|
||||
window.initInvitecodeSelector = initInvitecodeSelector;
|
||||
return {
|
||||
initTeamSelector,
|
||||
initMemberSelector,
|
||||
initInvitecodeSelector
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeam.action",
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
if (json.data) {
|
||||
flowTeams = json.data;
|
||||
for (let i = 0; i < flowTeams.length; i++) {
|
||||
const flowTeam = flowTeams[i];
|
||||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||||
}
|
||||
} else {
|
||||
flowTeams = [];
|
||||
flowTeamsMap = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/listGroupByPage",
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log("init group success", json);
|
||||
flowGroups = json.rows;
|
||||
if (flowGroups.length > 0) {
|
||||
for (let i = 0; i < flowGroups.length; i++) {
|
||||
const flowGroup = flowGroups[i];
|
||||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
initGroupSelector();
|
||||
$(function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'uid', title: 'uid', align: 'center', visible: false, width: '5%' },
|
||||
{ field: 'nick', title: '被邀请用户昵称', align: 'center', width: '5%' },
|
||||
{ field: 'groupName', title: '所属团队', align: 'center', width: '5%' },
|
||||
{ field: 'teamName', title: '所属小组', align: 'center', width: '5%', },
|
||||
{ field: 'memberName', title: '所属成员', align: 'center', width: '5%' },
|
||||
{ field: 'inviteCode', title: '所属邀请码', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'inviteTime', title: '邀请时间', align: 'center', width: '5%',
|
||||
formatter: function (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'memberId',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
return '<button id="btn-del" name="btnEdit" class="btn btn-sm btn-primary opt-del" data-idx=' + row.uid + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i>解绑</button>' +
|
||||
'<button class="btn btn-sm btn-success opt-change" data-idx=' + row.uid + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i>换绑</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
erbanNo: $('#erbanNo').val(),
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/flowteam/group/listFlowTeamInfoWithUser',
|
||||
onLoadSuccess: function (data) { //加载成功时执行
|
||||
console.log("load success", data);
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
//新建标签
|
||||
$("#addBtn").click(function () {
|
||||
$('#groupId').val(''),
|
||||
$('#modal_groupName').val(''),
|
||||
$("#addGroupModal").modal('show');
|
||||
});
|
||||
|
||||
// 换绑
|
||||
$('#table').on('click', '.opt-change', function () {
|
||||
const uid = $(this).attr('data-idx');
|
||||
$('#modal_uid').val(uid);
|
||||
$('#query-groupSelector').val('');
|
||||
$('#query-teamSelector').val('');
|
||||
$('#query-memberSelector').val('');
|
||||
$('#query-invitecodeSelector').val('');
|
||||
$("#changeInviteModal").modal('show');
|
||||
});
|
||||
|
||||
$('#saveChange').click(function () {
|
||||
const requestParam = {
|
||||
uid: $('#modal_uid').val(),
|
||||
groupId: $('#query-groupSelector').val(),
|
||||
teamId: $('#query-teamSelector').val(),
|
||||
memberId: $('#query-memberSelector').val(),
|
||||
inviteCode: $('#query-invitecodeSelector').val(),
|
||||
optType: 1
|
||||
};
|
||||
console.log('requestParam', JSON.stringify(requestParam))
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/flowteam/group/updateFlowTeamInviteInfo",
|
||||
data: JSON.stringify(requestParam),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("换绑成功");
|
||||
$("#tipModal").modal('show');
|
||||
$("#changeInviteModal").modal('hide');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("换绑失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 解绑
|
||||
$('#table').on('click', '.opt-del', function () {
|
||||
const uid = $(this).attr('data-idx');
|
||||
if (confirm('确认要解绑该邀请码吗？（注：该操作不可恢复！！）')) {
|
||||
const requestParam = {
|
||||
uid: uid,
|
||||
optType: 2,
|
||||
};
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/flowteam/group/updateFlowTeamInviteInfo",
|
||||
data: JSON.stringify(requestParam),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("换绑成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("换绑失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// 初始化团队选择器
|
||||
function initGroupSelector() {
|
||||
const options = [];
|
||||
options.push('<option value="">选择团队</option>')
|
||||
for (var i = 0; i < flowGroups.length; i++) {
|
||||
var item = flowGroups[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
||||
}
|
||||
$("#query-groupSelector").html(options.join(' '));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#teamInfoModal .modal-dialog {
|
||||
width: 60%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
473
src/views/flowteam/FlowTeamMemberAdminView.vue
Normal file
473
src/views/flowteam/FlowTeamMemberAdminView.vue
Normal file
@@ -0,0 +1,473 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<div class="col-sm-12">
|
||||
<label for="groupSelector" class="col-sm-1 control-label">选择团队:</label>
|
||||
<div class="col-sm-3">
|
||||
<select name="query-teamSelector" id="groupSelector"
|
||||
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)"
|
||||
class="form-control group-selector" data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
<label for="query-teamSelector" class="col-sm-1 control-label">选择小组:</label>
|
||||
<div class="col-sm-3">
|
||||
<select name="teamSelector" id="query-teamSelector" class="form-control"
|
||||
data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<label for="memberName" class="col-sm-1 control-label">姓名:</label>
|
||||
<div class="col-sm-3"><input type="text" class="form-control" name="memberName" id="memberName"
|
||||
placeholder="输入成员姓名"></div>
|
||||
<label for="memberPhone" class="col-sm-1 control-label">手机号:</label>
|
||||
<div class="col-sm-3"><input type="text" class="form-control" name="memberPhone" id="memberPhone"
|
||||
placeholder="输入成员手机号"></div>
|
||||
<label for="inviteCode" class="col-sm-1 control-label">邀请码:</label>
|
||||
<div class="col-sm-3"><input type="text" class="form-control" name="inviteCode" id="inviteCode"
|
||||
placeholder="输入邀请码"></div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
<button id="addBtn" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-plus"></i>新增成员
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="addClanModal" 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" id="addForm">
|
||||
<input type="hidden" name="editMemberId" id="editMemberId" />
|
||||
<div class="form-group">
|
||||
<label for="editMemberName" class="col-sm-3 control-label">姓名</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control validate[required]" name="editMemberName"
|
||||
id="editMemberName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editMemberPhone" class="col-sm-3 control-label">电话</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" name="editMemberPhone" id="editMemberPhone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="teamRoleSelector" class="col-sm-3 control-label">职务</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="teamRoleSelector" id="teamRoleSelector">
|
||||
<option value="1">组员</option>
|
||||
<option value="2">组长</option>
|
||||
<option value="3">团长</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="modal-groupSelector" class="col-sm-3 control-label">所属团队</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="modal-teamSelector" id="modal-groupSelector"
|
||||
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="modal-teamSelector" class="col-sm-3 control-label">所属小组</label>
|
||||
<div class="col-sm-9">
|
||||
<select name="modal-teamSelector" id="modal-teamSelector">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="editInviteCodes" class="col-sm-3 control-label">邀请码</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="input-sm form-control datetime" name="editInviteCodes"
|
||||
id="editInviteCodes" placeholder="用,隔开填多个">
|
||||
</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';
|
||||
|
||||
const TEAM_ROLE = {
|
||||
"1": '组员',
|
||||
"2": '组长',
|
||||
"3": '团长',
|
||||
};
|
||||
let flowTeams;
|
||||
let flowTeamsMap = {};
|
||||
|
||||
let flowGroups = [];
|
||||
let flowGroupsMap = {};
|
||||
let memberList = [];
|
||||
let editMemberInfo;
|
||||
export default {
|
||||
name: "FlowTeamMemberAdminView",
|
||||
setup() {
|
||||
|
||||
// 初始化小组选择器
|
||||
function initTeamSelector(groupId, childrenSelectId, isEdit) {
|
||||
const options = [];
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeamByGroupId.action",
|
||||
data: {
|
||||
groupId: groupId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
||||
}
|
||||
if (options.length == 0) {
|
||||
options.push('<option value="">暂无数据</option>')
|
||||
}
|
||||
$('#' + `${childrenSelectId}`).html(options.join(' '));
|
||||
if (isEdit) {
|
||||
initEditModalData();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
window.initTeamSelector = initTeamSelector;
|
||||
return {
|
||||
initTeamSelector
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
|
||||
$(function () {
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeam.action",
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
if (json.data) {
|
||||
flowTeams = json.data;
|
||||
for (let i = 0; i < flowTeams.length; i++) {
|
||||
const flowTeam = flowTeams[i];
|
||||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||||
}
|
||||
} else {
|
||||
flowTeams = [];
|
||||
flowTeamsMap = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/listGroupByPage",
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log("init group success", json);
|
||||
flowGroups = json.rows;
|
||||
if (flowGroups.length > 0) {
|
||||
for (let i = 0; i < flowGroups.length; i++) {
|
||||
const flowGroup = flowGroups[i];
|
||||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化团队选择器
|
||||
function initGroupSelector() {
|
||||
const options = [];
|
||||
options.push('<option value="">选择团队</option>')
|
||||
$.get('/admin/flowteam/group/listGroupByPage',
|
||||
{
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
}, function (res) {
|
||||
if (res) {
|
||||
for (let i = 0; i < res.rows.length; i++) {
|
||||
var item = res.rows[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
||||
}
|
||||
$("#groupSelector").html(options.join(' '));
|
||||
$("#modal-groupSelector").html(options.join(' '));
|
||||
}
|
||||
});
|
||||
}
|
||||
initGroupSelector();
|
||||
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'memberName', title: '姓名', align: 'center', width: '5%' },
|
||||
{ field: 'memberPhone', title: '电话', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'groupId', title: '所属团队', align: 'center', width: '5%',
|
||||
formatter: function (val) {
|
||||
const group = flowGroupsMap[val];
|
||||
if (group) {
|
||||
return group.groupName;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'teamId', title: '所属小组', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const team = flowTeamsMap[val];
|
||||
if (team) {
|
||||
return team.teamName;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'teamRole', title: '职务', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const teamRole = TEAM_ROLE[val];
|
||||
if (teamRole) {
|
||||
return teamRole;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'memberStatus', title: '当前状态', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == 1) {
|
||||
return `<span class="text-success">生效</span>`;
|
||||
} else {
|
||||
return `<span style="color: grey">无效</span>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'inviteCodes', title: '邀请码', align: 'center', width: '5%' },
|
||||
{
|
||||
field: 'memberId',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
let statusChangeBtn = '<button class="btn btn-sm btn-success opt-change-status" data-idx=' + index + ' data-new-status=' + 1 + '>设为生效</button>';
|
||||
if (row.memberStatus == 1) {
|
||||
statusChangeBtn = '<button class="btn btn-sm btn-primary opt-change-status" data-idx=' + index + ' data-new-status=' + 0 + '>设为无效</button>';
|
||||
}
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" data-idx=' + index + '>' +
|
||||
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
|
||||
statusChangeBtn;
|
||||
//statusChangeBtn +
|
||||
//'<button class="btn btn-sm btn-danger opt-change-status" data-idx=' + index + ' data-new-status="-1"><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
pageNumber: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
memberName: $('#memberName').val(),
|
||||
memberPhone: $('#memberPhone').val(),
|
||||
inviteCode: $('#inviteCode').val(),
|
||||
teamId: $('#query-teamSelector').val(),
|
||||
groupId: $('#groupSelector').val()
|
||||
};
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/flowTeam/listFlowMembersByPage.action',
|
||||
onLoadSuccess: function (data) { //加载成功时执行
|
||||
console.log("load success", data);
|
||||
memberList = data.rows;
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//新建标签
|
||||
$("#addBtn").click(function () {
|
||||
$('#modal-groupSelector').attr('disabled', false);
|
||||
$('#modal-groupSelector').val('');
|
||||
let teamSelector = document.getElementById("modal-teamSelector");
|
||||
$('#modal-teamSelector').attr('disabled', false);
|
||||
teamSelector.options.length = 0;
|
||||
$('#editMemberId').val('');
|
||||
$('#editMemberName').val('');
|
||||
$('#editMemberPhone').val('');
|
||||
$('#teamRoleSelector').val('1');
|
||||
$('#editInviteCodes').val('');
|
||||
$("#addClanModal").modal('show');
|
||||
});
|
||||
|
||||
//编辑成员信息
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
const idx = $(this).attr('data-idx');
|
||||
editMemberInfo = memberList[idx];
|
||||
console.log("memberInfo=======", editMemberInfo)
|
||||
window.initTeamSelector(editMemberInfo.groupId, "modal-teamSelector", true)
|
||||
});
|
||||
|
||||
// 新增
|
||||
$("#save").click(function () {
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
const requestParam = {
|
||||
memberId: $('#editMemberId').val(),
|
||||
groupId: $('#modal-groupSelector').val(),
|
||||
teamId: $('#modal-teamSelector').val(),
|
||||
memberName: $('#editMemberName').val(),
|
||||
memberPhone: $('#editMemberPhone').val(),
|
||||
teamRole: $('#teamRoleSelector').val(),
|
||||
inviteCodes: $('#editInviteCodes').val(),
|
||||
}
|
||||
|
||||
console.debug('------requestParam', requestParam);
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/flowTeam/saveMember.action",
|
||||
data: JSON.stringify(requestParam),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#addClanModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('#table').on('click', '.opt-change-status', function () {
|
||||
const idx = $(this).attr('data-idx');
|
||||
const memberInfo = memberList[idx];
|
||||
console.debug('=======memberInfo', memberInfo);
|
||||
const memberId = memberInfo.memberId;
|
||||
const newStatus = $(this).attr('data-new-status');
|
||||
let action = ""
|
||||
if (newStatus == 0) {
|
||||
action = `确定将“${memberInfo.memberName}”设为无效?`
|
||||
} else if (newStatus == 1) {
|
||||
action = `确定将“${memberInfo.memberName}”设为有效?`
|
||||
} else if (newStatus == -1) {
|
||||
action = `确定删除“${memberInfo.memberName}”?`
|
||||
}
|
||||
if (confirm(action)) {
|
||||
const requestParam = {
|
||||
memberId: memberId,
|
||||
memberStatus: newStatus,
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/flowTeam/changeMemberStatus.action",
|
||||
data: JSON.stringify(requestParam),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("修改成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
} else {
|
||||
$("#tipMsg").text("修改失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
// 初始化编辑弹窗
|
||||
function initEditModalData() {
|
||||
$('#editMemberId').val(editMemberInfo.memberId),
|
||||
$('#modal-groupSelector').val(editMemberInfo.groupId),
|
||||
$('#modal-groupSelector').attr('disabled', true),
|
||||
$('#editMemberName').val(editMemberInfo.memberName),
|
||||
$('#editMemberPhone').val(editMemberInfo.memberPhone),
|
||||
$('#teamRoleSelector').val(editMemberInfo.teamRole),
|
||||
$('#modal-teamSelector').val(editMemberInfo.teamId),
|
||||
$('#modal-teamSelector').attr('disabled', true),
|
||||
$('#editInviteCodes').val(editMemberInfo.inviteCodes),
|
||||
$("#addClanModal").modal('show');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
358
src/views/flowteam/FlowTeamSettlementView.vue
Normal file
358
src/views/flowteam/FlowTeamSettlementView.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<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>
|
||||
<div id="toolbar">
|
||||
<form id="searchForm" action="/admin/flowteamSettlement/export" method="get" target="_blank">
|
||||
<div class="col-sm-12">
|
||||
<label for="query-groupSelector" class="col-sm-3 control-label">选择查询团队:</label>
|
||||
<div class="col-sm-3">
|
||||
<select name="query-teamSelector"
|
||||
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name)"
|
||||
id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
<label for="query-teamSelector" class="col-sm-3 control-label">选择查询小组:</label>
|
||||
<div class="col-sm-3">
|
||||
<select name="teamSelector" id="query-teamSelector" class="form-control"
|
||||
data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
<button id="btnExport" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-Export"></i>导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="table"></div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="teamDetailModal" 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="teamDetailModalTitle">分组明细</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<input type="text" id="queryErbanNo" placeholder="输入用户ID">
|
||||
</div>
|
||||
<button type="button" class="btn btn-default" id="searchTeamDetail">搜索</button>
|
||||
<button type="button" class="btn btn-primary" id="exportTeamDetail">导出</button>
|
||||
<div id="teamDetaillTable"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
const TEAM_ROLE = {
|
||||
"1": '组员',
|
||||
"2": '组长',
|
||||
"3": '团长',
|
||||
};
|
||||
let flowTeams;
|
||||
let flowTeamsMap = {};
|
||||
|
||||
let flowGroups = [];
|
||||
let flowGroupsMap = {};
|
||||
const groupTeamIds = [];
|
||||
export default {
|
||||
name: "FlowTeamSettlementView",
|
||||
setup() {
|
||||
// 初始化小组选择器
|
||||
function initTeamSelector(groupId, childrenSelectId) {
|
||||
const options = ['<option value="">全部</option>'];
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeamByGroupId.action",
|
||||
data: {
|
||||
groupId: groupId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
// 清空数组
|
||||
groupTeamIds.length = 0;
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
||||
groupTeamIds.push(flowTeam.teamId);
|
||||
}
|
||||
$('#' + `${childrenSelectId}`).html(options.join(' '));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
window.initTeamSelector = initTeamSelector;
|
||||
return {
|
||||
initTeamSelector
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeam.action",
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
if (json.data) {
|
||||
flowTeams = json.data;
|
||||
for (let i = 0; i < flowTeams.length; i++) {
|
||||
const flowTeam = flowTeams[i];
|
||||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||||
}
|
||||
} else {
|
||||
flowTeams = [];
|
||||
flowTeamsMap = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/listGroupByPage",
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log("init group success", json);
|
||||
flowGroups = json.rows;
|
||||
if (flowGroups.length > 0) {
|
||||
for (let i = 0; i < flowGroups.length; i++) {
|
||||
const flowGroup = flowGroups[i];
|
||||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let listQueryParams = {};
|
||||
let teamDetailQueryParams = {};
|
||||
// function initTeamSelector() {
|
||||
// const options = ['<option value="">请选择</option>'];
|
||||
// for(var i=0,len=flowTeams.length;i<len;i++){
|
||||
// var item = flowTeams[i];
|
||||
// //拼接成多个<option><option/>
|
||||
// options.push('<option value="'+item.teamId+'">'+item.teamName+'</option>')
|
||||
// }
|
||||
// $("#teamSelector").html(options.join(' '));
|
||||
// }
|
||||
//
|
||||
// initTeamSelector();
|
||||
|
||||
// 初始化团队选择器
|
||||
function initGroupSelector() {
|
||||
const options = [];
|
||||
options.push('<option value="">选择团队</option>')
|
||||
for (var i = 0; i < flowGroups.length; i++) {
|
||||
var item = flowGroups[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
||||
}
|
||||
$("#query-groupSelector").html(options.join(' '));
|
||||
}
|
||||
|
||||
initGroupSelector();
|
||||
|
||||
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'month', title: '时间', align: 'center', width: '5%' },
|
||||
{ field: 'newUserNum', title: '新增用户', align: 'center', width: '10%' },
|
||||
{ field: 'newUserChargeAmount', title: '当月新增充值', align: 'center', width: '10%', valign: 'center' },
|
||||
{ field: 'totalChargeAmount', title: '累计充值(美元)', align: 'center', width: '5%', },
|
||||
{ field: 'totalChargeUserNum', title: '累计充值人数', align: 'center', width: '5%', },
|
||||
{ field: 'totalChargeNum', title: '累计充值次数', align: 'center', width: '5%', },
|
||||
{
|
||||
field: 'month',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
const month = row.month;
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-team-detail" data-month=' + month + '>' +
|
||||
'查看明细</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
uniqueId: 'month',
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
const teamId = $('#query-teamSelector').val();
|
||||
var param = {
|
||||
groupId: $('#query-groupSelector').val(),
|
||||
teamId: teamId
|
||||
};
|
||||
listQueryParams = param;
|
||||
return param;
|
||||
},
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/flowteamSettlement/listTeamSettlementData.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
console.log("load success");
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
const groupId = $('#query-groupSelector').val();
|
||||
if (!groupId) {
|
||||
$("#tipMsg").text("请先选择需要查询的团队");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
TableHelper.doRefresh('#table');
|
||||
});
|
||||
|
||||
// 查询刷新
|
||||
$('#searchTeamDetail').on('click', function () {
|
||||
TableHelper.doRefresh('#teamDetaillTable');
|
||||
});
|
||||
// 获取某月详情
|
||||
$("#table").on("click", '.opt-show-team-detail', function () {
|
||||
const month = $(this).attr('data-month');
|
||||
const row = $('#table').bootstrapTable('getRowByUniqueId', month);
|
||||
console.log('groupTeamIds', groupTeamIds)
|
||||
let teamId = $('#query-teamSelector').val();
|
||||
if (!teamId) {
|
||||
teamId = groupTeamIds.join(",");
|
||||
const groupName = $('#query-groupSelector').find("option:selected").text();
|
||||
console.log('groupName', groupName)
|
||||
$('#teamDetailModal #teamDetailModalTitle').text(`${groupName}${row.month} 月累计充值明细`);
|
||||
} else {
|
||||
$('#teamDetailModal #teamDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${row.month} 月累计充值明细`)
|
||||
}
|
||||
console.debug('---row', row);
|
||||
$('#teamDetaillTable').bootstrapTable('destroy');
|
||||
$('#teamDetaillTable').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'erbanNo', title: '用户ID', align: 'center', width: '5%' },
|
||||
{ field: 'nick', title: '用户名称', align: 'center', width: '5%', },
|
||||
{ field: 'createTime', title: '新增日期', align: 'center', width: '5%', formatter: formatTime },
|
||||
{ field: 'inviteCode', title: '邀请码', align: 'center', width: '5%', },
|
||||
{ field: 'inviteUserNick', title: '引入人', align: 'center', width: '5%', },
|
||||
{ field: 'chargeTime', title: '充值时间', align: 'center', width: '5%', formatter: formatTime },
|
||||
{ field: 'amount', title: '充值金额（美元）', align: 'center', width: '5%', }
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "server", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
page: params.pageNumber,
|
||||
pageSize: params.pageSize,
|
||||
teamId: teamId,
|
||||
month: row.month,
|
||||
erbanNo: $('#queryErbanNo').val(),
|
||||
};
|
||||
teamDetailQueryParams = param;
|
||||
return param;
|
||||
},
|
||||
url: '/admin/flowteamSettlement/listTeamSettlementDataDetail.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
$("#teamDetailModal").modal('show');
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function param(obj) {
|
||||
let str = '';
|
||||
for (let key in obj) {
|
||||
let value = obj[key];
|
||||
str = key + '=' + value + '&';
|
||||
}
|
||||
return str.substring(0, str.length - 1);
|
||||
}
|
||||
|
||||
$("#exportTeamDetail").on("click", function () {
|
||||
window.location.href = `/admin/flowteamSettlement/exportTeamSettlementDetails?${param(teamDetailQueryParams)}`
|
||||
});
|
||||
|
||||
function formatTime(val) {
|
||||
if (val) {
|
||||
var date = new Date(val);
|
||||
return date.format('yyyy-MM-dd hh:mm:ss');
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
|
||||
//导出功能
|
||||
$("#btnExport").on('click', function () {
|
||||
$("#searchForm").submit();
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#teamDetailModal .modal-dialog,
|
||||
#userDetailModal .modal-dialog {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
793
src/views/flowteam/FlowTeamStatisticView.vue
Normal file
793
src/views/flowteam/FlowTeamStatisticView.vue
Normal file
@@ -0,0 +1,793 @@
|
||||
<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>
|
||||
<a href="javascript:void()" class="opt-show-intro">说明></a>
|
||||
</section>
|
||||
<div id="toolbar">
|
||||
<div class="col-lg-12">
|
||||
<div class="col-sm-8">
|
||||
<label for="query-groupSelector" class="col-sm-2 control-label">选择查询团队:</label>
|
||||
<div class="col-sm-4">
|
||||
<select name="query-teamSelector"
|
||||
onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name)"
|
||||
id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
<label for="query-teamSelector" class="col-sm-2 control-label">选择查询小组:</label>
|
||||
<div class="col-sm-4">
|
||||
<select name="teamSelector" id="query-teamSelector" class="form-control"
|
||||
data-btn-class="btn-warning">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="col-sm-5">
|
||||
<label for="startTime" class="col-sm-6 control-label">选择被邀请用户的新增时间范围:</label>
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="input-sm form-control" name="startTime" id="startTime">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="endTime" class="col-sm-4 control-label">--</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="input-sm form-control" name="endTime" id="endTime">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default js-quick-search js-quick-search-1" data-days="1">
|
||||
昨天
|
||||
</button>
|
||||
<button class="btn btn-default js-quick-search js-quick-search-7" data-days="7">
|
||||
最近7天
|
||||
</button>
|
||||
<button class="btn btn-default js-quick-search js-quick-search-30" data-days="30">
|
||||
最近30天
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="col-sm-5">
|
||||
<label for="chargeStartTime" class="col-sm-6 control-label">选择被邀请用户的充值时间范围:</label>
|
||||
<div class="col-sm-5">
|
||||
<input type="text" class="input-sm form-control" name="chargeStartTime"
|
||||
id="chargeStartTime">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="chargeEndTime" class="col-sm-4 control-label">--</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="text" class="input-sm form-control" name="chargeEndTime" id="chargeEndTime">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-default js-quick-search_a js-quick-search-1" data-days="1">
|
||||
昨天
|
||||
</button>
|
||||
<button class="btn btn-default js-quick-search_a js-quick-search-7" data-days="7">
|
||||
最近7天
|
||||
</button>
|
||||
<button class="btn btn-default js-quick-search_a js-quick-search-30" data-days="30">
|
||||
最近30天
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<button id="btnSearch" class="btn btn-default">
|
||||
<i class="glyphicon glyphicon-search"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- .content -->
|
||||
<div id="group-table-div" style="display: none;">
|
||||
<h3 id="group-tableTitle">团队统计</h3>
|
||||
<div id="group-table"></div>
|
||||
<button type="button" class="btn btn-primary" id="exportGroupDetail">导出团队明细</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3 id="tableTitle"></h3>
|
||||
<div id="table"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!--说明modal-->
|
||||
<div class="modal fade" id="introModal" 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="introModalTitle">统计说明</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
分组统计展示每个小组的整体数据，按不同的小组分别显示，查询前需要：<br/>
|
||||
1）输入查询的小组：非必填，不填写展示全部小组<br/>
|
||||
2）选择被邀请用户的新增时间范围：指的是被邀请的人新增的时间段，非必填，不填写展示截止到目前的全部数据<br/>
|
||||
3）选择被邀请用户的充值时间范围：指的是被邀请的人的充值行为发生的时间段，非必填，不填写展示截止到目前的全部数据<br/>
|
||||
表格按照选取的被邀请用户新增时间展示累计新增用户数<br/>
|
||||
表头说明：<br/>
|
||||
--新增用户数：该小组在所设置的被邀请用户新增时间范围内所引入的新用户数量<br/>
|
||||
--新增充值人数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生首次充值的人数<br/>
|
||||
--付费转化：付费转化=表格显示的新增充值人数/表格显示的新增用户数<br/>
|
||||
--充值次数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值次数<br/>
|
||||
--充值金额：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值金额<br/>
|
||||
--送礼金额：该小组满足新增时间筛选的新增用户，截止到目前时刻的送礼金额
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="teamDetailModal" 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="teamDetailModalTitle">分组明细</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="teamDetaillTable"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="exportTeamDetail">导出</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="userDetailModal" 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="userDetailModalTitle">分组明细</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="userDetaillTable"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="exportUserDetail">导出</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
import { formatTime } from '@/utils/maintainer';
|
||||
|
||||
const TEAM_ROLE = {
|
||||
"1": '组员',
|
||||
"2": '组长',
|
||||
"3": '团长',
|
||||
};
|
||||
let flowTeams;
|
||||
let flowTeamsMap = {};
|
||||
|
||||
let flowGroups = [];
|
||||
let flowGroupsMap = {};
|
||||
const groupTeamIds = [];
|
||||
export default {
|
||||
name: "FlowTeamStatisticView",
|
||||
setup() {
|
||||
// 初始化小组选择器
|
||||
function initTeamSelector(groupId, childrenSelectId) {
|
||||
const options = ['<option value="">全部</option>'];
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeamByGroupId.action",
|
||||
data: {
|
||||
groupId: groupId
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
// 清空数组
|
||||
groupTeamIds.length = 0;
|
||||
for (let i = 0; i < json.data.length; i++) {
|
||||
const flowTeam = json.data[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
|
||||
groupTeamIds.push(flowTeam.teamId);
|
||||
}
|
||||
$('#' + `${childrenSelectId}`).html(options.join(' '));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
window.initTeamSelector = initTeamSelector;
|
||||
return {
|
||||
initTeamSelector
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
$(function () {
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeam.action",
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
if (json.data) {
|
||||
flowTeams = json.data;
|
||||
for (let i = 0; i < flowTeams.length; i++) {
|
||||
const flowTeam = flowTeams[i];
|
||||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||||
}
|
||||
} else {
|
||||
flowTeams = [];
|
||||
flowTeamsMap = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/listGroupByPage",
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log("init group success", json);
|
||||
flowGroups = json.rows;
|
||||
if (flowGroups.length > 0) {
|
||||
for (let i = 0; i < flowGroups.length; i++) {
|
||||
const flowGroup = flowGroups[i];
|
||||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
let listQueryParams = {};
|
||||
let teamDetailQueryParams = {};
|
||||
let userDetailQueryParams = {};
|
||||
let groupDetailQueryParams = {};
|
||||
let detailTeamId;
|
||||
$('.js-quick-search').on('click', function () {
|
||||
$('.js-quick-search').removeClass('active')
|
||||
$(this).addClass('active');
|
||||
setSearchTimeUseQuickWay($(this));
|
||||
});
|
||||
|
||||
$('.js-quick-search_a').on('click', function () {
|
||||
$('.js-quick-search_a').removeClass('active')
|
||||
$(this).addClass('active');
|
||||
setChargeSearchTimeUseQuickWay($(this));
|
||||
});
|
||||
|
||||
// 展示说明
|
||||
$('.opt-show-intro').on('click', function () {
|
||||
$('#introModal').modal('show');
|
||||
});
|
||||
|
||||
// 初始化团队选择器
|
||||
function initGroupSelector() {
|
||||
const options = [];
|
||||
options.push('<option value="">选择团队</option>')
|
||||
for (var i = 0; i < flowGroups.length; i++) {
|
||||
var item = flowGroups[i];
|
||||
//拼接成多个<option><option/>
|
||||
options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
|
||||
}
|
||||
$("#query-groupSelector").html(options.join(' '));
|
||||
}
|
||||
|
||||
initGroupSelector();
|
||||
|
||||
function setSearchTimeUseQuickWay(quickDom) {
|
||||
const days = quickDom.attr("data-days");
|
||||
const today = new Date(new Date().setHours(0, 0, 0, 0));
|
||||
const todayStr = formatTime(today);
|
||||
const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
|
||||
|
||||
$('#startTime').val(startTime);
|
||||
$('#endTime').val(todayStr);
|
||||
}
|
||||
|
||||
function setChargeSearchTimeUseQuickWay(quickDom) {
|
||||
const days = quickDom.attr("data-days");
|
||||
const today = new Date(new Date().setHours(0, 0, 0, 0));
|
||||
const todayStr = formatTime(today);
|
||||
const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
|
||||
|
||||
$('#chargeStartTime').val(startTime);
|
||||
$('#chargeEndTime').val(todayStr);
|
||||
}
|
||||
|
||||
const quickDom = $('.js-quick-search-7');
|
||||
quickDom.addClass('active');
|
||||
setSearchTimeUseQuickWay(quickDom);
|
||||
|
||||
// 查询刷新
|
||||
$('#btnSearch').on('click', function () {
|
||||
const groupId = $('#query-groupSelector').val();
|
||||
if (!groupId) {
|
||||
$("#tipMsg").text("请先选择需要查询的团队");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
columns: [
|
||||
{
|
||||
field: 'teamId', title: '组名', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const team = flowTeamsMap[val];
|
||||
if (team) {
|
||||
return team.teamName;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'memberCount', title: '当前成员数', align: 'center', width: '10%' },
|
||||
{ field: 'teamLeaders', title: '组长', align: 'center', width: '10%', valign: 'center' },
|
||||
{ field: 'newUserCount', title: '新增用户数', align: 'center', width: '5%', },
|
||||
{ field: 'newChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
|
||||
{ field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||||
{ field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||||
{ field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||||
{ field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
|
||||
{
|
||||
field: 'teamId',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-team-detail" data-teamId=' + val + '>' +
|
||||
'查看明细</button>' +
|
||||
' <button class="btn btn-sm btn-primary opt-exprot-user-detail-of-team" data-teamId=' + val +
|
||||
'>导出明细</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "client", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
method: 'post',
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
const groupId = $('#query-groupSelector').val();
|
||||
const teamId = $('#query-teamSelector').val();
|
||||
const app = $('#appSelector').val();
|
||||
var param = {
|
||||
startDate: $('#startTime').val(),
|
||||
endDate: $('#endTime').val(),
|
||||
chargeStartTime: $('#chargeStartTime').val(),
|
||||
chargeEndTime: $('#chargeEndTime').val()
|
||||
};
|
||||
listQueryParams = param;
|
||||
groupDetailQueryParams = param;
|
||||
if (groupId) {
|
||||
groupDetailQueryParams.groupId = groupId;
|
||||
}
|
||||
if (teamId) {
|
||||
param.teamId = teamId;
|
||||
}
|
||||
if (app) {
|
||||
param.app = app;
|
||||
}
|
||||
if (groupId && !teamId) {
|
||||
param.teamIds = groupTeamIds;
|
||||
} else {
|
||||
$('#group-table-div').attr("style", "display: none;");
|
||||
}
|
||||
return param;
|
||||
},
|
||||
// toolbar: '#toolbar',
|
||||
url: '/admin/flowTeam/listStatisticSummary.action',
|
||||
onLoadSuccess: function (json) { //加载成功时执行
|
||||
console.log("table load success");
|
||||
if ($('#query-groupSelector').val() && !$('#query-teamSelector').val()) {
|
||||
setTableTitle($('#query-groupSelector').val(), $('#query-teamSelector').val());
|
||||
// 组合数据
|
||||
calTeamTotal(json)
|
||||
showGroupTable();
|
||||
}
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("table load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function setTableTitle(groupId, teamId) {
|
||||
let group = flowGroupsMap[groupId];
|
||||
let teamDesc = '小组明细';
|
||||
if (teamId) {
|
||||
let team = flowTeamsMap[teamId];
|
||||
teamDesc = team.teamName + teamDesc;
|
||||
}
|
||||
$('#tableTitle').html(group.groupName + '团队' + teamDesc);
|
||||
}
|
||||
|
||||
let groupDataList = [];
|
||||
function calTeamTotal(data) {
|
||||
groupDataList.length = 0;
|
||||
console.log('json', data)
|
||||
const groupData = {};
|
||||
let tmemberCount = 0;
|
||||
let tnewUserCount = 0;
|
||||
let tnewChargeUserCount = 0;
|
||||
let tchargeCount = 0;
|
||||
let tchargeMoney = 0;
|
||||
let tsendGiftMony = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const team = data[i]
|
||||
tmemberCount += team.memberCount;
|
||||
tnewUserCount += team.newUserCount;
|
||||
tnewChargeUserCount += team.newChargeUserCount;
|
||||
tchargeCount += team.chargeCount;
|
||||
tchargeMoney += team.chargeMoney;
|
||||
tsendGiftMony += team.sendGiftMony;
|
||||
}
|
||||
groupData.groupId = $('#query-groupSelector').val();
|
||||
groupData.tmemberCount = tmemberCount;
|
||||
groupData.tnewUserCount = tnewUserCount;
|
||||
groupData.tnewChargeUserCount = tnewChargeUserCount;
|
||||
groupData.tchargeRate = ((tnewChargeUserCount / tnewUserCount) * 100).toFixed(2) + '%';
|
||||
groupData.tchargeCount = tchargeCount;
|
||||
groupData.tchargeMoney = tchargeMoney;
|
||||
groupData.tsendGiftMony = tsendGiftMony;
|
||||
groupData.tarpu = (tchargeMoney / tnewUserCount).toFixed(2);
|
||||
groupDataList.push(groupData);
|
||||
}
|
||||
|
||||
|
||||
// 查询并展示团队统计数据表格
|
||||
function showGroupTable() {
|
||||
console.log('groupDataList', groupDataList)
|
||||
$('#group-table-div').attr("style", "display:block;");
|
||||
$('#group-table').bootstrapTable('destroy');
|
||||
$('#group-table').bootstrapTable({
|
||||
columns: [
|
||||
{
|
||||
field: 'groupId', title: '团队名称', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const group = flowGroupsMap[val];
|
||||
if (group) {
|
||||
return group.groupName;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'tmemberCount', title: '团队成员数', align: 'center', width: '10%' },
|
||||
{ field: 'tnewUserCount', title: '新增用户数', align: 'center', width: '5%', },
|
||||
{ field: 'tnewChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
|
||||
{ field: 'tchargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||||
{ field: 'tchargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||||
{ field: 'tchargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||||
{ field: 'tsendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||||
{ field: 'tarpu', title: 'Arpu', align: 'center', width: '5%', },
|
||||
],
|
||||
height: 100,
|
||||
data: groupDataList,
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pagination: false,
|
||||
search: false,
|
||||
});
|
||||
}
|
||||
|
||||
var startTime = $('#startTime').datepicker({
|
||||
format: 'yyyy-mm-dd 00:00:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
var endTime = $('#endTime').datepicker({
|
||||
format: 'yyyy-mm-dd 00:00:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
var chargeStart = $('#chargeStartTime').datepicker({
|
||||
format: 'yyyy-mm-dd 00:00:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
var chargeEnd = $('#chargeEndTime').datepicker({
|
||||
format: 'yyyy-mm-dd 00:00:00',
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('#addUploadBtn').on('click', function () {
|
||||
if ($('#addUploadFile').val() == '') {
|
||||
$('#tipMsg').text('上传图片为空');
|
||||
$('#tipModal').modal('show');
|
||||
return;
|
||||
}
|
||||
var options = {
|
||||
type: 'post',
|
||||
url: '/admin/upload/img',
|
||||
dataType: 'json',
|
||||
success: function (res) {
|
||||
if (res.path) {
|
||||
$('#addActPic').val(res.path);
|
||||
$('#addImgUrl').attr('src', res.path);
|
||||
console.log(res.path);
|
||||
} else {
|
||||
$('#tipMsg').text(res.msg);
|
||||
$('#tipModal').modal('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
$('#addForm').ajaxSubmit(options);
|
||||
})
|
||||
|
||||
//新建标签
|
||||
$("#btnAdd").click(function () {
|
||||
$("#id").val("");
|
||||
$("#modal_name").val("");
|
||||
$("#modal_seq").val("");
|
||||
$("#modal_status").val("");
|
||||
$("#modal_type").val("");
|
||||
$("#modal_istop").val("");
|
||||
$("#modal_description").val("");
|
||||
$('#addActPic').val('');
|
||||
$('#addUploadFile').val('');
|
||||
$('#addImgUrl').attr('src', '');
|
||||
$("#roomTagModal").modal('show');
|
||||
});
|
||||
|
||||
$("#add").click(function () {
|
||||
var id = $("#id").val();
|
||||
var name = $("#modal_name").val();
|
||||
var seq = $("#modal_seq").val();
|
||||
var status = $("#modal_status").val();
|
||||
var type = $("#modal_type").val();
|
||||
var istop = $("#modal_istop").val();
|
||||
var pict = $("#addActPic").val();
|
||||
var description = $("#modal_description").val();
|
||||
|
||||
if (type != 3 && (pict == null || pict == '')) {
|
||||
$("#tipMsg").text("保存失败，请先上传图片！");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
|
||||
if ($("#addForm").validationEngine('validate')) {
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/roomtag/saveRoomTag.action",
|
||||
data: {
|
||||
id: id,
|
||||
name: name,
|
||||
seq: seq,
|
||||
status: status,
|
||||
type: type,
|
||||
istop: istop,
|
||||
pict: pict,
|
||||
description: description
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success == 'true') {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#roomTagModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.msg);
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#roomTagModal").modal('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#table").on("click", '.opt-show-team-detail', function () {
|
||||
var teamId = $(this).attr("data-teamId");
|
||||
$('#teamDetailModal #teamDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
|
||||
$('#teamDetaillTable').bootstrapTable('destroy');
|
||||
$('#teamDetaillTable').bootstrapTable({
|
||||
columns: [
|
||||
{
|
||||
field: 'memberName', title: '成员名', align: 'center', width: '5%'
|
||||
},
|
||||
{
|
||||
field: 'teamRole', title: '职务', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const teamRole = TEAM_ROLE[val];
|
||||
if (teamRole) {
|
||||
return teamRole;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'memberStatus', title: '成员状态', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
if (val == 1) {
|
||||
return `<span class="text-success">生效</span>`;
|
||||
} else {
|
||||
return `<span style="color: grey">无效</span>`;
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'newUserCount', title: '新增用户', align: 'center', width: '5%', },
|
||||
{ field: 'newChargeUserCount', title: '新增充值', align: 'center', width: '5%', },
|
||||
{ field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
|
||||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
|
||||
{ field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
|
||||
{ field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
|
||||
{ field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
|
||||
{
|
||||
field: 'memberId',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '10%',
|
||||
formatter: function (val, row, index) {
|
||||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-user-detail" data-teamId=' + teamId + ' data-memberId=' + val + ' data-memberName=' + row.memberName + '>' +
|
||||
'查看个人明细</button>';
|
||||
}
|
||||
}
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "client", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
...listQueryParams,
|
||||
teamId,
|
||||
};
|
||||
param.teamIds = '';
|
||||
teamDetailQueryParams = param;
|
||||
detailTeamId = teamId;
|
||||
return param;
|
||||
},
|
||||
url: '/admin/flowTeam/listFlowTeamStatisticDetails.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
$("#teamDetailModal").modal('show');
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#teamDetaillTable").on("click", '.opt-show-user-detail', function () {
|
||||
var teamId = $(this).attr("data-teamId");
|
||||
var memberId = $(this).attr("data-memberId");
|
||||
var memberName = $(this).attr("data-memberName");
|
||||
$('#userDetailModal #userDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${memberName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
|
||||
$('#userDetaillTable').bootstrapTable('destroy');
|
||||
$('#userDetaillTable').bootstrapTable({
|
||||
columns: [
|
||||
{ field: 'inviteCode', title: '邀请码', align: 'center', width: '5%' },
|
||||
{ field: 'userErbanNo', title: '被邀请用户id', align: 'center', width: '5%' },
|
||||
{ field: 'userNickName', title: '被邀请用户昵称', align: 'center', width: '5%' },
|
||||
{ field: 'registerIp', title: '被邀请用户注册ip', align: 'center', width: '5%' },
|
||||
{ field: 'phone', title: '被邀请用户手机号', align: 'center', width: '5%' },
|
||||
{ field: 'teamMemberName', title: '引入人', align: 'center', width: '5%' },
|
||||
{ field: 'signUpTime', title: '新增日期', align: 'center', width: '5%' },
|
||||
{ field: 'chargeCount', title: '充值次数', align: 'center', width: '5%' },
|
||||
{ field: 'chargeMoney', title: '充值金额（美元）', align: 'center', width: '5%' },
|
||||
{ field: 'totalSendGiftMoney', title: '送礼钻石数', align: 'center', width: '5%' },
|
||||
{ field: 'totalBackbagSendGiftMoney', title: '送礼背包钻石数', align: 'center', width: '5%' },
|
||||
{ field: 'totalNoBackbagSendGiftMoney', title: '送礼非背包钻石数', align: 'center', width: '5%' },
|
||||
],
|
||||
undefinedText: 0,
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 20,
|
||||
pagination: true,
|
||||
pageList: [20, 50, 100, 200, 300, 500],
|
||||
search: false,
|
||||
sidePagination: "client", //表示服务端请求
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
...listQueryParams,
|
||||
memberId,
|
||||
teamId: detailTeamId,
|
||||
};
|
||||
param.teamIds = '';
|
||||
userDetailQueryParams = param;
|
||||
return param;
|
||||
},
|
||||
url: '/admin/flowTeam/listUserStatisticDetails.action',
|
||||
onLoadSuccess: function () { //加载成功时执行
|
||||
$("#userDetailModal").modal('show');
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function param(obj) {
|
||||
let str = '';
|
||||
for (let key in obj) {
|
||||
let value = obj[key];
|
||||
str = key + '=' + value + '&';
|
||||
}
|
||||
return str.substring(0, str.length - 1);
|
||||
}
|
||||
|
||||
$("#table").on("click", '.opt-exprot-user-detail-of-team', function () {
|
||||
var teamId = $(this).attr("data-teamId");
|
||||
var queryParams = {
|
||||
...listQueryParams,
|
||||
teamId,
|
||||
}
|
||||
window.location.href = '/admin/flowTeam/exportuserStatisticDetailOfTeam?' + param(queryParams);
|
||||
})
|
||||
|
||||
$("#exportTeamDetail").on("click", function () {
|
||||
window.location.href = '/admin/flowTeam/exportTeamStatisticDetails?' + param(teamDetailQueryParams);
|
||||
});
|
||||
|
||||
$("#exportUserDetail").on("click", function () {
|
||||
window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(userDetailQueryParams);
|
||||
});
|
||||
|
||||
// 团队明细导出
|
||||
$("#exportGroupDetail").on("click", function () {
|
||||
window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(groupDetailQueryParams);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#teamDetailModal .modal-dialog,
|
||||
#userDetailModal .modal-dialog {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#introModal .modal-dialog {
|
||||
width: 60%;
|
||||
}
|
||||
</style>
|
||||
272
src/views/flowteam/RefillInviteCodeView.vue
Normal file
272
src/views/flowteam/RefillInviteCodeView.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="box box-primary">
|
||||
<div class="box-body">
|
||||
<section class="content-header">
|
||||
<h1 id="itemTitle"></h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<div id="table"></div>
|
||||
<div id="toolbar">
|
||||
<textarea name="erbanNoList" id="erbanNoList" placeholder="多个搜索号请用逗号隔开"></textarea>
|
||||
<div style="margin-bottom: 6px">
|
||||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||||
<!-- 搜索根源：-->
|
||||
<!-- <select name="checkType" id="checkType">-->
|
||||
<!-- <option value="1">平台号</option>-->
|
||||
<!-- <option value="2">手机号</option>-->
|
||||
<!-- <option value="4">uid</option>-->
|
||||
<!-- </select>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
|
||||
<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">x</span></button>
|
||||
<h4 class="modal-title" id="addModalLabel">补填邀请码</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="refillInviteCodeForm" class="form-horizontal">
|
||||
<input type="hidden" name="uid" id="editUid">
|
||||
<div class="form-group">
|
||||
<label for="editInviteCode" class="col-sm-3 control-label">邀请码:</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control validate[required]" name="nick" id="editInviteCode">
|
||||
</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="editSave">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||||
|
||||
const TEAM_ROLE = {
|
||||
"1": '组员',
|
||||
"2": '组长',
|
||||
"3": '团长',
|
||||
};
|
||||
let flowTeams;
|
||||
let flowTeamsMap = {};
|
||||
|
||||
let flowGroups = [];
|
||||
let flowGroupsMap = {};
|
||||
|
||||
export default {
|
||||
name: "RefillInviteCodeView",
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(function () {
|
||||
this.initData();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
|
||||
$(function () {
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowTeam/listTeam.action",
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
if (json.data) {
|
||||
flowTeams = json.data;
|
||||
for (let i = 0; i < flowTeams.length; i++) {
|
||||
const flowTeam = flowTeams[i];
|
||||
flowTeamsMap[flowTeam.teamId] = flowTeam;
|
||||
}
|
||||
} else {
|
||||
flowTeams = [];
|
||||
flowTeamsMap = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 加载流量团队配置
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "/admin/flowteam/group/listGroupByPage",
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 2147483647,
|
||||
groupName: ''
|
||||
},
|
||||
dataType: "json",
|
||||
success: function (json) {
|
||||
console.log("init group success", json);
|
||||
flowGroups = json.rows;
|
||||
if (flowGroups.length > 0) {
|
||||
for (let i = 0; i < flowGroups.length; i++) {
|
||||
const flowGroup = flowGroups[i];
|
||||
flowGroupsMap[flowGroup.groupId] = flowGroup;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
let tableData = [];
|
||||
let canRefillInterval = 2 * 60 * 60 * 1000;
|
||||
$('#table').bootstrapTable('destroy');
|
||||
$('#table').bootstrapTable({
|
||||
cache: false,
|
||||
striped: true,
|
||||
showRefresh: false,
|
||||
pageSize: 10,
|
||||
pagination: true,
|
||||
pageList: [10, 20, 30, 50],
|
||||
sidePagination: "client", //表示服务端请求
|
||||
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
|
||||
//设置为limit可以获取limit, offset, search, sort, order
|
||||
queryParamsType: "undefined",
|
||||
queryParams: function queryParams(params) { //设置查询参数
|
||||
var param = {
|
||||
erbanNoList: $('#erbanNoList').val(),
|
||||
};
|
||||
// console.log(param);
|
||||
return param;
|
||||
},
|
||||
uniqueId: 'code',
|
||||
toolbar: '#toolbar',
|
||||
url: '/admin/flowTeam/listUsers.action',
|
||||
onLoadSuccess: function (data) { //加载成功时执行
|
||||
tableData = data;
|
||||
},
|
||||
onLoadError: function () { //加载失败时执行
|
||||
console.log("load fail");
|
||||
},
|
||||
columns: [
|
||||
{ field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle' },
|
||||
{ field: 'nick', title: '用户昵称', align: 'center', valign: 'middle' },
|
||||
{
|
||||
field: 'createTime',
|
||||
title: '新增时间',
|
||||
align: 'center',
|
||||
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: 'inviteCode', title: '所填邀请码', align: 'center', valign: 'middle' },
|
||||
{
|
||||
field: 'teamId', title: '引入组', align: 'center', width: '5%',
|
||||
formatter: function (val, row, index) {
|
||||
const team = flowTeamsMap[val];
|
||||
if (team) {
|
||||
return team.teamName;
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
},
|
||||
{ field: 'groupName', title: '引入团队', align: 'center', width: '5%' },
|
||||
{ field: 'teamMemberName', title: '引入人', align: 'center', valign: 'middle' },
|
||||
{
|
||||
field: 'uid',
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
width: '20%',
|
||||
valign: 'middle',
|
||||
formatter: function (val, row, index) {
|
||||
let isDisabled = true;
|
||||
if (!row.inviteCode) {
|
||||
isDisabled = false;
|
||||
}
|
||||
var key = val;
|
||||
let result = `<button class='btn btn-sm btn-primary opt-edit' ${isDisabled ? 'disabled' : ''} data-idx=${index} data-id=${key} >补填邀请码</button>`
|
||||
return result;
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
$('#btnSearch').on('click', function () {
|
||||
TableHelper.doRefresh('#table');
|
||||
})
|
||||
|
||||
$('#table').on('click', '.opt-edit', function () {
|
||||
const idx = $(this).data('idx');
|
||||
const row = tableData[idx];
|
||||
if (!row.isInCanRefillInviteCodeTime) {
|
||||
$("#tipMsg").text("超出不填时间，无法补填邀请码");
|
||||
$("#tipModal").modal('show');
|
||||
return;
|
||||
}
|
||||
const uid = $(this).data('id');
|
||||
$('#editUid').val(uid);
|
||||
$('#editInviteCode').val('');
|
||||
$('#editModal').modal('show');
|
||||
})
|
||||
|
||||
$('#editSave').on('click', function () {
|
||||
if ($('#refillInviteCodeForm').validationEngine('validate')) {
|
||||
const requestParam = {
|
||||
uid: $('#editUid').val(),
|
||||
inviteCode: $('#editInviteCode').val(),
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "/admin/flowTeam/refillUserInviteCode.action",
|
||||
data: JSON.stringify(requestParam),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function (json) {
|
||||
if (json.success) {
|
||||
$("#tipMsg").text("保存成功");
|
||||
$("#tipModal").modal('show');
|
||||
TableHelper.doRefresh("#table");
|
||||
$("#editModal").modal('hide');
|
||||
} else {
|
||||
$("#tipMsg").text("保存失败." + json.message);
|
||||
$("#tipModal").modal('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#toolbar textarea {
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
height: 100px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
#btnSearch {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user