br-dionysus 1.18.2 → 1.18.3

package/packages/MTable/src/MTable.vue

@@ -14,6 +14,7 @@
       :rowKey="props.rowKey"
       :cellStyle="cellStyle"
       :summaryMethod="props.circleTotal ? summaryMethodFun : props.summaryMethod"
+      :cellClassName="getCellClassName"
       @paste="paste"
       @cellClick="cellClick"
       @expandChange="expandChange"
@@ -39,6 +40,7 @@ import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import { tableKey } from './token'
 import slotsToData, { SlotsToDataReturnItem } from './../../Tool/slotsToData/slotsToData'
 import globalEvents from '../../Tool/globalEvents/globalEvents'
+import { delegate } from './delegate'
 
 interface FilterValue {
   [key: string]: Array<string | number>;
@@ -276,16 +278,43 @@ const selectionArea: SelectionAreaType = reactive<SelectionAreaType>({
   /** 圈选中 */
   isInProgress: false
 })
-const cellStyle = (data: { row: any, column: any, rowIndex: number, columnIndex: number }): Record<string, any> => {
-  if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return {}
+const area = computed(() => {
+  if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) {
+    return {
+      startX: -1,
+      startY: -1,
+      endX: -1,
+      endY: -1
+    }
+  }
   const startX = selectionArea.startX > selectionArea.endX ? selectionArea.endX : selectionArea.startX
   const startY = selectionArea.startY > selectionArea.endY ? selectionArea.endY : selectionArea.startY
   const endX = selectionArea.startX > selectionArea.endX ? selectionArea.startX : selectionArea.endX
   const endY = selectionArea.startY > selectionArea.endY ? selectionArea.startY : selectionArea.endY
-  if (data.columnIndex < startX || data.columnIndex > endX) return {}
-  if (data.rowIndex < startY || data.rowIndex > endY) return {}
   return {
-    backgroundColor: 'var(--el-color-primary-light-9)'
+    startX,
+    startY,
+    endX,
+    endY
+  }
+})
+const cellStyle = (data: { row: any, column: any, rowIndex: number, columnIndex: number }): Record<string, any> => {
+  if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return {}
+  if (data.columnIndex < area.value.startX || data.columnIndex > area.value.endX) return {}
+  if (data.rowIndex < area.value.startY || data.rowIndex > area.value.endY) return {}
+
+  const borderList: string[] = []
+  // 左边框
+  if (data.columnIndex === area.value.startX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) borderList.push('inset 1px 0 0 0 var(--select-area-border-color)')
+  // 右边框
+  if (data.columnIndex === area.value.endX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) borderList.push('inset -1px 0 0 0 var(--select-area-border-color)')
+  // 上边框
+  if (data.rowIndex === area.value.startY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) borderList.push('inset 0 1px 0 0 var(--select-area-border-color)')
+  // 下边框
+  if (data.rowIndex === area.value.endY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) borderList.push('inset 0 -1px 0 0 var(--select-area-border-color)')
+  return {
+    backgroundColor: 'var(--select-area-cell-color)',
+    boxShadow: borderList.join(',')
   }
 }
 const cellMouseEnter = (row: any, column: any, cell: HTMLTableCellElement) => {
@@ -550,23 +579,39 @@ watch(
   }
 )
 
+/**
+ * @description 遍历树
+ * @param {<T>[]} tree 树
+ * @param {Function} callback 回调函数
+ * */
+const traverseTree = <T extends { children?: T[] }>(tree: T[], callback: (item: T) => void): void => {
+  tree.forEach(item => {
+    callback(item)
+    if (item.children) traverseTree(item.children ?? [], callback)
+  })
+}
+
 /** 表格单元格复制 */
 const buildCopyText = (): string => {
   if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return ''
-  const startX = selectionArea.startX < selectionArea.endX ? selectionArea.startX : selectionArea.endX
-  const startY = selectionArea.startY < selectionArea.endY ? selectionArea.startY : selectionArea.endY
-  const endX = selectionArea.startX > selectionArea.endX ? selectionArea.startX : selectionArea.endX
-  const endY = selectionArea.startY > selectionArea.endY ? selectionArea.startY : selectionArea.endY
   const tableTitle = getTableTitle(true)
   const copyColKey: (string | number | symbol)[] = []
-  for (let i = startX; i < endX + 1; i++) {
+  for (let i = area.value.startX; i < area.value.endX + 1; i++) {
     copyColKey.push(tableTitle[i].prop)
   }
+  // console.log('copyColKey', copyColKey)
+
+  const tableDataTreeMap: Record<string, any>[] = []
+  // 拍平表格树
+  traverseTree<Record<string, any>>(props.data, (item) => {
+    tableDataTreeMap.push(item)
+  })
+
   const text: any[] = []
-  for (let i = startY; i <= endY; i++) {
+  for (let i = area.value.startY; i <= area.value.endY; i++) {
     const row: any[] = []
     copyColKey.forEach(key => {
-      row.push(props.data[i][key as string])
+      row.push(tableDataTreeMap[i][key as string])
     })
     text.push(row.join('\t'))
   }
@@ -588,15 +633,54 @@ const onKeydown = async (e: KeyboardEvent) => {
     }
   })
 }
+
+const cellClassName = 'j-' + createHash()
+const dataClassNameIdentity = 'br-m-table-identity'
+const getCellClassName = (data: { row: any, column: Record<string, any>, rowIndex: number, columnIndex: number }): string => {
+  const classNameList: string[] = ['s-my-table-column-text-fill']
+  classNameList.push(`${dataClassNameIdentity}-x-${data.columnIndex}`)
+  classNameList.push(`${dataClassNameIdentity}-y-${data.rowIndex}`)
+  classNameList.push(cellClassName)
+
+  // if (selectionArea.startX !== null && selectionArea.startY !== null && selectionArea.endX !== null && selectionArea.endY !== null) {
+  //   // 左边框
+  //   if (data.columnIndex === (area.value.startX) && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) classNameList.push('s-my-table-cell-left')
+  //   // 右边框
+  //   if (data.columnIndex === area.value.endX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) classNameList.push('s-my-table-cell-right')
+  //   // 上边框
+  //   if (data.rowIndex === area.value.startY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) classNameList.push('s-my-table-cell-top')
+  //   // 下边框
+  //   if (data.rowIndex === area.value.endY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) classNameList.push('s-my-table-cell-bottom')
+  // }
+
+  return classNameList.join(' ')
+}
+delegate('#app', 'mousedown', '.' + cellClassName, (event: Event, dom: HTMLElement) => {
+  const xDataClass = dom.className.split(' ').find(item => item.indexOf(`${dataClassNameIdentity}-x-`) === 0) ?? ''
+  const yDataClass = dom.className.split(' ').find(item => item.indexOf(`${dataClassNameIdentity}-y-`) === 0) ?? ''
+
+  const xDataStr = xDataClass.split('-')[xDataClass.split('-').length - 1] ?? ''
+  const yDataStr = yDataClass.split('-')[yDataClass.split('-').length - 1] ?? ''
+  selectionArea.isInProgress = true
+  selectionArea.startX = xDataStr ? Number(xDataStr) : null
+  selectionArea.startY = yDataStr ? Number(yDataStr) : null
+  selectionArea.endX = null
+  selectionArea.endY = null
+  event.stopPropagation()
+})
 </script>
 
 <style scoped lang="scss">
 .br-m-table-box {
   position: relative;
+
+  --select-area-cell-color: var(--el-color-primary-light-9);
+  --select-area-border-color: var(--el-color-primary);
+  --select-area-border: 1px solid var(--select-area-border-color);
 }
 
 .el-table__empty-text img {
-  width: 15%
+  width: 15%;
 }
 </style>
 
@@ -611,73 +695,9 @@ const onKeydown = async (e: KeyboardEvent) => {
       display: none;
     }
   }
-}
-
-.br-m-table-box {
-  .el-table__body-wrapper {
-    .el-table__cell {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .u-my-table-column-text {
-        padding-top: 10px;
-        padding-bottom: 10px;
-      }
-    }
-
-    .cell {
-      padding-left: 0;
-      padding-right: 0;
-
-      .u-my-table-column-text {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-
-  .el-table--small .el-table__body-wrapper {
-    .el-table__cell {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .u-my-table-column-text {
-        padding-top: 6px;
-        padding-bottom: 5px;
-      }
-    }
 
-    .cell {
-      padding-left: 0;
-      padding-right: 0;
-
-      .u-my-table-column-text {
-        padding-left: 8px;
-        padding-right: 8px;
-      }
-    }
-  }
-
-  .el-table--large .el-table__body-wrapper {
-    .el-table__cell {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .u-my-table-column-text {
-        padding-top: 15px;
-        padding-bottom: 14px;
-      }
-    }
-
-    .cell {
-      padding-left: 0;
-      padding-right: 0;
-
-      .u-my-table-column-text {
-        padding-left: 16px;
-        padding-right: 16px;
-      }
-    }
+  .s-my-table-column-text-fill {
+    user-select: none;
   }
 }
 </style>

package/packages/MTable/src/delegate.ts

@@ -0,0 +1,49 @@
+/**
+ * 简单版事件代理函数
+ * @param parentSelector - 父元素选择器
+ * @param eventType - 事件类型，如 'click'、'mousedown' 等
+ * @param childSelector - 要代理的子元素选择器
+ * @param handler - 事件处理函数，this 指向匹配的子元素
+ */
+export const delegate = (
+  parentSelector: string,
+  eventType: string,
+  childSelector: string,
+  handler: (event: Event, matchedElement: HTMLElement) => void
+): void => {
+  const parentElement = document.querySelector(parentSelector) as HTMLElement
+
+  if (!parentElement) {
+    console.warn(`未找到元素: ${parentSelector}`)
+    return
+  }
+
+  parentElement.addEventListener(eventType, (event: Event): void => {
+    const target = event.target as HTMLElement
+    const closestElement = target.closest(childSelector)
+
+    let currentElement = event.target as HTMLElement
+    let matchedElement: HTMLElement | null = null
+
+    while (currentElement && currentElement !== parentElement.parentElement && !currentElement.matches(childSelector)) {
+      if (currentElement.matches(childSelector)) {
+        matchedElement = currentElement
+        break
+      }
+
+      if (currentElement === parentElement) {
+        break
+      }
+
+      currentElement = currentElement.parentElement as HTMLElement
+    }
+
+    if (!matchedElement) {
+      matchedElement = (event.target as HTMLElement).closest(childSelector)
+    }
+
+    if (closestElement && parentElement.contains(closestElement)) {
+      handler(event, matchedElement as HTMLElement)
+    }
+  })
+}

package/packages/MTable/src/token.ts

@@ -4,23 +4,23 @@ import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 
 export const tableKey: InjectionKey<{
   /** 表格列配置 */
-  tableConfig: Ref<TableConfig>,
+  tableConfig: Ref<TableConfig>;
   /** 最后一列 */
-  lastColumnProp: Ref<string>,
+  lastColumnProp: Ref<string>;
   /** 展开图标列 */
-  expandProp: string,
+  expandProp: string;
   /** 表格数据 */
-  tableData: Ref<any[]>,
+  tableData: Ref<any[]>;
   /** 展开列 */
-  expandRowKeys: Ref<any[] | null>,
+  expandRowKeys: Ref<any[] | null>;
   /** 行数据的 Key */
-  rowKey: Function | string,
+  rowKey: Function | string;
   /** 表格配置key */
   tableConfigKey: string,
   /** expandProp模式下 当用户对某一行展开或者关闭的时候会触发 */
-  privateExpandChange: Function,
+  privateExpandChange: Function;
   /** 是否显示筛选图标 */
-  showFilter: boolean,
+  showFilter: boolean;
   /** 选中区域 */
   selectionArea: {
     /** 开始x */
@@ -33,5 +33,5 @@ export const tableKey: InjectionKey<{
     endY: number | null;
     /** 圈选中 */
     isInProgress: boolean;
-  }
+  };
 }> = Symbol('tableKey')

package/packages/MTableColumn/src/MTableColumn.vue

@@ -3,10 +3,19 @@
     v-bind="attrs"
     :filterMethod="props.filterMethod"
   >
+    <!--展开行开始-->
     <template
       #default="scope"
-      v-if="slots.default"
+      v-if="slots.default && expandProp"
     >
+      <el-icon
+        class="u-my-table-column-icon"
+        v-if="isExpandTarget"
+        :data-active="getExpandActive(scope.$index)"
+        @click="expandRow(scope.$index)"
+      >
+        <ArrowRight />
+      </el-icon>
       <slot
         name="default"
         v-bind="{
@@ -15,63 +24,19 @@
         }"
       ></slot>
     </template>
-    <template
-      #default="scope"
-      v-if="!slots.default"
-    >
-      <div
-        class="u-my-table-column-text"
-        @mousedown="mousedown($event, scope.cellIndex, scope.$index)"
-      >
-        {{ columnData[scope.$index] }}
-        <slot
-          name="default"
-          v-bind="{
-            index: scope.$index,
-            ...scope
-          }"
-        ></slot>
-      </div>
-    </template>
-
-    <!--展开行开始-->
-    <template
-      #default="scope"
-      v-if="slots.default && expandProp"
-    >
-      <div class="u-my-table-column-gp">
-        <el-icon
-          class="u-my-table-column-icon"
-          v-if="isExpandTarget"
-          :data-active="getExpandActive(scope.$index)"
-          @click="expandRow(scope.$index)"
-        >
-          <ArrowRight />
-        </el-icon>
-        <slot
-          name="default"
-          v-bind="{
-            index: scope.$index,
-            ...scope
-          }"
-        ></slot>
-      </div>
-    </template>
     <template
       #default="scope"
       v-else-if="!slots.default && expandProp"
     >
-      <div class="u-my-table-column-gp">
-        <el-icon
-          class="u-my-table-column-icon"
-          v-if="isExpandTarget"
-          :data-active="getExpandActive(scope.$index)"
-          @click="expandRow(scope.$index)"
-        >
-          <ArrowRight />
-        </el-icon>
-        <span>{{ columnData[scope.$index] }}</span>
-      </div>
+      <el-icon
+        class="u-my-table-column-icon"
+        v-if="isExpandTarget"
+        :data-active="getExpandActive(scope.$index)"
+        @click="expandRow(scope.$index)"
+      >
+        <ArrowRight />
+      </el-icon>
+      <span>{{ columnData[scope.$index] }}</span>
     </template>
     <!--展开行结束-->
 
@@ -210,7 +175,7 @@ import { ref, useSlots, useAttrs, inject, computed } from 'vue'
 import checkType from '../../Tool/checkType/checkType'
 import { tableKey } from './../../MTable/src/token'
 import { useZIndex } from 'element-plus'
-import { MTableColumn } from 'packages/MTableColumn'
+import MTableColumn from './../src/MTableColumn.vue'
 import { ArrowRight } from '@element-plus/icons-vue'
 
 interface FilterValue {
@@ -380,17 +345,6 @@ const boxStyle = ref<BoxStyle>({
   right: 'unset',
   zIndex: thisZIndex
 })
-
-// 选中区域
-const selectionArea = tableKeyData?.selectionArea ?? { startX: null, startY: null, endX: null, endY: null, isInProgress: false }
-const mousedown = (event: Event, x: number, y: number) => {
-  selectionArea.isInProgress = true
-  selectionArea.startX = x
-  selectionArea.startY = y
-  selectionArea.endX = null
-  selectionArea.endY = null
-  event.stopPropagation()
-}
 </script>
 
 <style scoped lang="scss">
@@ -414,9 +368,9 @@ const mousedown = (event: Event, x: number, y: number) => {
   float: right;
 }
 
-.u-my-table-column-gp {
-  display: inline;
-}
+//.u-my-table-column-gp {
+//  display: inline;
+//}
 
 .u-my-table-column-icon {
   float: left;
@@ -430,14 +384,14 @@ const mousedown = (event: Event, x: number, y: number) => {
   }
 }
 
-.u-my-table-column-text {
-  overflow: hidden;
-  display: block;
-  overflow-wrap: break-word;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: none;
-}
+//.u-my-table-column-text {
+//  overflow: hidden;
+//  display: block;
+//  overflow-wrap: break-word;
+//  text-overflow: ellipsis;
+//  white-space: nowrap;
+//  user-select: none;
+//}
 </style>
 
 <style lang="scss">

package/packages/Tool/checkType/README.md

@@ -8,10 +8,11 @@
 
 ### 2) 返参
 
-| 参数       | 描述    | 类型            | 默认值 |
-|----------|-------|---------------|-----|
-| isNumber | 是否为数值 | () => boolean | -   |
-| isObject | 是否为对象 | () => boolean | -   |
-| isArray  | 是否为数组 | () => boolean | -   |
+| 参数       | 描述     | 类型            | 默认值 |
+|----------|--------|---------------|-----|
+| isNumber | 是否为数值  | () => boolean | -   |
+| isObject | 是否为对象  | () => boolean | -   |
+| isArray  | 是否为数组  | () => boolean | -   |
+| isString | 是否为字符串 | () => boolean | -   |
 
 

package/packages/Tool/checkType/checkType.ts

@@ -1,13 +1,15 @@
 /** 检查变量类型 */
 const checkType = (data: any): {
-  isNumber: () => boolean
-  isObject: () => boolean
-  isArray: () => boolean
+  isNumber: () => boolean;
+  isObject: () => boolean;
+  isArray: () => boolean;
+  isString: () => boolean;
 } => {
   return {
     isNumber: (): boolean => typeof data === 'number',
     isObject: (): boolean => typeof data === 'object' && data !== null && !Array.isArray(data),
-    isArray: (): boolean => Array.isArray(data)
+    isArray: (): boolean => Array.isArray(data),
+    isString: (): boolean => typeof data === 'string'
   }
 }