add userList

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "simditor": "^2.3.6",
     "vue": "^2.0.1",
+    "vue-i18n": "^4.7.1",
     "vue-resource": "^1.0.3",
     "vue-router": "^2.0.1"
   },

src/App.vue

@@ -15,14 +15,16 @@
 
 <script>
 import SideMenu from './components/SideMenu.vue'
+import api from './api.js'
 export default {
   name: 'app',
-  mounted () {
-  },
   components: {
     SideMenu
   },
   methods: {
+  },
+  mounted () {
+    api.login('root', '047e09').then(res => {})
   }
 }
 </script>

src/api.js

@@ -27,6 +27,18 @@ export default {
         }
       }
     })
+  },
+  // 获取用户列表
+  getUserList (offset, limit) {
+    return ajax('admin/account/user/', 'get', {
+      options: {
+        params: {
+          paging: true,
+          offset: offset,
+          limit: limit
+        }
+      }
+    })
   }
 }
 /**

src/components/Panel.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="panel">
-    <header>{{title}}</header>
+    <header>
+      <h2>{{title}}</h2>
+      <div class="header_right">
+        <slot name="header"></slot>
+      </div>
+    </header>
     <div class="body">
       <slot></slot>
     </div>
@@ -25,17 +30,28 @@ export default{
     border-radius: 4px;
     box-shadow: 0 1px 1px rgba(0,0,0,.05);
     header{
-      color: #333;
+      position: relative;
-      border-color: #ddd;
+      z-index: 10;
-      font-size: 18px;
+      >h2{
-      font-weight: 300;
+        margin: 0;
-      letter-spacing: 0.025em;
+        color: #333;
-      height: 66px;
+        border-color: #ddd;
-      line-height: 45px;
+        font-size: 18px;
-      padding: 10px 15px;
+        font-weight: 300;
-      border-bottom: 1px solid #eee;
+        letter-spacing: 0.025em;
-      border-top-left-radius: 3px;
+        height: 66px;
-      border-top-right-radius: 3px;
+        line-height: 45px;
+        padding: 10px 15px;
+        border-bottom: 1px solid #eee;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+      }
+      >.header_right{
+        position: absolute;
+        top: 50%;
+        right: 20px;
+        transform: translate(0,-50%);
+      }
     }
     .body{
       padding: 15px;

src/main.js

@@ -3,21 +3,28 @@ import App from './App'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
 import VueRouter from 'vue-router'
+// import VueI18n from 'vue-i18n'
 
 Vue.use(Element)
 Vue.use(VueRouter)
+// Vue.use(VueI18n)
 
 // 引入 view 组件
-import { AnnounceMent } from './views'
+import { AnnounceMent, UserList } from './views'
 const router = new VueRouter({
   scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
-      path: '/announcement',
+      path: '/announce_ment',
-      name: 'announcement',
+      name: 'announce_ment',
       component: AnnounceMent
     },
-    { path: '*', redirect: '/announcement' }
+    {
+      path: '/user_list',
+      name: 'user_list',
+      component: UserList
+    },
+    { path: '*', redirect: '/announce_ment' }
   ]
 })
 new Vue(Vue.util.extend({ router }, App)).$mount('#app')

src/views/AnnounceMent.vue

@@ -3,7 +3,7 @@
     <Panel title="公告列表">
       <div class="list">
         <el-table
-          ref="announceTable"
+          ref="table"
           :data="announceList"
           style="width: 100%"
           @selection-change="multipleSelectionChange">
@@ -132,7 +132,7 @@ export default {
     // 切换页码回调
     currentChange (page) {
       // 清除上一页选择的的多选框
-      this.$refs.announceTable.clearSelection()
+      this.$refs.table.clearSelection()
       api.getAnnounceList((page - 1) * this.pageSize, this.pageSize).then(res => {
         this.announceList = res.data.data.results
       })
@@ -157,11 +157,9 @@ export default {
     }
   },
   mounted () {
-    api.login('root', '047e09').then(res => {
+    api.getAnnounceList(1, this.pageSize).then(res => {
-      api.getAnnounceList(1, this.pageSize).then(res => {
+      this.count = res.data.data.count
-        this.count = res.data.data.count
+      this.announceList = res.data.data.results
-        this.announceList = res.data.data.results
-      })
     })
   }
 }

src/views/index.js

@@ -1,5 +1,5 @@
 import AnnounceMent from './AnnounceMent.vue'
-
+import UserList from './UserList.vue'
 export {
-  AnnounceMent
+  AnnounceMent, UserList
 }