feat: 新增项目任务列表甘特图展示

pro/src/main/resources/template/js/proTask/proTaskList.js

@@ -197,6 +197,17 @@ layui.config({
 			}});
 	});
 
+	// 甘特图
+	$("body").on("click", "#ganttPage", function() {
+		_openNewWindows({
+			url: "../../tpl/proTask/taskGantt.html?objectId=" + objectId + '&objectKey=' + objectKey,
+			title: "任务甘特图",
+			pageId: "taskGantt",
+			area: ['90vw', '90vh'],
+			callBack: function (refreshCode) {
+			}});
+	});
+
 	// 新增子任务
 	function addNew(data) {
 		parentId = data.id;

pro/src/main/resources/template/js/proTask/taskGantt.js

+var objectKey = "";
+var objectId = "";
+
+layui.config({
+    base: basePath,
+    version: skyeyeVersion
+}).extend({
+    window: 'js/winui.window'
+}).define(['window', 'jquery', 'winui', 'form', 'laydate'], function (exports) {
+    winui.renderColor();
+    var $ = layui.$,
+        form = layui.form,
+        layer = layui.layer,
+        laydate = layui.laydate;
+    objectKey = GetUrlParam("objectKey");
+    objectId = GetUrlParam("objectId");
+    if (isNull(objectKey) || isNull(objectId)) {
+        winui.window.msg("请传入适用对象信息", {icon: 2, time: 2000});
+        return false;
+    }
+
+    // 根据供应商id获取所有审批通过之后的里程碑列表
+    let milestoneList = [];
+    AjaxPostUtil.request({url: sysMainMation.projectBasePath + "queryAllApprovalMilestoneList", params: {objectId: objectId}, type: 'json', method: 'GET', callback: function (json) {
+        $("#milestoneId").html(getDataUseHandlebars(getFileContent('tpl/template/select-option-must.tpl'), json));
+        milestoneList = json.rows;
+
+        var authPermission = teamObjectPermissionUtil.checkTeamBusinessAuthPermission(objectId, 'taskAuthEnum');
+        var btnStr = `<div style="" class="type-group" id="type">`;
+        var firstBtn = true;
+        if (authPermission['list']) {
+            var defaultClassName = firstBtn ? 'plan-select' : '';
+            firstBtn = false;
+            btnStr += `<button type="button" class="layui-btn layui-btn-primary type-btn ${defaultClassName}" data-type="list" table-id="messageTable"><i class="layui-icon"></i>所有任务</button>`
+        }
+        if (authPermission['myExecute']) {
+            var defaultClassName = firstBtn ? 'plan-select' : '';
+            firstBtn = false;
+            btnStr += `<button type="button" class="layui-btn layui-btn-primary type-btn ${defaultClassName}" data-type="myExecute" table-id="messageTable"><i class="layui-icon"></i>我执行的任务</button>`
+        }
+        if (authPermission['myCreate']) {
+            var defaultClassName = firstBtn ? 'plan-select' : '';
+            btnStr += `<button type="button" class="layui-btn layui-btn-primary type-btn ${defaultClassName}" data-type="myCreate" table-id="messageTable"><i class="layui-icon"></i>我创建的任务</button>`
+        }
+        btnStr += `</div>`;
+        $(".txtcenter").before(btnStr);
+
+        matchingLanguage();
+        form.render();
+        renderPanel();
+        render();
+    }});
+
+    function renderPanel() {
+        document.getElementById('device_load').style.cssText = 'height:' + ($(window).height() - 140) + 'px';
+    }
+    $(window).resize(function () {
+        renderPanel();
+    });
+
+    // 时间格式
+    gantt.config.date_format = "%Y-%m-%d";
+    gantt.config.scales = [
+        {unit: "year", step: 1, format: "%Y"},
+        {unit: "day", step: 1, date: "%m-%d"}
+    ];
+    gantt.config.reorder_grid_columns = true;
+    gantt.config.columns = [{
+        name: "text",
+        label: "任务名",
+        width: 200,
+        align: "center",
+        tree: true,
+        resize: true
+    }, {
+        name: "start_date",
+        label: "开始日期",
+        width: 100,
+        align: "center",
+        resize: true
+    }, {
+        name: "duration",
+        label: "持续时间",
+        width: 100,
+        align: "center",
+        resize: true
+    }];
+    gantt.config.readonly = true;
+    gantt.config.row_height = 40;
+    gantt.config.scale_height = 50;
+    gantt.config.drag_move = false;
+    gantt.config.drag_resize = false;
+    gantt.config.sort = true;
+    gantt.config.show_quick_info = false;
+    //  关闭点击事件
+    gantt.attachEvent("onTaskDblClick", function (id, e) {
+        return false;
+    });
+    gantt.config.show_tasks_outside_timescale = true;
+    gantt.plugins({
+        auto_scheduling: true,  //自动排程
+        tooltip: true     //提示信息
+    });
+    // 样式
+    gantt.config.layout = {
+        css: "gantt_container",
+        cols: [{
+            width: 400,
+            min_width: 300,
+            rows: [
+                {
+                    view: "grid",
+                    scrollX: "gridScroll",
+                    scrollable: true,
+                    scrollY: "scrollVer"
+                },
+                {view: "scrollbar", id: "gridScroll", group: "horizontal"}
+            ]
+        },
+            {resizer: true, width: 1},
+            {
+                rows: [
+                    {
+                        view: "timeline",
+                        scrollX: "scrollHor",
+                        scrollY: "scrollVer"
+                    },
+                    {
+                        view: "scrollbar",
+                        id: "scrollHor",
+                        group: "horizontal"
+                    }
+                ]
+            },
+            {view: "scrollbar", id: "scrollVer"}]
+    };
+
+    gantt.init("device_load");
+
+    gantt.i18n.setLocale("cn");  //使用中文
+    function render() {
+        let milestoneId = $("#milestoneId").val();
+        if (isNull(milestoneId)) {
+            winui.window.msg("请选择里程碑", {icon: 2, time: 2000});
+            return false;
+        }
+        let params = {
+            objectId: objectId,
+            objectKey: objectKey,
+            holderId: milestoneId,
+            type: $("#type .plan-select").attr("data-type")
+        };
+        var tem = getInPoingArr(milestoneList, "id", milestoneId, null);
+        gantt.config.start_date = new Date(tem.startTime);
+        gantt.config.end_date = new Date(tem.endTime);
+        AjaxPostUtil.request({url: sysMainMation.projectBasePath + "queryProTaskListForGantt", params: params, type: 'json', method: 'POST', callback: function (json) {
+            gantt.clearAll();  //清空缓存
+            let nodeList = json.bean.node;
+            if (isNull(nodeList) || nodeList.length == 0) {
+                return;
+            }
+            $.each(nodeList, function (i, item) {
+                item.start_date = new Date(item.start_date);
+                item.end_date = new Date(item.end_date);
+            });
+            let linkList = json.bean.link;
+            if (isNull(linkList) || linkList.length == 0) {
+                linkList = [];
+            }
+            // 解析
+            gantt.parse({
+                data: nodeList,
+                links: linkList
+            });
+        }});
+    }
+
+    $("body").on("click", ".type-btn", function (e) {
+        $(this).parent().find('.type-btn').removeClass("plan-select");
+        $(this).addClass("plan-select");
+        render();
+    });
+
+    form.on('submit(formSearch)', function (data) {
+        if (winui.verifyForm(data.elem)) {
+            render();
+        }
+        return false;
+    });
+
+    exports('taskGantt', {});
+});
\ No newline at end of file

pro/src/main/resources/template/tpl/proTask/proTaskList.html

@@ -12,6 +12,7 @@
 	<div class="winui-toolbar">
 		<div class="winui-tool">
 			<button id="reloadTable" class="winui-toolbtn search-table-btn-right"><i class="fa fa-refresh" aria-hidden="true"></i><language showName="com.skyeye.refreshDataBtn"></language></button>
+			<button id="ganttPage" class="winui-toolbtn search-table-btn-right"><i class="fa fa-sliders" aria-hidden="true"></i>甘特图</button>
 			<button id="addBean" class="winui-toolbtn search-table-btn-right" auth="add"><i class="fa fa-plus" aria-hidden="true"></i><language showName="com.skyeye.addBtn"></language></button>
 		</div>
 	</div>

pro/src/main/resources/template/tpl/proTask/taskGantt.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet"/>
+    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
+    <link rel="stylesheet" href="../../assets/lib/layui/lay/modules/dhtmlxgantt/dhtmlxgantt.css" type="text/css">
+    <style>
+        html,
+        body {
+            height: 100%;
+            padding: 0px;
+            margin: 0px;
+            overflow: hidden;
+        }
+
+        .weekend {
+            background: #f4f7f4 !important;
+        }
+
+        .gantt_grid_head_cell {
+            font-size: 14px;
+            font-weight: 600;
+            color: #000 !important;
+        }
+
+        .gantt_scale_cell {
+            font-size: 14px;
+            font-weight: 600;
+            color: #000 !important;
+
+        }
+    </style>
+</head>
+
+<body>
+    <div class="txtcenter" style="margin: 0 auto; padding-top: 10px;">
+        <form class="layui-form layui-form-pane" action="" autocomplete="off">
+            <div class="layui-form-item">
+                <div class="layui-inline">
+                    <label class="layui-form-label">里程碑</label>
+                    <div class="layui-input-inline">
+                        <select lay-filter="milestoneId" lay-search="" id="milestoneId">
+                        </select>
+                    </div>
+                    <button type="reset" class="layui-btn layui-btn-primary list-form-search"><language showName="com.skyeye.reset"></language></button>
+                    <button class="layui-btn list-form-search" lay-submit lay-filter="formSearch"><language showName="com.skyeye.search2"></language></button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div style="margin: auto 10px;">
+        <div id="device_load" style="width: 100%;"></div>
+    </div>
+    <script src="../../assets/lib/layui/layui.js"></script>
+    <script src="../../assets/lib/layui/custom.js"></script>
+    <script src="../../assets/lib/layui/lay/modules/dhtmlxgantt/dhtmlxgantt.js"></script>
+    <script type="text/javascript">
+        layui.config({base: '../../js/proTask/'}).use('taskGantt');
+    </script>
+</body>
+
+</html>
\ No newline at end of file