Files
peko-admin-web/src/views/nameplate/NameplateInfoView.vue
liaozetao 616758549b 补充
2024-05-24 17:40:47 +08:00

797 lines
38 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="nameplateType" class="col-sm-1 control-label">铭牌类型:</label>
<div class="col-sm-2">
<select name="nameplateType" id="nameplateType" data-btn-class="btn-warning"
class="form-control">
<option value="" selected="selected">全部</option>
</select>
</div>
<label for="name" class="col-sm-1 control-label">铭牌名称:</label>
<div class="col-sm-2"><input type="text" class="form-control" name="nick" id="name"></div>
<label for="status" class="col-sm-1 control-label">状态:</label>
<div class="col-sm-2">
<select name="status" id="status" data-btn-class="btn-warning" class="form-control">
<option value="" selected="selected">全部</option>
</select>
</div>
<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>
</select>
</div>
</div>
<div class="col-sm-12">
<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="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="nameplateType" class="col-sm-4 control-label">铭牌类型:</label>
<div class="col-sm-6">
<select name="nameplateType" id="nameplateType1" data-btn-class="btn-warning"
class="form-control">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name1" class="col-sm-4 control-label">铭牌名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name1" id="name1" placeholder="请输入,5个字符内">
</div>
</div>
<div class="form-group">
<label for="ar_name1" class="col-sm-4 control-label">阿语铭牌名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name1" id="ar_name1" placeholder="请输入,5个字符内">
</div>
</div>
<div class="form-group">
<label for="en_name1" class="col-sm-4 control-label">英语铭牌名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control validate[required]" name="name1" id="en_name1" placeholder="请输入,5个字符内">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">用户自定义文案:</label>
<div class="col-sm-6">
<label class="radio-inline"><input type="radio" name="isCustomWord" value="0"></label>
<label class="radio-inline"><input type="radio" name="isCustomWord" value="1"></label>
</div>
</div>
<div class="form-group" id="fixedWord-div">
<label for="fixedWord" class="col-sm-4 control-label">固定文案:</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="fixedWord" id="fixedWord"
placeholder="请输入,5个字符内">
</div>
</div>
<div class="form-group">
<label for="days" class="col-sm-4 control-label">有效期:</label>
<div class="col-sm-6">
<input type="number" class="form-control validate[required]" name="days" id="days">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">图片:</label>
<div class="col-sm-6">
<img src="" id="addIconPicUrl" style="height:44px;" alt="">
<input type="file" id="addUploadIconPic" name="uploadFile"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<button class="btn btn-success" type="button" id="uploadBtn">上传</button>
<input type="hidden" id="iconPic" name="iconPic" class="form-control" />
<a href="javascript:void(0)" id="removeIconPic">清除</a>
</div>
</div>
<div class="form-group">
<label for="status1" class="col-sm-4 control-label">状态:</label>
<div class="col-sm-6">
<select name="status1" id="status1" data-btn-class="btn-warning" class="form-control">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="form-group">
<label for="type1" class="col-sm-4 control-label">铭牌款式:</label>
<div class="col-sm-6">
<select name="type1" id="type1" data-btn-class="btn-warning" class="form-control">
<option value="">请选择</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="sendNameplateModal" 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="nameplateSendForm">
<input type="hidden" name="sendNameplateId" id="sendNameplateId" />
<div class="form-group">
<label for="sendErbanNo" class="col-sm-3 control-label">平台号</label>
<div class="col-sm-9">
<textarea name="sendErbanNo" id="sendErbanNo" class="form-control validate[required]"
placeholder="多个平台号使用换行符分隔"></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="desc" 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 { getConfigValueByKey } from '@/api/system/sysconf';
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';
export default {
name: "NameplateInfoView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initPartition();
this.initData();
});
},
methods: {
initData() {
$(function () {
setStatusSelectOption();
setTypeSelectOption();
setStyleTypeSelectOption();
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'id', title: '铭牌id', align: 'middle', width: '5%' },
{ field: 'nameplateTypeStr', title: '铭牌类型', align: 'middle', width: '5%' },
{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: '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: 'iconPic',
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: 'isCustomWordStr', title: '是否自定义文案', align: 'middle', width: '5%' },
{
field: 'fixedWord',
title: '固定文案',
align: 'middle',
width: '5%',
formatter: function (val, row, index) {
if (isEmpty(val)) {
return '/';
} else {
return val;
}
}
},
{ field: 'days', title: '有效期(天)', align: 'middle', width: '5%' },
{ field: 'statusStr', title: '状态', align: 'middle', width: '5%' },
{ field: 'typeStr', title: '铭牌款式', align: 'middle', width: '5%' },
{ field: 'updateBy', title: '操作人', align: 'middle', width: '5%' },
{
field: 'updateTime',
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.nameplateType == 3) {
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;' +
'<button id="btnSync" name="btnSync" class="btn btn-sm btn-success opt-sync" data-id=' + val + '>' +
'<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: "-",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
nameplateType: $('#nameplateType').val(),
name: $('#name').val(),
status: $('#status').val(),
type: $('#type').val(),
partitionId: $('#partitionId').val(),
};
return param;
},
ajax:function(request){ //使用ajax请求
$.ajax({
type:"GET",
url:'/admin/nameplate/list',
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(i.name);
} else {
i.name = {
zh: value,
ar: value,
en: value,
};
}
return i;
}),
"total": res.total
});
},
error:function(error){
console.log(error);
}
})
},
toolbar: '#toolbar',
// url: '/admin/nameplate/list',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
$("#table").on("click", '#btnEdit', function () {
cleanNamePlateModal();
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/nameplate/get",
data: { id: id },
dataType: "json",
success: function (json) {
if (json) {
$("#id").val(json.id);
$("#nameplateType1").val(json.nameplateType);
let name = json.name;
if (name.startsWith('{') && name.endsWith('}')) {
var jsonName = JSON.parse(json.name);
console.log(jsonName)
$("#name1").val(jsonName.zh);
$("#ar_name1").val(jsonName.ar);
$("#en_name1").val(jsonName.en);
} else {
$("#name1").val(name);
$("#ar_name1").val(name);
$("#en_name1").val(name);
}
$('#nameplateType1').attr("disabled", "true");
if (!json.isCustomWord) {
$('input[name="isCustomWord"]').get(0).checked = true;
$('#fixedWord-div').addClass("hidden");
} else {
$('input[name="isCustomWord"]').get(1).checked = true;
$('#fixedWord-div').removeClass("hidden");
$('#fixedWord').val('');
}
//$('input[name="isCustomWord"]').val(json.isCustomWord);
$("#fixedWord").val(json.fixedWord);
$("#days").val(json.days);
$("#status1").val(json.status);
$("#type1").val(json.type);
if (json.iconPic) {
$('#iconPic').val(json.iconPic);
$('#addIconPicUrl').attr('src', json.iconPic);
}
//分区
let partitionFlag = json.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');
$("#modalLabel").text("编辑铭牌");
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
$('#uploadBtn').on('click', function () {
var options = {
type: 'post',
url: '/admin/upload/img',
dataType: 'json',
success: function (json) {
if (json.path) {
$('#iconPic').val(json.path);
$('#addIconPicUrl').attr("src", json.path);
} else {
$("#tipMsg").text(json.msg);
$("#tipModal").modal('show');
}
}
};
$("#addForm").ajaxSubmit(options);
});
$('#removeIconPic').on('click', function () {
$('#addIconPicUrl').attr('src', '');
$('#addUploadIconPic').val('');
$('#iconPic').val('');
});
//打开新增页面
$('#btnAdd').on('click', function () {
cleanNamePlateModal();
$("#addModal").modal('show');
$("#modalLabel").text("新增铭牌");
});
//保存
$('#button-save').on('click', function () {
var iconPic = $('#iconPic').val();
var status = $('#status1').val();
var type = $('#type1').val();
var days = $('#days').val();
var fixedWord = $('#fixedWord').val();
var isCustomWord = $('input[name="isCustomWord"]:checked').val();
var name = $('#name1').val();
var ar_name = $('#ar_name1').val();
var en_name = $('#en_name1').val();
var jsonName = {"zh":name,"ar":ar_name,"en":en_name}
const nameValue = JSON.stringify(jsonName);
var nameplateType = $('#nameplateType1').val();
var id = $('#id').val();
//分区
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;
}
//做下数据校验
if (isEmpty(nameplateType) && id == null) {
$("#tipMsg").text("铭牌类型不能为空");
$("#tipModal").modal('show');
return;
}
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(days)) {
$("#tipMsg").text("有效期不能为空");
$("#tipModal").modal('show');
return;
} else if (id == null && days < 1) {
$("#tipMsg").text("有效期不能小于1");
$("#tipModal").modal('show');
return;
} else if (id != null && days < 0) {
$("#tipMsg").text("有效期不能小于0");
$("#tipModal").modal('show');
return;
}
if (isEmpty(status)) {
$("#tipMsg").text("状态不能为空");
$("#tipModal").modal('show');
return;
}
if (isEmpty(iconPic)) {
$("#tipMsg").text("图片不能为空");
$("#tipModal").modal('show');
return;
}
if ($("#addForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/nameplate/save",
data: {
nameplateType: nameplateType,
name: nameValue,
isCustomWord: isCustomWord,
fixedWord: fixedWord,
days: days,
status: status,
type: type,
iconPic: iconPic,
id: id,
partitionFlag: partitionFlag,
},
dataType: "json",
success: function (json) {
if (json.success == 'true') {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#addModal").modal('hide');
} else {
$("#tipMsg").text("保存失败,错误信息:" + json.msg);
$("#tipModal").modal('show');
}
}
});
}
});
//是否自定义文案变化
$('input[type=radio][name=isCustomWord]').change(function () {
if ($(this).val() == 1) {
$('#fixedWord-div').removeClass("hidden");
} else {
$('#fixedWord-div').addClass("hidden");
}
});
//打开赠送铭牌弹窗
$("#table").on('click', '.opt-send', function () {
//清除数据
$('#sendNameplateModal').find('input').val('');
$('#sendNameplateModal').find('textarea').val('');
//设置数据
var headWearId = $(this).attr("data-id");
$('#sendNameplateId').val(headWearId);
$('#sendNameplateModal').modal('show');
});
//同步用户铭牌
$("#table").on('click', '.opt-sync', function () {
//设置数据
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/nameplate/sync",
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("请输入平台号");
$("#tipModal").modal('show');
return;
}
if (!$('#sendDays').val()) {
$("#tipMsg").text("请输入体验天数");
$("#tipModal").modal('show');
return;
}
var sendDays = $('#sendDays').val();
var sendDesc = $('#sendDesc').val();
var nameplateId = $('#sendNameplateId').val();
$("#tipMsg").text("赠送中,请稍后...");
$("#tipModal").modal('show');
if ($("#NameplateSendForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/nameplate/send",
data: {
nameplateId: nameplateId,
erbanNo: erbanNo,
sendDesc: sendDesc,
days: sendDays
},
dataType: "json",
success: function (json) {
if (json.code == 100) {
$('#sendNameplateModal').modal('hide');
$("#tipMsg").text("全部赠送成功");
TableHelper.doRefresh("#table");
} else if (json.code == 200) {
$("#tipMsg").text("部分用户赠送失败,赠送失败平台号:" + json.erban + ",赠送失败原因:" + json.message);
} else {
$("#tipMsg").text("全部赠送失败,赠送失败原因:" + json.message);
}
}
});
}
});
});
},
initPartition() {
getPartitionInfoList().then(res => {
let data = res.data;
buildSelectOption(
"#partitionId",
null,
[{
value: '',
text: '全部',
}].concat(data.map((v) => {
return {
value: v.id,
text: v.desc,
};
}))
);
});
},
},
};
function cleanNamePlateModal() {
$('#id').val('');
$('#addIconPicUrl').attr('src', '');
$('#addUploadIconPic').val('');
$('#iconPic').val('');
$('#status1').val('');
$('#type1').val('');
$('#days').val('');
$('#fixedWord').val('');
$('input[name="isCustomWord"]').each(function () {
$(this).removeAttr("checked");
});
$('#name1').val('');
$('#ar_name1').val('');
$('#en_name1').val('');
$('#nameplateType1').val('');
$('#name1').removeAttr("readonly");
$('#nameplateType1').removeAttr("disabled");
$('#fixedWord-div').removeClass("hidden");
$('input[name="partitionFlag"]').each(function() {
$(this).checked = false;
});
}
//判断空值
function isEmpty(data) {
if (data == null || data == undefined || data == "") {
return true;
}
return false;
}
function setStatusSelectOption() {
var rows = {
"0": '待上架',
"1": '上架',
"2": '下架',
"3": '已删除'
};
console.log(rows);
for (var key in rows) {
$('#status').append('<option value="' + key + '">' + rows[key] + '</option>');
$('#status1').append('<option value="' + key + '">' + rows[key] + '</option>');
}
}
function setStyleTypeSelectOption() {
getConfigValueByKey({
'configId': 'heartbeat_nameplate',
}).then(res => {
let sysConf = res.data;
if (sysConf && sysConf.configValue) {
let data = JSON.parse(sysConf.configValue);
let floor = 52000;
let upper = 131400;
if (data.length == 2) {
floor = data[0];
upper = data[1];
}
var rows = {
'1': floor + '~' + (upper - 1) + '送出',
'2': floor + '~' + (upper - 1) + '收到',
'3': upper + '+送出',
'4': upper + '+收到',
'5': 'CP铭牌审核送出',
'6': '粉丝团铭牌送出',
'7': '贵族等级铭牌送出'
};
console.log(rows);
for (var key in rows) {
$('#type').append('<option value="' + key + '">' + rows[key] + '</option>');
$('#type1').append('<option value="' + key + '">' + rows[key] + '</option>');
}
}
});
}
function setTypeSelectOption() {
var rows = {
"0": '官方主播',
"1": '普通',
"3": '贵族铭牌'
};
console.log(rows);
for (var key in rows) {
$('#nameplateType').append('<option value="' + key + '">' + rows[key] + '</option>');
$('#nameplateType1').append('<option value="' + key + '">' + rows[key] + '</option>');
}
}
</script>
<style scoped>
.fixed-table-body {
height: auto !important;
}
.pull-left {
width: 100% !important;
}</style>