Support batch deletion.

Author: gudaoxuri

src/components/common/menu.vue

@@ -3,7 +3,7 @@ import { provide, ref } from 'vue'
 import { FN_CLOSE_CONTEXT_MENU } from '../../constant'
 import { IwUtils } from '../../utils';
 
-const contextmenu = ref<HTMLElement | null>(null)
+const contextmenuRef = ref<HTMLElement | null>(null)
 const isShow = ref<boolean>(false)
 
 function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: MenuOffsetKind = MenuOffsetKind.LEFT_BOTTOM, size: MenuSizeKind = MenuSizeKind.MEDIUM) {
@@ -72,7 +72,7 @@ function showContextMenu(attachObj: HTMLElement | MouseEvent, offset: MenuOffset
       break
     }
   }
-  const contextMenuEle = contextmenu.value as HTMLElement
+  const contextMenuEle = contextmenuRef.value as HTMLElement
   contextMenuEle.style.minHeight = minHeight + 'px'
   contextMenuEle.style.minWidth = minWidth + 'px'
   contextMenuEle.style.left = left + 'px'
@@ -128,8 +128,8 @@ export enum MenuSizeKind {
 </script>
 
 <template>
-  <div ref="contextmenu" class="iw-contextmenu flex flex-col items-start fixed z-[3000] shadow bg-base-100 p-1 rounded-md"
-    v-show="isShow">
+  <div ref="contextmenuRef"
+    class="iw-contextmenu flex flex-col items-start fixed z-[3000] shadow bg-base-100 p-1 rounded-md" v-show="isShow">
     <slot></slot>
   </div>
 </template>

src/components/layout/list/CellFill.vue

@@ -12,14 +12,13 @@ const props = defineProps<{
 
 let updateDataFun = inject(FN_UPDATE_DATA)
 
-let startColumnName = ''
-let startRowIdx = 0
-let movedRowIdx = 0
-let startCellFixedX = 0
-let startCellEle: HTMLElement
-let isDragging = false
-
 onMounted(() => {
+  let startColumnName = ''
+  let startRowIdx = 0
+  let movedRowIdx = 0
+  let startCellFixedX = 0
+  let startCellEle: HTMLElement
+  let isDragging = false
   const listEle = document.getElementsByClassName('iw-list')[0] as HTMLElement
   const selectDiv = document.createElement('div')
   selectDiv.classList.add('iw-list-fill--select')
@@ -45,7 +44,7 @@ onMounted(() => {
     selectDiv.style.display = 'none'
 
     let records
-    // TODO
+    // TODO 判断dom idx @see row select
     const groupValue = 'Name1'
     if (!groupValue) {
       const data = props.data as TableDataResp

src/components/layout/list/RowDelete.vue

@@ -4,7 +4,7 @@ import * as iconSvg from '../../../assets/icon'
 import { FN_CLOSE_CONTEXT_MENU, FN_DELETE_DATA } from '../../../constant'
 
 const props = defineProps<{
-  selectPks: string[] | number[] | undefined
+  selectPks: string[] | number[]
 }>()
 
 let closeContextMenuFun = inject(FN_CLOSE_CONTEXT_MENU)

src/components/skeleton.vue

@@ -6,8 +6,8 @@ import MenuComp, { MenuOffsetKind } from './common/Menu.vue'
 import { TableLayoutConf, TableStyleConf, initConf } from './conf'
 import ResizeComp from './function/resize/Resize.vue'
 import ThemeComp from './function/theme/Theme.vue'
-import * as List from './layout/list/conf'
 import ListComp from './layout/list/List.vue'
+import * as List from './layout/list/conf'
 import { OperatorKind, SizeKind, TableProps } from './props'
 
 const props = defineProps<TableProps>()
@@ -155,19 +155,10 @@ async function deleteData(deletedPks: any[], reFilter?: boolean, reSort?: boolea
     }
     if (Array.isArray(layout.data)) {
       layout.data.forEach((d) => {
-        d.records.forEach((item, idx) => {
-          if (deletedPks.includes(item[tableBasicConf.pkColumnName])) {
-            d.records.splice(idx, 1)
-          }
-        })
+        d.records = d.records.filter((item) => !deletedPks.includes(item[tableBasicConf.pkColumnName]))
       })
     } else if (layout.data && !Array.isArray(layout.data)) {
-      layout.data.records.forEach((item, idx) => {
-        if (deletedPks.includes(item[tableBasicConf.pkColumnName])) {
-          // @ts-ignore
-          layout.data.records.splice(idx, 1)
-        }
-      })
+      layout.data.records = layout.data.records.filter((item) => !deletedPks.includes(item[tableBasicConf.pkColumnName]))
     } else {
       // Empty,unreachable
     }

src/utils/basic.ts

@@ -5,11 +5,19 @@ export const groupBy = <T>(array: T[], predicate: (value: T, index: number, arra
   }, {} as { [key: string]: T[] })
 
 export const hasParentWithClass = (element: HTMLElement | null, className: string): boolean => {
+  return getParentWithClass(element, className) != null
+}
+
+export const getParentWithClass = (element: HTMLElement | null, className: string): HTMLElement | null => {
   while (element) {
     if (element.classList && element.classList.contains(className)) {
-      return true
+      return element
     }
-    element = element.parentElement;
+    element = element.parentElement
   }
-  return false
+  return null
 }
+
+export const getChildIndex = (parent: HTMLElement, child: HTMLElement): number => {
+  return Array.prototype.indexOf.call(parent.children, child)
+}