From cf4fb2ca4287607fe956163699803c9e5cfc052f Mon Sep 17 00:00:00 2001 From: gudaoxuri Date: Wed, 26 Jun 2024 14:07:19 +0800 Subject: [PATCH] API documentation and code optimization. --- src/components/function/ColumnShowSetting.vue | 2 +- src/components/function/FilterSetting.vue | 40 +++--- src/components/function/GroupSetting.vue | 2 +- src/components/function/RowSortSetting.vue | 2 +- src/components/layout/list/ListColumnAgg.vue | 2 +- src/components/layout/list/ListRowSelect.vue | 125 +++++++++++++++--- src/components/layout/list/ListRows.vue | 36 ++++- 7 files changed, 163 insertions(+), 46 deletions(-) diff --git a/src/components/function/ColumnShowSetting.vue b/src/components/function/ColumnShowSetting.vue index 1f6dc8b..aa47a26 100644 --- a/src/components/function/ColumnShowSetting.vue +++ b/src/components/function/ColumnShowSetting.vue @@ -4,7 +4,7 @@ import type { TableConf } from '../conf' import * as eb from '../eventbus' const props = defineProps<{ - // 布局Id + // 布局ID // Layout ID layoutId: string // 布局列 diff --git a/src/components/function/FilterSetting.vue b/src/components/function/FilterSetting.vue index f311829..b65475e 100644 --- a/src/components/function/FilterSetting.vue +++ b/src/components/function/FilterSetting.vue @@ -11,7 +11,7 @@ import type { ColumnConf } from '../conf' import * as eb from '../eventbus' const props = defineProps<{ - // 布局Id + // 布局ID // Layout ID layoutId: string // 过滤配置 @@ -56,14 +56,14 @@ interface FilterItemProps { useDict: boolean multiValue: boolean } -// 已选中的过滤组Id，在显示过滤组容器时设置 -// Selected filter group Id, set when showing the filter group container +// 已选中的过滤组ID，在显示过滤组容器时设置 +// Selected filter group ID, set when showing the filter group container const selectedFilterGroupIdx = ref() // 已选中的过滤项 // Selected filter items const selectedFilterItems = ref() -// 已选中的过滤项Id，在选择过滤项时设置 -// Selected filter item Id, set when selecting filter item +// 已选中的过滤项ID，在选择过滤项时设置 +// Selected filter item ID, set when selecting filter item const selectedFilterItemIdx = ref() // 所有过滤组中已选中的字典项，格式：列名 + '-' + 列值 -> 字典项 // Dictionary items selected in all filter groups, format: column name + '-' + column value -> dictionary item @@ -139,11 +139,11 @@ async function addDictItemsByFilterItems(filterItems: FilterItemProps[]) { * Show filter group container * * @param e 事件 / Event - * @param filterGroupIdx 过滤组Id / Filter group Id + * @param filterGroupIdx 过滤组ID / Filter group ID */ async function showFilterGroupContainer(e: Event, filterGroupIdx?: number) { - // 初始化，设置已选中的过滤组Id，清空已选中的过滤项Id - // Initialize, set the selected filter group Id, and clear the selected filter item Id + // 初始化，设置已选中的过滤组ID，清空已选中的过滤项ID + // Initialize, set the selected filter group ID, and clear the selected filter item ID selectedFilterGroupIdx.value = filterGroupIdx selectedFilterItemIdx.value = undefined const targetEle = e.target as HTMLElement @@ -179,7 +179,7 @@ async function showFilterGroupContainer(e: Event, filterGroupIdx?: number) { * * Delete filter group * - * @param filterGroupIdx 过滤组Id / Filter group Id + * @param filterGroupIdx 过滤组ID / Filter group ID */ async function deleteFilterGroup(filterGroupIdx: number) { const filter = toRaw(props.filter!) @@ -220,11 +220,11 @@ function tryParseDictItems(columnName: string, value?: any): any | DictItemProps * Show filter column container * * @param e 事件 / Event - * @param filterItemIdx 过滤项Id / Filter item Id + * @param filterItemIdx 过滤项ID / Filter item ID */ function showFilterColumns(e: Event, filterItemIdx?: number) { - // 设置已选中的过滤项Id - // Set the selected filter item Id + // 设置已选中的过滤项ID + // Set the selected filter item ID selectedFilterItemIdx.value = filterItemIdx filterColumnCompRef.value?.show(e.target as HTMLElement, undefined, undefined, true) } @@ -235,11 +235,11 @@ function showFilterColumns(e: Event, filterItemIdx?: number) { * Show filter operation container * * @param e 事件 / Event - * @param filterItemIdx 过滤项Id / Filter item Id + * @param filterItemIdx 过滤项ID / Filter item ID */ function showFilterOps(e: Event, filterItemIdx: number) { - // 设置已选中的过滤项Id - // Set the selected filter item Id + // 设置已选中的过滤项ID + // Set the selected filter item ID selectedFilterItemIdx.value = filterItemIdx filterOpCompRef.value?.show(e.target as HTMLElement, undefined, MenuSizeKind.MINI, true) } @@ -249,7 +249,7 @@ function showFilterOps(e: Event, filterItemIdx: number) { * * Delete filter item * - * @param filterItemIdx 过滤项Id / Filter item Id + * @param filterItemIdx 过滤项ID / Filter item ID */ async function deleteFilterItem(filterItemIdx: number) { selectedFilterItems.value?.splice(filterItemIdx, 1) @@ -320,7 +320,7 @@ function setFilterOp(e: Event) { * Set a single filter value * * @param value 值 / Value - * @param filterItemIdx 过滤项Id / Filter item Id + * @param filterItemIdx 过滤项ID / Filter item ID */ function setFilterAValue(value: any, filterItemIdx: number) { const currFilterItem = selectedFilterItems.value?.[filterItemIdx] @@ -354,8 +354,8 @@ function setFilterAValue(value: any, filterItemIdx: number) { * * Delete a single value * - * @param filterItemIdx 过滤项Id / Filter item Id - * @param valueIdx 值索引Id / Value index Id + * @param filterItemIdx 过滤项ID / Filter item ID + * @param valueIdx 值索引ID / Value index ID */ function deleteAValue(filterItemIdx: number, valueIdx: number) { selectedFilterItems.value?.[filterItemIdx] && selectedFilterItems.value[filterItemIdx].values.splice(valueIdx, 1) @@ -367,7 +367,7 @@ function deleteAValue(filterItemIdx: number, valueIdx: number) { * Show dictionary item selection container * * @param value 字典值 / Dictionary value - * @param filterItemIdx 过滤项Id / Filter item Id + * @param filterItemIdx 过滤项ID / Filter item ID * @param e 事件 / Event */ async function showDictItems(value: any, filterItemIdx: number, e: Event) { diff --git a/src/components/function/GroupSetting.vue b/src/components/function/GroupSetting.vue index 24b419d..5ac9a3a 100644 --- a/src/components/function/GroupSetting.vue +++ b/src/components/function/GroupSetting.vue @@ -5,7 +5,7 @@ import type { ColumnConf } from '../conf'; import * as eb from '../eventbus'; const props = defineProps<{ - // 布局Id + // 布局ID // Layout ID layoutId: string // 分组配置 diff --git a/src/components/function/RowSortSetting.vue b/src/components/function/RowSortSetting.vue index 3bb7396..a7da39a 100644 --- a/src/components/function/RowSortSetting.vue +++ b/src/components/function/RowSortSetting.vue @@ -9,7 +9,7 @@ import type { ColumnConf } from '../conf' import * as eb from '../eventbus' const props = defineProps<{ - // 布局Id + // 布局ID // Layout ID layoutId: string // 排序配置 diff --git a/src/components/layout/list/ListColumnAgg.vue b/src/components/layout/list/ListColumnAgg.vue index f5f837f..a813812 100644 --- a/src/components/layout/list/ListColumnAgg.vue +++ b/src/components/layout/list/ListColumnAgg.vue @@ -8,7 +8,7 @@ import type { ColumnConf } from '../../conf' import * as eb from '../../eventbus' const props = defineProps<{ - // 布局Id + // 布局ID // Layout ID layoutId: string // 聚合配置 diff --git a/src/components/layout/list/ListRowSelect.vue b/src/components/layout/list/ListRowSelect.vue index 4cfe00e..d3444c9 100644 --- a/src/components/layout/list/ListRowSelect.vue +++ b/src/components/layout/list/ListRowSelect.vue @@ -15,16 +15,27 @@ const props = defineProps<{ pkKindIsNumber: boolean }>() -const currentRef = ref(null) +// 列选择元素引用，仅用于向上找到列表元素 +// Column selection element reference, only used to find the list element upwards +const selectEleRef = ref(null) +// 列表元素 +// List element let listEle: HTMLElement onMounted(() => { - listEle = currentRef.value!.closest('.iw-row-select-container')! as HTMLElement + listEle = selectEleRef.value!.closest('.iw-row-select-container')! as HTMLElement delegateEvent(listEle, 'click', '.iw-row-select-cell__chk', onSelectToggle) delegateEvent(listEle, 'click', '.iw-row-select-all-cell__chk', onSelectAllToggle) }) -function onSelectToggle(event: Event) { +/** + * 单行选择切换 + * + * Single row selection toggle + * + * @param event 点击事件 / Click event + */ +async function onSelectToggle(event: Event) { const selectCheckBoxEle = event.target as HTMLInputElement const selectRowEle = getParentWithClass(selectCheckBoxEle, 'iw-data-row')! let selectPk @@ -34,71 +45,143 @@ function onSelectToggle(event: Event) { else { selectPk = selectRowEle.dataset.pk } - const listEle = getParentWithClass(selectRowEle, 'iw-row-select-container')! if (!props.selectedPks.includes(selectPk)) { - addSelect(selectPk, selectCheckBoxEle, listEle) + // 添加选择 + // Add selection + addSelect(selectPk, selectCheckBoxEle) } else { - removeSelect(selectPk, selectCheckBoxEle, selectRowEle, listEle) + // 移除选择 + // Remove selection + removeSelect(selectPk, selectCheckBoxEle) } - indeterminateSelect(selectRowEle, listEle) - eb.selectData(props.selectedPks) + // 处理父数据选择 + // Process parent data selection + processParentSelect(selectRowEle) + // 通知外部已选中的主键 + // Notify the external selected primary key + await eb.selectData(props.selectedPks) } -function onSelectAllToggle(event: Event) { +/** + * 全选切换 + * + * Toggle select all + * + * @param event 点击事件 / Click event + */ +async function onSelectAllToggle(event: Event) { const selectAllCheckBoxEle = event.target as HTMLInputElement - const listEle = getParentWithClass(selectAllCheckBoxEle, 'iw-row-select-container')! Array.from(listEle.querySelectorAll('.iw-data-row')).forEach((rowEle) => { const selectPk = props.pkKindIsNumber ? Number.parseInt((rowEle as HTMLElement).dataset.pk as string) : (rowEle as HTMLElement).dataset.pk const selectCheckBoxEle = rowEle.querySelector('.iw-row-select-cell__chk') as HTMLInputElement if (selectAllCheckBoxEle.checked && !props.selectedPks.includes(selectPk)) { - addSelect(selectPk, selectCheckBoxEle, listEle) + // 添加选择 + // Add selection + addSelect(selectPk, selectCheckBoxEle) } else if (!selectAllCheckBoxEle.checked && props.selectedPks.includes(selectPk)) { - removeSelect(selectPk, selectCheckBoxEle, rowEle as HTMLElement, listEle) + // 移除选择 + // Remove selection + removeSelect(selectPk, selectCheckBoxEle) } }) - eb.selectData(props.selectedPks) + // 通知外部已选中的主键 + // Notify the external selected primary key + await eb.selectData(props.selectedPks) } -function addSelect(selectPk: any, selectCheckBoxEle: HTMLInputElement, listEle: HTMLElement) { +/** + * 添加选择 + * + * Add selection + * + * @param selectPk 要添加的主键 / Primary key to add + * @param selectCheckBoxEle 要添加的选择框元素 / Checkbox element to add + */ +function addSelect(selectPk: any, selectCheckBoxEle: HTMLInputElement) { + // 添加主键到已选中列表 + // Add primary key to selected list !props.selectedPks.includes(selectPk) && props.selectedPks.push(selectPk) selectCheckBoxEle.checked = true selectCheckBoxEle.indeterminate = false + // 递归添加子数据 + // Recursively add sub-data listEle.querySelectorAll(`.iw-data-row[data-parent-pk='${selectPk}']`).forEach((childrenRowEle) => { const childrenPk = props.pkKindIsNumber ? Number.parseInt((childrenRowEle as HTMLElement).dataset.pk as string) : (childrenRowEle as HTMLElement).dataset.pk const childrenCheckBoxEle = childrenRowEle.querySelector('.iw-row-select-cell__chk') as HTMLInputElement - addSelect(childrenPk, childrenCheckBoxEle, listEle) + addSelect(childrenPk, childrenCheckBoxEle) }) } -function removeSelect(selectPk: any, selectCheckBoxEle: HTMLInputElement, rowEle: HTMLElement, listEle: HTMLElement) { +/** + * 移除选择 + * + * Remove selection + * + * @param selectPk 要移除的主键 / Primary key to remove + * @param selectCheckBoxEle 要移除的选择框元素 / Checkbox element to remove + */ +function removeSelect(selectPk: any, selectCheckBoxEle: HTMLInputElement) { + // 从已选中列表中移除主键 + // Remove the primary key from the selected list props.selectedPks.includes(selectPk) && props.selectedPks.splice(props.selectedPks.indexOf(selectPk), 1) selectCheckBoxEle.checked = false selectCheckBoxEle.indeterminate = false + // 递归移除子数据 + // Recursively remove sub-data listEle.querySelectorAll(`.iw-data-row[data-parent-pk='${selectPk}']`).forEach((childrenRowEle) => { const childrenPk = props.pkKindIsNumber ? Number.parseInt((childrenRowEle as HTMLElement).dataset.pk as string) : (childrenRowEle as HTMLElement).dataset.pk const childrenCheckBoxEle = childrenRowEle.querySelector('.iw-row-select-cell__chk') as HTMLInputElement - removeSelect(childrenPk, childrenCheckBoxEle, childrenRowEle as HTMLElement, listEle) + removeSelect(childrenPk, childrenCheckBoxEle) }) + // 移除全选的选中状态 + // Remove the selected state of select all const selectAllEle = listEle.querySelector('.iw-row-select-all-cell__chk') as HTMLInputElement selectAllEle.checked = false } -function indeterminateSelect(rowEle: HTMLElement, listEle: HTMLElement) { +/** + * 处理父数据选择 + * + * Process parent data selection + * + * @param rowEle 行元素 / Row element + */ +function processParentSelect(rowEle: HTMLElement) { if (rowEle.dataset.parentPk) { const parentRowEle = listEle.querySelector(`.iw-data-row[data-pk='${rowEle.dataset.parentPk}']`) if (parentRowEle) { const parentPk = props.pkKindIsNumber ? Number.parseInt((parentRowEle as HTMLElement).dataset.pk as string) : (parentRowEle as HTMLElement).dataset.pk + // 从已选中列表中移除主键 + // Remove the primary key from the selected list props.selectedPks.includes(parentPk) && props.selectedPks.splice(props.selectedPks.indexOf(parentPk), 1) + // 判断子数据是否有选中 + // Judge whether the sub-data is selected + const childHasSelected = Array.prototype.some.call(listEle.querySelectorAll(`.iw-data-row[data-parent-pk='${parentPk}']`), (element) => { + const childPk = props.pkKindIsNumber ? Number.parseInt((element as HTMLElement).dataset.pk as string) : (element as HTMLElement).dataset.pk + return props.selectedPks.includes(childPk) + }) const childrenCheckBoxEle = parentRowEle.querySelector('.iw-row-select-cell__chk') as HTMLInputElement - childrenCheckBoxEle.indeterminate = true - indeterminateSelect(parentRowEle as HTMLElement, listEle) + if (!childHasSelected) { + // 取消选择 + // Remove selection + childrenCheckBoxEle.checked = false + childrenCheckBoxEle.indeterminate = false + } + else { + // 设置半选状态 + // Set indeterminate state + childrenCheckBoxEle.indeterminate = true + } + // 递归设置父数据 + // Recursively set parent data + processParentSelect(parentRowEle as HTMLElement) } } } diff --git a/src/components/layout/list/ListRows.vue b/src/components/layout/list/ListRows.vue index 1e9292e..ea0ac50 100644 --- a/src/components/layout/list/ListRows.vue +++ b/src/components/layout/list/ListRows.vue @@ -8,18 +8,42 @@ import type { ColumnConf } from '../../conf' import { NODE_DEPTH_FLAG, renderTreeToggleHandler } from '../../function/RowTree' const props = defineProps<{ + // 数据 + // Data records: { [columnName: string]: any }[] + // 主键列名 + // Primary key column name pkColumnName: string + // 父主键列名 + // Parent primary key column name parentPkColumnName?: string + // 子数据显示类型 + // Sub-data display type subDataShowKind: SubDataShowKind + // 主键列是否为数字类型 + // Whether the primary key column is of numeric type pkKindIsNumber: boolean + // 列配置 + // Column configuration columnsConf: ColumnConf[] + // 布局ID + // Layout ID layoutId: string + // 布局类型 + // Layout type layoutKind: LayoutKind + // 表格样式配置 + // Table style configuration styleProps: TableStyleProps + // 是否显示选择列 + // Whether to display the select column showSelectColumn: boolean + // 操作列渲染函数 + // Action column rendering function actionColumnRender?: (record: { [columnName: string]: any }, layoutKind: LayoutKind) => any - setColumnStyles: (colIdx: number) => any + // 设置列样式 + // Set column style + setColumnStyles: (colIdx: number, width?: number) => any }>() @@ -37,6 +61,8 @@ const props = defineProps<{ :data-parent-pk="props.parentPkColumnName ? row[props.parentPkColumnName] : undefined" :class="`${props.styleProps.rowClass} iw-list-row iw-data-row ${props.subDataShowKind === SubDataShowKind.FOLD_SUB_DATA ? 'iw-data-fold' : ''} flex bg-base-100 border-b border-b-base-300 border-r border-r-base-300`" > + +
+ +
{{ row[props.pkColumnName] }}
+ +
+ +