<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { formValidate } from '@jnpf/utils';
|
|
import { updateUserInfo } from '#/api/permission/userSetting';
|
|
interface State {
|
type: string;
|
schemas: any[];
|
title: string;
|
}
|
|
const props = defineProps({
|
user: { type: Object, default: () => ({}) },
|
});
|
|
defineEmits(['register']);
|
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
labelWidth: 80,
|
});
|
const [registerModal, { closeModal, changeOkLoading }] = useModalInner(init);
|
const state = reactive<State>({
|
type: '',
|
schemas: [],
|
title: '',
|
});
|
const { title, schemas } = toRefs(state);
|
const { createMessage } = useMessage();
|
|
function init(data) {
|
state.type = data.type;
|
const dataForm = { [data.type]: props.user[data.type] || '' };
|
if (data.type === 'mobilePhone') {
|
state.title = '修改手机';
|
state.schemas = [
|
{
|
field: 'mobilePhone',
|
label: `手机号码`,
|
component: 'Input',
|
componentProps: { maxLength: 11 },
|
rules: [{ validator: formValidate('iphone'), trigger: 'blur' }],
|
},
|
];
|
}
|
if (data.type === 'email') {
|
state.title = '修改邮箱';
|
state.schemas = [{ field: 'email', label: `电子邮箱`, component: 'Input', rules: [{ validator: formValidate('email'), trigger: 'blur' }] }];
|
}
|
resetFields();
|
setFieldsValue(dataForm);
|
}
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
changeOkLoading(true);
|
updateUserInfo(values)
|
.then((res) => {
|
props.user[state.type] = values[state.type];
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closeModal();
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" @ok="handleSubmit">
|
<BasicForm @register="registerForm" :schemas="schemas" />
|
</BasicModal>
|
</template>
|
