projectmanager/app/reimbursement/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="/applications/nav/index"><cite>应用</cite></a>
  <a><cite>报销管理</cite></a>
</span>
{/block} {block name="body"}
<div class="table-content p-3">
  <div class="table_bar sticky-bar">
    <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="batch_delete">批量删除</button>
    </div>
  </div>
  <table class="layui-hide" id="reimbursement" lay-filter="reimbursement"></table>
  <span id="total-price"></span>
</div>
{/block}

<!-- 脚本 -->
{block name="script"}


<script>
  const moduleInit = ["tool", "gouguEdit", "gouguComment"];

  function gouguInit() {
    var table = layui.table;
    var tool = layui.tool;
    var dropdown = layui.dropdown;
    var $ = layui.jquery;
    var layer = layui.layer;

    // 刷新按钮
    $("#refresh-btn").on("click", function () {
      location.reload();
    });

    //新增报销
    $(".add-new").on("click", function () {
      tool.open("/reimbursement/index/add");
    });

    layui.table.on('checkbox(reimbursement)', function (obj) {
      var checkStatus = layui.table.checkStatus('reimbursement');
      var data = checkStatus.data;
      // 修改开始：计算合计金额并显示
      var totalPrice = data.reduce((acc, curr) => acc + parseFloat(curr.price || 0), 0).toFixed(2); // 确保结果为两位小数
      document.getElementById('total-price').innerText = '合计金额：￥' + totalPrice;
      // 修改结束
    });

    //查看详情唤醒view界面
    table.on('tool(reimbursement)', function (obj) {
      var data = obj.data; // 获取当前行的数据

      // console.log(data);
      if (obj.event === 'view') {
        var id = data.id; 
        // console.log(id);
        layui.layer.open({
          type: 2, 
          title: '报销详情',
          shadeClose: true,
          shade: 0.8,
          area: ['70%', '90%'], 
          content: '/reimbursement/index/view?id=' + id,

          end: function () {
            layui.table.reload('reimbursement');
          }
        });
      } else if (obj.event === 'delete') {
        layui.layer.confirm(
          "确定删除该条数据吗？",
          { icon: 3, title: "提示" },
          function (index) {
            $.post(
              "/reimbursement/index/delete",
              { id: data.id },
              function (res) {
                if (res.code === 1) {
                  layui.layer.confirm("该表单含有内部数据，确定要删除吗？", { icon: 3, title: "提示" }, function (innerIndex) {
                    $.post(
                      "/reimbursement/index/delete",
                      { id: data.id },
                      function (innerRes) {
                        if (innerRes.code === 1) {
                          layui.layer.msg("删除成功");
                          obj.del(); // 删除行数据
                        } else {
                          layui.layer.msg(innerRes.msg);
                        }
                      }
                    );
                    layui.layer.close(innerIndex);
                  });
                } else if (res.code === 0) {
                  layui.layer.msg("删除成功");
                  obj.del(); // 删除行数据
                } else {
                  layui.layer.msg(res.msg);
                }
              }
            );
            layui.layer.close(index);
          }
        );
      }
    });

    //批量删除数据
    $("#batch_delete").on("click", function () {
      var checkStatus = table.checkStatus('reimbursement');
      var data = checkStatus.data;
      var ids = data.map(item => item.id);

      if (ids.length === 0) {
        layui.layer.msg("请选择要删除的数据");
        return;
      }

      layui.layer.confirm(
        "确定删除选中的计划吗？",
        { icon: 3, title: "提示" },
        function (index) {
          $.post(
            "/reimbursement/index/batch_delete",
            { ids: ids },
            function (res) {
              if (res.code === 0) {
                layui.layer.msg("批量删除成功");
                loadTableData(); // 重新加载表格数据
              } else {
                layui.layer.msg(res.msg);
              }
            }
          );
          layui.layer.close(index);
        }
      );
    });

    // 重载表格
    function loadTableData() {
      layui.pageTable.reload();
    }

    // 渲染表格
    layui.pageTable = layui.table.render({
      elem: "#reimbursement",
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '计划列表',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cellMinWidth: 80,
      url: "/reimbursement/index/index", // 数据接口
      page: true,
      limit: 50,
      // totalRow: true,
      cols: [
        [
          { type: 'checkbox' },
          { field: 'id', width: 100, title: '编号', sort: true, align: "center"},
          {
            field: "order",
            title: "账单编号",
            align: "center",
            width: 180,
            rowspan: 2,
            templet: function (d) {
              var html =
                '<span class="a1-' + d.order + '">' + d.order + "</span>";
              return html;
            },
          },
          {
            field: "create_time",
            title: "创建时间",
            align: "center",
            width: 180,
            rowspan: 2,
          },
          {
            field: "status",
            title: "报销状态",
            align: "center",
            width: 120,
            rowspan: 2,
          },
          // {
          //   field: "lock",
          //   title: "账单状态",
          //   align: "center",
          //   width: 120,
          //   rowspan: 2,
          // },
          {
            field: "department",
            title: "隶属部门",
            align: "center",
            width: 120,
            rowspan: 2,
          },
          {
            field: "total",
            title: "报销金额",
            width: 120,
            align: "center",
            rowspan: 2,
          },
          {
            field: "creater",
            title: "创建者",
            width: 120,
            align: "center",
            rowspan: 2,
          },
          {
            field: "remark",
            title: "备注",
            align: "center",
            rowspan: 2,
          },
          {
            fixed: 'right',
            title: "操作",
            align: "center",
            width: 220,
            minWidth: 220,
            toolbar: "#barDemo",
          },
        ],
      ],
    });

    // 每隔5秒刷新表格数据
    // setInterval(function () {
    //   loadTableData();
    // }, 5000);
  }

</script>


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