br-dionysus 1.15.3 → 1.16.0

package/packages/MTable/docs/demo.vue

@@ -1,9 +1,37 @@
 <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>
+
     <h3>展开列</h3>
     <p @click="zzzz">{{ tableConfig }}</p>
     <MTable
-      class="style.box"
       :data="tableData"
       border
       @headerDragend="headerDragend"
@@ -58,9 +86,9 @@
       >
       </MTableColumn>
     </MTable>
+
     <h3>树状表格</h3>
     <MTable
-      class="style.box"
       :data="tableData"
       border
       @headerDragend="headerDragend"
@@ -87,6 +115,38 @@
       >
       </MTableColumn>
     </MTable>
+
+    <h3>批改</h3>
+    <BatchEdit
+      ref="batchEditRef"
+      size="small"
+      v-model:tableData="tableData1"
+      :selectionCell="selectionCell"
+      :tableTitle="tableTitle"
+    ></BatchEdit>
+    <MTable
+      :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"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTable>
+    <p>选中的单元格：{{ selectionCell }}</p>
   </div>
 </template>
 
@@ -94,34 +154,40 @@
 import { ref } from 'vue'
 import { useTableConfig } from './../../index'
 import { MTableColumn } from './../../MTableColumn'
+import BatchEdit from 'packages/MDialog/src/BatchEdit.vue'
 
 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: 'left'
+  fixed: 'left',
+  isBatchEdit: false
 }, {
   label: '时间',
   prop: 'date',
-  minWidth: 200
+  minWidth: 200,
+  isBatchEdit: true
 }, {
   label: '地址',
   prop: 'address',
-  minWidth: 200
+  minWidth: 200,
+  isBatchEdit: true
 }, {
   label: '名称',
   prop: 'name',
-  minWidth: 200
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '数量',
+  prop: 'qty',
+  minWidth: 200,
+  isBatchEdit: true
 }], tableData)
 
 // const childTableTitle: TableTitle[] = [{
@@ -209,6 +275,76 @@ tableData.value = [{
   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 batchEditRef = ref<InstanceType<typeof BatchEdit> | null>(null)
 </script>
 
 <style lang="scss" scoped>

package/packages/MTable/src/MTable.vue

@@ -10,6 +10,7 @@
       :data="tableData"
       :expandRowKeys="expandRowKeys"
       :rowKey="props.rowKey"
+      :cellStyle="cellStyle"
       @paste="paste"
       @cellClick="cellClick"
       @expandChange="expandChange"
@@ -28,33 +29,35 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, useSlots, watch, provide } from 'vue'
+import { ref, onMounted, computed, useSlots, watch, provide, reactive } from 'vue'
 import checkType from '../../Tool/checkType/checkType'
 import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import { tableKey } from './token'
 
 interface FilterValue {
-  [key: string]: Array<string | number>
+  [key: string]: Array<string | number>;
 }
 
 const props = withDefaults(defineProps<{
-  size?: 'small' | 'large' | '',
-  sole?: string,
-  data?: Array<{
-    [key: string]: any
-  }>,
+  size?: 'small' | 'large' | '';
+  sole?: string;
+  data?: Record<string, any>[];
   /** 表格内容筛选(当为null时，不显示筛选图标) */
-  filtersValue?: FilterValue | null,
+  filtersValue?: FilterValue | null;
   /** 表格配置 */
-  tableConfig?: TableConfig | null,
+  tableConfig?: TableConfig | null;
   /** 展开图标列(如使用这个属性则必须存在rowKey属性) (标记，约束条件后面解决) */
-  expandProp?: string,
+  expandProp?: string;
   /** 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 */
-  expandRowKeys?: any[],
+  expandRowKeys?: any[];
   /** 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 */
-  rowKey?: Function | string,
+  rowKey?: Function | string;
   /** 表格配置key */
-  tableConfigKey?: string
+  tableConfigKey?: string;
+  /** 显示单元格选中状态 */
+  showSelectionCellStatus?: boolean;
+  /** 选中列(必须showSelection为true) */
+  selectionCell?: string;
 }>(), {
   size: '',
   sole: 'key',
@@ -64,7 +67,9 @@ const props = withDefaults(defineProps<{
   expandProp: '',
   expandRowKeys: () => [],
   rowKey: '',
-  tableConfigKey: ''
+  tableConfigKey: '',
+  showSelectionCellStatus: false,
+  selectionCell: ''
 })
 
 const expandRowKeys = ref<any[] | null>(props.rowKey ? props.expandRowKeys : null)
@@ -102,6 +107,7 @@ watch(
 const slots = useSlots()
 
 const tableData = computed(() => {
+  if (!Object.keys(props.filtersValue || {}).length) return props.data
   return props.data.filter(item => {
     for (const key in props.filtersValue) {
       const node = props.filtersValue[key]
@@ -111,6 +117,27 @@ 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('')
 }
@@ -129,13 +156,37 @@ const emit = defineEmits<{
     },
     /** 粘贴完成后的表格数据 */
     tableData: Array<{ [key: string]: any }>
-  ],
+  ];
   /** 表格配置更新 */
-  'update:tableConfig': [tableConfig: TableConfig],
+  'update:tableConfig': [tableConfig: TableConfig];
   /** expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 */
-  privateExpandChange: [row: any, expandedRows: any[]]
+  privateExpandChange: [row: any, expandedRows: any[]];
+  /** 选中单元格更新 */
+  'update:selectionCell': [string];
 }>()
 
+interface SelectionCellInfoType {
+  /** 列索引 */
+  columnIndex: number | null;
+  /** 行索引 */
+  rowIndex: number | null;
+  /** 列key */
+  prop: string;
+}
+const selectionCellInfo: SelectionCellInfoType = reactive<SelectionCellInfoType>({
+  columnIndex: null,
+  rowIndex: null,
+  prop: ''
+})
+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 {}
+  return {
+    backgroundColor: 'var(--el-color-primary-light-9)'
+  }
+}
+
 const privateExpandChange = (index: number) => {
   const row = tableData.value[index]
   const expandedRows = tableData.value.filter(item => (expandRowKeys?.value || []).includes(item[props?.rowKey as any || '']))
@@ -159,6 +210,15 @@ const cellClick = (row: any, column: { property: string; }, cell: any) => {
   editRowSole.value = row[props.sole] // 保存操作的行的元素唯一值
   editRow.value = row // 获取行的key名
   elDom.value?.addEventListener('paste', disablePasteEvent)
+
+  const tr = cell.parentElement
+  if (!tr) return
+  const parent = tr.parentNode
+  const rowIndex = Array.from(parent.children).indexOf(tr)
+  selectionCellInfo.columnIndex = cell.cellIndex
+  selectionCellInfo.rowIndex = rowIndex
+  selectionCellInfo.prop = column.property
+  emit('update:selectionCell', props.selectionCell === column.property ? '' : column.property)
 }
 const disablePasteEvent = (e: { preventDefault: () => void; }) => {
   e.preventDefault()

package/packages/MTableSuper/src/MTableSuper.vue

@@ -88,7 +88,7 @@ const getColumn = (slots: Slots, data: GetColumnReturn[] = []): GetColumnReturn[
 
     const isSelection = node.type === 'selection'
     if (isSelection) {
-      data.push(selectionDom)
+      data.push(selectionDom as any)
       continue
     }
 

package/packages/typings/global.d.ts

@@ -38,38 +38,40 @@ type OptionsKeys = `${string}Options` | `${string}Map`
 // }
 
 /** 表头 */
-interface TableTitle {
+declare interface TableTitle<T extends Record<string, any> = any> {
   /** 显示的标题 */
-  label?: string,
+  label: string;
   /** 字段名称 对应列内容的字段名， 也可以使用 property属性 */
-  prop?: string,
+  prop: T extends Record<string, any> ? keyof T : string;
+  /** 对齐方式 */
+  align?: 'right' | 'left' | 'center';
   /** 对应列的宽度 */
-  width?: number | string,
+  width?: number | string;
   /** 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
-  minWidth?: number | string,
+  minWidth?: number | string;
   /** 列的 className */
-  className?: string,
+  className?: string;
   /** 当前列标题的自定义类名 */
-  labelClassName?: string,
+  labelClassName?: string;
   /** 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 */
-  sortable?: boolean,
+  sortable?: boolean;
   /** 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推 */
-  sortBy?: (row: any, index: number) => string | string | string[],
+  sortBy?: (row: any, index: number) => string | string[];
   /** 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序 */
-  sortOrders?: ('ascending' | 'descending' | null)[],
+  sortOrders?: ('ascending' | 'descending' | null)[];
   /** 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。 */
   filters?: {
-    text: string | number,
-    value: string | number
-  }[],
+    text: string | number;
+    value: string | number;
+  }[];
   /** 数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 */
-  filterMethod?: Function,
+  filterMethod?: Function;
   /** 表头对齐方式， 若不设置该项，则使用表格的对齐方式 */
-  headerAlign?: 'left' | 'center' | 'right',
-  /** 对齐方式 */
-  align?: 'left' | 'center' | 'right',
+  headerAlign?: 'left' | 'center' | 'right';
   /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
-  fixed?: 'left' | 'right' | boolean,
+  fixed?: true | 'left' | 'right';
+  /** 是否允许批改 */
+  isBatchEdit?: boolean;
 }
 
 /** 要求对象中几个属性必有其一 */
@@ -78,31 +80,31 @@ type AtLeastOne<T, Keys extends keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [
 /** 表头(虚拟化表格) */
 interface TableV2Title {
   /** 显示的标题 */
-  title: string,
+  title: string;
   /** 唯一标志 */
-  key: string,
+  key: string;
   /** data 的唯一标志符 */
-  dataKey: string,
+  dataKey: string;
   /** 表格单元格内容对齐方式 */
-  align?: 'right' | 'left' | 'center',
+  align?: 'right' | 'left' | 'center';
   /** 列的类名 */
-  class?: string,
+  class?: string;
   /** 列是否固定在左侧或者右侧。 true 表示固定在左侧 */
-  fixed?: true | 'left' | 'right',
+  fixed?: true | 'left' | 'right';
   /** 自定义 header 头部类名 */
-  headerClass?: string,
+  headerClass?: string;
   /** 此列是否不可见 */
-  hidden?: boolean,
+  hidden?: boolean;
   /** 自定义列单元格的类名，将会与 gird 单元格合并 */
-  style?: object,
+  style?: object;
   /** 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
-  minWidth?: number | string,
+  minWidth?: number | string;
   /** 对应列的列的最大宽度 */
-  maxWidth?: number | string,
+  maxWidth?: number | string;
   /** 对应列的宽度 */
-  width: number | string,
+  width: number | string;
   /** 自定义单元格渲染器 */
-  cellRenderer?: any,
+  cellRenderer?: any;
   /** 自定义头部渲染器 */
-  headerCellRenderer?: any,
+  headerCellRenderer?: any;
 }

package/tags.json

@@ -1 +1 @@
-{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","drawerMode","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","configKey","model","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple","modelValue","update:modelValue","change"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","selectChange","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","pasteData","update:tableConfig","privateExpandChange"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"m-table-super":{"attributes":[],"description":"这是一个MTableSuper"},"m-table-v2":{"attributes":["size","data","height","border","columns","filtersValue","tableConfig","tableConfigKey","fixed","estimatedRowHeight","headerHeight","cellWidthAdaptive","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
+{"demo":{"attributes":[],"description":"这是一个demo"},"batch-edit":{"attributes":["selectionCell","size","tableData","tableTitle","update:tableData"],"description":"这是一个BatchEdit"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","drawerMode","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","configKey","model","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple","modelValue","update:modelValue","change"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","selectChange","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","showSelectionCellStatus","selectionCell","pasteData","update:tableConfig","privateExpandChange","update:selectionCell"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"m-table-super":{"attributes":[],"description":"这是一个MTableSuper"},"m-table-v2":{"attributes":["size","data","height","border","columns","filtersValue","tableConfig","tableConfigKey","fixed","estimatedRowHeight","headerHeight","cellWidthAdaptive","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}

package/vite.config.ts

@@ -4,7 +4,7 @@ import eslint from 'vite-plugin-eslint'
 import vue from '@vitejs/plugin-vue'
 import Markdown from 'vite-plugin-md'
 import VueDevTools from 'vite-plugin-vue-devtools'
-import compressedFiles from './compressedFiles'
+// import compressedFiles from './compressedFiles'
 
 export default defineConfig({
   resolve: {