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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
| <script lang="ts" setup>
| import type { FormSchema } from '@jnpf/ui/form';
|
| import { reactive } from 'vue';
|
| import { useMessage } from '@jnpf/hooks';
| import { BasicForm, useForm } from '@jnpf/ui/form';
| import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
| import { LoadingOutlined } from '@ant-design/icons-vue';
|
| import { checkMail, getConfigInfo, saveConfig } from '#/api/extend/email';
|
| interface State {
| testLoading: boolean;
| }
|
| defineEmits(['register']);
| const state = reactive<State>({
| testLoading: false,
| });
| const schemas: FormSchema[] = [
| {
| field: 'pop3Host',
| label: 'POP3服务',
| component: 'Input',
| componentProps: { placeholder: '请输入' },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'pop3Port',
| label: 'POP3端口',
| component: 'InputNumber',
| componentProps: { min: 0, max: 999999 },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'smtpHost',
| label: 'SMTP服务',
| component: 'Input',
| componentProps: { placeholder: '请输入' },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'smtpPort',
| label: 'SMTP端口',
| component: 'InputNumber',
| componentProps: { min: 0, max: 999999 },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'senderName',
| label: '显示名称',
| component: 'Input',
| componentProps: { placeholder: '请输入' },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'account',
| label: '邮箱地址',
| component: 'Input',
| componentProps: { placeholder: '请输入' },
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'password',
| label: '邮箱密码',
| component: 'InputSearch',
| slot: 'password',
| rules: [{ required: true, trigger: 'blur', message: '必填' }],
| },
| {
| field: 'emailSsl',
| label: 'SSL登录',
| component: 'Switch',
| defaultValue: 0,
| },
| ];
| const { createMessage } = useMessage();
| const [registerForm, { setFieldsValue, validate, resetFields, clearValidate }] = useForm({ labelWidth: 80, schemas });
| const [registerModal, { closeModal, changeLoading, changeOkLoading }] = useModalInner(init);
|
| function init() {
| state.testLoading = false;
| resetFields();
| changeLoading(true);
| getConfigInfo().then((res) => {
| setFieldsValue(res.data);
| clearValidate();
| changeLoading(false);
| });
| }
| async function test() {
| const values = await validate();
| if (!values) return;
| state.testLoading = true;
| checkMail(values)
| .then((res) => {
| createMessage.success(res.msg);
| state.testLoading = false;
| })
| .catch(() => {
| state.testLoading = false;
| });
| }
| async function handleSubmit() {
| const values = await validate();
| if (!values) return;
| changeOkLoading(true);
| saveConfig(values)
| .then((res) => {
| createMessage.success(res.msg);
| changeOkLoading(false);
| closeModal();
| })
| .catch(() => {
| changeOkLoading(false);
| });
| }
| </script>
| <template>
| <BasicModal v-bind="$attrs" @register="registerModal" title="邮箱配置" show-ok-btn @ok="handleSubmit" destroy-on-close>
| <BasicForm @register="registerForm">
| <template #password="{ model, field }">
| <a-input v-model:value="model[field]" allow-clear placeholder="邮箱密码">
| <template #addonAfter>
| <LoadingOutlined class="mr-[5px]" v-if="state.testLoading" />
| <span class="cursor-pointer" disabled @click="test()">连接测试</span>
| </template>
| </a-input>
| </template>
| </BasicForm>
| </BasicModal>
| </template>
|
|
