herenshan112
3 weeks ago
9 changed files with 714 additions and 16 deletions
@ -0,0 +1,307 @@ |
|||||
|
/** |
||||
|
* 数字 |
||||
|
*/ |
||||
|
const REG_NUMBER:string = ".*\\d+.*"; |
||||
|
/** |
||||
|
* 小写字母 |
||||
|
*/ |
||||
|
const REG_UPPERCASE:string = ".*[A-Z]+.*"; |
||||
|
/** |
||||
|
* 大写字母 |
||||
|
*/ |
||||
|
const REG_LOWERCASE:string = ".*[a-z]+.*"; |
||||
|
/** |
||||
|
* 特殊符号(~!@#$%^&*()_+|<>,.?/:;'[]{}\) |
||||
|
*/ |
||||
|
const REG_SYMBOL:string = ".*[~!@#$%^&*()_+|<>,.?/:;'\\[\\]{}\"]+.*"; |
||||
|
/** |
||||
|
* 键盘字符表(小写) |
||||
|
* 非shift键盘字符表 |
||||
|
*/ |
||||
|
const CHAR_TABLE1:string[][] = [ |
||||
|
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '\0'], |
||||
|
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'], |
||||
|
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', '\0', '\0'], |
||||
|
['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', '\0', '\0', '\0']]; |
||||
|
/** |
||||
|
* shift键盘的字符表 |
||||
|
*/ |
||||
|
const CHAR_TABLE2:string[][] = [ |
||||
|
['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '\0'], |
||||
|
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '{', '}', '|'], |
||||
|
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ':', '"', '\0', '\0'], |
||||
|
['z', 'x', 'c', 'v', 'b', 'n', 'm', '<', '>', '?', '\0', '\0', '\0']]; |
||||
|
|
||||
|
/** |
||||
|
* 校验密码是否符合条件 |
||||
|
* @param password 密码 |
||||
|
* @param username 用户名 |
||||
|
*/ |
||||
|
export const checkPasswordRule = (password:string,username:string) => { |
||||
|
if (password === '' || password.length < 8 || password.length > 32) { |
||||
|
// console.log("长度小于8，或大于32");
|
||||
|
return "密码长度应大于8小于32"; |
||||
|
} if (password.indexOf(username) !== -1) { |
||||
|
// console.log("包含用户名");
|
||||
|
return "请勿包含用户名"; |
||||
|
} |
||||
|
if (isContinuousChar(password)) { |
||||
|
// console.log("包含3个及以上相同或字典连续字符");
|
||||
|
return "请勿包含3个及以上相同或连续的字符"; |
||||
|
} |
||||
|
if (isKeyBoardContinuousChar(password)) { |
||||
|
// console.log("包含3个及以上键盘连续字符");
|
||||
|
return "请勿包含3个及以上键盘连续字符"; |
||||
|
} |
||||
|
let i:number = 0; |
||||
|
if (password.match(REG_NUMBER)) i++; |
||||
|
if (password.match(REG_LOWERCASE)) i++; |
||||
|
if (password.match(REG_UPPERCASE)) i++; |
||||
|
if (password.match(REG_SYMBOL)) i++; |
||||
|
if (i < 2) { |
||||
|
// console.log(("数字、小写字母、大写字母、特殊字符，至少包含两种"));
|
||||
|
return "数字、小写字母、大写字母、特殊字符，至少包含两种"; |
||||
|
} |
||||
|
// console.log(i);
|
||||
|
return "校验通过"; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 是否包含3个及以上相同或字典连续字符 |
||||
|
*/ |
||||
|
const isContinuousChar = (password:string) => { |
||||
|
let chars: string[] = password.split('') |
||||
|
let charCode: number[] = []; |
||||
|
for (let i = 0; i < chars.length - 2; i++) { |
||||
|
charCode[i] = chars[i].charCodeAt(0) |
||||
|
} |
||||
|
for (let i = 0; i < charCode.length - 2; i++) { |
||||
|
let n1 = charCode[i]; |
||||
|
let n2 = charCode[i + 1]; |
||||
|
let n3 = charCode[i + 2]; |
||||
|
// 判断重复字符
|
||||
|
if (n1 == n2 && n1 == n3) { |
||||
|
return true; |
||||
|
} |
||||
|
// 判断连续字符： 正序 + 倒序
|
||||
|
if ((n1 + 1 == n2 && n1 + 2 == n3) || (n1 - 1 == n2 && n1 - 2 == n3)) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
/** |
||||
|
* 是否包含3个及以上键盘连续字符 |
||||
|
* @param password 待匹配的字符串 |
||||
|
*/ |
||||
|
const isKeyBoardContinuousChar = (password:string) => { |
||||
|
if (password === '') { |
||||
|
return false; |
||||
|
} |
||||
|
//考虑大小写，都转换成小写字母
|
||||
|
let lpStrChars: string[] = password.toLowerCase().split('') |
||||
|
// 获取字符串长度
|
||||
|
let nStrLen: number = lpStrChars.length; |
||||
|
// 定义位置数组：row - 行，col - column 列
|
||||
|
const pRowCharPos:number[] = new Array(nStrLen).fill('') |
||||
|
const pColCharPos: number[] = new Array(nStrLen).fill('') |
||||
|
for (let i = 0; i < nStrLen; i++) { |
||||
|
let chLower: string = lpStrChars[i]; |
||||
|
pColCharPos[i] = -1; |
||||
|
// 检索在表1中的位置，构建位置数组
|
||||
|
for (let nRowTable1Idx = 0; nRowTable1Idx < 4; nRowTable1Idx++) { |
||||
|
for (let nColTable1Idx = 0; nColTable1Idx < 13; nColTable1Idx++) { |
||||
|
if (chLower == CHAR_TABLE1[nRowTable1Idx][nColTable1Idx]) { |
||||
|
pRowCharPos[i] = nRowTable1Idx; |
||||
|
pColCharPos[i] = nColTable1Idx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 在表1中没找到，到表二中去找，找到则continue
|
||||
|
if (pColCharPos[i] >= 0) { |
||||
|
continue; |
||||
|
} |
||||
|
// 检索在表2中的位置，构建位置数组
|
||||
|
for (let nRowTable2Idx = 0; nRowTable2Idx < 4; nRowTable2Idx++) { |
||||
|
for (let nColTable2Idx = 0; nColTable2Idx < 13; nColTable2Idx++) { |
||||
|
if (chLower == CHAR_TABLE2[nRowTable2Idx][nColTable2Idx]) { |
||||
|
pRowCharPos[i] = nRowTable2Idx; |
||||
|
pColCharPos[i] = nColTable2Idx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 匹配坐标连线
|
||||
|
for (let j = 1; j <= nStrLen - 2; j++) { |
||||
|
//同一行
|
||||
|
if (pRowCharPos[j - 1] == pRowCharPos[j] && pRowCharPos[j] == pRowCharPos[j + 1]) { |
||||
|
// 键盘行正向连续（asd）或者键盘行反向连续（dsa）
|
||||
|
if ((pColCharPos[j - 1] + 1 == pColCharPos[j] && pColCharPos[j] + 1 == pColCharPos[j + 1]) || |
||||
|
(pColCharPos[j + 1] + 1 == pColCharPos[j] && pColCharPos[j] + 1 == pColCharPos[j - 1])) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
//同一列
|
||||
|
if (pColCharPos[j - 1] == pColCharPos[j] && pColCharPos[j] == pColCharPos[j + 1]) { |
||||
|
//键盘列连续（qaz）或者键盘列反向连续（zaq）
|
||||
|
if ((pRowCharPos[j - 1] + 1 == pRowCharPos[j] && pRowCharPos[j] + 1 == pRowCharPos[j + 1]) || |
||||
|
(pRowCharPos[j - 1] - 1 == pRowCharPos[j] && pRowCharPos[j] - 1 == pRowCharPos[j + 1])) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 密码强度校验 |
||||
|
*/ |
||||
|
/** |
||||
|
* 长度 |
||||
|
* @param str |
||||
|
*/ |
||||
|
const length = (str:string) => { |
||||
|
if(str.length<5){ |
||||
|
return 5; |
||||
|
}else if(str.length<8){ |
||||
|
return 10; |
||||
|
}else{ |
||||
|
return 25; |
||||
|
} |
||||
|
} |
||||
|
/** |
||||
|
* 字母 |
||||
|
* @param str |
||||
|
*/ |
||||
|
const letters = (str: string) => { |
||||
|
let count1=0,count2=0; |
||||
|
for(let i=0;i<str.length;i++){ |
||||
|
if(str.charAt(i)>='a'&&str.charAt(i)<='z'){ |
||||
|
count1++; |
||||
|
} |
||||
|
if(str.charAt(i)>='A'&&str.charAt(i)<='Z'){ |
||||
|
count2++; |
||||
|
} |
||||
|
} |
||||
|
if(count1==0 && count2==0){ |
||||
|
return 0; |
||||
|
} |
||||
|
if(count1!=0 && count2!=0){ |
||||
|
return 20; |
||||
|
} |
||||
|
return 10; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 数字 |
||||
|
* @param str |
||||
|
*/ |
||||
|
const numbers = (str: string) => { |
||||
|
let count=0; |
||||
|
for(let i=0;i<str.length;i++){ |
||||
|
if(str.charAt(i)>='0'&&str.charAt(i)<='9'){ |
||||
|
count++; |
||||
|
} |
||||
|
} |
||||
|
if(count==0){ |
||||
|
return 0; |
||||
|
} |
||||
|
if(count==1){ |
||||
|
return 10; |
||||
|
} |
||||
|
return 20; |
||||
|
} |
||||
|
/** |
||||
|
* 符号 |
||||
|
* @param str |
||||
|
*/ |
||||
|
const symbols = (str: string) => { |
||||
|
let count=0; |
||||
|
for(let i=0;i<str.length;i++){ |
||||
|
if(str.charCodeAt(i)>=0x21 && str.charCodeAt(i)<=0x2F || |
||||
|
str.charCodeAt(i)>=0x3A && str.charCodeAt(i)<=0x40 || |
||||
|
str.charCodeAt(i)>=0x5B && str.charCodeAt(i)<=0x60 || |
||||
|
str.charCodeAt(i)>=0x7B && str.charCodeAt(i)<=0x7E ){ |
||||
|
count++; |
||||
|
} |
||||
|
} |
||||
|
if(count==0){ |
||||
|
return 0; |
||||
|
} |
||||
|
if(count==1){ |
||||
|
return 10; |
||||
|
} |
||||
|
return 25; |
||||
|
} |
||||
|
/** |
||||
|
* 得分机制 |
||||
|
* @param str |
||||
|
*/ |
||||
|
const rewards = (str: string) => { |
||||
|
let letter=letters(str);//字母
|
||||
|
let number=numbers(str);//数字
|
||||
|
let symbol=symbols(str);//符号
|
||||
|
if(letter>0 && number>0 && symbol==0){//字母和数字
|
||||
|
return 2; |
||||
|
} |
||||
|
if(letter==10 && number>0 && symbol>0){//字母、数字和符号
|
||||
|
return 3; |
||||
|
} |
||||
|
if(letter==20 && number>0 && symbol>0){//大小写字母、数字和符号
|
||||
|
return 5; |
||||
|
} |
||||
|
return 0; |
||||
|
} |
||||
|
/** |
||||
|
* 最终评分 |
||||
|
* @param str |
||||
|
*/ |
||||
|
export const level = (str: string) => { |
||||
|
let lengths=length(str);//长度
|
||||
|
let letter=letters(str);//字母
|
||||
|
let number=numbers(str);//数字
|
||||
|
let symbol=symbols(str);//符号
|
||||
|
let reward=rewards(str);//奖励
|
||||
|
let sum=lengths+letter+number+symbol+reward; |
||||
|
console.log(sum); |
||||
|
if(sum>=80){ |
||||
|
return "非常强";//非常安全
|
||||
|
}else if(sum>=60){ |
||||
|
return "强";//非常强
|
||||
|
}else if(sum>=40){ |
||||
|
return "一般";//一般
|
||||
|
}else if(sum>=25){ |
||||
|
return "弱";//弱
|
||||
|
}else{ |
||||
|
return "非常弱";//非常弱
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const checkPwdRule = (password:string) => { |
||||
|
if (password === '' || password.length < 8 || password.length > 32) { |
||||
|
// console.log("长度小于8，或大于32");
|
||||
|
return "密码长度应大于8小于32"; |
||||
|
} |
||||
|
if (isContinuousChar(password)) { |
||||
|
// console.log("包含3个及以上相同或字典连续字符");
|
||||
|
return "请勿包含3个及以上相同或连续的字符"; |
||||
|
} |
||||
|
if (isKeyBoardContinuousChar(password)) { |
||||
|
// console.log("包含3个及以上键盘连续字符");
|
||||
|
return "请勿包含3个及以上键盘连续字符"; |
||||
|
} |
||||
|
let i:number = 0; |
||||
|
if (password.match(REG_NUMBER)) i++; |
||||
|
if (password.match(REG_LOWERCASE)) i++; |
||||
|
if (password.match(REG_UPPERCASE)) i++; |
||||
|
if (password.match(REG_SYMBOL)) i++; |
||||
|
if (i < 2) { |
||||
|
// console.log(("数字、小写字母、大写字母、特殊字符，至少包含两种"));
|
||||
|
return "数字、小写字母、大写字母、特殊字符，至少包含两种"; |
||||
|
} |
||||
|
// console.log(i);
|
||||
|
return "校验通过"; |
||||
|
} |
||||
@ -0,0 +1,248 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-09-26 09:12:55 |
||||
|
@ 备注: 编辑自定义表单数据 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { ref, reactive, onMounted, computed, nextTick } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { |
||||
|
string2json, |
||||
|
stringToObj |
||||
|
} from '@/utils/DesignForm/form' |
||||
|
|
||||
|
import { haveCustomerFormVersion } from '@/api/taskapi/management' |
||||
|
import { judgeSubmitCancel } from '@/api/DesignForm/requestapi' |
||||
|
|
||||
|
import '@/assets/scss/element-var.scss' |
||||
|
import '@/assets/scss/index.scss' |
||||
|
import '@/assets/iconfont/iconfont.css' |
||||
|
import 'element-plus/dist/index.css' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
iseditopen:{ |
||||
|
type:Boolean, |
||||
|
default:true |
||||
|
}, |
||||
|
versionid:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
versiontitle:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
masterskey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
infoid:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
drawerwith:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
} |
||||
|
}) |
||||
|
const submitButton = { |
||||
|
type: "div", |
||||
|
control:{}, |
||||
|
config:{ |
||||
|
textAlign: "center", |
||||
|
span: "" |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
type: "button", |
||||
|
control:{ |
||||
|
label: "保存", |
||||
|
type: "primary", |
||||
|
key: "submit" |
||||
|
}, |
||||
|
config:{ |
||||
|
textAlign: "center" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
const cancelButton = { |
||||
|
type: "div", |
||||
|
control:{}, |
||||
|
config:{ |
||||
|
textAlign: "center", |
||||
|
span: "" |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
type: "button", |
||||
|
control:{ |
||||
|
label: "返回", |
||||
|
type: "danger", |
||||
|
key: "cancel" |
||||
|
}, |
||||
|
config:{ |
||||
|
textAlign: "center" |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
const submitAndCancelButton = { |
||||
|
type: "div", |
||||
|
control:{}, |
||||
|
config:{ |
||||
|
span: 24, |
||||
|
textAlign: "center" |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
type: "button", |
||||
|
control:{ |
||||
|
label: "保存", |
||||
|
type: "primary", |
||||
|
key: "submit" |
||||
|
}, |
||||
|
config:{ |
||||
|
span: 0 |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: "button", |
||||
|
control:{ |
||||
|
label: "返回", |
||||
|
type: "danger", |
||||
|
key: "cancel" |
||||
|
}, |
||||
|
config:{ |
||||
|
span: 0 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
const loadingData = ref(false) |
||||
|
const formEl = ref() |
||||
|
const state = reactive<any>({ |
||||
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
||||
|
formData: { |
||||
|
list: [], |
||||
|
form: {}, |
||||
|
config: {} |
||||
|
}, |
||||
|
dict: {}, |
||||
|
formId: props.versionid, |
||||
|
id: props.masterskey, |
||||
|
loading: true |
||||
|
}) |
||||
|
const formType = computed(() => { |
||||
|
// 带有参数id为编辑状态 |
||||
|
if (props.infoid) { |
||||
|
return 2 |
||||
|
} else { |
||||
|
return 1 |
||||
|
} |
||||
|
}) |
||||
|
const emits = defineEmits(["update:iseditopen","searchquery"]); |
||||
|
const isShow = computed({ |
||||
|
get: () => props.iseditopen, |
||||
|
set: (val) => { |
||||
|
emits("update:iseditopen", val); |
||||
|
}, |
||||
|
}); |
||||
|
//获取表单数据 |
||||
|
const getTaskFormData = () =>{ |
||||
|
loadingData.value = true; |
||||
|
haveCustomerFormVersion({id:props.versionid}) |
||||
|
.then(({ data }) =>{ |
||||
|
// console.log("表单数据",data) |
||||
|
state.id=props.versionid |
||||
|
state.formData = stringToObj(data.mastesform) |
||||
|
state.dict = string2json(data.dict) |
||||
|
|
||||
|
judgeSubmitCancel({"name":data.mastesformjson}) |
||||
|
.then((data:any) =>{ |
||||
|
if(data.code == 0){ |
||||
|
if (data.data == 3 || data.data == 4){ |
||||
|
state.formData.list.push(submitButton) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
.finally(()=>{ |
||||
|
formEl.value.getData({ formId: props.versionid, id: props.masterskey}) |
||||
|
loadingData.value = false; |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const drawerWith = ref<number>(0); |
||||
|
onMounted(()=>{ |
||||
|
drawerWith.value = window.innerWidth - 220 |
||||
|
|
||||
|
}); |
||||
|
window.addEventListener("resize", function(){ |
||||
|
drawerWith.value = window.innerWidth -220 |
||||
|
}) |
||||
|
const beforeSubmit = (params: any) => { |
||||
|
params.formId = props.masterskey |
||||
|
params.id = props.versionid |
||||
|
// emits("update:isopen", false); |
||||
|
// console.log(params,"===========================>") |
||||
|
return params |
||||
|
} |
||||
|
const afterSubmit = (type: string) => { |
||||
|
if (type === 'success') { |
||||
|
// router.go(-1) |
||||
|
// console.log("表单提交成功") |
||||
|
emits("searchquery"); |
||||
|
closeAppSubmit(); |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
const closeAppSubmit = () => { |
||||
|
emits("update:iseditopen", false); |
||||
|
initData(); |
||||
|
} |
||||
|
const initData = () => { |
||||
|
state.formData = { |
||||
|
list: [], |
||||
|
form: {}, |
||||
|
config: {} |
||||
|
}; |
||||
|
state.dict = {}; |
||||
|
state.formId = 0; |
||||
|
state.id = 0; |
||||
|
state.loading = true; |
||||
|
} |
||||
|
watch(()=>props.iseditopen,()=>{ |
||||
|
if(props.iseditopen){ |
||||
|
getTaskFormData(); |
||||
|
}else{ |
||||
|
initData() |
||||
|
} |
||||
|
}) |
||||
|
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-drawer v-model="isShow" v-loading="loadingData" :title="versiontitle" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerwith" class="drawerClass" > |
||||
|
<div class="drawerBody"> |
||||
|
<ak-form |
||||
|
ref="formEl" |
||||
|
:form-data="state.formData" |
||||
|
:type="formType" |
||||
|
:dict="state.dict" |
||||
|
request-url="getFormContent" |
||||
|
add-url="saveFormContent" |
||||
|
edit-url="editFormContent" |
||||
|
:before-submit="beforeSubmit" |
||||
|
:after-submit="afterSubmit" |
||||
|
:close-app-submit="closeAppSubmit" |
||||
|
:change-key-val="changeKeyVal" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue