br-dionysus 1.17.7 → 1.18.0

package/packages/MTable/src/MTable.vue

@@ -2,18 +2,22 @@
   <div
     class="br-m-table-box"
     :data-is-expand="Boolean(props.expandProp)"
+    tabindex="0"
+    @keydown="onKeydown"
   >
     <el-table
       ref="tableRef"
-      v-bind="$attrs"
+      v-bind="attrs"
       :size="props.size"
       :data="tableData"
       :expandRowKeys="expandRowKeys"
       :rowKey="props.rowKey"
       :cellStyle="cellStyle"
+      :summaryMethod="props.circleTotal ? summaryMethodFun : props.summaryMethod"
       @paste="paste"
       @cellClick="cellClick"
       @expandChange="expandChange"
+      @cellMouseEnter="cellMouseEnter"
     >
       <slot name="default"></slot>
       <slot name="append"></slot>
@@ -29,11 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, useSlots, watch, provide, reactive, getCurrentInstance } from 'vue'
+import { ref, onMounted, computed, useSlots, watch, provide, reactive, getCurrentInstance, onUnmounted, useAttrs } from 'vue'
 import checkType from '../../Tool/checkType/checkType'
 import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import { tableKey } from './token'
 import slotsToData, { SlotsToDataReturnItem } from './../../Tool/slotsToData/slotsToData'
+import globalEvents from '../../Tool/globalEvents/globalEvents'
 
 interface FilterValue {
   [key: string]: Array<string | number>;
@@ -55,10 +60,14 @@ const props = withDefaults(defineProps<{
   rowKey?: Function | string;
   /** 表格配置key */
   tableConfigKey?: string;
-  /** 显示单元格选中状态 */
-  showSelectionCellStatus?: boolean;
-  /** 选中列(必须showSelection为true) */
-  selectionCell?: string;
+  /** 选中列 */
+  selectionCell?: string | number | symbol;
+  // /** 是否在表尾显示合计行 */
+  // showSummary?: boolean;
+  /** 自定义的合计计算方法 */
+  summaryMethod?:((data: { columns: any[], data: any[] }) => string[]) | null;
+  /** 是否圈选合计 */
+  circleTotal?: boolean;
 }>(), {
   size: '',
   sole: 'key',
@@ -69,16 +78,76 @@ const props = withDefaults(defineProps<{
   expandRowKeys: () => [],
   rowKey: '',
   tableConfigKey: '',
-  showSelectionCellStatus: false,
-  selectionCell: ''
+  selectionCell: '',
+  // showSummary: false,
+  summaryMethod: null,
+  circleTotal: true
 })
 
 const slots = useSlots()
 
+const attrs = useAttrs()
+
+const summaryMethodFun = (param: { columns: any[], data: Record<any, any>[] }): string[] => {
+  const value: string[] = []
+  const tableTitle: TableTitle[] = getTableTitle()
+  const tableTitleMap: Record<string, TableTitle> = {}
+  tableTitle.forEach(item => {
+    tableTitleMap[item.prop as string] = item
+  })
+
+  // 是否存在圈选
+  const isExistRange = selectionArea.startX !== null && selectionArea.startY !== null && selectionArea.endX !== null && selectionArea.endY !== null
+  if (!isExistRange) {
+    param.columns.forEach(column => {
+      let qty: number | string = ''
+      const isSummary = tableTitleMap[column.property]?.isSummary ?? true
+
+      param.data.forEach(item => {
+        const isNumber = checkType(item[column.property]).isNumber()
+        if (isNumber && isSummary) qty = (qty || 0) + item[column.property]
+      })
+
+      if (!column.property) value.push((attrs as any)?.sumText ?? '合')
+      else if (column.property === 'sn') value.push('')
+      else value.push(qty)
+    })
+    return value
+  }
+
+  const startX: number = (selectionArea.startX || 0) > (selectionArea.endX || 0) ? (selectionArea.endX || 0) : (selectionArea.startX || 0)
+  const startY: number = (selectionArea.startY || 0) > (selectionArea.endY || 0) ? (selectionArea.endY || 0) : (selectionArea.startY || 0)
+  const endX: number = (selectionArea.startX || 0) > (selectionArea.endX || 0) ? (selectionArea.startX || 0) : (selectionArea.endX || 0)
+  const endY: number = (selectionArea.startY || 0) > (selectionArea.endY || 0) ? (selectionArea.startY || 0) : (selectionArea.endY || 0)
+
+  param.columns.forEach((column, x) => {
+    let qty: number | string = ''
+    const isSummary = tableTitleMap[column.property]?.isSummary ?? true
+
+    // 是否为圈选行
+    const isRangeCol = x >= startX && x <= endX
+
+    param.data.forEach((item, y) => {
+      const isNumber = checkType(item[column.property]).isNumber()
+      // 是否在圈选范围
+      const isRange = x >= startX && x <= endX && y >= startY && y <= endY
+      if (isNumber && !isRangeCol && isSummary) qty = (qty || 0) + item[column.property]
+      if (isNumber && isRangeCol && isRange && isSummary) qty = (qty || 0) + item[column.property]
+    })
+
+    if (!column.property) value.push((attrs as any)?.sumText ?? '合')
+    else if (column.property === 'sn') value.push('')
+    else value.push(qty)
+  })
+  return value
+}
+
 /**
- * 获取表格头信息
+ * @description 获取表格头信息
+ * @param {boolean} isComplete 是否包含完整信息（既多选列等）
+ * @return {TableTitle[]} 表格头信息
  * */
-const getTableTitle = (): TableTitle[] => {
+const getTableTitle = (isComplete: boolean = false): TableTitle[] => {
   const slotDefaultData = slotsToData(slots, {
     name: 'default',
     isJumpFgt: false,
@@ -92,7 +161,7 @@ const getTableTitle = (): TableTitle[] => {
       mTableColumnItemList.push(item)
     }
   })
-  const tableTitle: TableTitle[] = mTableColumnItemList.map(item => {
+  let tableTitle: TableTitle[] = mTableColumnItemList.map(item => {
     return {
       label: item.props?.label ?? '',
       prop: item.props?.prop ?? '',
@@ -102,9 +171,11 @@ const getTableTitle = (): TableTitle[] => {
       fixed: item.props?.fixed ?? false,
       isBatchEdit: item.props?.isBatchEdit === '' || item.props?.isBatchEdit === true,
       show: item.props?.show ?? true,
-      sort: item.props?.sort ?? 0
+      sort: item.props?.sort ?? 0,
+      isSummary: item.props?.isSummary ?? true
     }
-  }).filter(item => item.prop)
+  })
+  if (!isComplete) tableTitle = tableTitle.filter(item => item.prop)
   return tableTitle
 }
 
@@ -175,30 +246,124 @@ const emit = defineEmits<{
   /** expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 */
   privateExpandChange: [row: any, expandedRows: any[]];
   /** 选中单元格更新 */
-  'update:selectionCell': [string];
+  'update:selectionCell': [ string | number | symbol ];
+  /** 复制事件 */
+  copyData: [ data: { text: string, selection: { startX: number, startY: number, endX: number, endY: number } } ];
 }>()
 
-interface SelectionCellInfoType {
-  /** 列索引 */
-  columnIndex: number | null;
-  /** 行索引 */
-  rowIndex: number | null;
-  /** 列key */
-  prop: string;
+interface SelectionAreaType {
+  /** 开始x */
+  startX: number | null;
+  /** 开始Y */
+  startY: number | null;
+  /** 结束x */
+  endX: number | null;
+  /** 结束Y */
+  endY: number | null;
+  /** 圈选中 */
+  isInProgress: boolean;
 }
-const selectionCellInfo: SelectionCellInfoType = reactive<SelectionCellInfoType>({
-  columnIndex: null,
-  rowIndex: null,
-  prop: ''
+/** 选中区域 */
+const selectionArea: SelectionAreaType = reactive<SelectionAreaType>({
+  /** 开始x */
+  startX: null,
+  /** 开始Y */
+  startY: null,
+  /** 结束x */
+  endX: null,
+  /** 结束Y */
+  endY: null,
+  /** 圈选中 */
+  isInProgress: false
 })
 const cellStyle = (data: { row: any, column: any, rowIndex: number, columnIndex: number }): Record<string, any> => {
-  if (!props.selectionCell) return {}
-  if (!props.showSelectionCellStatus) return {}
-  if (data.columnIndex !== selectionCellInfo.columnIndex || data.rowIndex !== selectionCellInfo.rowIndex) return {}
+  if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return {}
+  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)'
   }
 }
+const cellMouseEnter = (row: any, column: any, cell: HTMLTableCellElement) => {
+  if (!selectionArea.isInProgress) return
+
+  const tr = cell.parentElement
+  if (!tr) return
+  const parent = tr.parentNode
+  if (!parent) return
+  const rowIndex = Array.from(parent.children).indexOf(tr)
+
+  selectionArea.endX = cell.cellIndex
+  selectionArea.endY = rowIndex
+}
+
+const taskUpKey = 'MTable-onmouseup-' + createHash()
+globalEvents().register({
+  id: taskUpKey,
+  eventName: 'onmouseup',
+  callback: () => {
+    selectionArea.isInProgress = false
+  }
+})
+onUnmounted(() => {
+  globalEvents().unregister(taskUpKey)
+})
+const taskDownKey = 'MTable-onmousedown-' + createHash()
+globalEvents().register({
+  id: taskDownKey,
+  eventName: 'onmousedown',
+  callback: () => {
+    selectionArea.isInProgress = false
+    selectionArea.startX = null
+    selectionArea.startY = null
+    selectionArea.endX = null
+    selectionArea.endY = null
+  }
+})
+onUnmounted(() => {
+  globalEvents().unregister(taskDownKey)
+})
+
+watch(
+  () => [selectionArea.startX, selectionArea.endX],
+  () => {
+    let prop: string | number | symbol = ''
+    if (selectionArea.startX === selectionArea.endX && selectionArea.startX !== null && selectionArea.endX !== null) {
+      const tableTitle = getTableTitle(true)
+      prop = (tableTitle[selectionArea.startX] ?? {})?.prop ?? ''
+    }
+    selectionCell.value = prop
+    emit('update:selectionCell', prop)
+  }
+)
+
+/** 复制内容到粘贴板 */
+const copyTextToClipboard = async (text: string) => {
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  textarea.style.pointerEvents = 'none'
+
+  document.body.appendChild(textarea)
+  textarea.select()
+  textarea.setSelectionRange(0, textarea.value.length)
+
+  let success = false
+  try {
+    success = document.execCommand('copy')
+  } catch (err) {
+    console.error('复制失败:', err)
+  }
+
+  document.body.removeChild(textarea)
+  return success
+}
 
 const privateExpandChange = (index: number) => {
   const row = tableData.value[index]
@@ -257,15 +422,16 @@ const cellClick = (row: any, column: { property: string; }, cell: any) => {
     elDom.value?.addEventListener('paste', disablePasteEvent)
   }
 
-  const tr = cell.parentElement
-  if (!tr) return
-  const parent = tr.parentNode
-  const rowIndex = Array.from(parent.children).indexOf(tr)
-  const isRepeatClick = selectionCellInfo.columnIndex === cell.cellIndex && selectionCellInfo.rowIndex === rowIndex
-  selectionCellInfo.columnIndex = cell.cellIndex
-  selectionCellInfo.rowIndex = rowIndex
-  selectionCellInfo.prop = column.property
-  emit('update:selectionCell', isRepeatClick ? '' : column.property)
+  if (!selectionArea.isInProgress) {
+    const tr = cell.parentElement
+    if (!tr) return
+    const parent = tr.parentNode
+    const rowIndex = Array.from(parent.children).indexOf(tr)
+    selectionArea.startX = cell.cellIndex
+    selectionArea.startY = rowIndex
+    selectionArea.endX = cell.cellIndex
+    selectionArea.endY = rowIndex
+  }
 }
 const instance = getCurrentInstance()
 const disablePasteEvent = (e: { preventDefault: () => void; }) => {
@@ -353,7 +519,9 @@ provide(tableKey, {
   rowKey: props.rowKey,
   tableConfigKey: props.tableConfigKey,
   privateExpandChange,
-  showFilter: Boolean(props.filtersValue)
+  showFilter: Boolean(props.filtersValue),
+  /** 选中区域 */
+  selectionArea
 })
 
 defineExpose({
@@ -372,6 +540,54 @@ defineExpose({
   setScrollLeft: (left: number) => tableRef.value?.setScrollLeft(left),
   getTableTitle
 })
+
+/** 选中的单元格 */
+const selectionCell = ref<string | number | symbol>(props.selectionCell)
+watch(
+  () => props.selectionCell,
+  () => {
+    selectionCell.value = props.selectionCell
+  }
+)
+
+/** 表格单元格复制 */
+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++) {
+    copyColKey.push(tableTitle[i].prop)
+  }
+  const text: any[] = []
+  for (let i = startY; i < endY; i++) {
+    const row: any[] = []
+    copyColKey.forEach(key => {
+      row.push(props.data[i][key as string])
+    })
+    text.push(row.join('\t'))
+  }
+
+  return text.join('\n')
+}
+const onKeydown = async (e: KeyboardEvent) => {
+  if (!((e.ctrlKey || e.metaKey) && String(e.key).toLowerCase() === 'c')) return
+  const text = buildCopyText()
+  if (!text) return
+  await copyTextToClipboard(text)
+  emit('copyData', {
+    text,
+    selection: {
+      startX: selectionArea.startX as number,
+      startY: selectionArea.startY as number,
+      endX: selectionArea.endX as number,
+      endY: selectionArea.endY as number
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">

package/packages/MTable/src/token.ts

@@ -20,5 +20,18 @@ export const tableKey: InjectionKey<{
   /** expandProp模式下 当用户对某一行展开或者关闭的时候会触发 */
   privateExpandChange: Function,
   /** 是否显示筛选图标 */
-  showFilter: boolean
+  showFilter: boolean,
+  /** 选中区域 */
+  selectionArea: {
+    /** 开始x */
+    startX: number | null;
+    /** 开始Y */
+    startY: number | null;
+    /** 结束x */
+    endX: number | null;
+    /** 结束Y */
+    endY: number | null;
+    /** 圈选中 */
+    isInProgress: boolean;
+  }
 }> = Symbol('tableKey')

package/packages/MTableColumn/docs/README.md

@@ -19,4 +19,5 @@ import demo from './demo.vue'
 | filters      | 表格筛选数据                   | string[],number[]  | -   | any[]                                               |
 | filterMethod | 筛选方法                     | Function           | -   | () => void                                          |
 | children     | 多级表头 时使用传递对应数据进行循环       | Table-column API[] | -   | []                                                  |
+| isBatchEdit  | 是否允许批改                   | boolean            | -   | false                                               |
 | 其余参数         | 参考el官网的table             | any                | -   | https://element-plus.org/zh-CN/component/table.html |

package/packages/MTableColumn/src/MTableColumn.vue

@@ -9,12 +9,30 @@
     >
       <slot
         name="default"
-        :row="scope.row"
-        :column="scope.column"
-        :index="scope.$index"
-        :$index="scope.$index"
+        v-bind="{
+          index: scope.$index,
+          ...scope
+        }"
       ></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
@@ -32,10 +50,10 @@
         </el-icon>
         <slot
           name="default"
-          :row="scope.row"
-          :column="scope.column"
-          :index="scope.$index"
-          :$index="scope.$index"
+          v-bind="{
+            index: scope.$index,
+            ...scope
+          }"
         ></slot>
       </div>
     </template>
@@ -57,8 +75,9 @@
     </template>
     <!--展开行结束-->
 
+    <!--子行开始-->
     <template v-if="props.children && props.children.length">
-      <m-table-column
+      <MTableColumn
         v-for="child in props.children"
         :key="child.prop"
         :prop="child.prop"
@@ -66,16 +85,20 @@
         :minWidth="child.minWidth"
         showOverflowTooltip
         :children="child.children || []"
-      ></m-table-column>
+        :isBatchEdit="child.isBatchEdit"
+      ></MTableColumn>
     </template>
+    <!--子行结束-->
+
+    <!--表格配置开始-->
     <template #header="scope">
       <span>
         <slot
           name="header"
-          :row="scope.row"
-          :column="scope.column"
-          :index="scope.$index"
-          :$index="scope.$index"
+          v-bind="{
+            index: scope.$index,
+            ...scope
+          }"
         ></slot>
         <span>
           <span v-if="!slots.header">{{ scope.column.label }}</span>
@@ -134,15 +157,16 @@
                     <el-checkbox
                       v-for="item in getCheckboxOptions(props.filters)"
                       :key="item.value"
-                      :label="item.value"
+                      :value="item.value"
                     >
                       <template v-if="slots.default">
                         <slot
                           name="default"
-                          :row="{ [scope.column.property]: item.text }"
-                          :column="scope.column"
-                          :index="scope.$index"
-                          :$index="scope.$index"
+                          v-bind="{
+                            index: scope.$index,
+                            ...scope,
+                            row: { [scope.column.property]: item.text }
+                          }"
                         ></slot>
                       </template>
                       <template v-if="!slots.default">{{ item.text }}</template>
@@ -177,6 +201,7 @@
         </span>
       </span>
     </template>
+    <!--表格配置开始-->
   </el-table-column>
 </template>
 
@@ -185,6 +210,8 @@ 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 { ArrowRight } from '@element-plus/icons-vue'
 
 interface FilterValue {
   [key: string]: Array<string | number>
@@ -197,17 +224,20 @@ interface PropChildren {
 
 const props = withDefaults(defineProps<{
   /** 列筛选过滤条件(当为null时，不显示筛选图标) */
-  filtersValue?: FilterValue | null,
+  filtersValue?: FilterValue | null;
   /** 过滤选项 */
-  filters?: Array<{ text: string | number, value: string | number }>,
+  filters?: Array<{ text: string | number, value: string | number }>;
   /** 过滤方法 */
-  filterMethod?: Function | null,
-  children?: Array<PropChildren>,
+  filterMethod?: Function | null;
+  children?: Array<PropChildren>;
+  /** 是否允许批改 */
+  isBatchEdit?: boolean;
 }>(), {
   filtersValue: null,
   filters: () => [],
   filterMethod: null,
-  children: () => []
+  children: () => [],
+  isBatchEdit: false
 })
 
 const slots = useSlots()
@@ -350,6 +380,17 @@ 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">
@@ -388,6 +429,15 @@ const boxStyle = ref<BoxStyle>({
     transform: rotate(90deg);
   }
 }
+
+.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">
@@ -471,4 +521,28 @@ const boxStyle = ref<BoxStyle>({
 .filter-i {
   background-color: var(--el-color-primary);
 }
+
+.br-m-table-box {
+  .el-table__body-wrapper {
+    .el-table .el-table__cell {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .u-my-table-column-text {
+        padding-top: 8px;
+        padding-bottom: 8px;
+      }
+    }
+
+    .el-table .cell {
+      padding-left: 0;
+      padding-right: 0;
+
+      .u-my-table-column-text {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+    }
+  }
+}
 </style>

package/packages/Tool/globalEvents/README.md

@@ -0,0 +1,23 @@
+## 全局事件代理 globalEvents
+
+### 1) 参数
+
+| 参数    | 描述                       | 类型     | 默认值    |
+|-------|--------------------------|--------|--------|
+| point | 锚点（绑定事件的dom节点的class,id等） | string | 'body' |
+
+### 2) 返参
+
+| 参数         | 描述                         | 类型                                   | 默认值 |
+|------------|----------------------------|--------------------------------------|-----|
+| register   | 注册行为                       | (options: EventRegistration) => void | -   |
+| unregister | 注销行为（id存在即注销对应行为，不存在即注销所有） | (id?: string \| number) => void      | -   |
+
+#### 2.1) EventRegistration
+
+| 参数        | 描述               | 类型                 | 默认值 |
+|-----------|------------------|--------------------|-----|
+| eventName | 事件类型             | GlobalEventName    | -   |
+| id        | 唯一标识符            | string \| number   | -   |
+| callback  | 事件回调             | (event: T) => void | -   |
+| priority  | 事件优先级（数字越小优先级越高） | number             | -   |