Files
peko-admin-web/src/views/chatbubble/ChatbubbleManageView.vue
2024-04-16 15:51:18 +08:00

652 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

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

<template>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<div id="toolbar" style="height: auto;">
<form id="searchForm" class="" action="" method="post" target="_blank">
<div class="col-sm-12">
<label for="type" class="col-sm-1 control-label">气泡类型:</label>
<div class="col-sm-2">
<select name="type" id="type" data-btn-class="btn-warning" class="form-control">
<option value="" selected="selected">全部</option>
<option value="1">普通</option>
<option value="2">贵族</option>
</select>
</div>
<label for="id" class="col-sm-1 control-label">气泡id:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="id" id="id"></div>
<label for="name" class="col-sm-1 control-label">气泡名称:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="name" id="name"></div>
<label for="partitionId" class="col-sm-1 control-label">地区:</label>
<div class="col-sm-2">
<select name="partitionId" id="partitionId" class="form-control"></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="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="addModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 500px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="modalLabel">新增气泡</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="addForm">
<input type="hidden" name="id" id="modal_id" />
<div class="form-group">
<label for="partitionFlag" class="col-sm-4 control-label">选择分区</label>
<div class="col-sm-6">
<input type="checkbox" name="partitionFlag" value="1"/>英语区<br>
<input type="checkbox" name="partitionFlag" value="2"/>阿拉伯语区<br>
<input type="checkbox" name="partitionFlag" value="4"/>华语区<br>
</div>
</div>
<div class="form-group">
<label for="modal_type" class="col-sm-4 control-label">装扮类型:</label>
<div class="col-sm-6">
<select name="type" id="modal_type" data-btn-class="btn-warning" class="form-control">
<option value="1">普通装扮</option>
<option value="2">贵族装扮</option>
</select>
</div>
</div>
<div class="form-group">
<label for="modal_name" class="col-sm-4 control-label">装扮名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name" id="modal_name"
placeholder="请输入气泡名称">
</div>
</div>
<div class="form-group">
<label for="ar_modal_name" class="col-sm-4 control-label">阿语装扮名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name" id="ar_modal_name" placeholder="请输入气泡名称">
</div>
</div>
<div class="form-group">
<label for="en_modal_name" class="col-sm-4 control-label">英语装扮名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name" id="en_modal_name" placeholder="请输入气泡名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">安卓图片:</label>
<div class="col-sm-6">
<img src="" id="addAndroidIconPicUrl" style="height:44px;" alt="">
<input type="file" id="add_android_UploadIconPic" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<button class="btn btn-success" type="button" name="uploadBtn"
id="addAndroidIconPicUrl_androidUrl">上传</button>
<input type="hidden" id="androidUrl" name="androidUrl" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">IOS图片:</label>
<div class="col-sm-6">
<img src="" id="addIosIconPicUrl" style="height:44px;" alt="">
<input type="file" id="add_ios_UploadIconPic" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<button class="btn btn-success" type="button" name="uploadBtn"
id="addIosIconPicUrl_iosUrl">上传</button>
<input type="hidden" id="iosUrl" name="iosUrl" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-4 control-label">装扮状态:</label>
<div class="col-sm-6">
<select name="status" id="status" data-btn-class="btn-warning" class="form-control">
<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="button-save">保存</button>
</div>
</div>
</div>
</div>
<!-- 为用户赠送铭牌弹窗 -->
<div class="modal fade" id="sendModal" 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="modalSendLabel">赠送装扮</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="sendForm">
<input type="hidden" name="id" id="sendId" />
<div class="form-group">
<label for="sendErbanNo" class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<textarea name="erbanNos" id="sendErbanNo" class="form-control validate[required]"
placeholder="多个ID使用,分隔一次性不得超过100个"></textarea>
</div>
</div>
<div class="form-group">
<label for="sendDays" class="col-sm-3 control-label">赠送天数</label>
<div class="col-sm-9">
<input type="text" name="days" id="sendDays" class="form-control validate[required]" />
</div>
</div>
<div class="form-group">
<label for="sendDesc" class="col-sm-3 control-label">备注</label>
<div class="col-sm-9">
<input type="text" name="remark" id="sendDesc" 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="send">提交</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';
export default {
name: "ChatbubbleManageView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initPartition();
this.initData();
});
},
methods: {
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'id', title: '装扮id', align: 'middle', width: '5%' },
{
field: 'partitionFlag',
title: '地区',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
let value = '';
if ((val & 1) != 0) {
value += '英语区<br>';
}
if ((val & 2) != 0) {
value += '阿拉伯语区<br>';
}
if ((val & 4) != 0) {
value += '华语区<br>';
}
return value;
}
},
{field: 'name.zh', title: '装扮名称', align: 'middle', width: '5%'},
{field: 'name.ar', title: '阿语装扮名称', align: 'middle', width: '5%'},
{field: 'name.en', title: '英语装扮名称', align: 'middle', width: '5%'},
{
field: 'iosUrl',
title: '装扮图片',
align: 'middle',
valign: 'middle',
width: '5%',
formatter: function (val, row, index) {
if (val) {
return "<img style='max-width: 200px;max-height: 200px' src='" + val + "'>";
} else {
return '-';
}
}
},
{
field: 'type', title: '装扮类型', align: 'middle', width: '5%',
formatter: function (val) {
if (val === 1) {
return '普通装扮';
} else if (val === 2) {
return '贵族装扮';
} else {
return '-';
}
}
},
{
field: 'status', title: '状态', align: 'middle', width: '5%',
formatter: function (val) {
if (val === 1) {
return '有效';
} else if (val === 2) {
return '无效';
} else {
return '-';
}
}
},
{
field: 'createTime',
title: '添加时间',
align: 'middle',
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: 'id',
title: '操作',
align: 'middle',
width: '5%',
formatter: function (val, row, index) {
let isSendDisabled = false;
if (row.type === 2) {
isSendDisabled = true;
}
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>&nbsp;&nbsp;' +
'<button id="btnSend" name="btnSend" class="btn btn-sm btn-success opt-send" data-id=' + val + " " + `${isSendDisabled ? ' disabled ' : ''}` + '>' +
'<i class="glyphicon glyphicon-edit"></i> 赠送</button>&nbsp;&nbsp;';
}
}
],
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [10, 20, 30, 50],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "-",
uniqueId: "id",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
type: $('#type').val(),
name: $('#name').val(),
id: $('#id').val(),
partitionId: $('#partitionId').val(),
};
return param;
},
ajax:function(request){ //使用ajax请求
$.ajax({
type:"GET",
url:'/admin/chatbubble/listByPage',
contentType:'application/json;charset=utf-8',
dataType:'json',
data: request.data,
success:function (res) {
console.log(res);
request.success({
"rows": res.rows.map(i=>{
let value = i.name;
if (value.startsWith('{') && value.endsWith('}')) {
i.name = JSON.parse(value);
} else {
i.name = {
zh: value,
ar: value,
en: value,
};
}
return i;
}),
"total": res.total
});
},
error:function(error){
console.log(error);
}
})
},
toolbar: '#toolbar',
// url: '/admin/chatbubble/listByPage',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
// 编辑
$("#table").on("click", '#btnEdit', function () {
var id = $(this).attr("data-id");
var row = $('#table').bootstrapTable('getRowByUniqueId', id);
// 赋值
$("#addForm #modal_id").val(row.id);
$("#addForm #modal_type").val(row.type);
console.log(row.name)
let name = row.name;
if (Object.prototype.hasOwnProperty.call(name, 'zh') || Object.prototype.hasOwnProperty.call(name, 'ar') || Object.prototype.hasOwnProperty.call(name, 'en')) {
$("#modal_name").val(row.name.zh);
// 阿语名称
$("#ar_modal_name").val(row.name.ar);
// 英语名称
$("#en_modal_name").val(row.name.en);
} else {
$("#modal_name").val(name);
// 阿语名称
$("#ar_modal_name").val(name);
// 英语名称
$("#en_modal_name").val(name);
}
$('#addAndroidIconPicUrl').attr("src", row.androidUrl);
$("#addForm #androidUrl").val(row.androidUrl);
$('#addIosIconPicUrl').attr("src", row.iosUrl);
$("#addForm #iosUrl").val(row.iosUrl);
$("#addForm #status").val(row.status);
//分区
let partitionFlag = row.partitionFlag;
if (partitionFlag & 1 != 0) {
$("input:checkbox[name='partitionFlag']")[0].checked = true;
} else {
$("input:checkbox[name='partitionFlag']")[0].checked = false;
}
if (partitionFlag & 2 != 0) {
$("input:checkbox[name='partitionFlag']")[1].checked = true;
} else {
$("input:checkbox[name='partitionFlag']")[1].checked = false;
}
if (partitionFlag & 4 != 0) {
$("input:checkbox[name='partitionFlag']")[2].checked = true;
} else {
$("input:checkbox[name='partitionFlag']")[2].checked = false;
}
$("#addModal").modal('show');
});
$("[name='uploadBtn']").on('click', function () {
let id = $(this).attr('id');
let b = id.split("_");
let imageId = b[0];
let inputId = b[1];
console.log(imageId)
console.log(inputId)
var options = {
type: 'post',
url: '/admin/upload/img',
dataType: 'json',
success: function (json) {
if (json.path) {
$("#" + inputId).val(json.path);
$("#" + imageId).attr("src", json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
}
};
$("#addForm").ajaxSubmit(options);
});
//打开新增页面
$('#btnAdd').on('click', function () {
cleanModal();
$("#addModal").modal('show');
});
//保存
$('#button-save').on('click', function () {
var androidUrl = $('#androidUrl').val();
var iosUrl = $('#iosUrl').val();
// 获取序列化字符串并转换为对象
let formData = $('#addForm').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
var name = $("#modal_name").val();
// 阿语名称
var ar_name = $("#ar_modal_name").val();
// 英语名称
var en_name = $("#en_modal_name").val();
// 国际化字段
var jsonName = {"zh":name,"ar":ar_name,"en":en_name}
const nameValue = JSON.stringify(jsonName);
// 修改属性值
formData.name = nameValue; // 将giftName修改为"newGiftName"
//分区
const partitionFlagArray = $("input:checkbox[name='partitionFlag']:checked").serializeArray();
let partitionFlag = 0;
for (let i = 0, len = partitionFlagArray.length; i < len; i++) {
console.log(partitionFlagArray[i]);
partitionFlag |= partitionFlagArray[i].value;
}
formData.partitionFlag = partitionFlag;
// 将修改后的对象转换回序列化字符串
let newSerializeStr = $.param(formData);
//做下数据校验
if (isEmpty(name)) {
$("#tipMsg").text("装扮名字不能为空");
$("#tipModal").modal('show');
return;
}
if (isEmpty(ar_name)) {
$("#tipMsg").text("阿语装扮名字不能为空");
$("#tipModal").modal('show');
return;
}
if (isEmpty(en_name)) {
$("#tipMsg").text("英语装扮名字不能为空");
$("#tipModal").modal('show');
return;
}
if (isEmpty(androidUrl) || isEmpty(iosUrl)) {
$("#tipMsg").text("图片不能为空");
$("#tipModal").modal('show');
return;
}
if ($("#addForm").validationEngine('validate')) {
console.log('$("#addForm").serialize()', $("#addForm").serialize())
$.ajax({
type: "post",
url: "/admin/chatbubble/saveOrUpdate",
data: newSerializeStr,
dataType: "json",
success: function (json) {
if (json.code === 200) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#addModal").modal('hide');
} else {
$("#tipMsg").text("保存失败,错误信息:" + json.message);
$("#tipModal").modal('show');
}
}
});
}
});
function cleanModal() {
$('#id').val('');
$("#addForm #modal_id").val('');
$('#addAndroidIconPicUrl').attr('src', '');
$('#add_android_UploadIconPic').val('');
$('#androidUrl').val('');
$('#addIosIconPicUrl').attr('src', '');
$('#add_ios_UploadIconPic').val('');
$('#iosUrl').val('');
$('#status').val('');
$('#modal_type').val('');
$('#modal_name').val('');
$('#ar_modal_name').val('');
$('#en_modal_name').val('');
$('input[name="partitionFlag"]').each(function() {
$(this).checked = false;
});
}
//判断空值
function isEmpty(data) {
if (data == null || data == undefined || data == "") {
return true;
}
return false;
}
//打开赠送弹窗
$("#table").on('click', '.opt-send', function () {
//清除数据
$('#sendModal').find('input').val('');
$('#sendModal').find('textarea').val('');
//设置数据
var id = $(this).attr("data-id");
$('#sendId').val(id);
$('#sendModal').modal('show');
});
//同步用户铭牌
$("#table").on('click', '.opt-sync', function () {
//设置数据
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/nameplate/sync.action",
data: {
id: id
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("同步成功");
$("#tipModal").modal('show');
} else {
$("#tipMsg").text("同步失败");
$("#tipModal").modal('show');
}
}
});
});
//赠送
$("#send").click(function () {
// debugger;
var erbanNo = $('#sendErbanNo').val().trim();//去掉首尾的空格和换行符
if (!(erbanNo.length > 0)) {
$("#tipMsg").text("请输入ID");
$("#tipModal").modal('show');
return;
}
if (erbanNo.length > 100) {
$("#tipMsg").text("单次赠送用户不得超过100");
$("#tipModal").modal('show');
return;
}
if (!$('#sendDays').val()) {
$("#tipMsg").text("请输入天数");
$("#tipModal").modal('show');
return;
}
var sendDays = $('#sendDays').val();
var sendDesc = $('#sendDesc').val();
var sendId = $('#sendId').val();
$("#tipMsg").text("赠送中,请稍后...");
$("#tipModal").modal('show');
if ($("#sendForm").validationEngine('validate')) {
$.ajax({
type: "get",
url: "/admin/chatbubble/send",
data: {
erbanNos: erbanNo,
days: sendDays,
bubbleId: sendId,
remark: sendDesc
},
dataType: "json",
success: function (json) {
if (json.code === 200) {
$('#sendModal').modal('hide');
$("#tipMsg").text(json.message);
TableHelper.doRefresh("#table");
}
}
});
}
});
});
},
initPartition() {
getPartitionInfoList().then(res => {
let data = res.data;
buildSelectOption(
"#partitionId",
null,
[{
value: '',
text: '全部',
}].concat(data.map((v) => {
return {
value: v.id,
text: v.desc,
};
}))
);
});
},
},
};
</script>
<style scoped>.fixed-table-body {
height: auto !important;
}
.pull-left {
width: 100% !important;
}</style>