邮件编辑增加保存本地缓存功能

src/views/games/details/mail.vue

@@ -9,17 +9,29 @@
         <el-button
           type="primary"
           @click="addMail"
+          icon="el-icon-plus"
         >新增</el-button>
+        <el-button
+          type="warning"
+          @click="addFromDraft"
+          icon="el-icon-document"
+          plain
+        >从模板新增</el-button>
         <el-button
           @click="switchData"
           type="success"
+          icon="el-icon-d-caret"
         >{{ switchText }}</el-button>
         <el-button
           v-if="batch.show && ((isDev && permEdit) || (!isDev && permPublish))"
           type="danger"
+          icon="el-icon-delete"
           @click="batchDel"
         >批量删除</el-button>
-        <el-button @click="batchOpt"> {{ batch.txt }} </el-button>
+        <el-button
+          @click="batchOpt"
+          icon="el-icon-setting"
+        > {{ batch.txt }} </el-button>
       </div>
       <div class="r fr">
         <el-button
@@ -164,7 +176,7 @@
         </el-form-item>
         <el-form-item
           v-if="modalForm.mailtype == 1"
-          label="发件人"
+          label="收件人"
           prop="mailTo"
         >
           <el-input v-model="modalForm.to" :disabled="!isNew"/>
@@ -267,6 +279,11 @@
       </el-form>
       <div slot="footer">
         <el-button @click="closeModal">取 消</el-button>
+        <el-button
+          @click="reset"
+          type="warning"
+          plain
+        >重置</el-button>
         <el-button
           type="primary"
           @click="save"
@@ -325,6 +342,7 @@ import {
 } from '@/api/mail'
 import moment from 'moment'
 
+const MAIL_DRAFT_KEY = 'mail_draft_key'
 export default {
   name: 'GameDetailsMail',
   data() {
@@ -480,12 +498,32 @@ export default {
     clearValidate(formName) {
       this.$refs[formName].clearValidate()
     },
-
+    addFromDraft() {
-    // toolbar
-    addMail() {
       this.openModal()
       this.isNew = true
-      this.modalForm = {
+      this.modalForm = this.readFromLocal()
+    },
+    saveToLocal(data) {
+      localStorage.setItem(MAIL_DRAFT_KEY, JSON.stringify(data))
+    },
+    readFromLocal() {
+      const localData = localStorage.getItem(MAIL_DRAFT_KEY)
+      let data
+      if (localData) {
+        try {
+          data = JSON.parse(localData)
+        } catch (err) {
+          console.log('get localstorage err')
+        }
+      }
+      if (!data) {
+        data = this.newEmptyMail()
+      }
+      data.mailid = ''
+      return data
+    },
+    newEmptyMail() {
+      return {
         subject: '',
         actived: true,
         attachments: [],
@@ -500,6 +538,12 @@ export default {
         ext: ''
       }
     },
+    // toolbar
+    addMail() {
+      this.openModal()
+      this.isNew = true
+      this.modalForm = this.newEmptyMail()
+    },
     batchOpt() {
       this.batch.show = !this.batch.show
       this.batch.txt = this.batch.show ? '关闭' : '批量操作'
@@ -530,6 +574,19 @@ export default {
     delItem(index) {
       this.modalForm.attachments.splice(index, 1)
     },
+    reset() {
+      this.$confirm('确定重置为空的邮件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          console.log('确定')
+        })
+        .catch(() => {
+          this.$message.info('已取消！')
+        })
+    },
     save() {
       this.validateForm('modalForm')
         .then(() => {
@@ -539,6 +596,7 @@ export default {
             .then(res => {
               this.$message.success('保存成功！')
               this.queryMails()
+              this.saveToLocal(this.modalForm)
               this.closeModal()
             })
             .catch(err => {