admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化提交

Browse Source
This commit is contained in:
猿小天
2022-10-25 23:32:14 +08:00
parent 8e5fba2532
commit c407ce9444
227 changed files with 39423 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/utils/arrayOperation.ts Normal file
View File

@@ -0,0 +1,66 @@
/**
* 判断两数组字符串是否相同（用于按钮权限验证），数组字符串中存在相同时会自动去重（按钮权限标识不会重复）
* @param news 新数据
* @param old 源数据
* @returns 两数组相同返回 `true`，反之则反
*/
export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]): boolean {
const news = removeDuplicate(newArr);
const olds = removeDuplicate(oldArr);
let count = 0;
const leng = news.length;
for (let i in olds) {
for (let j in news) {
if (olds[i] === news[j]) count++;
}
}
return count === leng ? true : false;
}
/**
* 判断两个对象是否相同
* @param a 要比较的对象一
* @param b 要比较的对象二
* @returns 相同返回 true，反之则反
*/
export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
if (!a || !b) return false;
let aProps = Object.getOwnPropertyNames(a);
let bProps = Object.getOwnPropertyNames(b);
if (aProps.length != bProps.length) return false;
for (let i = 0; i < aProps.length; i++) {
let propName = aProps[i];
let propA = a[propName];
let propB = b[propName];
if (!b.hasOwnProperty(propName)) return false;
if (propA instanceof Object) {
if (!isObjectValueEqual(propA, propB)) return false;
} else if (propA !== propB) {
return false;
}
}
return true;
}
/**
* 数组、数组对象去重
* @param arr 数组内容
* @param attr 需要去重的键值（数组对象）
* @returns
*/
export function removeDuplicate(arr: any, attr?: string) {
if (!arr && !arr.length) {
return arr;
} else {
if (attr) {
const obj: any = {};
const newArr = arr.reduce((cur: any, item: any) => {
obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
return cur;
}, []);
return newArr;
} else {
return Array.from(new Set([...arr]));
}
}
}

40
web/src/utils/authDirective.ts Normal file
View File

@@ -0,0 +1,40 @@
import type { App } from 'vue';
import { useUserInfo } from '/@/stores/userInfo';
import { judementSameArr } from '/@/utils/arrayOperation';
/**
* 用户权限指令
* @directive 单个权限验证（v-auth="xxx"）
* @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
* @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
*/
export function authDirective(app: App) {
// 单个权限验证（v-auth="xxx"）
app.directive('auth', {
mounted(el, binding) {
const stores = useUserInfo();
if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
},
});
// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
app.directive('auths', {
mounted(el, binding) {
let flag = false;
const stores = useUserInfo();
stores.userInfos.authBtnList.map((val: string) => {
binding.value.map((v: string) => {
if (val === v) flag = true;
});
});
if (!flag) el.parentNode.removeChild(el);
},
});
// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
app.directive('auth-all', {
mounted(el, binding) {
const stores = useUserInfo();
const flag = judementSameArr(binding.value, stores.userInfos.authBtnList);
if (!flag) el.parentNode.removeChild(el);
},
});
}

38
web/src/utils/authFunction.ts Normal file
View File

@@ -0,0 +1,38 @@
import { useUserInfo } from '/@/stores/userInfo';
import { judementSameArr } from '/@/utils/arrayOperation';
/**
* 单个权限验证
* @param value 权限值
* @returns 有权限，返回 `true`，反之则反
*/
export function auth(value: string): boolean {
const stores = useUserInfo();
return stores.userInfos.authBtnList.some((v: string) => v === value);
}
/**
* 多个权限验证，满足一个则为 true
* @param value 权限值
* @returns 有权限，返回 `true`，反之则反
*/
export function auths(value: Array<string>): boolean {
let flag = false;
const stores = useUserInfo();
stores.userInfos.authBtnList.map((val: string) => {
value.map((v: string) => {
if (val === v) flag = true;
});
});
return flag;
}
/**
* 多个权限验证，全部满足则为 true
* @param value 权限值
* @returns 有权限，返回 `true`，反之则反
*/
export function authAll(value: Array<string>): boolean {
const stores = useUserInfo();
return judementSameArr(value, stores.userInfos.authBtnList);
}

65
web/src/utils/commonFunction.ts Normal file
View File

@@ -0,0 +1,65 @@
// 通用函数
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { formatDate } from '/@/utils/formatTime';
import { useI18n } from 'vue-i18n';
export default function () {
const { t } = useI18n();
const { toClipboard } = useClipboard();
//百分比格式化
const percentFormat = (row: any, column: number, cellValue: any) => {
return cellValue ? `${cellValue}%` : '-';
};
//列表日期时间格式化
const dateFormatYMD = (row: any, column: number, cellValue: any) => {
if (!cellValue) return '-';
return formatDate(new Date(cellValue), 'YYYY-mm-dd');
};
//列表日期时间格式化
const dateFormatYMDHMS = (row: any, column: number, cellValue: any) => {
if (!cellValue) return '-';
return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
};
//列表日期时间格式化
const dateFormatHMS = (row: any, column: number, cellValue: any) => {
if (!cellValue) return '-';
let time = 0;
if (typeof row === 'number') time = row;
if (typeof cellValue === 'number') time = cellValue;
return formatDate(new Date(time * 1000), 'HH:MM:SS');
};
// 小数格式化
const scaleFormat = (value: any = 0, scale: number = 4) => {
return Number.parseFloat(value).toFixed(scale);
};
// 小数格式化
const scale2Format = (value: any = 0) => {
return Number.parseFloat(value).toFixed(2);
};
// 点击复制文本
const copyText = (text: string) => {
return new Promise((resolve, reject) => {
try {
//复制
toClipboard(text);
//下面可以设置复制成功的提示框等操作
ElMessage.success(t('message.layout.copyTextSuccess'));
resolve(text);
} catch (e) {
//复制失败
ElMessage.error(t('message.layout.copyTextError'));
reject(e);
}
});
};
return {
percentFormat,
dateFormatYMD,
dateFormatYMDHMS,
dateFormatHMS,
scaleFormat,
scale2Format,
copyText,
};
}

178
web/src/utils/customDirective.ts Normal file
View File

@@ -0,0 +1,178 @@
import type { App } from 'vue';
/**
* 按钮波浪指令
* @directive 默认方式：v-waves，如 `<div v-waves></div>`
* @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
*/
export function wavesDirective(app: App) {
app.directive('waves', {
mounted(el, binding) {
el.classList.add('waves-effect');
binding.value && el.classList.add(`waves-${binding.value}`);
function setConvertStyle(obj: { [key: string]: unknown }) {
let style: string = '';
for (let i in obj) {
if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
}
return style;
}
function onCurrentClick(e: { [key: string]: unknown }) {
let elDiv = document.createElement('div');
elDiv.classList.add('waves-ripple');
el.appendChild(elDiv);
let styles = {
left: `${e.layerX}px`,
top: `${e.layerY}px`,
opacity: 1,
transform: `scale(${(el.clientWidth / 100) * 10})`,
'transition-duration': `750ms`,
'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
};
elDiv.setAttribute('style', setConvertStyle(styles));
setTimeout(() => {
elDiv.setAttribute(
'style',
setConvertStyle({
opacity: 0,
transform: styles.transform,
left: styles.left,
top: styles.top,
})
);
setTimeout(() => {
elDiv && el.removeChild(elDiv);
}, 750);
}, 450);
}
el.addEventListener('mousedown', onCurrentClick, false);
},
unmounted(el) {
el.addEventListener('mousedown', () => {});
},
});
}
/**
* 自定义拖动指令
* @description 使用方式：v-drag="[dragDom,dragHeader]"，如 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
* @description dragDom 要拖动的元素，dragHeader 要拖动的 Header 位置
* @link 注意：https://github.com/element-plus/element-plus/issues/522
* @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242
*/
export function dragDirective(app: App) {
app.directive('drag', {
mounted(el, binding) {
if (!binding.value) return false;
const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
function down(e: any, type: string) {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
// body当前宽度
const screenWidth = document.body.clientWidth;
// 可见区域高度(应为body高度，可某些环境下无法获取)
const screenHeight = document.documentElement.clientHeight;
// 对话框宽度
const dragDomWidth = dragDom.offsetWidth;
// 对话框高度
const dragDomheight = dragDom.offsetHeight;
const minDragDomLeft = dragDom.offsetLeft;
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
const minDragDomTop = dragDom.offsetTop;
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
// 获取到的值带px 正则匹配替换
let styL: any = getComputedStyle(dragDom).left;
let styT: any = getComputedStyle(dragDom).top;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (styL.includes('%')) {
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
} else {
styL = +styL.replace(/\px/g, '');
styT = +styT.replace(/\px/g, '');
}
return {
disX,
disY,
minDragDomLeft,
maxDragDomLeft,
minDragDomTop,
maxDragDomTop,
styL,
styT,
};
}
function move(e: any, type: string, obj: any) {
let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
// 通过事件委托，计算移动的距离
let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
// 边界处理
if (-left > minDragDomLeft) {
left = -minDragDomLeft;
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft;
}
if (-top > minDragDomTop) {
top = -minDragDomTop;
} else if (top > maxDragDomTop) {
top = maxDragDomTop;
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
}
/**
* pc端
* onmousedown 鼠标按下触发事件
* onmousemove 鼠标按下时持续触发事件
* onmouseup 鼠标抬起触发事件
*/
dragHeader.onmousedown = (e) => {
const obj = down(e, 'pc');
document.onmousemove = (e) => {
move(e, 'pc', obj);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
/**
* 移动端
* ontouchstart 当按下手指时，触发ontouchstart
* ontouchmove 当移动手指时，触发ontouchmove
* ontouchend 当移走手指时，触发ontouchend
*/
dragHeader.ontouchstart = (e) => {
const obj = down(e, 'app');
document.ontouchmove = (e) => {
move(e, 'app', obj);
};
document.ontouchend = () => {
document.ontouchmove = null;
document.ontouchend = null;
};
};
},
});
}

18
web/src/utils/directive.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { App } from 'vue';
import { authDirective } from '/@/utils/authDirective';
import { wavesDirective, dragDirective } from '/@/utils/customDirective';
/**
* 导出指令方法：v-xxx
* @methods authDirective 用户权限指令，用法：v-auth
* @methods wavesDirective 按钮波浪指令，用法：v-waves
* @methods dragDirective 自定义拖动指令，用法：v-drag
*/
export function directive(app: App) {
// 用户权限指令
authDirective(app);
// 按钮波浪指令
wavesDirective(app);
// 自定义拖动指令
dragDirective(app);
}

137
web/src/utils/formatTime.ts Normal file
View File

@@ -0,0 +1,137 @@
/**
* 时间日期转换
* @param date 当前时间，new Date() 格式
* @param format 需要转换的时间格式字符串
* @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
* @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
* @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
* @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
export function formatDate(date: Date, format: string): string {
let we = date.getDay(); // 星期
let z = getWeek(date); // 周
let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
const opt: { [key: string]: string } = {
'Y+': date.getFullYear().toString(), // 年
'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
'd+': date.getDate().toString(), // 日
'H+': date.getHours().toString(), // 时
'M+': date.getMinutes().toString(), // 分
'S+': date.getSeconds().toString(), // 秒
'q+': qut, // 季度
};
// 中文数字 (星期)
const week: { [key: string]: string } = {
'0': '日',
'1': '一',
'2': '二',
'3': '三',
'4': '四',
'5': '五',
'6': '六',
};
// 中文数字（季度）
const quarter: { [key: string]: string } = {
'1': '一',
'2': '二',
'3': '三',
'4': '四',
};
if (/(W+)/.test(format))
format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
for (let k in opt) {
let r = new RegExp('(' + k + ')').exec(format);
// 若输入的长度不为1，则前面补零
if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
}
return format;
}
/**
* 获取当前日期是第几周
* @param dateTime 当前传入的日期值
* @returns 返回第几周数字值
*/
export function getWeek(dateTime: Date): number {
let temptTime = new Date(dateTime.getTime());
// 周几
let weekday = temptTime.getDay() || 7;
// 周1+5天=周六
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
let firstDay = new Date(temptTime.getFullYear(), 0, 1);
let dayOfWeek = firstDay.getDay();
let spendDay = 1;
if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
let result = Math.ceil(d / 7);
return result;
}
/**
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
* @param param 当前时间，new Date() 格式或者字符串时间格式
* @param format 需要转换的时间格式字符串
* @description param 10秒： 10 * 1000
* @description param 1分： 60 * 1000
* @description param 1小时： 60 * 60 * 1000
* @description param 24小时：60 * 60 * 24 * 1000
* @description param 3天： 60 * 60* 24 * 1000 * 3
* @returns 返回拼接后的时间字符串
*/
export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
// 传入格式处理、存储转换值
let t: any, s: number;
// 获取js 时间戳
let time: number = new Date().getTime();
// 是否是对象
typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
// 当前时间戳 - 传入时间戳
time = Number.parseInt(`${time - t}`);
if (time < 10000) {
// 10秒内
return '刚刚';
} else if (time < 60000 && time >= 10000) {
// 超过10秒少于1分钟内
s = Math.floor(time / 1000);
return `${s}秒前`;
} else if (time < 3600000 && time >= 60000) {
// 超过1分钟少于1小时
s = Math.floor(time / 60000);
return `${s}分钟前`;
} else if (time < 86400000 && time >= 3600000) {
// 超过1小时少于24小时
s = Math.floor(time / 3600000);
return `${s}小时前`;
} else if (time < 259200000 && time >= 86400000) {
// 超过1天少于3天内
s = Math.floor(time / 86400000);
return `${s}天前`;
} else {
// 超过3天
let date = typeof param === 'string' || 'object' ? new Date(param) : param;
return formatDate(date, format);
}
}
/**
* 时间问候语
* @param param 当前时间，new Date() 格式
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
* @returns 返回拼接后的时间字符串
*/
export function formatAxis(param: Date): string {
let hour: number = new Date(param).getHours();
if (hour < 6) return '凌晨好';
else if (hour < 9) return '早上好';
else if (hour < 12) return '上午好';
else if (hour < 14) return '中午好';
else if (hour < 17) return '下午好';
else if (hour < 19) return '傍晚好';
else if (hour < 22) return '晚上好';
else return '夜里好';
}

101
web/src/utils/getStyleSheets.ts Normal file
View File

@@ -0,0 +1,101 @@
import { nextTick } from 'vue';
import * as svg from '@element-plus/icons-vue';
// 获取阿里字体图标
const getAlicdnIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const styles: any = document.styleSheets;
let sheetsList = [];
let sheetsIconList = [];
for (let i = 0; i < styles.length; i++) {
if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
sheetsList.push(styles[i]);
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
);
}
}
}
if (sheetsIconList.length > 0) resolve(sheetsIconList);
else reject('未获取到值，请刷新重试');
});
});
};
// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
const getElementPlusIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const icons = svg as any;
const sheetsIconList = [];
for (const i in icons) {
sheetsIconList.push(`ele-${icons[i].name}`);
}
if (sheetsIconList.length > 0) resolve(sheetsIconList);
else reject('未获取到值，请刷新重试');
});
});
};
// 初始化获取 css 样式，这里使用 fontawesome 的图标
const getAwesomeIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const styles: any = document.styleSheets;
let sheetsList = [];
let sheetsIconList = [];
for (let i = 0; i < styles.length; i++) {
if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
sheetsList.push(styles[i]);
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
) {
if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
);
}
}
}
}
if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
else reject('未获取到值，请刷新重试');
});
});
};
/**
* 获取字体图标 `document.styleSheets`
* @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
* @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
* @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
*/
const initIconfont = {
// iconfont
ali: () => {
return getAlicdnIconfont();
},
// element plus
ele: () => {
return getElementPlusIconfont();
},
// fontawesome
awe: () => {
return getAwesomeIconfont();
},
};
// 导出方法
export default initIconfont;

42
web/src/utils/loading.ts Normal file
View File

@@ -0,0 +1,42 @@
import { nextTick } from 'vue';
import '/@/theme/loading.scss';
/**
* 页面全局 Loading
* @method start 创建 loading
* @method done 移除 loading
*/
export const NextLoading = {
// 创建 loading
start: () => {
const bodys: Element = document.body;
const div = <HTMLElement>document.createElement('div');
div.setAttribute('class', 'loading-next');
const htmls = `
<div class="loading-next-box">
<div class="loading-next-box-warp">
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
<div class="loading-next-box-item"></div>
</div>
</div>
`;
div.innerHTML = htmls;
bodys.insertBefore(div, bodys.childNodes[0]);
window.nextLoading = true;
},
// 移除 loading
done: () => {
nextTick(() => {
window.nextLoading = false;
const el = <HTMLElement>document.querySelector('.loading-next');
el?.parentNode?.removeChild(el);
});
},
};

200
web/src/utils/other.ts Normal file
View File

@@ -0,0 +1,200 @@
import { nextTick } from 'vue';
import type { App } from 'vue';
import * as svg from '@element-plus/icons-vue';
import router from '/@/router/index';
import pinia from '/@/stores/index';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { i18n } from '/@/i18n/index';
import { Local } from '/@/utils/storage';
import SvgIcon from '/@/components/svgIcon/index.vue';
/**
* 导出全局注册 element plus svg 图标
* @param app vue 实例
* @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
*/
export function elSvg(app: App) {
const icons = svg as any;
for (const i in icons) {
app.component(`ele-${icons[i].name}`, icons[i]);
}
app.component('SvgIcon', SvgIcon);
}
/**
* 设置浏览器标题国际化
* @method const title = useTitle(); ==> title()
*/
export function useTitle() {
const stores = useThemeConfig(pinia);
const { themeConfig } = storeToRefs(stores);
nextTick(() => {
let webTitle = '';
let globalTitle: string = themeConfig.value.globalTitle;
const { path, meta } = router.currentRoute.value;
if (path === '/login') {
webTitle = <any>meta.title;
} else {
webTitle = setTagsViewNameI18n(router.currentRoute.value);
}
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
});
}
/**
* 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
* @param params 路由 query、params 中的 tagsViewName
* @returns 返回当前 tagsViewName 名称
*/
export function setTagsViewNameI18n(item: any) {
let tagsViewName: any = '';
const { query, params, meta } = item;
if (query?.tagsViewName || params?.tagsViewName) {
if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/(zh-cn|en|zh-tw)\//.test(params?.tagsViewName)) {
// 国际化
const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
tagsViewName = urlTagsParams[i18n.global.locale];
} else {
// 非国际化
tagsViewName = query?.tagsViewName || params?.tagsViewName;
}
} else {
// 非自定义 tagsView 名称
tagsViewName = i18n.global.t(<any>meta.title);
}
return tagsViewName;
}
/**
* 图片懒加载
* @param el dom 目标元素
* @param arr 列表数据
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
*/
export const lazyImg = (el: any, arr: any) => {
const io = new IntersectionObserver((res) => {
res.forEach((v: any) => {
if (v.isIntersecting) {
const { img, key } = v.target.dataset;
v.target.src = img;
v.target.onload = () => {
io.unobserve(v.target);
arr[key]['loading'] = false;
};
}
});
});
nextTick(() => {
document.querySelectorAll(el).forEach((img) => io.observe(img));
});
};
/**
* 全局组件大小
* @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
*/
export const globalComponentSize = (): string => {
const stores = useThemeConfig(pinia);
const { themeConfig } = storeToRefs(stores);
return Local.get('themeConfig')?.globalComponentSize || themeConfig.value?.globalComponentSize;
};
/**
* 对象深克隆
* @param obj 源对象
* @returns 克隆后的对象
*/
export function deepClone(obj: any) {
let newObj: any;
try {
newObj = obj.push ? [] : {};
} catch (error) {
newObj = {};
}
for (let attr in obj) {
if (obj[attr] && typeof obj[attr] === 'object') {
newObj[attr] = deepClone(obj[attr]);
} else {
newObj[attr] = obj[attr];
}
}
return newObj;
}
/**
* 判断是否是移动端
*/
export function isMobile() {
if (
navigator.userAgent.match(
/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i
)
) {
return true;
} else {
return false;
}
}
/**
* 判断数组对象中所有属性是否为空，为空则删除当前行对象
* @description @感谢大黄
* @param list 数组对象
* @returns 删除空值后的数组对象
*/
export function handleEmpty(list: any) {
const arr = [];
for (const i in list) {
const d = [];
for (const j in list[i]) {
d.push(list[i][j]);
}
const leng = d.filter((item) => item === '').length;
if (leng !== d.length) {
arr.push(list[i]);
}
}
return arr;
}
/**
* 统一批量导出
* @method elSvg 导出全局注册 element plus svg 图标
* @method useTitle 设置浏览器标题国际化
* @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
* @method lazyImg 图片懒加载
* @method globalComponentSize() element plus 全局组件大小
* @method deepClone 对象深克隆
* @method isMobile 判断是否是移动端
* @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
*/
const other = {
elSvg: (app: App) => {
elSvg(app);
},
useTitle: () => {
useTitle();
},
setTagsViewNameI18n(route: any) {
return setTagsViewNameI18n(route);
},
lazyImg: (el: any, arr: any) => {
lazyImg(el, arr);
},
globalComponentSize: () => {
return globalComponentSize();
},
deepClone: (obj: any) => {
return deepClone(obj);
},
isMobile: () => {
return isMobile();
},
handleEmpty: (list: any) => {
return handleEmpty(list);
},
};
// 统一批量导出
export default other;

61
web/src/utils/request.ts Normal file
View File

@@ -0,0 +1,61 @@
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
// 配置新建一个 axios 实例
const service = axios.create({
baseURL: import.meta.env.VITE_API_URL as any,
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
});
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么 token
if (Session.get('token')) {
(<any>config.headers).common['Authorization'] = `${Session.get('token')}`;
}
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做点什么
const res = response.data;
if (res.code && res.code !== 0) {
// `token` 过期或者账号已在别处登录
if (res.code === 401 || res.code === 4001) {
Session.clear(); // 清除浏览器全部临时缓存
window.location.href = '/'; // 去登录页
ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
.then(() => {})
.catch(() => {});
}
return Promise.reject(service.interceptors.response);
} else {
return response.data;
}
},
(error) => {
// 对响应错误做点什么
if (error.message.indexOf('timeout') != -1) {
ElMessage.error('网络超时');
} else if (error.message == 'Network Error') {
ElMessage.error('网络连接错误');
} else {
if (error.response.data) ElMessage.error(error.response.statusText);
else ElMessage.error('接口路径找不到');
}
return Promise.reject(error);
}
);
// 导出 axios 实例
export default service;

137
web/src/utils/service.ts Normal file
View File

@@ -0,0 +1,137 @@
import axios from "axios";
import { get } from "lodash-es";
import { errorLog, errorCreate } from "./tools.ts";
// import { env } from "/src/utils/util.env";
// import { useUserStore } from "../store/modules/user";
import { Session } from '/@/utils/storage';
/**
* @description 创建请求实例
*/
function createService() {
// 创建一个 axios 实例
const service = axios.create();
// 请求拦截
service.interceptors.request.use(
(config) => config,
(error) => {
// 发送失败
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截
service.interceptors.response.use(
(response) => {
if (response.config.responseType === "blob") {
return response;
}
// dataAxios 是 axios 返回数据中的 data
const dataAxios = response.data;
// 这个状态码是和后端约定的
const { code } = dataAxios;
// 根据 code 进行判断
if (code === undefined) {
// 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
errorCreate(`非标准返回：${dataAxios}， ${response.config.url}`);
return dataAxios;
} else {
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 0:
// [ 示例 ] code === 0 代表没有错误
// @ts-ignore
if (response.config.unpack === false) {
//如果不需要解包
return dataAxios;
}
return dataAxios.data;
default:
// 不是正确的 code
errorCreate(`${dataAxios.msg}: ${response.config.url}`);
return dataAxios;
}
}
},
(error) => {
const status = get(error, "response.status");
switch (status) {
case 400:
error.message = "请求错误";
break;
case 401:
error.message = "未授权，请登录";
break;
case 403:
error.message = "拒绝访问";
break;
case 404:
error.message = `请求地址出错: ${error.response.config.url}`;
break;
case 408:
error.message = "请求超时";
break;
case 500:
error.message = "服务器内部错误";
break;
case 501:
error.message = "服务未实现";
break;
case 502:
error.message = "网关错误";
break;
case 503:
error.message = "服务不可用";
break;
case 504:
error.message = "网关超时";
break;
case 505:
error.message = "HTTP版本不受支持";
break;
default:
break;
}
errorLog(error);
if (status === 401) {
// const userStore = useUserStore();
// userStore.logout();
}
return Promise.reject(error);
}
);
return service;
}
/**
* @description 创建请求方法
* @param {Object} service axios 实例
*/
function createRequestFunction(service:any) {
return function (config:any) {
const configDefault = {
headers: {
"Content-Type": get(config, "headers.Content-Type", "application/json")
},
timeout: 5000,
baseURL: '',
data: {}
};
// const token = userStore.getToken;
const token = Session.get('token')
if (token != null) {
// @ts-ignore
configDefault.headers.Authorization = token;
}
return service(Object.assign(configDefault, config));
};
}
// 用于真实网络请求的实例和请求方法
export const service = createService();
export const request = createRequestFunction(service);
// 用于模拟网络请求的实例和请求方法
export const serviceForMock = createService();
export const requestForMock = createRequestFunction(serviceForMock);

48
web/src/utils/setIconfont.ts Normal file
View File

@@ -0,0 +1,48 @@
// 字体图标 url
const cssCdnUrlList: Array<string> = [
'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
];
// 第三方 js url
const jsCdnUrlList: Array<string> = [];
// 动态批量设置字体图标
export function setCssCdn() {
if (cssCdnUrlList.length <= 0) return false;
cssCdnUrlList.map((v) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = v;
link.crossOrigin = 'anonymous';
document.getElementsByTagName('head')[0].appendChild(link);
});
}
// 动态批量设置第三方js
export function setJsCdn() {
if (jsCdnUrlList.length <= 0) return false;
jsCdnUrlList.map((v) => {
let link = document.createElement('script');
link.src = v;
document.body.appendChild(link);
});
}
/**
* 批量设置字体图标、动态js
* @method cssCdn 动态批量设置字体图标
* @method jsCdn 动态批量设置第三方js
*/
const setIntroduction = {
// 设置css
cssCdn: () => {
setCssCdn();
},
// 设置js
jsCdn: () => {
setJsCdn();
},
};
// 导出函数方法
export default setIntroduction;

59
web/src/utils/storage.ts Normal file
View File

@@ -0,0 +1,59 @@
import Cookies from 'js-cookie';
/**
* window.localStorage 浏览器永久缓存
* @method set 设置永久缓存
* @method get 获取永久缓存
* @method remove 移除永久缓存
* @method clear 移除全部永久缓存
*/
export const Local = {
// 设置永久缓存
set(key: string, val: any) {
window.localStorage.setItem(key, JSON.stringify(val));
},
// 获取永久缓存
get(key: string) {
let json: any = window.localStorage.getItem(key);
return JSON.parse(json);
},
// 移除永久缓存
remove(key: string) {
window.localStorage.removeItem(key);
},
// 移除全部永久缓存
clear() {
window.localStorage.clear();
},
};
/**
* window.sessionStorage 浏览器临时缓存
* @method set 设置临时缓存
* @method get 获取临时缓存
* @method remove 移除临时缓存
* @method clear 移除全部临时缓存
*/
export const Session = {
// 设置临时缓存
set(key: string, val: any) {
if (key === 'token') return Cookies.set(key, val);
window.sessionStorage.setItem(key, JSON.stringify(val));
},
// 获取临时缓存
get(key: string) {
if (key === 'token') return Cookies.get(key);
let json: any = window.sessionStorage.getItem(key);
return JSON.parse(json);
},
// 移除临时缓存
remove(key: string) {
if (key === 'token') return Cookies.remove(key);
window.sessionStorage.removeItem(key);
},
// 移除全部临时缓存
clear() {
Cookies.remove('token');
window.sessionStorage.clear();
},
};

59
web/src/utils/theme.ts Normal file
View File

@@ -0,0 +1,59 @@
import { ElMessage } from 'element-plus';
/**
* hex颜色转rgb颜色
* @param str 颜色值字符串
* @returns 返回处理后的颜色值
*/
export function hexToRgb(str: any) {
let hexs: any = '';
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(str)) return ElMessage.warning('输入错误的hex');
str = str.replace('#', '');
hexs = str.match(/../g);
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
return hexs;
}
/**
* rgb颜色转Hex颜色
* @param r 代表红色
* @param g 代表绿色
* @param b 代表蓝色
* @returns 返回处理后的颜色值
*/
export function rgbToHex(r: any, g: any, b: any) {
let reg = /^\d{1,3}$/;
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning('输入错误的rgb颜色值');
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
return `#${hexs.join('')}`;
}
/**
* 加深颜色值
* @param color 颜色值字符串
* @param level 加深的程度，限0-1之间
* @returns 返回处理后的颜色值
*/
export function getDarkColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
let rgb = hexToRgb(color);
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}
/**
* 变浅颜色值
* @param color 颜色值字符串
* @param level 加深的程度，限0-1之间
* @returns 返回处理后的颜色值
*/
export function getLightColor(color: string, level: number) {
let reg = /^\#?[0-9A-Fa-f]{6}$/;
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
let rgb = hexToRgb(color);
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

66
web/src/utils/tools.ts Normal file
View File

@@ -0,0 +1,66 @@
/**
* @description 安全地解析 json 字符串
* @param {String} jsonString 需要解析的 json 字符串
* @param {String} defaultValue 默认值
*/
import { uiContext } from "@fast-crud/fast-crud";
export function parse(jsonString = "{}", defaultValue = {}) {
let result = defaultValue;
try {
result = JSON.parse(jsonString);
} catch (error) {
console.log(error);
}
return result;
}
/**
* @description 接口请求返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
* @param {Number} code 状态码
*/
export function response(data = {}, msg = "", code = 0) {
return [200, { code, msg, data }];
}
/**
* @description 接口请求返回 正确返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
*/
export function responseSuccess(data = {}, msg = "成功") {
return response(data, msg);
}
/**
* @description 接口请求返回 错误返回
* @param {Any} data 返回值
* @param {String} msg 状态信息
* @param {Number} code 状态码
*/
export function responseError(data = {}, msg = "请求失败", code = 500) {
return response(data, msg, code);
}
/**
* @description 记录和显示错误
* @param {Error} error 错误对象
*/
export function errorLog(error) {
// 打印到控制台
console.error(error);
// 显示提示
uiContext.get().notification.error({ message: error.message });
}
/**
* @description 创建一个错误
* @param {String} msg 错误信息
*/
export function errorCreate(msg) {
const error = new Error(msg);
errorLog(error);
throw error;
}

370
web/src/utils/toolsValidate.ts Normal file
View File

@@ -0,0 +1,370 @@
/**
* 2020.11.29 lyt 整理
* 工具类集合，适用于平时开发
* 新增多行注释信息，鼠标放到方法名即可查看
*/
/**
* 验证百分比（不可以小数）
* @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 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 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) {
// 调用小数或整数(不可以负数)方法
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 返回处理后的字符串
*/
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;
}

47
web/src/utils/wartermark.ts Normal file
View File

@@ -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: any = 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 = '15px';
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;