peko-admin-web/src/views/room/RoomTabView.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 class="col-sm-12">
          <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>
        </div>
        <div id="toolbar">
          <div class="col-sm-12">
            <button id="btnSearch" class="btn btn-default">
              <i class="glyphicon glyphicon-search"></i>查询
            </button>
            <button id="btnAdd" class="btn btn-default">
              <i class="glyphicon glyphicon-plus"></i>增加
            </button>
          </div>

          <input type="hidden" id="currentPageNum" />
        </div>
      </div>

      <!-- .content -->
      <div id="table"></div>
    </div>
  </section>

  <div
    class="modal fade"
    id="roomTabModal"
    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_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_name" class="col-sm-3 control-label"
                >名称<font color="red">*</font>:</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  class="form-control validate[required]"
                  name="name"
                  id="modal_name"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="ar_modal_name" class="col-sm-3 control-label"
                >阿语名称<font color="red">*</font>:</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  class="form-control validate[required]"
                  name="name"
                  id="ar_modal_name"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="en_modal_name" class="col-sm-3 control-label"
                >英语名称<font color="red">*</font>:</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  class="form-control validate[required]"
                  name="name"
                  id="en_modal_name"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="tr_modal_name" class="col-sm-3 control-label"
                >土耳其名称<font color="red">*</font>:</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  class="form-control validate[required]"
                  name="name"
                  id="tr_modal_name"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="status" class="col-sm-3 control-label"
                >显示状态<font color="red">*</font>：</label
              >
              <div class="col-sm-9">
                <select
                  name="status"
                  id="modal_status"
                  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="room_tab_show" class="col-sm-3 control-label"
                >房间管理列表展示状态<font color="red">*</font> ：</label
              >
              <div class="col-sm-9">
                <select
                  name="room_tab_show"
                  id="modal_room_tab_show"
                  class="form-control validate[required]"
                >
                  <option value=""></option>
                  <option value="true">展示</option>
                  <option value="false">不展示</option>
                </select>
              </div>
            </div>
            <div class="form-group" id="imgBox">
              <label class="col-sm-3 control-label">icon</label>
              <div class="col-sm-8">
                <img
                  src=""
                  id="iconImgUrl"
                  style="width: 108px; height: 45px"
                  alt=""
                />
                <input
                  type="file"
                  id="iconFile"
                  name="uploadFile"
                  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                />
                <button class="btn btn-success" type="button" id="iconBtn">
                  上传
                </button>
                <input
                  type="hidden"
                  id="iconUrl"
                  name="alertWinPic"
                  class="form-control validate[required]"
                />
              </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="add">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableHelper from "@/utils/bootstrap-table-helper";
import { getPartitionInfoList } from "@/api/partition/partitionInfo";
import { buildSelectOption } from "@/utils/system-helper";
export default {
  name: "RoomTabView",
  setup() {
    return {};
  },
  created() {
    this.$nextTick(function () {
      this.initPartition();
      this.initData();
    });
  },
  methods: {
    initData() {
      $(function () {
        $("#table").bootstrapTable("destroy");
        $("#table").bootstrapTable({
          columns: [
            { field: "seq", title: "排序", align: "center", width: "5%" },
            {
              field: "name.zh",
              title: "Tab名称",
              align: "center",
              width: "10%",
            },
            {
              field: "name.ar",
              title: "阿语Tab名称",
              align: "center",
              width: "10%",
            },
            {
              field: "name.en",
              title: "英语Tab名称",
              align: "center",
              width: "10%",
            },
            {
              field: "name.tr",
              title: "土耳其Tab名称",
              align: "center",
              width: "10%",
            },
            {
              field: "status",
              title: "显示状态",
              align: "center",
              valign: "middle",
              width: "5%",
              formatter: function (val, row, index) {
                if (val) {
                  return "显示";
                } else {
                  return "不显示";
                }
              },
            },
            {
              field: "icon",
              title: "图标",
              align: "center",
              valign: "middle",
              width: "10%",
              formatter: function (val, row, index) {
                if (null != val && val != "") {
                  return (
                    '<img src="' +
                    val +
                    '" alt="" style="width: 50px; height: 50px;">'
                  );
                }
                return "-";
              },
            },
            {
              field: "roomTabShow",
              title: "房间管理列表展示状态",
              align: "center",
              valign: "middle",
              width: "5%",
              formatter: function (val, row, index) {
                if (val) {
                  return "展示";
                } else {
                  return "不展示";
                }
              },
            },
            {
              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: 0,
          cache: false,
          striped: true,
          showRefresh: false,
          pageSize: 20,
          pagination: true,
          pageList: [20, 50, 100, 200, 300, 500],
          search: false,
          sidePagination: "server", //表示服务端请求
          queryParamsType: "undefined",
          queryParams: function queryParams(params) {
            //设置查询参数
            $("#currentPageNum").val(params.pageNumber);
            var param = {
              page: params.pageNumber,
              pageSize: params.pageSize,
              partitionId: $("#partitionId").val(),
            };
            return param;
          },
          ajax: function (request) {
            //使用ajax请求
            $.ajax({
              type: "GET",
              url: "/admin/roomTab/list",
              contentType: "application/json;charset=utf-8",
              dataType: "json",
              data: request.data,
              success: function (res) {
                console.log(res);
                request.success({
                  rows: res.rows.map((i) => {
                    let name = i.name;
                    if (name.startsWith("{") && name.endsWith("}")) {
                      i.name = JSON.parse(i.name);
                    } else {
                      i.name = {
                        zh: i.name,
                        ar: i.name,
                        en: i.name,
                      };
                    }
                    return i;
                  }),
                  total: res.total,
                });
              },
              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");
        });
        //新建标签
        $("#btnAdd").click(function () {
          $("#id").val("");
          $("#modal_name").val("");
          $("#ar_modal_name").val("");
          $("#en_modal_name").val("");
          $("#tr_modal_name").val("");
          $("#modal_seq").val("");
          $("#modal_status").val("");
          $("#modal_room_tab_show").val("");
          $("#modal_type").val("");
          $("#modal_istop").val("");
          $("#modal_description").val("");
          $("#addActPic").val("");
          $("#addUploadFile").val("");
          $("#addImgUrl").attr("src", "");
          $("#roomTabModal").modal("show");
        });

        $("#add").click(function () {
          var id = $("#id").val();
          var name = $("#modal_name").val();
          // 阿语名称
          var ar_name = $("#ar_modal_name").val();
          // 英语名称
          var en_name = $("#en_modal_name").val();
          var tr_name = $("#tr_modal_name").val();
          // 国际化字段
          var jsonName = { zh: name, ar: ar_name, en: en_name, tr: tr_name };
          const nameValue = JSON.stringify(jsonName);
          var seq = $("#modal_seq").val();
          var status = $("#modal_status").val();
          var roomTabShow = $("#modal_room_tab_show").val();
          var icon = $("#iconImgUrl").attr("src");

          if ($("#addForm").validationEngine("validate")) {
            $.ajax({
              type: "post",
              url: "/admin/roomTab/save",
              data: {
                id: id,
                name: nameValue,
                seq: seq,
                status: status,
                roomTabShow: roomTabShow,
                icon: icon,
              },
              dataType: "json",
              success: function (json) {
                if (json.code == 200) {
                  $("#tipMsg").text("保存成功");
                  $("#tipModal").modal("show");
                  TableHelper.doRefresh("#table");
                  $("#roomTabModal").modal("hide");
                } else {
                  $("#tipMsg").text("保存失败." + json.msg);
                  $("#tipModal").modal("show");
                  TableHelper.doRefresh("#table");
                  $("#roomTabModal").modal("hide");
                }
              },
            });
          }
        });

        $("#table").on("click", ".opt-edit", function () {
          var id = $(this).attr("data-id");
          $("#addImgUrl").attr("src", "");
          $("#addActPic").val("");
          $("#addUploadFile").val("");
          $.ajax({
            type: "get",
            url: "/admin/roomTab/get",
            data: { id: id },
            dataType: "json",
            success: function (ret) {
              console.log(ret);
              if (ret.code == 200) {
                var json = ret.data.roomTab;
                $("#id").val(id);
                let name = json.name;
                $('#iconImgUrl').attr('src',json.icon);
                if (name.startsWith("{") && name.endsWith("}")) {
                  var jsonName = JSON.parse(json.name);
                  $("#modal_name").val(jsonName.zh);
                  // 阿语名称
                  $("#ar_modal_name").val(jsonName.ar);
                  // 英语名称
                  $("#en_modal_name").val(jsonName.en);
                  // 土耳其名称
                  $("#tr_modal_name").val(jsonName.tr);
                } else {
                  $("#modal_name").val(name);
                  // 阿语名称
                  $("#ar_modal_name").val(name);
                  // 英语名称
                  $("#en_modal_name").val(name);
                  // 土耳其名称
                  $("#tr_modal_name").val(name);
                }
                $("#modal_seq").val(json.seq);
                if (json.status == 1) {
                  $("#modal_status").val(1);
                } else {
                  $("#modal_status").val(0);
                }
                if (json.roomTabShow == 1) {
                  $("#modal_room_tab_show").val("true");
                } else {
                  $("#modal_room_tab_show").val("false");
                }
                // 打开编辑弹窗
                $("#roomTabModal").modal("show");
                $("#modalLabel").text("编辑房间Tab");
              } 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 删除后隐藏tab不会显示，请谨慎操作！")
          ) {
            $.ajax({
              type: "post",
              url: "/admin/roomTab/hide",
              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");
                }
              },
            });
          }
        });

        $("#iconBtn").on("click", function () {
          if ($("#iconFile").val() == "") {
            $("#tipMsg").text("上传图片为空");
            $("#tipModal").modal("show");
            return;
          }
          $.ajaxFileUpload({
            fileElementId: "iconFile", //需要上传的文件域的ID，即<input type="file">的ID。
            url: "/admin/upload/img", //后台方法的路径
            type: "post", //当要提交自定义参数时，这个参数要设置成post
            dataType: "json", //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
            secureuri: false, //是否启用安全提交，默认为false。
            async: true, //是否是异步
            success: function (json) {
              //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
              if (json.path) {
                $("#iconUrl").val(json.path);
                $("#iconImgUrl").attr("src", json.path);
              } else {
                $("#tipMsg").text(json.msg);
                $("#tipModal").modal("show");
              }
            },
            error: function (data, status, e) {
              //提交失败自动执行的处理函数。
              console.error(e);
            },
          });
        });

        function clearModal() {
          $("#iconImgUrl").attr("src", "");

          $("#addForm")
            .find("input[type=text],input[type=hidden],input[type=file]")
            .each(function () {
              $(this).val("");
            });

          $("#type").val(1);
        }
      });
    },
    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>