无缓存编辑方案

Former-commit-id: 6883d69fa575d23f2b84d87c98837513ce80796d [formerly d5db79752e5291211213ee25de648bef17890514] [formerly 6883d69fa575d23f2b84d87c98837513ce80796d [formerly d5db79752e5291211213ee25de648bef17890514] [formerly 6883d69fa575d23f2b84d87c98837513ce80796d [formerly d5db79752e5291211213ee25de648bef17890514] [formerly d5db79752e5291211213ee25de648bef17890514 [formerly 4e406142b9bb6080e9e1762c0a4bef23a1e50cd6 [formerly 1bf019d5133f11592485fa0f7cb1de7efec5b445]]]]]
Former-commit-id: d51db872aaf542f2b43a961e33072c072776506c
Former-commit-id: c5894cf9c1ee7748390cb62af232866c51c3c134
Former-commit-id: 65920a88a0ad59b76a722014c50fa26c2e72335d [formerly 69b2ad233bdca2af18a802eb70d8fc8f4f9b8c18]
Former-commit-id: a1bf30ad771fa9ebfd93f0d0176db83b8cbc761a
Former-commit-id: 01b20064c86040c27526f032537f393e4d45616e
Former-commit-id: 0c7c844d38c24679b82ed3b9c5eee402a835dd8e
Former-commit-id: 5221a9aa5913d25224c3a9060881124e90cc3876
Former-commit-id: 3712bbcc1f0c6bb7cb660871b9e14797146e596c

src/pages/demo/business/issues/142/edit.vue

@@ -3,7 +3,11 @@
     type="card"
     class="demo-business-issues-142-edit">
     <template slot="header">编辑 id: {{id}}</template>
-    <el-form ref="form" :model="form" label-width="80px" class="demo-business-issues-142-edit--form">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="80px"
+      class="demo-business-issues-142-edit--form">
       <el-form-item label="姓名">
         <el-input v-model="form.name"/>
       </el-form-item>
@@ -12,14 +16,12 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleSubmit">修改</el-button>
-        <el-button @click="handleCancel">取消</el-button>
       </el-form-item>
     </el-form>
   </d2-container>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
 import { get } from '@/api/demo/business/issues/142'
 export default {
   props: {
@@ -36,34 +38,55 @@ export default {
       }
     }
   },
-  created () {
-    // 自动加载一次表单数据
-    this.getFormData()
+  // 第一次进入或从其他组件对应路由进入时触发
+  beforeRouteEnter (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      next(vm => {
+        vm.resetFormData()
+        vm.getFormData(id)
+      })
+    }
+    else {
+      next(new Error('未指定ID'))
+    }
+  },
+  // 在同一组件对应的多个路由间切换时触发
+  beforeRouteUpdate (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      this.resetFormData()
+      this.getFormData(id)
+      next()
+    } else {
+      next(new Error('未指定ID'))
+    }
   },
   methods: {
-    ...mapActions('d2admin/page', [
-      'close'
-    ]),
-    // 根据 id 获取数据
-    getFormData () {
-      get(this.id)
+    // [业务逻辑] 重置表单
+    resetFormData () {
+      this.form = {
+        name: '',
+        address: ''
+      }
+    },
+    // [业务逻辑] 根据 id 获取数据
+    getFormData (id) {
+      get(id)
         .then(res => {
-          this.form.name = res.name
-          this.form.address = res.address
+          const { name, address } = res
+          this.form = { name, address }
         })
         .catch(err => {
           console.log('err', err)
         })
     },
-    // 提交
+    // [业务逻辑] 提交
     handleSubmit () {
-      console.log('submit!')
-    },
-    // 取消编辑
-    handleCancel () {
-      this.close({
-        tagName: this.$route.fullPath,
-        vm: this
+      this.$notify({
+        title: 'Submit',
+        message: '提交了表单',
+        type: 'success'
       })
     }
   }

src/pages/demo/business/issues/142/index.vue

@@ -32,12 +32,10 @@ export default {
           size: 'mini'
         },
         rowHandle: {
-          width: 80,
           align: 'center',
           custom: [
             {
-              text: '编辑',
-              type: 'primary',
+              text: '无缓存编辑',
               size: 'mini',
               emit: 'edit'
             }

src/router/modules/business.js

@@ -43,7 +43,7 @@ export default {
       props: true,
       meta: {
         ...meta,
-        title: 'issue #142 Edit'
+        title: '无缓存编辑'
       }
     }
   ])('demo-business-')