gy-ui-plus 1.0.6 → 1.0.7

package/packages/table/style/table.scss

@@ -0,0 +1,348 @@
+.t-table {
+  z-index: 0;
+  background-color: var(--el-bg-color);
+
+  .el-table__header-wrapper {
+    .el-table__header {
+      margin: 0;
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-table__body {
+      margin: 0;
+    }
+  }
+
+  .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-form-item__content {
+            overflow: visible;
+
+            .el-form-item__error {
+              overflow: visible;
+            }
+          }
+
+
+        }
+      }
+    }
+  }
+
+  .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/dist/gy-ui-plus.css

@@ -1 +0,0 @@
-@charset "UTF-8";.t-table[data-v-09defa6b]{z-index:0;background-color:var(--el-bg-color);margin-top:8px;flex:1 1 auto;min-height:0;overflow:hidden;box-sizing:border-box}.t-table .el-table__header-wrapper[data-v-09defa6b]{height:auto}.t-table .el-table__header-wrapper .el-table__header[data-v-09defa6b]{margin:0}.t-table .el-table__body-wrapper[data-v-09defa6b]{overflow:auto}.t-table .el-table__body-wrapper .el-table__body[data-v-09defa6b]{margin:0}.t-table .el-table[data-v-09defa6b]{height:100%}.t-table .el-table__inner-wrapper[data-v-09defa6b]{height:100%;display:flex;flex-direction:column;min-height:0}.t-table .el-table__header-wrapper[data-v-09defa6b]{flex:0 0 auto}.t-table .el-table__body-wrapper[data-v-09defa6b]{flex:1 1 auto;min-height:0;overflow:auto}.t-table .pagination_wrap[data-v-09defa6b]{width:100%;height:40px;background-color:#fff}.t-table .el-pagination[data-v-09defa6b]{display:flex;justify-content:flex-end;align-items:center;margin-top:10px}.t-table .el-table .el-tooltip div[data-v-09defa6b]{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.t-table .el-table .el-tooltip .single_edit_cell[data-v-09defa6b]{overflow:visible;margin-bottom:0}.t-table .el-table .single_edit_cell[data-v-09defa6b]{cursor:pointer}.t-table .el-table .single_edit_cell .slot_edit_name[data-v-09defa6b]{width:100%}.t-table .multile_head_column .el-table__row .el-tooltip div[data-v-09defa6b],.t-table .el-table .cell div[data-v-09defa6b]{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.t-table .el-table .cell .single_edit_cell[data-v-09defa6b]{overflow:visible;margin-bottom:0}.t-table .el-table .cell .t_edit_cell_form_rules .single_edit_cell[data-v-09defa6b]{margin-bottom:15px}.t-table .el-table .cell .click_edit[data-v-09defa6b]{display:flex;align-items:center;line-height:1}.t-table .el-table .cell .click_edit .el-icon[data-v-09defa6b]{margin-left:2px}.t-table .el-table--border th:first-child .cell[data-v-09defa6b],.t-table .el-table--border td:first-child .cell[data-v-09defa6b]{padding-left:5px}.t-table .header_wrap[data-v-09defa6b]{display:flex;align-items:center}.t-table .header_wrap .toolbar_top[data-v-09defa6b]{flex:1;display:flex;align-items:center;justify-content:flex-end}.t-table .header_wrap .toolbar_top .toolbar[data-v-09defa6b]{display:flex;justify-content:flex-end;width:100%}.t-table .header_wrap .toolbar_top .el-button--small[data-v-09defa6b]{height:32px}.t-table .header_wrap .toolbar_top .el-button--success[data-v-09defa6b]{background-color:#355db4;border:1px solid #355db4}.t-table .header_wrap .header_title[data-v-09defa6b]{display:flex;align-items:center;flex:1;font-size:16px;font-weight:700;line-height:35px;margin-left:10px;color:var(--el-text-color-primary)}.t-table .title-tip[data-v-09defa6b]{display:flex;align-items:center;padding-left:10px;font-size:14px}.t-table .marginBttom[data-v-09defa6b]{margin-bottom:-8px}.t-table .radioStyle .el-radio .el-radio__label[data-v-09defa6b]{display:none}.t-table .radioStyle .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner[data-v-09defa6b]{box-shadow:none}.t-table .radioStyle tbody .el-table__row[data-v-09defa6b],.t-table .cursor tbody .el-table__row[data-v-09defa6b]{cursor:pointer}.t-table .row_sort tbody .el-table__row[data-v-09defa6b]{cursor:move}.t-table .row_sort_none tbody .el-table__row[data-v-09defa6b]{cursor:default}.t-table .row_sort_none tbody .row_drag[data-v-09defa6b]{cursor:move}.t-table .tree_style .el-table__body-wrapper .el-table__body .cell[data-v-09defa6b]{display:flex;align-items:center}.t-table .tree_style .el-table__body-wrapper .el-table__body .cell .el-table__expand-icon[data-v-09defa6b]{display:flex;align-items:center;justify-content:center}.t-table .highlightCurrentRow .current-row[data-v-09defa6b]{cursor:pointer}.t-table .highlightCurrentRow .current-row>td.el-table__cell[data-v-09defa6b]{background-color:var(--el-table-current-row-bg-color)}.t-table .el-table--scrollable-y .el-table__body-wrapper[data-v-09defa6b]{overflow-x:auto}.t-table .handle_wrap[data-v-09defa6b]{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)}.t-table .handle_wrap .el-btn[data-v-09defa6b],.t-table .operator .operator_btn .oper_more_dropdown[data-v-09defa6b]{margin-left:8px}.column_set .title[data-v-09defa6b]{font-weight:700;font-size:14px;display:flex;justify-content:center;align-items:center;padding:10px 10px 0;color:var(--el-text-color-primary)}.column_set .el-dropdown-menu[data-v-09defa6b]{padding:0;font-size:14px}.column_set .el-dropdown-menu .el-dropdown-menu__item[data-v-09defa6b]{display:flex;flex-direction:column;align-items:flex-start;padding:0}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown[data-v-09defa6b]{display:flex;flex-direction:column;max-height:400px;overflow-y:auto;width:100%;padding:0 10px 0 12px;gap:10px}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown[data-v-09defa6b]:hover{background-color:transparent}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown .el-tree-node .el-tree-node__content[data-v-09defa6b]{padding:10px;cursor:default}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown .el-tree-node .el-tree-node__content[data-v-09defa6b]:hover{color:var(--el-color-primary)}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown .el-tree-node .el-tree-node__content .el-tree-node__expand-icon[data-v-09defa6b]{display:none}.column_set .el-dropdown-menu .el-dropdown-menu__item .t_table_column_setting_dropdown .el-tree-node .el-tree-node__content .el-tree-node__label[data-v-09defa6b]{display:inline-block;cursor:move;width:100%}.column_set .el-dropdown-menu .el-dropdown-menu__item[data-v-09defa6b]:not(.is-disabled):hover{background-color:transparent}.oper_more_dropdown_menu .el-dropdown-menu__item[data-v-09defa6b]{padding:5px 16px}

package/packages/gy-button/src/index.vue

@@ -1,29 +0,0 @@
-<template>
-  <el-button v-bind="$attrs" @click="handleClick">
-    <slot />
-  </el-button>
-</template>
-<script lang="ts">
-export default {
-  name: 'JButton',
-}
-</script>
-<script setup lang="ts">
-import { ref } from 'vue'
-const props = defineProps({
-  time: {
-    type: Number,
-    default: 1000,
-  },
-})
-// 抛出事件
-const emits = defineEmits(['click'])
-const record = ref(0)
-const handleClick = () => {
-  const newTime = new Date()
-  if (newTime.getTime() - record.value > props.time) {
-    emits('click')
-  }
-  record.value = new Date().getTime()
-}
-</script>

package/packages/gy-table/index.ts

@@ -1,8 +0,0 @@
-import Table from './src/index.vue'
-import { withInstall } from '../withInstall'
-
-export * from './src/tableProps'
-export * from './src/useExpose'
-
-const GyTable = withInstall(Table)
-export default GyTable

package/packages/gy-table/src/TTableColumn.vue

@@ -1,140 +0,0 @@
-<template>
-	<el-table-column
-		v-if="
-			typeof item.isShowCol == 'function'
-				? item.isShowCol(item)
-				: !item.isShowCol
-		"
-		:prop="item.prop"
-		:label="item.label"
-		:type="item.type"
-		:align="item.align || align"
-		:min-width="item['min-width'] || item.minWidth"
-		:width="item.width"
-		:fixed="item.fixed"
-	>
-		<template #header v-if="item.renderHeader">
-			<render-header :column="item" :render="item.renderHeader" />
-		</template>
-		<template v-for="(val, index) of item.children">
-			<t-table-column
-				v-if="val.children"
-				:key="index"
-				:item="val"
-				v-bind="$attrs"
-			>
-				<template v-for="(_index, name) in slots" v-slot:[name]="data">
-					<slot :name="name" v-bind="data"></slot>
-				</template>
-			</t-table-column>
-			<el-table-column
-				v-else
-				:key="val.prop"
-				:prop="val.prop"
-				:label="val.label"
-				:min-width="val['min-width'] || val.minWidth"
-				:width="val.width"
-				:sortable="val.sortable || val.sort || sortable"
-				:align="val.align || align"
-				:fixed="val.fixed"
-				:formatter="val.formatter"
-				v-if="
-					typeof val.isShowCol == 'function'
-						? val.isShowCol(val)
-						: !val.isShowCol
-				"
-				v-bind="{
-					'show-overflow-tooltip': true,
-					...val.bind,
-					...$attrs,
-				}"
-			>
-				<template #header v-if="val.renderHeader">
-					<render-header :column="val" :render="val.renderHeader" />
-				</template>
-				<template #default="scope">
-					<!-- render渲染 -->
-					<template v-if="val.render">
-						<render-col
-							:column="val"
-							:row="scope.row"
-							:render="val.render"
-							:index="scope.$index"
-						/>
-					</template>
-					<!-- 自定义插槽 -->
-					<template v-if="val.slotNameMerge">
-						<slot :name="val.slotNameMerge" :scope="scope"></slot>
-					</template>
-					<!-- 单个单元格编辑 -->
-					<template v-if="val.canEdit">
-						<single-edit-cell
-							:isShowRules="false"
-							:configEdit="val.configEdit"
-							v-model="scope.row[val.prop]"
-							:prop="val.prop"
-							:scope="scope"
-							@handleEvent="
-								({ type, val }) =>
-									emits(
-										'handleEvent',
-										type,
-										val,
-										scope.$index
-									)
-							"
-							v-bind="$attrs"
-						>
-							<template
-								v-for="(_index, name) in slots"
-								v-slot:[name]="data"
-							>
-								<slot :name="name" v-bind="data"></slot>
-							</template>
-						</single-edit-cell>
-					</template>
-					<div
-						v-if="
-							!val.render &&
-							!val.slotNameMerge &&
-							!val.canEdit &&
-							!val.formatter
-						"
-					>
-						{{ scope.row[val.prop] }}
-					</div>
-				</template>
-			</el-table-column>
-		</template>
-	</el-table-column>
-</template>
-
-<script setup lang="ts">
-import SingleEditCell from "./singleEditCell.vue";
-import RenderCol from "./renderCol.vue";
-import RenderHeader from "./renderHeader.vue";
-import { useSlots } from "vue";
-defineOptions({
-	name: "TTableColumn",
-});
-defineProps({
-	item: {
-		type: Object,
-		default: () => {
-			return {};
-		},
-		required: true,
-	},
-	align: {
-		type: String,
-		default: "center",
-	},
-	sortable: {
-		type: [Boolean, String],
-	},
-});
-// 抛出事件
-const emits = defineEmits(["handleEvent"]);
-// 获取所有插槽
-const slots = useSlots();
-</script>