sl-sfy-safety/src/views/setting/system/EmailSetting.vue

<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
      <el-form
        label-position="top"
        :label-width="120"
        :model="formValue"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="发件人邮箱" prop="originator">
          <el-input v-model="formValue.originator" placeholder="请输入发件人邮箱" />
        </el-form-item>

        <el-form-item label="SMTP服务器地址">
          <el-input placeholder="请输入SMTP服务器地址" />
        </el-form-item>

        <el-form-item label="SMTP服务器端口">
          <el-input placeholder="请输入SMTP服务器端口" />
        </el-form-item>

        <el-form-item label="SMTP用户名">
          <el-input placeholder="请输入SMTP用户名" />
        </el-form-item>

        <el-form-item label="SMTP密码">
          <el-input type="password" placeholder="请输入SMTP密码" />
        </el-form-item>

        <el-form-item label="邮件测试">
          <el-button>邮件测试</el-button>
        </el-form-item>

        <div>
          <el-space>
            <el-button type="primary" @click="formSubmit(formRef)">更新邮件信息</el-button>
          </el-space>
        </div>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const rules = {
    originator: {
      required: true,
      message: '请输入发件人邮箱',
      trigger: 'blur',
    },
  };

  const formValue = reactive({
    originator: '',
  });

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证失败，请填写完整信息');
      }
    });
  }
</script>