甘特图dhtmlx-gantt 一行多任务

乐~~~2025-03-25 0:36

继上篇进行修改

dhtmlxGantt 甘特图一行展示多条任务类型_dhtmlxgantt多个任务显示在一行-CSDN博客

主要修改getProductData数据部分：

数据中添加：

render: "split", //允许任务在同一行中拆分显示，

parent: "1", // 将任务XX作为任务1的子任务

javascript 复制代码

getProductData() {
      const response = {
        code: 200,
        data: {
          result: [
            {
              id: "1",
              productPlanCode: "党办会议室",
              planStartDate: "", //计划开始时间
              planEndDate: "", //计划结束时间
              documentStatus: 1,
              productName: "假名称00111",
              render: "split", // 允许任务在同一行中拆分显示
              parent: "", // 将任务3作为任务1的子任务
            },
            {
              id: "2",
              productPlanCode: "党办会议室",
              planStartDate: "2025-03-07 11:00:00", //计划开始时间
              planEndDate: "2025-03-07 12:30:00", //计划结束时间
              documentStatus: 3,
              productCode: "fakeBM003",
              productName: "假名称003",
              qty: "4",
              finishQty: "15",
              parent: "1", // 将任务3作为任务1的子任务
              render: "split",
            },
            {
              id: "3",
              productPlanCode: "fakeCode2",
              planStartDate: "2025-03-07 14:00:00",
              planEndDate: "2025-03-07 14:30:00",
              documentStatus: 2,
              productCode: "fakeBM002",
              productName: "假名称002",
              qty: "4",
              finishQty: "20",
              parent: "1",
              render: "split",
            },
            {
              id: "4",
              productPlanCode: "fakeCode2",
              productName: "假名称002222",
              parent: "",
              render: "split",
            },
            {
              id: "5",
              productPlanCode: "fakeCode2",
              planStartDate: "2025-03-07 13:00:00",
              planEndDate: "2025-03-07 14:30:00",
              documentStatus: 2,
              productCode: "fakeBM002",
              productName: "假名称002",
              qty: "4",
              finishQty: "20",
              parent: "4",
              render: "split",
            },
          ],
        },
      };
      if (response.code == 200) {
        const data = response.data;
        // console.log("数据源:", response.data);
        // 格式化数据以匹配甘特图的要求
        let parentData = [];
        data.result.map((item) => {
          if (item.parent) {
            //说明是子任务
            let tempChildData = {
              id: item.id,
              parent: item.parent,
              start_date: item.planStartDate,
              end_date: item.planEndDate,
              text: item.productName,
              // productCode: item.productCode, //产品编码
            };
            parentData.push(tempChildData);
          } else {
            let tempData = {
              id: item.id,
              name: item.productPlanCode,
              render: item.render,
              text: "",
            };
            parentData.push(tempData);
          }
        });
        gantt.parse({ data: parentData });
      } else {
        this.$message.error("列表查询失败，请联系管理员！");
      }
    },