Skip to content

Commit 0abaa6c

Browse files
oliver225oliver225
committed
新增阿里云短信
1 parent b854e20 commit 0abaa6c

File tree

1 file changed

+182
-65
lines changed

1 file changed

+182
-65
lines changed

‎src/views/tb/setting/smsSetting.vue

Lines changed: 182 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,216 @@
22
<Spin :spinning="dataLoading">
33
<div class="sms-setting">
44
<div class="text-lg font-bold my-4">短信服务商配置</div>
5-
<BasicForm @register="registerForm">
6-
7-
</BasicForm>
5+
<Form ref="formRef" :model="formState" layout="vertical">
6+
<Form.Item label="短信服务商" :name="['jsonValue', 'type']" :rules="[{ required: true }]">
7+
<Select v-model:value="formState.jsonValue.type" :disabled="true">
8+
<Select.Option value="ALI_SMS">阿里云短信</Select.Option>
9+
<Select.Option value="AWS_SNS">亚马逊短信</Select.Option>
10+
<Select.Option value="TWILIO">Twilio</Select.Option>
11+
<Select.Option value="SMPP">SMPP</Select.Option>
12+
</Select>
13+
</Form.Item>
14+
<Form.Item
15+
label="阿里云访问秘钥ID"
16+
:name="['jsonValue', 'accessKeyId']"
17+
:rules="[{ required: true }]"
18+
>
19+
<Input v-model:value="formState.jsonValue.accessKeyId" />
20+
</Form.Item>
21+
<Form.Item
22+
label="阿里云访问秘钥"
23+
:name="['jsonValue', 'accessKeySecret']"
24+
:rules="[{ required: true }]"
25+
>
26+
<InputPassword v-model:value="formState.jsonValue.accessKeySecret" />
27+
</Form.Item>
28+
<Form.Item label="短信签名" :name="['jsonValue', 'signName']" :rules="[{ required: true }]">
29+
<Input v-model:value="formState.jsonValue.signName" />
30+
</Form.Item>
31+
<Form.Item
32+
label="短信模板 Code"
33+
:name="['jsonValue', 'templateCode']"
34+
:rules="[{ required: true }]"
35+
>
36+
<Input v-model:value="formState.jsonValue.templateCode" />
37+
</Form.Item>
38+
</Form>
839
<div class="footer">
940
<Space>
1041
<a-button @click="fetchData">
1142
<Icon :icon="'ant-design:reload-outlined'" />
1243
重置
1344
</a-button>
45+
<a-button :loading="dataLoading" @click="handleOpenTestSmsModal">
46+
<Icon :icon="'ant-design:send-outlined'" />
47+
发送测试短信
48+
</a-button>
1449
<a-button :loading="dataLoading" type="primary" @click="handleSubmit">
1550
<Icon :icon="'ant-design:check-outlined'" />
1651
保存
1752
</a-button>
1853
</Space>
1954
</div>
55+
<Modal
56+
v-model:open="showSmsTestModal"
57+
:centered="true"
58+
title="发送测试短信"
59+
okText="发送测试短信"
60+
@ok="handleSendTestSms"
61+
>
62+
<Form ref="testFromRef" :model="testSms" layout="vertical">
63+
<Form.Item
64+
label="手机号码"
65+
name="numberTo"
66+
:rules="[
67+
{ required: true },
68+
{ pattern: /^1[3-9]\d{9}$/, message: t('请填写正确的手机号码') },
69+
]"
70+
>
71+
<Input v-model:value="testSms.numberTo" />
72+
</Form.Item>
73+
<Form.Item label="短信内容" name="message" :rules="[{ required: true }]">
74+
<Input.TextArea v-model:value="testSms.message" :rows="4" />
75+
</Form.Item>
76+
</Form>
77+
</Modal>
2078
</div>
2179
</Spin>
2280
</template>
2381
<script lang="ts" setup name="ViewsTbSettingSmsSetting">
24-
import { ref, unref, onMounted } from 'vue';
25-
import { Icon } from '/@/components/Icon';
26-
import { useI18n } from '/@/hooks/web/useI18n';
27-
import { useMessage } from '/@/hooks/web/useMessage';
28-
import { router } from '/@/router';
29-
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
30-
import { getAdminSetting, saveAdminSetting, AdminSetting } from '/@/api/tb/adminSetting';
31-
import { Space, Spin } from 'ant-design-vue';
82+
import { ref, onMounted, reactive } from 'vue';
83+
import { Icon } from '/@/components/Icon';
84+
import { useUserStore } from '/@/store/modules/user';
85+
import { FormInstance } from 'ant-design-vue/lib/form';
86+
import { useI18n } from '/@/hooks/web/useI18n';
87+
import { useMessage } from '/@/hooks/web/useMessage';
88+
import { getAdminSetting, saveAdminSetting, AdminSetting } from '/@/api/tb/adminSetting';
89+
import { sendTestSms } from '/@/api/tb/adminSetting';
90+
import { Space, Select, Spin, Form, Input, InputPassword, Modal } from 'ant-design-vue';
3291
33-
const { t } = useI18n('tb');
34-
const { showMessage } = useMessage();
35-
const { meta } = unref(router.currentRoute);
36-
const record = ref<AdminSetting>({} as AdminSetting);
37-
const dataLoading = ref(false);
92+
const { t } = useI18n('tb');
93+
const userStore = useUserStore();
94+
const { showMessage } = useMessage();
95+
const formRef = ref<FormInstance>();
96+
const testFromRef = ref<FormInstance>();
97+
const record = ref<AdminSetting>({} as AdminSetting);
98+
const dataLoading = ref(false);
99+
const showSmsTestModal = ref(false);
38100
39-
const inputFormSchemas: FormSchema[] = [
40-
];
101+
const formState = reactive<AdminSetting>({
102+
tenantId: userStore.getUserInfo.tenantId,
103+
key: 'sms',
104+
jsonValue: {
105+
accessKeyId: '',
106+
accessKeySecret: '',
107+
signName: '',
108+
templateCode: '',
109+
type: 'ALI_SMS',
110+
},
111+
} as AdminSetting);
41112
42-
const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
43-
labelAlign: 'left',
44-
labelWidth: 120,
45-
schemas: inputFormSchemas,
46-
baseColProps: { lg: 12, md: 24 },
113+
const testSms = reactive<any>({
114+
message: '',
115+
numberTo: '',
116+
});
47117
48-
});
49-
50-
onMounted(() => {
51-
fetchData();
52-
})
118+
onMounted(() => {
119+
fetchData();
120+
});
53121
54-
async function fetchData() {
55-
try {
56-
dataLoading.value = true;
57-
const result = await getAdminSetting('sms');
58-
record.value = result
59-
await setFieldsValue(record.value);
60-
} catch (error: any) {
61-
if (error && error.errorFields) {
62-
showMessage(t('common.validateError'));
122+
async function fetchData() {
123+
try {
124+
dataLoading.value = true;
125+
clear();
126+
const result = await getAdminSetting('sms');
127+
record.value = result;
128+
Object.keys(record.value).forEach((key) => {
129+
formState[key] = record.value[key];
130+
});
131+
formState.jsonValue.type = 'ALI_SMS';
132+
} catch (error: any) {
133+
if (error && error.errorFields) {
134+
showMessage(t('common.validateError'));
135+
}
136+
console.log('error', error);
137+
} finally {
138+
dataLoading.value = false;
63139
}
64-
console.log('error', error);
65-
} finally {
66-
dataLoading.value = false;
67140
}
68-
};
69141
70-
async function handleSubmit() {
71-
try {
72-
const data = await validate();
73-
dataLoading.value = true;
74-
// console.log('submit', params, data, record);
75-
const res = await saveAdminSetting({ ...record.value, ...data });
76-
fetchData();
77-
showMessage('保存通用配置成功！');
78-
} catch (error: any) {
79-
if (error && error.errorFields) {
80-
showMessage(t('common.validateError'));
81-
}
82-
console.log('error', error);
83-
} finally {
84-
dataLoading.value = false;
142+
function clear() {
143+
formState.tenantId = userStore.getUserInfo.tenantId;
144+
formState.key = 'sms';
145+
formState.jsonValue = {
146+
accessKeyId: '',
147+
accessKeySecret: '',
148+
signName: '',
149+
templateCode: '',
150+
type: 'ALI_SMS',
151+
};
152+
testSms.message = '';
153+
testSms.numberTo = '';
85154
}
86-
}
87-
88155
156+
async function handleSubmit() {
157+
try {
158+
const data = await formRef.value?.validate();
159+
dataLoading.value = true;
160+
// console.log('submit', params, data, record);
161+
const res = await saveAdminSetting({ ...record.value, ...data });
162+
fetchData();
163+
showMessage('保存短信配置配置成功！');
164+
} catch (error: any) {
165+
if (error && error.errorFields) {
166+
showMessage(t('common.validateError'));
167+
}
168+
console.log('error', error);
169+
} finally {
170+
dataLoading.value = false;
171+
}
172+
}
89173
174+
async function handleOpenTestSmsModal() {
175+
try {
176+
await formRef.value?.validate();
177+
showSmsTestModal.value = true;
178+
} catch (error: any) {
179+
if (error && error.errorFields) {
180+
showMessage(t('common.validateError'), 'error');
181+
}
182+
console.log('error', error);
183+
}
184+
}
185+
async function handleSendTestSms() {
186+
try {
187+
const provider = await formRef.value?.validate();
188+
const data = await testFromRef.value?.validate();
189+
dataLoading.value = true;
190+
if (provider && data) {
191+
const result = await sendTestSms({
192+
numberTo: '+86' + data.numberTo,
193+
message: data.message,
194+
providerConfiguration: provider.jsonValue,
195+
});
196+
showMessage('发送测试短信成功！');
197+
}
198+
} catch (error: any) {
199+
if (error && error.errorFields) {
200+
showMessage(t('common.validateError'), 'error');
201+
}
202+
console.log('error', error);
203+
} finally {
204+
dataLoading.value = false;
205+
showSmsTestModal.value = false;
206+
}
207+
}
90208
</script>
91209
<style lang="less">
92-
.sms-setting {
93-
padding: 6px 46px 24px 24px;
210+
.sms-setting {
211+
padding: 6px 46px 24px 24px;
94212
95-
.footer {
96-
margin-top: 42px;
213+
.footer {
214+
margin-top: 42px;
215+
}
97216
}
98-
99-
}
100-
</style>
217+
</style>

0 commit comments

Comments
 (0)