449 lines
15 KiB
Vue
449 lines
15 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>
|
||
<label for="partitionId"
|
||
class="col-sm-1 control-label">地区:</label>
|
||
<div class="col-sm-2">
|
||
<select name="partitionId"
|
||
id="partitionId"
|
||
class="form-control">
|
||
<option value="4"
|
||
selected>华语区</option>
|
||
</select>
|
||
</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">
|
||
<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"
|
||
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="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';
|
||
import { getPartitionInfoList } from '@/api/partition/partitionInfo';
|
||
import { buildSelectOption } from '@/utils/system-helper';
|
||
|
||
// tab类型选择变化查询
|
||
/*function selectOnTabChange(obj){
|
||
// console.log(obj);
|
||
TableHelper.doRefresh('#table');
|
||
}*/
|
||
export default {
|
||
name: "RoomTabHomeView",
|
||
setup () {
|
||
return {};
|
||
},
|
||
created () {
|
||
this.$nextTick(function () {
|
||
this.initPartition();
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData () {
|
||
$(function () {
|
||
$('.datetime').datetimepicker({
|
||
format: 'yyyy-mm-dd hh:ii:00',
|
||
autoclose: true
|
||
});
|
||
|
||
$('#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: 'avatar',
|
||
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 == 1) {
|
||
return '是';
|
||
} else if (val == 0) {
|
||
return '否';
|
||
}
|
||
return '否';
|
||
}
|
||
},
|
||
{
|
||
field: 'isShow',
|
||
title: '是否在App首页展示',
|
||
align: 'center',
|
||
valign: 'middle',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val == 1) {
|
||
return '是';
|
||
} else if (val == 0) {
|
||
return '否';
|
||
}
|
||
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: 'isHourTop1', title: '小时榜top1', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
|
||
return val ? '是' : '否';
|
||
}
|
||
},
|
||
{
|
||
field: 'isHourTop1', title: '周榜top1', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
|
||
return val ? '是' : '否';
|
||
}
|
||
},
|
||
{
|
||
field: 'micUserCount', title: '麦上人数', align: 'center', valign: 'middle', width: '10%'
|
||
},
|
||
{
|
||
field: 'onlineNum', title: '房间人数', align: 'center', valign: 'middle', width: '10%'
|
||
},
|
||
{
|
||
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,
|
||
search: false,
|
||
sidePagination: "server", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams (params) { //设置查询参数
|
||
var param = {
|
||
page: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
erbanNo: $('#erbanNo').val(),
|
||
roomTitle: $('#roomTitle').val(),
|
||
partitionId: $('#partitionId').val(),
|
||
};
|
||
console.log(param);
|
||
return param;
|
||
},
|
||
url: '/admin/roomTabHome/list',
|
||
responseHandler: function (data) {
|
||
console.info(111, data)
|
||
if (data.code === 200) {
|
||
return { "rows": data.data, "total": data.data.length };
|
||
} else {
|
||
return { "rows": [], "total": 0 };
|
||
}
|
||
},
|
||
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();
|
||
var isShow = $('#modal_isShow').val();
|
||
if ($("#addForm").validationEngine('validate')) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/roomTabHome/save",
|
||
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];
|
||
$("#id").val(null);
|
||
$("#modal_seq").val(0);
|
||
$("#modal_isTop").val(0);
|
||
$("#modal_topStart").val('');
|
||
$("#modal_topEnd").val('');
|
||
$("#modal_isShow").val(0);
|
||
$('#roomUid').val(record.roomUid);
|
||
if (id && id != 'null') {
|
||
$.ajax({
|
||
type: "get",
|
||
url: "/admin/roomTabHome/get",
|
||
data: { id: id },
|
||
dataType: "json",
|
||
success: function (ret) {
|
||
if (ret.code == 200) {
|
||
var json = ret.data;
|
||
$("#id").val(id);
|
||
$("#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",
|
||
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');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
});
|
||
},
|
||
initPartition () {
|
||
getPartitionInfoList().then(res => {
|
||
let data = res.data;
|
||
buildSelectOption(
|
||
"#partitionId",
|
||
4,
|
||
data.map((v) => {
|
||
return {
|
||
value: v.id,
|
||
text: v.desc,
|
||
};
|
||
})
|
||
);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped></style> |