hs-admin-ui 1.0.0

package/src/components/base/hsTest/HsTest.vue

@@ -0,0 +1,320 @@
+<template>
+	<div class="system-user-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<div class="system-user-search mb15">
+				<el-button size="default" type="primary" class="ml10" @click="onAddDatas">
+					<el-icon>
+						<ele-Search />
+					</el-icon>
+					模拟数据
+				</el-button>
+				<el-button size="default" type="success" class="ml10" @click="onclearDatas">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					清除数据
+				</el-button>
+			</div>
+			<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>
+			<el-table @row-click="onRowClick" @cell-contextmenu="onCllContextmenu" :data="state.tableData.data" v-loading="state.tableData.loading">
+				<el-table-column type="selection" width="55" />
+				<el-table-column type="index" label="序号" width="60" :index="(state.tableData.param.pageNum - 1) * state.tableData.param.pageSize + 1" />
+				<el-table-column
+					:prop="column.prop"
+					:label="column.label"
+					show-overflow-tooltip
+					v-for="(column, index) in state.columns"
+					:key="index"
+				></el-table-column>
+				<!-- <el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column> -->
+				<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status">启用</el-tag>
+						<el-tag type="info" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<!-- <el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
+				<el-table-column label="操作" width="100">
+					<template #default="scope">
+						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
+							>修改</el-button
+						>
+						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination
+				@size-change="onHandleSizeChange"
+				@current-change="onHandleCurrentChange"
+				class="mt15"
+				:pager-count="5"
+				:page-sizes="[10, 20, 30]"
+				v-model:current-page="state.tableData.param.pageNum"
+				background
+				v-model:page-size="state.tableData.param.pageSize"
+				layout="total, sizes, prev, pager, next, jumper"
+				:total="state.tableData.total"
+			>
+			</el-pagination>
+		</el-card>
+		<!-- <UserDialog ref="userDialogRef" @refresh="getTableData()" /> -->
+	</div>
+</template>
+
+<script setup lang="ts" name="systemUser">
+import { reactive, onMounted, ref } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { useTableEvents } from '/@/components/base/hsTable/useTableEvents';
+// 引入组件
+// const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));
+
+// 定义变量内容
+const userDialogRef = ref();
+// const state = reactive({
+// 	form: {
+// 		name: '',
+// 		email: '',
+// 		autograph: '',
+// 		occupation: '',
+// 		phone: '',
+// 		sex: '',
+// 		phone1: '',
+// 		phone2: '',
+// 		phone3: '',
+// 		phone4: '',
+// 		phone5: '',
+// 		phone6: '',
+// 	},
+// });
+let item = reactive({
+	show: false,
+});
+const hideShowForm = () => {
+	item.show = !item.show;
+};
+const state = reactive({
+	columns: [],
+	form: {
+		name: '',
+		email: '',
+		autograph: '',
+		occupation: '',
+		phone: '',
+		sex: '',
+		phone1: '',
+		phone2: '',
+		phone3: '',
+		phone4: '',
+		phone5: '',
+		phone6: '',
+	},
+	tableData: {
+		data: [],
+		total: 0,
+		loading: false,
+		param: {
+			pageNum: 1,
+			pageSize: 300,
+		},
+	},
+});
+interface columnType {
+	prop: string;
+	label: string;
+}
+const data: Array<columnType> = [];
+// 初始化表格数据
+const getTableData = () => {
+	state.tableData.loading = true;
+
+	for (let i = 0; i < 162; i++) {
+		let a: any = {};
+		for (let j = 0; j <= 7; j++) {
+			//
+			a['test' + j] = i + '测试数据' + j;
+		}
+		data.push(a);
+
+		// data.push({
+		// 	userName: i === 0 ? 'admin' : 'test',
+		// 	userNickname: i === 0 ? '我是管理员' : '我是普通用户',
+		// 	roleSign: i === 0 ? 'admin' : 'common',
+		// 	department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
+		// 	phone: '12345678910',
+		// 	email: 'vueNextAdmin@123.com',
+		// 	sex: '女',
+		// 	password: '123456',
+		// 	overdueTime: new Date(),
+		// 	status: true,
+		// 	describe: i === 0 ? '不可删除' : '测试用户',
+		// 	createTime: new Date().toLocaleString(),
+		// });
+	}
+	setTimeout(() => {
+		state.tableData.loading = false;
+	}, 500);
+};
+const onAddDatas = () => {
+	state.tableData.data = data;
+	state.tableData.total = state.tableData.data.length;
+};
+const onclearDatas = () => {
+	state.tableData.data = [];
+};
+// 打开新增用户弹窗
+// const onOpenAddUser = (type: string) => {
+// 	userDialogRef.value.openDialog(type);
+// };
+// 打开修改用户弹窗
+const onOpenEditUser = (type: string, row: RowUserType) => {
+	userDialogRef.value.openDialog(type, row);
+};
+// 删除用户
+const onRowDel = (row: RowUserType) => {
+	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			getTableData();
+			ElMessage.success('删除成功');
+		})
+		.catch(() => {});
+};
+// 分页改变
+const onHandleSizeChange = (val: number) => {
+	state.tableData.param.pageSize = val;
+	getTableData();
+};
+// 分页改变
+const onHandleCurrentChange = (val: number) => {
+	state.tableData.param.pageNum = val;
+	getTableData();
+};
+
+let columns: Array<columnType> = [];
+const setTableColumns = () => {
+	columns = [];
+	for (let i = 0; i <= 7; i++) {
+		columns.push({
+			prop: 'test' + i,
+			label: '测试' + i,
+		});
+	}
+	console.debug('columns:', columns);
+	state.columns = columns;
+};
+
+const emit = defineEmits(['onSelect', 'onSelectAll', 'onRowClick']);
+const { onRowClick, onCllContextmenu } = useTableEvents(emit);
+// const onRowClick
+// 页面加载时
+onMounted(() => {
+	console.debug("document.getElementsByClassName('el-card__body')", document.getElementsByClassName('el-card__body'));
+	setTableColumns();
+	getTableData();
+});
+</script>
+
+<style scoped lang="scss">
+.system-user-container {
+	:deep(.el-card__body) {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: auto;
+		.el-table {
+			flex: 1;
+		}
+	}
+	.hs-table_option {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+	}
+}
+</style>

package/src/components/base/hsTooltip/src/hsTooltip.vue

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

package/src/components/base/hsTour/src/hsTour.vue

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

package/src/components/base/hsTour/src/hsTourStep.vue

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

package/src/components/base/hsTransfer/src/hsTransfer.vue

@@ -0,0 +1,36 @@
+<template>
+	<el-transfer v-model="innerValue" ref="transferRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-transfer>
+</template>
+
+<script setup lang="ts" name="hsTransfer">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	value: {
+		type: [Array],
+		default: () => [],
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:value']);
+
+const innerValue = defineModel<Array<string | number>>(
+	() => props.value,
+	(val: Array<string | number>) => emit('update:value', val)
+);
+// 获取ref
+const transferRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(transferRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsTree/src/hsTree.vue

@@ -0,0 +1,24 @@
+<template>
+	<el-tree ref="treeRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-tree>
+</template>
+
+<script lang="ts">
+import { ref, getCurrentInstance, defineComponent } from 'vue';
+
+export default defineComponent({
+	name: 'hsTree',
+	setup() {
+		const treeRef = ref<HTMLElement | null>(null);
+		const instance = getCurrentInstance();
+
+		return {
+			treeRef,
+			...instance!.exposed,
+		};
+	},
+});
+</script>

package/src/components/base/hsTreeSelect/src/hsTreeSelect.vue

@@ -0,0 +1,39 @@
+<template>
+	<div ref="focusRef" class="w-full">
+		<el-tree-select v-model="innerValue" v-bind="$attrs" ref="treeSelectRef">
+			<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+				<slot :name="item" v-bind="data || {}"></slot>
+			</template>
+		</el-tree-select>
+	</div>
+</template>
+
+<script setup lang="ts" name="hsTreeSelect">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties, useFocusElement } from '/@/hooks/useExpose';
+// 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 treeSelectRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+const { focusRef, activeElement } = useFocusElement();
+
+onMounted(() => {
+	useExposeProperties(treeSelectRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed, activeElement });
+</script>

package/src/components/base/hsUpload/src/hsUpload.vue

@@ -0,0 +1,32 @@
+<template>
+	<el-upload v-model:file-list="fileList" ref="uploadRef">
+		<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+			<slot :name="item" v-bind="data || {}"></slot>
+		</template>
+	</el-upload>
+</template>
+
+<script setup lang="ts" name="hsUpload">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { useExposeProperties, useVModel } from '/@/hooks/useExpose';
+// props 属性
+const props = defineProps({
+	fileList: {
+		type: [Array],
+		default: () => [],
+	},
+});
+// emit 事件
+const emit = defineEmits(['update:fileList']);
+const fileList = useVModel(props, 'fileList', emit);
+// 获取ref
+const uploadRef = ref(null);
+// 获取实例方法
+const instance = getCurrentInstance();
+
+onMounted(() => {
+	useExposeProperties(uploadRef, instance);
+});
+// 暴露给外部的 ref
+defineExpose({ ...instance!.exposed });
+</script>

package/src/components/base/hsWatermark/src/hsWatermark.vue

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

package/src/components/business/bcAutoComplete/bcAutoComplete.vue

@@ -0,0 +1,38 @@
+<template>
+	<hs-autocomplete
+		v-model="value"
+		clearable
+		class="inline-input w-50"
+		placeholder="请输入"
+		ref="hsAutocompleteRef"
+		:fetch-suggestions="querySearchAsync"
+		@select="handleSelect"
+		value-key="field_name"
+	></hs-autocomplete>
+</template>
+<script setup lang="ts">
+import { useBcAutoComplete } from './useAutoComplete';
+const props = defineProps({
+	// 初始化请求地址
+	url: {
+		type: String,
+		default: '',
+	},
+	// 请求参数
+	params: {
+		type: Object,
+		default: () => {},
+	},
+	type: {
+		type: String,
+		default: 'btn',
+	},
+});
+// 双向绑定的value值
+const value = defineModel('');
+// 定义emit事件
+const emits = defineEmits(['change']);
+const { handleSelect, querySearchAsync } = useBcAutoComplete(props, emits);
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/business/bcAutoComplete/defaultData.ts

@@ -0,0 +1,25 @@
+import IFormData from '/@/types/form';
+
+// 数据池
+const field_pool_json: Record<string, IFormData.Data> = {
+	form: [
+		{ field_name: '姓名', field_code: 'name' },
+		{ field_name: '年龄', field_code: 'age' },
+		{ field_name: '手机号', field_code: 'phone' },
+	], // 表单
+	table: [
+		{ field_name: '姓名', field_code: 'name' },
+		{ field_name: '性别', field_code: 'gender' },
+		{ field_name: '手机号', field_code: 'phone' },
+	], // 表格
+	btn: [
+		{ field_name: '新增', field_code: 'add' },
+		{ field_name: '查询', field_code: 'search' },
+		{ field_name: '刷新', field_code: 'refresh' },
+		{ field_name: '充值', field_code: 'recharge' },
+		{ field_name: '重制', field_code: 'reset' },
+		{ field_name: '一键解析', field_code: 'analysis' },
+		{ field_name: '开始接诊', field_code: 'clinical_reception' },
+	], // 按钮
+};
+export { field_pool_json };

package/src/components/business/bcAutoComplete/useAutoComplete.ts

@@ -0,0 +1,65 @@
+import bcAutoComplete from './bcAutoComplete.vue';
+import ComponentAttr from '/@/types/components';
+import IFormData from '/@/types/form';
+import { ref, watch } from 'vue';
+import { field_pool_json } from './defaultData';
+
+export function useBcAutoComplete(props: ComponentAttr.Props<typeof bcAutoComplete>, emits: (event: 'change', ...args: IFormData.Data[]) => void) {
+	let list = ref<Record<string, IFormData.Data>[]>([]);
+	/**
+	 * 刷新数据
+	 */
+	const refreshData = () => {
+		list.value = field_pool_json[props.type];
+	};
+	/**
+	 * 监听参数的变化，调用初始化的方法
+	 */
+	watch(
+		() => props.params,
+		(value) => {
+			console.log('value', value);
+			// 调用查询数据的方法
+			refreshData();
+		},
+		{
+			immediate: true,
+			deep: true,
+		}
+	);
+
+	// 定时器实例
+	let timeout: ReturnType<typeof setTimeout>;
+	/**
+	 * 查询方法
+	 * @param queryString
+	 * @returns
+	 */
+	const createFilter = (queryString: string) => {
+		return (restaurant: Record<string, IFormData.Data>) => {
+			return restaurant.field_name && restaurant.field_name.indexOf(queryString) === 0;
+		};
+	};
+	/**
+	 * 查询按钮函数回调
+	 * @param queryString
+	 * @param cb
+	 */
+	const querySearchAsync = (queryString: string, cb: (arg: IFormData.Data) => void) => {
+		// 执行查询方法
+		const results = queryString ? list.value.filter(createFilter(queryString)) : list.value;
+		cb(results);
+		// 清除定时器
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {}, 1000 * Math.random());
+	};
+	/**
+	 * 切换选择按钮事件
+	 * @param item
+	 */
+	const handleSelect = (item: Record<string, IFormData.Data>) => {
+		// console.debug('handleSelect', item);
+		emits('change', item);
+	};
+	return { handleSelect, querySearchAsync };
+}