修复表格组件最右侧边框线重叠问题

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

@@ -23,7 +23,7 @@
         :rowspan="c.rowspan"
         :colspan="c.colspan"
         :style="thStyleHandler(c)"
-        :class="c.classes"
+        :class="thClassHandle(c)"
         :props="tools.titleFM.multiTitleThPropsHandle(c, props.scope)"
         style="font-weight: bold"
         :title="c.title"
@@ -54,7 +54,7 @@
         <q-th
           :props="scope"
           :style="col.style + (col.name === '_sortNo_' ? 'padding: 0; min-width: 50px;width: 50px;max-width:50px' : '')"
-          :class="col.classes"
+          :class="thClassHandle(col)"
           style="font-weight: bold"
           :title="col.title"
         >
@@ -228,6 +228,13 @@ const thStyleHandler = (c: any) => {
   return style;
 };
 
+const thClassHandle = (c: any) => {
+  if (tools.titleFM.lastNames.value.includes(c.name)) {
+    return c.classes ? c.classes + ' no-right-border' : 'no-right-border';
+  }
+  return c.classes;
+};
+
 /**
  * 复选框 th 样式
  */

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

@@ -102,7 +102,6 @@ watch(
   (newVal, oldVal) => {
     tools.table.originalColumns = newVal;
     tools.table.columns = Init.initColumn(tools.table.originalColumns, props);
-    tools.table.store.multiHeaderLastNames = Init.getMultiHeaderLastNames(props.columns);
     if (tools.table.columns && tools.table.columns.length > tools.table.originalColumns.length) {
       tools.titleFM.handleColumnTitle();
     }

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

@@ -50,6 +50,9 @@
 .w-grid .q-table--vertical-separator tbody tr td:last-child {
   border-right: 0;
 }
+.w-grid .q-table--vertical-separator th.no-right-border {
+  border-right: 0;
+}
 /*
 * vertical
 * 数据最后一行底部边框
@@ -78,6 +81,12 @@
   border-left: 0;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
+.w-grid .q-table--cell-separator tbody tr td:last-child {
+  border-right: 0;
+}
+.w-grid .q-table--cell-separator th.no-right-border {
+  border-right: 0;
+}
 /*
 * cell
 * 数据最后一行底部边框

io.sc.platform.core.frontend/src/platform/components/grid/extra/config/DisplayColumn.vue

@@ -5,10 +5,10 @@
         <template v-for="col in tools.table.columns" :key="col.name">
           <q-item v-if="showColumn(col.name)" v-ripple tag="label" dense>
             <q-item-section side>
-              <q-checkbox v-model="col.showIf" dense @update:model-value="updateModelValue" />
+              <q-checkbox v-model="col.showIf" dense @update:model-value="updateModelValue(col)" />
             </q-item-section>
             <q-item-section>
-              <q-item-label>{{ col.label + '_' + col.name }}</q-item-label>
+              <q-item-label>{{ col.label || col.name }}</q-item-label>
             </q-item-section>
           </q-item>
         </template>
@@ -18,6 +18,7 @@
 </template>
 <script setup lang="ts">
 import { inject } from 'vue';
+import { Tools, NotifyManager } from '@/platform';
 import { GridTools, Constant } from '../../ts/index';
 
 const modelValue = defineModel<boolean>();
@@ -28,7 +29,19 @@ const showColumn = (name) => {
   }
   return true;
 };
-const updateModelValue = () => {
+const updateModelValue = (col) => {
+  if (!col.showIf) {
+    const result = tools.table.columns.find((item) => {
+      if ((!Tools.hasOwnProperty(item, 'showIf') || item.showIf === true) && item.name !== Constant.FIELD_NAMES.SORT_NO) {
+        return true;
+      }
+    });
+    if (!result) {
+      NotifyManager.info('表格最少需要显示一列');
+      col.showIf = true;
+      return;
+    }
+  }
   tools.titleFM.handleColumnTitle();
   tools.opFM.resetStyleVariableValue(0);
 };

io.sc.platform.core.frontend/src/platform/components/grid/extra/config/StickyColumn.vue

@@ -15,7 +15,8 @@
         :options="stickyOptions"
         @update:model-value="
           () => {
-            tools.opFM.resetStyleVariableValue(500);
+            tools.titleFM.handleColumnTitle();
+            tools.opFM.resetStyleVariableValue(200);
           }
         "
       >

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

@@ -106,18 +106,6 @@ export class GridTools {
 
     const columns = Init.initColumn(props.columns, props);
 
-    /**
-     * 记录多表头每一列孩子层级最后一列集合的对象
-     * 列配置示例：[
-     *  { name: 'a', columns: [{ name: 'a1' },{ name: 'a2', columns: [{ name: 'a21' }, {name: 'a22'}]}] },
-     *  { name: 'b', columns: [{ name: 'b1' },{ name: 'b2'}] },
-     *  { name: 'c' }
-     * ]
-     * 存储结果：{ a: ['a2','a22'], b: ['b2'] }
-     * 用来处理锁定列时横行滚动，最后被锁定的列无右边框问题。
-     */
-    const multiHeaderLastNames = Init.getMultiHeaderLastNames(props.columns);
-
     this.table = reactive({
       originalColumns: [...props.columns],
       columns: columns,
@@ -180,9 +168,6 @@ export class GridTools {
         loadingLabelI18nKey: 'tip.dataLoading',
         bodyCellHeight: bodyCellHeight,
         resizeFlag: false,
-        multiHeaderLastNames: multiHeaderLastNames,
-        existXScroll: false,
-        existYScroll: false,
         location: {
           yLocation: 0,
           noDataTrYLocation: 0,

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

@@ -249,45 +249,4 @@ export class Init {
       }
     }
   }
-
-  // 获得多表头子列每层最后一列的名字集合
-  public static getMultiHeaderLastNames(columns: any) {
-    const multiHeaderLastNames = {};
-    if (columns && columns.length > 0) {
-      columns.forEach((item: any) => {
-        if (item.columns && item.columns.length > 0) {
-          const names = [];
-          Init.extractLastColumn(names, item.columns);
-          multiHeaderLastNames[item['name']] = names;
-        }
-      });
-    }
-    return multiHeaderLastNames;
-  }
-
-  // 根据列获取最后一层的最后一列的名字
-  public static getStickyLastName(column) {
-    // 如果对象没有columns属性，直接返回name
-    if (!column.columns) {
-      return column.name;
-    }
-
-    let currentLayer = column;
-    while (currentLayer.columns && currentLayer.columns.length > 0) {
-      // 更新当前层为最后一列的对象
-      currentLayer = currentLayer.columns[currentLayer.columns.length - 1];
-    }
-
-    return currentLayer.name;
-  }
-
-  // 提取多表头每一层级的最后一列
-  private static extractLastColumn = (names: any, columns: any) => {
-    const lastElement = columns[columns.length - 1];
-    names.push(lastElement.name);
-    // 如果最后一个元素有子列，则递归调用该函数
-    if (lastElement.columns && lastElement.columns.length > 0) {
-      Init.extractLastColumn(names, lastElement.columns);
-    }
-  };
 }

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

@@ -21,7 +21,7 @@ export class UpdateTicked extends Base {
       this.tools?.opFM.resetHeaderCheckbox();
       if (!row[tickedField]) {
         // 取消选中时将选中的单元格也清空
-        this.table.store.cellSelected = {};
+        this.table.store.cellSelected = undefined;
       }
       if (this.props.onUpdateTicked) {
         this.instance.emit(UpdateTicked.NAME, { grid: this.instance, evt, row });

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

@@ -35,6 +35,10 @@ export class ColumnTitle extends Base {
    * 被锁定的最顶层的列集合
    */
   stickyTopColumn: Ref = ref([]);
+  /**
+   * 最后一列名称集合
+   */
+  lastNames: Ref = ref([]);
 
   /**
    * 子列最大层级
@@ -133,6 +137,7 @@ export class ColumnTitle extends Base {
     });
 
     this.setStickyColumn();
+    this.setLastNames();
   }
 
   /**
@@ -200,6 +205,18 @@ export class ColumnTitle extends Base {
   private setStickyColumn() {
     this.stickyColumn.value = this.getStickyColumn();
   }
+  private setLastNames() {
+    const names = <any>[];
+    const lastColumnName = this.tools?.cm.displayColumns.value[this.tools.cm.displayColumns.value.length - 1];
+    if (lastColumnName) {
+      names.push(lastColumnName);
+      const parents = this.multiTitleMap.get(lastColumnName)?.parents;
+      if (parents) {
+        names.push(...parents);
+      }
+    }
+    this.lastNames.value = names;
+  }
 
   /**
    * 处理被固定的孩子列

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

@@ -122,11 +122,6 @@ export class Operator extends Base {
       this.table.store.location.middleScrollWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
       this.table.store.location.columnHeadHeight = tableElement.getElementsByTagName('thead')[0]?.clientHeight;
       this.table.store.location.hideHeaderNoDataHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-      const scrollHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollHeight;
-      if (scrollHeight > this.table.store.location.hideHeaderNoDataHeight) {
-        // 存在纵向滚动条
-        this.table.store.existYScroll = true;
-      }
       // 判断是否有数据，没数据修改 middleHeight
       if ((this.table.rows && this.table.rows.length > 0) || this.props.hideBottom) {
         this.table.store.location.middleHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
@@ -134,7 +129,6 @@ export class Operator extends Base {
         let scrollHeight = 0;
         if (this.table.store.location.middleScrollWidth - this.table.store.location.middleWidth > 0) {
           scrollHeight = 15;
-          this.table.store.existXScroll = true;
         }
         this.table.store.location.middleHeight = this.table.store.location.columnHeadHeight + scrollHeight;
       }
@@ -174,13 +168,6 @@ export class Operator extends Base {
         this.table.store.location.middleScrollWidth = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollWidth;
         this.table.store.location.columnHeadHeight = tableElement.getElementsByTagName('thead')[0]?.clientHeight;
         this.table.store.location.hideHeaderNoDataHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
-        const scrollHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.scrollHeight;
-        if (scrollHeight > this.table.store.location.hideHeaderNoDataHeight) {
-          // 存在纵向滚动条
-          this.table.store.existYScroll = true;
-        } else {
-          this.table.store.existYScroll = false;
-        }
         // 判断是否有数据，没数据修改 middleHeight
         if (this.table?.rows?.length > 0 || this.props.hideBottom) {
           this.table.store.location.middleHeight = tableElement.getElementsByClassName('q-table__middle')[0]?.clientHeight;
@@ -188,9 +175,6 @@ export class Operator extends Base {
           let scrollHeight = 0;
           if (this.table.store.location.middleScrollWidth - this.table.store.location.middleWidth > 0) {
             scrollHeight = 15;
-            this.table.store.existXScroll = true;
-          } else {
-            this.table.store.existXScroll = false;
           }
           this.table.store.location.middleHeight = this.table.store.location.columnHeadHeight + scrollHeight;
         }

io.sc.platform.core.frontend/src/platform/components/grid/ts/types/table/StoreType.ts

@@ -74,16 +74,4 @@ export type StoreType = {
    * 表格分页信息
    */
   pagination: PaginationType,
-  /**
-   * 记录多表头每一列孩子层级最后一列集合的对象
-   */
-  multiHeaderLastNames: any,
-  /**
-   * 存在横行滚动条
-   */
-  existXScroll: boolean,
-  /**
-   * 存在纵向滚动条
-   */
-  existYScroll: boolean,
 }