diff --git a/src/resource-scheduler/components/schedule-table/schedule-table.tsx b/src/resource-scheduler/components/schedule-table/schedule-table.tsx index 5eb2cb3858c4783f045c265554d784cb650b1988..a9f10c2b17550f83628bf88d7c44000ac7da2e17 100644 --- a/src/resource-scheduler/components/schedule-table/schedule-table.tsx +++ b/src/resource-scheduler/components/schedule-table/schedule-table.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */ -import { computed, defineComponent, ref } from 'vue'; +import { computed, defineComponent, ref, useSlots } from 'vue'; import { IResourceViewModel, ITaskViewModel } from '../../interface'; import { initStore } from '../../store'; import { @@ -12,9 +12,13 @@ import { } from '../../hooks/use-schedule-table'; import { ScheduleTableEvent, ScheduleTableProps } from './schedule-table-type'; import './schedule-table.scss'; +import { ScheduleToolbar } from '../schedule-toolbar/schedule-toolbar'; export const ScheduleTable = defineComponent({ name: 'ScheduleTable', + components: { + ScheduleToolbar, + }, props: ScheduleTableProps, emits: ScheduleTableEvent, setup(props, { emit }) { @@ -31,14 +35,23 @@ export const ScheduleTable = defineComponent({ initStore(props, emit as any); // 初始化表格 - const { resourceViewModels, taskViewModels } = useInitScheduleTable( - headerCanvas, - bodyCanvas, - coordinateElement, - ); + const { + resourceViewModels, + taskViewModels, + onRefresh, + onSave, + onSaveAs, + onConfigRefresh, + } = useInitScheduleTable(headerCanvas, bodyCanvas, coordinateElement); + + // 插槽 + const slots = useSlots(); // 计算表格样式 - const { headerStyle, bodyStyle } = useScheduleTableStyle(props); + const { headerStyle, bodyStyle } = useScheduleTableStyle( + props, + slots && !!slots.extraToolbar, + ); // 监听视图大小变化 useScheduleTableReSize(props, headerCanvas, bodyCanvas, coordinateElement); @@ -79,11 +92,28 @@ export const ScheduleTable = defineComponent({ visibleTaskViewModels, handleScroll, visibleRange, + onRefresh, + onSave, + onSaveAs, + onConfigRefresh, }; }, render() { return (
+
+ + {this.$slots.extraToolbar ? ( +
+ {this.$slots.extraToolbar()} +
+ ) : null} +
span { + display: flex; + align-items: center; + } +} + +.schedule-toolbar-days { + display: flex; + gap: 4px; + align-items: center; + + .schedule-toolbar-days-reduce, + .schedule-toolbar-days-add { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + text-align: center; + border-radius: 4px; + + &:hover { + background-color: #f5f5f5; + } + + > span { + display: flex; + align-items: center; + } + } +} + +.schedule-toolbar-trains-standards { + display: flex; + gap: 8px; + align-items: center; +} + +.schedule-toolbar-scale-list { + display: flex; + gap: 8px; + align-items: center; +} + +.schedule-toolbar-date-picker-container { + position: relative; + cursor: pointer; +} + +.schedule-toolbar-date-picker { + position: absolute; + top: 0; + left: 0; + z-index: -10; + width: 100%; + height: 100%; + opacity: 0; +} + +.schedule-toolbar-toleft { + display: none; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + font-size: 16px; + cursor: pointer; + border: 1px solid lightgray; + border-radius: 4px; + + &:hover { + background-color: #f5f5f5; + } + + &.is-visible { + display: inline-flex; + } +} + +.schedule-toolbar-toright { + display: none; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + font-size: 16px; + cursor: pointer; + border: 1px solid lightgray; + border-radius: 4px; + + &:hover { + background-color: #f5f5f5; + } + + &.is-visible { + display: inline-flex; + } +} + +.schedule-toolbar-arrow { + position: absolute; + left: 50%; + transform: translateX(-50%); +} diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx new file mode 100644 index 0000000000000000000000000000000000000000..90904bd94257035dab013fb824a55d03c1ed841a --- /dev/null +++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx @@ -0,0 +1,466 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { defineComponent, ref } from 'vue'; +import './schedule-toolbar.scss'; +import { + useInitScheduleToolbar, + useScheduleToolbarReSize, +} from '../../hooks/use-schedule-toolbar'; +import { + addday, + datepicker, + lock, + nextday, + nextmonth, + nextweek, + prevday, + prevmonth, + prevweek, + reduceday, + refreesh, + save, + saveAs, + today, +} from './svg-icon'; + +export const ScheduleToolbar = defineComponent({ + emits: ['save', 'save-as', 'refresh', 'config-change'], + setup(props, { emit }) { + // 日期选择器 + const datePickerRef = ref(); + + // 工具栏 + const scheduleToolbarContentRef = ref(); + + // 是否显示日期选择器 + const isShowDatePicker = ref(false); + + const { + hours, + days, + currentDay, + scale, + scaleStartTime, + scaleEndTime, + trainsStandards, + onRefresh, + onJupmToNow, + onMonthChange, + onWeekChange, + onDateChange, + onLockClick, + onHoursChange, + onDaysChange, + onDaysClickChange, + onScaleChange, + onScaleTimeChange, + onScaleRangeChange, + onDatePickerChange, + onSave, + onSaveAs, + } = useInitScheduleToolbar(emit); + + // 渲染小时列表 + const renderHoursList = (_hours: number = 24) => { + const options = [ + { value: 4, label: '4小时' }, + { value: 2, label: '2小时' }, + { value: 1, label: '1小时' }, + { value: 0.5, label: '30分钟' }, + { value: 0.25, label: '15分钟' }, + ]; + return ( + + {options.map(item => { + return ( + + ); + })} + + ); + }; + + // 渲染显示天数列表 + const renderDaysList = () => { + const options = [ + { + value: 1, + label: '1天', + }, + { + value: 7, + label: '7天', + }, + { + value: 15, + label: '15天', + }, + { + value: 31, + label: '1月', + }, + { + value: 32, + label: '2月', + }, + { + value: 93, + label: '3月', + }, + ]; + return ( +
+
onDaysClickChange(1)} + > + +
+ + {options.map(item => { + return ( + + ); + })} + +
onDaysClickChange(-1)} + > + +
+
+ ); + }; + + // 渲染开始时间列表 + const rendertempStartTime = (min: number = 0, max: number = 23) => { + const options = []; + for (let i = min; i <= max; i++) { + options.push({ + value: i, + label: i, + }); + } + return ( + + {options.map(item => { + return ( + + ); + })} + + ); + }; + + // 渲染结束时间列表 + const rendertempEndTime = (min: number = 1, max: number = 24) => { + const options = []; + for (let i = min; i <= max; i++) { + options.push({ + value: i, + label: i, + }); + } + return ( + + {options.map(item => { + return ( + + ); + })} + + ); + }; + + // 渲染训练日标准下拉 + const renderTrainsStandards = () => { + const options = [ + { + value: '0,24', + label: `0:00 - 24:00`, + }, + ]; + return ( +
+
训练日标准
+ + {options.map(item => { + return ( + + ); + })} + +
+ ); + }; + + // 渲染刻度下拉 + const renderScaleList = () => { + const options = [ + { + value: 4, + label: '自动', + }, + { + value: 12, + label: '上下午', + }, + ]; + return ( +
+
刻度
+ + {options.map(item => { + return ( + + ); + })} + +
+ ); + }; + + // 日期选择器点击 + const onDateClick = () => { + if (datePickerRef.value && !isShowDatePicker.value) { + datePickerRef.value.focus(); + } + }; + + // 日期选择器显示隐藏改变 + const onVisibleChange = (visible: boolean) => { + isShowDatePicker.value = visible; + }; + + const { visibleArrow } = useScheduleToolbarReSize( + scheduleToolbarContentRef, + ); + + const scrollToLeft = () => { + if (scheduleToolbarContentRef.value) { + scheduleToolbarContentRef.value.scrollLeft -= + scheduleToolbarContentRef.value.clientWidth; + } + }; + + const scrollToRight = () => { + if (scheduleToolbarContentRef.value) { + scheduleToolbarContentRef.value.scrollLeft += + scheduleToolbarContentRef.value.clientWidth; + } + }; + + return { + currentDay, + datePickerRef, + scheduleToolbarContentRef, + visibleArrow, + onSave, + onSaveAs, + onRefresh, + onJupmToNow, + onMonthChange, + onWeekChange, + onDateChange, + onLockClick, + onDateClick, + onDatePickerChange, + onVisibleChange, + renderHoursList, + renderDaysList, + rendertempStartTime, + rendertempEndTime, + renderTrainsStandards, + renderScaleList, + scrollToLeft, + scrollToRight, + }; + }, + render() { + return ( +
+
+