hs-admin-ui 1.0.5 → 1.0.8

package/src/views/config/page/components/hsPageTree/src/hsPageTree.vue

@@ -0,0 +1,30 @@
+<template>
+	<!-- {{ menuData }} -->
+	<hs-tree :data="menuData" :props="defaultProps" highlight-current :show-checkbox="showCheckbox" @node-click="handleNodeClick" />
+	<el-button @click="demoMenu">使用模拟菜单</el-button>
+</template>
+
+<script lang="ts" setup>
+import { usePageTree } from '../usePageTree';
+type Menu = Record<'value' | 'label' | 'name', string>;
+const props = defineProps({
+	// 点击节点的时候是否只触发子节点
+	onlyChild: {
+		type: Boolean,
+		default: true,
+	},
+	// 是否显示复选框
+	showCheckbox: {
+		type: Boolean,
+		default: false,
+	},
+	menu: {
+		type: Array<Menu>,
+		default: () => [],
+	},
+});
+
+const emits = defineEmits(['change']);
+const { handleNodeClick, demoMenu, menuData, defaultProps } = usePageTree(emits, props);
+</script>
+../../usePageTree

package/src/views/config/page/components/hsPageTree/usePageTree.ts

@@ -0,0 +1,49 @@
+// 树结构接口
+import { ref, watch } from 'vue';
+import { PageData } from './configData';
+import { ComponentAttr } from '/@/types';
+import hsPageTree from './src/hsPageTree.vue';
+import { MenuType } from '../../menuType';
+import _ from 'lodash';
+
+export function usePageTree(emits: (event: 'change', ...args: any[]) => void, props: ComponentAttr.Props<typeof hsPageTree>) {
+	/**
+	 * 节点点击回调
+	 * @param data
+	 */
+	const handleNodeClick = (data: MenuType) => {
+		if (props.onlyChild) {
+			// 只处理最终子节点
+			if (!data.children || (data.children && data.children.length <= 0)) {
+				emits('change', data);
+			}
+		} else {
+			// 处理每个节点
+			emits('change', data);
+		}
+	};
+	// 树结构数据
+	const menuData = ref<MenuType[]>([]);
+	watch(
+		() => props.menu,
+		(value) => {
+			menuData.value = _.cloneDeep(value);
+		},
+		{
+			deep: true,
+			immediate: true,
+		}
+	);
+	// 树结构绑定字段
+	const defaultProps = {
+		children: 'children',
+		label: 'label',
+	};
+	/**
+	 * 使用模拟菜单
+	 */
+	const demoMenu = () => {
+		menuData.value = PageData;
+	};
+	return { handleNodeClick, demoMenu, menuData, defaultProps };
+}

package/src/views/config/page/index.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="system-dept-container layout-padding">
+		<el-card shadow="hover" class="layout-padding-auto">
+			<div class="bg-blue-300 py-5 w-1/5">
+				<!-- 切换系统选择器 -->
+				<bc-switch-systems @change="onChangeSystem"></bc-switch-systems>
+				<!-- 页面管理 -->
+				<component :is="hsPageTree" :menu="menuData" @change="changeNode"></component>
+			</div>
+			<div class="flex-1" v-show="currentPage">
+				<bc-page-config @refresh="refreshConfig" ref="formTableRef" :configs="configs"></bc-page-config>
+			</div>
+		</el-card>
+	</div>
+</template>
+
+<script setup lang="ts" name="systemPage">
+import { ref } from 'vue';
+import hsPageTree from './components/hsPageTree/src/hsPageTree.vue';
+import { useHsPage } from './usePage';
+const formTableRef = ref();
+
+const { changeNode, onChangeSystem, currentPage, configs, menuData, refreshConfig } = useHsPage(formTableRef);
+</script>
+<style scoped lang="scss">
+.layout-padding-auto {
+	:deep(.el-card__body) {
+		height: 100% !important;
+		display: flex;
+	}
+}
+</style>

package/src/views/config/page/menuType.ts

@@ -0,0 +1,10 @@
+import { IFormTable } from '/@/types';
+import { MenuChild } from '/@/api/menuController/type';
+
+// 定义菜单数据类型
+export interface MenuType extends MenuChild {
+	label: string;
+	value: string;
+	children: MenuType[];
+	[key: string]: IFormTable.Data;
+}

package/src/views/config/page/usePage.ts

@@ -0,0 +1,120 @@
+import { ref, Ref } from 'vue';
+import { IFormTable } from '/@/types';
+import { MenuType } from './menuType';
+import { useMenuController } from '/@/api/menuController';
+import { GetMenuList, MenuChild } from '/@/api/menuController/type';
+const menu = useMenuController();
+import { useFieldConfigController } from '/@/api/fieldConfigController';
+import { GetTableByMenu } from '/@/api/fieldConfigController/type';
+const fieldConfig = useFieldConfigController();
+import _ from 'lodash';
+
+interface FormRef {
+	initData: (configs: IFormTable.Data, menu: Record<string, IFormTable.Data | string>, system: Record<string, IFormTable.Data | string>) => {};
+}
+export function useHsPage(formTableRef: Ref<FormRef>) {
+	// 页面中的所有配置数据
+	const configs = ref({});
+	// 配置数据 <Record<'project_code', string>>
+	let sysData = ref();
+	// 当前页面
+	let currentPage = ref<string>('');
+	type Option = Record<'value' | 'label' | 'project_code', string>;
+
+	const menuData = ref<MenuChild[]>([]);
+	/**
+	 * 格式化菜单数据【给每个菜单都追加label、value值】
+	 * @param data
+	 * @returns
+	 */
+	const formatMenuData = (data: MenuChild[]) => {
+		return data.map((item: MenuChild) => {
+			let obj = _.assign(item, {
+				label: item.meta.title,
+				value: item.name,
+			});
+			// 格式化children中的菜单数据
+			if (obj.children && obj.children.length > 0) {
+				// 递归格式化方法
+				obj.children = formatMenuData(obj.children || []);
+			}
+			return obj;
+		});
+	};
+	/**
+	 * 获取菜单数据【树结构】
+	 * @param data
+	 */
+	const getMenuData = (systemData: Option) => {
+		menu
+			.getMenuList<GetMenuList>({ project_code: systemData.project_code })
+			.then((res) => {
+				if (res.code != 1) return;
+				// 整理返回的菜单数据
+				menuData.value = formatMenuData(res.data || []);
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	let menuItemData = ref();
+	/**
+	 * 切换node节点
+	 * @param data
+	 */
+	const changeNode = (data: MenuType) => {
+		menuItemData.value = data; // 菜单
+		currentPage.value = data.value;
+		// 调接口查询
+		fieldConfig
+			.getTableByMenu<GetTableByMenu>({ menu_id: data.id, project_code: sysData.value.project_code })
+			.then((res) => {
+				if (res.code != 1) return;
+				// 调用接口查询
+
+				configs.value = res.data.map((item) => {
+					let obj = _.assign(JSON.parse(item.business_json), {
+						id: item.id,
+						update_time: item.update_time,
+					});
+					return obj;
+				});
+
+				// 根据返回的数据响应右侧配置
+				if (formTableRef.value) {
+					// 参数1: 配置数组 页面配置数据   系统配置数据
+					formTableRef.value.initData(configs.value, data, sysData.value);
+				}
+			})
+			.catch((err) => {
+				console.log('err', err);
+			});
+	};
+	/**
+	 * 切换系统回调方法
+	 * @param system
+	 */
+	const onChangeSystem = (system: Record<string, string>) => {
+		sysData.value = system;
+		// 清空配置数据
+		configs.value = {};
+		// 清空页面数据
+		currentPage.value = '';
+		// 获取菜单数据
+		getMenuData(system);
+	};
+	/**
+	 * 配置页面刷新配置
+	 */
+	const refreshConfig = () => {
+		changeNode(menuItemData.value);
+	};
+	return {
+		changeNode,
+		onChangeSystem,
+		currentPage,
+		configs,
+		menuData,
+		refreshConfig,
+	};
+}

package/src/views/error/401.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="error layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="error-flex">
+				<div class="left">
+					<div class="left-item">
+						<div class="left-item-animation left-item-num">401</div>
+						<div class="left-item-animation left-item-title">您未被授权，没有操作权限~</div>
+						<div class="left-item-animation left-item-msg">联系方式：加QQ群探讨 665452019</div>
+						<div class="left-item-animation left-item-btn">
+							<el-button type="primary" size="default" round @click="onSetAuth">重新授权</el-button>
+						</div>
+					</div>
+				</div>
+				<div class="right">
+					<img src="https://i.hd-r.cn/2cf0d2e192660eec23eb9d0655753e7d.png" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="noPower">
+import { Session } from '/@/utils/storage';
+
+const onSetAuth = () => {
+	// 清除缓存/token等
+	Session.clear();
+	// 使用 reload 时，不需要调用 resetRoute() 重置路由
+	window.location.reload();
+};
+</script>
+
+<style scoped lang="scss">
+.error {
+	height: 100%;
+	.error-flex {
+		margin: auto;
+		display: flex;
+		height: 350px;
+		width: 900px;
+		.left {
+			flex: 1;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			.left-item {
+				.left-item-animation {
+					opacity: 0;
+					animation-name: error-num;
+					animation-duration: 0.5s;
+					animation-fill-mode: forwards;
+				}
+				.left-item-num {
+					color: var(--el-color-info);
+					font-size: 55px;
+				}
+				.left-item-title {
+					font-size: 20px;
+					color: var(--el-text-color-primary);
+					margin: 15px 0 5px 0;
+					animation-delay: 0.1s;
+				}
+				.left-item-msg {
+					color: var(--el-text-color-secondary);
+					font-size: 12px;
+					margin-bottom: 30px;
+					animation-delay: 0.2s;
+				}
+				.left-item-btn {
+					animation-delay: 0.2s;
+				}
+			}
+		}
+		.right {
+			flex: 1;
+			opacity: 0;
+			animation-name: error-img;
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>

package/src/views/error/404.vue

@@ -0,0 +1,89 @@
+<template>
+	<div class="error layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<div class="error-flex">
+				<div class="left">
+					<div class="left-item">
+						<div class="left-item-animation left-item-num">404</div>
+						<div class="left-item-animation left-item-title">页面不存在</div>
+						<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题。</div>
+						<div class="left-item-animation left-item-btn">
+							<el-button type="primary" size="default" round @click="onGoHome">返回首页</el-button>
+						</div>
+					</div>
+				</div>
+				<div class="right">
+					<img :src="error404" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="notFound">
+import { useRouter } from 'vue-router';
+import error404 from '/@/assets/404.png';
+// 定义变量内容
+const router = useRouter();
+
+// 返回首页
+const onGoHome = () => {
+	router.push('/');
+};
+</script>
+
+<style scoped lang="scss">
+.error {
+	height: 100%;
+	.error-flex {
+		margin: auto;
+		display: flex;
+		height: 350px;
+		width: 900px;
+		.left {
+			flex: 1;
+			height: 100%;
+			align-items: center;
+			display: flex;
+			.left-item {
+				.left-item-animation {
+					opacity: 0;
+					animation-name: error-num;
+					animation-duration: 0.5s;
+					animation-fill-mode: forwards;
+				}
+				.left-item-num {
+					color: var(--el-color-info);
+					font-size: 55px;
+				}
+				.left-item-title {
+					font-size: 20px;
+					color: var(--el-text-color-primary);
+					margin: 15px 0 5px 0;
+					animation-delay: 0.1s;
+				}
+				.left-item-msg {
+					color: var(--el-text-color-secondary);
+					font-size: 12px;
+					margin-bottom: 30px;
+					animation-delay: 0.2s;
+				}
+				.left-item-btn {
+					animation-delay: 0.2s;
+				}
+			}
+		}
+		.right {
+			flex: 1;
+			opacity: 0;
+			animation-name: error-img;
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>

package/src/views/home/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<div>
+		<hs-bc-table @row-click="onRowClick" @cell-contextmenu="onCellContextmenu">
+			<template v-slot:[state.info]="{ row, column, rowIndex, columnIndex }">
+				<span>自定义插槽</span>
+			</template>
+			<template v-slot:[state.name]="{ row, column, rowIndex, columnIndex }">
+				<!-- <el-button>{{ column }}</el-button> -->
+			</template>
+		</hs-bc-table>
+		<!-- <hs-test @row-click="onRowClick" @cell-contextmenu="onCellContextmenu"></hs-test> -->
+	</div>
+</template>
+<script setup lang="ts" name="home">
+import { reactive, onMounted, ref, watch, nextTick, onActivated } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import { column } from 'element-plus/es/components/table-v2/src/common';
+
+// 定义变量内容
+const homeLineRef = ref();
+const homePieRef = ref();
+const homeBarRef = ref();
+const storesTagsViewRoutes = useTagsViewRoutes();
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
+
+const state = reactive({
+	info: 'info',
+	name: 'name',
+});
+// 页面加载时
+onMounted(() => {});
+// 由于页面缓存原因，keep-alive
+onActivated(() => {});
+// 单元格点击事件
+const onRowClick = (row: Element, column: Element, event: Element) => {
+	console.debug('父页面获取子组件事件:', 'row', row, 'column:', column, 'event:', event);
+};
+const onCellContextmenu = (row: Element, column: Element, cell: Element, event: Element) => {
+	console.debug('鼠标右键:', 'row', row, 'column:', column, 'cell:', cell, 'event:', event);
+};
+// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
+watch(
+	() => isTagsViewCurrenFull.value,
+	() => {}
+);
+// 监听 pinia 中是否开启深色主题
+watch(
+	() => themeConfig.value.isIsDark,
+	(isIsDark) => {
+		nextTick(() => {});
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
+</script>
+<style scoped lang="scss"></style>
+../../api/index2

package/src/views/login/component/account.vue

@@ -0,0 +1,172 @@
+<template>
+	<el-form size="large" class="login-content-form">
+		<el-form-item class="login-animation1">
+			<el-input text placeholder="用户名 admin 或不输均为 common" v-model="state.ruleForm.userName" clearable autocomplete="off">
+				<template #prefix>
+					<el-icon class="el-input__icon"><ele-User /></el-icon>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation2">
+			<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="密码：123456" v-model="state.ruleForm.password" autocomplete="off">
+				<template #prefix>
+					<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
+				</template>
+				<template #suffix>
+					<i
+						class="iconfont el-input__icon login-content-password"
+						:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+						@click="state.isShowPassword = !state.isShowPassword"
+					>
+					</i>
+				</template>
+			</el-input>
+		</el-form-item>
+		<el-form-item class="login-animation3">
+			<el-col :span="15">
+				<el-input text maxlength="4" placeholder="请输入验证码" v-model="state.ruleForm.code" clearable autocomplete="off" @keydown.enter="onSignIn">
+					<template #prefix>
+						<el-icon class="el-input__icon"><ele-Position /></el-icon>
+					</template>
+				</el-input>
+			</el-col>
+			<el-col :span="1"></el-col>
+			<el-col :span="8">
+				<!-- <el-text class="login-content-code">1234</el-text> -->
+				<img
+					:src="srcCod"
+					alt="加载失败"
+					style="width: 130px; height: 30px; position: relative; bottom: 0px"
+					@click="srcCodFn"
+					class="cursor-pointer"
+				/>
+			</el-col>
+		</el-form-item>
+		<el-form-item class="login-animation4">
+			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="state.loading.signIn">
+				<span>登 录</span>
+			</el-button>
+		</el-form-item>
+	</el-form>
+</template>
+
+<script setup lang="ts" name="loginAccount">
+import { reactive, computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { formatAxis } from '/@/utils/formatTime';
+import { NextLoading } from '/@/utils/loading';
+import { Md5 } from 'ts-md5';
+import { useLoginController } from '/@/api/loginController/index';
+import { useUserInfo } from '/@/stores/userInfo';
+
+const userInfo = useUserInfo();
+const login = useLoginController();
+const srcCod = ref('');
+const srcCodFn = () => {
+	srcCod.value = '/scmp-web/validateCode?date=' + new Date().getTime();
+};
+srcCodFn();
+const route = useRoute();
+const router = useRouter();
+const state = reactive({
+	isShowPassword: false,
+	ruleForm: {
+		userName: 'admin',
+		password: '123456',
+		code: '',
+	},
+	loading: {
+		signIn: false,
+	},
+});
+
+// 时间获取
+const currentTime = computed(() => {
+	return formatAxis(new Date());
+});
+
+// 登录成功后的跳转
+const signInSuccess = (isNoPower: boolean | undefined) => {
+	if (isNoPower) {
+		ElMessage.warning('抱歉，您没有登录权限');
+		userInfo.clear();
+	} else {
+		// 初始化登录成功时间问候语
+		let currentTimeInfo = currentTime.value;
+		// 登录成功，跳到转首页
+		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+		if (route.query?.redirect) {
+			router.push({
+				path: <string>route.query?.redirect,
+				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+			});
+		} else {
+			// 跳转到首页
+			router.push({ path: '/' });
+		}
+		// 登录成功提示
+		const signInText = '欢迎回来！';
+		ElMessage.success(`${currentTimeInfo}，${signInText}`);
+		// 添加 loading，防止第一次进入界面时出现短暂空白
+		NextLoading.start();
+	}
+};
+// 登录
+const onSignIn = async () => {
+	state.loading.signIn = true;
+	login
+		.postAjaxLogin({
+			account: state.ruleForm.userName,
+			pwd: Md5.hashStr(state.ruleForm.password),
+			code: state.ruleForm.code,
+		})
+		.then(async (res) => {
+			if (res.code === 1) {
+				await userInfo.setUserInfo(res.data);
+				signInSuccess(false);
+			}
+			state.loading.signIn = false;
+		})
+		.catch(() => {
+			state.loading.signIn = false;
+			srcCodFn();
+			signInSuccess(true);
+		});
+};
+</script>
+
+<style scoped lang="scss">
+.login-content-form {
+	margin-top: 20px;
+	@for $i from 1 through 4 {
+		.login-animation#{$i} {
+			opacity: 0;
+			animation-name: error-num;
+			animation-duration: 0.5s;
+			animation-fill-mode: forwards;
+			animation-delay: calc($i/10) + s;
+		}
+	}
+	.login-content-password {
+		display: inline-block;
+		width: 20px;
+		cursor: pointer;
+		&:hover {
+			color: #909399;
+		}
+	}
+	.login-content-code {
+		width: 100%;
+		padding: 0;
+		font-weight: bold;
+		letter-spacing: 5px;
+	}
+	.login-content-submit {
+		width: 100%;
+		letter-spacing: 2px;
+		font-weight: 300;
+		margin-top: 15px;
+	}
+}
+</style>