dy-admin-manager/src/views/mailInfoManager/index.vue

 <template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      邮件服务配置
    </h2>
    <!-- <h3 class="infoTitle">优惠券信息</h3>
    <el-divider></el-divider> -->
    <div class="m-core">
      <el-form :model="form" ref="form" class="form">
        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="服务器主机名"
              prop="hostName"
              :rules="[{ required: true, message: '请输入服务器主机名' }]"
            >
              <el-input
                style="width: 355px !important"
                v-model="form.hostName"
                placeholder="请输服务器主机名"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 395px">
            <el-form-item
              label="服务器端口号"
              prop="smtpPort"
              :rules="[{ required: true, message: '请输入服务器端口号' }]"
            >
              <el-input
                style="width: 355px !important"
                v-model="form.smtpPort"
                placeholder="请输入服务器端口号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="服务器用户名"
              prop="userName"
              :rules="[{ required: true, message: '请输入服务器用户名' }]"
            >
              <el-input
                style="width: 355px !important"
                v-model="form.userName"
                placeholder="请输入服务器用户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px">
            <el-form-item
              label="服务器密码"
              prop="password"
              :rules="[{ required: true, message: '请输入服务器密码' }]"
            >
              <el-input
                show-password
                style="width: 355px !important"
                v-model="form.password"
                placeholder="请输入服务器密码"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col style="width: 395px">
            <el-form-item
              label="邮箱"
              prop="from"
              :rules="[{ required: true, message: '请输入邮箱' }]"
            >
              <el-input
                style="width: 355px !important"
                v-model="form.from"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 395px">
            <el-form-item
              label="落款名称"
              prop="fromName"
              :rules="[{ required: true, message: '请输入落款名称' }]"
            >
              <el-input
                style="width: 355px !important"
                v-model="form.fromName"
                placeholder="请输入落款名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
  <!--  -->
        <el-form-item>
          <el-button type="primary" v-permission="'sysEmail/update'"  @click="setEmil">保存</el-button>
          <!-- <el-button type="primary" v-else @click="addCoupon">提交</el-button> -->
          <el-button type="danger" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getEmail,resetEmail } from "./api.js";
import { couponTypeList, coupontypeDetailList } from "@/utils/searchArray";
import { getTimes } from "@/utils";
export default {
  data() {
    return {
      couponTypeList,
      coupontypeDetail: coupontypeDetailList,
      form: {
        id:1,
        hostName: null,
        smtpPort: null,
        userName: null,
        password: null,
        from: null,
        fromName: null,
      },
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {

      try{
        const res = await getEmail()
        if(res.data){
          this.form = {...res.data}
          this.activeRow = {...res.data}
        }

      }catch(e){
        console.log(e)
      }
    },
    resetForm() {
      this.$refs.form.resetFields();
      if (this.activeRow) {
        this.form = { ...this.activeRow };
      }
    },
    async setEmil() {
      this.$refs.form.validate(async (some) => {
        if (some) {
          this.$confirm("是否保存邮件配置?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(async () => {
              try {

                const res = await resetEmail({...this.form});
                this.$message.success("保存成功");
                this.getList()
              } catch (e) {
                console.log(e);
              }
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form {
  margin-top: 30px;
}
.infoTitle {
  font-weight: 400;
  margin-top: 30px;
  font-size: 18px;
}
/deep/label {
  font-weight: 400;
}
</style>