自定义滑块插槽content，插槽内容时间不变 #34

iarthit · 2023-05-10T09:01:08Z

当我自定义滑块插槽content，插槽内容为 data.startDate ，我想实现拖动滑块，插槽里面的时间也跟着改变，我该怎么做，
下面是我的插槽内容

<x-gantt-slider :resize-left="true" :resize-right="true" bg-color="green" empty-data="" :move="onMoveSlider">
	<template v-slot:content="{ data, level }">
		<div v-if="level === 1" class="slider-level-one"></div>
		<div v-else-if="level !== 1" style="background-color: green; display: flex; justify-content: center; height: 20px; border-radius: 3px">{{data.startDate}}</div>
	</template>
</x-gantt-slider>

iarthit · 2023-05-10T09:10:30Z

还想问一个问题，我可不可以直接在甘特图上直接拖动创建一个时间范围。目前好像必须要求有开始和结束时间才显示滑块，
我某些情况下没开始和结束时间，想直接拖动创建一个出来

iarthit · 2023-05-10T09:16:45Z

类似这个效果

jeremyjone · 2023-05-11T11:50:03Z

这个确实是个问题。当使用抛出的数据渲染时，会出现时间不跟随的问题。但直接使用label不会有问题。当时怎么没测全这些功能。

但不太好处理现在。不着急的话，可以等我最近在重写的新版本，这个问题会被修改。

iarthit · 2023-05-12T01:24:49Z

好的好的，作者加油

jeremyjone · 2023-05-20T07:57:26Z

@iarthit 刚才发现了一个情况，请尝试将原始 data 套上 reactive 方法后再试。

xpyjs · 2023-05-20T08:48:52Z

v2.0.1 已经发布，可以使用。经过测试，同样需要给 data 数组套上 reactive 方法，可以持续响应，否则会断断续续的，增加不必要的监听

iarthit · 2023-05-20T14:02:48Z

我升级v2.0.1版本之后，甘特图用不了了，控制台报错：Component is missing template or render function，全局异常捕捉报错：TypeError: Cannot read properties of null (reading '$el')，我把node_modules文件夹和package-lock.json文件删掉重新初始化也不行，换回V1.0.2就行，哎没搞懂

jeremyjone · 2023-05-20T14:35:21Z

@iarthit 哈？啥玩意？？？来个图，贴个码，我瞅瞅

jeremyjone · 2023-05-20T15:29:54Z

啊！我知道了。不好意思，我修改了一些属性。现在的属性更加符合规范和使用。我在赶文档，稍后再试吧 @iarthit

iarthit · 2023-05-20T16:35:10Z

没事没事，不着急，我售后再试试

jeremyjone · 2023-05-20T17:36:33Z

@iarthit 着急忙慌写了一半，文档。可以先看这个部分，基本可以解决问题。

iarthit · 2023-05-21T09:26:27Z

看了下文档，问题解决了
但冒出个新问题，我的data数据如下：
const dataList = reactive<GanttDto[]>([ { taskTypeId: "2734849164142706688", //data-id taskListName: "项目二", chargerName: "111", endDate: "2023-12-13 23:59:59", index: 1, children: [ { taskTypeId: "2734849164469862402", taskListName: "采购一", chargerName: "张三", endDate: "2023-06-01 23:59:59", index: 1, startDate: "2023-05-13 23:59:59" }, { taskTypeId: "2734849164469862404", taskListName: "一车间", chargerName: "张三", endDate: "2023-05-22 00:00:00", index: 2, startDate: "2023-05-13 00:00:00" }, { taskTypeId: "2734849164474056704", taskListName: "采购二", chargerName: "张三", endDate: "2023-05-22 23:59:59", index: 3, startDate: "2023-05-13 23:59:59" }, { taskTypeId: "2734849164469862406", taskListName: "装配", chargerName: "张三", endDate: "2023-05-30 00:00:00", index: 4, startDate: "2023-05-28 00:00:00" }, { taskTypeId: "2734849164469862409", taskListName: "质检", chargerName: "张三", endDate: "2023-06-08 23:59:59", index: 5, startDate: "2023-05-31 23:59:59" }, { taskTypeId: "2734849164469862411", taskListName: "装箱", chargerName: "张三", endDate: "2023-06-05 23:59:59", index: 6, startDate: "2023-06-01 23:59:59" }, { taskTypeId: "2734849164469862413", taskListName: "海关", chargerName: "张三", endDate: "2023-06-13 23:59:59", index: 7, startDate: "2023-06-01 23:59:59" } ], startDate: "2023-12-14 23:59:59" } ]);
绑定上去为啥从“装配”后面的数据不显示了

好奇怪啊...

iarthit · 2023-05-21T09:52:44Z

这个是昨天说控制台报错的信息，这种情况是我从数据库获取数据给dataList绑定就会报这个错。

jeremyjone · 2023-05-21T13:34:52Z

好奇怪？贴个最小代码我明天看一下

iarthit · 2023-05-21T14:00:51Z

这个是显示不全的代码

<template>
	<x-gantt
		data-id="taskTypeId"
		:data="dataList"
		:header-style="{ bgColor: '#FFFFFF' }"
		:body-style="{ todayColor: '#f7ddc2', selectColor: '#F7F7F7', hoverColor: '#EEEEEE' }"
		:header-height="55"
		show-today
		expand-all
		show-expand
		:show-weekend="false"
	>
		<x-gantt-column prop="index" label="#" />
		<x-gantt-column prop="taskListName" label="任务清单名称" width="200" />
		<x-gantt-column prop="chargerName" label="负责人" width="100" empty-data="" />
		<x-gantt-column prop="startDate" label="开始时间" width="120" empty-data="">
			<template v-slot="{ row, $index, level }">
				<div>{{ row.startDate }}</div>
			</template>
		</x-gantt-column>
		<x-gantt-column prop="endDate" label="结束时间" width="120" empty-data="">
			<template v-slot="{ row, $index, level }">
				<div>{{ row.endDate }}</div>
			</template>
		</x-gantt-column>
		<x-gantt-slider resize-left resize-right :allow-link="false" :move="onMoveSlider">
			<template v-slot:content="{ row, level }">
				<div v-if="level === 0" class="slider-level-one"></div>
				<div v-else-if="level !== 0 && row.index % 2 == 0" style="background-color: green; display: flex; justify-content: left; height: 20px; border-radius: 3px; color: white; padding-left: 15px">
					{{ row.taskListName }}
				</div>
				<div v-else-if="level !== 0 && row.index % 2 != 0" style="background-color: blue; display: flex; justify-content: left; height: 20px; border-radius: 3px; color: white; padding-left: 15px">
					{{ row.taskListName }}
				</div>
			</template>
		</x-gantt-slider>
	</x-gantt>
</template>

<script setup lang="tsx">
import { reactive } from "vue";

let dataList = reactive<any[]>([
	{
		taskTypeId: "2734849164142706688",
		taskListName: "项目二",
		chargerName: "111",
		endDate: "2023-12-30 23:59:59",
		index: 1,
		children: [
			{
				taskTypeId: "2734849164469862402",
				taskListName: "采购一",
				chargerName: "张三",
				endDate: "2023-06-01 23:59:59",
				index: 1,
				startDate: "2023-05-13 23:59:59"
			},
			{
				taskTypeId: "2734849164469862404",
				taskListName: "一车间",
				chargerName: "张三",
				endDate: "2023-05-22 00:00:00",
				index: 2,
				startDate: "2023-05-13 00:00:00"
			},
			{
				taskTypeId: "2734849164474056704",
				taskListName: "采购二",
				chargerName: "张三",
				endDate: "2023-05-22 23:59:59",
				index: 3,
				startDate: "2023-05-13 23:59:59"
			},
			{
				taskTypeId: "2734849164469862406",
				taskListName: "装配",
				chargerName: "张三",
				endDate: "2023-05-30 00:00:00",
				index: 4,
				startDate: "2023-05-28 00:00:00"
			},
			{
				taskTypeId: "2734849164469862409",
				taskListName: "质检",
				chargerName: "张三",
				endDate: "2023-06-08 23:59:59",
				index: 5,
				startDate: "2023-05-31 23:59:59"
			},
			{
				taskTypeId: "2734849164469862411",
				taskListName: "装箱",
				chargerName: "张三",
				endDate: "2023-06-05 23:59:59",
				index: 6,
				startDate: "2023-06-01 23:59:59"
			},
			{
				taskTypeId: "2734849164469862413",
				taskListName: "海关",
				chargerName: "张三",
				endDate: "2023-06-13 23:59:59",
				index: 7,
				startDate: "2023-06-01 23:59:59"
			}
		],
		startDate: "2023-12-14 23:59:59"
	}
]);

const onMoveSlider = (params: { row: any; level: Number; $index: Number }) => {
	return params.level == 1;
};
</script>
<!-- <style scoped lang="scss"> -->
<style lang="scss">
.slider-level-one {
	background-color: #123456;
	height: 5px;
	position: relative;
}

.slider-level-one::before {
	content: "";
	position: absolute;
	left: 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-right-width: 5px;
	border-top-width: 5px;
	border-bottom-width: 10px;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-right-color: #123456;
}

.slider-level-one::after {
	content: "";
	position: absolute;
	right: 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-left-width: 5px;
	border-right-width: 0px;
	border-top-width: 5px;
	border-bottom-width: 10px;
	border-left-color: #123456;
	border-top-color: #123456;
	border-bottom-color: transparent;
	border-right-color: transparent;
}
</style>

iarthit · 2023-05-21T14:07:02Z

这个是控制台报错的代码

<template>
	<x-gantt
		data-id="taskTypeId"
		:data="dataList"
		:header-style="{ bgColor: '#FFFFFF' }"
		:body-style="{ todayColor: '#f7ddc2', selectColor: '#F7F7F7', hoverColor: '#EEEEEE' }"
		:header-height="55"
		show-today
		expand-all
		show-expand
		:show-weekend="false"
	>
		<x-gantt-column prop="index" label="#" />
		<x-gantt-column prop="taskListName" label="任务清单名称" width="200" />
		<x-gantt-column prop="chargerName" label="负责人" width="100" empty-data="" />
		<x-gantt-column prop="startDate" label="开始时间" width="120" empty-data="">
			<template v-slot="{ row, $index, level }">
				<div>{{ row.startDate }}</div>
			</template>
		</x-gantt-column>
		<x-gantt-column prop="endDate" label="结束时间" width="120" empty-data="">
			<template v-slot="{ row, $index, level }">
				<div>{{ row.endDate }}</div>
			</template>
		</x-gantt-column>
		<x-gantt-slider resize-left resize-right :allow-link="false" :move="onMoveSlider">
			<template v-slot:content="{ row, level }">
				<div v-if="level === 0" class="slider-level-one"></div>
				<div v-else-if="level !== 0 && row.index % 2 == 0" style="background-color: green; display: flex; justify-content: left; height: 20px; border-radius: 3px; color: white; padding-left: 15px">
					{{ row.taskListName }}
				</div>
				<div v-else-if="level !== 0 && row.index % 2 != 0" style="background-color: blue; display: flex; justify-content: left; height: 20px; border-radius: 3px; color: white; padding-left: 15px">
					{{ row.taskListName }}
				</div>
			</template>
		</x-gantt-slider>
	</x-gantt>
</template>

<script setup lang="tsx">
import { getGanttList } from "@/api/modules/projectmanage/projectbufferview";
import { format } from "date-fns";
import { reactive, watch } from "vue";

const props = withDefaults(
	defineProps<{
		proId: string;
	}>(),
	{ proId: "" }
);

let dataList = reactive<any[]>([]);

const onMoveSlider = (params: { row: any; level: Number; $index: Number }) => {
	return params.level == 1;
};

const loadData = () => {
	//服务器请求
	getGanttList(props.proId).then(p => {
		let index = 1;
		p.forEach(x => {
			x.index = index++;
			if (x.startDate) x.startDate = format(new Date(x.startDate), "yyyy-MM-dd 00:00:00");
			if (x.endDate) x.endDate = format(new Date(x.endDate), "yyyy-MM-dd 23:59:59");

			let cindex = 1;
			x.children?.forEach(y => {
				y.index = cindex++;
				if (y.startDate) y.startDate = format(new Date(y.startDate), "yyyy-MM-dd 00:00:00");
				if (y.endDate) y.endDate = format(new Date(y.endDate), "yyyy-MM-dd 23:59:59");
			});
		});
		dataList = p;
	});
};

watch(
	() => props.proId,
	() => {
		props.proId && loadData();
	},
	{ immediate: true }
);
</script>
<!-- <style scoped lang="scss"> -->
<style lang="scss">
.slider-level-one {
	background-color: #123456;
	height: 5px;
	position: relative;
}

.slider-level-one::before {
	content: "";
	position: absolute;
	left: 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-right-width: 5px;
	border-top-width: 5px;
	border-bottom-width: 10px;
	border-left-color: transparent;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-right-color: #123456;
}

.slider-level-one::after {
	content: "";
	position: absolute;
	right: 0px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-left-width: 5px;
	border-right-width: 0px;
	border-top-width: 5px;
	border-bottom-width: 10px;
	border-left-color: #123456;
	border-top-color: #123456;
	border-bottom-color: transparent;
	border-right-color: transparent;
}
</style>

jeremyjone · 2023-05-22T01:58:05Z

要不你再看看。我把你代码直接粘过来就是这样的，好像是可以的。。。

看你的图片，应该是下面数据在内部已经处理好了，因为从今天线的高度来说，它已经计算出来了。你看一下是不是外部哪里影响到了吧

iarthit · 2023-05-22T05:53:54Z

真的奇怪，我把版本切到v1.0.2就没问题.........

jeremyjone · 2023-05-22T13:18:33Z

内部实现不太一样。可以提供一个最小复现场景，我来看看

iarthit added the enhancement New feature or request label May 10, 2023

iarthit assigned jeremyjone May 10, 2023

jeremyjone added bug Something isn't working and removed enhancement New feature or request labels May 11, 2023

jeremyjone mentioned this issue May 11, 2023

我可不可以直接在甘特图上直接拖动创建一个时间范围 #35

Closed

xpyjs closed this as completed May 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

自定义滑块插槽content，插槽内容时间不变 #34

自定义滑块插槽content，插槽内容时间不变 #34

iarthit commented May 10, 2023 •

edited by jeremyjone

Loading

iarthit commented May 10, 2023

iarthit commented May 10, 2023

jeremyjone commented May 11, 2023 •

edited

Loading

iarthit commented May 12, 2023

jeremyjone commented May 20, 2023

xpyjs commented May 20, 2023

iarthit commented May 20, 2023

jeremyjone commented May 20, 2023

jeremyjone commented May 20, 2023

iarthit commented May 20, 2023

jeremyjone commented May 20, 2023

iarthit commented May 21, 2023

iarthit commented May 21, 2023

jeremyjone commented May 21, 2023

iarthit commented May 21, 2023

iarthit commented May 21, 2023

jeremyjone commented May 22, 2023

iarthit commented May 22, 2023

jeremyjone commented May 22, 2023

自定义滑块插槽content，插槽内容时间不变 #34

自定义滑块插槽content，插槽内容时间不变 #34

Comments

iarthit commented May 10, 2023 • edited by jeremyjone Loading

iarthit commented May 10, 2023

iarthit commented May 10, 2023

jeremyjone commented May 11, 2023 • edited Loading

iarthit commented May 12, 2023

jeremyjone commented May 20, 2023

xpyjs commented May 20, 2023

iarthit commented May 20, 2023

jeremyjone commented May 20, 2023

jeremyjone commented May 20, 2023

iarthit commented May 20, 2023

jeremyjone commented May 20, 2023

iarthit commented May 21, 2023

iarthit commented May 21, 2023

jeremyjone commented May 21, 2023

iarthit commented May 21, 2023

iarthit commented May 21, 2023

jeremyjone commented May 22, 2023

iarthit commented May 22, 2023

jeremyjone commented May 22, 2023

iarthit commented May 10, 2023 •

edited by jeremyjone

Loading

jeremyjone commented May 11, 2023 •

edited

Loading