402 lines
19 KiB
Vue
402 lines
19 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="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="roomTabHomeModal" 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" />
|
||
<input type="hidden" name="roomUid" id="roomUid" />
|
||
<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>
|
||
<div class="form-group">
|
||
<label for="modal_isShow" class="col-sm-3 control-label">是否在App首页展示<font color="red">*</font>：</label>
|
||
<div class="col-sm-9">
|
||
<select name="isShow" id="modal_isShow" class="form-control validate[required]">
|
||
<option value=""></option>
|
||
<option value="1">是</option>
|
||
<option value="0">否</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="btnConfirm">确定</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
import { formatTime } from '@/utils/maintainer';
|
||
|
||
// tab类型选择变化查询
|
||
/*function selectOnTabChange(obj){
|
||
// console.log(obj);
|
||
TableHelper.doRefresh('#table');
|
||
}*/
|
||
export default {
|
||
name: "RoomTabHomeView",
|
||
setup() {
|
||
return {};
|
||
},
|
||
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: 'roomTag', title: '房间标签', align: 'center', width: '5%' },
|
||
{
|
||
field: 'isPermitRoom',
|
||
title: '房间类型',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
let value = '';
|
||
if (val == 1) {
|
||
value = '牌照房';
|
||
} else if (val == 4) {
|
||
value = '个播房';
|
||
} else {
|
||
value = '非牌照房';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
{
|
||
field: 'iconContent',
|
||
title: '图标内容',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
return "<img src='" + val + "' width='40' height='40'>";
|
||
}
|
||
},
|
||
{
|
||
field: 'isTop',
|
||
title: '是否置顶',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
return '是';
|
||
} else {
|
||
return '否';
|
||
}
|
||
|
||
}
|
||
},
|
||
{
|
||
field: 'isShow',
|
||
title: '是否在App首页展示',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
return '是';
|
||
} else {
|
||
return '否';
|
||
}
|
||
|
||
}
|
||
},
|
||
{ field: 'seq', title: '置顶排序', align: 'center', width: '5%' },
|
||
{ field: 'topStart', title: '置顶开始时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
|
||
{ field: 'topEnd', title: '置顶结束时间', align: 'center', valign: 'middle', width: '10%', formatter: formatTime },
|
||
{
|
||
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 + '" data-index="' + index + '">' +
|
||
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>';
|
||
}
|
||
}
|
||
],
|
||
undefinedText: "",
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
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/roomTabHome/list.action',
|
||
contentType: 'application/json;charset=utf-8',
|
||
dataType: 'json',
|
||
data: request.data,
|
||
success: function (res) {
|
||
console.log(res);
|
||
request.success({
|
||
rows: res.data.roomTabHomeList,
|
||
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');
|
||
});
|
||
|
||
// 编辑或者新增
|
||
$("#btnConfirm").click(function () {
|
||
var id = $("#id").val();
|
||
var roomUid = $('#roomUid').val();
|
||
var seq = $("#modal_seq").val();
|
||
var isTop = $("#modal_isTop").val();
|
||
var iconContent = $("#modal_iconContent").val();
|
||
var topStart = $("#modal_topStart").val();
|
||
var topEnd = $("#modal_topEnd").val();
|
||
|
||
if ($("#addForm").validationEngine('validate')) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/roomTabHome/save.action",
|
||
data: {
|
||
id: id,
|
||
roomUid: roomUid,
|
||
seq: seq,
|
||
isTop: isTop,
|
||
iconContent: iconContent,
|
||
topStart: topStart,
|
||
topEnd: topEnd,
|
||
isShow: isShow,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.code == 200) {
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTabHomeModal").modal('hide');
|
||
} else {
|
||
$("#tipMsg").text("保存失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
$("#roomTabHomeModal").modal('hide');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
});
|
||
|
||
// 获取信息
|
||
$("#table").on("click", '.opt-edit', function () {
|
||
var id = $(this).attr("data-id");
|
||
const index = $(this).data('index');
|
||
const record = TableHelper.getData('#table')[index];
|
||
$('#roomUid').val(record.roomUid);
|
||
if (id && id != 'null') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/roomTabHome/get.action",
|
||
data: { id: id },
|
||
dataType: "json",
|
||
success: function (ret) {
|
||
if (ret.code == 200) {
|
||
var json = ret.data.roomTabHome;
|
||
$("#id").val(id);
|
||
$("#modal_iconContent").val(json.iconContent);
|
||
$("#modal_seq").val(json.seq);
|
||
$("#modal_isTop").val(json.isTop ? 1 : 0);
|
||
$("#modal_topStart").val(formatTime(json.topStart));
|
||
$("#modal_topEnd").val(formatTime(json.topEnd));
|
||
$("#modal_isShow").val(json.isShow ? 1 : 0);
|
||
} else {
|
||
$("#tipMsg").text("获取菜单信息出错");
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// 打开编辑弹窗
|
||
$("#roomTabHomeModal").modal('show');
|
||
$("#modalLabel").text("编辑");
|
||
});
|
||
|
||
// 删除操作
|
||
$("#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/roomTabHome/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> |