542 lines
26 KiB
Vue
542 lines
26 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<div id="itemTitle"></div>
|
||
</section>
|
||
<!-- .content -->
|
||
<section>
|
||
<div id="table"></div>
|
||
</section>
|
||
<div id="toolbar">
|
||
<div class="col-sm-12">
|
||
<button id="btnAdd" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-plus-sign"></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">奖品设置</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal">
|
||
<input type="hidden" name="id" id="id" />
|
||
<input type="hidden" name="rewardName" id="rewardName" />
|
||
<div class="form-group">
|
||
<label for="rewardType" class="col-sm-3 control-label">奖品类型：</label>
|
||
<div class="col-sm-9">
|
||
<select name="rewardType" id="rewardType" class="form-control" oninput="getRewardRef()">
|
||
<option value="">无</option>
|
||
<option value="activityProps">活动道具</option>
|
||
<option value="gift">礼物</option>
|
||
<option value="namePlate">铭牌</option>
|
||
<option value="car">座驾</option>
|
||
<option value="headwear">头饰</option>
|
||
<option value="chatBubble">气泡</option>
|
||
<option value="infoCard">资料卡</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardRefId" class="col-sm-3 control-label">奖品名称：</label>
|
||
<div class="col-sm-9" id="rewardDiv">
|
||
<input type="text" class="form-control" id="rewardRefId">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">奖品图片：</label>
|
||
<div class="col-sm-9">
|
||
<img src="" id="rewardPicUrlImage" style="width:250px;height:90px;" alt="">
|
||
<input type="file" id="rewardPicUrlFile" name="uploadFile">
|
||
<button class="btn btn-success" type="button" id="rewardPicUrlUploadBtn">上传</button>
|
||
<input type="hidden" id="rewardPicUrl" name="rewardPicUrl" class="form-control" />
|
||
<span id="rewardPicUrlImgInfo" style="color:red;"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardNum" class="col-sm-3 control-label">奖品数量：</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" id="rewardNum">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardUnit" class="col-sm-3 control-label">奖品单位：</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" id="rewardUnit">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardValue" class="col-sm-3 control-label">奖品价值：</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" id="rewardValue">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardShowValue" class="col-sm-3 control-label">奖品展示价值：</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" id="rewardShowValue">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardLevel" class="col-sm-3 control-label">奖品等级：</label>
|
||
<div class="col-sm-9">
|
||
<select name="rewardLevel" id="rewardLevel" class="form-control">
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="rewardOrder" class="col-sm-3 control-label">奖品排序：</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" id="rewardOrder">
|
||
</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';
|
||
import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
|
||
import { isNumber } from '@/utils/string';
|
||
|
||
export default {
|
||
name: "SeizeTreasureRewardView",
|
||
setup() {
|
||
function getRewardRef() {
|
||
var rewardType = $('#rewardType').val();
|
||
var rewardRefId = $('#rewardRefId').val();
|
||
var rewardName = $('#rewardName').val();
|
||
var options = [];
|
||
if (rewardType == 'activityProps') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/seize-treasure/prop/list",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success == 'true' || json.code == 200) {
|
||
var data = json.data;
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
var prop = data[i];
|
||
options[i] = {
|
||
value: prop.id,
|
||
text: prop.name
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else if (rewardType == 'gift') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/gift/all",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (list) {
|
||
for (var i = 0; i < list.length; i++) {
|
||
var gift = list[i];
|
||
options[i] = {
|
||
value: gift.oval,
|
||
text: gift.otxt
|
||
};
|
||
}
|
||
}
|
||
});
|
||
} else if (rewardType == 'namePlate') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/nameplate/total/list",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success == 'true' || json.code == 200) {
|
||
var data = json.data;
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
var nameplate = data[i];
|
||
options[i] = {
|
||
value: nameplate.id,
|
||
text: nameplate.name
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else if (rewardType == 'car') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/car/goods/total/list",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success == 'true' || json.code == 200) {
|
||
var data = json.data;
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
var car = data[i];
|
||
options[i] = {
|
||
value: car.id,
|
||
text: car.name
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else if (rewardType == 'headwear') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/headwear/total/list",
|
||
dataType: "json",
|
||
async: false,
|
||
success: function (json) {
|
||
if (json.success == 'true' || json.code == 200) {
|
||
var data = json.data;
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
var headWear = data[i];
|
||
options[i] = {
|
||
value: headWear.headwearId,
|
||
text: headWear.name
|
||
};
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else if (rewardType == 'chatBubble') {
|
||
console.log(rewardType);
|
||
} else if (rewardType == 'infoCard') {
|
||
console.log(rewardType);
|
||
}
|
||
$('#rewardDiv').children().remove();
|
||
var $div = $('#rewardDiv');
|
||
console.log(options);
|
||
if (options.length > 0) {
|
||
var $select = $('<select/>');
|
||
$select.attr('class', 'form-control validate[required]');
|
||
$select.attr('id', 'rewardRefId');
|
||
for (let j = 0; j < options.length; j++) {
|
||
var option = options[j];
|
||
var $option = $('<option/>');
|
||
$option.attr('value', option.value);
|
||
$option.attr('data-id', option.value);
|
||
$option.attr('data-name', option.text);
|
||
if (rewardRefId && rewardRefId == option.value) {
|
||
$option.attr('selected', true);
|
||
}
|
||
$option.html(option.text);
|
||
$select.append($option);
|
||
}
|
||
$div.append($select);
|
||
ComboboxHelper.build(options, '#rewardRefId', rewardRefId);
|
||
} else {
|
||
var $input = $('<input/>');
|
||
$input.attr('type', 'text');
|
||
$input.attr('class', 'form-control');
|
||
$input.attr('id', 'rewardRefId');
|
||
if (rewardRefId) {
|
||
$input.attr('data-id', rewardRefId);
|
||
$input.attr('data-name', rewardName);
|
||
$input.val(rewardName);
|
||
}
|
||
$div.append($input);
|
||
}
|
||
}
|
||
window.getRewardRef = getRewardRef;
|
||
return {
|
||
getRewardRef
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{ field: 'id', title: '奖品ID', align: 'center', width: '5%' },
|
||
{
|
||
field: 'rewardType',
|
||
title: '奖品类型',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
var value = '';
|
||
if (val == 'activityProps') {
|
||
value = '活动道具';
|
||
} else if (val == 'gift') {
|
||
value = '礼物';
|
||
} else if (val == 'namePlate') {
|
||
value = '铭牌';
|
||
} else if (val == 'car') {
|
||
value = '座驾';
|
||
} else if (val == 'headwear') {
|
||
value = '头饰';
|
||
} else if (val == 'chatBubble') {
|
||
value = '气泡';
|
||
} else if (val == 'infoCard') {
|
||
value = '资料卡';
|
||
} else {
|
||
value = '-';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
{ field: 'rewardName', title: '奖品名称', align: 'center', width: '5%' },
|
||
{
|
||
field: 'rewardPicUrl',
|
||
title: '奖品图片',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
return "<img src='" + val + "' width='40' height='40'>";
|
||
}
|
||
},
|
||
{ field: 'rewardNum', title: '奖品数量', align: 'center', width: '5%' },
|
||
{ field: 'rewardUnit', title: '奖品单位', align: 'center', width: '5%' },
|
||
{ field: 'rewardValue', title: '奖品价值', align: 'center', width: '5%' },
|
||
{ field: 'rewardShowValue', title: '奖品展示价值', align: 'center', width: '5%' },
|
||
{ field: 'rewardLevel', title: '奖品等级', align: 'center', width: '5%' },
|
||
{ field: 'rewardOrder', title: '奖品排序', align: 'center', width: '5%' },
|
||
{ field: 'createTime', title: '创建时间', align: 'center', width: '5%' },
|
||
{ field: 'updateTime', title: '更新时间', align: 'center', width: '5%' },
|
||
{
|
||
field: 'id',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '5%',
|
||
valign: 'middle',
|
||
formatter: function (val, row, index) {
|
||
return '<button class="btn btn-sm btn-success opt-edit" data-index="' + index + '">编辑</button>' + '<button class="btn btn-sm btn-danger opt-del" data-index="' + index + '">删除</button>';
|
||
}
|
||
}
|
||
],
|
||
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/seize-treasure/reward/page',
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
console.log("load success");
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log("load fail");
|
||
}
|
||
});
|
||
|
||
$('#rewardPicUrlUploadBtn').on('click', function () {
|
||
$.ajaxFileUpload({
|
||
fileElementId: 'rewardPicUrlFile', //需要上传的文件域的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) {
|
||
$('#rewardPicUrl').val(json.path);
|
||
$('#rewardPicUrlImage').attr("src", json.path);
|
||
if (json.path != '') {
|
||
$("#rewardPicUrlImgInfo").html('已上传成功');
|
||
} else {
|
||
$("#rewardPicUrlImgInfo").html('未上传成功');
|
||
}
|
||
console.log(json.path);
|
||
} else {
|
||
$("#tipMsg").text(json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
},
|
||
error: function (data, status, e) { //提交失败自动执行的处理函数。
|
||
console.error(e);
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#btnAdd').on('click', function () {
|
||
$("#id").val('');
|
||
$("#rewardRefId").val('');
|
||
$("#rewardType").val('');
|
||
$("#rewardName").val('');
|
||
$('#rewardPicUrl').val('');
|
||
$('#rewardPicUrlImage').attr("src", '');
|
||
$('#rewardPicUrlImgInfo').val('');
|
||
$("#rewardNum").val('');
|
||
$("#rewardUnit").val('');
|
||
$("#rewardValue").val('');
|
||
$("#rewardShowValue").val('');
|
||
$("#rewardLevel").val('');
|
||
$("#rewardOrder").val('');
|
||
$("#editModal").modal('show');
|
||
});
|
||
|
||
$('#table').on('click', '.opt-edit', function () {
|
||
const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
|
||
var id = currentData.id;
|
||
var rewardRefId = currentData.rewardRefId;
|
||
var rewardType = currentData.rewardType;
|
||
var rewardName = currentData.rewardName;
|
||
var rewardPicUrl = currentData.rewardPicUrl;
|
||
var rewardNum = currentData.rewardNum;
|
||
var rewardUnit = currentData.rewardUnit;
|
||
var rewardValue = currentData.rewardValue;
|
||
var rewardShowValue = currentData.rewardShowValue;
|
||
var rewardLevel = currentData.rewardLevel;
|
||
var rewardOrder = currentData.rewardOrder;
|
||
$("#id").val(id);
|
||
$("#rewardRefId").val(rewardRefId);
|
||
$("#rewardType").val(rewardType);
|
||
$("#rewardName").val(rewardName);
|
||
$('#rewardPicUrl').val(rewardPicUrl);
|
||
$('#rewardPicUrlImage').attr("src", rewardPicUrl);
|
||
$("#rewardNum").val(rewardNum);
|
||
$("#rewardUnit").val(rewardUnit);
|
||
$("#rewardValue").val(rewardValue);
|
||
$("#rewardShowValue").val(rewardShowValue);
|
||
$("#rewardLevel").val(rewardLevel);
|
||
$("#rewardOrder").val(rewardOrder);
|
||
window.getRewardRef();
|
||
$("#editModal").modal('show');
|
||
});
|
||
|
||
$("#save").click(function () {
|
||
const msg = '确定要保存吗？';
|
||
if (confirm(msg)) {
|
||
var id = $("#id").val();
|
||
var rewardType = $("#rewardType").val();
|
||
var rewardRefId = $("#rewardRefId").val();
|
||
var rewardPicUrl = $('#rewardPicUrl').val();
|
||
var rewardNum = $("#rewardNum").val();
|
||
var rewardUnit = $("#rewardUnit").val();
|
||
var rewardValue = $("#rewardValue").val();
|
||
var rewardShowValue = $("#rewardShowValue").val();
|
||
var rewardLevel = $("#rewardLevel").val();
|
||
var rewardOrder = $("#rewardOrder").val();
|
||
let rewardName;
|
||
if (!isNumber(rewardRefId)) {
|
||
if (rewardRefId == null || rewardRefId == 0) {
|
||
$("#tipMsg").text("奖品设置出错，请重新配置！！！");
|
||
$("#tipModal").modal('show');
|
||
return;
|
||
}
|
||
rewardName = rewardRefId;
|
||
rewardRefId = null;
|
||
}
|
||
var data = {
|
||
rewardType: rewardType,
|
||
rewardRefId: rewardRefId,
|
||
rewardName: rewardName,
|
||
rewardPicUrl: rewardPicUrl,
|
||
rewardNum: rewardNum,
|
||
rewardUnit: rewardUnit,
|
||
rewardValue: rewardValue,
|
||
rewardShowValue: rewardShowValue,
|
||
rewardLevel: rewardLevel,
|
||
rewardOrder: rewardOrder
|
||
};
|
||
if (id) {
|
||
data.id = id;
|
||
}
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/seize-treasure/reward/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');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#table').on('click', '.opt-del', function () {
|
||
const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
|
||
var id = currentData.id;
|
||
const msg = '确定要删除吗？';
|
||
if (confirm(msg)) {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/seize-treasure/reward/del?id=" + id,
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true' || json.code == 200) {
|
||
$("#tipMsg").text("删除成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("删除失败." + json.message);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
unmounted() {
|
||
$('#table').bootstrapTable('destroy');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |