br-dionysus 1.15.4 → 1.16.1

package/packages/MTable/src/MBatchEdit.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <el-button
+      :disabled="btnDisable"
+      @click="open(props.selectionCell)"
+    >
+      测试
+    </el-button>
+
+    <MDialog
+      v-model="dialogVisible"
+      draggable
+      title="批量修改"
+      resize
+      @closed="closed"
+    >
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        labelWidth="80px"
+      >
+        <div class="u-box">
+          <div class="u-row">
+            <div class="u-col">
+              <el-form-item
+                label="修改项目"
+                prop="modifyItem"
+              >
+                <el-select
+                  v-model="ruleForm.modifyItem"
+                  placeholder="请选择修改项目"
+                  filterable
+                >
+                  <el-option
+                    v-for="item in modifyItemOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="u-row">
+            <div class="u-col">
+              <el-form-item
+                label="修改内容"
+                prop="modifyContent"
+              >
+                <el-input
+                  v-if="modifyContentType === 'string'"
+                  v-model="ruleForm.modifyContent"
+                  placeholder="请输入修改内容"
+                  clearable
+                />
+                <MInputNumber
+                  v-else-if="modifyContentType === 'number'"
+                  v-model="ruleForm.modifyContent"
+                  placeholder="请输入修改内容"
+                  clearable
+                />
+              </el-form-item>
+            </div>
+          </div>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button
+            type="primary"
+            @click="submit"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </MDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { MDialog } from 'packages/MDialog'
+import { MInputNumber } from 'packages/MInputNumber'
+
+const props = withDefaults(defineProps<{
+  /** 选中列 */
+  selectionCell?: string;
+  /** 组件大小 */
+  size?: 'small' | 'large' | '';
+  /** 表格数据 */
+  tableData?: Record<string, any>[];
+  /** 表格列配置 */
+  tableTitle?: TableTitle[];
+}>(), {
+  selectionCell: '',
+  size: '',
+  tableData: () => [],
+  tableTitle: () => []
+})
+
+const tableData = ref<Record<string, any>[]>(props.tableData)
+const dialogVisible = ref<boolean>(false)
+
+const emit = defineEmits<{
+  'update:tableData': [data: Record<string, any>[]];
+}>()
+
+const submit = () => {
+  tableData.value.forEach(item => {
+    item[ruleForm.modifyItem] = ruleForm.modifyContent
+  })
+  dialogVisible.value = false
+  emit('update:tableData', tableData.value)
+}
+interface RuleFormType {
+  /** 修改项目 */
+  modifyItem: string;
+  /** 修改内容 */
+  modifyContent: string;
+}
+const modifyItemOptions = computed<Option[]>(() => {
+  return props.tableTitle.filter(item => item.isBatchEdit).map(item => ({
+    label: item.label ?? '',
+    value: item.prop as string ?? ''
+  }))
+})
+const btnDisable = computed(() => {
+  return !modifyItemOptions.value.some(item => item.value === props.selectionCell)
+})
+const ruleForm: RuleFormType = reactive<RuleFormType>({
+  modifyItem: '',
+  modifyContent: ''
+})
+const rules = {
+  modifyItem: [
+    { required: true, message: '请选择修改项目', trigger: 'change' }
+  ],
+  modifyContent: [
+    { required: true, message: '请输入修改内容', trigger: 'blur' }
+  ]
+}
+
+const modifyContentType = computed(() => {
+  const dataRow = tableData.value
+    .map(item => item)
+    .reverse()
+    .find((item, index) => {
+      return (item[ruleForm.modifyItem] !== '' && item[ruleForm.modifyItem] !== null && item[ruleForm.modifyItem] !== undefined) || index === 0
+    })
+  const data = dataRow ? dataRow[ruleForm.modifyItem] : ''
+
+  if (typeof data === 'number') return 'number'
+  if (typeof data === 'string') return 'string'
+  return 'string'
+})
+const open = (key: string = '') => {
+  dialogVisible.value = true
+  ruleForm.modifyItem = key
+}
+const closed = () => {
+  ruleForm.modifyItem = ''
+  ruleForm.modifyContent = ''
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

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,31 +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?: Record<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',
@@ -62,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)
@@ -149,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 || '']))
@@ -179,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/index.ts

@@ -4,7 +4,7 @@ import { TabPagePlugin } from './TabPage'
 import { MInputNumberPlugin } from './MInputNumber'
 import { MInlinePlugin } from './MInline'
 import { SkinConfigPlugin } from './SkinConfig'
-import { MTablePlugin } from './MTable'
+import { MTablePlugin, MBatchEditPlugin } from './MTable'
 import { MTableColumnPlugin } from './MTableColumn'
 import { MTableColumnSetPlugin } from './MTableColumnSet'
 import { MSelectPlugin, MOptionPlugin } from './MSelect'
@@ -35,6 +35,7 @@ const BrPlugin: Plugin = {
     MInlinePlugin.install?.(app)
     SkinConfigPlugin.install?.(app)
     MTablePlugin.install?.(app)
+    MBatchEditPlugin.install?.(app)
     MTableColumnPlugin.install?.(app)
     MTableColumnSetPlugin.install?.(app)
     MSelectPlugin.install?.(app)

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"},"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-batch-edit":{"attributes":["selectionCell","size","tableData","tableTitle","update:tableData"],"description":"这是一个MBatchEdit"},"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: {