issue演示页面使用mock数据加载list

d2-projects · Dec 14, 2018 · 76bf4a9 · 76bf4a9
1 parent 110f018
commit 76bf4a9
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/src/api/demo.business.issues.142.js b/src/api/demo.business.issues.142.js
@@ -1,6 +1,13 @@
 import request from '@/plugin/axios'
 
-export function get (id) {
+export function fetch () {
+  return request({
+    url: '/demo/business/issues/142/fetch',
+    method: 'get'
+  })
+}
+
+export function detail (id) {
   return request({
     url: '/demo/business/issues/142/detail',
     method: 'get',

diff --git a/src/mock/api/demo.business.issues.142.js b/src/mock/api/demo.business.issues.142.js
@@ -1,11 +1,24 @@
 const db = [
-  { id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' },
-  { id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
-  { id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
-  { id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }
+  { id: '1', name: '用户 1', address: '上海市普陀区金沙江路 1518 弄' },
+  { id: '2', name: '用户 2', address: '上海市普陀区金沙江路 1517 弄' },
+  { id: '3', name: '用户 3', address: '上海市普陀区金沙江路 1519 弄' },
+  { id: '4', name: '用户 4', address: '上海市普陀区金沙江路 1516 弄' }
 ]
 
 export default [
+  {
+    path: '/api/demo/business/issues/142/fetch.*',
+    method: 'get',
+    handle () {
+      return {
+        code: 0,
+        msg: '获取数据成功',
+        data: {
+          list: db
+        }
+      }
+    }
+  },
   {
     path: '/api/demo/business/issues/142/detail.*',
     method: 'get',

diff --git a/src/pages/demo/business/issues/142/index.vue b/src/pages/demo/business/issues/142/index.vue
@@ -14,27 +14,28 @@
 </template>
 
 <script>
+// API
+import {
+  fetch
+} from '@/api/demo.business.issues.142'
+
 export default {
   data () {
     return {
       filename: __filename,
       crud: {
         columns: [
-          { title: '姓名', key: 'name' },
+          { title: '姓名', key: 'name', width: 100 },
           { 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 弄' }
-        ],
+        data: [],
         options: {
           border: true,
           size: 'mini'
         },
         rowHandle: {
           align: 'center',
+          width: 240,
           custom: [
             {
               text: '无缓存编辑',
@@ -51,7 +52,17 @@ export default {
       }
     }
   },
+  created () {
+    this.getTableData()
+  },
   methods: {
+    // 请求表格数据
+    getTableData () {
+      fetch()
+        .then(res => this.crud.data = res.list)
+        .catch(err => console.log(err))
+    },
+    // 跳转到编辑页面
     goToEditPage (name, id) {
       this.$router.push({
         name,

diff --git a/src/pages/demo/business/issues/142/mixins/index.js b/src/pages/demo/business/issues/142/mixins/index.js
@@ -1,4 +1,6 @@
-import { get } from '@api/demo.business.issues.142'
+import {
+  detail
+} from '@api/demo.business.issues.142'
 
 export default {
   props: {
@@ -29,7 +31,7 @@ export default {
         // 重置表单
         this.resetFormData()
         // 请求数据
-        get(id)
+        detail(id)
           .then(res => {
             const { name, address } = res
             this.form = { name, address }