index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div class="m-container">
  3. <h2>
  4. <div class="squrt"></div>
  5. 邮件服务配置
  6. </h2>
  7. <!-- <h3 class="infoTitle">优惠券信息</h3>
  8. <el-divider></el-divider> -->
  9. <div class="m-core">
  10. <el-form :model="form" ref="form" class="form">
  11. <el-row :gutter="20">
  12. <el-col style="width: 395px">
  13. <el-form-item
  14. label="服务器主机名"
  15. prop="hostName"
  16. :rules="[{ required: true, message: '请输入服务器主机名' }]"
  17. >
  18. <el-input
  19. style="width: 355px !important"
  20. v-model="form.hostName"
  21. placeholder="请输服务器主机名"
  22. ></el-input>
  23. </el-form-item>
  24. </el-col>
  25. <el-col style="width: 395px">
  26. <el-form-item
  27. label="服务器端口号"
  28. prop="smtpPort"
  29. :rules="[{ required: true, message: '请输入服务器端口号' }]"
  30. >
  31. <el-input
  32. style="width: 355px !important"
  33. v-model="form.smtpPort"
  34. placeholder="请输入服务器端口号"
  35. ></el-input>
  36. </el-form-item>
  37. </el-col>
  38. </el-row>
  39. <el-row :gutter="20">
  40. <el-col style="width: 395px">
  41. <el-form-item
  42. label="服务器用户名"
  43. prop="userName"
  44. :rules="[{ required: true, message: '请输入服务器用户名' }]"
  45. >
  46. <el-input
  47. style="width: 355px !important"
  48. v-model="form.userName"
  49. placeholder="请输入服务器用户名"
  50. ></el-input>
  51. </el-form-item>
  52. </el-col>
  53. <el-col style="width: 395px">
  54. <el-form-item
  55. label="服务器密码"
  56. prop="password"
  57. :rules="[{ required: true, message: '请输入服务器密码' }]"
  58. >
  59. <el-input
  60. show-password
  61. style="width: 355px !important"
  62. v-model="form.password"
  63. placeholder="请输入服务器密码"
  64. ></el-input>
  65. </el-form-item>
  66. </el-col>
  67. </el-row>
  68. <el-row :gutter="20">
  69. <el-col style="width: 395px">
  70. <el-form-item
  71. label="邮箱"
  72. prop="from"
  73. :rules="[{ required: true, message: '请输入邮箱' }]"
  74. >
  75. <el-input
  76. style="width: 355px !important"
  77. v-model="form.from"
  78. placeholder="请输入邮箱"
  79. ></el-input>
  80. </el-form-item>
  81. </el-col>
  82. <el-col style="width: 395px">
  83. <el-form-item
  84. label="落款名称"
  85. prop="fromName"
  86. :rules="[{ required: true, message: '请输入落款名称' }]"
  87. >
  88. <el-input
  89. style="width: 355px !important"
  90. v-model="form.fromName"
  91. placeholder="请输入落款名称"
  92. ></el-input>
  93. </el-form-item>
  94. </el-col>
  95. </el-row>
  96. <!-- -->
  97. <el-form-item>
  98. <el-button type="primary" v-permission="'sysEmail/update'" @click="setEmil">保存</el-button>
  99. <!-- <el-button type="primary" v-else @click="addCoupon">提交</el-button> -->
  100. <el-button type="danger" @click="resetForm">重置</el-button>
  101. </el-form-item>
  102. </el-form>
  103. </div>
  104. </div>
  105. </template>
  106. <script>
  107. import { getEmail,resetEmail } from "./api.js";
  108. import { couponTypeList, coupontypeDetailList } from "@/utils/searchArray";
  109. import { getTimes } from "@/utils";
  110. export default {
  111. data() {
  112. return {
  113. couponTypeList,
  114. coupontypeDetail: coupontypeDetailList,
  115. form: {
  116. id:1,
  117. hostName: null,
  118. smtpPort: null,
  119. userName: null,
  120. password: null,
  121. from: null,
  122. fromName: null,
  123. tenantId:-1
  124. },
  125. };
  126. },
  127. mounted() {
  128. this.getList()
  129. },
  130. methods: {
  131. async getList() {
  132. try{
  133. const res = await getEmail({tenantId:-1})
  134. if(res.data){
  135. this.form = {...res.data}
  136. this.activeRow = {...res.data}
  137. }
  138. }catch(e){
  139. console.log(e)
  140. }
  141. },
  142. resetForm() {
  143. this.$refs.form.resetFields();
  144. if (this.activeRow) {
  145. this.form = { ...this.activeRow };
  146. }
  147. },
  148. async setEmil() {
  149. this.$refs.form.validate(async (some) => {
  150. if (some) {
  151. this.$confirm("是否保存邮件配置?", "提示", {
  152. confirmButtonText: "确定",
  153. cancelButtonText: "取消",
  154. type: "warning",
  155. })
  156. .then(async () => {
  157. try {
  158. const res = await resetEmail({...this.form,tenantId:-1});
  159. this.$message.success("保存成功");
  160. this.getList()
  161. } catch (e) {
  162. console.log(e);
  163. }
  164. })
  165. .catch(() => {});
  166. }
  167. });
  168. },
  169. },
  170. };
  171. </script>
  172. <style lang="scss" scoped>
  173. .form {
  174. margin-top: 30px;
  175. }
  176. .infoTitle {
  177. font-weight: 400;
  178. margin-top: 30px;
  179. font-size: 18px;
  180. }
  181. /deep/label {
  182. font-weight: 400;
  183. }
  184. </style>