hs-admin-ui 1.0.0 → 1.0.3

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

@@ -1,15 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-/**
- * 
- * @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

@@ -1,25 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,116 +0,0 @@
-<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

@@ -1,226 +0,0 @@
-<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>