表格优化提交

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

@@ -1,11 +1,73 @@
 <template>
-  <div>
+  <div style="height: 100%">
+    <!-- <q-splitter v-model="splitterModel">
+      <template #before>
+        <q-tabs v-model="tab" vertical class="text-teal">
+          <q-tab name="mails" icon="mail" label="Mails" />
+          <q-tab name="alarms" icon="alarm" label="Alarms" />
+          <q-tab name="movies" icon="movie" label="Movies" />
+        </q-tabs>
+      </template>
+
+      <template #after>
+        <q-tab-panels v-model="tab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
+          <q-tab-panel name="mails">
+            
+          </q-tab-panel>
+
+          <q-tab-panel name="alarms">
+            <w-grid
+              ref="grid2"
+              :title="testGrid.title"
+              draggable
+              dense
+              :data-url="testGrid.tableDataUrl"
+              :checkbox-selection="true"
+              selection="multiple"
+              :query-form-cols-num="2"
+              :columns="testGrid.tableColumns"
+              :toolbar-actions="testGrid.toolbar"
+              :query-form-fields="testGrid.queryForm"
+              :editor="{
+                form: {
+                  colsNum: 1,
+                  fields: [
+                    { label: '登录名', name: 'loginName', type: 'w-text' },
+                    { label: '用户名', name: 'userName', type: 'w-text' },
+                    { label: '密码', name: 'password', type: 'w-text' },
+                    { label: '是否可用1111', name: 'enable', type: 'w-checkbox' },
+                    {
+                      name: 'urlOpenType',
+                      label: 'urlOpenType',
+                      type: 'select',
+                      options: Options.enum(UrlOpenTypeEnum, false),
+                      defaultValue: 'NEW_WINDOW',
+                    },
+                  ],
+                },
+              }"
+              :viewer="testGrid.view"
+            ></w-grid>
+          </q-tab-panel>
+
+          <q-tab-panel name="movies">
+            <div class="text-h4 q-mb-md">Movies</div>
+            <w-form ref="form" :fields="[{ name: 'a', label: 'a', type: 'text' }]"></w-form>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter> -->
     <w-grid
+      ref="gridRef"
       :title="testGrid.title"
       draggable
+      :dense="state.dense"
+      :hide-bottom="false"
       :data-url="testGrid.tableDataUrl"
+      :auto-fetch-data="false"
       :checkbox-selection="true"
       selection="multiple"
+      :query-form-cols-num="6"
       :columns="testGrid.tableColumns"
       :toolbar-actions="testGrid.toolbar"
       :query-form-fields="testGrid.queryForm"
@@ -31,21 +93,35 @@
       @update-ticked="updateTicked"
       @row-click="rowClick"
       @row-db-click="rowDbClick"
+      @after-request-data="
+        () => {
+          // console.info('1111111111111111111111111111');
+        }
+      "
     ></w-grid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, reactive } from 'vue';
+import { ref, onMounted, nextTick, reactive, computed } from 'vue';
 import { axios, Environment, EnumTools, Options } from '@/platform';
 import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
 import { IconEnum } from '@/platform/enums';
 
+const dialogRef = ref();
+const gridRef = ref();
+const grid2 = ref();
+const form = ref();
+const tab = ref('mails');
+const splitterModel = ref(10);
 const UrlOpenTypeEnum = await EnumTools.fetch('io.sc.platform.system.enums.UrlOpenType');
 const updateTicked = (event, row) => {
   console.info('grid.updateTicked.event====', event);
   console.info('grid.updateTicked.row====', row);
 };
+const state = reactive({
+  dense: false,
+});
 
 const startY = ref(0);
 const endY = ref(0);
@@ -66,15 +142,77 @@ const rowClick = (evt, row, index) => {
   // }
   // startY.value = 0;
   // endY.value = 0;
+  // console.info('grid.rowClick.row====', row);
+
+  // tab.value = 'alarms';
+  // nextTick(() => {
+  //   grid2.value.getQueryForm().setFieldValue('loginName', row.id);
+  // });
+
+  // tab.value = 'movies';
+  // nextTick(() => {
+  //   form.value.setFieldValue('a', row.id);
+  // });
   console.info('grid.rowClick.row====', row);
 };
 const rowDbClick = (evt, row, index) => {
   console.info('grid.rowDbClick.row====', row);
 };
 
-const testGrid = reactive({
+// 获取元素的绝对位置坐标（像对于浏览器视区左上角）
+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 gridHeightComputed = computed(() => {
+//   // if (dialogRef?.value && gridRef?.value) {
+//   //   const height = dialogRef.value.getContentHeight();
+//   //   const tableContentY = getElementViewPosition(gridRef.value.$el.getElementsByClassName('q-table__middle')[0]);
+//   //   console.info('height==========', height);
+//   //   console.info('gridRef==============', tableContentY);
+//   //   if (height && tableContentY) {
+//   //     return height.height - (tableContentY.y - height.y);
+//   //   }
+//   // }
+//   if (dialogRef?.value && dialogRef.value.getContent()) {
+//     const height = dialogRef.value.getContent().clientHeight;
+//     console.info('dialogRef.value.getContent()====', height);
+//     if (height > 0) {
+//       return height;
+//     }
+//   }
+//   return 0;
+// });
+const aaaaaaaaaaaaaaaa = ref(false);
+const testGrid = {
   hideBottom: false,
-  autoLoadData: true,
+  autoLoadData: false,
   tableLeftColumnStickyNumber: 1,
   title: '用户列表',
   tableDataUrl: Environment.apiContextPath('api/system/user'),
@@ -86,32 +224,41 @@ const testGrid = reactive({
   toolbar: [
     ['query', 'separator', 'moreQuery'],
     'reset',
-    'refresh',
+    {
+      extend: 'refresh',
+      click: () => {
+        state.dense = !state.dense;
+      },
+    },
     'separator',
     {
-      name: 'custBtn',
+      extend: 'resetDefaultValues',
-      extend: 'add',
       icon: undefined,
-      label: '自定义按钮',
+      label: 'aasdfFFF',
-      enableIf: (selected) => {
+      loadingIf: (selected, ticked, grid) => {
-        if (selected && selected.length > 0) {
+        if (selected.length === 0) {
           return true;
         }
         return false;
       },
+      // enableIf: (selected) => {
+      //   if (selected && selected.length > 0) {
+      //     return true;
+      //   }
+      //   return false;
+      // },
       // beforeClick: (selected, context, grid) => {
       //   console.info('先执行before');
       //   context.aaa = '111';
       // },
-      click: (selected, context, _click, grid) => {
+      click: (args) => {
         // grid.setQueryCriteria({
         //   fieldName: 'loginName',
         //   operator: 'contains',
         //   value: 'admin',
         // });
-        grid.setFetchDataUrl('a.action');
+        console.info('args=====', args);
-        grid.refresh();
+        args._click();
-        // _click();
       },
       afterClick: (selected, context, grid) => {
         // grid.addEditFormRef.setFieldValue('userName', '李四');
@@ -138,7 +285,14 @@ const testGrid = reactive({
     { label: '登录名', name: 'loginName', type: 'w-text' },
     { label: '用户名', name: 'userName', type: 'w-text' },
     { label: '描述', name: 'description', type: 'w-text' },
-    { label: '是否可用', name: 'enable', type: 'w-select' },
+    { label: '用户名', name: 'userName1', type: 'w-text' },
+    { label: '描述', name: 'description1', type: 'w-text' },
+    {
+      label: '是否可用',
+      name: 'enable',
+      type: 'select',
+      options: [{ label: '监管报表-G4B-1表内信用风险加权资产计算表(权重法)', value: '0a981b42-d0df-4f02-94c4-edc20620ba9f' }],
+    },
     // { label: '邮箱地址', name: 'email', type: 'w-text' },
     // { label: '电话', name: 'phone', type: 'w-text' },
     // { label: '手机号', name: 'mobile', type: 'w-number' },
@@ -146,37 +300,52 @@ const testGrid = reactive({
     // { label: '最后修改时间', name: 'lastModifyDate', type: 'w-date' },
   ],
   tableColumns: [
-    // {
+    {
-    //   name: 'info',
+      name: 'info',
-    //   label: '用户信息',
+      label: '用户信息',
-    //   hidden: true,
+      columns: [
-    //   childrenColumns: [
+        { name: 'loginName', label: '登录名', align: 'right' },
-    //     { name: 'loginName', label: '登录名', align: 'right' },
+        { name: 'userName', label: '用户名' },
-    //     { name: 'userName', label: '用户名' },
+      ],
-    //   ],
+    },
-    // },
+    // { name: 'loginName', label: '登录名', align: 'right' },
-    // {
+    // { name: 'userName', label: '用户名' },
-    //   name: 'lxxx',
+    {
-    //   label: '联系方式',
+      name: 'lxxx',
-    //   childrenColumns: [
+      label: '联系方式',
-    //     { name: 'email', label: '邮箱地址' },
+      columns: [
-    //     {
+        {
-    //       name: 'tx',
+          name: 'email',
-    //       label: '通讯',
+          label: '邮箱地址',
-    //       childrenColumns: [
+          columns: [
-    //         { name: 'phone', label: '电话' },
+            { width: 100, name: 'auc', label: 'auc' },
-    //         { name: 'mobile', label: '手机号' },
+            { width: 100, name: 'ar', label: 'ar' },
-    //       ],
+            { width: 100, name: 'ks', label: 'ks' },
-    //     },
+          ],
-    //     { name: 'qq', label: 'QQ' },
+        },
-    //   ],
+        {
-    // },
+          name: 'tx',
-    { name: 'loginName', label: '登录名', align: 'right' },
+          label: '通讯',
-    { name: 'userName', label: '用户名' },
+          columns: [
-    { name: 'email', label: '邮箱地址' },
+            { name: 'phone', label: '电话' },
-    { name: 'phone', label: '电话' },
+            { name: 'mobile', 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',
@@ -184,15 +353,21 @@ const testGrid = reactive({
       align: 'center',
       width: 400,
       format: (val, row) => {
-        // return '1<br/>2';
         return {
-          componentType: 'q-icon',
+          componentType: 'q-checkbox',
+          bindModelValue: true,
           attrs: {
-            name: val ? IconEnum.是状态 : IconEnum.否状态,
+            dense: true,
-            color: val ? 'green' : 'red',
-            size: 'xs',
           },
         };
+        // return {
+        //   componentType: 'q-icon',
+        //   attrs: {
+        //     name: val ? IconEnum.是状态 : IconEnum.否状态,
+        //     color: val ? 'green' : 'red',
+        //     size: 'xs',
+        //   },
+        // };
       },
     },
     // { name: 'loginName', label: '登录名', align: 'right' },
@@ -239,9 +414,49 @@ const testGrid = reactive({
       ],
     },
   },
-});
+};
 
 onMounted(() => {
-  // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
+  gridRef.value.setLocalData([
+    {
+      loginName: 'admin1',
+    },
+    {
+      loginName: 'admin2',
+    },
+    {
+      loginName: 'admin3',
+    },
+    {
+      loginName: 'admin4',
+    },
+    {
+      loginName: 'admin5',
+    },
+    {
+      loginName: 'admin6',
+    },
+    {
+      loginName: 'admin7',
+    },
+    {
+      loginName: 'admin8',
+    },
+    {
+      loginName: 'admin9',
+    },
+    {
+      loginName: 'admin10',
+    },
+    {
+      loginName: 'admin11',
+    },
+    {
+      loginName: 'admin12',
+    },
+    {
+      loginName: 'admin13',
+    },
+  ]);
 });
 </script>