<template>
|
<basic-container>
|
<avue-crud v-model="form" :option="option" :data="data" ref="crud" @on-load="onLoad" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" :page.sync="page">
|
<template slot="menu" slot-scope="{ row, index }">
|
<el-button
|
type="text"
|
size="small"
|
icon="el-icon-edit"
|
@click="handleEdit(row, index)"
|
>
|
编辑
|
</el-button>
|
<el-button
|
type="text"
|
size="small"
|
icon="el-icon-delete"
|
@click="handleDel(row, index)"
|
>
|
删除
|
</el-button>
|
</template>
|
|
<template slot="icon" slot-scope="scope">
|
<i :class="scope.row.icon" style="font-size:24px"></i>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
getPage,
|
// getOnesearch,
|
getadd,
|
getupdata,
|
getremove,
|
combination
|
} from "@/api/system/passwords";
|
export default {
|
name: "passwords.vue",
|
data() {
|
// 最小长度正则绑定值
|
let validatePass=""
|
//最大长度正则绑定值
|
let validatePass1=""
|
//过期时间正则绑定值
|
let validatePass2=""
|
//提醒时间正则绑定值
|
let validatePass3=""
|
//锁定次数正则绑定值
|
let validatePass4=""
|
//锁定时间正则绑定值
|
let validatePass5=""
|
//最小长度绑定value
|
let values=""
|
//最大长度绑定value
|
let values1=""
|
//最小长度正则方法
|
validatePass = (rule, value,callback) => {
|
values=value*1
|
if(value == ""){
|
callback(new Error('请输入密码最小长度'));
|
// }else if(values >= values1*1){
|
// callback(new Error('密码最小长度不能大于密码最大长度'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('密码最小长度的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
//最大长度正则方法
|
validatePass1= (rule, value,callback) =>{
|
values1=value*1
|
if(value == ""){
|
callback(new Error('请输入密码最大长度'));
|
}else if(values1 <= values){
|
callback(new Error('密码最大长度不能小于密码最大长度'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('密码最大长度的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
validatePass2 = (rule, value,callback) => {
|
if(value == ""){
|
callback(new Error('请输入过期时间'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('过期时间的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
validatePass3 = (rule, value,callback) => {
|
if(value == ""){
|
callback(new Error('请输入过期时间'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('过期时间的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
validatePass4 = (rule, value,callback) => {
|
if(value == ""){
|
callback(new Error('请输入锁定次数'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('锁定次数的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
validatePass5 = (rule, value,callback) => {
|
if(value == ""){
|
callback(new Error('请输入锁定时间'));
|
}else if(/[^\d]/g.test(value)){
|
callback(new Error('锁定时间的输入类型只能为数字类型'));
|
}else {
|
callback();
|
}
|
};
|
return {
|
form:{},
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 100
|
},
|
data: [],
|
option: {
|
headerAlign: 'center',
|
align: 'center',
|
border: true,
|
index: true,
|
rowKey:'id',
|
editBtn:false,
|
delBtn:false,
|
column: [
|
{
|
label: '策略名称',
|
prop: 'strategyName',
|
align: 'left',
|
span:24,
|
labelWidth: "11%",
|
rules: [{
|
required: true,
|
message: "请输入策略名称",
|
trigger: "blur"
|
}]
|
},
|
{
|
label: '密码最小长度',
|
prop: 'minPwdLen',
|
span:12,
|
labelWidth:"22%",
|
rules: [{
|
required: true,
|
validator:validatePass,
|
trigger: 'blur'
|
}]
|
},
|
{
|
label: '密码最大长度',
|
prop: 'maxPwdLen',
|
span:12,
|
labelWidth:"25%",
|
rules: [{
|
required: true,
|
validator:validatePass1,
|
trigger: 'change'
|
}]
|
},
|
{
|
label: '组合方法',
|
prop: 'combinationNames',
|
labelWidth: 91,
|
display:false,
|
|
},
|
{
|
//写两个组合方法是因为id和name不能同时绑定这个prop来渲染，一个表格做隐藏来数据操作（表单隐藏），另一个表格做显示只显示在页面（表单隐藏）。
|
label: '组合方法',
|
prop: 'combinationIds',
|
type: "checkbox",
|
span:12,
|
labelWidth:"22%",
|
id:5,
|
hide:true,
|
change:this.handleCheckboxChange,
|
rules: [{
|
required: true,
|
message: "请选择组合方法",
|
trigger: "blur"
|
}],
|
dicUrl: '/api/ubcs-system/combination/select',
|
dicMethod: 'get',
|
props: {
|
value: "ID",
|
label: "NAME",
|
},
|
},
|
{
|
label: '必填种类',
|
prop: 'requiredType',
|
type: 'select',
|
span:12,
|
labelWidth:"25%",
|
change:this.handleSelectChange,
|
rules: [{
|
required: true,
|
message: "请选择必填种类",
|
trigger: "blur"
|
}],
|
dicData:[{
|
label:'1种',
|
value:1,
|
disabled:false
|
},
|
{
|
label:'2种',
|
value:2,
|
disabled:false
|
},
|
{
|
label:'3种',
|
value:3,
|
disabled:false
|
},
|
{
|
label:'4种',
|
value:4,
|
disabled:false
|
}
|
]
|
|
},
|
{
|
label: '过期时间(天)',
|
prop:'expirationTime',
|
span:12,
|
labelWidth:"22%",
|
rules: [{
|
required: true,
|
validator:validatePass2,
|
trigger: 'blur'
|
}]
|
},
|
{
|
label: '提醒时间(天)',
|
prop:'reminderTime',
|
span:12,
|
labelWidth:"25%",
|
rules: [{
|
required: true,
|
validator:validatePass3,
|
trigger: 'blur'
|
}]
|
},
|
{
|
label: '锁定次数(次)',
|
prop:'lockingNum',
|
span:12,
|
labelWidth:"22%",
|
rules: [{
|
required: true,
|
validator:validatePass4,
|
trigger: 'blur'
|
}]
|
},
|
{
|
label: '锁定时间(分钟)',
|
prop:'lockingTime',
|
span:12,
|
labelWidth:"25%",
|
rules: [{
|
required: true,
|
validator:validatePass5,
|
trigger: 'blur'
|
}]
|
},
|
{
|
label: '描述',
|
prop:'desc',
|
type: 'textarea',
|
span:12,
|
labelWidth:"22%",
|
rows: 5,
|
},
|
{
|
label: '是否为默认策略',
|
prop: 'isDefault',
|
type: 'switch',
|
labelWidth: 132,
|
dicData:[{
|
label:'否',
|
value:0
|
},{
|
label:'是',
|
value:1
|
}]
|
}
|
],
|
},
|
//添加存放多选的变量,用于下拉菜单的禁用效果和必填种类是否大于组合方式然后提示用户重新选择
|
checkboxlength:"",
|
//这个是下拉菜单的数据变量
|
selectlength:"",
|
//这个是用于防止change时间冒泡,出现两次弹窗定义的变量
|
checkboxlist:"",
|
//用于首次点击编辑，判断组合方式是否小于必填种类的变量
|
checkboxNumber:"",
|
selectNumber:"",
|
//这个也是存放多选的变量,效果一样,只是用作在编辑模块
|
checkboxedit:"",
|
// 用于判断是否是编辑
|
editFlag:false
|
// 至于为什么没在用户选择必填种类大于组合方式的时候，给下拉菜单选中的数据清空了，这样比给予弹窗提醒更合理
|
// 原因是找了好久没找到avue框架这个选中的属性显示在页面怎么修改，直接修改下拉菜单数据的value没效果，找不到是什么控制这页面显示的选中数据
|
// 我尝试在dicdata外面定义value修改下拉菜单显示的默认值也不行，然后再尝试调用avue的close清除方法，但是也是只能实现在下拉菜单后面显示一个X号
|
// 当用户手动点击清除，才可以把数据清除，总而言之找了好久，没找到这个清除方法，avue的说明文档也没明确标明这个功能的内置操作方法
|
// 我想到的应该可以的方法是，舍弃option里面的组合方式，自己手动在页面添加插槽定义组合方式，至于是使用avue还是element-ui来写，还要看具体的步骤
|
// 因为一改动，我现在写的逻辑比如下拉菜单禁用和策略验证等等要重新梳理，我这边急着赶对象建模的进度，所以先用这种方式来处理，如果我回头有时间我再来继续改，就没有这条注释了。
|
}
|
|
},
|
created() {
|
this.onLoad()
|
combination().then(res=>{
|
console.log("111",res)
|
})
|
},
|
mount() {
|
},
|
methods:{
|
handleSelectChange(val){
|
this.selectlength=val
|
// if(val.value >= this.checkboxlength.value.length && this.checkboxlength.value.length > 0){
|
// console.log("大于")
|
// }
|
},
|
handleCheckboxChange(val){
|
const arr=this.option.column[5];
|
this.checkboxlength=val.value;
|
//添加的时候checkboxlength是一个数组，到了编辑他就是一个字符串，如果我我直接转换为数组，因为本来就是数组所以点击添加的时候会报错
|
//如果我变成字符串后再转数组,添加不会报错了,但是编辑的时候就又会报错了,本来就是字符串又走了一遍tostring
|
this.checkboxedit=this.checkboxlength.toString().split(",")
|
if(val.value != undefined && val.value != null){
|
if(this.checkboxlist == val.value){
|
// 判断相等则不操作，不等则重新执行。加这层判断是因为change事件触发两次，会出现两个消息提示框
|
// 定义checkboxlist变量,存储的改变的值,如果值改变和变量相等则不需要任何操作
|
}else {
|
this.checkboxlist=val.value
|
if( this.selectlength.value >= val.value.length && val.value.length > 0 ){
|
this.$message({
|
message: '必填种类不能大于组合方法，请重新选择！',
|
type: 'warning',
|
showClose: true,
|
});
|
}else if(this.selectlength.value >= this.checkboxedit.length && this.checkboxedit.length > 0 ){
|
this.$message({
|
message: '必填种类不能大于组合方法，请重新选择！',
|
type: 'warning',
|
showClose: true,
|
});
|
}
|
}
|
// if(this.checkboxeditlist == val.value){
|
// // tong
|
// }else {
|
// this.checkboxeditlist=val.value
|
// if(this.selectlength.value >= this.checkboxedit.length && this.checkboxedit.length > 0){
|
// this.$message({
|
// message: '必填种类不能大于组合方法，请重新选择！',
|
// type: 'warning',
|
// showClose: true,
|
// });
|
// }
|
// }
|
// if(this.selectlength.value >= this.checkboxedit.length && this.checkboxedit.length > 0){
|
// this.$message({
|
// message: '必填种类不能大于组合方法，请重新选择！',
|
// type: 'warning',
|
// showClose: true,
|
// });
|
// }
|
}
|
// 这里一直报length的错误
|
// arr.forEach((item,index)=>{
|
// console.log(item,index)
|
// if(val.value != undefined && val.value != null && val.value.length==0){
|
// item.disabled=false
|
// }
|
// if(val.value != undefined && val.value != null && val.value.length>=1){
|
//
|
// }
|
// })
|
// if(val.value != undefined && val.value != null && val.value.length >= 0){
|
// arr.dicData[val.value.length-1].disabled=true
|
// }
|
// }else if(val.value != undefined && val.value != null && val.value.length ==0){
|
// arr.dicData.disabled=false
|
// }
|
if(val.value != undefined && val.value != null && val.value.length == 1){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=true
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}else if(val.value != undefined && val.value != null && val.value.length ==2){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}else if(val.value != undefined && val.value != null && val.value.length ==3){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=false
|
arr.dicData[3].disabled=true
|
}else if(val.value != undefined && val.value != null && val.value.length==4){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=false
|
arr.dicData[3].disabled=false
|
}else if(val.value != undefined && val.value != null && val.value.length==0 ){
|
arr.dicData[0].disabled=true
|
arr.dicData[1].disabled=true
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}else if(this.checkboxNumber.length!=0){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=false
|
arr.dicData[3].disabled=false
|
}
|
if(this.editFlag == true){
|
if(this.checkboxedit.length == 1){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=true
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}else if(this.checkboxedit.length == 2){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}else if(this.checkboxedit.length ==3){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=false
|
arr.dicData[3].disabled=true
|
}else if(this.checkboxedit ==4){
|
arr.dicData[0].disabled=false
|
arr.dicData[1].disabled=false
|
arr.dicData[2].disabled=false
|
arr.dicData[3].disabled=false
|
}else if(this.checkboxedit.length ==0){
|
arr.dicData[0].disabled=true
|
arr.dicData[1].disabled=true
|
arr.dicData[2].disabled=true
|
arr.dicData[3].disabled=true
|
}
|
}
|
},
|
rowDel(row){
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
return getremove(row.id);
|
})
|
.then(() => {
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
this.onLoad();
|
}).catch(res=>{
|
console.log(res)
|
})
|
},
|
rowSave(row,done){
|
//将密码组合方式的数据转换为字符串
|
const spliceId= row.combinationIds.toString()
|
row.combinationIds=spliceId
|
getadd(row).then((res)=>{
|
// this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
done(row)
|
this.onLoad()
|
}).catch((res)=>{
|
this.$message.warning(res)
|
})
|
},
|
rowEdit(row){
|
console.log("打开编辑edit",row)
|
},
|
handleDel(row){
|
this.$refs.crud.rowDel(row,row.$index);
|
},
|
handleEdit(row){
|
this.$refs.crud.rowEdit(row,row.$index);
|
this.editFlag=true;
|
// const arr=this.option.column[5];
|
this.checkboxNumber=row.combinationIds.split(",")
|
this.selectNumber=row.requiredType
|
console.log(this.checkboxNumber, this.selectNumber)
|
// 打开编辑首先判断，组合方法是否小于必填种类，如果小于给予提醒修改
|
if(this.checkboxNumber.length<=this.selectNumber){
|
this.$message({
|
type:"warning",
|
message:"必填种类不能大于组合方法，请重新选择！"
|
})
|
}
|
},
|
rowUpdate(row,index,done){
|
getupdata(row).then(()=>{
|
this.onLoad()
|
this.$message({
|
type: "success",
|
message: "修改成功!"
|
});
|
done()
|
}).catch(res=>{
|
console.log(res)
|
})
|
},
|
onLoad(page, params = {}) {
|
// this.loading = true;
|
getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => {
|
// const data = res.data.data;
|
// this.page.total = data.total;
|
// this.data = data.records;
|
// this.loading = false;
|
// this.selectionClear();
|
console.log(res)
|
this.page.total=res.data.data.total
|
this.data=res.data.data.records
|
});
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
