moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页-国家列表

Browse Source
This commit is contained in:
khalil
2025-07-23 20:17:19 +08:00
parent 4ef37013a4
commit 6870e53d12
3 changed files with 994 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/api/room/roomTabRegion.js Normal file
View File

@@ -0,0 +1,40 @@
import request from '@/utils/request';
export const listRegionTab = query => {
return request({
url: '/admin/roomTabRegion/listRegionTab',
method: 'get',
params: query
});
};
export const list = query => {
return request({
url: '/admin/roomTabRegion/list',
method: 'get',
params: query
});
};
export const get = query => {
return request({
url: '/admin/roomTabRegion/get',
method: 'get',
params: query
});
};
export const save = query => {
return request({
url: '/admin/roomTabRegion/save',
method: 'post',
params: query
});
};
export const del = query => {
return request({
url: '/admin/roomTabRegion/delete',
method: 'post',
params: query
});
};

958
src/views/room/RoomTabMapView.vue
View File

@@ -1,133 +1,197 @@
<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="roomTab" class="col-sm-2 control-label">房间Tab:</label>
<div class="col-sm-2">
<select name="roomTab" id="roomTab" class="col-sm-2 form-control" data-btn-class="btn-warning"
onchange="selectOnTabChange(this)">
</select>
</div>
<label for="partitionId" class="col-sm-2 control-label">地区:</label>
<div class="col-sm-2">
<select name="partitionId" id="partitionId" class="form-control"></select>
</div>
<button id="btnAddRoom" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>添加房间
</button>
</div>
<div class="col-sm-12">
<label for="erbanNo" class="col-sm-2 control-label">房主平台号:</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="erbanNo" id="erbanNo" placeholder="">
</div>
<label for="roomTitle" class="col-sm-2 control-label">房间标题:</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="roomTitle" id="roomTitle" placeholder="">
</div>
<button id="btnSearch" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>查询
</button>
</div>
</div>
<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="roomTab"
class="col-sm-2 control-label">房间Tab:</label>
<div class="col-sm-2">
<select name="roomTab"
id="roomTab"
class="col-sm-2 form-control"
data-btn-class="btn-warning"
onchange="selectOnTabChange(this)">
</select>
</div>
<!-- .content -->
<div id="table"></div>
</div>
</section>
<!-- 编辑弹框 -->
<div class="modal fade" id="roomTabMapModal" 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_isTop" class="col-sm-3 control-label">是否置顶<font color="red">*</font>：</label>
<div class="col-sm-9">
<select name="isTop" id="modal_isTop" class="form-control validate[required]">
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
</div>
<div class="form-group">
<label for="modal_seq" class="col-sm-3 control-label">置顶排序<font color="red">*</font>:</label>
<div class="col-sm-9">
<input type="text" class="form-control validate[custom[integer]]" name="seq" id="modal_seq"
placeholder="数字小的排前面，必填">
</div>
</div>
<div class="form-group">
<label for="modal_topStart" class="col-sm-3 control-label">置顶开始时间<font color="red">*</font>
:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control datetime" name="topStart"
id="modal_topStart">
</div>
</div>
<div class="form-group">
<label for="modal_topEnd" class="col-sm-3 control-label">置顶结束时间<font color="red">*</font>
:</label>
<div class="col-sm-9">
<input type="text" class="input-sm form-control datetime" name="topEnd" id="modal_topEnd">
</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="btnConfirm">确定</button>
</div>
<label for="partitionId"
class="col-sm-2 control-label">地区:</label>
<div class="col-sm-2">
<select name="partitionId"
id="partitionId"
class="form-control"></select>
</div>
<button id="btnAddRoom"
class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>添加房间
</button>
</div>
<div class="col-sm-12">
<label for="erbanNo"
class="col-sm-2 control-label">房主平台号:</label>
<div class="col-sm-2">
<input type="text"
class="form-control"
name="erbanNo"
id="erbanNo"
placeholder="">
</div>
<label for="roomTitle"
class="col-sm-2 control-label">房间标题:</label>
<div class="col-sm-2">
<input type="text"
class="form-control"
name="roomTitle"
id="roomTitle"
placeholder="">
</div>
<button id="btnSearch"
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="addRoomTabMapModal" 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="modalLabel2">增加房间</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="addForm2">
<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>
</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="btnConfirm2">确定</button>
</div>
</div>
<!-- 编辑弹框 -->
<div class="modal fade"
id="roomTabMapModal"
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_isTop"
class="col-sm-3 control-label">是否置顶<font color="red">*</font>：</label>
<div class="col-sm-9">
<select name="isTop"
id="modal_isTop"
class="form-control validate[required]">
<option value="1">是</option>
<option value="0">否</option>
</select>
</div>
</div>
<div class="form-group">
<label for="modal_seq"
class="col-sm-3 control-label">置顶排序<font color="red">*</font>:</label>
<div class="col-sm-9">
<input type="text"
class="form-control validate[custom[integer]]"
name="seq"
id="modal_seq"
placeholder="数字小的排前面，必填">
</div>
</div>
<div class="form-group">
<label for="modal_topStart"
class="col-sm-3 control-label">置顶开始时间<font color="red">*</font>
:</label>
<div class="col-sm-9">
<input type="text"
class="input-sm form-control datetime"
name="topStart"
id="modal_topStart">
</div>
</div>
<div class="form-group">
<label for="modal_topEnd"
class="col-sm-3 control-label">置顶结束时间<font color="red">*</font>
:</label>
<div class="col-sm-9">
<input type="text"
class="input-sm form-control datetime"
name="topEnd"
id="modal_topEnd">
</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="btnConfirm">确定</button>
</div>
</div>
</div>
</div>
<!-- 增加房间弹框 -->
<div class="modal fade"
id="addRoomTabMapModal"
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="modalLabel2">增加房间</h4>
</div>
<div class="modal-body">
<form class="form-horizontal"
id="addForm2">
<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>
</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="btnConfirm2">确定</button>
</div>
</div>
</div>
</div>
</template>
<script>
@@ -137,337 +201,339 @@ import { getPartitionInfoList } from '@/api/partition/partitionInfo';
import { buildSelectOption } from '@/utils/system-helper';
export default {
name: "RoomTabMapView",
setup() {
// tab类型选择变化查询
function selectOnTabChange(obj) {
// console.log(obj);
TableHelper.doRefresh('#table');
}
window.selectOnTabChange = selectOnTabChange;
return {
selectOnTabChange
};
},
created() {
this.$nextTick(function () {
this.initPartition();
this.initData();
name: "RoomTabMapView",
setup () {
// tab类型选择变化查询
function selectOnTabChange (obj) {
// console.log(obj);
TableHelper.doRefresh('#table');
}
window.selectOnTabChange = selectOnTabChange;
return {
selectOnTabChange
};
},
created () {
this.$nextTick(function () {
this.initPartition();
this.initData();
});
},
methods: {
initData () {
$(function () {
$('.datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
},
methods: {
initData() {
$(function () {
$('.datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
// 拉取所有tab
getRoomTabs();
// 拉取所有tab
getRoomTabs();
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'erbanNo', title: '房主平台号', align: 'center', width: '5%' },
{ field: 'roomUid', title: '房主Uid', align: 'center', width: '5%' },
{ field: 'roomTitle', title: '房间标题', align: 'center', width: '8%' },
{
field: 'isPermitRoom',
title: '房间类型',
align: 'center',
width: '8%',
formatter: function (val, row, index) {
let value = '';
if (val == 1) {
value = '牌照房';
} else if (val == 4) {
value = '个播房';
} else {
value = '非牌照房';
}
return value;
}
},
{ field: 'roomTag', title: '房间标签', align: 'center', width: '5%' },
{ field: 'partitionDesc', title: '地区', align: 'center', valign: 'middle' },
{
field: 'isTop', title: '是否置顶', align: 'center', valign: 'middle', width: '5%',
formatter: function (val, row, index) {
if (val) {
return '是';
} else {
return '否';
}
}
},
{ field: 'topStart', title: '置顶开始时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
{ field: 'topEnd', title: '置顶结束时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
{ field: 'seq', title: '置顶排序', align: 'center', width: '5%' },
{
field: 'id',
title: '操作',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
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 class="btn btn-sm btn-danger opt-remove" data-id=' + val +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
undefinedText: "",
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [10, 20, 50, 100, 200, 500],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var tabId = $('#roomTab').val();
if (tabId == null || tabId.length <= 0) {
tabId = '1';
}
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
erbanNo: $('#erbanNo').val(),
roomTitle: $('#roomTitle').val(),
tabId: tabId,
partitionId: $('#partitionId').val(),
};
console.log(param);
return param;
},
ajax: function (request) { //使用ajax请求
$.ajax({
type: "GET",
url: '/admin/roomTabMap/list',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: request.data,
success: function (res) {
console.log(res);
request.success({
rows: res.data.roomTabMapList,
total: res.data.totalPage
});
},
error: function (error) {
console.log(error);
}
})
},
toolbar: '#toolbar',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
// 添加房间打开弹窗
$("#btnAddRoom").on('click', function () {
//清除数据
$('#addRoomTabMapModal').find('input').val('');
$('#addRoomTabMapModal').find('textarea').val('');
//$('#modal_isHome2').val('');
$('#addRoomTabMapModal').modal('show');
});
// 添加房间
$("#btnConfirm2").click(function () {
var erbanNo = $('#sendErbanNo').val().trim();//去掉首尾的空格和换行符
if (!(erbanNo.length > 0)) {
$("#tipMsg").text("请输入房间平台号");
$("#tipModal").modal('show');
return;
}
var tabId = $('#roomTab').val();
if (tabId.length <= 0) {
$("#tipMsg").text("请选择正确的房间Tab");
$("#tipModal").modal('show');
return;
}
if ($("#addForm2").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/roomTabMap/add",
data: {
erbanNo: erbanNo,
isHome: 1,
tabId: tabId,
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("成功用户:" + json.data.success + " 失败用户:" + json.data.fail);
$("#tipModal").modal('show');
TableHelper.doRefresh('#table');
$("#addRoomTabMapModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.data.msg);
$("#tipModal").modal('show');
$("#addRoomTabMapModal").modal('hide');
}
}
});
}
});
// 编辑或者新增
$("#btnConfirm").click(function () {
var id = $("#id").val();
var seq = $("#modal_seq").val();
var isHome = $("#modal_isHome").val();
var isTop = $("#modal_isTop").val();
var topStart = $('#modal_topStart').val();
var topEnd = $('#modal_topEnd').val();
if ($("#addForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/roomTabMap/save",
data: {
id: id,
seq: seq,
isHome: isHome,
isTop: isTop,
topStart: topStart,
topEnd: topEnd,
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTabMapModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTabMapModal").modal('hide');
}
}
});
}
});
// 获取信息
$("#table").on("click", '.opt-edit', function () {
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/roomTabMap/get",
data: { id: id },
dataType: "json",
success: function (ret) {
if (ret.code == 200) {
var json = ret.data.roomTabMap;
$("#id").val(id);
$("#modal_seq").val(json.seq);
$("#modal_isTop").val(json.isTop ? 1 : 0);
$("#modal_isHome").val(json.isHome ? 1 : 0);
$('#modal_topStart').val(formatTime(json.topStart));
$('#modal_topEnd').val(formatTime(json.topEnd));
// 打开编辑弹窗
$("#roomTabMapModal").modal('show');
$("#modalLabel").text("编辑");
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
// 删除操作
$("#table").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除吗? \r\n 删除后不会恢复，请谨慎操作！")) {
$.ajax({
type: 'post',
url: "/admin/roomTabMap/delete",
data: { id: id },
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
// 通过接口获取所有房间tab
function getRoomTabs() {
$.ajax({
url: "/admin/roomTab/excludelist?page=1&pageSize=1000", //后台controller中的请求路径
type: 'GET',
async: false,
datatype: 'json',
success: function (res) {
console.log(res);
if (res) {
var data = res.data.roomTabList;
var tabs = [];
for (var i = 0, len = data.length; i < len; i++) {
var item = data[i];
//拼接成多个<option><option/>
tabs.push('<option value="' + item.id + '">' + item.name + '</option>')
}
$("#roomTab").html(tabs.join(' ')); //填充到select标签中
}
},
error: function () {
alert('查询房间tab出错');
}
});
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'erbanNo', title: '房主平台号', align: 'center', width: '5%' },
{ field: 'roomUid', title: '房主Uid', align: 'center', width: '5%' },
{ field: 'roomTitle', title: '房间标题', align: 'center', width: '8%' },
{
field: 'isPermitRoom',
title: '房间类型',
align: 'center',
width: '8%',
formatter: function (val, row, index) {
let value = '';
if (val == 1) {
value = '牌照房';
} else if (val == 4) {
value = '个播房';
} else {
value = '非牌照房';
}
return value;
}
},
{ field: 'roomTag', title: '房间标签', align: 'center', width: '5%' },
{ field: 'partitionDesc', title: '地区', align: 'center', valign: 'middle' },
{
field: 'isTop', title: '是否置顶', align: 'center', valign: 'middle', width: '5%',
formatter: function (val, row, index) {
if (val) {
return '是';
} else {
return '否';
}
}
},
{ field: 'topStart', title: '置顶开始时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
{ field: 'topEnd', title: '置顶结束时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
{ field: 'seq', title: '置顶排序', align: 'center', width: '5%' },
{
field: 'id',
title: '操作',
align: 'center',
width: '10%',
formatter: function (val, row, index) {
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 class="btn btn-sm btn-danger opt-remove" data-id=' + val +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
undefinedText: "",
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [10, 20, 50, 100, 200, 500],
search: false,
sidePagination: "server", //表示服务端请求
queryParamsType: "undefined",
queryParams: function queryParams (params) { //设置查询参数
var tabId = $('#roomTab').val();
if (tabId == null || tabId.length <= 0) {
tabId = '1';
}
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
erbanNo: $('#erbanNo').val(),
roomTitle: $('#roomTitle').val(),
tabId: tabId,
partitionId: $('#partitionId').val(),
};
console.log(param);
return param;
},
ajax: function (request) { //使用ajax请求
$.ajax({
type: "GET",
url: '/admin/roomTabMap/list',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: request.data,
success: function (res) {
console.log(res);
request.success({
rows: res.data.roomTabMapList,
total: res.data.totalPage
});
},
error: function (error) {
console.log(error);
}
})
},
toolbar: '#toolbar',
onLoadSuccess: function () { //加载成功时执行
console.log("load success");
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 查询刷新
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
});
// 添加房间打开弹窗
$("#btnAddRoom").on('click', function () {
//清除数据
$('#addRoomTabMapModal').find('input').val('');
$('#addRoomTabMapModal').find('textarea').val('');
//$('#modal_isHome2').val('');
$('#addRoomTabMapModal').modal('show');
});
// 添加房间
$("#btnConfirm2").click(function () {
var erbanNo = $('#sendErbanNo').val().trim();//去掉首尾的空格和换行符
if (!(erbanNo.length > 0)) {
$("#tipMsg").text("请输入房间平台号");
$("#tipModal").modal('show');
return;
}
var tabId = $('#roomTab').val();
if (tabId.length <= 0) {
$("#tipMsg").text("请选择正确的房间Tab");
$("#tipModal").modal('show');
return;
}
if ($("#addForm2").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/roomTabMap/add",
data: {
erbanNo: erbanNo,
isHome: 1,
tabId: tabId,
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("成功用户:" + json.data.success + " 失败用户:" + json.data.fail);
$("#tipModal").modal('show');
TableHelper.doRefresh('#table');
$("#addRoomTabMapModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.data.msg);
$("#tipModal").modal('show');
$("#addRoomTabMapModal").modal('hide');
}
}
});
},
initPartition() {
getPartitionInfoList().then(res => {
let data = res.data;
buildSelectOption(
"#partitionId",
null,
[{
value: '',
text: '全部',
}].concat(data.map((v) => {
return {
value: v.id,
text: v.desc,
};
}))
);
}
});
// 编辑或者新增
$("#btnConfirm").click(function () {
var id = $("#id").val();
var seq = $("#modal_seq").val();
var isHome = $("#modal_isHome").val();
var isTop = $("#modal_isTop").val();
var topStart = $('#modal_topStart').val();
var topEnd = $('#modal_topEnd').val();
if ($("#addForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/roomTabMap/save",
data: {
id: id,
seq: seq,
isHome: isHome,
isTop: isTop,
topStart: topStart,
topEnd: topEnd,
},
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTabMapModal").modal('hide');
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
$("#roomTabMapModal").modal('hide');
}
}
});
},
}
});
// 获取信息
$("#table").on("click", '.opt-edit', function () {
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/roomTabMap/get",
data: { id: id },
dataType: "json",
success: function (ret) {
if (ret.code == 200) {
var json = ret.data.roomTabMap;
$("#id").val(id);
$("#modal_seq").val(json.seq);
$("#modal_isTop").val(json.isTop ? 1 : 0);
$("#modal_isHome").val(json.isHome ? 1 : 0);
$('#modal_topStart').val(formatTime(json.topStart));
$('#modal_topEnd').val(formatTime(json.topEnd));
// 打开编辑弹窗
$("#roomTabMapModal").modal('show');
$("#modalLabel").text("编辑");
} else {
$("#tipMsg").text("获取菜单信息出错");
$("#tipModal").modal('show');
}
}
});
});
// 删除操作
$("#table").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除吗? \r\n 删除后不会恢复，请谨慎操作！")) {
$.ajax({
type: 'post',
url: "/admin/roomTabMap/delete",
data: { id: id },
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text("删除成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("删除失败");
$("#tipModal").modal('show');
}
}
});
}
});
// 通过接口获取所有房间tab
function getRoomTabs () {
$.ajax({
url: "/admin/roomTab/excludelist?page=1&pageSize=1000", //后台controller中的请求路径
type: 'GET',
async: false,
datatype: 'json',
success: function (res) {
console.log(res);
if (res) {
var data = res.data.roomTabList;
var tabs = [];
for (var i = 0, len = data.length; i < len; i++) {
const item = data[i];
const desc = JSON.parse(item.name).zh;
console.log(item.name.zh);
//拼接成多个<option><option/>
tabs.push('<option value="' + item.id + '">' + desc + '</option>')
}
$("#roomTab").html(tabs.join(' ')); //填充到select标签中
}
},
error: function () {
alert('查询房间tab出错');
}
});
}
});
},
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>

442
src/views/room/RoomTabRegionView.vue Normal file
View File

@@ -0,0 +1,442 @@
<template>
<div class="box">
<div class="inquire">
<span>分区</span>
<partition-select v-model:partition-id="formParam.partitionId"
v-model:handle-change="updatePartitionId"
v-model:after-init="initRegionTab" />
</div>
<!-- 类型 -->
<div class="inquire">
<span class="demonstration">国家</span>
<el-select v-model="formParam.regionId"
class="input"
placeholder="全部"
clearable>
<el-option v-for="item in formParam.partitionRegionList"
:key="item.id"
:label="item.desc"
:value="item.id" />
</el-select>
</div>
<!-- 查询按钮 -->
<el-button class="primary"
type="primary"
@click="listData">查询</el-button>
<!-- 编辑弹窗 -->
<el-dialog v-model="editDialog.show"
v-loading="editDialog.loading"
v-model:title="editDialog.title"
@close="closeEditDialog"
label-width="auto"
width="28%"
center>
<el-form :model="editDialog.obj">
<el-form-item label="是否展示">
<el-switch v-model="editDialog.obj.isHome"
class="mb-2"
active-text="是"
inactive-text="否" />
</el-form-item>
<el-form-item label="是否置顶">
<el-switch v-model="editDialog.obj.isTop"
class="mb-2"
active-text="是"
inactive-text="否" />
</el-form-item>
<el-form-item label="置顶排序位置">
<el-input type="number"
v-model="editDialog.obj.seq" />
</el-form-item>
<el-form-item label="置顶开始时间">
<el-date-picker v-model="editDialog.obj.topStart"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item label="置顶结束时间">
<el-date-picker v-model="editDialog.obj.topEnd"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeEditDialog">取消</el-button>
<el-button v-loading="editDialog.loading"
type="primary"
@click="saveObj">保存</el-button>
</div>
</template>
</el-dialog>
<!-- 表格 -->
<el-table v-loading="table.loading"
:data="table.data"
ref="multipleTable"
border
style="width: 100%; margin-top: 25px">
<el-table-column prop="roomUid"
align="center"
label="房主uid" />
<el-table-column prop="erbanNo"
align="center"
label="房主平台号" />
<el-table-column prop="roomTitle"
align="center"
label="标题" />
<el-table-column prop="roomTag"
align="center"
label="标签" />
<el-table-column prop="avatar"
align="center"
label="头像">
<template v-slot="scope">
<el-image :src="scope.row.avatar"
:zoom-rate="1.1"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true" />
</template>
</el-table-column>
<el-table-column prop="isTop"
align="center"
label="是否置顶">
<template #default="scope">
{{ scope.row.isTop == undefined? '': scope.row.isTop ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column prop="isShow"
align="center"
label="是否展示">
<template #default="scope">
{{ scope.row.isShow == undefined? '': scope.row.isShow ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column prop="seq"
align="center"
label="排序" />
<el-table-column prop="topStart"
align="center"
label="置顶开始时间" />
<el-table-column prop="topEnd"
align="center"
label="置顶结束时间" />
<el-table-column prop="hourTop"
align="center"
label="小时榜排名" />
<el-table-column prop="hotValue"
align="center"
label="热力值" />
<el-table-column prop="regionFlag"
align="center"
label="国家旗帜">
<template v-slot="scope">
<el-image :src="scope.row.regionFlag"
:zoom-rate="1.1"
fit="scale-down"
preview-teleported="true"
hide-on-click-modal="true" />
</template>
</el-table-column>
<el-table-column prop="micUserCount"
align="center"
label="麦上人数" />
<el-table-column prop="onlineNum"
align="center"
label="房间人数" />
<el-table-column align="center"
label="操作">
<template v-slot="scope">
<el-button @click="openEditDialog(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// 声明额外的选项
export default {
name: "RoomTabRegionView",
};
</script>
<script setup>
import { reactive } from "vue";
import { listRegionTab, list, get, save } from "@/api/room/roomTabRegion";
import { ElMessage } from "element-plus";
const formParam = reactive({
partitionId: undefined,
regionId: undefined,
regionList: [],
partitionRegionList: [],
});
const table = reactive({
loading: false,
data: [],
});
const initRegionTab = async () => {
try {
const res = await listRegionTab();
if (res.code !== 200) {
throw Error(res.message);
}
formParam.regionList = res.data.map((item) => {
return {
...item,
desc: JSON.parse(item.name).zh,
};
});
updatePartitionId(formParam.partitionId);
} catch (error) {
ElMessage({
showClose: true,
message: error.message,
type: "error",
});
}
};
const updatePartitionId = (partitionId) => {
formParam.partitionId = partitionId;
formParam.regionId = undefined;
const partitionRegionList = formParam.regionList.filter((item) => {
return !partitionId || ((item.partitionFlag & partitionId) != 0);
});
formParam.partitionRegionList = partitionRegionList;
};
const emptyObj = {
id: undefined,
roomUid: undefined,
tabId: undefined,
seq: 0,
isHome: true,
isTop: false,
topStart: undefined,
topEnd: undefined,
};
const editDialog = reactive({
show: false,
loading: false,
title: "",
obj: Object.assign({}, emptyObj),
});
const openEditDialog = async (row) => {
editDialog.show = true;
editDialog.title = "新增";
editDialog.obj.tabId = formParam.regionId
editDialog.obj.roomUid = row.roomUid
if (row.id) {
editDialog.title = "编辑";
editDialog.loading = true;
const params = { id: row.id };
try {
const res = await get(params);
if (res.code !== 200) {
throw Error(res.message);
}
editDialog.obj = res.data;
} catch (error) {
ElMessage({
showClose: true,
message: error,
type: "error",
});
} finally {
editDialog.loading = false;
}
}
editDialog.show = true;
};
const closeEditDialog = () => {
editDialog.show = false;
editDialog.obj = Object.assign({}, emptyObj);
};
function validObj (obj) {
let valid = false;
try {
if (!obj.isTop || !obj.isHome) {
obj.seq = 0;
obj.topStart = undefined;
obj.topEnd = undefined;
}
if (obj.isHome || obj.isTop) {
if (obj.seq <= 0) {
throw new Error('请输入正确的置顶序号');
}
if (!obj.topStart) {
throw new Error('请选择置顶开始时间');
}
if (!obj.topEnd) {
throw new Error('请选择置顶结束时间');
}
if (obj.topStart >= obj.topEnd) {
throw new Error('置顶开始时间不能大于等于置顶结束时间');
}
}
valid = true;
} catch (e) {
ElMessage({
showClose: true,
message: e,
type: "error",
});
}
return valid;
}
const saveObj = async () => {
// valid
if (!validObj(editDialog.obj)) {
return;
}
editDialog.loading = true;
try {
const params = { ...editDialog.obj };
const res = await save(params);
if (res.code !== 200) {
ElMessage({
showClose: true,
message: res.message,
type: "error",
});
return;
}
ElMessage({
showClose: true,
message: "保存成功",
type: "success",
});
closeEditDialog();
listData()
} catch (e) {
ElMessage({
showClose: true,
message: e,
type: "error",
});
} finally {
editDialog.loading = false;
}
};
const listData = async () => {
if (!formParam.partitionId) {
ElMessage({
showClose: true,
message: "请选择分区",
type: "error",
});
return;
}
if (!formParam.regionId) {
ElMessage({
showClose: true,
message: "请选择国家",
type: "error",
});
return;
}
table.loading = true;
const params = { tabId: formParam.regionId, partitionId: formParam.partitionId };
try {
const res = await list(params);
if (res.code !== 200) {
throw Error(res.message);
}
table.data = res.data;
} catch (e) {
ElMessage({
showClose: true,
message: e,
type: "error",
});
} finally {
table.loading = false;
}
};
</script>
<style lang="less" scoped>
.box {
padding-top: 20px;
background: #ecf0f5;
.inquire {
display: inline-block;
margin-right: 20px;
span {
margin-right: 10px;
}
.input {
width: 180px;
margin-right: 10px;
}
}
.dialogTableVisibleBut {
display: block;
margin: 30px 0 0 830px;
}
.paginationClass {
margin: 15px 0 5px 0px;
}
}
.selectBox {
display: flex;
height: 35px;
line-height: 35px;
margin-bottom: 20px;
}
.selectBoxImg {
height: 150px;
}
.pagination {
margin: 10px auto 10px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.pagination_in {
text-align: center;
}
.dialogBox {
width: 100%;
// height: 50px;
// line-height: 50px;
display: flex;
align-items: baseline;
margin-bottom: 20px;
.input {
width: 50%;
}
.selectBox {
display: flex;
height: 35px;
line-height: 35px;
margin-bottom: 20px;
}
.selectBoxImg {
height: 150px;
}
}
</style>