From 0645211afc165ff8c97c2d3adad9f5ea72bd23b3 Mon Sep 17 00:00:00 2001
From: khalil <khalil@chuhaiwl2023.com>
Date: Mon, 24 Jun 2024 19:33:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5-=E5=90=8E=E5=8F=B0-=E6=9C=80?=
 =?UTF-8?q?=E8=BF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 8064566ab0e895e509802501dc69305a1b7b179f)
---
 src/utils/system-helper.js           |   2 +-
 src/views/room/RoomTabHomeView.vue   | 824 ++++++++++++++-------------
 src/views/room/RoomTabNewestView.vue | 449 +++++++++++++++
 3 files changed, 870 insertions(+), 405 deletions(-)
 create mode 100644 src/views/room/RoomTabNewestView.vue

diff --git a/src/utils/system-helper.js b/src/utils/system-helper.js
index 72bd4f1..a9e05b2 100644
--- a/src/utils/system-helper.js
+++ b/src/utils/system-helper.js
@@ -41,7 +41,7 @@ export function buildSelectOption(id, defVal, array) {
     let $select = $(id);
     let children = $select.children(); 
     if (children && children.length > 0) {
-        return;
+        $select.empty();
     }
     for(let i in array) {
         let obj = array[i];
diff --git a/src/views/room/RoomTabHomeView.vue b/src/views/room/RoomTabHomeView.vue
index 73449d8..9b33093 100644
--- a/src/views/room/RoomTabHomeView.vue
+++ b/src/views/room/RoomTabHomeView.vue
@@ -1,103 +1,154 @@
 <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="roomTitle" class="col-sm-2 control-label">地区:</label>
-                        <div class="col-sm-2">
-                            <select name="partitionId" id="partitionId" class="form-control"></select>
-                        </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="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>
-
-            <!-- .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">&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" />
-                        <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>
-
+            <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">&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" />
+            <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>
@@ -112,321 +163,286 @@ import { buildSelectOption } from '@/utils/system-helper';
     TableHelper.doRefresh('#table');
 }*/
 export default {
-    name: "RoomTabHomeView",
-    setup() {
-        return {};
-    },
-    created() {
-        this.$nextTick(function () {
-            this.initPartition();
-            this.initData();
+  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
         });
-    },
-    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: 'partitionDesc', title: '地区', align: 'center', valign: 'middle' },
-                        {
-                            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: '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(),
-                            partitionId: $('#partitionId').val(),
-                        };
-                        console.log(param);
-                        return param;
-                    },
-                    ajax: function (request) {                    //使用ajax请求
-                        $.ajax({
-                            type: "GET",
-                            url: '/admin/roomTabHome/list',
-                            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();
-                    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_iconContent").val('');
-                    $("#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.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",
-                            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: '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');
+                }
+              }
             });
-        },
-        initPartition() {
-            getPartitionInfoList().then(res => {
-                let data = res.data;
-                buildSelectOption(
-                    "#partitionId",
-                    null,
-                    [{
-                        value: '',
-                        text: '全部',
-                    }].concat(data.map((v) => {
-                    return {
-                        value: v.id,
-                        text: v.desc,
-                    };
-                    }))
-                );
+          }
+
+        });
+
+        // 获取信息
+        $("#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>
 
diff --git a/src/views/room/RoomTabNewestView.vue b/src/views/room/RoomTabNewestView.vue
new file mode 100644
index 0000000..895236a
--- /dev/null
+++ b/src/views/room/RoomTabNewestView.vue
@@ -0,0 +1,449 @@
+<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">&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" />
+            <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: "RoomTabNewestView",
+  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>
\ No newline at end of file