scott
/
crm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
							{extend name="public/layout" /} {block name="title"}工程预算{/block} {block
name="body"}

<link rel="stylesheet" href="__LAYUI__/common.css" media="all" />
<style type="text/css">
  html,
  body {
    display: block;
    min-width: 1100px;
  }

  .layui-table thead tr,
  .layui-table-header {
    background-color: #d8e6f1 !important;
  }

  .layui-fluid {
    display: block;
    box-shadow: 0 0 4px 0 #b6cade;
    border-radius: 5px;
    margin: 15px;
    background-color: #ffffff;
    min-height: 100vh;
    height: auto !important;
    overflow: hidden;
  }

  .layui-form-label {
    width: auto;
  }
  .layui-laydate-range {
    width: 581px;
  }
  .layui-table-page > div {
    display: flex;
    justify-content: flex-start;
  }
  .layui-btn-primary,
  .layui-btn-primary:hover {
    border: 1px solid #249efb;
    background-color: #fff;
    color: #249efb;
  }
  .layui-btn-normal,
  .layui-btn-normal:hover {
    border: 1px solid #249efb;
    background-color: #fff;
    color: #249efb;
  }
  .layui-btn-danger,
  .layui-btn-danger:hover {
    color: #ff5722;
    border: 1px solid #ff5722;
    background-color: #fff;
  }
  .layui-form-selected dl {
    z-index: 99999999;
  }
  .xq-Catebox {
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0px 15px;
  }
  .xq-left,
  .xq-right {
    display: flex;
    align-items: center;
  }
  .xq-edit {
    color: #249efb;
    margin: 0px 10px;
    font-size: 20px;
    cursor: pointer;
  }
  .xq-delete {
    color: red;
    font-size: 20px;
    cursor: pointer;
  }
  .mr10 {
    margin-right: 10px;
  }
  .xq-Table {
    width: 100%;
  }
  .xq-Table table {
    width: 100%;
    border-color: #f0f0f0;
  }
  thead {
    background-color: #d8e6f1 !important;
  }
  thead,
  tr {
    width: 100%;
    height: 40px;
  }
  thead > tr > th {
    height: 40px;
  }
  tbody > tr > td {
    box-sizing: border-box;
    padding: 5px 10px;
  }
  .xq-Box {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .xq-AddCate {
    width: 100px;
    height: 38px;
    background-color: #249efb;
    color: #fff;
    border-radius: 4px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
  }
  .xq-collasp {
    cursor: pointer;
  }
  .layui-layer-loading .layui-layer-content::after {
    content: "正在加载内容...";
    position: absolute;
    top: 30px;
    color: #fff;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline" style="float: left">
            <button
              class="layui-btn layui-btn-primary layuiadmin-btn-course"
              data-type="import"
            >
              + 导入
            </button>
            <button
              class="layui-btn layui-btn-primary layuiadmin-btn-course"
              data-type="add"
            >
              添加
            </button>
          </div>
          <div style="float: right">
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="keyword"
                  placeholder="请输入定额名称"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
            <div class="layui-inline">
              <button
                class="layui-btn layuiadmin-btn-course searchBtn"
                lay-submit
                lay-filter="LAY-user-front-search"
              >
                <i
                  class="layui-icon layui-icon-search layuiadmin-button-btn"
                ></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card-body" style="text-align: center">
        <div id="renderHtml"></div>
        <div class="xq-AddCate">添加分类</div>
      </div>
    </div>
  </div>
</body>
{/block} {block name="js"}
<script>
  layui
    .config({
      base: "__LAYUI__/",
      urlbase: "/sys",
    })
    .extend({
      index: "lib/index", //主入口模块
    })
    .use(["index", "form", "table", "laydate"], function () {
      var $ = layui.$,
        form = layui.form,
        laydate = layui.laydate,
        table = layui.table,
        showIndex = [];
      //日期范围
      laydate.render({
        elem: "#select_date",
        range: true,
      });
      //监听搜索
      form.on("submit(LAY-user-front-search)", function (data) {
        var field = data.field;

        getlist(field)
      });
      //事件
      var active = {
        add: function () {
          layer.open({
            type: 2,
            title: ["添加工程预算", "color:#333333;background-color:#D8E6F1;"],
            content: '{:url("smart_screen_more/project_add")}',
            resize: false,
            area: ["80%", "80%"],
            // btn: ['确定', '取消'],
            yes: function (index, layero) {
              //点击确认触发 iframe 内容中的按钮提交
              // var submit = layero.find('iframe').contents().find("#activity-submit");
              // submit.click();
            },
          });
        },
        import: function () {
          layer.open({
            type: 2,
            title: ["导入工程预算", "color:#333333;background-color:#D8E6F1;"],
            content: '{:url("smart_screen_more/importLog")}?type=2',
            resize: false,
            area: ["60%", "80%"],
            // btn: ['确定', '取消'],
            yes: function (index, layero) {
              //点击确认触发 iframe 内容中的按钮提交
              // var submit = layero.find('iframe').contents().find("#activity-submit");
              // submit.click();
            },
          });
        },
      };

      window.reloadlistFun = function () {
        getlist();
      };

      $(".xq-AddCate").click(function () {
        layer.prompt(
          {
            value: "",
            title: ["添加分类", "color:#333333;background-color:#D8E6F1;"],
          },
          function (value, index, elem) {
            if (!value) {
              layer.msg("请输入分类名称");
              return false;
            }
            $.ajax({
              type: "post",
              url: "{:url('smart_screen_more/project_cate_add')}",
              data: {
                name: value,
              },
              success: function (res) {
                if (res.code == 0) {
                  layer.msg(
                    res.msg,
                    {
                      anim: 0,
                    },
                    function () {
                      //执行重载
                      getlist();
                    }
                  );
                } else {
                  layer.msg(res.msg, {
                    anim: 6,
                  });
                }
              },
            });
            layer.close(index);
          }
        );
      });

      function editCateName(name, id) {
        layer.prompt(
          {
            value: name,
            title: ["编辑分类", "color:#333333;background-color:#D8E6F1;"],
          },
          function (value, index, elem) {
            if (!value) {
              layer.msg("请输入分类名称");
              return false;
            }
            $.ajax({
              type: "post",
              url: "{:url('smart_screen_more/project_cate_edit')}",
              data: {
                name: value,
                id: id,
              },
              success: function (res) {
                if (res.code == 0) {
                  layer.msg(
                    res.msg,
                    {
                      anim: 0,
                    },
                    function () {
                      //执行重载
                      getlist();
                    }
                  );
                } else {
                  layer.msg(res.msg, {
                    anim: 6,
                  });
                }
              },
            });
            layer.close(index);
          }
        );
      }

      function deleteCate(id) {
        layer.confirm(
          "确定删除此分类？",
          { title: ["信息", "color:#333333;background-color:#D8E6F1;"] },
          function (index) {
            layer.close(index);
            $.ajax({
              type: "post",
              url: "{:url('smart_screen_more/project_cate_delete')}",
              data: {
                id: id,
              },
              success: function (res) {
                if (res.code == 0) {
                  layer.msg(
                    res.msg,
                    {
                      anim: 0,
                    },
                    function () {
                      //执行重载
                      getlist();
                    }
                  );
                } else {
                  layer.msg(res.msg, {
                    anim: 6,
                  });
                }
              },
            });
          }
        );
      }

      function deleteProject(id) {
        layer.confirm(
          "确定删除此工程预算？",
          { title: ["信息", "color:#333333;background-color:#D8E6F1;"] },
          function (index) {
            layer.close(index);
            $.ajax({
              type: "post",
              url: "{:url('smart_screen_more/project_delete')}",
              data: {
                id: id,
              },
              success: function (res) {
                if (res.code == 0) {
                  layer.msg(
                    res.msg,
                    {
                      anim: 0,
                    },
                    function () {
                      //执行重载
                      getlist();
                    }
                  );
                } else {
                  layer.msg(res.msg, {
                    anim: 6,
                  });
                }
              },
            });
          }
        );
      }

      getlist();
      function getlist(params = {}) {
        let loadingIndex = layer.load("Loading...", {
          shade: [0.6, "#000"], //0.1透明度的白色背景
        });
        $.ajax({
          url: "{:url('smart_screen_more/project')}",
          type: "post",
          data: {
            ...params
          },
          success: (res) => {
            setTimeout(() => {
              layer.close(loadingIndex);
            }, 1500);
            if (res.code == 0) {
              if (res.data.length) {
                renderHtmlFunc(res.data);
              } else {
                $("#renderHtml").html('<div style="width: 100%;text-align:center;line-height: 150px;color: #999;font-size: 16px;border: 1px solid #f2f2f2;margin-bottom: 20px;">请添加分类</div>');
              }
            }
          },
        });
      }

      function renderHtmlFunc(dataArr) {
        let htmls = dataArr
          .map((item, index) => {
            return `<div class="xq-Box">
                    <div class="xq-Catebox">
                      <div class="xq-left">
                        <span>${item.name}</span>
                        <i class="layui-icon layui-icon-edit xq-edit" data-name="${
                          item.name
                        }" data-id="${item.id}"></i>
                        <i class="layui-icon layui-icon-delete xq-delete" data-id="${
                          item.id
                        }"></i>
                      </div>
                      <div class="xq-right">
                        <span class="mr10">共${item.project_count}个工程</span>
                        <i class="layui-icon ${
                          showIndex.includes(index)
                            ? "layui-icon-down"
                            : "layui-icon-up"
                        } xq-collasp" data-index="${index}"></i>
                      </div>
                    </div>
                    <div class="xq-Table ${
                      showIndex.includes(index) ? "" : "layui-hide"
                    }">
                      <table border="1px">
                        <thead>
                          <tr>
                            <th style="width: 180px">类别</th>
                            <th style="width: 220px">定额名称</th>
                            <th style="width: 120px">单位</th>
                            <th style="width: 140px">综合单价</th>
                            <th>项目说明</th>
                            <th style="width: 120px">上传人员</th>
                            <th style="width: 180px">操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          ${renderTableHtmls(item.project)}
                        </tbody>
                      </table>
                      ${
                        item.project_count == 0
                          ? `<div style="width: 100%;text-align:center;line-height:100px;">暂无数据</div>`
                          : ""
                      }
                    </div>
                  </div>`;
          })
          .join("");
        $("#renderHtml").html(htmls);
        setTimeout(() => {
          $(".xq-edit").click(function () {
            let dataObj = $(this).prop("dataset");
            editCateName(dataObj.name, dataObj.id);
          });
          $(".xq-delete").click(function () {
            let dataObj = $(this).prop("dataset");
            deleteCate(dataObj.id);
          });
          $(".xq-collasp").click(function () {
            let dataObj = $(this).prop("dataset");
            let index = parseInt(dataObj.index);
            $(".xq-Table").eq(index).toggleClass("layui-hide");
            if ($(this).hasClass("layui-icon-down")) {
              $(this).removeClass("layui-icon-down");
              $(this).addClass("layui-icon-up");
            } else {
              $(this).addClass("layui-icon-down");
              $(this).removeClass("layui-icon-up");
            }
            if (showIndex.includes(index)) {
              showIndex.splice(showIndex.indexOf(index), 1);
            } else {
              showIndex.push(index);
            }
          });
          $(".xw-edit").click(function () {
            let dataObj = $(this).prop("dataset");
            layer.open({
              type: 2,
              title: [
                "修改工程预算",
                "color:#333333;background-color:#D8E6F1;",
              ],
              content:
                "{:url('smart_screen_more/project_edit')}?id=" + dataObj.id,
              resize: false,
              area: ["80%", "80%"],
              // btn: ['确定', '取消'],
              yes: function (index, layero) {
                //点击确认触发 iframe 内容中的按钮提交
                // var submit = layero.find('iframe').contents().find("#activity-submit");
                // submit.click();
              },
            });
          });
          $(".xw-dele").click(function () {
            let dataObj = $(this).prop("dataset");
            deleteProject(dataObj.id);
          });
        }, 300);
      }

      function renderTableHtmls(dataArr) {
        let htmls = dataArr
          .map((vitem, vindex) => {
            return `<tr class="trEle${vitem.id}">
                    <td>${vitem.category}</td>
                    <td>${vitem.name}</td>
                    <td>${vitem.unit}</td>
                    <td>${vitem.price}</td>
                    <td>${vitem.content}</td>
                    <td>${vitem.employee_name || "无"}</td>
                    <td>
                    <a class="layui-btn layui-btn-normal layui-btn-xs xw-edit" data-id="${
                      vitem.id
                    }">
                      编辑
                    </a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs xw-dele" data-id="${
                      vitem.id
                    }">
                      删除
                    </a>
                    </td>
                  </tr>`;
          })
          .join("");
        return htmls;
      }

      //监听
      table.on("tool(company-activity)", function (obj) {
        var data = obj.data;
        if (obj.event === "edit") {
        } else if (obj.event === "del") {
        }
      });

      $(".layui-btn.layuiadmin-btn-course").on("click", function () {
        var type = $(this).data("type");
        active[type] ? active[type].call(this) : "";
      });
    });
</script>
{/block}