fix: tableList

Author: kokoroli

src/config/router.config.js

@@ -82,25 +82,7 @@ export const asyncRouterMap = [
             name: 'QueryListWrapper',
             alwaysShow: true, // 强制显示 MenuItem 而不是 SubMenu
             component: () => import('@/views/list/TableList'),
-            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' ] }
-              }
-            ]
+            meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
           },
           {
             path: '/list/tree-list',

src/views/list/TableList.vue

@@ -1,29 +1,44 @@
 <template>
   <a-card :bordered="false">
-    <router-view />
+    <component @onEdit="handleEdit" @onGoBack="handleGoBack" :record="record" :is="currentComponet"></component>
   </a-card>
 </template>
 
 <script>
 
 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
+    ATextarea,
+    List,
+    Edit
   },
   data () {
     return {
+      currentComponet: 'List',
+      record: ''
     }
   },
   created () {
 
   },
   methods: {
-
+    handleEdit (record) {
+      this.record = record
+      this.currentComponet = 'Edit'
+      console.log(record)
+    },
+    handleGoBack () {
+      this.record = ''
+      this.currentComponet = 'List'
+    }
   }
 }
 </script>

src/views/list/table/Edit.vue

@@ -88,6 +88,12 @@
 <script>
 export default {
   name: 'TableEdit',
+  props: {
+    record: {
+      type: [Object, String],
+      default: ''
+    }
+  },
   data () {
     return {
       labelCol: {
@@ -108,14 +114,17 @@ export default {
       id: 0
     }
   },
+  // beforeCreate () {
+  //   this.form = this.$form.createForm(this)
+  // },
   mounted () {
-    this.loadEditInfo()
+    this.$nextTick(() => {
+      this.loadEditInfo(this.record)
+    })
   },
   methods: {
     handleGoBack () {
-      // TODO
-      // 改为动态组件时应该把这个方法派发出去，交由父组件处理
-      this.$router.back()
+      this.$emit('onGoBack')
     },
     handleSubmit () {
       const { form: { validateFields } } = this
@@ -125,6 +134,9 @@ export default {
           console.log('Received values of form: ', values)
         }
       })
+    },
+    handleGetInfo () {
+
     },
     loadEditInfo (data) {
       const { form } = this
@@ -133,7 +145,8 @@ export default {
       new Promise((resolve) => {
         setTimeout(resolve, 1500)
       }).then(() => {
-        form.setFieldsValue({ no: '1', callNo: '999' })
+        form.setFieldsValue(data)
+        // form.setFieldsValue({ no: '1', callNo: '999' })
       })
     }
   }

src/views/list/table/List.vue

@@ -216,8 +216,7 @@ export default {
     },
 
     handleEdit (record) {
-      // Object.assign({}, record)
-      this.$router.push({ name: 'QueryListEdit', params: { id: record.key } })
+      this.$emit('onEdit', record)
     },
     handleOk () {