wangxiang
3 years ago
8 changed files with 155 additions and 130 deletions
@ -1,63 +0,0 @@ |
|||||||
<template> |
|
||||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"> |
|
||||||
<BasicForm @register="registerForm" /> |
|
||||||
</BasicModal> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script lang="ts"> |
|
||||||
import { defineComponent, ref, computed, unref } from 'vue'; |
|
||||||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|
||||||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|
||||||
import { passwordFormSchema } from './user.data'; |
|
||||||
//import { userSetPassword } from '/@/api/system/user'; |
|
||||||
|
|
||||||
export default defineComponent({ |
|
||||||
name: 'AccountModal', |
|
||||||
components: { BasicModal, BasicForm }, |
|
||||||
emits: ['success', 'register'], |
|
||||||
setup(_, { emit }) { |
|
||||||
const isUpdate = ref(true); |
|
||||||
|
|
||||||
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({ |
|
||||||
labelWidth: 100, |
|
||||||
schemas: passwordFormSchema, |
|
||||||
showActionButtonGroup: false, |
|
||||||
actionColOptions: { |
|
||||||
span: 23, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|
||||||
resetFields(); |
|
||||||
setModalProps({ |
|
||||||
confirmLoading: false, |
|
||||||
title: `给账号【${data.record.name}(${data.record.account})】设置密码`, |
|
||||||
}); |
|
||||||
isUpdate.value = !!data?.isUpdate; |
|
||||||
|
|
||||||
if (unref(isUpdate)) { |
|
||||||
setFieldsValue({ |
|
||||||
...data.record, |
|
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '设置密码')); |
|
||||||
|
|
||||||
async function handleSubmit() { |
|
||||||
try { |
|
||||||
setModalProps({ confirmLoading: true }); |
|
||||||
const values = await validate(); |
|
||||||
values.password = values.passwordNew; |
|
||||||
delete values.passwordNew; |
|
||||||
delete values.confirmPassword; |
|
||||||
userSetPassword(values); |
|
||||||
closeModal(); |
|
||||||
} finally { |
|
||||||
setModalProps({ confirmLoading: false }); |
|
||||||
} |
|
||||||
} |
|
||||||
return { registerModal, registerForm, getTitle, handleSubmit }; |
|
||||||
}, |
|
||||||
}); |
|
||||||
</script> |
|
||||||
@ -0,0 +1,89 @@ |
|||||||
|
<template> |
||||||
|
<BasicModal v-bind="$attrs" |
||||||
|
title="重置密码" |
||||||
|
minHeight="100px" |
||||||
|
@ok="handleSubmit" |
||||||
|
@register="registerModal" |
||||||
|
> |
||||||
|
<Form :model="modelRef" :rules="rulesRef"> |
||||||
|
<FormItem name="newPassword" v-bind="validateInfos.newPassword"> |
||||||
|
<StrengthMeter v-model:value="modelRef.newPassword" placeholder="密码"/> |
||||||
|
</FormItem> |
||||||
|
</Form> |
||||||
|
</BasicModal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
/** |
||||||
|
* 采用ant-design-vue原生组件编写form |
||||||
|
* Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved. |
||||||
|
* author entfrm开发团队-王翔 |
||||||
|
*/ |
||||||
|
import { reactive } from 'vue'; |
||||||
|
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'; |
||||||
|
import { StrengthMeter } from '/@/components/StrengthMeter'; |
||||||
|
import { Form } from 'ant-design-vue'; |
||||||
|
import { resetPwd } from '/@/api/system/user'; |
||||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||||
|
|
||||||
|
/** 表单信息类型规范 */ |
||||||
|
interface FormState { |
||||||
|
id: string; |
||||||
|
newPassword: string; |
||||||
|
} |
||||||
|
|
||||||
|
const { createMessage } = useMessage(); |
||||||
|
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ |
||||||
|
const emit = defineEmits(['success', 'register']); |
||||||
|
|
||||||
|
const FormItem = Form.Item; |
||||||
|
const useForm = Form.useForm; |
||||||
|
const modelRef = reactive<FormState>({ |
||||||
|
id: '', |
||||||
|
newPassword: '' |
||||||
|
}); |
||||||
|
const rulesRef = reactive({ |
||||||
|
newPassword: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
whitespace: true, |
||||||
|
message: '请输入密码！', |
||||||
|
}, |
||||||
|
{ |
||||||
|
pattern: new RegExp('[^\\u4e00-\\u9fa5]+'), |
||||||
|
type: 'string', |
||||||
|
message: '密码不能输入汉字！', |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 6, |
||||||
|
max: 32, |
||||||
|
message: '长度必需在6-32之间！', |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
const { resetFields, clearValidate, validate, validateInfos } = useForm(modelRef, rulesRef); |
||||||
|
|
||||||
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData) => { |
||||||
|
await resetFields(); |
||||||
|
await clearValidate(); |
||||||
|
modelRef.id = data.record?.id; |
||||||
|
const props: Partial<ModalProps> = { confirmLoading: false }; |
||||||
|
setModalProps(props); |
||||||
|
}); |
||||||
|
|
||||||
|
async function handleSubmit() { |
||||||
|
try { |
||||||
|
setModalProps({ confirmLoading: true }); |
||||||
|
if (!modelRef.id) return createMessage.error('用户编号ID不存在,请检查!'); |
||||||
|
// 重置用户密码信息 |
||||||
|
const formData = await validate(); |
||||||
|
await resetPwd(formData); |
||||||
|
closeModal(); |
||||||
|
emit('success'); |
||||||
|
} finally { |
||||||
|
setModalProps({ confirmLoading: false }); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
Loading…
Reference in new issue