<template> <div> <el-form v-loading='loading' :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" style="width: 100%; margin-left: 60px" > <div style="margin: 20px -20px">登录配置</div> <el-form-item label="最大登录失败次数:" prop="failuresNum"> <el-input placeholder="次数需为0-50之间的数字" v-model.number="ruleForm.failuresNum" style="width: 300px" ></el-input> </el-form-item> <el-form-item label="失败锁定时长:" prop="failuresTime"> <el-input style="width: 300px" placeholder="锁定时长需为0-60之间的数字" v-model.number="ruleForm.failuresTime" ></el-input> </el-form-item> <el-form-item label="超时退出时长:" prop="logoutTime"> <el-input style="width: 300px" placeholder="超时退出时长时长需为5-300之间的数字" v-model.number="ruleForm.logoutTime" ></el-input> </el-form-item> <el-divider style="width: 90%"></el-divider> <div style="margin: 20px -20px">密码配置</div> <el-form-item label="密码总长度要求:" prop="passwordLength"> <el-input v-model="ruleForm.passwordLength" style="width: 200px" placeholder="密码长度5-20位" v-model.number="ruleForm.passwordLength" ></el-input > 位 </el-form-item> <el-form-item label="密码复杂度要求(密码中需包含):" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="小写英文字母" name="type"></el-checkbox> <el-checkbox label="大写英文字母" name="type"></el-checkbox> <el-checkbox label="数字" name="type"></el-checkbox> <el-checkbox label="特殊字符" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="密码定期更换时间:" prop="passwordDate"> <el-input style="width: 200px" placeholder="请输入密码更换天数" v-model.number="ruleForm.passwordDate" ></el-input > 天 </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >确定</el-button > </el-form-item> </el-form> </div> </template> <script> import { checkFailuresNum, checkFailuresTime, checkLogoutTime, checkPasswordLength, checkPasswordDay, } from "./data.js"; import { getSecurityConfig, setSecurityConfig, } from "@/api/authority/securityconfig"; export default { data() { return { loading:false, ruleForm: { failuresNum: "", failuresTime: "", logoutTime: "", passwordLength: "", passwordDate: "", type: [], }, rules: { failuresNum: [{ validator: checkFailuresNum, trigger: "blur" }], failuresTime: [{ validator: checkFailuresTime, trigger: "blur" }], logoutTime: [{ validator: checkLogoutTime, trigger: "blur" }], passwordLength: [{ validator: checkPasswordLength, trigger: "blur" }], passwordDate: [{ validator: checkPasswordDay, trigger: "blur" }], type: [ { type: "array", required: true, message: "请至少选择一个选项", trigger: "change", }, ], }, }; }, mounted() { this.getSconfig(); }, methods: { getSconfig() { this.loading = true this.ruleForm.type = []; getSecurityConfig().then(res => { this.ruleForm.failuresTime = res.data.loginFailLockTime; this.ruleForm.failuresNum = res.data.maxLoginFailNum; this.ruleForm.logoutTime = res.data.sessionTimeout; this.ruleForm.passwordLength = res.data.passwordMinLength; this.ruleForm.passwordDate = res.data.passwordEffectiveDay; const list = [ { name: "小写英文字母", value: res.data.passwordLowerLetter }, { name: "大写英文字母", value: res.data.passwordUpperLetter }, { name: "特殊字符", value: res.data.passwordSymbol }, { name: "数字", value: res.data.passwordDigital }, ]; for (let i of list) { if (Number(i.value)) { this.ruleForm.type.push(i.name); } } this.loading = false }) .catch(err=>{ this.loading = false this.$message.error('数据获取失败') }) }, setSconfig() { const params = new URLSearchParams(); params.loginFailLockTime = this.ruleForm.failuresTime; params.maxLoginFailNum = this.ruleForm.failuresNum; params.sessionTimeout = this.ruleForm.logoutTime; params.passwordMinLength = this.ruleForm.passwordLength; params.passwordEffectiveDay = this.ruleForm.passwordDate; params.passwordDigital = Number(this.ruleForm.type.includes("数字")); params.passwordSymbol = Number(this.ruleForm.type.includes("特殊字符")); params.passwordUpperLetter = Number( this.ruleForm.type.includes("大写英文字母") ); params.passwordLowerLetter = Number( this.ruleForm.type.includes("小写英文字母") ); setSecurityConfig(JSON.stringify(params)).then((res) => { this.$message.success("操作成功!"); this.loading = false this.getSconfig(); }) .catch(err=>{ this.loading = false }) }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.loading = true this.setSconfig(); } else { return false; } }); }, }, }; </script> <style lang="scss" scoped> /deep/ input::-webkit-outer-spin-button, /deep/ input::-webkit-inner-spin-button { -webkit-appearance: none !important; } /deep/ input[type="number"] { -moz-appearance: textfield !important; } </style>