hs-admin-ui 1.0.0

package/src/components/base/hsResult/src/hsResult.vue

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

package/src/components/base/hsRow/src/hsRow.vue

@@ -0,0 +1,20 @@
+<template>
+	<el-row>
+		<slot></slot>
+	</el-row>
+</template>
+<script setup lang="ts" name="hsRow">
+// import { ref, onMounted, getCurrentInstance } from 'vue';
+// import { useExposeProperties } from '/@/hooks/useExpose';
+// import type { FormInstance } from 'element-plus';
+// // 1.获取表单的ref
+// const elFormItemRef = ref<FormInstance>();
+// // 2.获取实例方法
+// const instance = getCurrentInstance();
+// onMounted(() => {
+// 	// 3.对暴露在内部方法进行遍历赋值后 进行实例挂载
+// 	useExposeProperties(elFormItemRef, instance);
+// });
+// // 4.暴露给外部的内部方法
+// defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsScrollbar/src/hsScrollbar.vue

@@ -0,0 +1,22 @@
+<template>
+	<el-scrollbar ref="scrollbarRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-scrollbar>
+</template>
+
+<script setup lang="ts" name="hsScrollbar">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// 获取ref
+const scrollbarRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(scrollbarRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsSelect/src/hsOption.vue

@@ -0,0 +1,8 @@
+<template>
+	<el-option>
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-option>
+</template>
+<script setup lang="ts" name="hsOption"></script>

package/src/components/base/hsSelect/src/hsOptionGroup.vue

@@ -0,0 +1,8 @@
+<template>
+	<el-option-group>
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-option-group>
+</template>
+<script setup lang="ts" name="hsOptionGroup"></script>

package/src/components/base/hsSelect/src/hsSelect.vue

@@ -0,0 +1,42 @@
+<template>
+	<el-select v-model="innerValue" ref="selectRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-select>
+</template>
+
+<script setup lang="ts" name="hsSelect">
+import { ArrowDown } from '@element-plus/icons-vue';
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [String, Number, Boolean, Object, Array],
+		default: '',
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<string | number | boolean | object | []>(
+	() => props.value,
+	(val: string | number | boolean | object | []) => emit('update:value', val)
+);
+// 获取ref
+const selectRef = ref<HTMLElement | null>(null);
+// 获取实例方法
+// const instance = getCurrentInstance();
+
+// onMounted(() => {
+// 	const entries = Object.entries(selectRef.value as unknown as Record<string, unknown>);
+// 	for (let [key, value] of entries) {
+//     // if(!value || typeof value !== 'function'){
+//     //     continue;
+//     //   }
+// 		instance.exposed[key] = value;
+// 	}
+// });
+// 暴露给外部的 ref
+defineExpose({ selectRef });
+</script>

package/src/components/base/hsSelect/useSelectEvents.ts

@@ -0,0 +1,60 @@
+/**
+ * 
+ * @param emit 
+ * @returns 
+ * 1. 向外暴露一个函数（useSelectEvents），函数接收一个emit函数
+ */
+export function useSelectEvents(emit: (event: "update:value" | "change" | "visible-change" | "remove-tag" | "clear" | "blur" | "focus", data?: unknown) => void) {
+  /**
+* 
+* 1. Define the event change
+*/
+  const handleChange = (val: string | number | boolean | object | []) => {
+    emit('change', val);
+  };
+  /**
+* 
+* 2. Define the event visible-change
+*/
+  const handleVisibleChange = (val: boolean) => {
+    emit('visible-change', val);
+  };
+  /**
+* 
+* 3. Define the event remove-tag
+*/
+  const handleRemoveTag = (val: boolean) => {
+    emit('remove-tag', val);
+  };
+  /**
+* 
+* 4. Define the event clear
+*/
+  const handleClear = () => {
+    emit('clear');
+  };
+  /**
+ * 
+ * @param event 
+ * 5. Define the event blur
+ */
+  const handleBlur = (event: Event) => {
+    emit('blur', event);
+  };
+  /**
+* 
+* @param event 
+* 6. Define the event focus
+*/
+  const handleFocus = (event: Event) => {
+    emit('focus', event);
+  };
+  return {
+    handleChange,
+    handleVisibleChange,
+    handleRemoveTag,
+    handleClear,
+    handleBlur,
+    handleFocus,
+  };
+}

package/src/components/base/hsSlider/src/hsSlider.vue

@@ -0,0 +1,25 @@
+<template>
+	<el-slider v-model="innerValue" ref="sliderRef"></el-slider>
+</template>
+
+<script setup lang="ts" name="hsSlider">
+import { ref } from 'vue';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Number, Array],
+		default: 0,
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<number | number[]>(
+	() => props.value,
+	(val: number | number[]) => emit('update:value', val)
+);
+// 获取ref
+const sliderRef = ref(null);
+// 暴露给外部的 ref
+defineExpose({ sliderRef });
+</script>

package/src/components/base/hsSteps/src/hsStep.vue

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

package/src/components/base/hsSteps/src/hsSteps.vue

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

package/src/components/base/hsSwitch/src/hsSwitch.vue

@@ -0,0 +1,35 @@
+<template>
+	<el-switch v-model="innerValue" ref="switchRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-switch>
+</template>
+
+<script setup lang="ts" name="hsSwitch">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+
+const props = defineProps({
+	value: {
+		type: [Boolean, Number, String],
+		default: false,
+	},
+});
+
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<boolean | number | string>(
+	() => props.value,
+	(val: boolean | number | string) => emit('update:value', val)
+);
+
+const switchRef = ref<HTMLInputElement | null>(null);
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(switchRef, instance);
+});
+
+defineExpose({ ...instance!.exposed });
+</script>

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

@@ -0,0 +1,116 @@
+<template>
+	<hs-table
+		ref="xTable"
+		height="600"
+		v-bind="tableConfig.config"
+		:scroll-y="{ enabled: true }"
+		:footer-method="footerMethod"
+		:data="tableConfig.tableData"
+		@checkbox-all="checkboxAll"
+		:header-cell-style="headerCellStyle"
+	>
+		<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>
+	</hs-table>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
+import { useHsTableConfig } from './useHsTableConfig';
+const { tableConfig, setTableData, headerCellStyle } = 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: VxeTableEvents.CheckboxAll<RowVO> = ({ checked }) => {
+	console.debug('checked:', checked);
+};
+
+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/hsTable copy.vue

@@ -0,0 +1,226 @@
+<template>
+	<div class="hs-table__wrapper layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<el-form :model="state.form" size="default" label-width="100px" 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">
+				<vxe-table
+					ref="xTable"
+					stripe
+					round
+					border="inner"
+					show-overflow
+					:height="state.height"
+					:row-config="{ keyField: 'id' }"
+					:column-config="{ resizable: true }"
+					:loading="loading"
+					:scroll-y="{ enabled: true }"
+				>
+					<vxe-column type="checkbox" width="60"></vxe-column>
+					<vxe-column type="seq" width="100"></vxe-column>
+					<vxe-column field="name" title="Name" sortable></vxe-column>
+					<vxe-column field="role" title="Role"></vxe-column>
+					<vxe-column field="age" title="Age"></vxe-column>
+					<vxe-column field="date" title="Date"></vxe-column>
+					<vxe-column field="address" title="Address"></vxe-column>
+				</vxe-table>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+// 定义变量内容
+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;
+	age: number;
+	date: string;
+	address: string;
+	checked: boolean;
+}
+
+const loading = ref(false);
+
+let allData: RowVO[] = [];
+
+const xTable = ref<VxeTableInstance<RowVO>>();
+
+const mockList = (size: number) => {
+	return new Promise<RowVO[]>((resolve) => {
+		setTimeout(() => {
+			const list: RowVO[] = [];
+			for (let index = 0; index < size; index++) {
+				list.push({
+					checked: false,
+					id: index,
+					name: 'test' + index,
+					role: 'developer',
+					age: 10,
+					date: '2019-05-01',
+					address: 'address abc' + index,
+				});
+			}
+			resolve(list);
+		}, 250);
+	});
+};
+
+const loadList = (size: number) => {
+	loading.value = true;
+	mockList(size).then((data) => {
+		const $table = xTable.value;
+		allData = allData.concat(data); // 局部追加并保存所有数据
+		if ($table) {
+			$table.loadData(allData);
+		}
+		loading.value = false;
+	});
+};
+
+// const scrollTo1Event = () => {
+// 	const $table = xTable.value;
+// 	if ($table) {
+// 		$table.scrollTo(null, 4000);
+// 	}
+// };
+
+// const clearScrollEvent = () => {
+// 	const $table = xTable.value;
+// 	if ($table) {
+// 		$table.clearScroll();
+// 	}
+// };
+
+onMounted(() => {
+	setTimeout(() => {
+		let height = document.getElementsByClassName('el-card')[0].clientHeight;
+		console.debug("document.getElementsByClassName('el-card')");
+		state.height = String(height - 200);
+		state._height = String(height - 200);
+		loadList(30000);
+	}, 1);
+});
+</script>
+<style scoped lang="scss">
+// 整页超出滚动
+.hs-table__wrapper {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+	}
+}
+</style>