Files
peko-admin-web/src/views/hall/ClanAdminView.vue
2023-12-28 18:19:45 +08:00

727 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">
<div class="col-sm-12">
<label for="clanId" class="col-sm-2 control-label">家族id:</label>
<div class="col-sm-4"><input type="text" class="form-control" name="name" id="clanId"
placeholder="请输入家族id填多个用,隔开"></div>
<label for="erbanNo" class="col-sm-2 control-label">族长平台号:</label>
<div class="col-sm-4"><input type="text" class="form-control" name="name" id="erbanNo"
placeholder="请输入族长平台号,填多个用,隔开"></div>
</div>
<div class="col-sm-12">
<label for="queryClanLevel" class="col-sm-2 control-label">家族等级</label>
<div class="col-sm-4">
<select id="queryClanLevel" name="queryClanLevel" class="input-sm">
</select>
</div>
</div>
<div class="col-sm-12">
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>查询
</button>
<button id="addBtn" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>添加
</button>
</div>
</div>
</div>
<!-- .content -->
<div id="table"></div>
</div>
</section>
<div class="modal fade" id="addClanModal" 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">&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="modal_elderErbanNo" class="col-sm-3 control-label">族长平台号<font color="red">*</font>
:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="modal_elderErbanNo"
id="modal_elderErbanNo">
</div>
</div>
<div class="form-group">
<label for="module_clanName" class="col-sm-3 control-label">家族名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="module_clanName" id="module_clanName">
</div>
</div>
<div class="form-group">
<label for="module_hallOwnerErbanNoStr" class="col-sm-3 control-label">会长平台号<font color="red">*
</font>:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control validate[required]"
name="module_hallOwnerErbanNoStr" id="module_hallOwnerErbanNoStr" placeholder="用,隔开填多个">
</div>
</div>
<div class="form-group">
<label for="module_associateAccount" class="col-sm-3 control-label">关联房间:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control" name="module_associateAccount"
id="module_associateAccount" placeholder="用,隔开填多个">
</div>
</div>
<div class="form-group">
<label for="addClanLevel" class="col-sm-3 control-label">家族等级<font color="red">*</font>:</label>
<div class="col-sm-9">
<select id="addClanLevel" name="addClanLevel" class="input-sm">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">家族封面:</label>
<div class="col-sm-8">
<img src="" id="addAvatarUrl" style='width:40px;height:40px;' alt="">
<input type="file" id="addUploadFile" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="addUploadBtn">上传</button>
<input type="hidden" id="addAvatar" name='avatar' class="form-control">
<span id="addPicImgInfo" style="color:red;"></span>
</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="add">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updateClanModal" 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">&times;</span>
</button>
<h4 class="modal-title" id="updateModalLabel">编辑</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="updateForm">
<input type="hidden" name="id" id="updateId" />
<div class="form-group">
<label for="updatemodal_elderErbanNo" class="col-sm-3 control-label">族长平台号<font color="red">*
</font>:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[required]" name="modal_elderErbanNo"
id="updatemodal_elderErbanNo">
</div>
</div>
<div class="form-group">
<label for="updatemodule_clanName" class="col-sm-3 control-label">家族名称:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="module_clanName" id="updatemodule_clanName">
</div>
</div>
<div class="form-group">
<label for="updatemodule_hallOwnerErbanNoStr" class="col-sm-3 control-label">会长平台号<font
color="red">*</font>:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control validate[required]"
name="module_hallOwnerErbanNoStr" id="updatemodule_hallOwnerErbanNoStr"
placeholder="用,隔开填多个">
</div>
</div>
<div class="form-group">
<label for="updatemodule_associateAccount" class="col-sm-3 control-label">关联房:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control validate[required]"
name="module_associateAccount" id="updatemodule_associateAccount" placeholder="用,隔开填多个">
</div>
</div>
<div class="form-group">
<label for="editClanLevel" class="col-sm-3 control-label">家族等级<font color="red">*</font>
:</label>
<div class="col-sm-9">
<select id="editClanLevel" name="editClanLevel" class="input-sm">
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">家族封面:</label>
<div class="col-sm-8">
<img src="" id="editAvatarUrl" style='width:40px;height:40px;' alt="">
<input type="file" id="editUploadFile" name='uploadFile'
accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
<button class="btn btn-success" type='button' id="editUploadBtn">上传</button>
<input type="hidden" id="editAvatar" name='avatar' class="form-control">
<span id="editPicImgInfo" style="color:red;"></span>
</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="updateClan">确定</button>
</div>
</div>
</div>
</div>
<!-- 超管信息 -->
<div class="modal fade" id="worldTypeModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<div class="modal-title" id="worldTypeModalLabel"></div>
</div>
<div class="modal-body">
<form action="" id="addSuper" class="form-horizontal">
<!-- <input type="hidden" id="modal_id" name="id"/>-->
<div class="form-group" id="superManageList">
<div class="col-sm-8" hidden="hidden">
<input hidden="hidden" type="text" class="form-control " name="clanId" id="modal_clanId"
placeholder="族长id">
</div>
<label class="col-sm-3 control-label">超管</label>
<table border="1">
<tr>
<th hidden="hidden" style="width: 100px;text-align: center;">uid</th>
<th style="width: 100px;text-align: center;">平台号</th>
<th style="width: 100px;text-align: center;">昵称</th>
<th style="width: 100px;text-align: center;">管理房间</th>
<th style="width: 100px;text-align: center;">操作</th>
</tr>
</table>
</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 js-quick-search" data-primary="addSave">新增超管</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="superManageModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<div class="modal-title" id="superManageModalLabel"></div>
</div>
<div class="modal-body">
<form action="" id="addSuperManage" class="form-horizontal">
<div class="form-group">
<div hidden="hidden" class="col-sm-8">
<input hidden="hidden" type="text" class="form-control validate[required,custom[integer]]"
name="type" id="modal_type">
</div>
<label for="modal_superErbanNo" class="col-sm-3 control-label">平台号</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,custom[integer]]"
name="superErbanNo" id="modal_superErbanNo" placeholder="请输入平台号">
</div>
</div>
<div class="form-group">
<label for="modal_superManageErbanNo" class="col-sm-2 control-label">管理的房间:</label>
<div class="col-sm-10">
<textarea class="form-control" name="superManageErbanNo" id="modal_superManageErbanNo"
style="height:250px;" placeholder="多个用逗号隔开,只能输入属于该家族的房间"></textarea>
</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" data-primary="addSave" id="superSave">保存</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
let tableLoaded = false;
let currParams = {};
export default {
name: "ClanAdminView",
setup() {
function showText(obj) {
let text = unescape($(obj).prop('title'));
$("#tipMsg").text(text);
$("#tipModal").modal('show');
}
window.showText = showText;
return {
showText
};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'clanId', title: '家族id', align: 'center', width: '5%' },
{ field: 'clanElderUid', title: '族长uid', align: 'center', width: '5%' },
{ field: 'clanElderErbanNo', title: '族长平台号', align: 'center', width: '5%' },
{
field: 'avatar', title: '家族封面', align: 'center', valign: 'middle', width: '10%',
formatter: function (val, row, index) {
return "<img src='" + val + "' width='40' height='40'>";
}
},
{ field: 'hallNum', title: '公会数量', align: 'center', width: '5%' },
{ field: 'clanMemberNum', title: '家族人数', align: 'center', width: '5%' },
{ field: 'superAdminNum', title: '超管人数', align: 'center', width: '5%' },
{
field: 'level', title: '等级', align: 'center', width: '5%', formatter: function (val, row, index) {
const levelName = row.levelName;
return `${val}-${levelName}`;
}
},
{ field: 'clanAccountAssociate', title: '关联账号', align: 'center', width: '5%' },
{
field: 'clanId',
title: '操作',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
const clanId = row.clanId;
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" clanId=' + clanId + '>' +
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
'<button class="btn btn-sm btn-danger opt-remove" clanId=' + clanId +
'><i class="glyphicon glyphicon-remove"></i>删除</button>' +
'<button id="superAdmin" name="superAdmin" class="btn btn-sm btn-success opt-super" clanId=' + clanId + '>' +
'<i class="glyphicon glyphicon-edit"></i> 设置超管</button>';
}
}
],
undefinedText: 0,
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [10, 20, 50, 100, 200, 300, 500],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
pageNum: params.pageNumber,
pageSize: params.pageSize,
erbanNo: $('#erbanNo').val(),
clanId: $('#clanId').val(),
level: $("#queryClanLevel").val()
};
currParams = param;
return param;
},
toolbar: '#toolbar',
url: '/admin/clan/listStats.action',
onLoadSuccess: function () { //加载成功时执行
tableLoaded = true;
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
if (tableLoaded || currParams.pageNumber > 1) {
TableHelper.doRefreshAndToPage1('#table');
} else {
TableHelper.doRefresh('#table');
}
});
//新建标签
$("#addBtn").click(function () {
$("#modal_elderErbanNo").val(""),
$("#module_clanName").val(""),
$("#module_hallOwnerErbanNoStr").val(""),
$("#addAvatar").val(""),
$('#addAvatarUrl').attr("src", '');
$("#addPicImgInfo").html('');
$("#addUploadFile").val('');
$("#addClanModal").modal('show');
});
//获取家族信息
$('#table').on('click', '.opt-edit', function () {
const clanId = $(this).attr('clanId');
$.ajax({
type: "get",
url: "/admin/clan/getClanInfo.action",
data: {
clanId: clanId,
},
dataType: "json",
success: function (json) {
if (json.success) {
console.log(json.data)
$("#updatemodal_elderErbanNo").val(json.data.clanElderErbanNo);
$("#updatemodule_clanName").val(json.data.clanName);
$("#updatemodule_hallOwnerErbanNoStr").val(json.data.hallOwnerErbanNo);
$("#editClanLevel").val(json.data.level);
// 设置图片
$("#editUploadFile").val('');
$('#editAvatar').val(json.data.avatar);
$('#editAvatarUrl').attr("src", json.data.avatar);
$('#updatemodule_associateAccount').val(json.data.associateAccount);
if (json.data.avatar != '') {
$("#editPicImgInfo").html('已上传');
} else {
$("#editPicImgInfo").html('未上传');
}
} else {
$("#tipMsg").text("获取家族信息失败." + json.message);
}
}
})
$("#updateId").val(clanId);
$("#updateClanModal").modal('show');
});
// 获取超管列表
$('#table').on('click', '.opt-super', function () {
$('#superManageList table td').remove();
$('#superManageList table button').remove();
const clanId = $(this).attr('clanId');
$.ajax({
type: "get",
url: "/admin/clan/getClanSuperAdminInfo.action",
data: {
clanId: clanId,
},
dataType: "json",
success: function (json) {
if (json.success) {
var data = json.data;
var superManage = '';
data.forEach(function (res) {
superManage += `
<tr>
<td hidden="hidden" class="superUid" style="text-align: center;">${res.uid}</td>
<td style="text-align: center;">${res.erbanNo}</td>
<td style="text-align: center;">${res.nick}</td>
<td style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${escape(val)}" onclick="showText(this);">${res.manageRoomErbanNoList}</td>
<td style="text-align: center;">
<button type="button" class="btn btn-sm btn-success opt-super-update" >编辑</button>
<button type="button" class="btn btn-sm btn-danger opt-delete" >删除</button>
</td>
</tr>
`
});
$('#superManageList table').append(superManage);
$('#modal_clanId').val(clanId);
// 编辑超管点击事件
$('.opt-super-update').click(function () {
var superUid = $(this).parent().siblings('.superUid').text();
$.ajax({
type: "get",
url: "/admin/clan/getSuperAdminManageInfo.action",
data: { superUid: superUid },
dataType: "json",
success: function (json) {
var data = json.data;
$('#modal_superErbanNo').val(data.erbanNo);
$('#modal_superManageErbanNo').val(data.manageRoomErbanNoList);
$('#modal_type').val("1");
}
});
$('#superManageModalLabel').text('设置超管');
$('#superManageModal').modal('show');
})
$('.opt-delete').click(function () {
var param = {};
var superUid = $(this).parent().siblings('.superUid').text();
param.superUid = superUid;
console.log(param)
if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回,请谨慎操作!")) {
$.ajax({
type: 'post',
url: "/admin/clan/deleteSuperAdmin.action",
data: param,
dataType: "json",
success: function (json) {
console.log(json)
if (json.success) {
$("#tipMsg").text("删除成功,请刷新页面更新数据");
$("#tipModal").modal('show');
} else {
$("#tipMsg").text(json.message);
$("#tipModal").modal('show');
}
}
});
}
})
} else {
$("#tipMsg").text("获取超管列表失败." + json.message);
}
}
})
$('#worldTypeModalLabel').text('编辑超管');
$('#worldTypeModal').modal('show');
});
// 保存超管
$('#superSave').on('click', function () {
if ($('#addSuperManage').validationEngine('validate')) {
var param = {};
param.superErbanNo = $('#modal_superErbanNo').val();
param.superManageErbanNo = $('#modal_superManageErbanNo').val();
param.clanId = $('#modal_clanId').val();
param.type = $('#modal_type').val();
$.ajax({
type: 'post',
url: '/admin/clan/superSaveOrUpdate.action',
data: param,
dataType: 'json',
success: function (res) {
console.log(res)
if (res.success) {
$('#tipMsg').text('保存成功,请刷新页面更新数据');
$('#tipModal').modal('show');
// TableHelper.doRefresh('#table')
} else {
$('#tipMsg').text('保存失败,错误码:' + res.message);
$('#tipModal').modal('show');
}
}
})
}
});
// 新增超管弹窗
$('.js-quick-search').click(function () {
$("#modal_superErbanNo").val(""),
$("#modal_superManageErbanNo").val(""),
$("#modal_type").val(""),
$('#superManageModalLabel').text('新增超管');
$('#superManageModal').modal('show');
})
//删除家族
$('#table').on('click', '.opt-remove', function () {
const clanId = $(this).attr('clanId');
if (confirm("你确认删除该家族吗?")) {
$.ajax({
type: "get",
url: "/admin/clan/del.action",
data: {
clanId: clanId,
},
dataType: "json",
success: function (json) {
if (json.success) {
console.log(json.data)
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除家族失败." + json.message);
$('#tipModal').modal('show');
}
}
})
}
});
// 编辑
$("#updateClan").click(function () {
console.log("this", this);
console.log("updateId", $("#updateId").val());
$.ajax({
type: "get",
url: "/admin/clan/update.action",
data: {
clanId: $("#updateId").val(),
elderErbanNo: $("#updatemodal_elderErbanNo").val(),
clanName: $("#updatemodule_clanName").val(),
hallOwnerErbanNoStr: $("#updatemodule_hallOwnerErbanNoStr").val(),
associateAccount: $("#updatemodule_associateAccount").val(),
level: $("#editClanLevel").val(),
avatar: $("#editAvatar").val()
},
dataType: "json",
success: function (json) {
if (json.success) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTagEditModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.message);
$("#tipModal").modal('show');
}
}
});
});
// 新增
$("#add").click(function () {
console.log("$(#avatar).val()", $("#addAvatar").val())
$.ajax({
type: "get",
url: "/admin/clan/add.action",
data: {
elderErbanNo: $("#modal_elderErbanNo").val(),
clanName: $("#module_clanName").val(),
hallOwnerErbanNoStr: $("#module_hallOwnerErbanNoStr").val(),
associateAccount: $("#module_associateAccount").val(),
level: $("#addClanLevel").val(),
avatar: $("#addAvatar").val()
},
dataType: "json",
success: function (json) {
if (json.success) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTagEditModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.message);
$("#tipModal").modal('show');
}
}
});
});
$.ajax({
type: "get",
url: "/admin/clan/listClanLevelForSelect.action",
dataType: "json",
success: function (json) {
if (json.success) {
renderLevelSelector(json.data);
}
}
});
function renderLevelSelector(levelList) {
let options = [];
levelList.forEach(item => {
options.push(`<option value="${item.level}">${item.levelName}</option>`)
});
$('#queryClanLevel').html(options.join())
$('#addClanLevel').html(options.join())
$('#editClanLevel').html(options.join())
}
$('#addUploadBtn').on('click', function () {
$.ajaxFileUpload({
fileElementId: 'addUploadFile', //需要上传的文件域的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就是服务器返回的数据。
console.log('path', json.path)
if (json.path) {
$('#addAvatar').val(json.path);
$('#addAvatarUrl').attr('src', json.path);
if (json.path != '') {
$("#addPicImgInfo").html('已上传成功');
} else {
$("#addPicImgInfo").html('未上传成功');
}
} else {
$('#tipMsg').text(json.msg);
$('#tipModal').modal('show');
}
}
});
})
$('#editUploadBtn').on('click', function () {
$.ajaxFileUpload({
fileElementId: 'editUploadFile', //需要上传的文件域的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就是服务器返回的数据。
console.log('path', json.path)
if (json.path) {
$('#editAvatar').val(json.path);
$('#editAvatarUrl').attr('src', json.path);
if (json.path != '') {
$("#editPicImgInfo").html('已上传成功');
} else {
$("#editPicImgInfo").html('未上传成功');
}
} else {
$('#tipMsg').text(json.msg);
$('#tipModal').modal('show');
}
}
});
})
});
}
},
};
</script>
<style scoped></style>