raise-common-lib 0.0.1

package/src/lib/common-grid/grid-utils.ts

@@ -0,0 +1,26 @@
+import { times } from "lodash";
+import { IColumnField } from "../constant";
+
+export const initCommonFields = (fields: IColumnField[], translation: any) => {
+	const result = [];
+	fields.forEach((col: IColumnField) => {
+		result.push({
+			...col,
+			columnDisplayName:
+				translation[col.translationCode] ||
+				`${col.translationCode ? "." + col.translationCode : ""}`,
+		});
+	});
+	return [...result];
+};
+
+// 初始化数据集，避免列表为空时没有数据
+export const initList = (num = 25, key = "Id") => {
+	const list = [];
+	times(num, (i) => {
+		list.push({
+			[key]: i,
+		});
+	});
+	return list;
+};

package/src/lib/common-grid/index.component.html

@@ -0,0 +1,80 @@
+<ejs-grid
+	#grid
+	[id]="gridId"
+	[ngClass]="{
+		'hide-Check-box': !alwaysShowCheckbox,
+		'grid-loading': className === 'grid-loading'
+	}"
+	[dataSource]="dataSource"
+	[allowPaging]="allowPaging && pageSettings"
+	[allowResizing]="true"
+	[pageSettings]="pageSettings"
+	[showColumnMenu]="true"
+	[allowSorting]="true"
+	[allowFiltering]="true"
+	[allowExcelExport]="true"
+	[filterSettings]="filterSettings"
+	[resizeSettings]="resizeSettings"
+	[allowSelection]="true"
+	[editSettings]="editSettings"
+	[childGrid]="childGrid"
+	[contextMenuItems]="
+		dataSource && dataSource.length ? contextMenuItems : null
+	"
+	[selectionSettings]="selectionSettings"
+	(recordClick)="_recordClick($event)"
+	(recordDoubleClick)="_recordDoubleClick($event)"
+	(actionBegin)="_actionBegin($event)"
+	(actionComplete)="_actionHandler($event)"
+	(rowSelected)="_rowSelected($event)"
+	(rowDeselected)="_rowDeselected($event)"
+	style="border: none"
+	(contextMenuClick)="_onContextMenu($event)"
+	(contextMenuOpen)="contextMenuOpen($event)"
+	(queryCellInfo)="customiseCell($event)"
+	(dataBound)="_dataBound($event)"
+	(rowDataBound)="_rowDataBound($event)"
+	(rowSelecting)="_rowSelecting($event)"
+	(excelQueryCellInfo)="_exportQueryCellInfo($event)"
+	(load)="_load()"
+>
+	<e-columns>
+		<e-column
+			*ngIf="showCheckBox"
+			type="checkbox"
+			[width]="checkBoxWidth"
+			[showColumnMenu]="false"
+		></e-column>
+		<e-column
+			*ngFor="let item of fields; trackBy: trackByFn"
+			[field]="item.columnName"
+			[filter]="item.filter ? item.filter : { type: 'CheckBox' }"
+			[customAttributes]="
+				item.colName === 'entityUserList' ||
+				item.colName === 'kycProgress'
+					? { class: 'hideColumnFilterClass' }
+					: {}
+			"
+			[headerText]="item.columnDisplayName"
+			[textAlign]="item.textAlign"
+			[showColumnMenu]="item.showColumnMenu === undefined ? true : false"
+			[allowFiltering]="item.allowFiltering === undefined ? true : false"
+			[allowSorting]="item.allowSorting === undefined ? true : false"
+			[editType]="item.editType"
+			[validationRules]="item.validationRules"
+			[type]="item.dataType"
+			[width]="item.width"
+			[minWidth]="item.minWidth"
+			[format]="item.format"
+			[visible]="item.visible"
+			[template]="item.showTemplate ? columnTemplate : undefined"
+			[clipMode]="
+				item.clipMode
+					? item.clipMode
+					: clipMode || 'EllipsisWithTooltip'
+			"
+			[sortComparer]="item.dateComparer"
+		>
+		</e-column>
+	</e-columns>
+</ejs-grid>

package/src/lib/common-grid/index.component.scss

@@ -0,0 +1,230 @@
+.e-grid.e-gridhover
+  tr[role="row"]:hover
+  .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(
+    .e-updatedtd
+  ):not(.e-indentcell) {
+  background: rgba(31, 123, 255, 0.04) !important;
+}
+.e-summaryrow {
+  .e-summarycell {
+    &:nth-child(2) {
+      padding-left: 0 !important;
+    }
+  }
+}
+.e-footerpadding {
+  padding-right: 0 !important;
+  .e-summaryrow {
+    margin-right: 5px !important;
+    .e-indentcell {
+      background-color: unset !important;
+    }
+  }
+}
+kt-common-grid {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  .e-grid {
+    height: 100%;
+    .e-headercontent {
+      margin-right: 0px !important;
+    }
+  }
+}
+.e-grid td.e-active {
+  // SMP2-17564 不能带透明度，否则滚动时重叠左侧表头区域会颜色叠加
+  // background: rgba(31, 123, 255, 0.08) !important;
+  background: #edf5ff !important;
+}
+
+.grid-tools {
+  height: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 7px;
+  .right-opt-group {
+    display: flex;
+    align-items: center;
+    margin-right: 6px;
+  }
+  .tools-button {
+    border: none;
+    font-family: Arial;
+    font-size: 12px;
+    color: #43566c;
+    background: none;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin-right: 16px;
+    &.disabled-button {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    img {
+      margin-right: 4px;
+      height: 16px !important;
+      width: 16px !important;
+    }
+    .tools-font {
+      transform: translateY(1px);
+      display: inline-block;
+    }
+  }
+  .select-num {
+    font-size: 12px;
+    color: #43566c;
+    margin-right: 24px;
+    white-space: nowrap;
+  }
+}
+
+.e-rowcell {
+  padding: 0 8px 0 12px;
+  &.e-gridchkbox {
+    padding: 0 0 0 8px !important;
+  }
+}
+.e-headercell {
+  padding: 0;
+  &:first-child {
+    &.e-defaultcursor {
+      & + .e-headercell {
+        .e-headercelldiv {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+  .e-headercelldiv {
+    margin: 0;
+    padding: 0 20px 0 12px;
+  }
+  .e-headerchkcelldiv {
+    padding: 0 0 0 8px !important;
+  }
+  .e-columnmenu {
+    position: absolute;
+    right: 0;
+    float: unset;
+    margin: 0;
+    padding: 0;
+    top: 8px;
+  }
+  .e-sortfilterdiv {
+    padding-top: 11px;
+  }
+  &.e-rightalign {
+    .e-sortfilterdiv {
+      padding-left: 5px;
+    }
+  }
+}
+.e-detailheadercell {
+  height: 28px !important;
+}
+
+.e-grid {
+  font-family: Arial !important;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: none;
+  overflow: hidden;
+  .e-gridcontent {
+    flex: 1;
+  }
+  .e-content {
+    overflow: scroll !important;
+    &::-webkit-scrollbar {
+      // 滚动条样式
+      width: 5px;
+      height: 5px;
+      background: #ffffff;
+      position: static;
+      z-index: 999;
+      border-radius: 10px;
+    }
+    &::-webkit-scrollbar-thumb {
+      // 滚动条滑块颜色
+      background: #eaedf0;
+      border-radius: 10px;
+    }
+  }
+  .e-gridheader {
+    margin-right: 5px !important;
+    padding-right: 0 !important;
+  }
+  .e-gridcontent,
+  .e-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  .e-gridheader {
+    height: 30px !important;
+  }
+
+  .e-columnheader,
+  .e-headercell,
+  .e-rhandler {
+    height: 28px !important;
+  }
+  .e-headertext {
+    font-size: 10px !important;
+  }
+  .e-headercell .e-columnmenu {
+    color: #929dab;
+  }
+  .e-row {
+    height: 26px !important;
+    line-height: 26px !important;
+  }
+
+  .e-rowcell {
+    font-size: 11px !important;
+    color: #43566c !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 7px;
+    .mat-icon-button {
+      height: 26px;
+      width: 26px;
+      line-height: 26px;
+    }
+    &:empty {
+      height: 26px !important;
+    }
+    &.e-gridchkbox {
+      & + .e-rowcell {
+        padding-left: 0 !important;
+      }
+    }
+  }
+  .e-gridpager {
+    border: none;
+    .e-gridcontent {
+      transform: unset;
+    }
+  }
+  .e-summaryrow {
+    height: 24px !important;
+    .e-indentcell,
+    .e-summarycell {
+      background-color: #fff;
+      border: none;
+      font-family: Arial;
+      font-size: 11px !important;
+      font-weight: bold;
+      color: #43566c;
+      padding: 0 12px;
+    }
+  }
+  .e-row:last-child .e-rowcell {
+    border-bottom: 1px solid #dee2e6;
+  }
+}