131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<template>
|
|
<div class="p-4 bg-white h-full">
|
|
<div class="pb-4 text-xl">{{ t('邮件发送') }}</div>
|
|
<div class="step1-form">
|
|
<a-form
|
|
:key="formKey"
|
|
:model="formState"
|
|
name="basic"
|
|
:label-col="{ span: 4 }"
|
|
:wrapper-col="{ span: 20 }"
|
|
autocomplete="off"
|
|
@finish="onFinish"
|
|
@finish-failed="onFinishFailed"
|
|
>
|
|
<div class="flex items-center header-title">
|
|
<div class="node-icon"></div>
|
|
<div class="text-base">{{ t('基本信息') }}</div>
|
|
</div>
|
|
<a-form-item
|
|
:label="t('邮件标题')"
|
|
name="title"
|
|
|
|
>
|
|
<a-input v-model:value="formState.title" :placeholder="t('请输入邮件标题')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('邮件内容')"
|
|
name="plain"
|
|
|
|
>
|
|
<a-input v-model:value="formState.plain" :placeholder="t('请输入邮件内容')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('接收人姓名')"
|
|
name="name"
|
|
|
|
>
|
|
<a-input v-model:value="formState.name" :placeholder="t('请输入接收人姓名')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:label="t('接收人邮件')"
|
|
name="mail"
|
|
|
|
>
|
|
<a-input v-model:value="formState.mail" :placeholder="t('请输入接收人邮件')" />
|
|
</a-form-item>
|
|
<a-form-item :wrapper-col="{ offset: 10, span: 24 }">
|
|
<!-- <a-button type="default" html-type="reset">{{ t('重置') }}</a-button> -->
|
|
<a-button type="primary" html-type="submit" class="ml-4">{{ t('提交') }}</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
// import { getLogoInfoToken, setLogoConfig } from '/@/api/system/login';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
import { sendmail } from '/@/api/sendmail';
|
|
|
|
const { t } = useI18n();
|
|
const { notification } = useMessage();
|
|
|
|
interface FormState {
|
|
title?: string;
|
|
plain?: string;
|
|
mail?: string;
|
|
name?: string
|
|
}
|
|
|
|
let formState = reactive<FormState>({});
|
|
const formKey = ref(0);
|
|
const id = ref();
|
|
onMounted(() => {
|
|
formState = {}
|
|
});
|
|
const onFinish = (values: any) => {
|
|
// console.log('------>', values)
|
|
// console.log('------>', formState)
|
|
//let params = values;
|
|
//params.id = id.value;
|
|
let params = {
|
|
title: formState.title,
|
|
plain: formState.plain,
|
|
to: [{
|
|
name: formState.name,
|
|
mail: formState.mail
|
|
}]
|
|
}
|
|
sendmail(params).then((res) => {
|
|
if (res) {
|
|
notification.success({
|
|
message: t('提示'),
|
|
description: t('修改成功'),
|
|
});
|
|
} else {
|
|
notification.success({
|
|
message: t('提示'),
|
|
description: t('修改失败'),
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const onFinishFailed = (errorInfo: any) => {
|
|
console.log('Failed:', errorInfo);
|
|
};
|
|
</script>
|
|
<style>
|
|
.header-title {
|
|
height: 40px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.node-icon {
|
|
width: 6px;
|
|
height: 18px;
|
|
background-color: #5e95ff;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|