fix: 编辑模式保存时多次保存的问题 fix DXY-F2E#38

wangqiang0121 · Dec 4, 2018 · b7f9852 · b7f9852
1 parent b3a4fb4
commit b7f9852
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 deletions.
diff --git a/client/src/components/edit/apiBox/UrlBox.vue b/client/src/components/edit/apiBox/UrlBox.vue
@@ -16,42 +16,39 @@
       <el-col class="control">
         <el-button id="saveAct" type="info" @click="save()" v-if="mode === 'edit'"></el-button>
         <template v-if="mode === 'test'">
-          <el-dropdown split-button
+          <el-dropdown
+            split-button
             type="success"
             id="editAct"
             @click="send()"
             @command="updateTestMode"
-            v-if="prodUrl || devUrl">
-            测试
+            v-if="prodUrl || devUrl"
+          >测试
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item
                 :command="m"
                 v-for="(m, idx) in testModes"
                 :key="idx"
-                v-if="m !== testMode && getTestUrl(m)">
-                测试{{m}}
-              </el-dropdown-item>
+                v-if="m !== testMode && getTestUrl(m)"
+              >测试{{m}}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <el-button id="editAct" type="success" @click="send()" v-else>测试</el-button>
         </template>
       </el-col>
       <el-col class="mode" v-if="api._id">
-        <el-select v-model="mode" placeholder="请选择" >
+        <el-select v-model="mode" placeholder="请选择">
           <el-option label="编辑模式" value="edit"></el-option>
           <el-option label="测试模式" value="test"></el-option>
-          <el-option label="文档模式"
-                     value="doc"
-                     class="doc"
-                     @click.native="showDoc"
-                     :disabled="true"></el-option>
+          <el-option label="文档模式" value="doc" class="doc" @click.native="showDoc" :disabled="true"></el-option>
         </el-select>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import { throttle } from '@/util'
 import { mapActions } from 'vuex'
 import CopyButton from '@/components/common/CopyButton'
 export default {
@@ -63,7 +60,29 @@ export default {
       saveToken: false,
       isShowDialog: false,
       testMode: 'mock',
-      testModes: ['mock', 'prod', 'dev']
+      testModes: ['mock', 'prod', 'dev'],
+      save: throttle(() => {
+        if (this.saveToken) {
+          return
+        }
+        this.saveToken = true
+        this.saveApi().then(() => {
+          this.saveToken = false
+          if (this.$route.name === 'Create' && this.api._id) {
+            this.$router.push({
+              name: 'Edit',
+              params: {
+                groupId: this.api.group,
+                apiId: this.api._id
+              }
+            })
+          }
+          this.$message.success('保存成功')
+        }).catch(err => {
+          this.saveToken = false
+          this.$message.error(`保存失败:${err.msg}`)
+        })
+      }, 3000)
     }
   },
   methods: {
@@ -74,28 +93,6 @@ export default {
     updateTestMode (val) {
       this.testMode = val
     },
-    save () {
-      if (this.saveToken) {
-        return
-      }
-      this.saveToken = true
-      this.saveApi().then(() => {
-        this.saveToken = false
-        if (this.$route.name === 'Create' && this.api._id) {
-          this.$router.push({
-            name: 'Edit',
-            params: {
-              groupId: this.api.group,
-              apiId: this.api._id
-            }
-          })
-        }
-        this.$message.success('保存成功')
-      }).catch(err => {
-        this.saveToken = false
-        this.$message.error(`保存失败:${err.msg}`)
-      })
-    },
     send () {
       this.testApi(this.testMode)
     },
@@ -181,7 +178,7 @@ export default {
 </script>
 <style lang="less">
 .url-box {
-  .el-col.mode{
+  .el-col.mode {
     width: 150px;
     text-align: right;
   }
@@ -197,7 +194,7 @@ export default {
     }
   }
 
-  .control{
+  .control {
     width: 134px;
     text-align: right;
   }
@@ -230,7 +227,6 @@ export default {
     & .el-button:not(.is-disabled):hover {
       color: #324057;
     }
-
   }
 }
 
@@ -239,17 +235,17 @@ export default {
   width: 91px;
 }
 #saveAct:after {
-  content: '保存';
+  content: "保存";
 }
 #saveAct:hover:after {
-  content: '⌘ + S'
+  content: "⌘ + S";
 }
 .el-select-dropdown__item.is-disabled.doc {
   cursor: pointer;
   color: #48576a;
 }
 .el-select-dropdown__item.is-disabled.doc:hover {
   /*background-color: #58B7FF;*/
-  color: #58B7FF;
+  color: #58b7ff;
 }
 </style>
diff --git a/client/src/util/index.js b/client/src/util/index.js
@@ -30,3 +30,15 @@ export function debounce (fun, interval) {
     timer = setTimeout(() => fun.apply(this, args), interval)
   }
 }
+
+export function throttle (fn, gapTime) {
+  let lastTime = null
+
+  return function () {
+    let now = +new Date()
+    if (now - lastTime > gapTime || !lastTime) {
+      fn()
+      lastTime = now
+    }
+  }
+}