evui 3.3.10 → 3.3.13

package/src/components/grid/Grid.vue

@@ -108,7 +108,7 @@
               </template>
               <!-- Filter Button -->
               <span
-                v-if="isFilterButton(column.field)"
+                v-if="isFiltering"
                 class="column-filter"
                 @click.capture="onClickFilter(column)"
               >
@@ -150,7 +150,7 @@
               :data-index="row[0]"
               :class="{
                 row: true,
-                selected: row[2] === selectedRow,
+                selected: row[3],
                 'non-border': !!borderStyle && borderStyle !== 'rows',
                 highlight: row[0] === highlightIdx,
               }"
@@ -206,8 +206,8 @@
                   </template>
                   <!-- Cell Value -->
                   <template v-else>
-                    <div :title="getConvertValue(column.type, row[2][column.index])">
-                      {{ getConvertValue(column.type, row[2][column.index]) }}
+                    <div :title="getConvertValue(column, row[2][column.index])">
+                      {{ getConvertValue(column, row[2][column.index]) }}
                     </div>
                   </template>
                 </td>
@@ -246,7 +246,20 @@
       />
     </div>
   </div>
-  <pagination
+  <!-- Summary -->
+  <grid-summary
+    v-if="useSummary"
+    :ordered-columns="orderedColumns"
+    :stores="stores"
+    :use-checkbox="useCheckbox.use"
+    :style-option="{
+      borderStyle,
+      minWidth,
+      rowHeight,
+    }"
+  />
+  <!-- Pagination -->
+  <grid-pagination
     v-if="usePage && !isInfinite"
     v-model="currentPage"
     :total="store.length"
@@ -254,15 +267,15 @@
     :visible-page="visiblePage"
     :show-page-info="showPageInfo"
     :order="order"
-  >
-  </pagination>
+  />
 </template>
 
 <script>
 import { reactive, toRefs, computed, watch, onMounted, onActivated, nextTick } from 'vue';
 import Toolbar from './grid.toolbar';
-import Pagination from './grid.pagination';
 import FilterWindow from './grid.filter.window';
+import GridPagination from './grid.pagination';
+import GridSummary from './grid.summary';
 import {
   commonFunctions,
   scrollEvent,
@@ -280,8 +293,9 @@ export default {
   name: 'EvGrid',
   components: {
     Toolbar,
-    Pagination,
     FilterWindow,
+    GridPagination,
+    GridSummary,
   },
   props: {
     columns: {
@@ -323,9 +337,10 @@ export default {
     'page-change': null,
   },
   setup(props) {
-    const ROW_INDEX = 0;
+    // const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
     const ROW_DATA_INDEX = 2;
+    const ROW_SELECT_INDEX = 3;
     const {
       isRenderer,
       getComponentName,
@@ -333,11 +348,11 @@ export default {
       getColumnIndex,
       setPixelUnit,
     } = commonFunctions();
-    const showHeader = computed(() =>
-      (props.option.showHeader === undefined ? true : props.option.showHeader));
+    const showHeader = computed(() => (props.option.showHeader ?? true));
+    const useSummary = computed(() => (props.option?.useSummary || false));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
     const borderStyle = computed(() => (props.option.style?.border || ''));
-    const highlightIdx = computed(() => (props.option.style?.highlight || -1));
+    const highlightIdx = computed(() => (props.option.style?.highlight ?? -1));
     const rowMinHeight = props.option.rowMinHeight || 35;
     const elementInfo = reactive({
       body: null,
@@ -347,8 +362,7 @@ export default {
     });
     const filterInfo = reactive({
       filterList: {},
-      isFiltering: computed(() =>
-        (props.option.useFilter === undefined ? true : props.option.useFilter)),
+      isFiltering: computed(() => (props.option.useFilter ?? false)),
       setFiltering: false,
       showFilterWindow: false,
       currentFilter: {
@@ -384,12 +398,13 @@ export default {
       showPageInfo: computed(() => (props.option.page?.showPageInfo || false)),
       isClientPaging: computed(() =>
         pageInfo.useClient && pageInfo.usePage && !pageInfo.isInfinite),
+      isHighlight: false,
+      highlightPage: 0,
     });
     const checkInfo = reactive({
       prevCheckedRow: [],
       isHeaderChecked: false,
       checkedRows: props.checked,
-      checkedIndex: new Set(),
       useCheckbox: computed(() => (props.option.useCheckbox || {})),
     });
     const scrollInfo = reactive({
@@ -402,8 +417,14 @@ export default {
       hasVerticalScrollBar: false,
     });
     const selectInfo = reactive({
-      useSelect: props.option.useSelect === undefined ? true : props.option.useSelect,
       selectedRow: props.selected,
+      useSelect: computed(() => props.option?.useSelection?.use ?? true),
+      limitCount: computed(() => {
+        let limit = props.option?.useSelection?.limitCount;
+        limit = !!limit && limit >= 2 ? limit : 0;
+        return limit;
+      }),
+      multiple: computed(() => props.option?.useSelection?.multiple ?? false),
     });
     const sortInfo = reactive({
       isSorting: false,
@@ -430,12 +451,17 @@ export default {
     });
     const clearCheckInfo = () => {
       checkInfo.checkedRows = [];
-      checkInfo.checkedIndex.clear();
       checkInfo.isHeaderChecked = false;
       stores.store.forEach((row) => {
         row[ROW_CHECK_INDEX] = false;
       });
     };
+    const clearSelectInfo = () => {
+      selectInfo.selectedRow = [];
+      stores.store.forEach((row) => {
+        row[ROW_SELECT_INDEX] = false;
+      });
+    };
     const {
       getPagingData,
       updatePagingInfo,
@@ -466,7 +492,7 @@ export default {
     const {
       onRowClick,
       onRowDblClick,
-    } = clickEvent(selectInfo);
+    } = clickEvent({ selectInfo });
 
     const {
       onCheck,
@@ -579,22 +605,23 @@ export default {
     );
     watch(
       () => props.checked,
-      (checkedList) => {
-        checkInfo.checkedRows = checkedList;
+      (value) => {
+        checkInfo.checkedRows = value;
+      },
+    );
+    watch(
+      () => checkInfo.checkedRows,
+      (value) => {
         checkInfo.isHeaderChecked = false;
-        checkInfo.checkedIndex.clear();
         let store = stores.store;
         if (pageInfo.isClientPaging) {
           store = getPagingData();
         }
         if (store.length) {
           store.forEach((row) => {
-            row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
-            if (row[ROW_CHECK_INDEX]) {
-              checkInfo.checkedIndex.add(row[ROW_INDEX]);
-            }
+            row[ROW_CHECK_INDEX] = value.includes(row[ROW_DATA_INDEX]);
           });
-          checkInfo.isHeaderChecked = checkedList.length === store.length;
+          checkInfo.isHeaderChecked = value.length === store.length;
         }
         updateVScroll();
       },
@@ -602,7 +629,37 @@ export default {
     watch(
       () => props.selected,
       (value) => {
-        selectInfo.selectedRow = value;
+        if (selectInfo.useSelect) {
+          selectInfo.selectedRow = value;
+        }
+      },
+    );
+    watch(
+      () => selectInfo.selectedRow,
+      (value) => {
+        if (selectInfo.useSelect) {
+          stores.store.forEach((row) => {
+            row[ROW_SELECT_INDEX] = value.includes(row[ROW_DATA_INDEX]);
+          });
+          updateVScroll();
+        }
+      },
+    );
+    watch(
+      () => highlightIdx.value,
+      async (index) => {
+        await nextTick();
+        if (index >= 0) {
+          if (pageInfo.usePage && !pageInfo.isInfinite) {
+            pageInfo.highlightPage = Math.ceil(index / pageInfo.perPage) || 1;
+            if (pageInfo.highlightPage !== pageInfo.currentPage) {
+              pageInfo.currentPage = pageInfo.highlightPage;
+              pageInfo.isHighlight = true;
+              return;
+            }
+          }
+          elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+        }
       },
     );
     watch(
@@ -611,6 +668,18 @@ export default {
         clearCheckInfo();
       },
     );
+    watch(
+      () => selectInfo.useSelect,
+      () => {
+        clearSelectInfo();
+      },
+    );
+    watch(
+      () => selectInfo.multiple,
+      () => {
+        clearSelectInfo();
+      },
+    );
     watch(
       () => props.checked.length,
       (checkedSize) => {
@@ -652,13 +721,11 @@ export default {
           onSearch(value?.value ?? value);
           if (pageInfo.isClientPaging) {
             clearCheckInfo();
+            clearSelectInfo();
           }
         }
       }, { immediate: true },
     );
-    const isFilterButton = field => filterInfo.isFiltering
-      && field !== 'db-icon'
-      && field !== 'user-icon';
     watch(
       () => props.option.page?.currentPage,
       (value) => {
@@ -667,14 +734,19 @@ export default {
       }, { immediate: true },
     );
     watch(
-      () => [pageInfo.currentPage, pageInfo.perPage],
-      (currentVal, beforeVal) => {
+      () => pageInfo.currentPage,
+      (current, before) => {
         nextTick(() => {
-          changePage(beforeVal[0]);
-          if (pageInfo.isClientPaging && currentVal[0] !== beforeVal[0]) {
+          changePage(before);
+          if (pageInfo.isClientPaging && current !== before) {
             clearCheckInfo();
+            clearSelectInfo();
           }
           updateVScroll();
+          if (current === pageInfo.highlightPage && pageInfo.isHighlight) {
+            elementInfo.body.scrollTop = resizeInfo.rowHeight * highlightIdx.value;
+            pageInfo.isHighlight = !pageInfo.isHighlight;
+          }
         });
       },
     );
@@ -683,6 +755,8 @@ export default {
       stripeStyle,
       borderStyle,
       highlightIdx,
+      useSummary,
+      stores,
       ...toRefs(elementInfo),
       ...toRefs(stores),
       ...toRefs(filterInfo),
@@ -719,7 +793,6 @@ export default {
       setContextMenu,
       onContextMenu,
       onSearch,
-      isFilterButton,
     };
   },
 };

package/src/components/grid/grid.summary.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    :class="{
+      'grid-summary': true,
+      'non-border': styleInfo.borderStyle === 'none',
+    }"
+  >
+    <ul class="column-list">
+      <li
+        v-if="showCheckbox"
+        :class="{
+          'column': true,
+          'non-border': !!styleInfo.borderStyle,
+        }"
+        :style="{
+          'width': `${styleInfo.minWidth}px`,
+          'line-height': `${styleInfo.rowHeight}px`
+        }"
+      >
+        <span :style="{'height': `${styleInfo.rowHeight}px`}" />
+      </li>
+      <template
+        v-for="(column, index) in columns"
+        :key="`summary_${index}`"
+      >
+        <li
+          v-if="!column.hide"
+          :class="{
+            column: true,
+            'non-border': !!styleInfo.borderStyle,
+            [column.type]: column.type,
+            [column.align]: column.align,
+          }"
+          :style="{
+            width: `${column.width}px`,
+            'min-width': `${styleInfo.minWidth}px`,
+            'line-height': `${styleInfo.rowHeight}px`,
+          }"
+        >
+          <span
+            v-if="column.summaryType || column.summaryRenderer"
+            :style="{
+              width: '100%',
+              height: `${styleInfo.rowHeight}px`,
+            }"
+          >
+            <template v-if="column.summaryRenderer">
+              {{ getSummaryRenderer(column) }}
+            </template>
+            <template v-else>
+              {{ getSummaryValue(column, column.summaryType)}}
+            </template>
+          </span>
+          <span
+            v-else
+            :style="{'height': `${styleInfo.rowHeight}px`}"
+          />
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { numberWithComma } from '@/common/utils';
+
+export default {
+  name: 'EvGridSummary',
+  props: {
+    stores: {
+      type: Object,
+      default: () => ({}),
+    },
+    orderedColumns: {
+      type: Object,
+      default: () => ({}),
+    },
+    useCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    styleOption: {
+      type: Object,
+      default: () => ({}),
+    },
+    isTree: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const ROW_DATA_INDEX = 2;
+    const stores = computed(() => props.stores);
+    const columns = computed(() => props.orderedColumns);
+    const showCheckbox = computed(() => props.useCheckbox);
+    const styleInfo = computed(() => props.styleOption);
+    const getConvertValue = (column, value) => {
+      let convertValue = value;
+
+      if (column.type === 'number') {
+        convertValue = numberWithComma(value);
+        convertValue = convertValue === false ? value : convertValue;
+      } else if (column.type === 'float') {
+        convertValue = convertValue.toFixed(column.decimal ?? 3);
+      }
+
+      return convertValue;
+    };
+    const getColumnIndex = field => columns.value.findIndex(column => column.field === field);
+    const getSummaryValue = (column, summaryType) => {
+      let result = '';
+      const columnIndex = getColumnIndex(column.field);
+      if (columnIndex >= 0) {
+        if (summaryType === 'count') {
+          return stores.value.store.length;
+        }
+        if (column.type === 'number' || column.type === 'float') {
+          let columnValues = [];
+          if (props.isTree) {
+            columnValues = stores.value.store.map(node => node.data?.[column.field]);
+          } else {
+            columnValues = stores.value.store.map(row => row[ROW_DATA_INDEX][columnIndex]);
+          }
+          switch (summaryType) {
+            case 'sum':
+              result = columnValues.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!Number.isNaN(value)) {
+                  return prev + value;
+                }
+                return prev;
+              }, 0);
+              break;
+            case 'average':
+              result = columnValues.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!Number.isNaN(value)) {
+                  return prev + value;
+                }
+                return prev;
+              }, 0) / columnValues.length;
+              if (result % 1 !== 0) {
+                result = result.toFixed(1);
+              }
+              break;
+            case 'max':
+              result = Math.max(...columnValues);
+              break;
+            case 'min':
+              result = Math.min(...columnValues);
+              break;
+            default:
+              break;
+          }
+          result = getConvertValue(column, result);
+        }
+      }
+      return result;
+    };
+    const getSummaryRenderer = (column) => {
+      const str = column.summaryRenderer;
+      const summaryData = column.summaryData ? column.summaryData : [];
+      const fields = [column.field, ...summaryData];
+      let result = str;
+      fields.forEach((name, idx) => {
+        const columnIndex = getColumnIndex(name);
+        if (columnIndex >= 0) {
+          const value = getSummaryValue(
+            stores.value.orderedColumns[columnIndex],
+            column.summaryType,
+          );
+          result = result.replace(`{${idx}}`, value);
+        }
+      });
+      return result;
+    };
+    return {
+      columns,
+      styleInfo,
+      showCheckbox,
+      getSummaryValue,
+      getSummaryRenderer,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'style/grid.scss';
+.grid-summary {
+  @include evThemify() {
+    border-bottom: 1px solid evThemed('disabled');
+    background-color: evThemed('background-lighten');
+  }
+  .non-border {
+    border-bottom: none !important;
+  }
+  span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
+  }
+  .column {
+    &.number,
+    &.float {
+      text-align: right;
+    }
+    &.string,
+    &.stringNumber {
+      text-align: left;
+    }
+    &.center {
+      text-align: center;
+    }
+    &.left {
+      text-align: left;
+      .wrap {
+        justify-content: flex-start;
+      }
+    }
+    &.right {
+      text-align: right;
+      .wrap {
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>

package/src/components/grid/style/grid.scss

@@ -71,11 +71,6 @@
     font-size: 13px;
     color: #005CC8;
   }
-  &.db-icon, &.user-icon {
-    width: 42px !important;
-    min-width: 42px !important;
-    border-right: 0;
-  }
 }
 
 .column-name {
@@ -229,14 +224,6 @@
     &:last-child {
       border-right: 0;
     }
-    &.user-icon {
-      height: auto !important;
-    }
-    &.db-icon, &.user-icon {
-      width: 42px !important;
-      min-width: 42px !important;
-      border-right: 0;
-    }
   }
 }
 
@@ -271,4 +258,3 @@
   height: 30px;
   text-align: center;
 }
-