411 lines
		
	
	
		
			13 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			411 lines
		
	
	
		
			13 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| {extend name="../../base/view/common/base" /}
 | |
| <!-- 主体 -->
 | |
| {block name="breadcrumb"}
 | |
| <span class="layui-breadcrumb">
 | |
|   <a href="http://www.meteteme.com/" target="_blank">江苏美天科技</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 class="cateselect layui-form-bar border-x">
 | |
|       <form class="layui-form" action="" id="filter-form">
 | |
|         <div class="layui-form-item">
 | |
|           <label class="layui-form-label">计划年份</label>
 | |
|           <div class="layui-input-inline">
 | |
|             <select name="year" lay-verify=""></select>
 | |
|           </div>
 | |
|           <label class="layui-form-label">重要程度</label>
 | |
|           <div class="layui-input-inline">
 | |
|             <select name="important" lay-verify="">
 | |
|               <option value="">请选择</option>
 | |
|               <option value="1">★</option>
 | |
|               <option value="2">★★</option>
 | |
|               <option value="3">★★★</option>
 | |
|               <option value="4">★★★★</option>
 | |
|               <option value="5">★★★★★</option>
 | |
|             </select>
 | |
|           </div>
 | |
|           <label class="layui-form-label">项目类型</label>
 | |
|           <div class="layui-input-inline">
 | |
|             <select name="cate" lay-verify=""></select>
 | |
|           </div>
 | |
|           <label class="layui-form-label">负责人</label>
 | |
|           <div class="layui-input-inline">
 | |
|             <input class="layui-input search-input" id="search-responsible" type="text" placeholder="请输入负责人">
 | |
|           </div>
 | |
| 
 | |
|         </div>
 | |
|         <div class="layui-form-item">
 | |
|           <div style="width: 100%;height: 10px;"></div>
 | |
|           <label class="layui-form-label">项目名称</label>
 | |
|           <div class="layui-input-inline">
 | |
|             <input class="layui-input search-input" id="search-name" type="text" placeholder="请输入项目名称">
 | |
|           </div>
 | |
|           <div class="layui-input-inline">
 | |
|             <button class="layui-btn" lay-submit lay-filter="filterSearch" id="search-btn">筛选</button>
 | |
|             <button class="layui-btn layui-btn-normal" lay-submit lay-filter="filterSearch"
 | |
|               id="search-reload">清除</button>
 | |
|           </div>
 | |
| 
 | |
|         </div>
 | |
|       </form>
 | |
|     </div>
 | |
|   </div>
 | |
|   <table class="layui-hide" id="plan" lay-filter="plan"></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("/plan/index/add");
 | |
|     });
 | |
| 
 | |
|     layui.table.on('checkbox(plan)', function (obj) {
 | |
|       var checkStatus = layui.table.checkStatus('plan');
 | |
|       var data = checkStatus.data;
 | |
|       // 修改开始:计算合计金额并显示
 | |
|       var totalPrice = data.reduce((acc, curr) => acc + parseFloat(curr.price || 0), 0).toFixed(2); // 确保结果为两位小数
 | |
|       document.getElementById('total-price').innerText = '合计金额:¥' + totalPrice;
 | |
|       // 修改结束
 | |
|     });
 | |
| 
 | |
|     //获取计划年份
 | |
|     function getPlanYear() {
 | |
|       $.get("/plan/index/getplanyear", function (data) {
 | |
|         var selectYear = $("select[name='year']");
 | |
|         selectYear.empty(); // 清空下拉框
 | |
|         selectYear.append('<option value=""></option>'); // 添加空选项
 | |
|         data.data.forEach(function (year) {
 | |
|           selectYear.append('<option value="' + year + '">' + year + '</option>'); // 添加年份选项
 | |
|         });
 | |
|         layui.form.render('select'); // 重新渲染下拉框
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // 调用计划年份
 | |
|     getPlanYear();
 | |
| 
 | |
|     //获取项目类型
 | |
|     function getprojectcate() {
 | |
|       $.get("/plan/index/getprojectcate", function (data) {
 | |
|         var selectCate = $("select[name='cate']");
 | |
|         selectCate.empty(); // 清空下拉框
 | |
|         selectCate.append('<option value=""></option>'); // 添加空选项
 | |
|         data.data.forEach(function (cate) {
 | |
|           selectCate.append('<option value="' + cate.id + '">' + cate.cate + '</option>'); // 修改为 cate.id
 | |
|         });
 | |
|         layui.form.render('select'); // 重新渲染下拉框
 | |
|       });
 | |
|     }
 | |
| 
 | |
|     // 调用项目类型
 | |
|     getprojectcate();
 | |
| 
 | |
| 
 | |
|     // 删除单条数据
 | |
|     table.on("tool(plan)", function (obj) {
 | |
|       var data = obj.data;
 | |
|       if (obj.event === "delete") {
 | |
|         layui.layer.confirm(
 | |
|           "确定删除该计划吗?",
 | |
|           { icon: 3, title: "提示" },
 | |
|           function (index) {
 | |
|             $.post(
 | |
|               "/plan/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);
 | |
|           }
 | |
|         );
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     //批量删除数据
 | |
|     $("#batch_delete").on("click", function () {
 | |
|       var checkStatus = table.checkStatus('plan');
 | |
|       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(
 | |
|             "/plan/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);
 | |
|         }
 | |
|       );
 | |
|     });
 | |
| 
 | |
|     //查看详情唤醒view界面
 | |
|     table.on('tool(plan)', function (obj) {
 | |
|       var data = obj.data; // 获取当前行的数据
 | |
|       if (obj.event === 'view') {
 | |
|         var id = data.id; // 获取当前行数据的id
 | |
|         // 使用layer弹出层来显示详情页面
 | |
|         layui.layer.open({
 | |
|           type: 2, // iframe层
 | |
|           title: '计划详情',
 | |
|           shadeClose: true,
 | |
|           shade: 0.8,
 | |
|           area: ['70%', '90%'], // 宽高
 | |
|           content: '/plan/index/view/id/' + id  // 
 | |
|         });
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     //重载表格
 | |
|     function loadTableData() {
 | |
|       layui.pageTable.reload();
 | |
|     }
 | |
| 
 | |
|     //渲染表格
 | |
|     layui.pageTable = layui.table.render({
 | |
|       elem: "#plan",
 | |
|       toolbar: '#toolbarDemo',
 | |
|       defaultToolbar: ['filter', 'exports', 'print', {
 | |
|         title: '计划列表',
 | |
|         layEvent: 'LAYTABLE_TIPS',
 | |
|         icon: 'layui-icon-tips'
 | |
|       }],
 | |
|       cellMinWidth: 80,
 | |
|       url: "/plan/index/index", // 数据接口
 | |
|       page: true, 
 | |
|       limit: 50,
 | |
|       totalRow: true,
 | |
|       cols: [
 | |
|         [
 | |
|           { type: 'checkbox' },
 | |
|           { field: 'id', width: 80, title: '编号', sort: true, align: "center", totalRowText: '合计:' },
 | |
|           {
 | |
|             field: "year",
 | |
|             title: "计划年份",
 | |
|             align: "center",
 | |
|             width: 80,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.year + '">' + d.year + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "name",
 | |
|             title: "项目名称",
 | |
|             width: 240,
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.name + '">' + d.name + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "cate",
 | |
|             title: "项目类型",
 | |
|             align: "center",
 | |
|             width: 80,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.cate + '">' + d.cate + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "important",
 | |
|             title: "重要程度",
 | |
|             width: 80,
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var stars = "";
 | |
|               for (var i = 0; i < d.important; i++) {
 | |
|                 stars += "★";
 | |
|               }
 | |
|               return '<span class="important-' + d.important + '">' + stars + "</span>";
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "status",
 | |
|             title: "项目状态",
 | |
|             width: 80,
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="layui-btn layui-btn-xs a1-' + d.status_id + '">' + d.status + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "price",
 | |
|             title: "项目金额",
 | |
|             width: 120,
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.price + '">' + d.price + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "responsible",
 | |
|             title: "负责人",
 | |
|             align: "center",
 | |
|             width: 120,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.responsible + '">' + d.responsible + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "start_time",
 | |
|             title: "开始时间",
 | |
|             align: "center",
 | |
|             width: 120,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.start_time) {
 | |
|                 var date = new Date(d.start_time * 1000); // 转换时间
 | |
|                 var year = date.getFullYear();
 | |
|                 var month = ("0" + (date.getMonth() + 1)).slice(-2);
 | |
|                 var day = ("0" + date.getDate()).slice(-2);
 | |
|                 var formattedDate = year + "-" + month + "-" + day;
 | |
|                 var html = '<span class="a1-' + d.start_time + '">' + formattedDate + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "待定";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "end_time",
 | |
|             title: "结束时间",
 | |
|             align: "center",
 | |
|             width: 120,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.end_time) {
 | |
|                 var date = new Date(d.end_time * 1000); // 转换时间
 | |
|                 var year = date.getFullYear();
 | |
|                 var month = ("0" + (date.getMonth() + 1)).slice(-2);
 | |
|                 var day = ("0" + date.getDate()).slice(-2);
 | |
|                 var formattedDate = year + "-" + month + "-" + day;
 | |
|                 var html = '<span class="a1-' + d.end_time + '">' + formattedDate + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "待定";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "schedule",
 | |
|             title: "计划进度",
 | |
|             align: "center",
 | |
|             width: 180,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span class="a1-' + d.schedule + '">' + d.schedule + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "remark",
 | |
|             title: "备注",
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.remark) {
 | |
|                 var html = '<span class="a1-' + d.remark + '">' + d.remark + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "create_time",
 | |
|             title: "创建时间",
 | |
|             align: "center",
 | |
|             width: 180,
 | |
|             rowspan: 2,
 | |
|           },
 | |
|           {
 | |
|             fixed: 'right',
 | |
|             title: "操作",
 | |
|             align: "center",
 | |
|             width: 220,
 | |
|             minWidth: 220,
 | |
|             toolbar: "#barDemo",
 | |
|           },
 | |
|         ],
 | |
|       ],
 | |
|     });
 | |
|   }
 | |
| 
 | |
| </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 " lay-event="edit">编辑</a>
 | |
|   <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
 | |
| </script>
 | |
| {/block} |