表格优化提交

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="tdWidthComputed" class="nowrap text-nowrap">
+  <q-tr :class="row.selected ? 'selected' : ''" @click="click($event, row, row.rowIndex)">
+    <q-td class="nowrap text-nowrap">
       <div class="flex flex-nowrap items-center">
         <!--层级占位符-->
         <span :style="`width:${27 * props.level}px;`"></span>
@@ -8,11 +8,10 @@
         <q-btn
           v-if="row.children && row.children.length > 0"
           flat
-          size="16px"
           dense
           padding="0px 0px"
           :icon="state.currRow.expand ? 'bi-dash' : 'bi-plus'"
-          @click="expandFun"
+          @click.stop="expandFun"
         />
         <!--展开按钮占位符-->
         <span v-else style="width: 27px"></span>
@@ -21,26 +20,35 @@
           v-if="gridProps.checkboxSelection"
           v-model="state.currRow.selected"
           flat
-          size="40px"
           dense
           @update:model-value="selectedFun(state.currRow.selected, state.currRow)"
         />
-        <!--文件夹图标-->
-        <q-icon v-if="row.children && row.children.length > 0" :name="'folder'" color="amber" size="20px" class="px-1"></q-icon>
-        <!--文件图标-->
-        <q-icon v-else name="note" size="20px" class="px-1"></q-icon>
-      </div>
-    </q-td>
-    <q-td v-for="col in cols" :key="col.name" :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''" @click="click($el, row, row.rowIndex)">
-      <div class="flex flex-nowrap items-center">
-        <template v-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="col.value || ''"></span>
+        <!--图标-->
+        <q-icon v-if="typeof iconComputed === 'string'" :name="iconComputed" size="20px" class="px-1"></q-icon>
+        <q-icon v-else-if="typeof iconComputed === 'object'" size="20px" v-bind="iconComputed" class="px-1"></q-icon>
+        <span v-else class="px-1"></span>
+        <template v-if="cols[0]">
+          <template v-if="cols[0].value && typeof cols[0].value === 'object' && cols[0].value.componentType">
+            <component :is="cols[0].value.componentType" v-bind="cols[0].value.attrs"></component>
+          </template>
+          <template v-else>
+            <span v-dompurify-html="cols[0].value || ''"></span>
+          </template>
         </template>
       </div>
     </q-td>
+    <template v-for="(col, index) in cols" :key="col.name">
+      <q-td v-if="index > 0" :title="col.classes?.indexOf('truncate') > -1 ? col.value : ''" @click="click($event, row, row.rowIndex)">
+        <div class="flex flex-nowrap items-center">
+          <template v-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="col.value || ''"></span>
+          </template>
+        </div>
+      </q-td>
+    </template>
   </q-tr>
   <template v-for="child in row.children" :key="child[rowKey]">
     <TreeGridRow
@@ -83,7 +91,7 @@ const props = defineProps({
       return {};
     },
   },
-  rowKey: { type: String, default: 'rowKey_' },
+  rowKey: { type: String, default: '_rowKey_' },
   selection: { type: String, default: 'single' },
 });
 
@@ -92,12 +100,6 @@ const state = reactive({
   currRow: {},
 });
 
-const tdWidthComputed = computed(() => {
-  let width = props.gridProps.checkboxSelection ? 28 * (3 + props.level) : 28 * (2 + props.level);
-  const padding = 8 * 3;
-  return { width: width + padding + 'px', minWidth: width + padding + 'px' };
-});
-
 watch(
   () => props.row.selected,
   (newVal, oldVal) => {
@@ -105,6 +107,21 @@ watch(
   },
 );
 
+const iconComputed = computed(() => {
+  if (props.gridProps.treeIcon) {
+    return props.gridProps.treeIcon(props.row);
+  } else {
+    if (props.row.children && props.row.children.length > 0) {
+      return {
+        name: 'folder',
+        color: 'amber',
+      };
+    } else {
+      return 'note';
+    }
+  }
+});
+
 // 根据传入的行获取表格记录中当前行对象
 const getCurrRow = (arr) => {
   for (let i = 0; i < arr.length; i++) {
@@ -124,7 +141,7 @@ const getRow = (arr, key, parent) => {
   let result = undefined;
   for (let i = 0; i < arr.length; i++) {
     let item = arr[i];
-    if (parent ? item[props.gridProps.treePrimaryField] === key : item[props.rowKey] === key) {
+    if (parent ? item[props.gridProps.primaryKey] === key : item[props.rowKey] === key) {
       result = item;
       break;
     } else if (item.children && item.children.length > 0) {
@@ -242,7 +259,13 @@ const childColsHandler = (child) => {
   const cols = <any>[];
   props.cols.forEach((col) => {
     if (props.columnsMap.get(col.name) && props.columnsMap.get(col.name).format) {
-      cols.push({ ...col, value: props.columnsMap.get(col.name).format(child[col.name]) });
+      let value = child[col.name];
+      try {
+        value = props.columnsMap.get(col.name).format(child[col.name], child);
+      } catch (error) {
+        console.error('format error!');
+      }
+      cols.push({ ...col, value: value });
     } else {
       cols.push({ ...col, value: child[col.name] });
     }
@@ -250,7 +273,7 @@ const childColsHandler = (child) => {
   return cols;
 };
 
-const click = (el, row, rowIndex) => {
+const click = (evt, row, rowIndex) => {
   table.rows.forEach((item) => {
     selectedFun(false, item);
   });

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

@@ -56,7 +56,7 @@
               :rowspan="columnTitleState.columnTitleRowNum"
               :style="moreColumnTitleTableSelectionStyle"
             >
-              <q-checkbox v-model="scope.selected" flat />
+              <q-checkbox v-model="scope.selected" flat :dense="denseHeader || attrs.dense ? true : false" />
             </q-th>
             <q-th v-if="rIndex === 0 && props.sortNo" :rowspan="columnTitleState.columnTitleRowNum" :style="moreColumnTitleTableSortNoStyle"> 序号 </q-th>
             <q-th
@@ -79,9 +79,9 @@
               :style="props.tree ? '' : 'padding: 0; width: 50px'"
               auto-width
             >
-              <q-checkbox v-model="scope.selected" flat
+              <q-checkbox v-model="scope.selected" flat :dense="denseHeader || attrs.dense ? true : false"
             /></q-th>
-            <q-th v-else-if="props.checkboxSelection || props.tree"></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>
@@ -99,9 +99,9 @@
             :selection="selectionComputed"
           ></TreeGridRow>
         </template>
-        <q-tr v-else :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
+        <q-tr v-else :props="scope" @click="rowClick($event, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
           <q-td v-if="props.checkboxSelection" class="text-center" style="padding: 0; width: 50px">
-            <q-checkbox v-model="scope.selected" flat />
+            <q-checkbox v-model="scope.selected" flat :dense="denseBody || attrs.dense ? true : false" />
           </q-td>
           <template v-if="draggable">
             <q-td
@@ -233,11 +233,12 @@ const props = defineProps({
   leftColumnStickyNumber: { type: Number, default: 0 }, // 从左侧开始冻结列数，复选框与排序列不计算在内，目前支持1-10列。，暂时不提供了以后放到列属性中，参考el
   checkboxSelection: { type: Boolean, default: true }, // checkbox选择模式，默认启用
   tree: { type: Boolean, default: false }, // 树形表格模式，按照层级关系构建数据并以树形展现
-  treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children
-  treePrimaryField: { type: String, default: 'id' }, // 树形表格模式的数据主键名
-  treeRelationshipField: { type: String, default: 'parent' }, // 树形表格模式的数据关系字段名
+  treeIcon: { type: Function, default: undefined }, // 树形表格模式，图标函数，带有一个参数，行数据
   treeExpand: { type: Boolean, default: false }, // 树形表格数据加载后是否全部展开
   treeExpandChildren: { type: Boolean, default: false }, // 树形表格父节点被选中时是否展开所有的子节点
+  treeRelationship: { type: String, default: 'parent' }, // 树形表格模式的数据关系，包括：parent, children，当为parent时组件根据数据主键与数据外键构建树形数据，否则需要自己构建好树形数据放到children属性中。
+  primaryKey: { type: String, default: 'id' }, // 数据主键（常规表格模式时，该字段可用作内置的编辑删除等功能对应的后端API入参，如：继承RestCrudController的update所需的入参。树形表格模式时，该字段为构建树数据的主键）
+  foreignKey: { type: String, default: 'parent' }, // 数据外键（常规表格模式时，该字段暂时无用，将来可用作多个表格的数据关系字段。树形表格模式时，该字段为构建树数据的关系字段）
   queryCriteria: {
     // 查询条件，查询、翻页、刷新等操作都会带上的查询条件
     type: Object,
@@ -379,7 +380,9 @@ const dialogFormRef = ref();
 const infoRef = ref();
 const tableColumnsMap = arrayToMap('name', props.columns);
 const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
-const rowKey_ = 'rowKey_';
+const rowKey_ = '_rowKey_';
+const selected_ = '_selected_';
+const ticked_ = '_ticked_';
 const url = {
   dataUrl: props.dataUrl,
   fetchDataUrl: props.fetchDataUrl,
@@ -531,7 +534,7 @@ const buttonObj = {
         }).onOk(() => {
           let requestParams: any = {
             method: 'DELETE',
-            url: (url.removeDataUrl || url.dataUrl) + '/' + selected[0][rowKey_],
+            url: (url.removeDataUrl || url.dataUrl) + '/' + selected[0][props.primaryKey],
           };
           axios(requestParams)
             .then((resp) => {
@@ -637,6 +640,7 @@ const titleScopeHandler = (column: any, scope: any) => {
 
 const table = reactive({
   selected: <any>[],
+  ticked: <any>[],
   spaceHeight: 4,
   headerCellHeight: props.denseHeader || attrs.dense ? 24 : 48,
   bodyCellHeight: attrs.dense ? 24 : 48,
@@ -919,7 +923,9 @@ const tableFullscreenFun = (value) => {
 };
 
 const rowClick = (evt: any, row: any, index: any) => {
-  table.selected = [];
+  if (!evt.ctrlKey) {
+    table.selected = [];
+  }
   table.selected.push(row);
   if (props.onRowClick) {
     emit('rowClick', evt, row, index);
@@ -1057,7 +1063,7 @@ const onRequest = async (ops: any) => {
       table.pagination.rowsNumber = responseData.length;
       table.pagination.rowsPerPage = 0;
       if (props.treeRelationship === 'parent') {
-        const treeRows = TreeBuilder.build(responseData, props.treeRelationshipField, props.treePrimaryField);
+        const treeRows = TreeBuilder.build(responseData, props.foreignKey, props.primaryKey);
         table.rows = treeRows;
       } else {
         table.rows = responseData;
@@ -1066,7 +1072,7 @@ const onRequest = async (ops: any) => {
       table.pagination.rowsNumber = responseData.content.length;
       table.pagination.rowsPerPage = 0;
       if (props.treeRelationship === 'parent') {
-        const treeRows = TreeBuilder.build(responseData.content, props.treeRelationshipField, props.treePrimaryField);
+        const treeRows = TreeBuilder.build(responseData.content, props.foreignKey, props.primaryKey);
         table.rows = treeRows;
       } else {
         table.rows = responseData.content;
@@ -1081,6 +1087,7 @@ const addRowKey = (rows: []) => {
   if (rows && rows.length > 0) {
     rows.forEach((item) => {
       item[rowKey_] = Tools.uuid();
+      item['_'];
       if (props.tree && item.children && item.children.length > 0) {
         addRowKey(item.children);
       }
@@ -1095,7 +1102,7 @@ const save = async () => {
   if (validate) {
     let dialogFormData = dialogFormRef.value.getData();
     if (getSelectedRowsComputed.value && getSelectedRowsComputed.value.length > 0) {
-      dialogFormData[rowKey_] = getSelectedRowsComputed.value[0][rowKey_];
+      dialogFormData[props.primaryKey] = getSelectedRowsComputed.value[0][props.primaryKey];
     }
     let submitFlag = true;
     emit('addEditDataSubmitBefore', dialogFormData, (handlerRequestParams: any | boolean) => {
@@ -1115,7 +1122,7 @@ const save = async () => {
             ? url.addDataUrl
               ? url.addDataUrl
               : url.dataUrl
-            : (url.editDataUrl ? url.editDataUrl : url.dataUrl) + '/' + getSelectedRowsComputed.value[0][rowKey_],
+            : (url.editDataUrl ? url.editDataUrl : url.dataUrl) + '/' + getSelectedRowsComputed.value[0][props.primaryKey],
       };
       dialog.dialogButtons[0].loading = false;
       axios(requestParams)
@@ -1147,11 +1154,22 @@ const onView = () => {
     if (props.viewer.panel.fields && props.viewer.panel.fields.length > 0) {
       for (let item of props.viewer.panel.fields) {
         if (item.format) {
-          viewInfo.infoArray.push({ label: item.label, value: item.format(getSelectedRowsComputed.value[0][item.name]) });
+          let value = getSelectedRowsComputed.value[0][item.name];
+          try {
+            value = item.format(getSelectedRowsComputed.value[0][item.name], getSelectedRowsComputed.value[0]);
+          } catch (error) {
+            console.error('format error!');
+          }
+          viewInfo.infoArray.push({ label: item.label, value: value });
         } else {
           let value = null;
           if (tableColumnsMap.get(item.name) && tableColumnsMap.get(item.name).format) {
-            value = tableColumnsMap.get(item.name).format(getSelectedRowsComputed.value[0][item.name]);
+            value = getSelectedRowsComputed.value[0][item.name];
+            try {
+              value = tableColumnsMap.get(item.name).format(getSelectedRowsComputed.value[0][item.name], getSelectedRowsComputed.value[0]);
+            } catch (error) {
+              console.error('format error!');
+            }
           } else {
             value = getSelectedRowsComputed.value[0][item.name];
           }
@@ -1161,7 +1179,13 @@ const onView = () => {
     } else {
       for (let item of tableColumnsMap) {
         if (item[1].format) {
-          viewInfo.infoArray.push({ label: item[1].label, value: item[1].format(getSelectedRowsComputed.value[0][item[0]]) });
+          let value = getSelectedRowsComputed.value[0][item[0]];
+          try {
+            value = item[1].format(getSelectedRowsComputed.value[0][item[0]], getSelectedRowsComputed.value[0]);
+          } catch (error) {
+            console.error('format error!');
+          }
+          viewInfo.infoArray.push({ label: item[1].label, value: value });
         } else {
           viewInfo.infoArray.push({ label: item[1].label, value: getSelectedRowsComputed.value[0][item[0]] });
         }
@@ -1240,8 +1264,16 @@ const getSelectedRowsComputed = computed(() => {
   return selectedRows;
 });
 
-// 获得选择的所有记录
+// 获得选中的所有记录
 const getSelectedRows = () => {
+  if (props.tree) {
+    return getSelectedRowsComputed.value;
+  } else {
+    return getSelectedRowsComputed.value;
+  }
+};
+// 获得勾选的所有记录
+const getTickedRows = () => {
   return getSelectedRowsComputed.value;
 };
 
@@ -1785,6 +1817,7 @@ const setRemoveDataUrl = (url_) => {
 
 defineExpose({
   getSelectedRows,
+  getTickedRows,
   getRows,
   refresh,
   replaceRows,

io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

@@ -236,8 +236,12 @@ const onResize = (size) => {
       availableWidth -= moreActionWidth;
       while (width > availableWidth) {
         index--;
-        width -= buttons_[index].width;
-        _baseActions.pop();
+        if (index >= 0) {
+          width -= buttons_[index].width;
+          _baseActions.pop();
+        } else {
+          break;
+        }
       }
       break;
     } else {

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

@@ -3,8 +3,9 @@
     <w-grid
       :title="testGrid.title"
       draggable
+      :dense="true"
       :data-url="testGrid.tableDataUrl"
-      :checkbox-selection="false"
+      :checkbox-selection="true"
       selection="multiple"
       :columns="testGrid.tableColumns"
       :toolbar-actions="testGrid.toolbar"
@@ -12,6 +13,7 @@
       :editor="testGrid.addEdit"
       :viewer="testGrid.view"
       @selection="selection"
+      @row-click="rowClick"
     ></w-grid>
   </div>
 </template>
@@ -25,8 +27,27 @@ import { IconEnum } from '@/platform/enums';
 const selection = (details) => {
   // console.info('details====', details);
 };
+
+const startY = ref(0);
+const endY = ref(0);
+
 const rowClick = (evt, row, index) => {
-  // console.info('row====', row);
+  if (startY.value === 0) {
+    startY.value = evt.clientY;
+  } else if (evt.shiftKey && endY.value === 0) {
+    endY.value = evt.clientY;
+  }
+  console.info('startY====', startY.value);
+  console.info('endY====', endY.value);
+  // 添加到选择中，同时清空 startY 与 endY
+  if (startY.value > 0 && endY.value > 0) {
+    console.info('添加到选择中，同时清空 startY 与 endY');
+    startY.value = 0;
+    endY.value = 0;
+  }
+
+  // startY.value = 0;
+  // endY.value = 0;
 };
 const rowDbClick = (evt, row, index) => {
   // console.info('row1====', row);

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

@@ -1,4 +1,4 @@
-<!-- <template>
+<template>
   <div>
     <w-grid
       ref="gridRef"
@@ -6,7 +6,9 @@
       draggable
       sort-no
       tree
-      :checkbox-selection="false"
+      :dense="true"
+      :tree-icon="(row) => {}"
+      :checkbox-selection="true"
       :data-url="testGrid.dataUrl"
       :fetch-data-url="testGrid.fetchDataUrl"
       :columns="testGrid.tableColumns"
@@ -88,27 +90,27 @@ const testGrid = {
     {
       name: 'name',
       label: '菜单名称',
-      width: 200,
+      width: '50%',
       format: (val, row) => {
-        return t(val);
+        return t(row.name);
       },
     },
     {
       name: 'icon',
       label: '图标',
-      width: 200,
+      width: '50%',
       format: (val, row) => {
         return {
           componentType: 'q-icon',
           attrs: {
             name: val,
-            size: 'sm',
+            size: 'xs',
           },
         };
       },
     },
-    { name: 'type', label: '菜单类型', width: 200 },
-    { name: 'order', label: '排序号', width: 200 },
+    { name: 'type', label: '菜单类型' },
+    { name: 'order', label: '排序号' },
     {
       name: 'enable',
       label: '是否可用',
@@ -119,7 +121,7 @@ const testGrid = {
           attrs: {
             name: val ? IconEnum.是状态 : IconEnum.否状态,
             color: val ? 'green' : 'red',
-            size: 'sm',
+            size: 'xs',
           },
         };
       },
@@ -132,9 +134,9 @@ const testGrid = {
 onMounted(() => {
   // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
 });
-</script> -->
+</script>
 
-<template>
+<!-- <template>
   <div>
     <w-grid
       ref="gridRef"
@@ -244,7 +246,7 @@ const testGrid = {
 onMounted(() => {
   // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
 });
-</script>
+</script> -->
 
 <!-- <template>
   <div>