Merge branch 'feature/issues_demo' into develop

Former-commit-id: 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 3d22155e64acd9ea43777d6556c3acc7051eb3e0 [formerly ae0c18fb69c1ef99e3ad8157cad6eadeb6d88fe3]]]]]
Former-commit-id: ed558424e7e63c592ea687b33944d1030a6e564c
Former-commit-id: 682f832a0969a4c935a27e17f53064b50d638b0a
Former-commit-id: c0f7ccbcf711c79e5a1299b51c29d4cf96106672 [formerly a04bd44de9515eb0b27dffacd043d76a4ab1870b]
Former-commit-id: 8b9b528e5a19b505cddf1e48a79a58f0ec060cf9
Former-commit-id: f7b074a76d8f649ddad4868ba4c476d494fa425a
Former-commit-id: 6ec2423243ea85f89d88d55645df550b400fc36d
Former-commit-id: eec237ac6de9c57f04caae5dc47feec99e6a69fe
Former-commit-id: fcc45edcbeff474c56a4c6f59bc0d1435ad41d6f

src/pages/demo/business/issues/142/edit-cache-db.vue

@@ -0,0 +1,98 @@
+<template>
+  <d2-container
+    type="card"
+    class="page">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="80px"
+      class="page--form">
+      <el-form-item label="姓名">
+        <el-input v-model="form.name"/>
+      </el-form-item>
+      <el-form-item label="地址">
+        <el-input type="textarea" v-model="form.address"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">修改</el-button>
+      </el-form-item>
+    </el-form>
+  </d2-container>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import base from './mixins/index'
+export default {
+  mixins: [
+    base
+  ],
+  // 第一次进入或从其他组件对应路由进入时触发
+  beforeRouteEnter (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      next(async vm => {
+        if (from.name === 'demo-business-issues-142') {
+          await vm.getFormData(id)
+          vm.saveDataToDb()
+        } else {
+          vm.loadDataFromDb(to)
+        }
+      })
+    }
+  },
+  // 在同一组件对应的多个路由间切换时触发
+  beforeRouteUpdate (to, from, next) {
+    const id = to.params.id
+    if (id) {
+      this.loadDataFromDb(to)
+      next()
+    }
+  },
+  watch: {
+    // 表单变化的时候更新持久化
+    form: {
+      handler () {
+        this.saveDataToDb()
+      },
+      deep: true
+    }
+  },
+  methods: {
+    ...mapActions('d2admin/db', [
+      'pageSet',
+      'pageGet',
+      'pageClear'
+    ]),
+    // 将页面数据同步到持久化存储
+    saveDataToDb () {
+      this.pageSet({ vm: this, user: true })
+    },
+    // 从持久化存储恢复数据到页面
+    async loadDataFromDb (to) {
+      const vm = {
+        $route: {
+          fullPath: to.fullPath
+        },
+        $data: {}
+      }
+      const data = await this.pageGet({
+        vm,
+        user: true
+      })
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) this[key] = data[key]
+      }
+      this.$message.success('loadDataFromDb')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.page {
+  .page--form {
+    max-width: 460px;
+  }
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+  <d2-container
+    type="card"
+    class="page">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="80px"
+      class="page--form">
+      <el-form-item label="姓名">
+        <el-input v-model="form.name"/>
+      </el-form-item>
+      <el-form-item label="地址">
+        <el-input type="textarea" v-model="form.address"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">修改</el-button>
+      </el-form-item>
+    </el-form>
+  </d2-container>
+</template>
+
+<script>
+import base from './mixins/index'
+export default {
+  mixins: [
+    base
+  ],
+  // 第一次进入或从其他组件对应路由进入时触发
+  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'))
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.page {
+  .page--form {
+    max-width: 460px;
+  }
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+  <d2-container type="card">
+    <d2-crud
+      v-bind="crud"
+      @edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
+      @edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
+      style="margin: -15px 0;"/>
+    <template slot="footer">
+      <d2-link-btn
+        title="issue #142"
+        link="https://github.com/d2-projects/d2-admin/issues/142"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      crud: {
+        columns: [
+          { title: '姓名', key: 'name' },
+          { title: '地址', key: 'address' }
+        ],
+        data: [
+          { id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' },
+          { id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
+          { id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
+          { id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }
+        ],
+        options: {
+          border: true,
+          size: 'mini'
+        },
+        rowHandle: {
+          align: 'center',
+          custom: [
+            {
+              text: '无缓存编辑',
+              size: 'mini',
+              emit: 'edit'
+            },
+            {
+              text: '带缓存编辑 DB',
+              size: 'mini',
+              emit: 'edit-cache-db'
+            }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    goToEditPage (name, id) {
+      this.$router.push({
+        name,
+        params: {
+          id
+        }
+      })
+    }
+  }
+}
+</script>

src/pages/demo/business/issues/142/mixins/index.js

@@ -0,0 +1,54 @@
+import { get } from '@/api/demo/business/issues/142'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      form: {
+        name: '',
+        address: ''
+      }
+    }
+  },
+  methods: {
+    // [业务逻辑] 重置表单
+    resetFormData () {
+      this.form = {
+        name: '',
+        address: ''
+      }
+    },
+    // [业务逻辑] 根据 id 获取数据
+    getFormData (id) {
+      return new Promise((resolve, reject) => {
+        // 重置表单
+        this.resetFormData()
+        // 请求数据
+        get(id)
+          .then(res => {
+            const { name, address } = res
+            this.form = { name, address }
+            this.$message.success('getFormData')
+            resolve()
+          })
+          .catch(err => {
+            console.log('err', err)
+            reject(err)
+          })
+      })
+    },
+    // [业务逻辑] 提交
+    handleSubmit () {
+      this.$notify({
+        title: 'Submit',
+        message: '提交了表单',
+        type: 'info'
+      })
+    }
+  }
+}

src/pages/demo/frame/html/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <d2-container-frame :filename="filename" :src="`${$baseUrl}html/demo.html`"/>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      filename: __filename
+    }
+  }
+}
+</script>

src/pages/demo/playground/store/page/index.vue

@@ -61,28 +61,28 @@ export default {
     // 关闭当前
     handleCloseCurrent () {
       this.close({
-        tagName: this.$route.name,
+        tagName: this.$route.fullPath,
         vm: this
       })
     },
     // 关闭左侧
     handleCloseLeft () {
       this.closeLeft({
-        tagName: this.$route.name,
+        tagName: this.$route.fullPath,
         vm: this
       })
     },
     // 关闭右侧
     handleCloseRight () {
       this.closeRight({
-        tagName: this.$route.name,
+        tagName: this.$route.fullPath,
         vm: this
       })
     },
     // 关闭其他
     handleCloseOther () {
       this.closeOther({
-        tagName: this.$route.name,
+        tagName: this.$route.fullPath,
         vm: this
       })
     },
@@ -92,7 +92,7 @@ export default {
     },
     // 清空当前页缓存并刷新此页面
     handleCleanCacheAndRefreshCurrent () {
-      this.keepAliveRemove(this.$route.name)
+      this.keepAliveRemove(this.$route.fullPath)
       this.$nextTick(this.$router.replace('/refresh'))
     },
     // 清空所有的缓存并刷新此页面