SMANAGE/backup/Manage/Tasks/Tasks.html

<!DOCTYPE html>
<html class="x-admin-sm">
	<head>
		<meta charset="UTF-8">
		<title>银河锋锐工作室账户后台系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <link rel="stylesheet" href="/css/win10ui.css">
		<link rel="stylesheet" href="/css/theme.css">
		<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="/js/xadmin.js"></script>
        <script type="text/javascript" src="/js/tables.js"></script>
		<style>
            .layui-table-testcss .layui-table-header,
            .layui-table-testcss thead tr{background-color: #F8FCF9; color: #16BAAA}
            .layui-form-testcss > div{margin-bottom: 6px;}
        </style>
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>任务</a>
                <a><cite>任务</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <table class="layui-hide" id="Tasks-treetable"></table>
						<script type="text/html" id="TPL-treeTable">
							<div class="layui-btn-container">
								任务管理器
							</div>
						</script>
                        <script type="text/html" id="TPL-Tasks-treetable-tools">
                            <div class="layui-btn-container">
                                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                                <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
                            </div>
                        </script>
                        <script>
                            layui.use(function() {
                                var treeTable = layui.treeTable;
                                var layer = layui.layer;
                                var laytpl = layer.laytpl;
                                var dropdown = layui.dropdown;
                                // 渲染
                                var inst = treeTable.render({
                                    elem: '#Tasks-treetable',
                                    id: "Tasks-treetable",
                                    url: '/API/GetTasks.api',
                                    tree: {},
                                    toolbar: '#TPL-Tasks-treetable',
                                    cols: GetTaskTable("#TPL-Tasks-treetable-tools"),
                                    page: false
                                });
                                // 单元格工具事件
                                treeTable.on('tool(' + inst.config.id + ')', function(obj) {
                                    var layEvent = obj.event; // 获得 lay-event 对应的值
                                    var trElem = obj.tr;
                                    var trData = obj.data;
                                    var tableId = obj.config.id;
                                    if (layEvent === "detail") {
                                        xadmin.add_tab_f('任务 - '+trData.TaskName,'/Tasks/TaskToDo.html?TaskUUID='+trData.TaskUUID);
                                    } else if (layEvent === "more") {
                                        // 下拉菜单
                                        dropdown.render({
                                            elem: this, // 触发事件的 DOM 对象
                                            show: true, // 外部事件触发即显示
                                            align: "right", // 右对齐弹出
                                            data: [],
                                            click: function (menudata) {}
                                        });
                                    }
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
						<div style="padding: 16px;"><table class="layui-hide" id="ID-table-css"></table></div>
						<script type="text/html" id="ID-table-user">
							<ul>
								<li><strong>UUID:</strong> {{= d.TaskUUID }} </li>
								<li><strong>任务名称:</strong> {{= d.TaskName }} </li>
								<li><strong>任务发布者:</strong> {{= d.TaskPublisher }} </li>
							</ul>
						</script>
						<script type="text/html" id="ID-table-Time">
							<ul>
								<li><strong>任务开始时间:</strong> {{= d.TaskStartTime }} </li>
								<li><strong>任务结束时间:</strong> {{= d.TaskEndTime }} </li>
								<li><strong>任务添加时间:</strong> {{= d.TaskAddTime }} </li>
								<li><strong>任务结束时间:</strong> {{= d.TaskFinishTime }} </li>
							</ul>
						</script>
						<script type="text/html" id="ID-table-Flan">
							<ul>
								<li><strong>任务完成状态:</strong>
									{{# if (d.TaskDo == 1) { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini">已完成</span>
									{{# } else if (d.TaskDo == 0) { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">未完成</span>
									{{# } else { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">未知状态</span>
									{{# }; }}
								</li>
								<li><strong>任务通过状态:</strong>
									{{# if (d.TaskPass == 1) { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini">通过</span>
									{{# } else if (d.TaskPass == -1) { }}
										<span class="layui-btn layui-btn-danger layui-btn-mini">驳回</span>
									{{# } else if (d.TaskPass == 0) { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">未确认</span>
									{{# } else { }}
										<span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">未知状态</span>
									{{# } }}
								</li>
							</ul>
						</script>
						<script type="text/html" id="ID-table-Type">
							<ul>
								<li><strong>任务类型:</strong>
									{{# for (let i = 0; i < d.TaskType.length; i++) { }}
									  <span class="layui-btn layui-btn-normal layui-btn-mini">{{ d.TaskType[i] }}</span>
									{{# } }}
								</li>
								<li><strong>任务回复:</strong>
									{{# for (let i = 0; i < d.TaskAnswer.length; i++) { }}
									  <span class="layui-btn layui-btn-normal layui-btn-mini">{{ d.TaskAnswer[i] }}</span>
									{{# } }}
								</li>
							</ul>
						</script>
						<script type="text/html" id="ID-table-css-tool">
							<div class="layui-form layui-form-testcss">
								<div><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="css-submit">确认</button></div>
								<div><button class="layui-btn layui-btn-warm layui-btn-fluid" lay-submit lay-filter="css-submit">领取积分</button></div>
							</div>
						</script>
						<script>
							layui.use(['table'], function(){
								var table = layui.table;
								var form = layui.form;
								
								// 创建渲染实例
								table.render({
									elem: '#ID-table-css',
									url:'/API/GetTasks.api?TaskMod=1',
									page: false,
									lineStyle: 'height: 150px;',
									css: [
										'.layui-table-page{text-align: center;}'
									].join(''),
									className: 'layui-table-testcss',
									cols: [[
										{field:'', width:270, title: '基本信息', templet: '#ID-table-user'},
										{field:'', width:230, title: '时间', templet: '#ID-table-Time'},
										{field:'', width:200, title: '状态', templet: '#ID-table-Flan'},
										{field:'', minWidth:100, title: '签名', templet: '#ID-table-Type'},
										{width:160, title: '操作', templet: '#ID-table-css-tool'}
									]]
								});
								// 表单提交
								form.on('submit(css-submit)', function(data){
								var field = data.field;
								layer.alert(JSON.stringify(field), {
									title: '当前填写的字段值'
								});
								return false;
								});
							});
						</script>
					</div>
				</div>
            </div>
        </div> 
	</body>
</html>