表格优化提交

io.sc.platform.core.frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.204",
+  "version": "8.1.205",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",

io.sc.platform.core.frontend/src/platform/components/form/elements/WCheckbox.vue

@@ -63,6 +63,9 @@ const showIfComputed = computed(() => {
   });
 });
 const disableIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.disableIf({
     value: checkboxValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue

@@ -147,6 +147,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: codeMirrorValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInput.vue

@@ -15,7 +15,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <!-- 选择颜色按钮 -->
         <q-btn
           icon="square"
@@ -156,6 +156,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: colorValueRef.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WColorInputPalette.vue

@@ -15,7 +15,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <!-- 选择颜色按钮 -->
         <q-btn
           icon="bi-palette"
@@ -394,6 +394,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: colorValueRef.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WCron.vue

@@ -16,7 +16,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <!-- 选择颜色按钮 -->
         <q-btn icon="bi-pencil-square" padding="2px" flat square unelevated :title="$t('select')">
           <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]" style="width: 800px">
@@ -166,6 +166,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: valueRef.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WDate.vue

@@ -15,7 +15,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <q-icon :name="IconEnum.日期" class="cursor-pointer">
           <q-popup-proxy cover transition-show="scale" transition-hide="scale">
             <q-date v-model="dateValue" today-btn mask="YYYY-MM-DD" @update:model-value="dateSelected">
@@ -121,6 +121,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: dateValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WFile.vue

@@ -16,7 +16,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <q-icon name="attachment" />
       </template>
     </q-file>
@@ -109,6 +109,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: fileValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WIcon.vue

@@ -18,7 +18,7 @@
         <q-icon v-if="valueRef" :name="valueRef"> </q-icon>
         <w-icon-empty v-else></w-icon-empty>
       </template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <q-btn icon="bi-search" size="10px" padding="2px" flat square unelevated :title="$t('select')">
           <q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]" @show="show">
             <q-splitter v-model="leftWidthRef" style="width: 800px; height: 300px; position: relative">
@@ -205,6 +205,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: valueRef.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WNumber.vue

@@ -109,6 +109,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: numberValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WOptionGroup.vue

@@ -70,6 +70,9 @@ const showIfComputed = computed(() => {
   });
 });
 const disableIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.disableIf({
     value: optionGroupValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue

@@ -107,6 +107,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: passwordValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WPosition.vue

@@ -15,7 +15,7 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template>
-      <template #append>
+      <template v-if="props.form && props.form.getStatus() !== 'view'" #append>
         <!-- 选择位置按钮 -->
         <q-btn
           icon="bi-pin-angle"
@@ -163,6 +163,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: positionValueRef.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WSelect.vue

@@ -107,6 +107,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: selectValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WText.vue

@@ -106,6 +106,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: textValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WTextBtn.vue

@@ -17,16 +17,16 @@
       @change="changeValue"
     >
       <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
-      <template v-if="attrs.button && attrs.buttonPosition === 'prepend'" #prepend>
+      <template v-if="attrs.button && attrs.buttonPosition === 'prepend' && props.form && props.form.getStatus() !== 'view'" #prepend>
         <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
       </template>
-      <template v-else-if="attrs.button && attrs.buttonPosition === 'before'" #before>
+      <template v-else-if="attrs.button && attrs.buttonPosition === 'before' && props.form && props.form.getStatus() !== 'view'" #before>
         <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
       </template>
-      <template v-else-if="attrs.button && attrs.buttonPosition === 'after'" #after>
+      <template v-else-if="attrs.button && attrs.buttonPosition === 'after' && props.form && props.form.getStatus() !== 'view'" #after>
         <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
       </template>
-      <template v-else-if="attrs.button" #append>
+      <template v-else-if="attrs.button && props.form && props.form.getStatus() !== 'view'" #append>
         <q-btn round dense flat v-bind="attrs.button" @click="attrs.button.click" />
       </template>
     </q-input>
@@ -119,6 +119,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: textBtnValue.value,
     form: props.form,

io.sc.platform.core.frontend/src/platform/components/form/elements/WTextarea.vue

@@ -106,6 +106,9 @@ const requiredIfComputed = computed(() => {
   return false;
 });
 const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
   return props.readOnlyIf({
     value: textareaValue.value,
     form: props.form,

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

@@ -1,11 +1,20 @@
 <template>
   <q-tr
+    ref="trRef"
     :class="row[table.selectedField] ? 'selected ' : ''"
     @click.stop.prevent="click($event, row, row.rowIndex)"
     @dblclick.stop.prevent="dbClick($event, row, row.rowIndex)"
   >
-    <q-td class="nowrap text-nowrap">
+    <q-td
-      <div class="flex flex-nowrap items-center" style="flex-wrap: nowrap">
+      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)"
+    >
+      <div ref="tdDivRef" class="flex flex-nowrap items-center h-full w-full" style="flex-wrap: nowrap">
         <!--层级占位符-->
         <span :style="`width:${27 * props.level}px;`"></span>
         <!--展开按钮-->
@@ -49,6 +58,12 @@
         :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>
@@ -57,11 +72,12 @@
           <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
         </template>
         <template v-else>
-          <span v-dompurify-html="col.value || ''"></span>
+          <span v-dompurify-html="!Tools.isEmpty(col.value) ? col.value : ''"></span>
         </template>
       </q-td>
     </template>
   </q-tr>
+  <div></div>
   <template v-for="child in row.children" :key="child[rowKey]">
     <TreeGridRow
       v-if="row.expand"
@@ -76,7 +92,11 @@
   </template>
 </template>
 <script setup lang="ts">
-import { ref, reactive, computed, watch, inject } from 'vue';
+import { ref, reactive, computed, watch, inject, toRwa } from 'vue';
+import { Tools } from '@/platform';
+
+const trRef = ref();
+const tdDivRef = ref();
 const props = defineProps({
   level: { type: Number, default: 0 },
   columnsMap: {
@@ -113,17 +133,51 @@ const props = defineProps({
 });
 const table = inject('table');
 
+const style = {
+  icon: {
+    defaultTop: {
+      // 默认顶级节点图标
+      name: 'bi-folder-fill',
+      color: 'amber',
+    },
+    defaultChild: {
+      // 默认子节点图标
+      name: 'note',
+      color: '',
+    },
+    drag: {
+      // 拖拽时父节点图标
+      name: 'bi-folder-symlink-fill',
+      color: 'amber',
+    },
+  },
+  dragLine: {
+    // 拖拽线样式
+    width: '2px',
+    style: 'dashed',
+    color: 'orange',
+  },
+};
+
 const iconComputed = computed(() => {
-  if (props.gridProps.treeIcon) {
+  if (!Tools.isEmpty(props.row['_dragIcon_'])) {
+    return {
+      name: props.row['_dragIcon_'],
+      color: style.icon.drag.color,
+    };
+  } else if (props.gridProps.treeIcon) {
     return props.gridProps.treeIcon(props.row);
   } else {
     if (props.row.children && props.row.children.length > 0) {
       return {
-        name: 'folder',
+        name: style.icon.defaultTop.name,
-        color: 'amber',
+        color: style.icon.defaultTop.color,
       };
     } else {
-      return 'note';
+      return {
+        name: style.icon.defaultChild.name,
+        color: style.icon.defaultChild.color,
+      };
     }
   }
 });
@@ -242,6 +296,268 @@ const childColsHandler = (child) => {
   return cols;
 };
 
+document.addEventListener('dragstart', function (e) {
+  if (tdDivRef?.value) {
+    tdDivRef.value.classList.add('gridTdDiv');
+  }
+});
+document.addEventListener('drop', function (e) {
+  if (tdDivRef?.value) {
+    tdDivRef.value.classList.remove('gridTdDiv');
+  }
+});
+
+// 拖拽开始
+const onDragStart = (e, dataRow) => {
+  const selecteds = props.grid.getSelectedRows();
+  if (
+    selecteds.length > 0 &&
+    selecteds.findIndex((item) => {
+      return item[props.rowKey] === dataRow[props.rowKey];
+    }) > -1
+  ) {
+    table.dragRecords = selecteds;
+  } else {
+    props.grid.cleanSelected();
+    // 触发选择
+    dataRow[table.selectedField] = true;
+    table.dragRecords = [dataRow];
+  }
+  e.dataTransfer.effectAllowed = 'move';
+};
+const addDragTopStyle = (e) => {
+  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderTopWidth = style.dragLine.width;
+      e.target.parentNode.children[i].style.borderTopStyle = style.dragLine.style;
+      e.target.parentNode.children[i].style.borderTopColor = style.dragLine.color;
+    }
+  }
+};
+const removeDragTopStyle = (e) => {
+  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderTopWidth = '';
+      e.target.parentNode.children[i].style.borderTopStyle = '';
+      e.target.parentNode.children[i].style.borderTopColor = '';
+    }
+  }
+};
+const addDragBottomStyle = (e) => {
+  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderBottomWidth = style.dragLine.width;
+      e.target.parentNode.children[i].style.borderBottomStyle = style.dragLine.style;
+      e.target.parentNode.children[i].style.borderBottomColor = style.dragLine.color;
+    }
+  }
+};
+const removeDragBottomStyle = (e) => {
+  if (e.target?.parentNode?.children && e.target.nodeName === 'TD') {
+    for (let i = 0; i < e.target.parentNode.children.length; i++) {
+      e.target.parentNode.children[i].style.borderBottomWidth = '';
+      e.target.parentNode.children[i].style.borderBottomStyle = '';
+      e.target.parentNode.children[i].style.borderBottomColor = '';
+    }
+  }
+};
+
+// 设置拖拽目标的父节点icon图标
+const setDragIcon = (arr, key: string = '') => {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].children && arr[i].children.length > 0) {
+      if (!Tools.isEmpty(key) && arr[i][props.gridProps.primaryKey] === key) {
+        if (Tools.isEmpty(arr[i]['_dragIcon_']) || arr[i]['_dragIcon_'] !== style.icon.drag.name) {
+          arr[i]['_dragIcon_'] = style.icon.drag.name;
+        }
+      } else {
+        arr[i]['_dragIcon_'] = '';
+      }
+      setDragIcon(arr[i].children, key);
+    }
+  }
+};
+
+/**
+ * 判断是否可以拖拽
+ * @param dragRecords 拖拽的记录集
+ * @param targetParentKey 当前鼠标所在的目标行的父节点key
+ */
+const canDrag = (dragRecords, targetParentKey) => {
+  if (Tools.isEmpty(targetParentKey)) {
+    return true;
+  }
+  // 判断拖拽的行是否为当前鼠标所在的目标行的父节点（只要存在父，一直往上找）
+  let result = true;
+  let parentKey = targetParentKey;
+  while (!Tools.isEmpty(parentKey)) {
+    if (
+      dragRecords.findIndex((item) => {
+        return item[props.gridProps.primaryKey] === parentKey;
+      }) > -1
+    ) {
+      result = false;
+      parentKey = null;
+    } else {
+      parentKey = getRow(table.rows, parentKey, true)[props.gridProps.foreignKey];
+    }
+  }
+  return result;
+};
+
+// 得到表格数据行的中间高度
+const gridTrMiddleHeightComputed = computed(() => {
+  if (trRef?.value) {
+    return trRef.value.$el.offsetHeight / 2;
+  } else {
+    return (table.dense || table.denseBody ? 24 : 48) / 2;
+  }
+});
+
+// 根据传入的数据行判断是否在当前拖拽的记录集合中
+const dragRecordsContains = (dataRow) => {
+  return (
+    table.dragRecords.findIndex((item) => {
+      return item[props.rowKey] === dataRow[props.rowKey];
+    }) > -1
+  );
+};
+
+// 拖拽至可放置区域触发
+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)) {
+    addDragBottomStyle(e);
+  }
+};
+
+// 拖拽至不可放置区域触发
+const onDragLeave = (e, dataRow) => {
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+  if (tdDivRef?.value) {
+    tdDivRef.value.classList.remove('gridTdDiv');
+  }
+};
+
+/**
+ * 拖拽过程触发
+ * @param e 拖拽的html元素
+ * @param dataRow 当前鼠标所在的目标行数据
+ */
+const onDragOver = (e, dataRow) => {
+  e.preventDefault();
+  if (!canDrag(table.dragRecords, dataRow[props.gridProps.foreignKey])) {
+    removeDragTopStyle(e);
+    removeDragBottomStyle(e);
+    setDragIcon(table.rows);
+    e.dataTransfer.dropEffect = 'none';
+  } else {
+    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)) {
+      removeDragTopStyle(e);
+      addDragBottomStyle(e);
+    }
+    if (!Tools.isUndefinedOrNull(dataRow[props.gridProps.foreignKey])) {
+      setDragIcon(table.rows, dataRow[props.gridProps.foreignKey]);
+    } else {
+      setDragIcon(table.rows);
+    }
+    e.dataTransfer.dropEffect = 'move';
+  }
+};
+
+// 删除表格中的数据
+const removeRecord = (arr, removeData) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i][props.rowKey] === removeData[props.rowKey]) {
+      arr.splice(i, 1);
+      break;
+    } else if (arr[i].children && arr[i].children.length > 0) {
+      removeRecord(arr[i].children, removeData);
+    }
+  }
+};
+
+// 设置排序号
+const setOrder = (arr) => {
+  arr.forEach((item, index) => {
+    item[props.gridProps.orderBy] = index + 1;
+  });
+};
+
+// 增加并重新设置父属性
+const addRecord = (arr, addData, targetData, targetIndex) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i][props.gridProps.primaryKey] === targetData[props.gridProps.foreignKey]) {
+      // 修改父
+      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);
+    }
+  }
+};
+
+// 数据处理
+const resetOrderDataHandler = (e, dragRecords, targetData, targetIndex) => {
+  // 1、从表格数据中将拖拽数据删除
+  dragRecords.forEach((item) => {
+    removeRecord(table.rows, item);
+
+    // 2、表格数据中根据目标位置添加数据
+    if (Tools.isEmpty(targetData[props.gridProps.foreignKey])) {
+      if (e.offsetY <= gridTrMiddleHeightComputed.value) {
+        item[props.gridProps.foreignKey] = null;
+        table.rows.splice(targetIndex, 0, item);
+        setOrder(table.rows);
+      } else {
+        item[props.gridProps.foreignKey] = null;
+        table.rows.splice(targetIndex + 1, 0, item);
+        setOrder(table.rows);
+      }
+    } else {
+      addRecord(table.rows, item, targetData, targetIndex);
+    }
+  });
+};
+
+// 重新设置树的排序
+const resetOrder = (e, dragRecords, arr, targetData) => {
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i][props.rowKey] === targetData[props.rowKey]) {
+      resetOrderDataHandler(e, dragRecords, targetData, i);
+      break;
+    } else if (arr[i].children && arr[i].children.length > 0) {
+      resetOrder(e, dragRecords, arr[i].children, targetData);
+    }
+  }
+};
+
+// 拖拽放置时触发
+const onDrop = (e, dataRow) => {
+  e.preventDefault();
+  removeDragTopStyle(e);
+  removeDragBottomStyle(e);
+  setDragIcon(table.rows);
+  if (
+    table.dragRecords.findIndex((item) => {
+      return item[props.rowKey] === dataRow[props.rowKey];
+    }) > -1
+  ) {
+    return;
+  }
+  // 将拖动的数据及其子节点放到目标数据位置，并将目标数据父节点下的子节点重新排序。
+  resetOrder(e, table.dragRecords, table.rows, dataRow);
+  // emit('afterRowDraggable');
+};
+
 const click = (evt, row, rowIndex) => {
   if (!evt.ctrlKey) {
     props.grid.cleanSelected();
@@ -259,3 +575,9 @@ const dbClick = (evt, row, rowIndex) => {
   }
 };
 </script>
+
+<style lang="css">
+.gridTdDiv {
+  pointer-events: none;
+}
+</style>

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

@@ -33,7 +33,7 @@
             class="flex flex-nowrap items-end"
             :class="table.queryFormFields.length > 0 ? 'pt-2.5' : ''"
           >
-            <div class="flex-none">{{ $t(title) }}</div>
+            <div class="flex-none">{{ $t(title ? title : '') }}</div>
             <div class="flex-1">
               <w-toolbar :dense="denseToolbarComputed" v-bind="toolbarConfigure" :buttons="toolbarButtonsComputed" :grid="instance"></w-toolbar>
             </div>
@@ -408,7 +408,7 @@ const emit = defineEmits<{
   ): void; // 返回值：处理完成后的数据
   (
     e: 'afterRemove', // 内置删除功能提交完成后回调函数
-    responseResult: any, // 第一个参数，删除提交的数据
+    responseResult: any, // 第一个参数，请求响应结果
   ): void;
   (
     e: 'afterEditorOpen', // 新增窗口打开之后
@@ -587,6 +587,7 @@ const remove = () => {
   };
   axios(requestParams)
     .then((resp) => {
+      emit('afterRemove', resp);
       NotifyManager.info(t('tip.operationSuccess'));
       onRequest({ pagination: state.pagination });
     })