表格优化提交

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

@@ -1,6 +1,6 @@
 <template>
   <q-tr :class="row.selected ? 'selected' : ''">
-    <q-td :style="{ 'padding-left': '2px' }" class="nowrap text-nowrap">
+    <q-td class="nowrap text-nowrap">
       <div class="flex flex-nowrap items-center">
         <!--层级占位符-->
         <span :style="`width:${27 * props.level}px;`"></span>
@@ -92,6 +92,10 @@ const state = reactive({
   currRow: {},
 });
 
+const tdWidthComputed = computed(() => {
+  return { width: 100 * props.level + 'px' };
+});
+
 watch(
   () => props.row.selected,
   (newVal, oldVal) => {

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

@@ -17,6 +17,7 @@
       :loading="table.loading"
       :class="tableClassComputed"
       :table-style="tableHeightComputed"
+      :row-key="rowKey_"
       @request="onRequest"
       @fullscreen="tableFullscreenFun"
     >
@@ -80,7 +81,7 @@
             >
               <q-checkbox v-model="scope.selected" flat
             /></q-th>
-            <q-th v-else-if="props.checkboxSelection"></q-th>
+            <q-th v-else-if="props.checkboxSelection || props.tree"></q-th>
             <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
               {{ col.label }}
             </q-th>
@@ -199,7 +200,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide } from 'vue';
+import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide, watchEffect } from 'vue';
 import { axios, Environment, NotifyManager, TreeBuilder, VueTools, Tools } from '@/platform';
 import { useQuasar, getCssVar, exportFile } from 'quasar';
 import { IconEnum } from '@/platform/enums';
@@ -1008,7 +1009,7 @@ const requestHandler = async (ops) => {
     reqParams.page = ops.pagination.page;
     reqParams.size = ops.pagination.rowsPerPage;
   }
-  reqParams.pageable = props.pageable;
+  reqParams.pageable = props.tree ? false : props.pageable;
   if (ops.pagination.sortBy && ops.pagination.sortBy !== '') {
     if (ops.pagination.descending) {
       reqParams.sortBy = '-' + ops.pagination.sortBy;
@@ -1039,7 +1040,7 @@ const onRequest = async (ops: any) => {
     if (Array.isArray(responseData)) {
       table.rows = responseData;
       table.pagination.rowsNumber = responseData.length;
-    } else if (typeof responseData === 'object') {
+    } else if (typeof responseData === 'object' && responseData.content) {
       if (props.pageable) {
         table.pagination.page = table.pagination.reqPageStart === 0 ? responseData.number + 1 : responseData.number;
         table.pagination.rowsPerPage = responseData.size || table.pagination.rowsPerPage;
@@ -1050,10 +1051,26 @@ const onRequest = async (ops: any) => {
       table.rows = responseData.content;
     }
   } else if (resp && resp.data && props.tree) {
-    const treeRows = TreeBuilder.build(resp.data);
-    table.pagination.rowsNumber = resp.data.length;
+    const responseData = resp.data;
+    if (Array.isArray(responseData)) {
+      table.pagination.rowsNumber = responseData.length;
+      table.pagination.rowsPerPage = 0;
+      if (props.treeRelationship === 'parent') {
+        const treeRows = TreeBuilder.build(responseData, props.treeRelationshipField, props.treePrimaryField);
+        table.rows = treeRows;
+      } else {
+        table.rows = responseData;
+      }
+    } else if (typeof responseData === 'object' && responseData.content) {
+      table.pagination.rowsNumber = responseData.content.length;
       table.pagination.rowsPerPage = 0;
+      if (props.treeRelationship === 'parent') {
+        const treeRows = TreeBuilder.build(responseData.content, props.treeRelationshipField, props.treePrimaryField);
         table.rows = treeRows;
+      } else {
+        table.rows = responseData.content;
+      }
+    }
   }
   addRowKey(table.rows);
   stickyHeaderColumn();
@@ -1231,10 +1248,20 @@ const getRows = () => {
   return toRaw(table.rows);
 };
 
+watchEffect(() => {
+  url.dataUrl = props.dataUrl;
+  url.fetchDataUrl = props.fetchDataUrl;
+  url.addDataUrl = props.addDataUrl;
+  url.editDataUrl = props.editDataUrl;
+  url.removeDataUrl = props.removeDataUrl;
+});
+
 const refresh = () => {
+  nextTick(() => {
     onRequest({
       pagination: table.pagination,
     });
+  });
 };
 
 const stickyHeaderColumn = () => {
@@ -1785,13 +1812,24 @@ VueTools.expose2Instance(instance);
 :deep(.q-table__top) {
   padding: 8px 8px;
 }
+
+:deep(.q-table th:first-child) {
+  border-left: 1px solid var(--tableBorderColor);
+}
+:deep(.q-table tr td:first-child) {
+  border-left: 1px solid var(--tableBorderColor);
+}
 :deep(.q-table th) {
+  padding: 7px 8px;
+  background-color: inherit;
   border-left-width: 0px;
   border-right-width: 1px;
   border-top-width: 0px;
   border-bottom-width: 1px;
 }
 :deep(.q-table td) {
+  padding: 7px 8px;
+  background-color: inherit;
   border-left-width: 0px;
   border-right-width: 1px;
   border-top-width: 0px;

io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue

@@ -11,7 +11,7 @@
                   <component :is="tdItem.value.componentType" v-bind="tdItem.value.attrs"></component>
                 </template>
                 <template v-else>
-                  {{ tdItem.value }}
+                  <span v-dompurify-html="tdItem.value || ''"></span>
                 </template>
               </td>
             </template>

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

@@ -167,14 +167,17 @@
           @row-click="
             (evt, row, index) => {
               currentSelectedUserId = row.id;
-              if (roleGridRef) {
-                roleGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id);
-                roleGridRef.refresh();
-              }
-              if (orgTreeGridRef) {
-                orgTreeGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id);
-                orgTreeGridRef.refresh();
-              }
+              roleQueryUrl = Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + currentSelectedUserId;
+              orgQueryUrl = Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + currentSelectedUserId;
+              roleGridRef?.refresh();
+              orgTreeGridRef?.refresh();
+              // if (roleGridRef) {
+              //   roleGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/role/queryRolesByUser?userId=') + row.id);
+              // }
+              // if (orgTreeGridRef) {
+              //   orgTreeGridRef.setFetchDataUrl(Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + row.id);
+              // orgTreeGridRef.refresh();
+              // }
             }
           "
         ></w-grid>
@@ -192,7 +195,7 @@
             <w-grid
               ref="roleGridRef"
               :title="$t('system.role.grid.title')"
-              :data-url="Environment.apiContextPath('/api/system/role/queryRolesByUser') + currentSelectedUserId"
+              :data-url="roleQueryUrl"
               :auto-fetch-data="false"
               selection="multiple"
               :full-screen-button="false"
@@ -349,7 +352,7 @@
               ref="orgTreeGridRef"
               :tree="true"
               :title="$t('system.org.grid.title')"
-              :data-url="Environment.apiContextPath('/api/system/org/listAllOrgsWithSelectedStatusByUser?userId=') + currentSelectedUserId"
+              :data-url="orgQueryUrl"
               selection="multiple"
               :full-screen-button="false"
               :toolbar-configure="{ noIcon: true }"
@@ -419,6 +422,7 @@ import SelectRoleDialog from './SelectRoleDialog.vue';
 import SetPasswordDialog from './SetPasswordDialog.vue';
 import UserStatusTag from './UserStatusTag.vue';
 import RoleStatusTag from './RoleStatusTag.vue';
+import { nextTick } from 'vue';
 
 const { t } = useI18n();
 
@@ -433,6 +437,9 @@ const setPasswordDialogRef = ref();
 const DataComeFromEnum = await EnumTools.fetch('io.sc.platform.orm.api.enums.DataComeFrom');
 const currentSelectedUserId = ref();
 
+const roleQueryUrl = ref('');
+const orgQueryUrl = ref('');
+
 const orgConfigure = {
   actions: [
     {

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

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div>
     <w-grid
       ref="gridRef"
@@ -6,6 +6,7 @@
       draggable
       sort-no
       tree
+      :checkbox-selection="false"
       :data-url="testGrid.dataUrl"
       :fetch-data-url="testGrid.fetchDataUrl"
       :columns="testGrid.tableColumns"
@@ -128,7 +129,227 @@ const testGrid = {
   ],
 };
 
+onMounted(() => {
+  // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
+});
+</script> -->
+
+<template>
+  <div>
+    <w-grid
+      ref="gridRef"
+      :title="testGrid.title"
+      draggable
+      sort-no
+      :pageable="false"
+      tree
+      tree-relationship-field="parentId"
+      :checkbox-selection="false"
+      :data-url="testGrid.dataUrl"
+      :fetch-data-url="testGrid.fetchDataUrl"
+      :columns="testGrid.tableColumns"
+      :toolbar-actions="testGrid.toolbar"
+      :query-form-fields="testGrid.queryFormFields"
+      :query-form-cols-num="3"
+      @selection="selection"
+    ></w-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { axios, Environment } from '@/platform';
+import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
+import { IconEnum } from '@/platform/enums';
+
+const { t } = useI18n();
+
+const gridRef = ref();
+const selection = (details) => {
+  console.info('details====', details);
+};
+const testGrid = {
+  title: '菜单列表',
+  dataUrl: Environment.apiContextPath('api/system/menu'),
+  fetchDataUrl: Environment.apiContextPath('/api/developer/plugins/parameters'),
+  toolbar: [
+    ['query', 'separator', 'moreQuery'],
+    'reset',
+    'refresh',
+    'separator',
+    {
+      name: 'custBtn',
+      extend: 'add',
+      icon: undefined,
+      label: '自定义按钮',
+      enableIf: (selected, grid) => {
+        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(selected);
+      },
+      afterClick: (selected, context, grid) => {
+        console.info('=grid==', grid.getEditorForm());
+        // gridRefs.addEditFormRef.setFieldValue('userName', '李四');
+      },
+    },
+    [
+      {
+        name: 'op',
+        icon: 'difference',
+        label: '操作',
+      },
+      'add',
+      'edit',
+      'clone',
+      'remove',
+      'separator',
+      'view',
+      'export',
+    ],
+    'separator',
+  ],
+  queryFormFields: [
+    { label: '菜单名称', name: 'name', type: 'w-password' },
+    { label: '菜单类型', name: 'userName', type: 'select' },
+    { label: '是否可用', name: 'enable', type: 'select' },
+  ],
+  tableColumns: [
+    {
+      name: 'id',
+      label: 'id',
+    },
+    {
+      name: 'parentId',
+      label: 'parentId',
+    },
+    { name: 'code', label: 'code' },
+    { name: 'defaultValue', label: 'defaultValue' },
+    {
+      name: 'order',
+      label: 'order',
+    },
+    { name: 'configurationFileUrl', label: 'configurationFileUrl' },
+  ],
+};
+
 onMounted(() => {
   // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
 });
 </script>
+
+<!-- <template>
+  <div>
+    <w-grid
+      ref="gridRef"
+      :title="testGrid.title"
+      draggable
+      sort-no
+      :pageable="false"
+      :checkbox-selection="false"
+      :fetch-data-url="testGrid.fetchDataUrl"
+      :columns="testGrid.tableColumns"
+      :toolbar-actions="testGrid.toolbar"
+      :query-form-fields="testGrid.queryFormFields"
+      :query-form-cols-num="3"
+      @selection="selection"
+    ></w-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { axios, Environment } from '@/platform';
+import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
+import { IconEnum } from '@/platform/enums';
+
+const { t } = useI18n();
+
+const gridRef = ref();
+const selection = (details) => {
+  console.info('details====', details);
+};
+const testGrid = {
+  title: '菜单列表',
+  fetchDataUrl: Environment.apiContextPath('/api/developer/plugins/restartProperties'),
+  toolbar: [
+    ['query', 'separator', 'moreQuery'],
+    'reset',
+    'refresh',
+    'separator',
+    {
+      name: 'custBtn',
+      extend: 'add',
+      icon: undefined,
+      label: '自定义按钮',
+      enableIf: (selected, grid) => {
+        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(selected);
+      },
+      afterClick: (selected, context, grid) => {
+        console.info('=grid==', grid.getEditorForm());
+        // gridRefs.addEditFormRef.setFieldValue('userName', '李四');
+      },
+    },
+    [
+      {
+        name: 'op',
+        icon: 'difference',
+        label: '操作',
+      },
+      'add',
+      'edit',
+      'clone',
+      'remove',
+      'separator',
+      'view',
+      'export',
+    ],
+    'separator',
+  ],
+  queryFormFields: [
+    { label: '菜单名称', name: 'name', type: 'w-password' },
+    { label: '菜单类型', name: 'userName', type: 'select' },
+    { label: '是否可用', name: 'enable', type: 'select' },
+  ],
+  tableColumns: [
+    {
+      name: 'id',
+      label: 'id',
+    },
+    {
+      name: 'parentId',
+      label: 'parentId',
+    },
+    { name: 'code', label: 'code' },
+    { name: 'defaultValue', label: 'defaultValue' },
+    {
+      name: 'order',
+      label: 'order',
+    },
+    { name: 'configurationFileUrl', label: 'configurationFileUrl' },
+  ],
+};
+
+onMounted(() => {
+  // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
+});
+</script> -->