hs-admin-ui 1.0.0

package/src/utils/toolsValidate.ts

@@ -0,0 +1,370 @@
+/**
+ * 2020.11.29 lyt 整理
+ * 工具类集合，适用于平时开发
+ * 新增多行注释信息，鼠标放到方法名即可查看
+ */
+/**
+ * 小数或整数(不可以负数)
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberIntegerAndFloat(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d.]/g, '');
+	// 以0开始只能输入一个
+	v = v.replace(/^0{2}$/g, '0');
+	// 保证第一位只能是数字，不能是点
+	v = v.replace(/^\./g, '');
+	// 小数只能出现1位
+	v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+	// 小数点后面保留2位
+	v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+	// 返回结果
+	return v;
+}
+/**
+ * 验证百分比（不可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentage(val: string): string {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 只能是数字和小数点，不能是其他输入
+	v = v.replace(/[^\d]/g, '');
+	// 不能以0开始
+	v = v.replace(/^0/g, '');
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 验证百分比（可以小数）
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberPercentageFloat(val: string): string {
+	let v = verifyNumberIntegerAndFloat(val);
+	// 数字超过100，赋值成最大值100
+	v = v.replace(/^[1-9]\d\d{1,3}$/, '100');
+	// 超过100之后不给再输入值
+	v = v.replace(/^100\.$/, '100');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 正整数验证
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifiyNumberInteger(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
+	v = v.replace(/[\.]*/g, '');
+	// 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
+	v = v.replace(/(^0[\d]*)$/g, '0');
+	// 首位是0,只能出现一次
+	v = v.replace(/^0\d$/g, '0');
+	// 只匹配数字
+	v = v.replace(/[^\d]/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 去掉中文及空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyCnAndSpace(val: string) {
+	// 匹配中文与空格
+	let v = val.replace(/[\u4e00-\u9fa5\s]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 去掉英文及空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyEnAndSpace(val: string) {
+	// 匹配英文与空格
+	let v = val.replace(/[a-zA-Z]+/g, '');
+	// 匹配空格
+	v = v.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 禁止输入空格
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyAndSpace(val: string) {
+	// 匹配空格
+	let v = val.replace(/(^\s*)|(\s*$)/g, '');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 金额用 `,` 区分开
+ * @param val 当前值字符串
+ * @returns 返回处理后的字符串
+ */
+export function verifyNumberComma(val: string) {
+	// 调用小数或整数(不可以负数)方法
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let v: any = verifyNumberIntegerAndFloat(val);
+	// 字符串转成数组
+	v = v.toString().split('.');
+	// \B 匹配非单词边界，两边都是单词字符或者两边都是非单词字符
+	v[0] = v[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+	// 数组转字符串
+	v = v.join('.');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 匹配文字变色（搜索时）
+ * @param val 当前值字符串
+ * @param text 要处理的字符串值
+ * @param color 搜索到时字体高亮颜色
+ * @returns 返回处理后的字符串
+ */
+export function verifyTextColor(val: string, text = '', color = 'red') {
+	// 返回内容，添加颜色
+	let v = text.replace(new RegExp(val, 'gi'), `<span style='color: ${color}'>${val}</span>`);
+	// 返回结果
+	return v;
+}
+
+/**
+ * 数字转中文大写
+ * @param val 当前值字符串
+ * @param unit 默认：仟佰拾亿仟佰拾万仟佰拾元角分
+ * @returns 返回处理后的字符串
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function verifyNumberCnUppercase(val: any, unit = '仟佰拾亿仟佰拾万仟佰拾元角分', v = '') {
+	// 当前内容字符串添加 2个0，为什么??
+	val += '00';
+	// 返回某个指定的字符串值在字符串中首次出现的位置，没有出现，则该方法返回 -1
+	let lookup = val.indexOf('.');
+	// substring：不包含结束下标内容，substr：包含结束下标内容
+	if (lookup >= 0) val = val.substring(0, lookup) + val.substr(lookup + 1, 2);
+	// 根据内容 val 的长度，截取返回对应大写
+	unit = unit.substr(unit.length - val.length);
+	// 循环截取拼接大写
+	for (let i = 0; i < val.length; i++) {
+		v += '零壹贰叁肆伍陆柒捌玖'.substr(val.substr(i, 1), 1) + unit.substr(i, 1);
+	}
+	// 正则处理
+	v = v
+		.replace(/零角零分$/, '整')
+		.replace(/零[仟佰拾]/g, '零')
+		.replace(/零{2,}/g, '零')
+		.replace(/零([亿|万])/g, '$1')
+		.replace(/零+元/, '元')
+		.replace(/亿零{0,3}万/, '亿')
+		.replace(/^元/, '零元');
+	// 返回结果
+	return v;
+}
+
+/**
+ * 手机号码
+ * @param val 当前值字符串
+ * @returns 返回 true: 手机号码正确
+ */
+export function verifyPhone(val: string) {
+	// false: 手机号码不正确
+	if (!/^((12[0-9])|(13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/.test(val)) return false;
+	// true: 手机号码正确
+	else return true;
+}
+
+/**
+ * 国内电话号码
+ * @param val 当前值字符串
+ * @returns 返回 true: 国内电话号码正确
+ */
+export function verifyTelPhone(val: string) {
+	// false: 国内电话号码不正确
+	if (!/\d{3}-\d{8}|\d{4}-\d{7}/.test(val)) return false;
+	// true: 国内电话号码正确
+	else return true;
+}
+
+/**
+ * 登录账号 (字母开头，允许5-16字节，允许字母数字下划线)
+ * @param val 当前值字符串
+ * @returns 返回 true: 登录账号正确
+ */
+export function verifyAccount(val: string) {
+	// false: 登录账号不正确
+	if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(val)) return false;
+	// true: 登录账号正确
+	else return true;
+}
+
+/**
+ * 密码 (以字母开头，长度在6~16之间，只能包含字母、数字和下划线)
+ * @param val 当前值字符串
+ * @returns 返回 true: 密码正确
+ */
+export function verifyPassword(val: string) {
+	// false: 密码不正确
+	if (!/^[a-zA-Z]\w{5,15}$/.test(val)) return false;
+	// true: 密码正确
+	else return true;
+}
+
+/**
+ * 强密码 (字母+数字+特殊字符，长度在6-16之间)
+ * @param val 当前值字符串
+ * @returns 返回 true: 强密码正确
+ */
+export function verifyPasswordPowerful(val: string) {
+	// false: 强密码不正确
+	if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		return false;
+	// true: 强密码正确
+	else return true;
+}
+
+/**
+ * 密码强度
+ * @param val 当前值字符串
+ * @description 弱：纯数字，纯字母，纯特殊字符
+ * @description 中：字母+数字，字母+特殊字符，数字+特殊字符
+ * @description 强：字母+数字+特殊字符
+ * @returns 返回处理后的字符串：弱、中、强
+ */
+export function verifyPasswordStrength(val: string) {
+	let v = '';
+	// 弱：纯数字，纯字母，纯特殊字符
+	if (/^(?:\d+|[a-zA-Z]+|[!@#$%^&\.*]+){6,16}$/.test(val)) v = '弱';
+	// 中：字母+数字，字母+特殊字符，数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) v = '中';
+	// 强：字母+数字+特殊字符
+	if (/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val))
+		v = '强';
+	// 返回结果
+	return v;
+}
+
+/**
+ * IP地址
+ * @param val 当前值字符串
+ * @returns 返回 true: IP地址正确
+ */
+export function verifyIPAddress(val: string) {
+	// false: IP地址不正确
+	if (
+		!/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+			val
+		)
+	)
+		return false;
+	// true: IP地址正确
+	else return true;
+}
+
+/**
+ * 邮箱
+ * @param val 当前值字符串
+ * @returns 返回 true: 邮箱正确
+ */
+export function verifyEmail(val: string) {
+	// false: 邮箱不正确
+	if (
+		!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+			val
+		)
+	)
+		return false;
+	// true: 邮箱正确
+	else return true;
+}
+
+/**
+ * 身份证
+ * @param val 当前值字符串
+ * @returns 返回 true: 身份证正确
+ */
+export function verifyIdCard(val: string) {
+	// false: 身份证不正确
+	if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(val)) return false;
+	// true: 身份证正确
+	else return true;
+}
+
+/**
+ * 姓名
+ * @param val 当前值字符串
+ * @returns 返回 true: 姓名正确
+ */
+export function verifyFullName(val: string) {
+	// false: 姓名不正确
+	if (!/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/.test(val)) return false;
+	// true: 姓名正确
+	else return true;
+}
+
+/**
+ * 邮政编码
+ * @param val 当前值字符串
+ * @returns 返回 true: 邮政编码正确
+ */
+export function verifyPostalCode(val: string) {
+	// false: 邮政编码不正确
+	if (!/^[1-9][0-9]{5}$/.test(val)) return false;
+	// true: 邮政编码正确
+	else return true;
+}
+
+/**
+ * url 处理
+ * @param val 当前值字符串
+ * @returns 返回 true: url 正确
+ */
+export function verifyUrl(val: string) {
+	// false: url不正确
+	if (
+		!/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
+			val
+		)
+	)
+		return false;
+	// true: url正确
+	else return true;
+}
+
+/**
+ * 车牌号
+ * @param val 当前值字符串
+ * @returns 返回 true：车牌号正确
+ */
+export function verifyCarNum(val: string) {
+	// false: 车牌号不正确
+	if (
+		!/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
+			val
+		)
+	)
+		return false;
+	// true：车牌号正确
+	else return true;
+}

package/src/utils/watermark.ts

@@ -0,0 +1,47 @@
+// 页面添加水印效果
+const setWatermark = (str: string) => {
+	const id = '1.23452384164.123412416';
+	if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	const can = document.createElement('canvas');
+	can.width = 200;
+	can.height = 130;
+	const cans = <CanvasRenderingContext2D>can.getContext('2d');
+	cans.rotate((-20 * Math.PI) / 180);
+	cans.font = '12px Vedana';
+	cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
+	cans.textBaseline = 'middle';
+	cans.fillText(str, can.width / 10, can.height / 2);
+	const div = document.createElement('div');
+	div.id = id;
+	div.style.pointerEvents = 'none';
+	div.style.top = '0px';
+	div.style.left = '0px';
+	div.style.position = 'fixed';
+	div.style.zIndex = '10000000';
+	div.style.width = `${document.documentElement.clientWidth}px`;
+	div.style.height = `${document.documentElement.clientHeight}px`;
+	div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;
+	document.body.appendChild(div);
+	return id;
+};
+
+/**
+ * 页面添加水印效果
+ * @method set 设置水印
+ * @method del 删除水印
+ */
+const watermark = {
+	// 设置水印
+	set: (str: string) => {
+		let id = setWatermark(str);
+		if (document.getElementById(id) === null) id = setWatermark(str);
+	},
+	// 删除水印
+	del: () => {
+		let id = '1.23452384164.123412416';
+		if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id));
+	},
+};
+
+// 导出方法
+export default watermark;

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,62 @@
+<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>