481 lines
24 KiB
Vue
481 lines
24 KiB
Vue
<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('');
|
||
}
|
||
});
|
||
}
|
||
},
|
||
unmounted() {
|
||
$('#table').bootstrapTable('destroy');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |