br-dionysus 1.8.4 → 1.8.6

package/packages/MTableSuper/docs/demo.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="g-box">
+    <h3>基础功能</h3>
+    <MTableSuper
+      :data="tableData"
+      v-if="!tableData"
+      border
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTableSuper>
+    <h3>带选择的表格</h3>
+    <MTableSuper
+      :data="tableData"
+      border
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <el-table-column
+        prop="name"
+        label="名称"
+      >
+        <el-table-column
+          prop="date"
+          label="时间"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+        ></el-table-column>
+      </el-table-column>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>展开列</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @headerDragend="headerDragend"
+      expandProp="sn"
+      @privateExpandChange="privateExpandChange"
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        type="expand"
+        width="1"
+      >
+        <template #default="props">
+          <h1>index{{ props.index }}</h1>
+          <h1>$index{{ props.$index }}</h1>
+          <h1>测试</h1>
+        </template>
+      </MTableColumn>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>树状表格</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @expandChange="privateExpandChange"
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTableConfig } from 'packages/index'
+import { MTableColumn } from 'packages/MTableColumn'
+
+const privateExpandChange = (row: any, expandedRows: any[]) => {
+  console.log('row', row)
+  console.log('expandedRows', expandedRows)
+}
+
+// const test = (data: any) => {
+//   console.log('data', data)
+// }
+
+const tableData = ref<any[]>([])
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200
+  // fixed: 'right'
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200
+  // fixed: 'left'
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200
+}], tableData)
+console.log('tableTitle', tableTitle.value)
+
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  children: [{
+    id: 21,
+    sn: 1,
+    date: '2016-05-02',
+    name: 'Tom21',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }, {
+    id: 22,
+    sn: 2,
+    date: '2016-05-02',
+    name: 'Tom22',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }]
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}]
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>

package/packages/MTableSuper/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import MTableSuper from './src/MTableSuper.vue'
+
+export const MTableSuperPlugin: Plugin = {
+  install (app: App) {
+    app.component('MTableSuper', MTableSuper)
+  }
+}
+
+export { MTableSuper }

package/packages/MTableSuper/src/MTableSuper.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="br-m-table-super-box">
+    <MTable
+      v-if="showTableV2Mode"
+      v-bind="attrs"
+      v-on="attrs"
+    >
+      <slot name="default"></slot>
+      <slot name="append"></slot>
+      <slot name="empty"></slot>
+    </MTable>
+    <MTableV2
+      v-if="showTableV2Mode"
+      :data="tableData"
+      :height="400"
+      border
+      fixed
+      :columns="tableColumn"
+      cellWidthAdaptive
+    ></MTableV2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, useSlots, computed, createVNode, unref, ref } from 'vue'
+import { MTableV2 } from 'packages/MTableV2'
+import { MTable } from 'packages/MTable'
+import { ElCheckbox } from 'element-plus'
+
+const attrs = useAttrs()
+interface Slots {
+  default?: () => any[]
+}
+const slots: Slots = useSlots()
+// const slotsDefault = slots.default as Function
+// console.log('slots', slotsDefault())
+
+const selectionDom = {
+  key: 'selection',
+  width: 50,
+  cellRenderer: ({ rowData }: any) => {
+    const onChange = (value: any) => (rowData.checked = value)
+    return createVNode(ElCheckbox, {
+      modelValue: rowData.checked,
+      indeterminate: false,
+      'onUpdate:modelValue': onChange
+    })
+  },
+  headerCellRenderer: () => {
+    const allSelected = unref(tableData.value).every((row: any) => row.checked)
+    const containsChecked = unref(tableData.value).some((row: any) => row.checked)
+    const onChange = (value: any) => {
+      tableData.value = unref(tableData).map((row: any) => {
+        row.checked = value
+        return row
+      })
+    }
+
+    return createVNode(ElCheckbox, {
+      modelValue: allSelected,
+      indeterminate: containsChecked && !allSelected,
+      'onUpdate:modelValue': onChange
+    })
+  }
+}
+
+interface GetColumnReturn extends TableTitle {
+  key?: string,
+  cellRenderer?: any,
+  headerCellRenderer?: any,
+  children?: GetColumnReturn[]
+}
+const getColumn = (slots: Slots, data: GetColumnReturn[] = []): GetColumnReturn[] => {
+  const slotsDefault = slots.default as Function | undefined
+  const slotsDefaultData: any[] = slotsDefault ? slotsDefault() : slots
+  // console.log('slotsDefaultData', slotsDefaultData)
+
+  const list = slotsDefaultData.filter(item => item?.props?.type !== 'expand')
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i]
+
+    const children = item.children
+
+    const node = {
+      ...item.props,
+      children: []
+    }
+
+    const isSelection = node.type === 'selection'
+    if (isSelection) {
+      data.push(selectionDom)
+      continue
+    }
+
+    const isForTemp = !item.props
+    if (isForTemp) {
+      data.push(...getColumn(children))
+      continue
+    }
+
+    const isChildren = Boolean(children)
+    if (isChildren) node.children = getColumn(children)
+
+    data.push(node)
+  }
+  return data
+}
+
+const tableTitleToTableV2Title = (tableTitle: GetColumnReturn[]): TableV2Title[] => {
+  // console.log('tableTitle', tableTitle)
+  return tableTitle.map(item => {
+    return {
+      title: item.label,
+      key: item.prop,
+      dataKey: item.prop,
+      ...(item.align ? { align: item.align } : {}),
+      ...(item.className ? { class: item.className } : {}),
+      ...(item.fixed ? { fixed: item.fixed } : {}),
+      ...(item.labelClassName ? { headerClass: item.labelClassName } : {}),
+      ...(item.minWidth ? { minWidth: item.minWidth || item.width } : {}),
+      ...(item.width || item.minWidth ? { width: item.width || item.minWidth || 100 } : {})
+    } as TableV2Title
+  })
+}
+const tableColumn: any = tableTitleToTableV2Title(getColumn(slots))
+console.log('tableColumn', tableColumn)
+// console.log('getColumn(slots)[0].children', getColumn(slots)[0].children)
+
+const tableData = ref<any[]>(attrs?.data as any[] || [])
+/** 切换阈值 */
+const switchThreshold = 5
+/** 是否为虚拟化表格模式 */
+const showTableV2Mode = computed(() => tableData.value?.length > switchThreshold)
+</script>
+
+<style scoped lang="scss">
+</style>
+
+<style lang="scss">
+</style>

package/packages/MTableSuper/src/token.ts

@@ -0,0 +1,24 @@
+import { InjectionKey } from 'vue'
+import type { Ref } from 'vue'
+import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
+
+export const tableKey: InjectionKey<{
+  /** 表格列配置 */
+  tableConfig: Ref<TableConfig>,
+  /** 最后一列 */
+  lastColumnProp: Ref<string>,
+  /** 展开图标列 */
+  expandProp: string,
+  /** 表格数据 */
+  tableData: Ref<any[]>,
+  /** 展开列 */
+  expandRowKeys: Ref<any[] | null>,
+  /** 行数据的 Key */
+  rowKey: Function | string,
+  /** 表格配置key */
+  tableConfigKey: string,
+  /** expandProp模式下 当用户对某一行展开或者关闭的时候会触发 */
+  privateExpandChange: Function,
+  /** 是否显示筛选图标 */
+  showFilter: boolean
+}> = Symbol('tableKey')

package/packages/MTableV2/docs/README.md

@@ -24,6 +24,7 @@ import demo from './demo.vue'
 | fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
 | estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
 | headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| cellWidthAdaptive  | 单元格宽度自适应                                          | boolean                    | -                         | false                                                                             |
 | 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
 
 ### 3) Events

package/packages/MTableV2/docs/demo.vue

@@ -43,13 +43,15 @@ const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo
 const test = () => {
   filtersValue.value = {}
 }
-tableData.value = [{
-  id: 1,
-  sn: 'sn',
-  date: 'date',
-  address: 'address',
-  name: 'name'
-}]
+for (let i = 0; i < 1000; i++) {
+  tableData.value.push({
+    id: i,
+    sn: 'sn' + i,
+    date: 'date' + i,
+    address: 'address' + i,
+    name: 'name' + i
+  })
+}
 </script>
 
 <style lang="scss" scoped>

package/packages/MTableV2/src/MTableV2.vue

@@ -14,7 +14,8 @@
     <el-auto-resizer>
       <template #default="{ width }">
         <el-table-v2
-          :columns="props.columns"
+          v-if="width"
+          :columns="props.cellWidthAdaptive ? getAdaptive(props.columns, width) : props.columns"
           :data="props.data"
           :width="width"
           :height="props.height"
@@ -22,16 +23,24 @@
           :estimatedRowHeight="estimatedRowHeight"
           :headerHeight="headerHeight"
           v-bind="$attrs"
-        ></el-table-v2>
+        >
+          <template
+            v-if="!slots.empty"
+            #empty
+          >
+            <img src="./../../../src/assets/empty.png" />
+          </template>
+        </el-table-v2>
       </template>
     </el-auto-resizer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, useSlots } from 'vue'
 import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import MTableColumnSet from './../../MTableColumnSet/src/MTableColumnSet.vue'
+import checkType from 'packages/Tool/checkType/checkType'
 
 interface FilterValue {
   [key: string]: Array<string | number>
@@ -59,7 +68,9 @@ const props = withDefaults(defineProps<{
   /** 渲染动态的单元格的预估高度 */
   estimatedRowHeight?: number | null,
   /** Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 */
-  headerHeight?: number | number[] | null
+  headerHeight?: number | number[] | null,
+  /** 单元格宽度自适应 */
+  cellWidthAdaptive?: boolean
 }>(), {
   size: 'default',
   data: () => [],
@@ -71,9 +82,12 @@ const props = withDefaults(defineProps<{
   tableConfigKey: '',
   fixed: false,
   estimatedRowHeight: null,
-  headerHeight: null
+  headerHeight: null,
+  cellWidthAdaptive: false
 })
 
+const slots = useSlots()
+
 const sizeToHeight: { [key: string]: number } = {
   small: 30,
   default: 50,
@@ -128,6 +142,25 @@ const emit = defineEmits<{
 
 const tableRef = ref<any>(null)
 
+const getAdaptive = (columns: TableV2Title[], tableWidth: number | 100): TableV2Title[] => {
+  if (!columns.length) return []
+
+  // 格式化宽度（去除px）
+  const formatWidth = (data: number | string = 0): number => checkType(data).isNumber() ? data as number : Number((data as string).replace(/[^0-9]/g, ''))
+
+  // 总份数
+  const total = columns
+    .map(item => formatWidth(item.width))
+    .reduce((a, b) => a + b)
+
+  return columns.map(item => {
+    return {
+      ...item,
+      width: formatWidth(item.width) / total * (tableWidth - 6)
+    }
+  })
+}
+
 defineExpose({
   scrollTo: (param: { scrollLeft?: number, scrollTop?: number }) => tableRef.value?.scrollTo(param),
   scrollToLeft: (scrollLeft: number) => tableRef.value?.scrollToLeft(scrollLeft),
@@ -159,6 +192,10 @@ defineExpose({
     top: 20px;
   }
 }
+
+.el-table-v2__empty img {
+  width: 8%
+}
 </style>
 
 <style lang="scss">
@@ -170,6 +207,7 @@ defineExpose({
   &[data-border="true"] {
     .el-table-v2 {
       border: 1px solid var(--el-table-border-color);
+      //box-sizing: border-box; //宽度问题涉及表格内虚拟计算，所有无法改变盒模型模式
 
       .el-table-v2__header-cell, .el-table-v2__row-cell {
         border-right: var(--el-table-border);
@@ -192,5 +230,11 @@ defineExpose({
   &[data-size="large"] .el-table-v2__cell-text {
     line-height: 65px;
   }
+
+  .el-table-v2__empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>

package/packages/SkinConfig/src/useSkin.ts

@@ -98,7 +98,7 @@ const useSkin = (): {
   }
 
   // 清洗数据
-  const skinConfigData = packageConfig.get('skinConfig')
+  const skinConfigData = packageConfig.get('skinConfig') as SkinConfig
   // 数据结构不一致，既认为为不同版本需要清洗
   if (!compareStructures(skinConfigData, defaultSkinConfig)) {
     packageConfig.set('skinConfig', defaultSkinConfig)
@@ -226,7 +226,7 @@ const useSkin = (): {
    * @description 同步本地数据到弹窗
    * */
   const syncData = () => {
-    const _skinConfigData = packageConfig.get('skinConfig')
+    const _skinConfigData = packageConfig.get('skinConfig') as SkinConfig
     skinConfig.darkTheme = _skinConfigData.darkTheme
   }
 

package/packages/Tool/slotsToData/README.md

@@ -0,0 +1,26 @@
+## vue3的slots转json
+
+### 1) 参数
+
+| 参数    | 描述          | 类型     | 默认值       |
+|-------|-------------|--------|-----------|
+| slots | vue的slots对象 | Slots  | -         |
+| name  | 插槽名         | string | 'default' |
+
+### 2) 返参
+
+| 参数 | 描述           | 类型                | 默认值 |
+|----|--------------|-------------------|-----|
+| -  | 格式化后的slots数据 | SlotsToDataReturn | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数                | 描述           | 类型                      | 默认值 |
+|-------------------|--------------|-------------------------|-----|
+| SlotsToDataReturn | 格式化后的slots数据 | SlotsToDataReturnItem[] | []  |
+
+#### 2.1) SlotsToDataReturn
+| 参数       | 描述            | 类型                          | 默认值 |
+|----------|---------------|-----------------------------|-----|
+| name     | 标签名           | string                      | -   |
+| props    | 组件标签上的props参数 | Record<string, any> \| null | -   |
+| children | 子级            | SlotsToDataReturnItem[]     | -   |

package/packages/Tool/slotsToData/slotsToData.ts

@@ -0,0 +1,38 @@
+interface Slots {
+  default?: () => any[];
+  inlineBtn?: () => any[];
+  submitBtn?: () => any[];
+}
+
+export interface SlotsToDataReturnItem {
+  name: string;
+  props: Record<string, any> | null;
+  children: SlotsToDataReturnItem[];
+}
+export type SlotsToDataReturn = SlotsToDataReturnItem[]
+/**
+ * @description vue3的slots转json
+ * @param slots 插槽对象
+ * @param name 插槽名
+ * @param data
+ * */
+const slotsToData = (slots: Slots, name: string = 'default', data: SlotsToDataReturn = []): SlotsToDataReturn => {
+  const slotsObj = slots[name as keyof typeof slots] as Function | undefined
+  const slotsData: any[] = slotsObj ? slotsObj() : slots
+  for (let i = 0; i < slotsData.length; i++) {
+    const item = slotsData[i]
+
+    const children = item.children
+    const isChildren = Boolean(children)
+    const _data = isChildren ? slotsToData(children) : []
+
+    data.push({
+      name: item.type.name,
+      props: item.props,
+      children: _data
+    })
+  }
+  return data
+}
+
+export default slotsToData

package/packages/index.ts

@@ -13,6 +13,7 @@ import { MSelectTablePlugin } from 'packages/MSelectTable'
 import { MDialogPlugin } from 'packages/MDialog'
 import { MSelectTableV1Plugin } from 'packages/MSelectTableV1'
 import { MTableV2Plugin } from 'packages/MTableV2'
+import { MTableSuperPlugin } from 'packages/MTableSuper'
 
 import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
 import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
@@ -42,6 +43,7 @@ const BrPlugin: Plugin = {
     MDialogPlugin.install?.(app)
     MSelectTableV1Plugin.install?.(app)
     MTableV2Plugin.install?.(app)
+    MTableSuperPlugin.install?.(app)
   }
 }
 
@@ -58,6 +60,7 @@ export * from './MSelectV2'
 export * from './MDialog'
 export * from './MSelectTableV1'
 export * from './MTableV2'
+export * from './MTableSuper'
 
 export { useTableConfig }
 export { useTableV2Config }

package/packages/list.json

@@ -35,6 +35,12 @@
     "compDesc": "这是一个虚拟化表格组件",
     "compClassName": "m-table-v2"
   },
+  {
+    "compName": "MTableSuper",
+    "compZhName": "整合表格组件",
+    "compDesc": "这是一个整合表格组件",
+    "compClassName": "m-table-super"
+  },
   {
     "compName": "MTableColumn",
     "compZhName": "表格列组件",