普通表格与树表格拖拽排序代码提交

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

@@ -2,18 +2,20 @@
   <q-tr
     ref="trRef"
     :class="row[table.selectedField] ? 'selected ' : ''"
+    :draggable="
+      (typeof gridProps.draggable === 'boolean' && gridProps.draggable) || (typeof gridProps.draggable === 'string' && gridProps.draggable === 'local')
+        ? true
+        : false
+    "
     @click.stop.prevent="click($event, row, row.rowIndex)"
     @dblclick.stop.prevent="dbClick($event, row, row.rowIndex)"
-  >
-    <q-td
-      class="nowrap text-nowrap"
-      :draggable="gridProps.draggable"
     @dragenter="onDragEnter($event, row)"
     @dragleave="onDragLeave($event, row)"
     @dragover="onDragOver($event, row)"
     @drop="onDrop($event, row)"
     @dragstart="onDragStart($event, row)"
   >
+    <q-td class="nowrap text-nowrap">
       <div ref="tdDivRef" class="flex flex-nowrap items-center h-full w-full" style="flex-wrap: nowrap">
         <!--层级占位符-->
         <span :style="`width:${24 * props.level}px;`"></span>
@@ -58,12 +60,6 @@
         :class="col.__thClass + ' ' + col.classes"
         :title="col.classes?.indexOf('truncate') > -1 && col.value && typeof col.value !== 'object' ? col.value : ''"
         :style="col.style"
-        :draggable="gridProps.draggable"
-        @dragenter="onDragEnter($event, row)"
-        @dragleave="onDragLeave($event, row)"
-        @dragover="onDragOver($event, row)"
-        @drop="onDrop($event, row)"
-        @dragstart="onDragStart($event, row)"
       >
         <template v-if="col.value && typeof col.value === 'object' && col.value.componentType && col.value.bindModelValue">
           <component :is="col.value.componentType" v-bind="col.value.attrs" v-model="getRow(table.rows, row[props.rowKey], false)[col.name]"></component>
@@ -90,11 +86,12 @@
       :grid="props.grid"
       :grid-row-click="props.gridRowClick"
       :grid-row-db-click="gridRowDbClick"
+      :after-row-draggable="props.afterRowDraggable"
     ></TreeGridRow>
   </template>
 </template>
 <script setup lang="ts">
-import { ref, reactive, computed, watch, inject, toRwa } from 'vue';
+import { ref, reactive, computed, watch, inject, toRaw, nextTick } from 'vue';
 import { Tools } from '@/platform';
 
 const trRef = ref();
@@ -140,6 +137,10 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  afterRowDraggable: {
+    type: Function,
+    default: () => {},
+  },
 });
 const table = inject('table');
 
@@ -433,11 +434,26 @@ const dragRecordsContains = (dataRow) => {
   );
 };
 
+// 根据传入节点判断该节点是否为所在层级的最后一个节点
+const isLastNode = (dataRow) => {
+  if (Tools.isEmpty(dataRow[props.gridProps.foreignKey])) {
+    if (table.rows[table.rows.length - 1][props.gridProps.primaryKey] === dataRow[props.gridProps.primaryKey]) {
+      return true;
+    }
+  } else {
+    const parent = getRow(table.rows, dataRow[props.gridProps.foreignKey], true);
+    if (parent.children[parent.children.length - 1][props.gridProps.primaryKey] === dataRow[props.gridProps.primaryKey]) {
+      return true;
+    }
+  }
+  return false;
+};
+
 // 拖拽至可放置区域触发
 const onDragEnter = (e, dataRow) => {
   if (e.target.nodeName === 'TD' && e.offsetY <= gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
     addDragTopStyle(e);
-  } else if (e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
+  } else if (isLastNode(dataRow) && e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
     addDragBottomStyle(e);
   }
 };
@@ -467,7 +483,7 @@ const onDragOver = (e, dataRow) => {
     if (e.target.nodeName === 'TD' && e.offsetY <= gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
       removeDragBottomStyle(e);
       addDragTopStyle(e);
-    } else if (e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
+    } else if (isLastNode(dataRow) && e.target.nodeName === 'TD' && e.offsetY > gridTrMiddleHeightComputed.value && !dragRecordsContains(dataRow)) {
       removeDragTopStyle(e);
       addDragBottomStyle(e);
     }
@@ -482,58 +498,86 @@ const onDragOver = (e, dataRow) => {
 
 // 删除表格中的数据
 const removeRecord = (arr, removeData) => {
+  let index = 0;
   for (let i = 0; i < arr.length; i++) {
     if (arr[i][props.rowKey] === removeData[props.rowKey]) {
       arr.splice(i, 1);
+      index = i;
       break;
     } else if (arr[i].children && arr[i].children.length > 0) {
-      removeRecord(arr[i].children, removeData);
+      const a = removeRecord(arr[i].children, removeData);
+      if (a > 0) {
+        index = a;
+      }
     }
   }
+  return index;
 };
 
+// 待更新的排序数据
+const updateOrderData = <any>[];
+
 // 设置排序号
 const setOrder = (arr) => {
   arr.forEach((item, index) => {
     item[props.gridProps.orderBy] = index + 1;
+    // 添加至待更新集合中
+    updateOrderData.push(toRaw(item));
   });
 };
 
 // 增加并重新设置父属性
-const addRecord = (arr, addData, targetData, targetIndex) => {
+const addRecord = (e, arr, addData, targetData, dragIndex, targetIndex) => {
   for (let i = 0; i < arr.length; i++) {
     if (arr[i][props.gridProps.primaryKey] === targetData[props.gridProps.foreignKey]) {
+      if (
+        e.offsetY <= gridTrMiddleHeightComputed.value &&
+        isTrue(dragIndex, targetIndex) &&
+        addData[props.gridProps.foreignKey] === targetData[props.gridProps.foreignKey]
+      ) {
+        arr[i].children.splice(targetIndex - 1, 0, addData);
+      } else if (e.offsetY > gridTrMiddleHeightComputed.value && addData[props.gridProps.foreignKey] !== targetData[props.gridProps.foreignKey]) {
+        arr[i].children.splice(arr[i].children.length, 0, addData);
+      } else {
+        arr[i].children.splice(targetIndex, 0, addData);
+      }
       // 修改父
       addData[props.gridProps.foreignKey] = arr[i][props.gridProps.primaryKey];
-      arr[i].children.splice(targetIndex + 1, 0, addData);
       // 重新设置排序号
       setOrder(arr[i].children);
       break;
     } else if (arr[i].children && arr[i].children.length > 0) {
-      addRecord(arr[i].children, addData, targetData, targetIndex);
+      addRecord(e, arr[i].children, addData, targetData, dragIndex, targetIndex);
     }
   }
 };
 
+const isTrue = (dragIndex, targetIndex) => {
+  if (dragIndex < targetIndex) {
+    return true;
+  }
+  return false;
+};
+
 // 数据处理
 const resetOrderDataHandler = (e, dragRecords, targetData, targetIndex) => {
   // 1、从表格数据中将拖拽数据删除
   dragRecords.forEach((item) => {
-    removeRecord(table.rows, item);
+    const itemIndex = removeRecord(table.rows, item);
-
     // 2、表格数据中根据目标位置添加数据
     if (Tools.isEmpty(targetData[props.gridProps.foreignKey])) {
-      if (e.offsetY <= gridTrMiddleHeightComputed.value) {
+      // 3、修正位置，当拖拽至行的上半部分，且拖拽对象跟目标对象处于同级，且下标小于目标时，使用splice添加到指定下标时需将下标-1（扣除自身所占的1个下标）
-        item[props.gridProps.foreignKey] = null;
+      if (e.offsetY <= gridTrMiddleHeightComputed.value && Tools.isEmpty(item[props.gridProps.foreignKey]) && isTrue(itemIndex, targetIndex)) {
-        table.rows.splice(targetIndex, 0, item);
+        table.rows.splice(targetIndex - 1, 0, item);
-        setOrder(table.rows);
       } else {
+        table.rows.splice(targetIndex, 0, item);
+      }
       item[props.gridProps.foreignKey] = null;
-        table.rows.splice(targetIndex + 1, 0, item);
       setOrder(table.rows);
-      }
+      // 根目录下顺序变化，直接将根目录下所有数据放到待更新集合中
+      updateOrderData.push(...toRaw(table.rows));
     } else {
-      addRecord(table.rows, item, targetData, targetIndex);
+      addRecord(e, table.rows, item, targetData, itemIndex, targetIndex);
     }
   });
 };
@@ -563,9 +607,17 @@ const onDrop = (e, dataRow) => {
   ) {
     return;
   }
+  // 每次放置时清空待更新集合
+  updateOrderData.splice(0, updateOrderData.length);
   // 将拖动的数据及其子节点放到目标数据位置，并将目标数据父节点下的子节点重新排序。
   resetOrder(e, table.dragRecords, table.rows, dataRow);
-  // emit('afterRowDraggable');
+
+  // 请求后端更新排序
+  if (typeof props.gridProps.draggable === 'boolean' && props.gridProps.draggable && updateOrderData?.length > 0) {
+    props.grid.updates(updateOrderData);
+  }
+
+  props.afterRowDraggable(updateOrderData);
 };
 
 const click = (evt, row, rowIndex) => {

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

@@ -120,46 +120,25 @@
             :grid="instance"
             :grid-row-click="rowClick"
             :grid-row-db-click="rowDbClick"
+            :after-row-draggable="afterRowDraggable"
           ></TreeGridRow>
         </template>
         <q-tr
           v-else
           :class="scope.row[table.selectedField] ? 'selected' : ''"
           :props="scope"
+          :draggable="(typeof draggable === 'boolean' && draggable) || (typeof draggable === 'string' && draggable === 'local') ? true : false"
           @click.stop="rowClick($event, scope.row, scope.rowIndex)"
           @dblclick.stop="rowDbClick($event, scope.row, scope.rowIndex)"
-        >
-          <q-td v-if="table.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
-            <q-checkbox v-model="scope.row[table.tickedField]" flat :dense="denseBodyComputed" @update:model-value="updateTicked($event, scope.row)" />
-          </q-td>
-          <template v-if="draggable">
-            <q-td
-              v-for="col in scope.cols"
-              :key="col.name"
-              draggable="true"
-              :props="scope"
-              :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''"
           @dragenter="onDragEnter($event, scope)"
           @dragleave="onDragLeave"
           @dragover="onDragOver($event, scope)"
           @drop="onDrop($event, scope)"
           @dragstart="onDragStart($event, scope)"
         >
-              <template v-if="col.name === '_sortNo_'">
+          <q-td v-if="table.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
-                {{ scope.rowIndex + 1 }}
+            <q-checkbox v-model="scope.row[table.tickedField]" flat :dense="denseBodyComputed" @update:model-value="updateTicked($event, scope.row)" />
-              </template>
-              <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType && col.value.bindModelValue">
-                <component :is="col.value.componentType" v-bind="col.value.attrs" v-model="scope.row[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.isUndefinedOrNull(col.value) ? '' : col.value"></span>
-              </template>
           </q-td>
-          </template>
-          <template v-else>
           <q-td
             v-for="col in scope.cols"
             :key="col.name"
@@ -179,7 +158,6 @@
               <span v-dompurify-html="Tools.isUndefinedOrNull(col.value) ? '' : col.value"></span>
             </template>
           </q-td>
-          </template>
         </q-tr>
       </template>
       <!-- <template v-if="table.rows.length === 0" #top-row>
@@ -269,7 +247,7 @@ const props = defineProps({
   height: { type: Number, default: 0 }, // 表格高度
   title: { type: String, default: '' }, // 表格标题
   autoFetchData: { type: Boolean, default: true }, // 自动加载数据
-  draggable: { type: Boolean, default: false }, // 开启行拖拽
+  draggable: { type: [Boolean, String], default: false }, // 是否启用行拖拽，默认不启用，布尔true为启用行拖拽且访问后端进行排序，字符串local为本地排序，只根据配置的字段进行本地排序，不会将数据发送至后端。
   pageable: { type: Boolean, default: true }, // 是否需要分页，当启用树形表格模式时该属性失效，树形表格不支持分页。
   configButton: { type: Boolean, default: true }, // 是否显示表格配置按钮
   dataUrl: { type: String, default: '' }, // 表格数据操作请求的URL前缀
@@ -294,7 +272,7 @@ const props = defineProps({
   treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children，当为parent时组件根据数据主键与数据外键构建树形数据，否则需要自己构建好树形数据放到children属性中。
   primaryKey: { type: String, default: 'id' }, // 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
   foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
-  orderBy: { type: String, default: 'order' }, // 拖拽排序时传给后端修改的字段名称
+  orderBy: { type: String, default: 'order' }, // 拖拽排序时根据哪个字段进行排序
   refreshData: { type: Boolean, default: false }, // 新增、删除、修改成功后是否刷新数据列表，默认不刷新但是新增修改后台必须返回对应的行数据对象，删除则必须返回删除的记录集primaryKey集合。
   dbClickOperation: { type: String, default: 'view' }, // 默认的双击操作：默认为查看操作，支持：view、edit、clone、expand
   sortBy: {
@@ -399,6 +377,10 @@ const props = defineProps({
     type: Function,
     default: undefined,
   },
+  onAfterRowDraggable: {
+    type: Function,
+    default: undefined,
+  },
 });
 const emit = defineEmits<{
   // 行点击事件
@@ -440,6 +422,8 @@ const emit = defineEmits<{
   ): void;
   (
     e: 'afterRowDraggable', // 行拖拽完成后
+    grid: any,
+    data: any,
   ): void;
 }>();
 
@@ -594,8 +578,8 @@ const table = reactive({
   denseBody: props.denseBody !== undefined ? props.denseBody : false,
   denseBottom: props.denseBottom !== undefined ? props.denseBottom : false,
   queryFormFields: <any>[],
-  moreQueryStatus: false, // 当前更多查询状态是否激活
   rows: <any>[],
+  moreQueryStatus: false, // 当前更多查询状态是否激活
   inFullscreen: false, // 表格当前是否为全屏模式
 });
 provide('table', table);
@@ -2456,18 +2440,49 @@ const onDrop = (e, scope) => {
     return;
   }
   const dragRow = table.rows[dragRowIndex];
-  if (e.offsetY < state.bodyCellHeight / 2 && dragRowIndex !== scope.rowIndex && e.target.parentNode.parentNode.children.length === scope.rowIndex + 1) {
   table.rows.splice(dragRowIndex, 1);
+  if (e.offsetY < state.bodyCellHeight / 2 && dragRowIndex < scope.rowIndex) {
     table.rows.splice(scope.rowIndex - 1, 0, dragRow);
   } else {
-    table.rows.splice(dragRowIndex, 1);
     table.rows.splice(scope.rowIndex, 0, dragRow);
   }
   removeDragTopStyle(e);
   removeDragBottomStyle(e);
 
-  emit('afterRowDraggable');
+  const updateData = <any>[];
+
+  table.rows.forEach((item, index) => {
+    item[props.orderBy] = index + 1;
+    updateData.push(toRaw(item));
+  });
+
+  if (typeof props.draggable === 'boolean' && props.draggable) {
+    // 访问后端更新排序
+    updates(updateData);
+  }
+
+  afterRowDraggable(updateData);
+};
+
+const afterRowDraggable = (updateData) => {
+  if (!Tools.isUndefined(props.onAfterRowDraggable)) {
+    emit('afterRowDraggable', instance, updateData);
+  }
 };
+
+// 批量更新数据
+const updates = (data) => {
+  const requestParams = {
+    method: 'PUT',
+    headers: { 'content-type': 'application/json;charset=utf-8;' },
+    data: data,
+    url: url.dataUrl + '/updates',
+  };
+  axios(requestParams).catch((error) => {
+    console.info('=======error======', error);
+  });
+};
+
 // 处理查询form显示的字段
 const handlerQueryFormShowField = () => {
   table.queryFormFields = [];
@@ -2694,6 +2709,7 @@ defineExpose({
   refresh,
   getLocalData,
   setLocalData,
+  updates,
   replaceRow,
   removeRows,
   addRow,

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

@@ -57,14 +57,14 @@
         </q-tab-panels>
       </template>
     </q-splitter> -->
-    <w-grid
+    <!-- <w-grid
       ref="gridRef"
       :title="testGrid.title"
       draggable
       :dense="state.dense"
       :hide-bottom="false"
       :data-url="testGrid.tableDataUrl"
-      :auto-fetch-data="false"
+      :auto-fetch-data="true"
       :checkbox-selection="true"
       selection="multiple"
       :query-form-cols-num="6"
@@ -95,16 +95,86 @@
       @row-db-click="rowDbClick"
       @after-request-data="
         () => {
-          // console.info('1111111111111111111111111111');
         }
       "
-    ></w-grid>
+    ></w-grid> -->
+    <w-grid
+      ref="applicationGridRef"
+      :title="$t('system.application.grid.title')"
+      :config-button="true"
+      selection="multiple"
+      :checkbox-selection="true"
+      :sort-no="true"
+      :draggable="true"
+      :data-url="Environment.apiContextPath('/api/system/application')"
+      :sort-by="['order']"
+      :query-form-cols-num="3"
+      :query-form-fields="[
+        { name: 'code', label: $t('code'), type: 'text' },
+        { name: 'name', label: $t('name'), type: 'text' },
+        { name: 'enable', label: $t('isEnable'), type: 'select', options: Options.yesNo() },
+      ]"
+      :toolbar-configure="{ noIcon: false }"
+      :toolbar-actions="['query', 'refresh', 'separator', 'add', 'clone', 'edit', 'remove', 'separator', 'view', 'separator', 'export']"
+      :columns="[
+        { width: 60, name: 'order', label: $t('order') },
+        { width: 100, name: 'code', label: $t('code') },
+        { width: '100%', name: 'name', label: $t('name') },
+        { width: 80, name: 'enable', label: $t('status'), format: Formater.enableTag() },
+        { width: 120, name: 'lastModifier', label: $t('lastModifier') },
+        { width: 120, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
+      ]"
+      :editor="{
+        dialog: {
+          width: '600px',
+          height: '300px',
+        },
+        form: {
+          colsNum: 1,
+          fields: [
+            { name: 'code', label: $t('code'), type: 'text', required: true },
+            { name: 'name', label: $t('name'), type: 'text', required: true },
+            { name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
+            { name: 'order', label: $t('order'), type: 'number' },
+            { name: 'enable', label: $t('enable'), type: 'checkbox', defaultValue: true },
+          ],
+        },
+      }"
+      :viewer="{
+        panel: {
+          columnNum: 1,
+          fields: [
+            { name: 'id', label: $t('id') },
+            { name: 'code', label: $t('code') },
+            { name: 'name', label: $t('name') },
+            { name: 'description', label: $t('description') },
+            { name: 'enable', label: $t('enable'), format: Formater.none() },
+            { name: 'order', label: $t('order') },
+            { name: 'dataComeFrom', label: $t('dataComeFrom') },
+            { name: 'creator', label: $t('creator') },
+            { name: 'createDate', label: $t('createDate') },
+            { name: 'lastModifier', label: $t('lastModifier') },
+            { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
+            { name: 'corporationCode', label: $t('corporationCode') },
+          ],
+        },
+      }"
+      @row-click="(evt, row, index) => {}"
+      @before-request-data="() => {}"
+      @after-row-draggable="
+        (grid, updateDatas) => {
+          console.info('grid=====', grid);
+          console.info('updateDatas======', updateDatas);
+        }
+      "
+    >
+    </w-grid>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, nextTick, reactive, computed } from 'vue';
-import { axios, Environment, EnumTools, Options } from '@/platform';
+import { axios, Environment, EnumTools, Options, Formater } from '@/platform';
 import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
 import { IconEnum } from '@/platform/enums';
 
@@ -300,52 +370,52 @@ const testGrid = {
     // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
   ],
   tableColumns: [
-    {
+    // {
-      name: 'info',
+    //   name: 'info',
-      label: '用户信息',
+    //   label: '用户信息',
-      columns: [
+    //   columns: [
-        { name: 'loginName', label: '登录名', align: 'right' },
-        { name: 'userName', label: '用户名' },
-      ],
-    },
     //     { name: 'loginName', label: '登录名', align: 'right' },
     //     { name: 'userName', label: '用户名' },
-    {
+    //   ],
-      name: 'lxxx',
+    // },
-      label: '联系方式',
+    { name: 'loginName', label: '登录名', align: 'right' },
-      columns: [
+    { name: 'userName', label: '用户名' },
-        {
+    // {
-          name: 'email',
+    //   name: 'lxxx',
-          label: '邮箱地址',
+    //   label: '联系方式',
-          columns: [
+    //   columns: [
-            { width: 100, name: 'auc', label: 'auc' },
+    //     {
-            { width: 100, name: 'ar', label: 'ar' },
+    //       name: 'email',
-            { width: 100, name: 'ks', label: 'ks' },
+    //       label: '邮箱地址',
-          ],
-        },
-        {
-          name: 'tx',
-          label: '通讯',
-          columns: [
-            { name: 'phone', label: '电话' },
-            { name: 'mobile', label: '手机号' },
-          ],
-        },
-        {
-          name: 'qq',
-          label: 'QQ',
     //       columns: [
-          //   { width: 100, name: 'aucQualitative', label: 'aucQualitative' },
+    //         { width: 100, name: 'auc', label: 'auc' },
-          //   { width: 100, name: 'arQualitative', label: 'arQualitative' },
+    //         { width: 100, name: 'ar', label: 'ar' },
-          //   { width: 100, name: 'ksQualitative', label: 'ksQualitative' },
+    //         { width: 100, name: 'ks', label: 'ks' },
     //       ],
-        },
+    //     },
-      ],
+    //     {
-    },
+    //       name: 'tx',
-    // { name: 'email', label: '邮箱地址' },
+    //       label: '通讯',
+    //       columns: [
     //         { name: 'phone', label: '电话' },
     //         { name: 'mobile', label: '手机号' },
-    // { name: 'qq', label: 'QQ' },
+    //       ],
+    //     },
+    //     {
+    //       name: 'qq',
+    //       label: 'QQ',
+    //       // columns: [
+    //       //   { width: 100, name: 'aucQualitative', label: 'aucQualitative' },
+    //       //   { width: 100, name: 'arQualitative', label: 'arQualitative' },
+    //       //   { width: 100, name: 'ksQualitative', label: 'ksQualitative' },
+    //       // ],
+    //     },
+    //   ],
+    // },
+    { name: 'email', label: '邮箱地址' },
+    { name: 'phone', label: '电话' },
+    { name: 'mobile', label: '手机号' },
+    { name: 'qq', label: 'QQ' },
     { name: 'description', label: '描述', width: 400 },
     {
       name: 'enable',
@@ -417,46 +487,46 @@ const testGrid = {
 };
 
 onMounted(() => {
-  gridRef.value.setLocalData([
+  // gridRef.value.setLocalData([
-    {
+  //   {
-      loginName: 'admin1',
+  //     loginName: 'admin1',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin2',
+  //     loginName: 'admin2',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin3',
+  //     loginName: 'admin3',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin4',
+  //     loginName: 'admin4',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin5',
+  //     loginName: 'admin5',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin6',
+  //     loginName: 'admin6',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin7',
+  //     loginName: 'admin7',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin8',
+  //     loginName: 'admin8',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin9',
+  //     loginName: 'admin9',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin10',
+  //     loginName: 'admin10',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin11',
+  //     loginName: 'admin11',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin12',
+  //     loginName: 'admin12',
-    },
+  //   },
-    {
+  //   {
-      loginName: 'admin13',
+  //     loginName: 'admin13',
-    },
+  //   },
-  ]);
+  // ]);
 });
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full">
     <w-grid
       ref="gridRef"
       :title="testGrid.title"
@@ -15,6 +15,12 @@
       :query-form-fields="testGrid.queryFormFields"
       :query-form-cols-num="3"
       @update-ticked="updateTicked"
+      @after-row-draggable="
+        (grid, updateDatas) => {
+          console.info('grid=====', grid);
+          console.info('updateDatas======', updateDatas);
+        }
+      "
     ></w-grid>
   </div>
 </template>
@@ -29,8 +35,8 @@ import { IconEnum } from '@/platform/enums';
 const { t } = useI18n();
 
 const updateTicked = (event, row) => {
-  console.info('treeGrid.updateTicked.event====', event);
+  // console.info('treeGrid.updateTicked.event====', event);
-  console.info('treeGrid.updateTicked.row====', row);
+  // console.info('treeGrid.updateTicked.row====', row);
 };
 
 const startY = ref(0);

io.sc.platform.mvc/src/main/java/io/sc/platform/mvc/controller/support/RestCrudController.java

@@ -14,6 +14,7 @@ import io.sc.platform.orm.service.support.QueryResult;
 import io.sc.platform.orm.service.support.criteria.Criteria;
 import io.sc.platform.orm.service.support.criteria.impl.Equals;
 import io.sc.platform.orm.service.support.criteria.impl.IContains;
+import io.sc.platform.orm.util.EntityVoUtil;
 import io.sc.platform.security.util.SecurityUtil;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Page;
@@ -124,6 +125,30 @@ public abstract class RestCrudController<V extends BaseVo, E extends BaseEntity<
 		return update(request,response,id,entity);
 	}
 
+	/**
+	 * 更新多个实体
+	 * @param request Http 请求对象
+	 * @param response Http 响应对象
+	 * @param entitys 实体对象集合
+	 * @return 更新后的实体 VO 对象
+	 * @throws Exception 违例
+	 */
+	@AuditLog(action=AuditLogAction.UPDATE)
+	@PutMapping("updates")
+	@ResponseBody
+	public List<V> updates(HttpServletRequest request,HttpServletResponse response,@RequestBody List<E> entitys) throws Exception{
+		Map<ID, E> map = new HashMap<>();
+		List<E> list = new ArrayList<>();
+		if (entitys!=null && entitys.size() > 0) {
+			for(E entity: entitys) {
+				ID id = service.getRepository().getId(entity);
+				map.put(id, entity);
+			}
+			list = service.update(map);
+		}
+		return EntityVoUtil.toVo(list);
+	}
+
 	protected V update(HttpServletRequest request,HttpServletResponse response,@PathVariable(name="id")ID id,@RequestBody @Valid E entity) throws Exception{
 		E updatedEntity =service.update(id,entity);
 		if(updatedEntity instanceof BaseEntity){