From 295c129a656d23ea1576d38dd08f90fd0c3183d1 Mon Sep 17 00:00:00 2001 From: jeremyjone Date: Fri, 12 May 2023 14:37:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=B7=BB=E5=8A=A0=E6=89=80?= =?UTF-8?q?=E6=9C=89=20root=20=E7=9A=84=20props?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demo.vue | 25 +++++++++- index.html | 2 +- src/components/column/selection.vue | 4 +- src/components/column/style.scss | 4 ++ src/components/common/GanttBody.vue | 4 +- src/components/common/GanttHeader.vue | 9 +++- src/components/common/Row.vue | 5 +- src/components/common/TableHeader.vue | 10 +++- src/components/common/TableHeaderTh.vue | 56 +++++++++------------- src/components/root/rootProps.ts | 12 +---- src/composables/useData.ts | 24 +++++++++- src/composables/useGanttWidth.ts | 27 +++++------ src/composables/useStyle.ts | 50 ++++++++++++++++---- src/composables/useToday.ts | 4 +- src/models/data/all.ts | 19 ++++++++ src/models/param/styles.ts | 63 +++++++++++++++++++++++++ 16 files changed, 236 insertions(+), 82 deletions(-) diff --git a/demo/demo.vue b/demo/demo.vue index 42c16a2..c339855 100644 --- a/demo/demo.vue +++ b/demo/demo.vue @@ -4,6 +4,12 @@ data-id="index" :data="ganttData" :links="ganttLinks" + :border-color="borderColor" + show-checkbox + :show-expand="showExpand" + :expand-all="expandAll" + :show-today="true" + :show-weekend="true" @row-click="onClickRow" > @@ -54,11 +60,16 @@ 共{{ ganttData.length }}条 + + + diff --git a/src/components/root/rootProps.ts b/src/components/root/rootProps.ts index 92881d0..be71d4c 100644 --- a/src/components/root/rootProps.ts +++ b/src/components/root/rootProps.ts @@ -45,7 +45,7 @@ export default { }, /** - * 接收一个表头高度，应该保证大于30，默认值为60 + * 接收一个表头高度，默认值为80。如果高度过小，且表头过于复杂，可能会引起高度异常 */ headerHeight: { type: [Number, String], @@ -107,7 +107,7 @@ export default { throw new Error( `${ Errors.header + Errors.invalidProps - }"border" should be a positive integer.` + }"border" should be a nonnegative integer.` ); } return r; @@ -218,14 +218,6 @@ export default { default: '#eca710' }, - /** - * 显示设置按钮 - */ - showSettingBtn: { - type: Boolean, - default: true - }, - /** * 日期单位 */ diff --git a/src/composables/useData.ts b/src/composables/useData.ts index 06fc3f5..f70d3ea 100644 --- a/src/composables/useData.ts +++ b/src/composables/useData.ts @@ -1,13 +1,17 @@ +import type rootProps from '@/components/root/rootProps'; import type RowItem from '@/models/data/row'; import { useStore } from '@/store'; -import { computed, toRaw, watch, type Ref } from 'vue'; +import { computed, type ExtractPropTypes, toRaw, watch, type Ref } from 'vue'; import useGanttHeader from './useGanttHeader'; export default () => { const store = useStore(); const { setGanttHeaders } = useGanttHeader(); - function initData(data: Ref, props: any) { + function initData( + data: Ref, + props: ExtractPropTypes + ) { const options: DataOptions = { dataId: props.dataId, isExpand: !props.showExpand || props.expandAll, @@ -29,6 +33,22 @@ export default () => { }, { deep: true } ); + + watch( + () => props.showExpand, + () => { + store.$data.updateExpand(true); + store.$links.update(store.$data.flatData); + } + ); + + watch( + () => props.expandAll, + val => { + store.$data.updateExpand(!props.showExpand || val); + store.$links.update(store.$data.flatData); + } + ); } function toRowData(data?: RowItem): RowData { diff --git a/src/composables/useGanttWidth.ts b/src/composables/useGanttWidth.ts index f677364..13ce442 100644 --- a/src/composables/useGanttWidth.ts +++ b/src/composables/useGanttWidth.ts @@ -6,20 +6,19 @@ export default () => { const store = useStore(); const ganttColumnWidth = computed(() => { - // const size = store.$styleBox.ganttColumnSize; - // switch (size) { - // case 'small': - // if (store.$styleBox.unit === 'week') return 7; - // return 15; - // case 'large': - // if (store.$styleBox.unit === 'week') return 30; - // return 60; - // case 'normal': - // default: - // if (store.$styleBox.unit === 'week') return 15; - // return 30; - // } - return 30; + const size = store.$styleBox.ganttColumnSize; + switch (size) { + case 'small': + if (store.$styleBox.unit === 'week') return 7; + return 20; + case 'large': + if (store.$styleBox.unit === 'week') return 30; + return 60; + case 'normal': + default: + if (store.$styleBox.unit === 'week') return 15; + return 30; + } }); const ganttWidth = computed(() => { diff --git a/src/composables/useStyle.ts b/src/composables/useStyle.ts index 1f5e42d..42ea5aa 100644 --- a/src/composables/useStyle.ts +++ b/src/composables/useStyle.ts @@ -1,6 +1,6 @@ import type rootProps from '@/components/root/rootProps'; import { useStore } from '@/store'; -import { type ExtractPropTypes, computed } from 'vue'; +import { type ExtractPropTypes, computed, watch } from 'vue'; export default () => { const store = useStore(); @@ -12,14 +12,46 @@ export default () => { ); const setStyles = (props: ExtractPropTypes) => { - store.$styleBox.setBorder(props.border); - store.$styleBox.setBorderColor(props.borderColor); - - store.$styleBox.ganttColumnSize = props.ganttColumnSize; - store.$styleBox.unit = props.unit; - store.$styleBox.rowHeight = props.rowHeight; - store.$styleBox.showCheckbox = props.showCheckbox; - store.$styleBox.highlightDate = props.highlightDate; + const fn = () => { + store.$styleBox.setBorder(props.border); + store.$styleBox.setBorderColor(props.borderColor); + + store.$styleBox.ganttColumnSize = props.ganttColumnSize; + store.$styleBox.unit = props.unit; + store.$styleBox.rowHeight = props.rowHeight; + store.$styleBox.showCheckbox = props.showCheckbox; + store.$styleBox.highlightDate = props.highlightDate; + store.$styleBox.showExpand = props.showExpand; + store.$styleBox.showToday = props.showToday; + store.$styleBox.showWeekend = props.showWeekend; + store.$styleBox.levelColor = props.levelColor; + store.$styleBox.headerStyle = props.headerStyle; + store.$styleBox.bodyStyle = props.bodyStyle; + store.$styleBox.primaryColor = props.primaryColor; + }; + + fn(); + + watch( + () => [ + props.border, + props.borderColor, + props.ganttColumnSize, + props.unit, + props.rowHeight, + props.showCheckbox, + props.highlightDate, + props.showExpand, + props.showToday, + props.showWeekend, + props.levelColor, + props.headerStyle, + props.bodyStyle, + props.primaryColor + ], + fn, + { deep: true } + ); }; return { rowHeight, bodyHeight, setStyles, $styleBox: store.$styleBox }; diff --git a/src/composables/useToday.ts b/src/composables/useToday.ts index c35bc04..df49008 100644 --- a/src/composables/useToday.ts +++ b/src/composables/useToday.ts @@ -2,10 +2,12 @@ import { XDate } from '@/models/param/date'; import { computed } from 'vue'; import useGanttHeader from './useGanttHeader'; import useGanttWidth from './useGanttWidth'; +import useStyle from './useStyle'; export default () => { const { ganttHeader } = useGanttHeader(); const { ganttColumnWidth, currentMillisecond } = useGanttWidth(); + const { $styleBox } = useStyle(); const today = new XDate(); today.startOf(); @@ -29,7 +31,7 @@ export default () => { return sd?.compareTo(date) === 'l' && ed?.compareTo(date) === 'r'; } - return isInArea(today); + return $styleBox.showToday && isInArea(today); }); return { diff --git a/src/models/data/all.ts b/src/models/data/all.ts index 5dbc159..253bf3f 100644 --- a/src/models/data/all.ts +++ b/src/models/data/all.ts @@ -131,6 +131,25 @@ export default class AllData { this.__flatten(); } + /** + * 数据全部展开/闭合 + */ + updateExpand(expand: boolean) { + const fn = (data: RowItem[]) => { + data.forEach(row => { + row.setExpand(expand); + + if (row.children?.length > 0) { + fn(row.children); + } + }); + }; + + fn(this.data); + + this.__flatten(); + } + /** * 更新数据 * @param data 新数据（原始） diff --git a/src/models/param/styles.ts b/src/models/param/styles.ts index ec4b7a5..d221f5a 100644 --- a/src/models/param/styles.ts +++ b/src/models/param/styles.ts @@ -69,4 +69,67 @@ export default class StyleBox { public set highlightDate(v: boolean) { this._highlightDate = v; } + + private _showExpand: boolean = true; + public get showExpand(): boolean { + return this._showExpand; + } + + public set showExpand(v: boolean) { + this._showExpand = v; + } + + private _showToday: boolean = true; + public get showToday(): boolean { + return this._showToday; + } + + public set showToday(v: boolean) { + this._showToday = v; + } + + private _showWeekend: boolean = true; + public get showWeekend(): boolean { + return this._showWeekend; + } + + public set showWeekend(v: boolean) { + this._showWeekend = v; + } + + private _levelColor: string[] = []; + public get levelColor(): string[] { + return this._levelColor; + } + + public set levelColor(v: string[]) { + this._levelColor = v; + } + + private _primaryColor: string = '#eca710'; + public get primaryColor(): string { + return this._primaryColor; + } + + public set primaryColor(v: string) { + this._primaryColor = v; + } + + private _headerStyle: HeaderOptions = {}; + public get headerStyle(): HeaderOptions { + return this._headerStyle; + } + + public set headerStyle(v: HeaderOptions) { + this._headerStyle = v; + } + + private _bodyStyle: BodyOptions = {}; + public get bodyStyle(): BodyOptions { + return this._bodyStyle; + } + + public set bodyStyle(v: BodyOptions) { + this._bodyStyle = v; + } }