projectmanager/app/information/view/index/index.html

{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="breadcrumb"}
<span class="layui-breadcrumb">
  <a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
  <a href="/business/index/nav"><cite>CRM</cite></a>
  <a><cite>商机管理</cite></a>
</span>
{/block} {block name="body"}
<div class="table-content p-3">
  <div class="layui-form-bar border-t border-x">
    <button class="layui-btn layui-btn-sm add-new">+ 新建商机</button>
    <button class="layui-btn layui-btn-sm" id="refresh-btn">刷新</button>
    <button class="layui-btn layui-btn-sm" id="delete-btn">批量删除</button>
  </div>
  <table class="layui-hide" id="information" lay-filter="information"></table>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}
<script>
  const moduleInit = ["tool", "gouguEdit", "gouguComment"];

  function gouguInit() {
    var table = layui.table;
    var tool = layui.tool;

    //新增商机按钮
    $(".add-new").on("click", function () {
      tool.open("/information/index/add");
    });

    // 删除单条数据
    table.on("tool(information)", function (obj) {
      var data = obj.data;
      if (obj.event === "delete") {
        layui.layer.confirm(
          "确定删除该商机吗？",
          { icon: 3, title: "提示" },
          function (index) {
            $.post(
              "/information/index/delete",
              { id: data.id },
              function (res) {
                if (res.code === 0) {
                  // layui.layer.msg("删除成功");
                  layui.layer.msg(res.msg);
                  obj.del(); 
                } else {
                  // layui.layer.msg("删除失败");
                  layui.layer.msg(res.msg);
                }
              }
            );
            layui.layer.close(index);
          }
        );
      }
    });

    // 批量删除数据
    $("#delete-btn").on("click", function () {
      var checkStatus = table.checkStatus("information");
      var data = checkStatus.data;
      if (data.length === 0) {
        layui.layer.msg("请勾选要删除的商机");
        return;
      }
      layui.layer.confirm(
        "确定删除选中的商机吗？",
        { icon: 3, title: "提示" },
        function (index) {
          var ids = [];
          for (var i = 0; i < data.length; i++) {
            ids.push(data[i].id);
          }
          $.post(
            "/information/index/batchDelete",
            { ids: ids },
            function (res) {
              if (res.code === 0) {
                layui.layer.msg(res.msg);
                loadTableData();
              } else {
                layui.layer.msg(res.msg);
              }
            }
          );
          layui.layer.close(index);
        }
      );
    });

    function loadTableData() {
      layui.pageTable.reload();
    }

    layui.pageTable = table.render({
      elem: "#information",
      title: "商机列表",
      cellMinWidth: 80,
      url: "/information/index/index", // 数据接口
      page: true, // 开启分页
      limit: 20,
      height: "full-130",
      cols: [
        [
          { field: "checkbox", type: "checkbox" }, // 添加复选框列
          {
            field: "id",
            title: "商机编号",
            width: 80,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              return "BI - " + d.id;
            },
          },
          {
            field: "name",
            title: "商机联系人",
            width: 120,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.name + '">' + d.name + "</span>";
              return html;
            },
          },
          {
            field: "email",
            title: "电子邮箱",
            align: "center",
            width: 170,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.email + '">' + d.email + "</span>";
              return html;
            },
          },
          {
            field: "phone",
            title: "联系电话",
            width: 150,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.phone + '">' + d.phone + "</span>";
              return html;
            },
          },
          {
            field: "message",
            title: "商机留言",
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.message + '">' + d.message + "</span>";
              return html;
            },
          },
          {
            field: "product",
            title: "所属项目",
            width: 200,
            align: "center",
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.product + '">' + d.product + "</span>";
              return html;
            },
          },
          {
            field: "company",
            title: "企业名称",
            align: "center",
            width: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.company + '">' + d.company + "</span>";
              return html;
            },
          },
          {
            field: "create_time",
            title: "创建时间",
            align: "center",
            width: 180,
            rowspan: 2,
          },
          {
            title: "操作",
            align: "center",
            width: 180,
            minWidth: 125,
            toolbar: "#barDemo",
          },
        ],
      ],
      done: function () {
        // 获取右边列表的高度
        var rightListHeight = $(
          ".table-content .layui-table-view .layui-table-body"
        ).height();

        // 将右边列表的高度应用到图片编号这一列的每条数据上
        $(".layui-table-view .layui-table-body .layui-table-cell").each(
          function () {
            var $cell = $(this);
            if ($cell.text().startsWith("P")) {
              // 判断是否是图片编号列
              var $leftCell = $cell
                .parents("tr")
                .find(".layui-table-cell")
                .first(); // 找到左侧图片编号列对应的单元格
              $leftCell.css("height", rightListHeight + "px");
            }
          }
        );

        // 重新渲染表格，以解决表格高度问题
        layui.table.resize("information");

        // 绑定点击事件
        $(".open-a").on("click", function () {
          var imgUrl = $(this).attr("src");

          // 创建图层并显示大图
          layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            skin: "layui-layer-nobg", // 没有背景色
            shadeClose: true,
            content: '<img src="' + imgUrl + '" style="max-width: 100%;">',
          });
        });
      },
    });
  }
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-sm " lay-event="detail">查看详情</a>
  <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</a>
</script>
{/block}