diff --git a/src/resource-scheduler/components/schedule-table/schedule-table.tsx b/src/resource-scheduler/components/schedule-table/schedule-table.tsx index fb7ee7033f542b29665d187f1850931872e5b5b6..a72680152c734be1af6cbdafebc346c4f7c04af0 100644 --- a/src/resource-scheduler/components/schedule-table/schedule-table.tsx +++ b/src/resource-scheduler/components/schedule-table/schedule-table.tsx @@ -14,9 +14,13 @@ import { import { ScheduleTableEvent, ScheduleTableProps } from './schedule-table-type'; import { useScheduleToolbarEvent } from '../../hooks/use-schedule-table'; import './schedule-table.scss'; +import { ScheduleToolbar } from '../schedule-toolbar/schedule-toolbar'; export const ScheduleTable = defineComponent({ name: 'ScheduleTable', + components: { + 'schedule-toolbar': ScheduleToolbar, + }, props: ScheduleTableProps, emits: ScheduleTableEvent, setup(props, { emit, slots }) { @@ -108,9 +112,9 @@ export const ScheduleTable = defineComponent({
{this.$slots.extraToolbar ? (
diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar-type.ts b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar-type.ts new file mode 100644 index 0000000000000000000000000000000000000000..857a6854572021eaf75552e75f2809f99d333657 --- /dev/null +++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar-type.ts @@ -0,0 +1,22 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +// 调度工具栏事件 +export const ScheduleToolbarEvent = { + /** + * 保存 + */ + save: () => true, + /** + * 另存为 + */ + saveAs: () => true, + /** + * 刷新 + */ + refresh: () => true, + /** + * 配置变更 + */ + configChange: (config: any) => true, +}; diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss index d8d3c8edfabb7079495587ca1bd671b31dc03fc8..79d419e2851bce7672683e538ffc30685d7e9e2a 100644 --- a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss +++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.scss @@ -41,10 +41,20 @@ border: 1px solid lightgray; } + &.is-btn:hover { background-color: #f5f5f5; } + &.is-lock{ + background-color: bisque; + + &:hover{ + background-color: bisque; + } + } + + > span { display: flex; align-items: center; diff --git a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx index 62f09e2edbf7f4d4bce42bba4c3bad9a14672fa5..9ca1c38d4c9fb08ce0c2a925d57c09cd80b7959d 100644 --- a/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx +++ b/src/resource-scheduler/components/schedule-toolbar/schedule-toolbar.tsx @@ -2,10 +2,7 @@ /* 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 { useInitScheduleToolbar, useScheduleToolbarReSize } from '../../hooks'; import { addday, datepicker, @@ -22,10 +19,10 @@ import { saveAs, today, } from './svg-icon'; +import { ScheduleToolbarEvent } from './schedule-toolbar-type'; export const ScheduleToolbar = defineComponent({ - name: 'ScheduleToolbar', - emits: ['save', 'save-as', 'refresh', 'config-change'], + emits: ScheduleToolbarEvent, setup(props, { emit }) { // 日期选择器 const datePickerRef = ref(); @@ -41,6 +38,7 @@ export const ScheduleToolbar = defineComponent({ days, currentDay, scale, + allowDrag, scaleStartTime, scaleEndTime, trainsStandards, @@ -108,20 +106,12 @@ export const ScheduleToolbar = defineComponent({ value: 31, label: '1月', }, - { - value: 32, - label: '2月', - }, - { - value: 93, - label: '3月', - }, ]; return (
onDaysClickChange(1)} > @@ -143,7 +133,7 @@ export const ScheduleToolbar = defineComponent({
onDaysClickChange(-1)} > @@ -308,6 +298,7 @@ export const ScheduleToolbar = defineComponent({ return { currentDay, + allowDrag, datePickerRef, scheduleToolbarContentRef, visibleArrow, @@ -432,7 +423,10 @@ export const ScheduleToolbar = defineComponent({
diff --git a/src/resource-scheduler/constant/vars.ts b/src/resource-scheduler/constant/vars.ts index ca12ea785ee8c14c71fa131f28b719fd20a989d9..11a2bfc66c1897bb09b131e270b7217ef434c9cd 100644 --- a/src/resource-scheduler/constant/vars.ts +++ b/src/resource-scheduler/constant/vars.ts @@ -11,7 +11,7 @@ export const Variables = { resourceDriverColor: '#000', scaleColumnWidth: 50, scaleRange: [0, 24], - scaleValue: 2, + scaleValue: 4, scaleTextColor: '#000', scaleBodyBg: '#fff', gridLineColor: '#eee', diff --git a/src/resource-scheduler/hooks/index.ts b/src/resource-scheduler/hooks/index.ts index c7a7c352a0850ab603b5263facc845529ed4228c..bf6cca754ce85634a83421576f6e8f66a1a9001e 100644 --- a/src/resource-scheduler/hooks/index.ts +++ b/src/resource-scheduler/hooks/index.ts @@ -1,2 +1,12 @@ export { useDrag } from './use-drag'; -export { useInitScheduleTable, useScheduleTableReSize, useScheduleTableStyle, useVirtualScroll } from './use-schedule-table'; \ No newline at end of file +export { + useInitScheduleTable, + useScheduleTableReSize, + useScheduleTableStyle, + useVirtualScroll, +} from './use-schedule-table'; + +export { + useInitScheduleToolbar, + useScheduleToolbarReSize, +} from './use-schedule-toolbar'; diff --git a/src/resource-scheduler/hooks/use-schedule-toolbar.ts b/src/resource-scheduler/hooks/use-schedule-toolbar.ts index 6dca69fd7db209266a2d8828c47a9ef3547b0f05..10e76a60ef410bcf41e55df69bb9b7cd2c69bd9d 100644 --- a/src/resource-scheduler/hooks/use-schedule-toolbar.ts +++ b/src/resource-scheduler/hooks/use-schedule-toolbar.ts @@ -4,6 +4,7 @@ import { onMounted, onUnmounted, Ref, ref } from 'vue'; import Variables from '../constant/vars'; import { debounce } from '../utils'; +import useStore from '../store'; /* eslint-disable @typescript-eslint/explicit-function-return-type */ export function useInitScheduleToolbar(emit: any) { @@ -23,6 +24,10 @@ export function useInitScheduleToolbar(emit: any) { const scaleEndTime = ref(Variables.default.scaleRange[1]); // 训练日标准 const trainsStandards = ref(Variables.default.scaleRange.toString()); + // 是否禁用拖拽 + const allowDrag = ref(Variables.default.allowDrag); + + const { $config } = useStore(); const onRefresh = () => { // console.log('refresh'); @@ -31,16 +36,19 @@ export function useInitScheduleToolbar(emit: any) { // 配置改变刷新 const onConfigChangeRefresh = (_config: any = {}) => { - emit('config-change', _config); + emit('configChange', _config); }; // 跳转到当前时间 const onJupmToNow = () => { - console.log('jupmToNow'); + // console.log('jupmToNow'); currentDay.value = new Date(); + const startTime = $config.getConfig().startTime; + const time = currentDay.value.getTime() - startTime.getTime(); + const endtime = new Date($config.getConfig().endTime.getTime() + time); onConfigChangeRefresh({ startTime: currentDay.value, - endTime: new Date(currentDay.value.getTime() + 86400000 * 15), + endTime: endtime, }); }; @@ -49,9 +57,10 @@ export function useInitScheduleToolbar(emit: any) { // console.log('onMonthChange'); const time = Variables.time.millisecondOf.day * 31 * month; currentDay.value = new Date(currentDay.value.getTime() + time); + const endtime = new Date($config.getConfig().endTime.getTime() + time); onConfigChangeRefresh({ startTime: currentDay.value, - endTime: new Date(currentDay.value.getTime() + 86400000 * 15), + endTime: endtime, }); }; @@ -60,9 +69,10 @@ export function useInitScheduleToolbar(emit: any) { // console.log('onWeekChange'); const time = Variables.time.millisecondOf.week * week; currentDay.value = new Date(currentDay.value.getTime() + time); + const endtime = new Date($config.getConfig().endTime.getTime() + time); onConfigChangeRefresh({ startTime: currentDay.value, - endTime: new Date(currentDay.value.getTime() + 86400000 * 15), + endTime: endtime, }); }; @@ -71,15 +81,20 @@ export function useInitScheduleToolbar(emit: any) { // console.log('onDateChange'); const time = Variables.time.millisecondOf.day * day; currentDay.value = new Date(currentDay.value.getTime() + time); + const endtime = new Date($config.getConfig().endTime.getTime() + time); onConfigChangeRefresh({ startTime: currentDay.value, - endTime: new Date(currentDay.value.getTime() + 86400000 * 15), + endTime: endtime, }); }; // 锁定按钮点击 const onLockClick = () => { // console.log('onLockClick'); + allowDrag.value = !allowDrag.value; + onConfigChangeRefresh({ + allowDrag: allowDrag.value, + }); }; // 小时改变 @@ -102,7 +117,7 @@ export function useInitScheduleToolbar(emit: any) { // 点击增加或减少天数,最少显示天数是1天 const onDaysClickChange = (_value: number) => { // console.log('onDaysClickChange'); - const tempDays = [1, 7, 15, 31, 62, 93]; + const tempDays = [1, 7, 15, 31]; tempDay.value = Math.max(1, tempDay.value! + _value); days.value = null; if (tempDays.includes(tempDay.value)) { @@ -145,11 +160,12 @@ export function useInitScheduleToolbar(emit: any) { // 日期选择器改变 const onDatePickerChange = (_value: string) => { + const startTiem = $config.getConfig().startTime; + const time = currentDay.value.getTime() - startTiem.getTime(); + const endtime = new Date($config.getConfig().endTime.getTime() + time); onConfigChangeRefresh({ startTime: currentDay.value, - endTime: new Date( - currentDay.value.getTime() + Variables.time.millisecondOf.day * 15, - ), + endTime: endtime, }); }; @@ -158,12 +174,13 @@ export function useInitScheduleToolbar(emit: any) { }; const onSaveAs = () => { - emit('save-as'); + emit('saveAs'); }; return { hours, days, + allowDrag, currentDay, scale, scaleStartTime,