447 lines
21 KiB
Vue
447 lines
21 KiB
Vue
<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>
|
||
<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="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">×</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=""></option>
|
||
<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">×</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>
|
||
import TableHelper from '@/utils/bootstrap-table-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.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
|
||
|
||
$(function () {
|
||
$('.datetime').datetimepicker({
|
||
format: 'yyyy-mm-dd hh:ii:00',
|
||
autoclose: true
|
||
});
|
||
// 拉取所有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: 'isTop', title: '是否置顶', align: 'center', valign: 'middle', width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
return '是';
|
||
} else {
|
||
return '否';
|
||
}
|
||
|
||
}
|
||
},
|
||
{ 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>' +
|
||
' <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
|
||
};
|
||
console.log(param);
|
||
return param;
|
||
},
|
||
ajax: function (request) { //使用ajax请求
|
||
$.ajax({
|
||
type: "GET",
|
||
url: '/admin/roomTabMap/list.action',
|
||
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.action",
|
||
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.action",
|
||
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.action",
|
||
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(json.topStart);
|
||
$('#modal_topEnd').val(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.action",
|
||
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.action?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出错');
|
||
}
|
||
});
|
||
}
|
||
|
||
});
|
||
}
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |