gy-ui-plus 1.0.0

package/packages/j-table/style/table.scss

@@ -0,0 +1,368 @@
+.t-table {
+	z-index: 0;
+	background-color: var(--el-bg-color);
+	margin-top: 8px;
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow: hidden;
+	// padding-bottom: 46px;
+	box-sizing: border-box;
+	.el-table__header-wrapper {
+		height: auto;
+		.el-table__header {
+			margin: 0;
+		}
+	}
+
+	.el-table__body-wrapper {
+		overflow: auto;
+		.el-table__body {
+			margin: 0;
+		}
+	}
+
+	/* 让表格高度与 t-table 等高 */
+	.el-table {
+		height: 100%;
+	}
+	.el-table__inner-wrapper {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+	.el-table__header-wrapper {
+		flex: 0 0 auto;
+	}
+	.el-table__body-wrapper {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow: auto;
+	}
+	.pagination_wrap {
+		width: 100%;
+		height: 40px;
+		background-color: #fff;
+	}
+	.el-pagination {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: 10px;
+		// margin-right: 60px;
+		// margin-right: calc(2% - 20px);
+		// background-color: var(--el-bg-color);
+	}
+
+	// ttable过长省略号
+	.el-table {
+		.el-tooltip {
+			div {
+				-webkit-box-sizing: border-box;
+				box-sizing: border-box;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+			}
+
+			.single_edit_cell {
+				overflow: visible;
+				margin-bottom: 0;
+			}
+		}
+
+		.single_edit_cell {
+			cursor: pointer;
+
+			.slot_edit_name {
+				width: 100%;
+			}
+		}
+	}
+
+	// 多级表头过长省略号
+	.multile_head_column {
+		.el-table__row {
+			.el-tooltip {
+				div {
+					-webkit-box-sizing: border-box;
+					box-sizing: border-box;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					word-break: break-all;
+				}
+			}
+		}
+	}
+
+	// 单元格编辑且无规则校验
+	.el-table {
+		.cell {
+			div {
+				-webkit-box-sizing: border-box;
+				box-sizing: border-box;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				word-break: break-all;
+			}
+
+			.single_edit_cell {
+				overflow: visible;
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	// 单元格编辑有规则校验
+	.el-table {
+		.cell {
+			.t_edit_cell_form_rules {
+				.single_edit_cell {
+					margin-bottom: 15px;
+				}
+			}
+		}
+	}
+
+	.el-table {
+		.cell {
+			.click_edit {
+				display: flex;
+				align-items: center;
+				line-height: 1;
+
+				.el-icon {
+					margin-left: 2px;
+				}
+			}
+		}
+	}
+
+	.el-table--border th:first-child .cell,
+	.el-table--border td:first-child .cell {
+		padding-left: 5px;
+	}
+
+	.header_wrap {
+		display: flex;
+		align-items: center;
+
+		.toolbar_top {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+
+			.toolbar {
+				display: flex;
+				justify-content: flex-end;
+				width: 100%;
+			}
+
+			.el-button--small {
+				height: 32px;
+			}
+
+			.el-button--success {
+				background-color: #355db4;
+				border: 1px solid #355db4;
+			}
+		}
+
+		.header_title {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			font-size: 16px;
+			font-weight: bold;
+			line-height: 35px;
+			margin-left: 10px;
+			color: var(--el-text-color-primary);
+		}
+	}
+
+	.title-tip {
+		display: flex;
+		align-items: center;
+		padding-left: 10px;
+		font-size: 14px;
+	}
+
+	.marginBttom {
+		margin-bottom: -8px;
+	}
+
+	// 单选样式
+	.radioStyle {
+		.el-radio {
+			.el-radio__label {
+				display: none;
+			}
+
+			&:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+				box-shadow: none;
+			}
+		}
+
+		tbody {
+			.el-table__row {
+				cursor: pointer;
+			}
+		}
+	}
+
+	// 复制功能样式
+	.cursor {
+		tbody {
+			.el-table__row {
+				cursor: pointer;
+			}
+		}
+	}
+
+	// 行拖动
+	.row_sort {
+		tbody {
+			.el-table__row {
+				cursor: move;
+			}
+		}
+	}
+
+	.row_sort_none {
+		tbody {
+			.el-table__row {
+				cursor: default;
+			}
+
+			.row_drag {
+				cursor: move;
+			}
+		}
+	}
+
+	// treeTable样式
+	.tree_style {
+		.el-table__body-wrapper {
+			.el-table__body {
+				.cell {
+					display: flex;
+					align-items: center;
+
+					.el-table__expand-icon {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+
+	// 选中行样式
+	.highlightCurrentRow {
+		.current-row {
+			cursor: pointer;
+
+			> td.el-table__cell {
+				background-color: var(--el-table-current-row-bg-color);
+			}
+		}
+	}
+
+	.el-table--scrollable-y .el-table__body-wrapper {
+		overflow-x: auto;
+	}
+
+	.handle_wrap {
+		position: sticky;
+		z-index: 10;
+		right: 0;
+		bottom: -8px;
+		margin: 0 -8px -8px;
+		padding: 12px 16px;
+		background-color: var(--el-bg-color);
+		border-top: 1px solid var(--el-table-border);
+
+		.el-btn {
+			margin-left: 8px;
+		}
+	}
+
+	.operator {
+		.operator_btn {
+			.oper_more_dropdown {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+
+.column_set {
+	.title {
+		font-weight: bold;
+		font-size: 14px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 10px 10px 0 10px;
+		color: var(--el-text-color-primary);
+	}
+
+	.el-dropdown-menu {
+		padding: 0;
+		font-size: 14px;
+
+		.el-dropdown-menu__item {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			padding: 0;
+
+			.t_table_column_setting_dropdown {
+				display: flex;
+				flex-direction: column;
+				max-height: 400px;
+				overflow-y: auto;
+				width: 100%;
+				padding: 0 10px 0 12px;
+				gap: 10px;
+
+				&:hover {
+					background-color: transparent;
+				}
+
+				.el-tree-node {
+					.el-tree-node__content {
+						padding: 10px;
+						cursor: default;
+
+						&:hover {
+							color: var(--el-color-primary);
+						}
+
+						.el-tree-node__expand-icon {
+							display: none;
+						}
+
+						.el-tree-node__label {
+							display: inline-block;
+							cursor: move;
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+
+		.el-dropdown-menu__item:not(.is-disabled):hover {
+			background-color: transparent;
+		}
+	}
+}
+
+.oper_more_dropdown_menu {
+	.el-dropdown-menu__item {
+		padding: 5px 16px;
+	}
+}

package/packages/withInstall.ts

@@ -0,0 +1,21 @@
+import { App, Plugin } from 'vue'
+
+type SFCWithInstall<T> = T & Plugin
+
+export const withInstall = <T, E extends Record<string, any>>(
+  main: T,
+  extra?: E
+) => {
+  ;(main as SFCWithInstall<T>).install = (app: App) => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp)
+    }
+  }
+  if (extra) {
+    for (const [compName, comp] of Object.entries(extra)) {
+      ;(main as Record<string, any>)[compName] = comp
+    }
+  }
+  // 将 T 断言为具体的类型 T & plugin & Record<string, any>
+  return main as SFCWithInstall<T> & E
+}