hs-admin-ui 1.0.0

package/src/components/base/hsTable/hsTable.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="hs-table__wrapper layout-padding">
+		<el-button @click="addTableData">测试</el-button>
+		<el-card shadow="hover" class="layout-padding-auto">
+			<el-form :model="state.form" size="default" label-width="120px" class="mt35 mb35">
+				<el-row :gutter="35">
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="姓名">
+							<el-input v-model="state.form.name" placeholder="请输入姓名" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="用户归属部门">
+							<el-input v-model="state.form.email" placeholder="请输入用户归属部门" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="登陆账户名">
+							<el-input v-model="state.form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+						<el-form-item label="职务">
+							<el-select v-model="state.form.occupation" placeholder="请选择职务" clearable class="w100">
+								<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+								<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+								<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="手机">
+							<el-input v-model="state.form.phone" placeholder="请输入手机" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="性别">
+							<el-select v-model="state.form.sex" placeholder="请选择性别" clearable class="w100">
+								<el-option label="男" value="1"></el-option>
+								<el-option label="女" value="2"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="登录密码">
+							<el-input v-model="state.form.phone1" placeholder="请输入登录密码" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="权限角色">
+							<el-input v-model="state.form.phone2" placeholder="请输入权限角色" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="创建用户">
+							<el-input v-model="state.form.phone3" placeholder="请输入创建用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="修改用户">
+							<el-input v-model="state.form.phone4" placeholder="请输入修改用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="所属用户">
+							<el-input v-model="state.form.phone5" placeholder="请输入所属用户" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-if="item.show">
+						<el-form-item label="所属部门">
+							<el-input v-model="state.form.phone6" placeholder="请输入所属部门" clearable></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+						<el-form-item>
+							<el-button type="primary" @click="hideShowForm">
+								<SvgIcon name="iconfont icon-biaodan" />
+								{{ item.show ? '隐藏' : '显示' }}
+							</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<div class="hs-table__body">
+				<!-- round
+					stripe
+					border="outer"
+					show-overflow
+					height="600"
+					:row-config="{ keyField: 'id' }"
+					:column-config="{ resizable: true }"
+					:scroll-y="{ enabled: true }"
+					:footer-method="footerMethod"
+					:data="tableConfig.tableData"
+					@checkbox-all="checkboxAll" -->
+				<vxe-table
+					ref="xTable"
+					height="600"
+					v-bind="tableConfig.config"
+					:scroll-y="{ enabled: true }"
+					:footer-method="footerMethod"
+					:data="tableConfig.tableData"
+					@checkbox-all="checkboxAll"
+				>
+					<vxe-column v-bind="column" v-for="(column, index) in tableConfig.columns" :key="index">
+						<template #default="{ row, column, rowIndex, columnIndex }" v-if="column.hsEl && column.hsEl.length > 0">
+							<slot :row="row" :column="column" :rowIndex="rowIndex" :columnIndex="columnIndex" :name="column.field"></slot>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { VxeTablePropTypes } from 'vxe-table';
+import { useHsTableConfig } from './useHsTableConfig';
+const { tableConfig, setTableData } = useHsTableConfig();
+// 定义变量内容
+const state = reactive({
+	height: '100',
+	_height: '100',
+	form: {
+		name: '',
+		email: '',
+		autograph: '',
+		occupation: '',
+		phone: '',
+		sex: '',
+		phone1: '',
+		phone2: '',
+		phone3: '',
+		phone4: '',
+		phone5: '',
+		phone6: '',
+	},
+});
+
+let item = reactive({
+	show: false,
+});
+const hideShowForm = () => {
+	item.show = !item.show;
+	// let height = state.height;
+	if (item.show) {
+		state.height = String(Number(state.height) - 100);
+	} else {
+		state.height = state._height;
+	}
+};
+interface RowVO {
+	id: number;
+	name: string;
+	role: string;
+	sex: string;
+	age: number;
+	address: string;
+}
+
+// ========================================================= 代码分割线 ==========================================================
+
+// ========================================================= 代码分割线 ==========================================================
+
+const checkboxAll = (checked: Element, $event: Event) => {
+	console.debug('checked:', checked, 'event:', $event);
+};
+
+const addTableData = () => {
+	setTableData();
+};
+// setTableData();
+const sumNum = (list: Array<T>, field: string) => {
+	let count = 0;
+	list.forEach((item) => {
+		count += Number(item[field]);
+	});
+	return count;
+};
+
+const footerMethod: VxeTablePropTypes.FooterMethod<RowVO> = ({ columns, data }) => {
+	return [
+		columns.map((column, columnIndex) => {
+			if (columnIndex === 0) {
+				return '平均';
+			}
+			if (['age'].includes(column.field)) {
+				return sumNum(data, column.field);
+			}
+			return '-';
+		}),
+	];
+};
+</script>
+<style scoped lang="scss">
+// 整页超出滚动
+.hs-table__wrapper {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+		.vxe-header--row {
+			background-color: white;
+			color: #000;
+		}
+		.vxe-table--body {
+			color: #000;
+		}
+	}
+}
+</style>

package/src/components/base/hsTable/useHsTableConfig.ts

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { reactive } from 'vue';
+import _ from 'lodash';
+export function useHsTableConfig() {
+	const tableConfig = reactive<any>({
+		config: {
+			border: 'inner',
+			showHeaderOverflow: true,
+      showOverflow: true,
+      // stripe: true,
+			id: 'full_edit_1',
+			height: 600,
+			rowConfig: {
+				keyField: 'id',
+				isHover: true,
+			},
+			columnConfig: {
+				resizable: true,
+			},
+			customConfig: {
+				storage: true,
+				checkMethod({ column }) {
+					if (['nickname', 'role'].includes(column.field)) {
+						return false;
+					}
+					return true;
+				},
+			},
+			printConfig: {
+				columns: [{ field: 'name' }, { field: 'email' }, { field: 'nickname' }, { field: 'age' }, { field: 'amount' }],
+			},
+			sortConfig: {
+				trigger: 'cell',
+				remote: true,
+			},
+			filterConfig: {
+				remote: true,
+			},
+			pagerConfig: {
+				enabled: true,
+				// currentPage: 1,
+				pageSize: 10,
+				pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
+			},
+		},
+		columns: [
+			{ type: 'seq', width: 80, fixed: 'left' },
+			{ type: 'checkbox', width: 80, fixed: 'left' },
+			{
+				field: 'info',
+				title: '自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义自定义',
+				minWidth: '200',
+				hsEl: [
+					{ label: '测试', name: 'test1' },
+					{ label: '测试2', name: 'test2' },
+				],
+			},
+			{ field: 'sex', title: 'Sex', minWidth: '250' },
+			{ field: 'age', title: 'Age', minWidth: '250' },
+			{ field: 'role', title: 'role', minWidth: '250' },
+			{
+				field: 'name',
+				title: 'Name',
+				minWidth: '300',
+				hsEl: [
+					{ label: '测试', name: 'test1' },
+					{ label: '测试2', name: 'test2' },
+				],
+			},
+			{ field: 'address', title: 'Address', minWidth: '500', showOverflow: true },
+		],
+		tableData: [
+			{ id: 1, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '地址地址地址地址地址test abc' },
+			{ id: 2, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '地址地址地址地址地址Guangzhou' },
+			{ id: 3, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '地址地址地址地址地址Shanghai' },
+			{ id: 4, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: '地址地址地址地址地址test abc' },
+			{ id: 5, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: '地址地址地址地址地址Shanghai' },
+			{ id: 6, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: '地址地址地址地址地址test abc' },
+			{ id: 7, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: '地址地址地址地址地址test abc' },
+			{ id: 8, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: '地址地址地址地址地址test abc' },
+		],
+	});
+	const setTableData = () => {
+		let arr = [];
+		for (let i = 9; i <= 30000; i++) {
+			arr.push({ id: i, name: 'Test' + i, role: 'test', sex: 'Man', age: 35, address: '地址地址地址地址地址test' });
+		}
+		tableConfig.tableData = _.concat(tableConfig.tableData, arr);
+		console.debug('tableData:', tableConfig.tableData);
+	};
+	return {
+		tableConfig,
+		setTableData,
+	};
+}

package/src/components/base/hsTable/useTableEvents.ts

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { } from 'vue';
+let _emit:any = Function;
+/**
+   * 当用户手动勾选数据行的 Checkbox 时触发的事件
+   * @param row 
+   * @param column 
+   * @param event 
+   */
+const onSelect = (selection: Element, row: Element) => {
+  _emit('select', selection, row);
+}
+
+/**
+ * 当用户手动勾选全选 Checkbox 时触发的事件
+ * @param selection 
+ */
+const onSelectAll = (selection: Element) => {
+  _emit('select-all', selection);
+}
+
+/**
+ * 当选择项发生变化时会触发该事件
+ * @param selection 
+ */
+
+const onSelectionChange = (selection: Element) => {
+  _emit('selection-change', selection);
+}
+/**
+ * 当单元格 hover 进入时会触发该事件
+ * @param row 
+ * @param column 
+ * @param cell 
+ * @param event 
+ */
+const onCellMouseEnter = (row: Element, column: Element, cell: Element, event: Event) => {
+  _emit('cell-mouse-enter', row, column, cell, event);
+}
+/**
+ * 当单元格 hover 退出时会触发该事件
+ * @param row 
+ * @param column 
+ * @param cell 
+ * @param event 
+ */
+const onCellMouseLeave = (row: Element, column: Element, cell: Element, event: Event) => {
+  _emit('cell-mouse-leave', row, column, cell, event);
+}
+
+/**
+ * 当某个单元格被点击时会触发该事件
+ * @param row 
+ * @param column 
+ * @param cell 
+ * @param event 
+ */
+const onCellClick = (row: Element, column: Element, cell: Element, event: Event) => {
+  _emit('cell-click', row, column, cell, event);
+}
+
+/**
+ * 当某个单元格被双击击时会触发该事件
+ * @param row 
+ * @param column 
+ * @param cell 
+ * @param event 
+ */
+const onCellDblclick = (row: Element, column: Element, cell: Element, event: Event) => {
+  _emit('cell-dblclick', row, column, cell, event);
+}
+
+/**
+ * 当某个单元格被鼠标右键点击时会触发该事件
+ * @param row 
+ * @param column 
+ * @param cell 
+ * @param event 
+ */
+const onCllContextmenu = (row: Element, column: Element, cell: Element, event: Event) => {
+  event.preventDefault();
+  _emit('cell-contextmenu', row, column, cell, event);
+}
+
+/**
+ * 当某一行被点击时会触发该事件
+ * @param row 
+ * @param column 
+ * @param event 
+ */
+const onRowClick = (row:Element, column:Element, event: Event) => {
+  _emit('row-click', row, column, event);
+}
+
+export function useTableEvents(emit: any) {
+  // 赋值给全局的变量
+  _emit = emit;
+  return {
+    // 当用户手动勾选数据行的 Checkbox 时触发的事件
+    onSelect,
+    // 当用户手动勾选全选 Checkbox 时触发的事件
+    onSelectAll,
+    // 当选择项发生变化时会触发该事件
+    onSelectionChange,
+    // 当单元格 hover 进入时会触发该事件
+    onCellMouseEnter,
+    // 当单元格 hover 退出时会触发该事件
+    onCellMouseLeave,
+    // 当某个单元格被点击时会触发该事件
+    onCellClick,
+    // 当某个单元格被双击击时会触发该事件
+    onCellDblclick,
+    // 当某个单元格被鼠标右键点击时会触发该事件
+    onCllContextmenu,
+    // 当某一行被点击时会触发该事件
+    onRowClick,
+  }
+}

package/src/components/base/hsTabs/src/hsTabPane.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-tab-pane ref="tabPaneRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-tab-pane>
+</template>
+
+<script setup lang="ts" name="hsTabPane">
+import { ref } from 'vue';
+// 获取ref
+const tabPaneRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ tabPaneRef });
+</script>

package/src/components/base/hsTabs/src/hsTabs.vue

@@ -0,0 +1,29 @@
+<template>
+	<el-tabs v-model="innerValue" ref="tabsRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-tabs>
+</template>
+
+<script setup lang="ts" name="hsTabs">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number>(
+	() => props.value,
+	(val: string | number) => emit('update:value', val)
+);
+// 获取ref
+const tabsRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ tabsRef });
+</script>

package/src/components/base/hsTag/src/hsCheckTag.vue

@@ -0,0 +1,16 @@
+<template>
+	<el-check-tag ref="checkTagRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-check-tag>
+</template>
+
+<script setup lang="ts" name="hsCheckTag">
+import { ref } from 'vue';
+
+// 获取ref
+const checkTagRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ checkTagRef });
+</script>

package/src/components/base/hsTag/src/hsTag.vue

@@ -0,0 +1,15 @@
+<template>
+	<el-tag ref="tagRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-tag>
+</template>
+
+<script setup lang="ts" name="hsTag">
+import { ref } from 'vue';
+// 获取ref
+const tagRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ tagRef });
+</script>