API documentation and code optimization.

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
   // 布局列

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<number | undefined>()
 // 已选中的过滤项
 // Selected filter items
 const selectedFilterItems = ref<FilterItemProps[] | undefined>()
-// 已选中的过滤项Id，在选择过滤项时设置
-// Selected filter item Id, set when selecting filter item
+// 已选中的过滤项ID，在选择过滤项时设置
+// Selected filter item ID, set when selecting filter item
 const selectedFilterItemIdx = ref<number | undefined>()
 // 所有过滤组中已选中的字典项，格式：列名 + '-' + 列值 -> 字典项
 // 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) {

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
   // 分组配置

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
   // 排序配置

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
   // 聚合配置

src/components/layout/list/ListRowSelect.vue

@@ -15,16 +15,27 @@ const props = defineProps<{
   pkKindIsNumber: boolean
 }>()
 
-const currentRef = ref<HTMLElement | null>(null)
+// 列选择元素引用，仅用于向上找到列表元素
+// Column selection element reference, only used to find the list element upwards
+const selectEleRef = ref<HTMLElement | null>(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)
     }
   }
 }
 </script>
 
 <template>
-  <div ref="currentRef" />
+  <div ref="selectEleRef" />
 </template>