表格优化提交

io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@@ -286,6 +286,7 @@ const props = defineProps({
   primaryKey: { type: String, default: 'id' }, // 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
   foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
   orderBy: { type: String, default: 'order' }, // 拖拽排序时传给后端修改的字段名称
+  refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
   sortBy: {
     // 默认排序字段，示例：['userName', '-lastModifyDate']，其中“-”开头表示倒序。
     type: Array,
@@ -589,7 +590,11 @@ const remove = () => {
     .then((resp) => {
       emit('afterRemove', resp);
       NotifyManager.info(t('tip.operationSuccess'));
+      if (props.refreshData || !props.tree) {
         onRequest({ pagination: state.pagination });
+      } else {
+        removeRows(resp.data);
+      }
     })
     .catch((error) => {
       console.error(error);
@@ -1508,49 +1513,86 @@ const onRequest = async (ops: any) => {
   }
   state.pagination.sortBy = ops.pagination.sortBy;
   state.pagination.descending = ops.pagination.descending;
-  addRowKey(table.rows);
+  setRowDataExtraProperty(table.rows);
   stickyHeaderColumn(100);
   emit('afterRequestData');
   table.treeExpand = false;
 };
 
-const addRowKey = (rows: []) => {
+/**
+ * 行数据附加属性名称
+ */
+const rowDataExtraPropertyName = {
+  rowKey: rowKey_, // 前端行数据ID
+  ticked: table.tickedField, // 行数据勾选状态
+  selected: table.selectedField, // 行数据选中状态
+  expand: 'expand', // 树表格行数据展开状态
+  tickedCount: '_tickedCount', // 行数据用于处理父节点勾选状态的属性（记录自身勾选数量，要么为0要么为1）
+  childrenTickedCount: '_childrenTickedCount', // 行数据用于处理父节点勾选状态的属性（记录子节点勾选数量）
+};
+/**
+ * 初始化行数据附加属性
+ * @param rowData 行数据对象
+ */
+const initRowDataExtraProperty = (rowData) => {
+  rowData[rowDataExtraPropertyName.rowKey] = Tools.uuid();
+  rowData[rowDataExtraPropertyName.ticked] = rowData[rowDataExtraPropertyName.ticked] || false;
+  rowData[rowDataExtraPropertyName.selected] = rowData[rowDataExtraPropertyName.selected] || false;
+  if (props.tree && Tools.isEmpty(rowData[rowDataExtraPropertyName.expend])) {
+    rowData[rowDataExtraPropertyName.expend] = false;
+  }
+};
+/**
+ * 设置行数据附加属性
+ * @param rows 数据行集合
+ */
+const setRowDataExtraProperty = (rows: []) => {
   if (rows && rows.length > 0) {
     rows.forEach((item: any, index) => {
-      item[rowKey_] = Tools.uuid();
+      initRowDataExtraProperty(item);
-      if (item[table.tickedField] === true) {
+      if (item[rowDataExtraPropertyName.ticked] === true) {
-        item['_tickedCount'] = 1;
+        item[rowDataExtraPropertyName.tickedCount] = 1;
-      } else if (item['_tickedCount'] === false) {
+      } else if (item[rowDataExtraPropertyName.tickedCount] === false) {
-        item['_tickedCount'] = 0;
+        item[rowDataExtraPropertyName.tickedCount] = 0;
       } else {
-        item['_tickedCount'] = 0;
+        item[rowDataExtraPropertyName.tickedCount] = 0;
-      }
-      item[table.tickedField] = item[table.tickedField] || false;
-      item[table.selectedField] = item[table.selectedField] || false;
-      if (props.tree) {
-        item['expand'] = false;
       }
       if (props.tree && item.children && item.children.length > 0) {
-        addRowKey(item.children);
+        setRowDataExtraProperty(item.children);
-        item['_childrenTickedCount'] = 0;
+        item[rowDataExtraPropertyName.childrenTickedCount] = 0;
         item.children.forEach((child) => {
-          item['_childrenTickedCount'] += child['_tickedCount'];
+          item[rowDataExtraPropertyName.childrenTickedCount] += child[rowDataExtraPropertyName.tickedCount];
         });
-        if (item['_childrenTickedCount'] === 0) {
+        if (item[rowDataExtraPropertyName.childrenTickedCount] === 0) {
-          item[table.tickedField] = false;
+          item[rowDataExtraPropertyName.ticked] = false;
-          item['_tickedCount'] = 0;
+          item[rowDataExtraPropertyName.tickedCount] = 0;
-        } else if (item['_childrenTickedCount'] === item.children.length) {
+        } else if (item[rowDataExtraPropertyName.childrenTickedCount] === item.children.length) {
-          item[table.tickedField] = true;
+          item[rowDataExtraPropertyName.ticked] = true;
-          item['_tickedCount'] = 1;
+          item[rowDataExtraPropertyName.tickedCount] = 1;
         } else {
-          item[table.tickedField] = null;
+          item[rowDataExtraPropertyName.ticked] = null;
-          item['_tickedCount'] = 0;
+          item[rowDataExtraPropertyName.tickedCount] = 0;
         }
       }
     });
   }
 };
 
+const addData = (rowData) => {
+  if (props.tree) {
+    addTreeRow(rowData);
+  } else {
+    addRow(rowData, false);
+  }
+};
+const updateData = (rowData) => {
+  rowData[rowKey_] = getSelectedRowsComputed.value[0][rowKey_];
+  if (getSelectedRowsComputed.value[0]['children']) {
+    rowData['children'] = getSelectedRowsComputed.value[0]['children'];
+  }
+  replaceRow(rowData);
+};
+
 const save = async () => {
   dialog.dialogButtons[0].loading = true;
   const formStatus = dialogFormRef.value.getStatus();
@@ -1600,7 +1642,13 @@ const save = async () => {
           emit('afterEditorDataSubmit', resp.data);
           NotifyManager.info(t('tip.operationSuccess'));
           dialogRef.value.hide();
+          if (props.refreshData || !props.tree) {
             onRequest({ pagination: state.pagination });
+          } else if (resp.data && (formStatus === PageStatusEnum.新增 || formStatus === 'clone' || formStatus === 'addTop' || formStatus === 'addChild')) {
+            addData(resp.data);
+          } else if (resp.data) {
+            updateData(resp.data);
+          }
         })
         .catch((error) => {
           const response = error?.response;
@@ -1702,7 +1750,7 @@ const setLocalData = (rows: any) => {
   } else {
     table.rows = rows;
   }
-  addRowKey(table.rows);
+  setRowDataExtraProperty(table.rows);
   state.pagination.rowsNumber = table.rows.length;
   stickyHeaderColumn();
 };
@@ -1722,8 +1770,22 @@ const replaceRow = (row) => {
   replaceRowHandler(table.rows, row);
 };
 
+const removeTreeRows = (arr, rowIds) => {
+  arr.forEach((item, index) => {
+    if (rowIds.includes(item[props.primaryKey])) {
+      arr.splice(index, 1);
+    } else if (item.children && item.children.length > 0) {
+      removeTreeRows(item.children, rowIds);
+    }
+  });
+};
+
 // 删除选中数据
 const removeRows = (rows) => {
+  if (props.tree) {
+    removeTreeRows(table.rows, rows);
+    setRowDataExtraProperty(table.rows);
+  } else {
     rows.forEach((item) => {
       table.rows.splice(
         table.rows.findIndex((v) => {
@@ -1734,6 +1796,7 @@ const removeRows = (rows) => {
     });
     state.pagination.rowsNumber = table.rows.length;
     stickyHeaderColumn();
+  }
 };
 // 新增一行数据
 const addRow = (row, index) => {
@@ -1742,14 +1805,32 @@ const addRow = (row, index) => {
   } else {
     table.rows.splice(index, 0, row);
   }
-  addRowKey(table.rows);
+  setRowDataExtraProperty(table.rows);
   state.pagination.rowsNumber = table.rows.length;
   stickyHeaderColumn();
 };
+// 新增树表格中的数据
+const addTreeRow = (row) => {
+  if (Tools.isEmpty(row[props.foreignKey])) {
+    table.rows.push(row);
+  } else {
+    const parent = getTreeRow(table.rows, row[props.foreignKey], true);
+    if (parent) {
+      if (parent['children'] && Array.isArray(parent['children'])) {
+        parent['children'].push(row);
+      } else {
+        parent['children'] = [row];
+      }
+    }
+    setRowDataExtraProperty(table.rows);
+  }
+};
 
-const getSelectRowsByFieldName = (arr, selectedRows, fieldName) => {
+const getSelectRowsByFieldName = (arr, selectedRows, fieldName, containsNullStatus: boolean = false) => {
   arr.forEach((item) => {
-    if (item[fieldName]) {
+    if (containsNullStatus && (item[fieldName] || item[fieldName] === null)) {
+      selectedRows.push(item);
+    } else if (item[fieldName]) {
       selectedRows.push(item);
     }
     if (props.tree && item.children && item.children.length > 0) {
@@ -1781,9 +1862,9 @@ const getSelectedRows = () => {
   return toRaw(selectedRows);
 };
 // 获得checkbox勾选的第一条记录
-const getTickedRow = () => {
+const getTickedRow = (containsNullStatus: boolean = false) => {
   const tickedRows = [];
-  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField);
+  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
   if (tickedRows && tickedRows.length > 0) {
     return toRaw(tickedRows)[0];
   } else {
@@ -1791,9 +1872,9 @@ const getTickedRow = () => {
   }
 };
 // 获得checkbox勾选的所有记录
-const getTickedRows = () => {
+const getTickedRows = (containsNullStatus: boolean = false) => {
   const tickedRows = [];
-  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField);
+  getSelectRowsByFieldName(table.rows, tickedRows, table.tickedField, containsNullStatus);
   return toRaw(tickedRows);
 };
 
@@ -2455,15 +2536,21 @@ const getCascadeChildrenData = (rows: [], propertyName) => {
 const getCascadeChildren = (propertyName: string) => {
   return getCascadeChildrenData([getSelectedRow()], propertyName);
 };
-const getRow = (arr, key, parent) => {
+/**
+ * 获取树表格中的行记录
+ * @param arr 查找的记录集
+ * @param key 查找的 rowKey_
+ * @param parentFlag 根据 foreignKey 查找记录标识
+ */
+const getTreeRow = (arr, key, parentFlag: boolean) => {
   let result = undefined;
   for (let i = 0; i < arr.length; i++) {
     let item = arr[i];
-    if (parent ? item[props.primaryKey] === key : item[rowKey_] === key) {
+    if (parentFlag ? item[props.primaryKey] === key : item[rowKey_] === key) {
       result = item;
       break;
     } else if (item.children && item.children.length > 0) {
-      const temp = getRow(item.children, key, parent);
+      const temp = getTreeRow(item.children, key, parentFlag);
       if (temp) {
         result = temp;
       }
@@ -2474,7 +2561,7 @@ const getRow = (arr, key, parent) => {
 const getCascadeParentData = (row, propertyName) => {
   const data = <any>[];
   if (row && row[props.foreignKey]) {
-    const parent = getRow(table.rows, row[props.foreignKey], true);
+    const parent = getTreeRow(table.rows, row[props.foreignKey], true);
     if (parent) {
       data.push(propertyName ? parent[propertyName] : parent);
       if (parent[props.foreignKey]) {