feta:add router-view table demo #124

src/config/router.config.js

@@ -80,9 +80,27 @@ export const asyncRouterMap = [
           {
             path: '/list/query-list',
             name: 'QueryListWrapper',
-            hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
+            hideChildrenInMenu: true,
             component: () => import('@/views/list/TableList'),
-            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
+            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] },
+            redirect: {
+              name: 'QueryList',
+              params: { page: 1 }
+            },
+            children: [
+              {
+                path: '/list/query-list/:page([1-9]\\d*)?',
+                name: 'QueryList',
+                component: () => import('@/views/list/table/List'),
+                meta: { title: '查询表格', hidden: true, keepAlive: true, permission: [ 'table' ] }
+              },
+              {
+                path: '/list/query-list/edit/:id([1-9]\\d*)?',
+                name: 'QueryListEdit',
+                component: () => import('@/views/list/table/Edit'),
+                meta: { title: '编辑', hidden: true, keepAlive: true, permission: [ 'table' ] }
+              }
+            ]
           },
           {
             path: '/list/tree-list',
@@ -197,13 +215,13 @@ export const asyncRouterMap = [
             path: '/result/success',
             name: 'ResultSuccess',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
-            meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
           },
           {
             path: '/result/fail',
             name: 'ResultFail',
             component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
-            meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
+            meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
           }
         ]
       },
@@ -255,7 +273,7 @@ export const asyncRouterMap = [
             path: '/account/settings',
             name: 'settings',
             component: () => import('@/views/account/settings/Index'),
-            meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
+            meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
             redirect: '/account/settings/base',
             hideChildrenInMenu: true,
             children: [
@@ -263,7 +281,7 @@ export const asyncRouterMap = [
                 path: '/account/settings/base',
                 name: 'BaseSettings',
                 component: () => import('@/views/account/settings/BaseSetting'),
-                meta: { title: '基本设置', hidden: true, permission: [ 'user' ] }
+                meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
               },
               {
                 path: '/account/settings/security',

src/router/README.md

@@ -52,7 +52,7 @@
 | title               | 路由标题, 用于显示面包屑, 页面标题 *推荐设置                 | string  | -      |
 | icon                | 路由在 menu 上显示的图标                                     | [string,svg]  | -      |
 | keepAlive           | 缓存该路由                                                   | boolean | false  |
-| hidden              | 配合`alwaysShow`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
+| hidden(已弃用)       | 配合`alwaysShow`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
 | hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false  |
 | permission          | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array   | []     |
 

src/views/list/TableList.vue

 <template>
   <a-card :bordered="false">
-    <component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
+    <router-view />
   </a-card>
 </template>
 
@@ -8,43 +8,22 @@
 
 import ATextarea from 'ant-design-vue/es/input/TextArea'
 import AInput from 'ant-design-vue/es/input/Input'
-// 动态切换组件
-import List from '@/views/list/table/List'
-import Edit from '@/views/list/table/Edit'
 
 export default {
   name: 'TableListWrapper',
   components: {
     AInput,
-    ATextarea,
-    List,
-    Edit
+    ATextarea
   },
   data () {
     return {
-      currentComponet: 'List',
-      record: ''
     }
   },
   created () {
 
   },
   methods: {
-    handleEdit (record) {
-      this.record = record || ''
-      this.currentComponet = 'Edit'
-      console.log(record)
-    },
-    handleGoBack () {
-      this.record = ''
-      this.currentComponet = 'List'
-    }
-  },
-  watch: {
-    '$route.path' () {
-      this.record = ''
-      this.currentComponet = 'List'
-    }
+
   }
 }
 </script>

src/views/list/table/Edit.vue

@@ -37,9 +37,9 @@
         validateStatus="warning"
       >
         <a-select v-decorator="['status', {rules: [{ required: true, message: '请选择状态' }], initialValue: '1'}]">
-          <a-select-option :value="1">Option 1</a-select-option>
-          <a-select-option :value="2">Option 2</a-select-option>
-          <a-select-option :value="3">Option 3</a-select-option>
+          <a-select-option value="1">Option 1</a-select-option>
+          <a-select-option value="2">Option 2</a-select-option>
+          <a-select-option value="3">Option 3</a-select-option>
         </a-select>
       </a-form-item>
 
@@ -65,7 +65,6 @@
           showTime
           format="YYYY-MM-DD HH:mm:ss"
           placeholder="Select Time"
-          v-decorator="['updatedAt']"
         />
       </a-form-item>
 
@@ -87,17 +86,8 @@
 </template>
 
 <script>
-import moment from 'moment'
-import pick from 'lodash.pick'
-
 export default {
   name: 'TableEdit',
-  props: {
-    record: {
-      type: [Object, String],
-      default: ''
-    }
-  },
   data () {
     return {
       labelCol: {
@@ -118,17 +108,14 @@ export default {
       id: 0
     }
   },
-  // beforeCreate () {
-  //   this.form = this.$form.createForm(this)
-  // },
   mounted () {
-    this.$nextTick(() => {
-      this.loadEditInfo(this.record)
-    })
+    this.loadEditInfo()
   },
   methods: {
     handleGoBack () {
-      this.$emit('onGoBack')
+      // TODO
+      // 改为动态组件时应该把这个方法派发出去，交由父组件处理
+      this.$router.back()
     },
     handleSubmit () {
       const { form: { validateFields } } = this
@@ -139,9 +126,6 @@ export default {
         }
       })
     },
-    handleGetInfo () {
-
-    },
     loadEditInfo (data) {
       const { form } = this
       // ajax
@@ -149,10 +133,7 @@ export default {
       new Promise((resolve) => {
         setTimeout(resolve, 1500)
       }).then(() => {
-        const formData = pick(data, ['no', 'callNo', 'status', 'description', 'updatedAt'])
-        formData.updatedAt = moment(data.updatedAt)
-        console.log('formData', formData)
-        form.setFieldsValue(formData)
+        form.setFieldsValue({ no: '1', callNo: '999' })
       })
     }
   }

src/views/list/table/List.vue

@@ -62,7 +62,7 @@
     </div>
 
     <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="handleEdit()">新建</a-button>
+      <a-button type="primary" icon="plus" @click="$router.push({ name: 'QueryListEdit' })">新建</a-button>
       <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
       <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
@@ -216,7 +216,8 @@ export default {
     },
 
     handleEdit (record) {
-      this.$emit('onEdit', record)
+      // Object.assign({}, record)
+      this.$router.push({ name: 'QueryListEdit', params: { id: record.key } })
     },
     handleOk () {