修复部分问题

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

@@ -0,0 +1,23 @@
+<template>
+  <!-- <template v-if="typeof value === 'object' && value.componentType && col.value.bindModelValue">
+    <component :is="col.value.componentType" v-bind="col.value.attrs" v-model="props.getRow(table.rows, row[props.rowKey], false)[col.name]"></component>
+  </template>
+  <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
+    <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
+  </template>
+  <template v-else>
+    <span v-dompurify-html="!Tools.isEmpty(col.value) ? col.value : ''"></span>
+  </template> -->
+  111
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  value: {
+    type: [Object, String, Number],
+    default: () => {
+      return '';
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <q-tr v-for="(appendRow, rowIndex) in props.grid.props.appendRows" :key="rowIndex" :no-hover="true" :class="''">
+    <q-td v-for="(col, colIndex) in appendRow" :key="colIndex" :rowspan="col['rowSpan'] ? col['rowSpan'] : 1" :colspan="col['colSpan'] ? col['colSpan'] : 1">
+      <template v-if="typeof col['value'] === 'function'">
+        <GridAppendContent :value="col.value({ grid: props.grid, rows: props.grid.getRows() })"></GridAppendContent>
+      </template>
+      <template v-else>
+        <span v-dompurify-html="!Tools.isEmpty(col['value']) ? col['value'] : ''"></span>
+      </template>
+    </q-td>
+  </q-tr>
+</template>
+
+<script setup lang="ts">
+import { Tools } from '@/platform';
+import GridAppendContent from './GridAppendContent.vue';
+
+const props = defineProps({
+  grid: {
+    // 表格实例
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>

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

@@ -33,7 +33,7 @@
       @drop="draggableComputed ? onDrop($event, scope) : () => {}"
       @dragstart="draggableComputed ? onDragStart($event, scope) : () => {}"
     >
-      <q-td v-if="table.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
+      <q-td v-if="table.checkboxSelection && props.grid.props.selectedMode !== selectedMode.none" class="text-center" style="padding: 0; width: 50px">
         <q-checkbox
           v-model="props.getRow(table.rows, scope.row[props.rowKeyName], false)[table.tickedField]"
           flat
@@ -54,6 +54,7 @@
         ></GridTd>
       </template>
     </q-tr>
+    <GridAppendRow v-if="showAppendRowsComputed" :grid="props.grid"></GridAppendRow>
     <GridEditToolbar
       :grid="props.grid"
       :url="props.url"
@@ -73,6 +74,7 @@ import { draggableImage, draggableMode, selectedMode } from './ts/grid';
 import TreeGridRow from './TreeGridRow.vue';
 import GridTd from './GridTd.vue';
 import GridEditToolbar from './GridEditToolbar.vue';
+import GridAppendRow from './GridAppendRow.vue';
 
 const trRef = ref();
 const props = defineProps({
@@ -178,6 +180,27 @@ const setTreeRowComponentRef = (el, row) => {
   }
 };
 
+const checkLastRow = (row) => {
+  if (props.grid.props.tree && row['expand'] && !Tools.isEmpty(row.children) && row.children.length > 0) {
+    const childrenLastRow = row.children[row.children.length - 1];
+    if (childrenLastRow['expand'] && !Tools.isEmpty(childrenLastRow.children) && childrenLastRow.children.length > 0) {
+      return checkLastRow(childrenLastRow);
+    } else {
+      return childrenLastRow[props.rowKeyName] === props.scope.row[props.rowKeyName];
+    }
+  } else {
+    return row[props.rowKeyName] === props.scope.row[props.rowKeyName];
+  }
+};
+
+const showAppendRowsComputed = computed(() => {
+  if (Array.isArray(props.grid.props.appendRows) && props.grid.props.appendRows.length > 0) {
+    const lastRow = table.rows[table.rows.length - 1];
+    return checkLastRow(lastRow);
+  }
+  return false;
+});
+
 const draggableComputed = computed(() => {
   if (
     props.grid.props.draggable &&
@@ -333,7 +356,7 @@ const onDrop = (e, scope) => {
       updateData.push(toRaw(item));
     }
   });
-  if (props.grid.props.draggable === draggableMode.remote && updateData.length > 0) {
+  if (props.grid.props.draggable === draggableMode.server && updateData.length > 0) {
     // 访问后端更新排序
     updates(updateData, () => {});
   }

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

@@ -56,7 +56,7 @@
             @click="
               () => {
                 table.checkboxSelection = true;
-                grid.stickyHeaderColumn(100);
+                grid.refreshStyle(100);
               }
             "
           />
@@ -69,7 +69,7 @@
             @click="
               () => {
                 table.checkboxSelection = false;
-                grid.stickyHeaderColumn(100);
+                grid.refreshStyle(100);
               }
             "
           />
@@ -95,7 +95,7 @@
                 () => {
                   table.columns[0].hidden = false;
                   table.sortNo = true;
-                  grid.stickyHeaderColumn(100);
+                  grid.refreshStyle(100);
                 }
               "
             />
@@ -109,7 +109,7 @@
                 () => {
                   table.columns[0].hidden = true;
                   table.sortNo = false;
-                  grid.stickyHeaderColumn(100);
+                  grid.refreshStyle(100);
                 }
               "
             />
@@ -183,7 +183,7 @@
           :options="stickyOptions"
           @update:model-value="
             () => {
-              grid.stickyHeaderColumn(500);
+              grid.refreshStyle(500);
             }
           "
         >
@@ -204,7 +204,7 @@
             dense
             @update:model-value="
               () => {
-                grid.stickyHeaderColumn(100);
+                grid.refreshStyle(100);
               }
             "
           />

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

@@ -2,14 +2,20 @@
   <template v-if="columnTitleState.columnTitleRowNum > 1">
     <q-tr v-for="(r, rIndex) in columnTitleState.columnTitleArr" :key="rIndex">
       <q-th
-        v-if="rIndex === 0 && props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree"
+        v-if="
+          rIndex === 0 &&
+          props.selection === 'multiple' &&
+          table.checkboxSelection &&
+          !props.grid.props.tree &&
+          props.grid.props.selectedMode !== selectedMode.none
+        "
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
       >
         <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun" />
       </q-th>
       <q-th
-        v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree"
+        v-else-if="rIndex === 0 && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
         :rowspan="columnTitleState.columnTitleRowNum"
         :style="moreColumnTitleTableSelectionStyle"
       ></q-th>
@@ -35,19 +41,21 @@
       </q-th>
     </q-tr>
     <q-tr v-if="table.rows.length === 0" :style="props.noDataTrHeightStyle" class="noDataTr">
-      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle"><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td>
+      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle" style="border-bottom-width: 0px"
+        ><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td
+      >
     </q-tr>
   </template>
   <template v-else>
     <q-tr :props="scope">
       <q-th
-        v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree"
+        v-if="props.selection === 'multiple' && table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
         :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
       >
         <q-checkbox v-model="table.allTicked" flat :dense="props.denseHeader" @update:model-value="allTickedUpdateFun"
       /></q-th>
       <q-th
-        v-else-if="table.checkboxSelection && !props.grid.props.tree"
+        v-else-if="table.checkboxSelection && !props.grid.props.tree && props.grid.props.selectedMode !== selectedMode.none"
         :style="props.grid.props.tree ? '' : 'padding: 0; min-width: 50px;width: 50px;max-width:50px'"
       ></q-th>
       <template v-for="col in scope.cols" :key="col.name">
@@ -63,13 +71,16 @@
       </template>
     </q-tr>
     <q-tr v-if="table.rows.length === 0" :style="props.noDataTrHeightStyle" class="noDataTr">
-      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle"><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td>
+      <q-td :colspan="props.noDataTrColspan" align="center" valian="middle" style="border-bottom-width: 0px"
+        ><q-icon size="2em" name="info" />{{ $t('tip.noData') }}</q-td
+      >
     </q-tr>
   </template>
 </template>
 <script setup lang="ts">
 import { Tools } from '@/platform';
 import { computed, inject, reactive } from 'vue';
+import { selectedMode } from './ts/grid.ts';
 
 const props = defineProps({
   grid: {
@@ -163,11 +174,11 @@ const moreColumnTitleTableSelectionStyle = computed(() => {
 
 const moreColumnTitleTableSortNoStyle = computed(() => {
   if (table.checkboxSelection && table.sortNo && table.stickyNum > 0) {
-    return 'z-index: 3;position: sticky;left: var(--columnWidth-1-1);width: 50px;min-width:50px;max-width:50px;';
+    return 'font-weight: bold;z-index: 3;position: sticky;left: var(--columnWidth-1-1);width: 50px;min-width:50px;max-width:50px;';
   } else if (table.sortNo && table.stickyNum > 0) {
-    return 'z-index: 3;position: sticky;left: 0px;width: 50px;min-width:50px;max-width:50px;';
+    return 'font-weight: bold;z-index: 3;position: sticky;left: 0px;width: 50px;min-width:50px;max-width:50px;';
   }
-  return 'width: 50px;min-width:50px;max-width:50px;';
+  return 'font-weight: bold;width: 50px;min-width:50px;max-width:50px;';
 });
 
 const allTickedUpdateFun = (value, evt) => {
@@ -371,6 +382,9 @@ const thStyleHandler = (c: any, scope: any) => {
       }
     }
   }
+  if (c['name'] === table.columns[table.columns.length - 1]['name']) {
+    style += 'border-right-width: 0px;';
+  }
   return style;
 };
 

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

@@ -1,9 +1,11 @@
 <template>
   <q-td
+    v-if="rowSpanIsFirstComputed"
     :key="col.name"
     :props="scope"
     :title="col.classes?.indexOf('truncate') > -1 && !Tools.isEmpty(value) && typeof value !== 'object' ? value : ''"
     :class="props.grid.props.selectedMode === selectedMode.cell ? tdClassComputed : ''"
+    :rowspan="rowSpanComputed"
     @click="
       () => {
         if (table && props.grid.props.selectedMode === selectedMode.cell) {
@@ -89,6 +91,28 @@ const getComponentRef = () => {
   return componentRef.value;
 };
 
+const rowSpanComputed = computed(() => {
+  if (Object.keys(table.mergeRecords).length > 0) {
+    const column = table.mergeRecords[props.col['name']];
+    if (column && column[props.scope['row'][props.col['name']]].length > 1) {
+      return column[props.scope['row'][props.col['name']]].length;
+    }
+  }
+  return 1;
+});
+
+const rowSpanIsFirstComputed = computed(() => {
+  if (Object.keys(table.mergeRecords).length > 0) {
+    const column = table.mergeRecords[props.col['name']];
+    if (props.col['name'] === '_sortNo_') {
+      return true;
+    } else if (column && column[props.scope['row'][props.col['name']]].length > 1) {
+      return props.scope['row'][props.rowKeyName] === column[props.scope['row'][props.col['name']]][0];
+    }
+  }
+  return true;
+});
+
 const tdClassComputed = computed(() => {
   const tdClass = <any>[];
   if (props.grid.props.selectedMode === selectedMode.cell) {

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

@@ -731,7 +731,7 @@ const onDrop = (e, dataRow) => {
   resetOrder(e, table.dragRecords, table.rows, dataRow);
 
   // 请求后端更新排序
-  if (props.grid.props.draggable === draggableMode.remote && updateOrderData?.length > 0) {
+  if (props.grid.props.draggable === draggableMode.server && updateOrderData?.length > 0) {
     props.updates(updateOrderData);
   }
 
@@ -739,7 +739,7 @@ const onDrop = (e, dataRow) => {
 };
 
 const click = (evt, row, rowIndex) => {
-  if (table.bodyEditStatus === 'none') {
+  if (table.bodyEditStatus === 'none' && props.grid.props.selectedMode !== selectedMode.none) {
     if (!evt.ctrlKey) {
       props.grid.clearSelected();
     }

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

@@ -123,7 +123,7 @@ import GridBody from './GridBody.vue';
 import GridPagination from './GridPagination.vue';
 import GridEditor from './GridEditor.vue';
 import GridView from './GridView.vue';
-import { selectedMode as selectedMode_ } from './ts/grid.ts';
+import { selectedMode as selectedMode_, getMergeColumns, sortByProperties } from './ts/grid.ts';
 
 import { columnDefaultProps } from './ts/grid.ts';
 
@@ -177,6 +177,13 @@ const props = defineProps({
   foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
   refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
   dbClickOperation: { type: String, default: 'view' }, // 默认的双击操作：可填写内置或自定义按钮name，执行的操作为按钮对应的click，固定值提供：expand(展开双击的行)、none(双击不执行任何动作)
+  appendRows: {
+    // 表格追加行，添加到当前表格数据行尾，可添加多行，支持跨行跨列配置，用于添加合计或者额外信息。
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
   sortBy: {
     type: Array,
     default: () => {
@@ -321,7 +328,8 @@ const rawColumns = ref(props.columns);
 const tableColumnsMap = ref(arrayToMap('name', rawColumns.value));
 const rowKey_ = '_rowKey_'; // 行数据中前端附加的UUID字段名
 const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
-const tableColumns = ref(columnDefaultProps(rawColumns.value));
+const tableColumns = ref(columnDefaultProps(rawColumns.value, props.sortNo));
+const mergeColumns = getMergeColumns(tableColumns.value);
 const url = {
   dataUrl: props.dataUrl,
   fetchDataUrl: props.fetchDataUrl,
@@ -338,7 +346,7 @@ watch(
   () => props.columns,
   (newVal, oldVal) => {
     rawColumns.value = newVal;
-    tableColumns.value = columnDefaultProps(rawColumns.value);
+    tableColumns.value = columnDefaultProps(rawColumns.value, props.sortNo);
     table.columns = tableColumns.value;
     if (tableColumns.value && tableColumns.value.length > rawColumns.value.length) {
       headerRef.value?.handlerMoreRowColumnTitle();
@@ -382,6 +390,7 @@ const table = reactive({
   inFullscreen: false, // 表格当前是否为全屏模式
   bodyEditStatus: 'none', // 表格内容区编辑状态：none(不处于编辑状态)、rowEdit(行编辑状态)、rowsEdit(所有行编辑状态)
   cellSelected: {}, // 单元格选中记录
+  mergeRecords: {}, // 行数据合并记录
 });
 provide('table', table);
 
@@ -559,7 +568,7 @@ const tableFullscreenFun = (value) => {
 };
 
 const rowClick = (evt: any, row: any, index: any) => {
-  if (table.bodyEditStatus === 'none') {
+  if (table.bodyEditStatus === 'none' && props.selectedMode !== selectedMode_.none) {
     // 非树形表格行点击选中与checkbox绑定，即行选中时checkbox也勾选，checkbox勾选时行选中。
     if (!evt.ctrlKey) {
       clearSelected();
@@ -574,7 +583,7 @@ const rowClick = (evt: any, row: any, index: any) => {
   }
 };
 const rowDbClick = (evt, row, index) => {
-  if (table.bodyEditStatus === 'none') {
+  if (table.bodyEditStatus === 'none' && props.selectedMode !== selectedMode_.none) {
     if (props.onRowDbClick) {
       emit('rowDbClick', { grid: instance, evt, row, index });
     } else if (props.dbClickOperation === 'view') {
@@ -618,13 +627,7 @@ const onResize = () => {
   }
 };
 
-type CriteriaType = {
-  fieldName: string;
-  operator: OperatorTypeEnum;
-  value: any;
-};
 let queryCriteria = { ...props.queryCriteria };
-
 const buildCriteria = (value, fieldName) => {
   const queryOperator = queryFormFieldsMap.get(fieldName)['queryOperator'];
   if (!Tools.isEmpty(queryOperator)) {
@@ -879,9 +882,15 @@ const initRowDataExtraProperty = (rowData) => {
  * @param rows 数据行集合
  */
 const setRowDataExtraProperty = (rows: []) => {
+  if (mergeColumns.length > 0 && !props.tree) {
+    // 如果存在需要合并的字段，并且不是树表格，重新对数据进行排序
+    table.mergeRecords = {};
+    sortByProperties(rows, mergeColumns);
+  }
   if (rows && rows.length > 0) {
     rows.forEach((item: any, index) => {
       initRowDataExtraProperty(item);
+      addMergeRecords(item);
       if (item[rowDataExtraPropertyName.ticked] === true) {
         item[rowDataExtraPropertyName.tickedCount] = 1;
       } else if (item[rowDataExtraPropertyName.tickedCount] === false) {
@@ -921,6 +930,26 @@ const setOldValue = (rowData) => {
     }
   });
 };
+/**
+ * name: { 上海: [2,4], 北京: [3,5,1] }
+ * desc: { 天安门: [5,1] }
+ */
+const addMergeRecords = (rowData) => {
+  if (mergeColumns.length > 0 && !props.tree) {
+    mergeColumns.forEach((columnName) => {
+      const tmpArr = [rowData[rowDataExtraPropertyName.rowKey]];
+      if (table.mergeRecords[columnName]) {
+        if (table.mergeRecords[columnName][rowData[columnName]]) {
+          table.mergeRecords[columnName][rowData[columnName]].push(rowData[rowDataExtraPropertyName.rowKey]);
+        } else {
+          table.mergeRecords[columnName][rowData[columnName]] = tmpArr;
+        }
+      } else {
+        table.mergeRecords[columnName] = { [rowData[columnName]]: tmpArr };
+      }
+    });
+  }
+};
 
 watchEffect(() => {
   url.dataUrl = props.dataUrl;

io.sc.platform.core.frontend/src/platform/components/grid/css/grid.css

@@ -6,7 +6,6 @@
 }
 .w-grid .q-table__top {
   padding: var(--tableTopPadding) var(--tableTopPadding);
-  border-bottom: 0px !important;
 }
 .w-grid .q-table__middle .q-table th {
   padding: var(--tableHeaderPadding) 8px;
@@ -16,7 +15,7 @@
   border-bottom-width: 1px;
 }
 .w-grid .q-table__middle .q-table th:last-child {
-  border-right-width: 0px;
+  border-right-width: 1px;
 }
 .w-grid .q-table__middle .q-table td {
   height: var(--tableBodyHeight);
@@ -56,7 +55,6 @@
   border-style: solid;
   border-left-width: 1px;
   border-right-width: 1px;
-  border-top-width: 1px;
   border-bottom-width: 1px;
 }
 

io.sc.platform.core.frontend/src/platform/components/grid/ts/grid.ts

@@ -1,14 +1,17 @@
 import { Tools, t } from '@/platform';
 
+// 拖拽排序模式
 export const draggableMode = {
-  local: 'local',
+  local: 'local', // 本地排序
-  remote: 'server',
+  server: 'server', // 服务端排序
 };
 export const draggableImage = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E`;
 
+// 选择模式
 export const selectedMode = {
-  row: 'row',
+  none: 'none', // 不允许选择
-  cell: 'cell',
+  row: 'row', // 行选择
+  cell: 'cell', // 单元格选择
 };
 
 // 列样式处理
@@ -53,10 +56,10 @@ const childrenHandler = (item: any, gridColumns: any) => {
 };
 
 // 列的默认属性
-export const columnDefaultProps = (columns: any, sortNo: boolean = true) => {
+export const columnDefaultProps = (columns: any, sortNo: boolean) => {
   const gridColumns = <any>[];
   if (columns && columns.length > 0) {
-    gridColumns.push({ name: '_sortNo_', align: 'center', label: t('rownum'), field: '_sortNo_', hidden: sortNo });
+    gridColumns.push({ name: '_sortNo_', align: 'center', label: t('rownum'), field: '_sortNo_', hidden: sortNo ? false : true });
     columns.forEach((item: any) => {
       childrenHandler(item, gridColumns);
     });
@@ -64,3 +67,30 @@ export const columnDefaultProps = (columns: any, sortNo: boolean = true) => {
   }
   return [];
 };
+
+// 获取所有需要合并的列名
+export const getMergeColumns = (columns) => {
+  const columnNames = <any>[];
+  if (columns && columns.length > 0) {
+    columns.forEach((item) => {
+      if (Tools.hasOwnProperty(item, 'autoMerge') && item['autoMerge']) {
+        columnNames.push(item['name']);
+      }
+    });
+  }
+  return columnNames;
+};
+
+export const sortByProperties = (arr, properties) => {
+  return arr.sort((a, b) => {
+    for (const prop of properties) {
+      if (a[prop] < b[prop]) {
+        return -1;
+      }
+      if (a[prop] > b[prop]) {
+        return 1;
+      }
+    }
+    return 0;
+  });
+};