exhibition_service_admin/src/views/setting/systemSetting.vue

<script>
import Vue from 'vue'
import { getMailSettings, saveMailSetting } from '@/api/system'
export default Vue.extend({
  name: 'SystemSetting',
  data() {
    return {
      mailSetting: {
        from_name: 'admin',
        from_email: '',
        auth_code: '',
        smtp_server: '',
        smtp_port: '',
        is_ssl: 0
      },
      loading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      getMailSettings().then(res => {
        this.loading = false
        if (res.data) {
          this.mailSetting = res.data
        }
      })
    },
    save() {
      if (this.loading) {
        return
      }
      this.loading = true
      saveMailSetting(this.mailSetting.id,this.mailSetting.from_name,this.mailSetting.from_email,this.mailSetting.auth_code,this.mailSetting.smtp_server,this.mailSetting.smtp_port,this.mailSetting.is_ssl).then(res => {
        this.loading = false
        this.init()
      })
    }
  }
})
</script>

<template>
  <div v-loading="loading" class="main-box">
    <div class="save">
      <el-button @click="save" type="primary">保存</el-button>
    </div>
    <div class="scroll">
      <div class="setting-box">
        <div class="title">发信服务器设置</div>
        <div class="setting-list">
          <div class="setting-item">
            <div class="label">
              发件邮箱地址
            </div>
            <el-input v-model="mailSetting.from_email" placeholder="请输入发件邮箱地址" />
          </div>
          <div class="setting-item">
            <div class="label">
              发件邮箱密码/授权码
            </div>
            <el-input v-model="mailSetting.auth_code" placeholder="请输入发件邮箱密码/授权码" />
          </div>
          <div class="setting-item">
            <div class="label">
              SMTP服务器地址
            </div>
            <el-input v-model="mailSetting.smtp_server" placeholder="请输入SMTP服务器地址" />
          </div>
          <div class="setting-item">
            <div class="label">
              SMTP端口
            </div>
            <el-input v-model="mailSetting.smtp_port" placeholder="请输入SMTP端口" />
          </div>
          <div class="setting-item">
            <div class="label">
              启用SSL
            </div>
            <el-switch v-model="mailSetting.is_ssl" />
          </div>
        </div>
      </div>
      <div class="setting-box">
        <div class="title">
          邮件设置
        </div>
        <div class="setting-list">
          <div class="setting-item">
            <div class="label">
              接收通知邮箱
            </div>
            <el-input placeholder="请输入通知邮箱" />
          </div>
          <div class="setting-item" />
          <div class="setting-item">
            <el-button type="primary">发送测试邮件</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .main-box{
    position: relative;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    .save{
      display: flex;
      justify-content: flex-end;
    }
    .scroll{
      padding: 16px;
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
      .setting-box{
        &:not(:first-child){
          margin-top: 32px;
        }
        .title{
          margin-bottom: 16px;
          font-size: 24px;
          font-weight: bold;
        }
        .setting-list{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 16px;
          .setting-item{
            .label{
              font-size: 16px;
              color: gray;
              margin-bottom: 8px;
            }
          }
        }
      }
    }
  }
</style>