569 lines
30 KiB
Vue
569 lines
30 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<section class="content-header">
|
||
<h1 id="itemTitle">十二星座配置</h1>
|
||
</section>
|
||
<section class="content">
|
||
<table id="table"></table>
|
||
<div id="toolbar">
|
||
<button id="addBtn" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-plus"></i>增加
|
||
</button>
|
||
</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 class="form-horizontal" id="addForm">
|
||
<div class="form-group">
|
||
<div class="tips">注意：无论选择什么时间都会设置到选择时间的 00:00分</div>
|
||
<label for="addStartDate" class="col-sm-3 control-label">起始时间:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" id="addStartDate" name="startTime"
|
||
class="form-control validate[required]">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="tips">注意：无论选择什么时间都会设置到选择时间的 23:59分</div>
|
||
<label for="addEndDate" class="col-sm-3 control-label">结束时间:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" id="addEndDate" name="startTime" class="form-control validate[required]">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addGiftId" class="col-sm-3 control-label">礼物</label>
|
||
<select name="giftId" id="addGiftId" class="giftSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">魅力榜奖励</label>
|
||
<select name="packId" id="charmAwardId" class="awardSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">豪气榜奖励</label>
|
||
<select name="packId" id="levelAwardId" class="awardSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addDesc" class="col-sm-3 control-label">星座名称</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" name="desc" id="addDesc" class="form-control validate[required]" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">星座标记：</label>
|
||
<div class="col-sm-8">
|
||
<img src="" alt="" id="add_mark_url" style="width: 50px; height: 50px;">
|
||
<input type="file" id="uploadTagPic" accept="image/*">
|
||
<button class="btn btn-success" type="button" id="uploadTagPicBtn">上传</button>
|
||
<div class="tips">
|
||
<i class="glyphicon glyphicon-info-sign"></i>
|
||
<font color="red">请上传图片文件</font>
|
||
</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="addSave">保存</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" id="editId">
|
||
<div class="form-group">
|
||
<div class="tips">注意：无论选择什么时间都会设置到选择时间的 00:00分</div>
|
||
<label for="updateStartDate" class="col-sm-3 control-label">起始时间:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" id="updateStartDate" name="startTime"
|
||
class="form-control validate[required]">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="tips">注意：无论选择什么时间都会设置到选择时间的 23:59分</div>
|
||
<label for="updateEndDate" class="col-sm-3 control-label">结束时间:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" id="updateEndDate" name="startTime"
|
||
class="form-control validate[required]">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addGiftId" class="col-sm-3 control-label">礼物</label>
|
||
<select name="giftId" id="editGiftId" class="giftSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">魅力榜奖励</label>
|
||
<select name="packId" id="editCharmAwardId" class="awardSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">豪气榜奖励</label>
|
||
<select name="packId" id="editLevelAwardId" class="awardSelect" multiple="multiple">
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editDesc" class="col-sm-3 control-label">星座名称</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" name="desc" id="editDesc" class="form-control validate[required]" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">星座标记：</label>
|
||
<div class="col-sm-8">
|
||
<img src="" alt="" id="update_mark_url" style="width: 50px; height: 50px;">
|
||
<input type="file" id="uploadTagPic2" accept="image/*">
|
||
<button class="btn btn-success" type="button" id="uploadTagPicBtn2">上传</button>
|
||
<div class="tips">
|
||
<i class="glyphicon glyphicon-info-sign"></i>
|
||
<font color="red">请上传图片文件</font>
|
||
</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="editSave">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
import { formatTime } from '@/utils/maintainer';
|
||
|
||
export default {
|
||
name: "ActTwelveStarConfigAdminView",
|
||
setup() { },
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
var giftObj = {};
|
||
var packObj = {};
|
||
getGiftMsg();
|
||
function tableMake() {
|
||
$('#table').bootstrapTable('destroy');
|
||
// 清空分页组件的容器
|
||
$('.fixed-table-pagination').empty();
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{ field: 'id', title: 'id', align: 'center', valign: 'middle', width: '10%' },
|
||
{
|
||
field: 'startDate', 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: 'endDate', 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: 'giftIdList', title: '礼物清单', align: 'center', valign: 'middle', formatter: function (val, row, index) {
|
||
if (val && val.startsWith('[') && val.endsWith(']')) {
|
||
var giftArr = JSON.parse(val);
|
||
var str = '';
|
||
for (var i = 0; i < giftArr.length; i++) {
|
||
str += giftObj[giftArr[i]] + '，';
|
||
}
|
||
return str.substr(0, str.length - 2);
|
||
} else {
|
||
return val;
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'charmAward', title: '魅力榜奖励', align: 'center', valign: 'middle', formatter: function (val, row, index) {
|
||
var packArr = JSON.parse(val);
|
||
var str = '';
|
||
for (var i = 0; i < packArr.length; i++) {
|
||
str += packObj[packArr[i]] + '，';
|
||
}
|
||
return str.substr(0, str.length - 2);
|
||
}
|
||
},
|
||
{
|
||
field: 'levelAward', title: '豪气榜奖励', align: 'center', valign: 'middle', formatter: function (val, row, index) {
|
||
var packArr = JSON.parse(val);
|
||
var str = '';
|
||
for (var i = 0; i < packArr.length; i++) {
|
||
str += packObj[packArr[i]] + '，';
|
||
}
|
||
return str.substr(0, str.length - 2);
|
||
}
|
||
},
|
||
{
|
||
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: 'description', title: '星座名称', align: 'center', valign: 'middle' },
|
||
{
|
||
field: 'markUrl', title: '星座标记', align: 'left', valign: 'middle', width: '10%',
|
||
formatter: function (val, row, index) {
|
||
if (null != val && val != '') {
|
||
return '<img src="' + val + '" alt="" style="width: 30px; height: 30px;">';
|
||
}
|
||
return '-';
|
||
}
|
||
},
|
||
{
|
||
field: 'tmp',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '30%',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
var key = row.id;
|
||
var date = new Date(row.startDate);
|
||
var mondayDate = getFirstDayOfWeek(new Date());
|
||
var dis = mondayDate.getTime() - date.getTime();
|
||
// if(dis > 0){
|
||
// return "<button class='btn btn-sm btn-success opt-edit' disabled data-id="+ key +">不可编辑</button>";
|
||
// }else{
|
||
// }
|
||
return "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + ">编辑</button>";
|
||
}
|
||
}
|
||
],
|
||
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,
|
||
};
|
||
// console.log(param);
|
||
return param;
|
||
},
|
||
uniqueId: 'id',
|
||
toolbar: '#toolbar',
|
||
url: '/admin/twelveStar/getWeekConfigList.action',
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
console.log("load success");
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("load fail");
|
||
}
|
||
})
|
||
}
|
||
$('#addBtn').on('click', function () {
|
||
clearModal();
|
||
getGiftMsg();
|
||
getPackMsg();
|
||
$('#addModal').modal('show');
|
||
})
|
||
var picker = $('#addStartDate').datepicker({
|
||
format: 'yyyy-mm-dd',
|
||
startDate: new Date(),
|
||
autoclose: true
|
||
});
|
||
var picker1 = $('#addEndDate').datepicker({
|
||
format: 'yyyy-mm-dd',
|
||
startDate: new Date(),
|
||
autoclose: true
|
||
});
|
||
var picker2 = $('#updateStartDate').datepicker({
|
||
format: 'yyyy-mm-dd',
|
||
startDate: new Date(),
|
||
autoclose: true
|
||
});
|
||
var picker3 = $('#updateEndDate').datepicker({
|
||
format: 'yyyy-mm-dd',
|
||
startDate: new Date(),
|
||
autoclose: true
|
||
});
|
||
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('');
|
||
});
|
||
$('#add_mark_url').attr('src', '');
|
||
$('#update_mark_url').attr('src', '');
|
||
}
|
||
$('#addSave').on('click', function () {
|
||
if ($('#addForm').validationEngine('validate')) {
|
||
//客户端标签
|
||
var markUrl = $('#add_mark_url').attr('src');
|
||
var giftId = JSON.stringify($("#addGiftId").val());
|
||
var charmAward = JSON.stringify($("#charmAwardId").val());
|
||
var levelAward = JSON.stringify($("#levelAwardId").val());
|
||
if (giftId == '' || charmAward == '' || levelAward == '') {
|
||
$("#tipMsg").text('请选择礼物/奖励');
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
$.get('/admin/twelveStar/insert', {
|
||
startTimeStr: $('#addStartDate').val(),
|
||
endTimeStr: $('#addEndDate').val(),
|
||
desc: $('#addDesc').val(),
|
||
giftList: giftId,
|
||
markUrl: markUrl,
|
||
charmAward: charmAward,
|
||
levelAward: levelAward
|
||
}, function (res) {
|
||
if (res.code == 200) {
|
||
$('#addModal').modal('hide');
|
||
$("#tipMsg").text("添加成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("保存失败，" + res.message);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
})
|
||
}
|
||
})
|
||
$('#editSave').on('click', function () {
|
||
if ($('#editForm').validationEngine('validate')) {
|
||
//客户端标签
|
||
var markUrl = $('#update_mark_url').attr('src');
|
||
var giftId = JSON.stringify($("#editGiftId").val());
|
||
var charmAward = JSON.stringify($("#editCharmAwardId").val());
|
||
var levelAward = JSON.stringify($("#editLevelAwardId").val());
|
||
if (giftId == '' || charmAward == '' || levelAward == '') {
|
||
$("#tipMsg").text('请选择礼物/奖励');
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
$.get('/admin/twelveStar/update', {
|
||
id: $('#editId').val(),
|
||
desc: $('#editDesc').val(),
|
||
startTimeStr: $('#updateStartDate').val(),
|
||
endTimeStr: $('#updateEndDate').val(),
|
||
markUrl: markUrl,
|
||
giftList: giftId,
|
||
charmAward: charmAward,
|
||
levelAward: levelAward
|
||
}, function (res) {
|
||
if (res.code == 200) {
|
||
$('#editModal').modal('hide');
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("保存失败，" + res.message);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
})
|
||
}
|
||
});
|
||
$('#table').on('click', '.opt-edit', function () {
|
||
$('#editGiftId').val('');
|
||
$('#editCharmAwardId').val('');
|
||
$('#editLevelAwardId').val('');
|
||
var id = $(this).data('id');
|
||
var data = $('#table').bootstrapTable('getRowByUniqueId', id);
|
||
let giftArr = data.giftIdList;
|
||
if (giftArr && giftArr.startsWith('[') && giftArr.endsWith(']')) {
|
||
giftArr = JSON.parse(data.giftIdList);
|
||
}
|
||
let charmAward = data.charmAward;
|
||
if (charmAward && charmAward.startsWith('[') && charmAward.endsWith(']')) {
|
||
charmAward = JSON.parse(data.charmAward);
|
||
}
|
||
|
||
let levelAward = data.levelAward;
|
||
if (levelAward && levelAward.startsWith('[') && levelAward.endsWith(']')) {
|
||
levelAward = JSON.parse(data.levelAward);
|
||
}
|
||
console.log(data);
|
||
$('#editId').val(data.id);
|
||
$('#editGiftId').multiselect('select', giftArr);
|
||
$('#editCharmAwardId').multiselect('select', charmAward);
|
||
$('#editLevelAwardId').multiselect('select', levelAward);
|
||
$('#editDesc').val(data.description);
|
||
$('#updateStartDate').val(formatTime(data.startDate));
|
||
$('#updateEndDate').val(formatTime(data.endDate));
|
||
$('#update_mark_url').attr('src', data.markUrl);
|
||
$('#editModal').modal('show');
|
||
});
|
||
function getGiftMsg() {
|
||
$.get('/admin/gift/getAllGiftList?consumeType=1', function (res) {
|
||
if (res.code == 200) {
|
||
var str = '';
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
// 存入对象
|
||
giftObj[res.data[i].giftId] = res.data[i].giftName;
|
||
// 渲染select
|
||
str += '<option value="' + res.data[i].giftId + '">' + res.data[i].giftName + '</option>';
|
||
}
|
||
console.log(JSON.stringify(giftObj));
|
||
// $('.giftSelect').html(str);
|
||
// multiSelect('.giftSelect');
|
||
getWeekStarGiftMsg();
|
||
getPackMsg();
|
||
}
|
||
})
|
||
}
|
||
// 旧逻辑是查询出所有的礼物, 新逻辑: 只查询出周星榜礼物类型作为增加项
|
||
// 此处是兼容回显礼物名称, 避免之前的 不是周星榜礼物类型 导致名称回显不存在
|
||
function getWeekStarGiftMsg() {
|
||
$.get('/admin/gift/getVaildGiftByType?consumeType=1&status=0&giftType=13', function (res) {
|
||
if (res.code == 200) {
|
||
var str = '';
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
// 存入对象
|
||
giftObj[res.data[i].giftId] = res.data[i].giftName;
|
||
// 渲染select
|
||
str += '<option value="' + res.data[i].giftId + '">' + res.data[i].giftName + '</option>';
|
||
}
|
||
console.log(JSON.stringify(giftObj));
|
||
$('.giftSelect').html(str);
|
||
multiSelect('.giftSelect');
|
||
}
|
||
})
|
||
}
|
||
function getPackMsg() {
|
||
$.get('/admin/twelveStar/getPackList', function (res) {
|
||
if (res.code == 200) {
|
||
var str = '';
|
||
for (var i = 0; i < res.data.length; i++) {
|
||
// 存入对象
|
||
packObj[res.data[i].id] = res.data[i].name;
|
||
// 渲染select
|
||
str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>';
|
||
}
|
||
$('.awardSelect').html(str);
|
||
multiSelect('.awardSelect');
|
||
tableMake();
|
||
}
|
||
})
|
||
}
|
||
function getFirstDayOfWeek(date) {
|
||
var day = date.getDay() || 7;
|
||
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1 - day);
|
||
}
|
||
function multiSelect(obj) { //初始化方法
|
||
$(obj).multiselect({
|
||
includeSelectAllOption: false,
|
||
enableClickableOptGroups: true,
|
||
enableCollapsibleOptGroups: true,
|
||
noneSelectedText: '==请选择==',
|
||
buttonWidth: 195,
|
||
maxHeight: 300,
|
||
});
|
||
}
|
||
// 上传标签
|
||
$('#uploadTagPicBtn').on('click', function () {
|
||
if ($('#uploadTagPic').val() == '') {
|
||
$('#tipMsg').text('上传图片为空');
|
||
$('#tipModal').modal('show');
|
||
return;
|
||
}
|
||
var options = {
|
||
type: 'post',
|
||
url: '/admin/upload/img',
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.path) {
|
||
$('#add_mark_url').attr('src', res.path);
|
||
} else {
|
||
$('#tipMsg').text(res.msg);
|
||
$('#tipModal').modal('show');
|
||
}
|
||
}
|
||
}
|
||
$('#uploadTagPic').attr('name', 'uploadFile');
|
||
$('#uploadPict').attr('name', '');
|
||
$('#addForm').ajaxSubmit(options);
|
||
});
|
||
// 上传标签
|
||
$('#uploadTagPicBtn2').on('click', function () {
|
||
if ($('#uploadTagPic2').val() == '') {
|
||
$('#tipMsg').text('上传图片为空');
|
||
$('#tipModal').modal('show');
|
||
return;
|
||
}
|
||
var options = {
|
||
type: 'post',
|
||
url: '/admin/upload/img',
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
if (res.path) {
|
||
$('#update_mark_url').attr('src', res.path);
|
||
} else {
|
||
$('#tipMsg').text(res.msg);
|
||
$('#tipModal').modal('show');
|
||
}
|
||
}
|
||
}
|
||
$('#uploadTagPic2').attr('name', 'uploadFile');
|
||
$('#uploadPict').attr('name', '');
|
||
$('#editForm').ajaxSubmit(options);
|
||
});
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/*.giftSelect{*/
|
||
/* width: 100%;*/
|
||
/*}*/
|
||
.col-sm-8 {
|
||
padding: 0;
|
||
}
|
||
|
||
.tips {
|
||
padding-left: 75px;
|
||
color: red;
|
||
}
|
||
</style>
|