优化表格组件

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

@@ -22,8 +22,8 @@
   <template v-else>
     <q-tr
       ref="trRef"
-      :no-hover="!props.grid.props.cellSelected ? false : true"
+      :no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true"
-      :class="props.scope.row[table.selectedField] && !props.grid.props.cellSelected ? 'selected' : ''"
+      :class="props.scope.row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''"
       :props="props.scope"
       :draggable="draggableComputed"
       @click.stop="props.rowClick($event, scope.row, scope.rowIndex)"
@@ -69,7 +69,7 @@
 <script setup lang="ts">
 import { computed, inject, ref, toRaw } from 'vue';
 import { Tools, noErrorAxios, NotifyManager, t } from '@/platform';
-import { draggableImage, draggableMode } from './ts/grid';
+import { draggableImage, draggableMode, selectedMode } from './ts/grid';
 import TreeGridRow from './TreeGridRow.vue';
 import GridTd from './GridTd.vue';
 import GridEditToolbar from './GridEditToolbar.vue';

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

@@ -3,10 +3,10 @@
     :key="col.name"
     :props="scope"
     :title="col.classes?.indexOf('truncate') > -1 && !Tools.isEmpty(value) && typeof value !== 'object' ? value : ''"
-    :class="props.grid.props.cellSelected ? tdClassComputed : ''"
+    :class="props.grid.props.selectedMode === selectedMode.cell ? tdClassComputed : ''"
     @click="
       () => {
-        if (table && props.grid.props.cellSelected) {
+        if (table && props.grid.props.selectedMode === selectedMode.cell) {
           table['cellSelected'] = {
             row: toRaw(scope.row),
             rowKey: scope.row[props.rowKeyName],
@@ -46,6 +46,7 @@
 <script setup lang="ts">
 import { inject, computed, ref, toRaw } from 'vue';
 import { Tools } from '@/platform';
+import { selectedMode } from './ts/grid.ts';
 
 const componentRef = ref();
 const props = defineProps({
@@ -90,7 +91,7 @@ const getComponentRef = () => {
 
 const tdClassComputed = computed(() => {
   const tdClass = <any>[];
-  if (props.grid.props.cellSelected) {
+  if (props.grid.props.selectedMode === selectedMode.cell) {
     tdClass.push('cellSelected_hover');
   }
   if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {

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

@@ -1,8 +1,8 @@
 <template>
   <q-tr
     ref="trRef"
-    :no-hover="!props.grid.props.cellSelected ? false : true"
+    :no-hover="props.grid.props.selectedMode === selectedMode.row ? false : true"
-    :class="row[table.selectedField] && !props.grid.props.cellSelected ? 'selected' : ''"
+    :class="row[table.selectedField] && props.grid.props.selectedMode === selectedMode.row ? 'selected' : ''"
     :draggable="draggableComputed"
     @click.stop.prevent="click($event, row, props.rowIndex)"
     @dblclick.stop.prevent="dbClick($event, row, props.rowIndex)"
@@ -12,10 +12,10 @@
     @dragstart="draggableComputed ? onDragStart($event, row) : () => {}"
   >
     <q-td
-      :class="props.grid.props.cellSelected ? firstTdClassComputed : 'nowrap text-nowrap'"
+      :class="props.grid.props.selectedMode === selectedMode.cell ? firstTdClassComputed : 'nowrap text-nowrap'"
       @click="
         () => {
-          if (table && props.grid.props.cellSelected) {
+          if (table && props.grid.props.selectedMode === selectedMode.cell) {
             table['cellSelected'] = {
               row: toRaw(props.row),
               rowKey: props.row[props.rowKey],
@@ -81,12 +81,12 @@
     <template v-for="(col, index) in cols" :key="col.name">
       <q-td
         v-if="index > 0"
-        :class="props.grid.props.cellSelected ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
+        :class="props.grid.props.selectedMode === selectedMode.cell ? tdClassComputed(col) : col.__thClass + ' ' + col.classes"
         :title="col.classes?.indexOf('truncate') > -1 && col.value && typeof col.value !== 'object' ? col.value : ''"
         :style="col.style"
         @click="
           () => {
-            if (table && props.grid.props.cellSelected) {
+            if (table && props.grid.props.selectedMode === selectedMode.cell) {
               table['cellSelected'] = {
                 row: toRaw(props.row),
                 rowKey: props.row[props.rowKey],
@@ -161,7 +161,7 @@
 import { ref, computed, inject, toRaw } from 'vue';
 import { Tools, NotifyManager } from '@/platform';
 import GridEditToolbar from './GridEditToolbar.vue';
-import { draggableImage, draggableMode } from './ts/grid';
+import { draggableImage, draggableMode, selectedMode } from './ts/grid';
 
 const trRef = ref();
 const tdDivRef = ref();
@@ -267,7 +267,7 @@ const style = {
 
 const firstTdClassComputed = computed(() => {
   const tdClass = <any>['nowrap', 'text-nowrap'];
-  if (props.grid.props.cellSelected) {
+  if (props.grid.props.selectedMode === selectedMode.cell) {
     tdClass.push('cellSelected_hover');
   }
   if (table && table['cellSelected'] && Tools.hasOwnProperty(table['cellSelected'], 'colName')) {

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

@@ -123,6 +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 { columnDefaultProps } from './ts/grid.ts';
 
@@ -147,8 +148,8 @@ const props = defineProps({
   title: { type: String, default: '' }, // 表格标题
   autoFetchData: { type: Boolean, default: true }, // 自动加载数据
   // localMode: { type: Boolean, default: false },// 本地模式，启用该模式后，除了查询数据依旧通过 autoFetchData 控制外，其他所有与后端交互的请求都失效，同时分页属性也失效
-  cellSelected: { type: Boolean, default: false }, // 单元格选择模式，启用后支持单元格选择
+  selectedMode: { type: String, default: selectedMode_.row }, // 选择模式
-  draggable: { type: String, default: undefined }, // 是否启用行拖拽，默认不启用，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`remote`为远程排序，拖拽完成后会将数据发送至后端。
+  draggable: { type: String, default: undefined }, // 是否启用行拖拽，默认不启用，字符串`local`为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端，字符串`server`为远程排序，拖拽完成后会将数据发送至后端。
   draggableOrderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序
   pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
   configButton: { type: Boolean, default: true }, // 是否显示表格配置按钮

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

@@ -2,10 +2,15 @@ import { Tools, t } from '@/platform';
 
 export const draggableMode = {
   local: 'local',
-  remote: 'remote',
+  remote: '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',
+  cell: 'cell',
+};
+
 // 列样式处理
 const columnStyle = (item: any) => {
   let style = '';

io.sc.platform.core.frontend/src/views/likm/Grid.vue

@@ -5,6 +5,7 @@
       title="示例列表"
       :data-url="Environment.apiContextPath('/api/system/application')"
       db-click-operation="testAdd"
+      selected-mode="cell"
       :cell-selected="true"
       :toolbar-actions="[
         'add',