表格优化提交

io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue

@@ -5,7 +5,16 @@
     no-backdrop-dismiss:  用户不能通过单击对话框外部来关闭对话框；如果还设置了 'persistent' 属性，则无需设置它
     no-refocus:           当对话框被隐藏时，不要重新聚焦以前有聚焦过的 DOM 元素
   -->
-  <q-dialog v-model="dialog.show" :maximized="dialog.maximized" allow-focus-outside no-esc-dismiss no-backdrop-dismiss no-refocus v-bind="attrs">
+  <q-dialog
+    ref="dialogRef"
+    v-model="dialog.show"
+    :maximized="dialog.maximized"
+    allow-focus-outside
+    no-esc-dismiss
+    no-backdrop-dismiss
+    no-refocus
+    v-bind="attrs"
+  >
     <q-card
       :style="{
         width: dialog.maximized ? '100vw' : props.width,
@@ -38,7 +47,7 @@
           </q-card-section>
           <q-separator />
         </div>
-        <div style="height: calc(100% - 69px)">
+        <div ref="dialogContentDivRef" class="dialog_content_div" style="height: calc(100% - 69px)">
           <q-card-section style="height: 100%; padding: 0px" class="scroll">
             <slot></slot>
           </q-card-section>
@@ -49,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, useAttrs } from 'vue';
+import { ref, reactive, useAttrs } from 'vue';
 import { IconEnum } from '@/platform/enums';
 
 const attrs = useAttrs();
@@ -67,6 +76,7 @@ const emit = defineEmits<{
   ): void;
 }>();
 
+const dialogContentDivRef = ref();
 const dialog = reactive({
   show: false,
   maximized: attrs.maximized || false,
@@ -84,8 +94,50 @@ const hide = () => {
   dialog.show = false;
 };
 
+// 获取元素的绝对位置坐标（像对于浏览器视区左上角）
+const getElementViewPosition = (element) => {
+  //计算x坐标
+  let actualLeft = element.offsetLeft;
+  let xcurrent = element.offsetParent;
+  while (xcurrent !== null) {
+    actualLeft += xcurrent.offsetLeft + xcurrent.clientLeft;
+    xcurrent = xcurrent.offsetParent;
+  }
+  let elementScrollLeft = document.documentElement.scrollLeft;
+  if (document.compatMode == 'BackCompat') {
+    elementScrollLeft = document.body.scrollLeft;
+  }
+  const left = actualLeft - elementScrollLeft;
+
+  //计算y坐标
+  let actualTop = element.offsetTop;
+  let ycurrent = element.offsetParent;
+  while (ycurrent !== null) {
+    actualTop += ycurrent.offsetTop + ycurrent.clientTop;
+    ycurrent = ycurrent.offsetParent;
+  }
+  let elementScrollTop = document.documentElement.scrollTop;
+  if (document.compatMode == 'BackCompat') {
+    elementScrollTop = document.body.scrollTop;
+  }
+  var right = actualTop - elementScrollTop;
+  //返回结果
+  return { x: left, y: right };
+};
+const getContentHeight = () => {
+  if (dialogContentDivRef?.value) {
+    console.info('dialogContentDivRef.value', dialogContentDivRef.value.getBoundingClientRect().height);
+    return {
+      height: dialogContentDivRef.value.offsetHeight,
+      y: getElementViewPosition(dialogContentDivRef.value).y,
+    };
+  }
+  return null;
+};
+
 defineExpose({
   show,
   hide,
+  getContentHeight,
 });
 </script>

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

@@ -348,41 +348,37 @@ const emit = defineEmits<{
   // 行数据checkbox勾选状态改变事件
   (e: 'updateTicked', evt: Event, row: any): void;
   (
-    e: 'requestDataBefore', // 表格请求数据前触发事件
+    e: 'beforeRequestData', // 表格请求数据前触发事件
     requestParams: URLSearchParams | any, // 第一个参数，请求参数
     callback: any, // 回调函数
   ): void;
   (
-    e: 'requestDataAfter', // 表格请求数据完成后触发事件
-    responseResult: any, // 第一个参数，请求响应结果
+    e: 'afterRequestData', // 表格请求数据完成后触发事件
   ): void;
   (
-    e: 'addEditDataSubmitBefore', // 内置新增编辑功能数据提交前触发事件
+    e: 'beforeEditorDataSubmit', // 内置新增编辑功能数据提交前触发事件
     data: any, // 第一个参数，提交的数据对象
     callback: any,
   ): void; // 返回值：处理完成后的数据对象
   (
-    e: 'addEditDataSubmitAfter', // 内置新增编辑功能数据提交完成后触发事件
+    e: 'afterEditorDataSubmit', // 内置新增编辑功能数据提交完成后触发事件
     responseResult: any, // 第一个参数，请求响应结果
   ): void;
   (
-    e: 'deleteDataBefore', // 内置删除功能提交完成前回调函数
+    e: 'beforeRemove', // 内置删除功能提交完成前回调函数
     data: Array<any | string>, // 第一个参数，删除提交的数据
     callback: any,
   ): void; // 返回值：处理完成后的数据
   (
-    e: 'deleteDataAfter', // 内置删除功能提交完成后回调函数
+    e: 'afterRemove', // 内置删除功能提交完成后回调函数
     responseResult: any, // 第一个参数，删除提交的数据
   ): void;
   (
-    e: 'addDialogOpenAfter', // 新增窗口打开之后
-  ): void;
-  (
-    e: 'editDialogOpenAfter', // 编辑窗口打开之后
-    editData: any, // 第一个参数，编辑对应的数据
+    e: 'afterEditorOpen', // 新增窗口打开之后
+    editData: any,
   ): void;
   (
-    e: 'rowDragDropAfter', // 行拖拽完成后
+    e: 'afterRowDraggable', // 行拖拽完成后
   ): void;
 }>();
 
@@ -518,7 +514,7 @@ const buttonObj = {
       dialogRef.value.show();
       nextTick(() => {
         dialogFormRef.value.setStatus(PageStatusEnum.新增);
-        emit('addDialogOpenAfter');
+        emit('afterEditorOpen', null);
       });
     },
   },
@@ -541,7 +537,7 @@ const buttonObj = {
         nextTick(() => {
           dialogFormRef.value.setStatus(PageStatusEnum.编辑);
           dialogFormRef.value.setData(selected[0]);
-          emit('editDialogOpenAfter', selected[0]);
+          emit('afterEditorOpen', selected[0]);
         });
       }
     },
@@ -657,7 +653,7 @@ const buttonObj = {
       dialogRef.value.show();
       nextTick(() => {
         dialogFormRef.value.setStatus('addTop');
-        emit('addDialogOpenAfter');
+        emit('afterEditorOpen', null);
       });
     },
   },
@@ -676,7 +672,7 @@ const buttonObj = {
       dialogRef.value.show();
       nextTick(() => {
         dialogFormRef.value.setStatus('addChild');
-        emit('addDialogOpenAfter');
+        emit('afterEditorOpen', null);
       });
     },
   },
@@ -1169,7 +1165,7 @@ const requestHandler = async (ops) => {
   // 后台 RestCrudController 查询
   let urlSearchParams = buildQueryCriterias(reqParams);
   // const urlSearchParams = buildQueryEntity(reqParams);
-  emit('requestDataBefore', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
+  emit('beforeRequestData', urlSearchParams, (handlerRequestParams: URLSearchParams | any) => {
     urlSearchParams = handlerRequestParams;
   });
   const resp = await axios.get(url.fetchDataUrl || url.dataUrl, { params: urlSearchParams }).catch((error) => {
@@ -1221,6 +1217,7 @@ const onRequest = async (ops: any) => {
   state.pagination.descending = ops.pagination.descending;
   addRowKey(table.rows);
   stickyHeaderColumn();
+  emit('afterRequestData');
 };
 
 const addRowKey = (rows: []) => {
@@ -1249,7 +1246,7 @@ const save = async () => {
       dialogFormData[props.primaryKey] = getSelectedRowsComputed.value[0][props.primaryKey];
     }
     let submitFlag = true;
-    emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
+    emit('beforeEditorDataSubmit', dialogFormData, (handlerRequestParams: any | boolean) => {
       if (typeof handlerRequestParams === 'boolean' && handlerRequestParams === false) {
         submitFlag = false;
       } else {
@@ -1279,7 +1276,7 @@ const save = async () => {
       axios(requestParams)
         .then((resp) => {
           dialog.dialogButtons[0].loading = false;
-          emit('addEditDataSubmitAfter', resp.data);
+          emit('afterEditorDataSubmit', resp.data);
           NotifyManager.info('操作成功');
           dialogRef.value.hide();
           onRequest({ pagination: state.pagination });
@@ -1905,7 +1902,7 @@ const onDrop = (e, scope) => {
   removeDragTopStyle(e);
   removeDragBottomStyle(e);
 
-  emit('rowDragDropAfter');
+  emit('afterRowDraggable');
 };
 // 处理查询form显示的字段
 const handlerQueryFormShowField = () => {