EmailSetting.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <div class="manage-root personnel-create">
  3. <Header />
  4. <div class="manage-root-contain">
  5. <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
  6. <div class="manage-root-contain-right">
  7. <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
  8. <div class="create-bottom">
  9. <h3>邮箱配置</h3>
  10. <el-form :model="registerForm" :rules="rulesRegister" ref="registerForm" label-width="100px" class="registerForm" label-position="top">
  11. <el-form-item label="邮箱地址" prop="email">
  12. <el-input v-model="registerForm.email" autocomplete="off" placeholder="请输入邮箱地址" @blur="handleTrim('registerForm','email')" >
  13. </el-input>
  14. </el-form-item>
  15. <el-form-item label="SMTP 服务器" prop="smtp">
  16. <el-input v-model="registerForm.smtp" autocomplete="off" placeholder="请输入SMTP 服务器" @blur="handleTrim('registerForm','smtp')" >
  17. </el-input>
  18. </el-form-item>
  19. <el-form-item label="邮箱登录名" prop="emailName">
  20. <el-input v-model="registerForm.emailName" autocomplete="off" placeholder="请输入邮箱登录名" @blur="handleTrim('registerForm','emailName')" >
  21. </el-input>
  22. </el-form-item>
  23. <el-form-item label="邮箱登录密码" prop="newPwd">
  24. <el-input v-model="registerForm.newPwd" :type="newPwdFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('registerForm','newPwd')" >
  25. <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
  26. <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
  27. <svg-icon icon-class="eye-invisible"></svg-icon>
  28. </i>
  29. </el-input>
  30. </el-form-item>
  31. <el-form-item>
  32. <el-button type="primary" @click="onSubmit('registerForm')" size="small" :loading="loading">保存</el-button>
  33. <el-button @click="onCancel('registerForm')" size="small">取消</el-button>
  34. </el-form-item>
  35. </el-form>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  43. //例如:import 《组件名称》from ‘《组件路径》';
  44. import Header from "../../components/Header.vue";
  45. import NavMenu from "../../components/NavMenu.vue"
  46. import Breadcrumb from '../../components/Breadcrumb.vue';
  47. import { getLogin } from "@/api/ajax";
  48. export default {
  49. //import引入的组件需要注入到对象中才能使用
  50. components: { Header, NavMenu, Breadcrumb },
  51. props: {},
  52. data() {
  53. //这里存放数据
  54. const validateEmail = (rule, value, callback) => {
  55. if (value === '') {
  56. callback();
  57. } else {
  58. let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  59. let result = reg.test(value);
  60. if (result) {
  61. callback();
  62. } else {
  63. callback(new Error('请输入正确的邮箱地址'));
  64. }
  65. }
  66. };
  67. return {
  68. activeMenuIndex: "email_setting",
  69. breadcrumbList:[
  70. {
  71. icon:'setting',
  72. url:'',
  73. text:''
  74. },
  75. {
  76. icon:'',
  77. url:'',
  78. notLink: true,
  79. text:'系统配置'
  80. },
  81. {
  82. icon:'',
  83. url:'',
  84. text:'邮箱配置'
  85. }
  86. ],
  87. registerForm:{
  88. email: '',
  89. smtp: '',
  90. emailName: '',
  91. newPwd: ''
  92. },
  93. rulesRegister:{
  94. email:[
  95. { validator: validateEmail, trigger: 'blur' },
  96. ],
  97. },
  98. newPwdFlag: false, // 查看新密码
  99. loading: false
  100. }
  101. },
  102. //计算属性 类似于data概念
  103. computed: {
  104. },
  105. //监控data中数据变化
  106. watch: {
  107. },
  108. //方法集合
  109. methods: {
  110. // 去掉前后空格
  111. handleTrim(form,fild){
  112. this[form][fild] = this[form][fild].trim()
  113. },
  114. changeIcon(flag){
  115. this[flag] = !this[flag]
  116. },
  117. // 提交表单
  118. onSubmit(formName){
  119. this.$refs[formName].validate((valid) => {
  120. if (valid) {
  121. this.loading = true
  122. let MethodName = "/OrgServer/Manager/SysConfigManager/SetSysConfig_Mailbox";
  123. let data = {
  124. address: this.registerForm.email,
  125. smtp: this.registerForm.smtp,
  126. user_name: this.registerForm.emailName,
  127. password: this.registerForm.newPwd
  128. }
  129. getLogin(MethodName, data)
  130. .then((res) => {
  131. this.loading = false
  132. if(res.status===1){
  133. this.$message.success("保存成功")
  134. }
  135. }).catch((res) =>{
  136. this.loading = false
  137. })
  138. } else {
  139. return false;
  140. }
  141. });
  142. },
  143. // 取消 恢复到修改前状态
  144. onCancel(formName){
  145. this.$refs[formName].resetFields();
  146. },
  147. // 得到配置信息
  148. getInfo(){
  149. let MethodName = "/OrgServer/Manager/SysConfigManager/GetSysConfig_Mailbox";
  150. getLogin(MethodName, {})
  151. .then((res) => {
  152. if(res.status===1){
  153. this.registerForm.email = res.address
  154. this.registerForm.smtp = res.smtp,
  155. this.registerForm.emailName = res.user_name,
  156. this.registerForm.newPwd = res.password
  157. }
  158. }).catch((res) =>{
  159. })
  160. }
  161. },
  162. //生命周期 - 创建完成(可以访问当前this实例)
  163. created() {
  164. this.getInfo()
  165. },
  166. //生命周期 - 挂载完成(可以访问DOM元素)
  167. mounted() {
  168. },
  169. //生命周期-创建之前
  170. beforeCreated() { },
  171. //生命周期-挂载之前
  172. beforeMount() { },
  173. //生命周期-更新之前
  174. beforUpdate() { },
  175. //生命周期-更新之后
  176. updated() { },
  177. //生命周期-销毁之前
  178. beforeDestory() { },
  179. //生命周期-销毁完成
  180. destoryed() { },
  181. //如果页面有keep-alive缓存功能,这个函数会触发
  182. activated() { }
  183. }
  184. </script>
  185. <style lang="scss" scoped>
  186. /* @import url(); 引入css类 */
  187. .create-bottom{
  188. padding: 40px 40px;
  189. background: #FFFFFF;
  190. border-radius: 4px;
  191. height: calc(100vh - 140px);
  192. overflow: auto;
  193. h3{
  194. font-size: 20px;
  195. font-weight: 500;
  196. line-height: 28px;
  197. margin: 0 0 28px 0;
  198. color: #1D2129;
  199. }
  200. }
  201. </style>
  202. <style lang="scss">
  203. </style>