br-dionysus 1.6.5 → 1.6.7

package/docs/packages/MTable/docs/demo.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="g-box">
+    <p>{{ tableConfig }}</p>
+    <MTable
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+    >
+      <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
+      />
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTableConfig } from 'packages/index'
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+
+const tableData = ref<User[]>([])
+const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('MTableDemo', [{
+  label: 'Date',
+  prop: 'date',
+  minWidth: 200
+}, {
+  label: 'Address',
+  prop: 'address',
+  minWidth: 200
+}, {
+  label: 'name',
+  prop: 'name',
+  minWidth: 200
+}], tableData)
+
+tableData.value = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }
+]
+
+const pasteData = (obj: any, data: any) => {
+  tableData.value = data
+}
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1200px;
+}
+</style>

package/docs/packages/MTable/index.ts

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

package/docs/packages/MTable/src/MTable.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="m-table-box">
+    <el-table
+      ref="tableRef"
+      v-bind="$attrs"
+      :size="props.size"
+      @paste="paste"
+      @cellClick="cellClick"
+      :data="tableData"
+    >
+      <!-- 默认插槽 -->
+      <!--<slot></slot>-->
+
+      <!-- 循环处理具名插槽 -->
+      <!--<template-->
+      <!--  v-for="(slotData, name) in slots"-->
+      <!--  #[name]-->
+      <!--&gt;-->
+      <!--  <slot-->
+      <!--    :name="name"-->
+      <!--    v-bind="slotData"-->
+      <!--  ></slot>-->
+      <!--</template>-->
+      <slot name="default"></slot>
+      <slot name="append"></slot>
+      <template
+        v-if="!slots.empty"
+        #empty
+      >
+        <img src="./../../../src/assets/empty.png" />
+      </template>
+      <slot name="empty"></slot>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, useSlots, watch, provide } from 'vue'
+import checkType from '../../../tool/checkType'
+import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
+import { tableKey } from './token'
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+const props = withDefaults(defineProps<{
+  size?: 'small' | 'large' | '',
+  sole?: string,
+  data?: Array<{
+    [key: string]: string | number
+  }>,
+  filtersValue?: FilterValue,
+  /** 表格配置 */
+  tableConfig?: TableConfig | null
+}>(), {
+  size: '',
+  sole: 'key',
+  data: () => [],
+  filtersValue: () => ({}),
+  tableConfig: null
+})
+
+const tableConfig = ref<TableConfig>(props.tableConfig || {})
+watch(
+  () => props.tableConfig,
+  () => {
+    if (JSON.stringify(tableConfig.value) === JSON.stringify(props.tableConfig)) return false
+    tableConfig.value = props.tableConfig || {}
+  }
+)
+watch(
+  () => tableConfig.value,
+  () => {
+    emit('update:tableConfig', tableConfig.value)
+  }
+)
+
+const slots = useSlots()
+
+const tableData = computed(() => {
+  return props.data.filter(item => {
+    for (const key in props.filtersValue) {
+      const node = props.filtersValue[key]
+      const colData = checkType.isObject(item[key]) || checkType.isArray(item[key]) ? JSON.stringify(item[key]) : item[key]
+      if (!node.includes(colData) && node.length) return false
+    }
+    return true
+  })
+})
+const createHash = (hashLength: number = 24) => {
+  return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
+}
+
+const emit = defineEmits<{
+  pasteData: [data: {
+    /** 粘贴行的行数据 */
+    editRow: { [key: string]: any },
+    /** 粘贴列的列名 */
+    editColumn: string,
+    /** 粘贴的数据 */
+    arr: Array<string | number>,
+    /** 起始行 */
+    rowIndex: number,
+  },
+    /** 粘贴完成后的表格数据 */
+    tableData: Array<{ [key: string]: any
+  }>],
+  'update:tableConfig': [tableConfig: TableConfig]
+}>()
+
+const internalData = ref<Array<{ [key: string]: any }>>([]) // 组件内数据
+const editColumn = ref<string>('') // 列名
+const editRow = ref<string>('') // 行
+const editRowSole = ref<string>('') // 行的唯一值
+const returnData = ref<Array<{ [key: string]: any }>>([]) // 返回的数据
+const elDom = ref<any>('')
+onMounted(async () => {
+  setTimeout(() => {
+    tableRef.value?.$el.click()
+  }, 1000)
+})
+const cellClick = (row: any, column: { property: string; }, cell: any) => {
+  elDom.value = cell.querySelector('input')
+  editColumn.value = column.property // 保存粘贴的列名
+  editRowSole.value = row[props.sole] // 保存操作的行的元素唯一值
+  editRow.value = row // 获取行的key名
+  elDom.value?.addEventListener('paste', disablePasteEvent)
+}
+const disablePasteEvent = (e: { preventDefault: () => void; }) => {
+  e.preventDefault()
+}
+const paste = (e: { clipboardData: any; }) => {
+  internalData.value = JSON.parse(JSON.stringify(props.data))
+  const clipdata = e.clipboardData
+  const str = clipdata.getData('text/plain')
+  const arr = str.split(/\r\n|\r|\n/).filter((item: string) => item)
+  // 查找修改行在数据内的位置
+  const rowIndex = internalData.value.findIndex(item => (item[props.sole as keyof typeof item] === editRowSole.value))
+
+  // 判断是否需要添加行
+  const num = props.data.length - rowIndex
+  if (arr.length > num) {
+    // 需要添加行
+    for (let i = 0; i < arr.length - num; i++) {
+      internalData.value.push(createObject())
+    }
+    // 添加完行之后
+  }
+  returnData.value = internalData.value.map((item, index) => {
+    const obj = item
+    if (index >= rowIndex && index < rowIndex + arr.length) {
+      const editNum = index - rowIndex
+      obj[editColumn.value] = arr[editNum]
+    }
+    return obj
+  })
+  emit('pasteData', { editRow, editColumn: editColumn.value, arr, rowIndex }, returnData.value)
+}
+const createObject = () => {
+  const newObj: { [key: string]: any } = {}
+  Object.keys(editRow.value).forEach(key => {
+    if (key === props.sole) {
+      newObj[key] = createHash()
+    } else {
+      const type = editRow.value[key as keyof typeof editRow.value]
+      if (typeof type === 'boolean') {
+        newObj[key] = false
+      } else if (typeof type === 'number') {
+        newObj[key] = 0
+      } else if (typeof type === 'string') {
+        newObj[key] = ''
+      } else if (typeof type === 'object') {
+        if (Array.isArray(type)) {
+          newObj[key] = []
+        } else {
+          newObj[key] = {}
+        }
+      }
+    }
+  })
+  return newObj
+}
+const tableRef = ref<any>(null)
+
+/** 最后一列 */
+const lastColumnProp = computed(() => {
+  if (!tableConfig.value) return ''
+  let sort = -1
+  let propKey = ''
+  for (const key in tableConfig.value) {
+    const item = tableConfig.value[key]
+    if (sort < item.sort) {
+      sort = item.sort
+      propKey = key
+    }
+  }
+  return propKey
+})
+provide(tableKey, {
+  tableConfig,
+  lastColumnProp
+})
+
+defineExpose({
+  clearSelection: () => tableRef.value?.clearSelection(),
+  getSelectionRows: () => tableRef.value?.getSelectionRows(),
+  toggleRowSelection: (row: any, selected: boolean) => tableRef.value?.toggleRowSelection(row, selected),
+  toggleAllSelection: () => tableRef.value?.toggleAllSelection(),
+  toggleRowExpansion: (row: any, expanded: boolean) => tableRef.value?.toggleRowExpansion(row, expanded),
+  setCurrentRow: (row: any) => tableRef.value?.setCurrentRow(row),
+  clearSort: () => tableRef.value?.clearSort(),
+  clearFilter: (columnKeys: string[] | number[]) => tableRef.value?.clearFilter(columnKeys),
+  doLayout: () => tableRef.value?.doLayout(),
+  sort: (prop: string, order: string) => tableRef.value?.sort(prop, order),
+  scrollTo: (options: any | number, yCoord?: number) => tableRef.value?.scrollTo(options, yCoord),
+  setScrollTop: (top: number) => tableRef.value?.setScrollTop(top),
+  setScrollLeft: (left: number) => tableRef.value?.setScrollLeft(left)
+})
+</script>
+
+<style scoped lang="scss">
+.m-table-box {
+  position: relative;
+}
+
+.el-table__empty-text img {
+  width: 15%
+}
+</style>

package/docs/packages/MTable/src/token.ts

@@ -0,0 +1,9 @@
+import { InjectionKey, Ref } from 'vue'
+import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
+
+export const tableKey: InjectionKey<{
+  /** 表格列配置 */
+  tableConfig: Ref<TableConfig>,
+  /** 最后一列 */
+  lastColumnProp: Ref<string>
+}> = Symbol('tableKey')

package/docs/packages/MTableColumn/docs/README.md

@@ -0,0 +1,22 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+表格列组件
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MTableColumn" demo-name="demo">
+  <demo />
+</Preview>
+
+
+### 2) Attributes
+| 参数         | 说明                                | 类型               | 可选值 | 默认值                                              |
+| ------------ | ----------------------------------- | ------------------ | ------ | --------------------------------------------------- |
+| filtersValue | 列筛选过滤条件                      | object             | -      | { }                                                 |
+| filters      | 表格筛选数据                        | string[],number[]  | -      | any[]                                               |
+| filterMethod | 筛选方法                            | Function           | -      | () => void                                          |
+| children     | 多级表头 时使用传递对应数据进行循环 | Table-column API[] | -      | []                                                  |
+| 其余参数     | 参考el官网的table                   | any                | -      | https://element-plus.org/zh-CN/component/table.html |

package/docs/packages/MTableColumn/docs/demo.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="g-box">
+    <el-table
+      :data="tableData"
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :minWidth="item.minWidth"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+        :children="item.children || []"
+      >
+      </MTableColumn>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+const filtersValue = ref<FilterValue>({})
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+const tableData = ref<User[]>([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }
+])
+const tableTitle = [
+  {
+    label: '日期',
+    prop: 'date',
+    minWidth: '172px'
+  },
+  {
+    label: '名称',
+    prop: 'name',
+    minWidth: '134px'
+  },
+  {
+    label: '地址',
+    children: [
+      {
+        label: '123',
+        children: [
+          {
+            label: '222222222222',
+            prop: 'address',
+            minWidth: '134px'
+
+          },
+          {
+            label: 'qqqqqq',
+            prop: 'address',
+            minWidth: '134px'
+
+          }
+        ]
+      },
+      {
+        label: '2222',
+        prop: 'address',
+        minWidth: '134px'
+      }
+    ]
+
+  },
+  {
+    label: '标签',
+    prop: 'tag',
+    minWidth: '134px'
+  }
+]
+</script>
+
+<style scoped lang="scss">
+.g-box {
+  max-width: 1000px;
+}
+</style>

package/docs/packages/MTableColumn/index.ts

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