wangxiang
3 years ago
8 changed files with 155 additions and 130 deletions
@ -1,63 +0,0 @@
@@ -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 @@
@@ -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