inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-card :bordered="false">
3     <a-spin :spinning="confirmLoading">
4       <a-tabs default-active-key="1" >
5         <a-tab-pane key="1" tab="发送邮件" @change="tabsCallback" v-if="hasPerm('email:sendEmail')">
6           <a-form :form="form1">
7             <a-form-item
8               label="收件邮箱"
9             >
10               <a-input placeholder="请输入收件邮箱" v-decorator="['to', {rules: [{type: 'email',message: '请输入正确的邮箱!'},{required: true, message: '请输入收件邮箱!'}]}]" />
11             </a-form-item>
12             <a-form-item
13               label="邮件标题"
14             >
15               <a-input placeholder="请输入邮件标题" v-decorator="['title', {rules: [{required: true, message: '请输入邮件标题!'}]}]" />
16             </a-form-item>
17             <a-form-item
18               label="邮件内容"
19             >
20               <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['content', {rules: [{required: true, message: '请输入邮件内容!'}]}]"></a-textarea>
21             </a-form-item>
22             <a-form-item class="subForm-item">
23               <a-button type="primary" @click="handleSubmit1" :loading="confirmLoading">发送</a-button>
24             </a-form-item>
25           </a-form>
26         </a-tab-pane>
27         <a-tab-pane key="2" tab="发送Html邮件" @change="tabsCallback" v-if="hasPerm('email:sendEmailHtml')">
28           <a-form :form="form2">
29             <a-form-item
30               label="收件邮箱"
31             >
32               <a-input placeholder="请输入收件邮箱" v-decorator="['to',{rules: [ {type: 'email',message: '请输入正确的邮箱!'},{required: true, message: '请输入收件邮箱!'}]}]" />
33             </a-form-item>
34             <a-form-item
35               label="邮件标题"
36             >
37               <a-input placeholder="请输入邮件标题" v-decorator="['title', {rules: [{required: true, message: '请输入邮件标题!'}]}]" />
38             </a-form-item>
39             <a-form-item
40               label="邮件内容"
41             >
42               <antd-editor :uploadConfig="editorUploadConfig" v-model="editorContent" @onchange="changeEditor" @oninit="getEditor" />
43             </a-form-item>
44             <a-form-item class="subForm-item">
45               <a-button type="primary" @click="handleSubmit2" :loading="confirmLoading">发送</a-button>
46             </a-form-item>
47           </a-form>
48         </a-tab-pane>
49       </a-tabs>
50     </a-spin>
51   </a-card>
52 </template>
53 <script>
54   import { emailSendEmail, emailSendEmailHtml } from '@/api/modular/system/emailManage'
55   import { AntdEditor } from '@/components'
56   // eslint-disable-next-line no-unused-vars
57   import { sysFileInfoUpload, sysFileInfoDownload } from '@/api/modular/system/fileManage'
58   export default {
59     components: {
60       AntdEditor
61     },
62     data () {
63       return {
64         editorContentText: '',
65         editorUploadConfig: {
66           method: 'http',
67           callback: this.editorUploadImage
68         },
69         confirmLoading: false,
70         editorContent: '',
71         form1: this.$form.createForm(this),
72         form2: this.$form.createForm(this)
73       }
74     },
75     methods: {
76       tabsCallback (key) {
77         if (key === '1') {
78           // eslint-disable-next-line no-labels
79           form1: this.$form.createForm(this)
80           this.form2.resetFields()
81           this.editor.txt.clear()
82         }
83         if (key === '2') {
84           // eslint-disable-next-line no-labels
85           form2: this.$form.createForm(this)
86           this.form1.resetFields()
87         }
88       },
89       /**
90        * 编辑器回调上传及回传图片url
91        */
92       editorUploadImage (files, insert) {
93         const formData = new FormData()
94         files.forEach(file => {
95           formData.append('file', file)
96         })
97         sysFileInfoUpload(formData).then((res) => {
98           if (res.success) {
99             insert(process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + res.data)
100           } else {
101             this.$message.error('编辑器上传图片失败:' + res.message)
102           }
103         })
104       },
105       getEditor (editor) {
106         this.editor = editor
107       },
108       changeEditor (html, ele) {
109         this.editorContent = html
110         this.editorContentText = ele.text()
111       },
112       /**
113        * 发送邮件
114        */
115       handleSubmit1 () {
116         const { form1: { validateFields } } = this
117         this.confirmLoading = true
118         validateFields((errors, values) => {
119           if (!errors) {
120             emailSendEmail(values).then((res) => {
121               if (res.success) {
122                 this.$message.success('发送成功')
123                 this.confirmLoading = false
124                 this.form1.resetFields()
125               } else {
126                 this.$message.error('发送失败:' + res.message)
127               }
128             }).finally((res) => {
129               this.confirmLoading = false
130             })
131           } else {
132             this.confirmLoading = false
133           }
134         })
135       },
136       /**
137        * 发送Html邮件
138        */
139       handleSubmit2 () {
140         const { form2: { validateFields } } = this
141         // eslint-disable-next-line eqeqeq
142         if (this.editorContent == '') {
143           this.$message.error('请填写邮件内容')
144           return
145         }
146         this.confirmLoading = true
147         validateFields((errors, values) => {
148           if (!errors) {
149             values.content = this.editorContent
150             emailSendEmailHtml(values).then((res) => {
151               if (res.success) {
152                 this.$message.success('发送成功')
153                 this.confirmLoading = false
154                 this.editor.txt.clear()
155                 this.form2.resetFields()
156               } else {
157                 this.$message.error('发送失败:' + res.message)
158               }
159             }).finally((res) => {
160               this.confirmLoading = false
161             })
162           } else {
163             this.confirmLoading = false
164           }
165         })
166       }
167
168     }
169   }
170 </script>
171 <style lang="less">
172   .table-operator {
173     margin-bottom: 18px;
174   }
175   button {
176     margin-right: 8px;
177   }
178 </style>