GCLS_Page_BMS/src/views/settings/configure/MailboxConfig.vue

<template>
  <!-- 邮箱配置 -->
  <div class="mailbox-config">
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item label="邮箱地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="SMTP 服务器">
        <el-input v-model="form.smtp" />
      </el-form-item>
      <el-form-item label="邮箱登录用户名">
        <el-input v-model="form.user_name" />
      </el-form-item>
      <el-form-item label="邮箱登录密码">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setMailboxConfig">应用</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'MaiboxConfig'
};
</script>

<script setup>
import { ref } from 'vue';
import { SetMailboxConfig, GetMailboxConfig } from '@/api/settings';
import { Message } from 'element-ui';

let form = ref({
  address: '',
  smtp: '',
  user_name: '',
  password: ''
});
GetMailboxConfig().then(({ address, smtp, user_name, password }) => {
  form.value = {
    address,
    smtp,
    user_name,
    password
  };
});

function setMailboxConfig() {
  SetMailboxConfig(form.value).then(() => {
    Message.success('设置邮箱配置成功');
  });
}
</script>

<style lang="scss" scoped>
.mailbox-config {
  .el-input {
    width: 80%;
  }
}
</style>