br-dionysus 1.17.2 → 1.17.3

package/packages/MTable/docs/DemoTest5.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <h5>表格表单</h5>
+    <MTable
+      :data="tableData"
+      border
+      scrollbarAlwaysOn
+      @pasteData="pasteData"
+      @selectionChange="handleSelectionChange"
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        prop="name"
+        label="名称"
+        minWidth="200"
+        showOverflowTooltip
+      ></MTableColumn>
+      <MTableColumn
+        prop="address"
+        label="地址"
+        minWidth="200"
+      >
+        <template #default="scope">
+          <el-input
+            v-model="(scope.row as any).address"
+            placeholder="请输入地址"
+          ></el-input>
+        </template>
+      </MTableColumn>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MTableColumn } from './../../MTableColumn'
+
+const tableData = ref<any[]>([])
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 10
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 101
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 102
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 103
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 104
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 105
+}]
+
+// 选中项
+const multipleSelection = ref<number[]>([])
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val.map(item => item.sn)
+}
+
+const pasteData = (data: any, pasteTableData: any[]) => {
+  console.log('pasteTableData', pasteTableData)
+  tableData.value = pasteTableData
+}
+</script>
+
+<style>
+</style>

package/packages/MTable/docs/demo.vue

@@ -1,356 +1,28 @@
 <template>
   <div class="g-box">
-    <h3>普通表格</h3>
-    <MTable
-      :data="tableData1"
-      border
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      @selectionChange="handleSelectionChange"
-    >
-      <el-table-column
-        fixed="left"
-        type="selection"
-      />
-      <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>
-    </MTable>
+    <!--<DemoTest1></DemoTest1>-->
+    <!--<el-divider />-->
 
-    <h3>展开列</h3>
-    <p @click="zzzz">{{ tableConfig }}</p>
-    <MTable
-      :data="tableData"
-      border
-      @headerDragend="headerDragend"
-      :filtersValue="filtersValue"
-      scrollbarAlwaysOn
-      v-model:tableConfig="tableConfig"
-      rowKey="id"
-      tableConfigKey="tableConfigKey"
-      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>
-      <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>
-    </MTable>
+    <!--<DemoTest2></DemoTest2>-->
+    <!--<el-divider />-->
 
-    <h3>树状表格</h3>
-    <MTable
-      :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>
-    </MTable>
+    <!--<DemoTest3></DemoTest3>-->
+    <!--<el-divider />-->
 
-    <h3>批改</h3>
-    <MBatchEdit
-      size="small"
-      v-model:tableData="tableData1"
-      :selectionCell="selectionCell"
-      :relevancyTable="mTableRef"
-    ></MBatchEdit>
-    <MTable
-      ref="mTableRef"
-      :data="tableData1"
-      border
-      scrollbarAlwaysOn
-      showSelectionCellStatus
-      v-model:selectionCell="selectionCell"
-    >
-      <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"
-        :isBatchEdit="item.isBatchEdit"
-        v-model:filtersValue="filtersValue"
-        showOverflowTooltip
-      ></MTableColumn>
-      <MTableColumn
-        prop="prop"
-        label="label"
-        showOverflowTooltip
-      ></MTableColumn>
-    </MTable>
-    <p>选中的单元格：{{ selectionCell }}</p>
+    <!--<DemoTest4></DemoTest4>-->
+    <!--<el-divider />-->
+
+    <DemoTest5></DemoTest5>
+    <el-divider />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useTableConfig } from './../../index'
-import { MTableColumn } from './../../MTableColumn'
-import MBatchEdit from './../src/MBatchEdit.vue'
-
-const privateExpandChange = (row: any, expandedRows: any[]) => {
-  console.log('row', row)
-  console.log('expandedRows', expandedRows)
-}
-
-const tableData = ref<any[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
-  label: '序号',
-  prop: 'sn',
-  minWidth: 200,
-  fixed: 'left',
-  isBatchEdit: false
-}, {
-  label: '时间',
-  prop: 'date',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '地址',
-  prop: 'address',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '名称',
-  prop: 'name',
-  minWidth: 200,
-  isBatchEdit: true
-}, {
-  label: '数量',
-  prop: 'qty',
-  minWidth: 200,
-  isBatchEdit: true
-}], tableData)
-
-// const childTableTitle: TableTitle[] = [{
-//   label: '序号',
-//   prop: 'sn',
-//   minWidth: 200,
-//   fixed: 'left'
-// }, {
-//   label: '时间',
-//   prop: 'date',
-//   minWidth: 200
-// }, {
-//   label: '地址',
-//   prop: 'address',
-//   minWidth: 200
-// }, {
-//   label: '名称',
-//   prop: 'name',
-//   minWidth: 200
-// }]
-const zzzz = () => {
-  filtersValue.value = {}
-}
-tableData.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  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, Grove St, Los Angeles',
-  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
-}]
-
-const tableData1 = ref<any[]>([])
-tableData1.value = [{
-  id: 1,
-  sn: 1,
-  date: '2016-05-03',
-  name: 'Tom1',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 10
-}, {
-  id: 2,
-  sn: 2,
-  date: '2016-05-02',
-  name: 'Tom2',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 101
-}, {
-  id: 3,
-  sn: 3,
-  date: '2016-05-04',
-  name: 'Tom3',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Home',
-  pid: 0,
-  qty: 102
-}, {
-  id: 4,
-  sn: 4,
-  date: '2016-05-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 103
-}, {
-  id: 5,
-  sn: 5,
-  date: '2016-05-05',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 104
-}, {
-  id: 6,
-  sn: 6,
-  date: '2016-06-01',
-  name: 'Tom4',
-  address: 'No. 189, Grove St, Los Angeles',
-  tag: 'Office',
-  pid: 0,
-  qty: 105
-}]
-
-// 选中项
-const multipleSelection = ref<number[]>([])
-const handleSelectionChange = (val: any[]) => {
-  multipleSelection.value = val.map(item => item.sn)
-  tableData1.value[0].name = tableData1.value[0].name + 'd'
-}
-
-/**
- * 批量修改
- * */
-const selectionCell = ref<string>('')
-const mTableRef = ref<any | null>(null)
+// import DemoTest1 from 'packages/MTable/docs/DemoTest1.vue'
+// import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
+// import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
+// import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
+import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
 </script>
 
 <style lang="scss" scoped>

package/packages/MTable/src/MTable.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, useSlots, watch, provide, reactive } from 'vue'
+import { ref, onMounted, computed, useSlots, watch, provide, reactive, getCurrentInstance } from 'vue'
 import checkType from '../../Tool/checkType/checkType'
 import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import { tableKey } from './token'
@@ -82,7 +82,7 @@ const getTableTitle = (): TableTitle[] => {
   const slotDefaultData = slotsToData(slots, {
     name: 'default',
     isJumpFgt: false,
-    maxDepth: 1
+    maxDepth: 2
   })
   const mTableColumnItemList: SlotsToDataReturnItem[] = []
   slotDefaultData.forEach(item => {
@@ -151,27 +151,6 @@ const tableData = computed(() => {
     return true
   })
 })
-// const tableData = ref<Record<string, any>[]>([])
-// watch(
-//   () => [props.data, props.filtersValue],
-//   () => {
-//     if (!Object.keys(props.filtersValue || {}).length) {
-//       tableData.value = props.data
-//       return
-//     }
-//     tableData.value = props.data.filter(item => {
-//       for (const key in props.filtersValue) {
-//         const node = props.filtersValue[key]
-//         const colData = checkType(item[key]).isObject() || checkType(item[key]).isArray() ? JSON.stringify(item[key]) : item[key]
-//         if (!node.includes(colData) && node.length) return false
-//       }
-//       return true
-//     })
-//   }, {
-//     immediate: true,
-//     deep: true
-//   }
-// )
 const createHash = (hashLength: number = 24) => {
   return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
 }
@@ -255,9 +234,13 @@ const cellClick = (row: any, column: { property: string; }, cell: any) => {
   selectionCellInfo.prop = column.property
   emit('update:selectionCell', isRepeatClick ? '' : column.property)
 }
+const instance = getCurrentInstance()
 const disablePasteEvent = (e: { preventDefault: () => void; }) => {
+  const checkPaste = Boolean(instance?.vnode?.props?.onPasteData)
+  if (!checkPaste) return
   e.preventDefault()
 }
+
 const paste = (e: { clipboardData: any; }) => {
   internalData.value = JSON.parse(JSON.stringify(props.data))
   const clipdata = e.clipboardData