projectmanager/app/api/view/project/view_task.html

<div class="table-content">
	<div class="layui-form-bar border-t border-x">
		<div class="project_task_btn">
			<form id="taskForm" class="layui-form">
				<button class="layui-btn layui-btn-sm add-new layui-bg-blue">+ 新建任务</button>
				<button type="reset" class="layui-btn layui-btn-primary layui-border-blue layui-btn-sm"
					lay-filter="clear">
					重置
				</button>
				<button type="reset" class="layui-btn layui-btn-sm" lay-filter="onlyme">只看我</button>
				<input id="loginusers" type="hidden" value="{$user_info.id}" />
				<input id="project_id" type="hidden" value="{$id}" />
			</form>

		</div>
	</div>
	<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script>
	function pageInit() {
		var project_id = document.getElementById('project_id').value;
		var table = layui.table, tool = layui.tool;
		layui.taskTable = table.render({
			elem: '#test',
			title: '任务列表',
			cellMinWidth: 200,
			url: "/task/index/index",
			where: { 'project_id': project_id },
			page: true, //开启分页
			limit: 20,
			cols: [[
				{ field: 'id', title: '任务编号', width: 80, align: 'center', fixed: 'left' }
				, {
					field: 'flow_name', title: '状态', align: 'center', width: 80, templet: function (d) {
						var html = '<span class="layui-badge bg-flow-' + d.flow_status + '">' + d.flow_name + '</span>';
						return html;
					}
				}
				, {
					field: 'type_name', title: '类型', width: 120, align: 'center', templet: function (d) {
						var html = '<span class="color-status-' + d.type + '">' + d.type_name + '</span>';
						return html;
					}
				}
				, {
					field: 'title', title: '任务主题', rowspan: 2, align: 'center', templet: function (d) {
						var html = '<div class="rwzt"><span class="layui-badge bg-priority-' + d.priority + '">' + d.priority_name + '</span> <a class="open-a" data-href="/task/index/view/id/' + d.id + '">' + d.title + '</a></div>';
						return html;
					}
				}
				, { field: 'director_name', title: '负责人', align: 'center', width: 80 }
				, { field: 'creater_name', title: '创建人', align: 'center', width: 80 }
				, {
					field: "flow_name",
					title: "完成进度",
					align: "center",
					width: 150,
					templet: function (d) {
						var progress =
							'<div class="layui-progress layui-progress-big" lay-showpercent="true">';
						if (d.flow_status == 1) {
							progress +=
								'<div class="layui-progress-bar layui-bg-red" lay-percent="0% style="width:0%;text-align:center;">0%</div>';
						} else if (d.flow_status == 2) {
							progress +=
								'<div class="layui-progress-bar layui-bg-orange" lay-percent="50%" style="width:50%;text-align:center;">50%</div>';
						} else if (d.flow_status == 3) {
							progress +=
								'<div class="layui-progress-bar layui-bg-green" lay-percent="100%" style="width:100%;text-align:center;">100%</div>';
						} else {
							progress +=
								'<div class="layui-progress-bar layui-bg-gray" lay-percent="0%" style="width:0%;text-align:center;">0%</div>';
						}
						progress += "</div>";
						return progress;
					},
				}
				, {
					field: 'end_time', title: '预计结束日期', align: 'center', width: 150, templet: function (d) {
						var html = d.end_time;
						if (d.delay > 0) {
							html += '<span class="color-status-0 ml-1" style="font-size:12px;">逾期' + d.delay + '天</span>';
						}
						return html;
					}
				}
			]]
		});

		//监听搜索提交
		$("#taskForm").on("click", '[lay-filter="clear"]', function () {
			setTimeout(function () {
				tableReload();
			}, 10);
		});
		//只看我按钮代码
		$("#taskForm").on("click", '[lay-filter="onlyme"]', function () {
			let loginuser = $("#loginusers").val();
			let project_id = $("#project_id").val();
			let postData = {
				type: $("#taskForm").find('[name="type"]').val(),
				flow_status: $("#taskForm").find('[name="flow_status"]').val(),
				priority: $("#taskForm").find('[name="priority"]').val(),
				cate: $("#taskForm").find('[name="cate"]').val(),
				delay: $("#taskForm").find('[name="delay"]').val(),
				// director_uid: $("#taskForm").find('[name="director_uid"]').val(),
				project_id: project_id,
				keywords: $("#taskForm").find('[name="keywords"]').val(),
				belong_project: $("#taskForm").find('[name="belong_project"]').val(),
				creater_name: $("#taskForm").find('[name="creater_name"]').val(),
				admin_id: $("#taskForm").find('[name="admin_id"]').val(),
				director_uid: loginuser,
			};
			layui.taskTable.reload({ where: postData });
		});

		//刷新表格
		function tableReload() {
			let project_id = $("#project_id").val();
			let postData = {
				type: $("#taskForm").find('[name="type"]').val(),
				flow_status: $("#taskForm").find('[name="flow_status"]').val(),
				priority: $("#taskForm").find('[name="priority"]').val(),
				cate: $("#taskForm").find('[name="cate"]').val(),
				delay: $("#taskForm").find('[name="delay"]').val(),
				director_uid: $("#taskForm").find('[name="director_uid"]').val(),
				project_id: project_id,
				keywords: $("#taskForm").find('[name="keywords"]').val(),
				belong_project: $("#taskForm").find('[name="belong_project"]').val(),
				creater_name: $("#taskForm").find('[name="creater_name"]').val(),
				admin_id: $("#taskForm").find('[name="creater_id"]').val(),
			};
			layui.taskTable.reload({ where: postData });
		}

		//新增
		$('.add-new').on('click', function () {
			tool.open('/task/index/add?project_id=' + project_id);
		});
	}
</script>