|
|
@@ -0,0 +1,256 @@
|
|
|
+<template>
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <j-form-container :disabled="formDisabled">
|
|
|
+ <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="密码锁住的位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="weizhi">
|
|
|
+ <a-input v-model="model.weizhi" placeholder="请输入密码锁住的位置" :disabled="editdisabled" ></a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="yuanmima">
|
|
|
+ <a-input-password v-model="model.yuanmima" placeholder="请输入旧密码" />
|
|
|
+ <!-- <a-input v-model="model.mima" placeholder="请输入旧密码" type="password" show-password></a-input> -->
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mima">
|
|
|
+ <a-input-password v-model="model.mima" placeholder="请输入新密码" />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmPassword">
|
|
|
+ <a-input-password v-model="model.confirmPassword" placeholder="请输入确认密码" />
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <!-- <a-col :span="24">
|
|
|
+ <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
|
|
|
+ <a-input v-model="model.remark" placeholder="请输入备注" ></a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col> -->
|
|
|
+ </a-row>
|
|
|
+ </a-form-model>
|
|
|
+ </j-form-container>
|
|
|
+ </a-spin>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ import { httpAction, getAction } from '@/api/manage'
|
|
|
+ import { validateDuplicateValue } from '@/utils/util'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'ItdmMimaForm',
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ //表单禁用
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ required: false
|
|
|
+ },
|
|
|
+ //禁止编辑
|
|
|
+ editdisabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ required: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ const equalToPassword = (rule, value, callback) => {
|
|
|
+ if (this.model.mima !== value) {
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ model:{
|
|
|
+ id: undefined,
|
|
|
+ weizhi: undefined,
|
|
|
+ mima: undefined,
|
|
|
+ yuanmima: undefined,
|
|
|
+ confirmPassword:undefined
|
|
|
+ },
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ confirmLoading: false,
|
|
|
+ validatorRules: {
|
|
|
+ // weizhi: [
|
|
|
+ // { required: true, message: '请输入密码锁住的位置!'},
|
|
|
+ // ],
|
|
|
+ yuanmima: [
|
|
|
+ { required: true, message: "旧密码不能为空"}
|
|
|
+ ],
|
|
|
+ mima: [
|
|
|
+ { required: true, message: "新密码不能为空",},
|
|
|
+ // { pattern: /^.{6,16}$/, message: "请输入 8 到 16 位字符",},
|
|
|
+ { required: true, validator: this.checkPassword, trigger: "change" }
|
|
|
+ ],
|
|
|
+ confirmPassword: [
|
|
|
+ { required: true, message: "确认密码不能为空", trigger: "blur" },
|
|
|
+ { required: true, validator: equalToPassword, trigger: "blur" }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ add: "/itdmMima/itdmMima/add",
|
|
|
+ edit: "/itdmMima/itdmMima/edit",
|
|
|
+ queryById: "/itdmMima/itdmMima/queryById"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formDisabled(){
|
|
|
+ return this.disabled
|
|
|
+ // return this.editdisabled
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ //备份model原始值
|
|
|
+ this.modelDefault = JSON.parse(JSON.stringify(this.model));
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add () {
|
|
|
+ this.edit(this.modelDefault);
|
|
|
+ },
|
|
|
+ edit (record) {
|
|
|
+ var list = Object.assign({}, record);
|
|
|
+ console.log(list)
|
|
|
+ this.model.id = list.id
|
|
|
+ this.model.weizhi = list.weizhi
|
|
|
+ // this.model = Object.assign({}, record);
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ submitForm () {
|
|
|
+ const that = this;
|
|
|
+ // 触发表单验证
|
|
|
+ this.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ that.confirmLoading = true;
|
|
|
+ let httpurl = '';
|
|
|
+ let method = '';
|
|
|
+ if(!this.model.id){
|
|
|
+ httpurl+=this.url.add;
|
|
|
+ method = 'post';
|
|
|
+ }else{
|
|
|
+ httpurl+=this.url.edit;
|
|
|
+ method = 'put';
|
|
|
+ }
|
|
|
+ console.log(this.model)
|
|
|
+ httpAction(httpurl,this.model,method).then((res)=>{
|
|
|
+ if(res.success){
|
|
|
+ that.$message.success(res.message);
|
|
|
+ that.$emit('ok');
|
|
|
+ }else{
|
|
|
+ that.$message.warning(res.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ that.confirmLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 密码强度校验
|
|
|
+ checkPassword(rule, value, callback) {
|
|
|
+ this.level = []
|
|
|
+ if (!value) {
|
|
|
+ return callback('密码不能为空')
|
|
|
+ }
|
|
|
+ if (value.length < 6) {
|
|
|
+ return callback('密码不少于6位，且密码需同时包括数字、字母、符号')
|
|
|
+ }
|
|
|
+ if (value.length > 16) {
|
|
|
+ return callback('密码不大于16位，且密码需同时包括数字、字母、符号')
|
|
|
+ }
|
|
|
+ // 校验是数字
|
|
|
+ const regex1 = /^\d+$/
|
|
|
+ // 校验字母
|
|
|
+ const regex2 = /^[A-Za-z]+$/
|
|
|
+ // 校验符号
|
|
|
+ const regex3 =
|
|
|
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
|
|
|
+ if (regex1.test(value)) {
|
|
|
+ this.level.push('low')
|
|
|
+ } else if (regex2.test(value)) {
|
|
|
+ this.level.push('low')
|
|
|
+ } else if (regex3.test(value)) {
|
|
|
+ this.level.push('low')
|
|
|
+ } else if (/^[A-Za-z\d]+$/.test(value)) {
|
|
|
+ this.level.push('low')
|
|
|
+ this.level.push('middle')
|
|
|
+ } else if (
|
|
|
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
|
|
|
+ value
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.level.push('low')
|
|
|
+ this.level.push('middle')
|
|
|
+ } else if (
|
|
|
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
|
|
|
+ value
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.level.push('low')
|
|
|
+ this.level.push('middle')
|
|
|
+ } else if (
|
|
|
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
|
|
|
+ value
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ this.level.push('low')
|
|
|
+ this.level.push('middle')
|
|
|
+ this.level.push('high')
|
|
|
+ }
|
|
|
+ return callback()
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.show_pwd {
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ padding-right: 5px;
|
|
|
+}
|
|
|
+.intensity {
|
|
|
+ .psdText {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 48px;
|
|
|
+ height: 4px;
|
|
|
+ background: #d8d8d8;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-right: 8px;
|
|
|
+ &.low {
|
|
|
+ background: #f4664a;
|
|
|
+ }
|
|
|
+ &.middle {
|
|
|
+ background: #ffb700;
|
|
|
+ }
|
|
|
+ &.high {
|
|
|
+ background: #2cbb79;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .level {
|
|
|
+ margin: 0 16px 0 8px;
|
|
|
+ }
|
|
|
+ .warningtext {
|
|
|
+ color: #5a5a5a;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wyh