1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <script lang="ts" setup>
| import { FormSchema, Form } from '@/components/Form'
| import { useForm } from '@/hooks/web/useForm'
| import { useValidator } from '@/hooks/web/useValidator'
| import { reactive, ref, watch } from 'vue'
| import { ElDivider, ElMessage, ElMessageBox } from 'element-plus'
|
| const props = defineProps({
| userInfo: {
| type: Object,
| default: () => ({})
| }
| })
|
| const { required, phone, maxlength, email } = useValidator()
|
| const formSchema = reactive<FormSchema[]>([
| {
| field: 'realName',
| label: '昵称',
| component: 'Input',
| colProps: {
| span: 24
| }
| },
| {
| field: 'phoneNumber',
| label: '手机号码',
| component: 'Input',
| colProps: {
| span: 24
| }
| },
| {
| field: 'email',
| label: '邮箱',
| component: 'Input',
| colProps: {
| span: 24
| }
| }
| ])
|
| const rules = reactive({
| realName: [required(), maxlength(50)],
| phoneNumber: [phone()],
| email: [email()]
| })
|
| const { formRegister, formMethods } = useForm()
| const { setValues, getElFormExpose } = formMethods
|
| watch(
| () => props.userInfo,
| (value) => {
| setValues(value)
| },
| {
| immediate: true,
| deep: true
| }
| )
|
| const saveLoading = ref(false)
| const save = async () => {
| const elForm = await getElFormExpose()
| const valid = await elForm?.validate().catch((err) => {
| console.log(err)
| })
| if (valid) {
| ElMessageBox.confirm('是否确认修改?', '提示', {
| confirmButtonText: '确认',
| cancelButtonText: '取消',
| type: 'warning'
| })
| .then(async () => {
| try {
| saveLoading.value = true
| // 这里可以调用修改用户信息接口
| ElMessage.success('修改成功')
| } catch (error) {
| console.log(error)
| } finally {
| saveLoading.value = false
| }
| })
| .catch(() => {})
| }
| }
| </script>
|
| <template>
| <Form :rules="rules" @register="formRegister" :schema="formSchema" />
| <ElDivider />
| <BaseButton type="primary" @click="save">保存</BaseButton>
| </template>
|
|
