Improved data editable check logic.

Author: gudaoxuri

docs/TableDemo.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import { onMounted, ref, toRaw } from 'vue'
-import { IwEvents, IwProps, IwUtils } from '../src'
+import type { Ref } from 'vue';
+import { onMounted, ref, toRaw } from 'vue';
+import { IwEvents, IwProps, IwUtils } from '../src';
+import type { EditableDataResp } from '../src/props';
 
 const selectedRecordPks: Ref<any[]> = ref([])
 
@@ -300,11 +301,21 @@ const events: IwProps.TableEventProps = {
         records: attachDict(records),
         totalNumber: data.length,
         aggs: aggResult,
-        nonEditablePks: [1],
       }
     }
   },
 
+  loadEditableData: async (_checkRecordPks: any): Promise<EditableDataResp> => {
+    return {
+      whiteListMode: true,
+      cells: {
+        1: ['name', 'creator', 'stats', 'planStartTime', 'planEndTime', 'actualStartTime', 'actualEndTime', 'disabled', 'attachment'],
+        11: ['name'],
+        17: ['name'],
+      },
+    }
+  },
+
   newData: async (newRecords: { [columnName: string]: any }[]): Promise<void> => {
     // TODO targetSortValue
     DATA.push(...newRecords)

src/components/eventbus.ts

@@ -2,7 +2,8 @@ import type { Ref } from 'vue'
 import { toRaw } from 'vue'
 import locales from '../locales'
 
-import { type DataGroupResp, type DataQuerySliceReq, type DataResp, type DictItemsResp, type LayoutModifyProps, type SimpleLayoutProps, type TableStyleModifyProps, generateLayoutProps } from '../props'
+import type { DataGroupResp, DataQuerySliceReq, DataResp, DictItemsResp, EditableDataResp, LayoutModifyProps, SimpleLayoutProps, TableStyleModifyProps } from '../props'
+import { generateLayoutProps } from '../props'
 
 import { SubDataShowKind } from '../props/enumProps'
 import type { TableEventProps } from '../props/eventProps'
@@ -264,6 +265,32 @@ export async function deleteData(deletedRecordPks: any[]) {
   })
 }
 
+/**
+ * 加载可编辑数据
+ *
+ * Load editable data
+ *
+ * @param checkRecordPks 要检查的数据主键 / Data primary keys to be checked
+ */
+export async function loadEditableData(checkRecordPks: any[]): Promise<EditableDataResp> {
+  checkRecordPks = toRaw(checkRecordPks)
+
+  const layout = layoutsConf.find(layout => layout.id === currentLayoutId.value)!
+
+  if (!events.loadEditableData) {
+    showAlert(t('_.event.notConfigured', { name: 'loadEditableData' }), 2, AlertKind.WARNING, getParentWithClass(document.getElementById(`iw-tt-layout-${layout.id}`), 'iw-tt')!)
+    throw new Error('[events.loadEditableData] Event not Configured')
+  }
+
+  try {
+    return await events.loadEditableData(checkRecordPks)
+  }
+  catch (e: any) {
+    showAlert(t('_.event.invokeError', { msg: e.message }), 6, AlertKind.ERROR, getParentWithClass(document.getElementById(`iw-tt-layout-${layout.id}`), 'iw-tt')!)
+    throw new Error(`[events.loadEditableData] Invoke Error:${e.message}`)
+  }
+}
+
 /**
  * 选择数据
  *

src/components/function/CellEdit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import type { EditDataProps } from '../../props'
+import type { EditDataProps, EditableDataResp } from '../../props'
 import type { DataGroupResp, DataResp } from '../../props/basicProps'
 import { DataKind, getInputTypeByDataKind } from '../../props/enumProps'
 import { delegateEvent } from '../../utils/basic'
@@ -45,6 +45,10 @@ const props = defineProps<{
 // Edit container, used to display edit function
 const cellEditContainerRef = ref<InstanceType<typeof HTMLElement>>()
 
+// 可编辑数据
+// Editable data
+const editableDataResp = ref<EditableDataResp>()
+
 // 当前正在编辑的列配置
 // Column configuration currently being edited
 const curColumnConf = ref<ColumnConf>()
@@ -125,30 +129,31 @@ async function setValue(value: any) {
  * Check if it is editable
  *
  * 逻辑：
- * 1. 优先看返回数据的要求：
- *    1. 如果存在不可编辑的数据行的主键，且当前主键值在不可编辑主键值列表中，则不可编辑
- *    2. 如果存在可编辑的数据行的主键，且当前主键值不在可编辑主键值列表中，则不可编辑
+ * 1. 优先看可编辑数据：
+ *    1. 白名单模式 且 存在行列，返回可编辑
+ *    2. 黑名单模式 且 不存在行列，返回可编辑
+ *    3. 其他情况返回不可编辑
  * 2. 最后看配置的列是否可编辑
  *
  * Logic:
- * 1. First look at the requirements of the returned data:
- *   1. If there are primary keys of data rows that cannot be edited, and the current primary key value is in the list of primary keys that cannot be edited, it cannot be edited
- *   2. If there are primary keys of data rows that can be edited, and the current primary key value is not in the list of primary keys that can be edited, it cannot be edited
- * 2. Finally, see if the configured column is editable
+ * 1. Check editable data first:
+ *   1. White list mode and row-column exist, return editable
+ *   2. Blacklist mode and row-column do not exist, return editable
+ *   3. Return not editable in other cases
+ * 2. Finally check if the configured column is editable
  *
- * @param data 数据 / Data
  * @param pkValue 主键值 / Primary key value
- * @param columnConf 列配置 / Column configuration
+ * @param columnName 列名称 / Column name
+ * @param editable 可编辑数据，用于进一步限定编辑范围 / Editable data, used to further limit the editing range
  * @returns 是否可编辑 / Whether it is editable
  */
-function checkEditable(data: DataResp, pkValue: any, columnConf: ColumnConf) {
-  if (data.nonEditablePks?.includes(pkValue)) {
-    return false
+function checkEditable(pkValue: any, columnName: string, editable?: EditableDataResp): boolean {
+  if (editable) {
+    return editable.cells[pkValue]?.includes(columnName) && editable.whiteListMode
   }
-  if (data.editablePks && !data.editablePks.includes(pkValue)) {
-    return false
+  else {
+    return props.edit.enabledColumnNames.includes(columnName) ?? false
   }
-  return props.edit.enabledColumnNames.includes(columnConf.name) ?? false
 }
 
 /**
@@ -176,15 +181,14 @@ function markEditable(containerEle: HTMLElement) {
     // Find row information
     const editRowEle = ele as HTMLElement
     const pkValue = props.pkKindIsNumber ? Number.parseInt(editRowEle.dataset[props.editRowPkValueProp]!) : editRowEle.dataset[props.editRowPkValueProp]!
-    const data: DataResp = Array.isArray(props.data) ? props.data.find(groupData => groupData.records.some(record => record[props.pkColumnName] === pkValue))! : props.data
 
     editRowEle.querySelectorAll(`.${props.editCellClass}`).forEach((ele) => {
       // 找到单元格信息，并附加可编辑标记
       // Find cell information and attach editable mark
       const editCellEle = ele as HTMLElement
       const columnName = editCellEle.dataset[props.editCellColumnNameProp] as string
       const columnConf = props.columnsConf.find(column => column.name === columnName)!
-      if (checkEditable(data, pkValue, columnConf)) {
+      if (checkEditable(pkValue, columnConf.name, editableDataResp.value)) {
         editCellEle.appendChild(editableMarkEles.cloneNode(true))
       }
     })
@@ -193,8 +197,10 @@ function markEditable(containerEle: HTMLElement) {
 
 // 监听配置变化，重新标记可编辑单元格
 // Listen for configuration changes and re-mark editable cells
-watch([() => props.columnsConf, () => props.data], () => {
+watch([() => props.columnsConf, () => props.data], async () => {
   if (props.edit.markEditable) {
+    const pks: any[] = Array.isArray(props.data) ? props.data.flatMap(d => d.records.map(r => r[props.pkColumnName])) : props.data.records.map(r => r[props.pkColumnName])
+    editableDataResp.value = await eb.loadEditableData(pks)
     markEditable(cellEditContainerRef.value!.closest(`.${props.containerClass}`) as HTMLElement)
   }
 })
@@ -213,7 +219,7 @@ onMounted(() => {
     const columnConf = props.columnsConf.find(column => column.name === columnName)!
     const pkValue = props.pkKindIsNumber ? Number.parseInt(editRowEle.dataset[props.editRowPkValueProp]!) : editRowEle.dataset[props.editRowPkValueProp]!
     const data: DataResp = Array.isArray(props.data) ? props.data.find(groupData => groupData.records.some(record => record[props.pkColumnName] === pkValue))! : props.data
-    if (checkEditable(data, pkValue, columnConf)) {
+    if (checkEditable(pkValue, columnConf.name, editableDataResp.value)) {
       const value = data.records.find(record => record[props.pkColumnName] === pkValue)![columnName]!
       enterEditMode(value, pkValue, columnConf, editCellEle)
     }

src/events.ts

@@ -4,7 +4,7 @@
  */
 
 import * as eb from './components/eventbus'
-import type { DataQuerySliceReq, DictItemsResp, LayoutModifyProps, SimpleLayoutProps, TableStyleModifyProps } from './props'
+import type { LayoutModifyProps, SimpleLayoutProps, TableStyleModifyProps } from './props'
 
 /**
  * 加载数据
@@ -76,33 +76,6 @@ export async function selectData(selectedRecordPks: any[]) {
   await eb.selectData(selectedRecordPks)
 }
 
-/**
- * 加载字典项列表
- *
- * Load dictionary item list
- *
- * @param dictName 字典名 / Dictionary name
- * @param filterValue 过滤值 / Filter value
- * @param slice 分片 / Slice
- * @returns 字典项列表 / Dictionary item list
- */
-export async function loadCellDictItems(dictName: string, filterValue?: any, slice?: DataQuerySliceReq): Promise<DictItemsResp> {
-  return await eb.loadCellDictItems(dictName, filterValue, slice)
-}
-
-/**
- * 加载多条件字典项列表
- *
- * Load multi-condition dictionary item list
- *
- * @param conds 条件 / Conditions
- * @param slice 分片 / Slice
- * @returns 字典项列表 / Dictionary item list
- */
-export async function loadCellDictItemsWithMultiConds(conds: { [dictName: string]: any[] }, slice?: DataQuerySliceReq): Promise<{ [dictName: string]: DictItemsResp }> {
-  return await eb.loadCellDictItemsWithMultiConds(conds, slice)
-}
-
 /**
  * 修改样式
  *

src/props/basicProps.ts

@@ -30,26 +30,6 @@ export interface DataResp {
    * Total number
    */
   totalNumber: number
-  /**
-   * 不可编辑的数据行的主键
-   *
-   * Primary key of non-editable data row
-   *
-   * 最高优先级
-   *
-   * Highest priority
-   */
-  nonEditablePks?: any[]
-  /**
-   * 可编辑的数据行的主键
-   *
-   * Primary key of editable data row
-   *
-   * 优先级低于 nonEditablePks
-   *
-   * Priority lower than nonEditablePks
-   */
-  editablePks?: any[]
 }
 
 /**

src/props/eventProps.ts

@@ -4,7 +4,7 @@
 
 import type { DataGroupResp, DataResp, DictItemsResp } from './basicProps'
 import type { LayoutKind } from './enumProps'
-import type { AggDataProps, DataQuerySliceReq, FilterDataProps, GroupDataProps, SortDataProps } from './functionProps'
+import type { AggDataProps, DataQuerySliceReq, EditableDataResp, FilterDataProps, GroupDataProps, SortDataProps } from './functionProps'
 import type { LayoutModifyProps, LayoutProps, TableStyleModifyProps } from './kernelProps'
 
 /**
@@ -55,14 +55,14 @@ export interface TableEventProps {
    */
   newData?: (newRecords: { [columnName: string]: any }[]) => Promise<void>
 
-    /**
-     * 复制数据
-     *
-     * Copy data
-     *
-     * @param targetRecordPks 要复制的数据主键 / Data primary keys to be copied
-     */
-    copyData?: (targetRecordPks: any[]) => Promise<void>
+  /**
+   * 复制数据
+   *
+   * Copy data
+   *
+   * @param targetRecordPks 要复制的数据主键 / Data primary keys to be copied
+   */
+  copyData?: (targetRecordPks: any[]) => Promise<void>
 
   /**
    * 修改数据
@@ -84,6 +84,15 @@ export interface TableEventProps {
    */
   deleteData?: (deletedRecordPks: any[]) => Promise<void>
 
+  /**
+   * 加载可编辑数据
+   *
+   * Load editable data
+   *
+   * @param checkRecordPks 要检查的数据主键 / Data primary keys to be checked
+   */
+  loadEditableData?: (checkRecordPks: any[]) => Promise<EditableDataResp>
+
   /**
    * 选择数据
    *

src/props/functionProps.ts

@@ -503,3 +503,27 @@ export function generateEditDataProps(tableSimple?: SimpleEditDataProps, layoutS
     markEditable: layoutSimple?.markEditable ?? tableSimple?.markEditable ?? false,
   }
 }
+
+/**
+ * 编辑数据返回对象
+ *
+ * Edit data response object
+ */
+export interface EditableDataResp {
+  /**
+   * 白名单模式，该模式下只有在此列表中的行列才会被编辑
+   *
+   * White list mode, in this mode, only rows and columns in this list will be edited
+   */
+  whiteListMode: boolean
+  /**
+   * 行列
+   *
+   * Rows and columns to be edited
+   *
+   * 格式：{行主键: 列名[]}
+   *
+   * Format: {row primary key: column name[]}
+   */
+  cells: { [pk: string | number]: string[] }
+}