311 lines
		
	
	
		
			8.9 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			311 lines
		
	
	
		
			8.9 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-normal 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">
 | |
|     </div>
 | |
|   </div>
 | |
|   <table class="layui-hide" id="workorder" lay-filter="workorder"></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("/workorder/index/add");
 | |
|     });
 | |
| 
 | |
|     //获取项目类型
 | |
|     // function getprojectcate() {
 | |
|     //   $.get("/workorder/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();
 | |
| 
 | |
|     //批量删除数据
 | |
|     $("#batch_delete").on("click", function () {
 | |
|       var checkStatus = table.checkStatus('workorder');
 | |
|       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(
 | |
|             "/workorder/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);
 | |
|         }
 | |
|       );
 | |
|     });
 | |
| 
 | |
|     //查看详情、编辑、删除工单
 | |
|     table.on('tool(workorder)', function (obj) {
 | |
|       var data = obj.data; // 获取当前行的数据
 | |
|       if (obj.event === 'view') {
 | |
|         var id = data.id; // 获取当前行数据的id
 | |
|         tool.open('/workorder/index/view/id/' + id, '工单详情');
 | |
|       } else if (obj.event === 'edit') {
 | |
|         var id = data.id;
 | |
|         var status = data.status; // 获取当前行的status
 | |
|         // 处理工单时带上status参数
 | |
|         tool.open('/workorder/index/edit?id=' + id + '&status=' + status, '处理工单');
 | |
|       } else if (obj.event === 'delete') {
 | |
|         var id = data.id;
 | |
|         layui.layer.confirm('确定要删除该工单吗?', {icon: 3, title: '提示'}, function(index){
 | |
|           $.post(
 | |
|             "/workorder/index/delete",
 | |
|             { id: id },
 | |
|             function (res) {
 | |
|               if (res.code === 0) {
 | |
|                 layui.layer.msg('删除成功');
 | |
|                 obj.del(); // 删除表格中的对应行数据
 | |
|               } else {
 | |
|                 layui.layer.msg(res.msg);
 | |
|               }
 | |
|             }
 | |
|           );
 | |
|           layui.layer.close(index);
 | |
|         });
 | |
|       }
 | |
|     });
 | |
| 
 | |
|     //重载表格
 | |
|     function loadTableData() {
 | |
|       layui.pageTable.reload();
 | |
|     }
 | |
| 
 | |
|     //渲染表格
 | |
|     layui.pageTable = layui.table.render({
 | |
|       elem: "#workorder",
 | |
|       toolbar: '#toolbarDemo',
 | |
|       defaultToolbar: ['filter', 'exports', 'print', {
 | |
|         title: '工单列表',
 | |
|         layEvent: 'LAYTABLE_TIPS',
 | |
|         icon: 'layui-icon-tips'
 | |
|       }],
 | |
|       cellMinWidth: 80,
 | |
|       url: "/workorder/index/index", // 数据接口
 | |
|       page: true, 
 | |
|       limit: 50,
 | |
|       totalRow: true,
 | |
|       cols: [
 | |
|         [
 | |
|           { type: 'checkbox' },
 | |
|           { field: 'id', width: 80, title: '编号', sort: true, align: "center", totalRowText: '合计:' },
 | |
|           {
 | |
|             field: "project_id",
 | |
|             title: "隶属项目",
 | |
|             align: "center",
 | |
|             width: 180,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span>' + d.project_id + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "content",
 | |
|             title: "项目问题",
 | |
|             align: "center",
 | |
|             minWidth: 180,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span>' + d.content + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "status",
 | |
|             title: "工单状态",
 | |
|             width: 120,
 | |
|             align: "center",
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var statusMap = {
 | |
|                 0: "未解决",
 | |
|                 1: "解决中",
 | |
|                 2: "已解决",
 | |
|                 3: "已关闭"
 | |
|               };
 | |
|               var statusText = statusMap[d.status] !== undefined ? statusMap[d.status] : d.status;
 | |
|               var html = '<span class="gdzt gd-' + d.status + '">' + statusText + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "solve",
 | |
|             title: "分派处理人",
 | |
|             align: "center",
 | |
|             width: 120,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.solve) {
 | |
|                 var html = '<span>' + d.solve + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "-";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "creater",
 | |
|             title: "提交人",
 | |
|             align: "center",
 | |
|             width: 120,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span>' + d.creater + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "contact",
 | |
|             title: "联系方式",
 | |
|             align: "center",
 | |
|             width: 140,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.contact) {
 | |
|                 var html = '<span>' + d.contact + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "-";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "remark",
 | |
|             title: "备注",
 | |
|             align: "center",
 | |
|             minWidth: 180,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               if (d.remark) {
 | |
|                 var html = '<span>' + d.remark + "</span>";
 | |
|                 return html;
 | |
|               } else {
 | |
|                 return "-";
 | |
|               }
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             field: "sub_time",
 | |
|             title: "提交时间",
 | |
|             align: "center",
 | |
|             width: 180,
 | |
|             rowspan: 2,
 | |
|             templet: function (d) {
 | |
|               var html =
 | |
|                 '<span>' + d.sub_time + "</span>";
 | |
|               return html;
 | |
|             },
 | |
|           },
 | |
|           {
 | |
|             fixed: 'right',
 | |
|             title: "操作",
 | |
|             align: "center",
 | |
|             width: 280,
 | |
|             minWidth: 220,
 | |
|             toolbar: "#barDemo",
 | |
|           },
 | |
|         ],
 | |
|       ],
 | |
|     });
 | |
|   }
 | |
| 
 | |
| </script>
 | |
| 
 | |
| 
 | |
| <script type="text/html" id="barDemo">
 | |
|   <a class="layui-btn layui-btn-sm " id="view" lay-event="view">查看详情</a>
 | |
|   <!-- <button class="layui-btn layui-btn-sm" lay-event="view">查看详情</button> -->
 | |
|   <!-- <a class="layui-btn layui-btn-sm " data-href="/workorder/index/view/id/' + d.id + '" style="display: flex;justify-content: center;align-items: center;">查看详情</a> -->
 | |
|   <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm" lay-event="edit">处理工单</a>
 | |
|   <!-- <a class="layui-btn layui-btn-primary layui-border layui-btn-sm" lay-event="delete">删除</a> -->
 | |
| </script>
 | |
| 
 | |
| <style>
 | |
|     .gdzt{
 | |
|         padding: 3px 5px;
 | |
|         border-radius: 4px;
 | |
|     }
 | |
| 
 | |
|     .gd-0{
 | |
|         color:#555 ;
 | |
|         background-color: #eee;
 | |
|     }
 | |
| 
 | |
|     .gd-1{
 | |
|         color:#fff ;
 | |
|         background-color: #1e9fff;
 | |
|     }
 | |
| 
 | |
|     .gd-2{
 | |
|         color:#fff ;
 | |
|         background-color: #16b777;
 | |
|     }
 | |
| 
 | |
|     .gd-3{
 | |
|         color:#fff ;
 | |
|         background-color: #a233c6 ;
 | |
|     }
 | |
| </style>
 | |
| {/block} |