add a basic table component

BoBoooooo · Nov 30, 2018 · a336e70 · a336e70
1 parent 2cfa94b
commit a336e70
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 206 deletions.
diff --git a/src/api/login.js b/src/api/login.js
@@ -29,10 +29,10 @@ export function logout() {
 }
 
 
-export function ChangePassword(data){
+export function ChangePassword(data) {
   return fetch({
-      url: '/login/changepassword',
-      method: 'post',
-      params:data
-    })
-}
+    url: '/login/changepassword',
+    method: 'post',
+    params: data
+  })
+}
diff --git a/src/components/BasicTable/index.vue b/src/components/BasicTable/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <div  class="app-container">
+    <el-table v-loading.body="listLoading" :default-sort="{prop: 'name', order: 'descending'}" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+      <el-table-column
+        v-for="(item,index) in tableJson"
+        :key="index"
+        :label="item.label"
+        :prop="item.prop"
+        :align="item.align"
+        :sortable="item.sortable"
+        :width="item.width"
+        :min-width="item.min_width"
+        :header-align="item.header_align"
+        :show-overflow-tooltip="item.show_overflow_tooltip"
+      />
+      <el-table-column label="操作" align="center" min-width="110px">
+        <template slot-scope="scope">
+          <el-button type="primary" icon="el-icon-edit" circle @click="Edit(scope.row.id)" />
+          <el-button type="danger" icon="el-icon-delete" circle @click="Delete(scope.row.id)" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="margin-top:5px"
+      layout="total,sizes, prev, pager, next"
+      :current-page="listQuery.pageNumber"
+      :page-size="listQuery.pageSize"
+      :total="listQuery.totalCount"
+      :page-sizes="[10, 20, 30]"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  name: 'BasicTable',
+  props:{
+    list:{
+      type:Array      //展示数据
+    },
+    tableJson:{
+      type:Array      //列表配置json
+    },
+    listLoading:{     //正在加载
+      type:Boolean,
+      default:true
+    }
+
+  },
+  data() {
+    return {   
+      listQuery: {
+        totalCount: 0,
+        pageSize: 10,
+        pageNumber: 1,
+        SearchKey: '',
+        SearchValue: ''
+      } 
+    }
+  },
+
+ 
+
+  methods: {
+
+    handleSizeChange(val) {
+      this.listQuery.pageSize = val
+      this.$emit('Refresh',this.listQuery)
+    },
+    handleCurrentChange(val) {
+      this.listQuery.pageNumber = val
+      this.$emit('Refresh',this.listQuery)
+    },
+    Edit(id){
+      this.$emit('Edit',id)
+
+    },
+     Delete(id){
+      this.$emit('Delete',id)
+
+    }
+
+  },
+  watch:{
+    'list':{
+      deep:true,
+      immediate:true,
+      handler(val){
+        this.listQuery.totalCount = val.length||0;
+      }
+    }
+  }
+
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.searchContainer {
+    position: absolute;
+    top: 62px;
+    left: 20px;
+    padding: 15px;
+    min-height: 100px;
+    z-index: 10;
+    right: 20px;
+    background-color: white;
+;    box-shadow: 0px 0px 10px gray;
+
+  }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -6,7 +6,7 @@ import router from './router'
 import store from './store'
 import '@/icons' // icon
 import '@/permission' // 权限import axios from 'axios';
-// import axios from 'axios'
+import axios from 'axios'
 import '@/styles/index.scss' // global css
 import * as filters from './filters' // global filters
 
@@ -23,4 +23,3 @@ new Vue({
   render: h => h(App)
 
 })
-
diff --git a/src/router/index.js b/src/router/index.js
@@ -5,81 +5,157 @@ import Layout from '../views/layout/Layout'
 Vue.use(Router)
 
 
-export const constantRouterMap = [
-  { path: '/login', component: ()=>import('@/views/login/index'), hidden: true },
-  { path: '/404', component: ()=>import('@/views/404'), hidden: true },
+export const constantRouterMap = [{
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
   {
     path: '/',
     component: Layout,
     redirect: '/dashboard',
-    noDropdown:true,
-    hidden:true,
+    noDropdown: true,
+    hidden: true,
     children: [{
       path: 'dashboard',
-      component: ()=>import('@/views/dashboard/index'),
+      component: () => import('@/views/dashboard/index'),
       name: 'dashboard',
-      meta: { title: '首页', icon: 'dashboard', noCache: true }
+      meta: {
+        title: '首页',
+        icon: 'dashboard',
+        noCache: true
+      }
     }]
   }
 
 ]
 
 export default new Router({
-  scrollBehavior: () => ({ y: 0 }),
+  scrollBehavior: () => ({
+    y: 0
+  }),
   routes: constantRouterMap
 })
 
-  export  const asyncRouterMap = [
-    {
-      path: '/Archive',
-      component: Layout,
-      redirect: '/Archive/person_edit',
-      name:"Archive",
-      title:"廉政档案",
-      icon:'yonghuming',
-      children: [
-        { path: 'person_edit', name: 'person_edit',component: ()=>import('@/views/Archive/person_edit'),meta:{title:"廉政档案编辑"}},
-        { path: 'person_detail', name: 'person_detail', component: ()=>import('@/views/Archive/person_detail'),meta:{title:"廉政档案查看"}},
-        { path: 'person_count', name: 'person_count', component: ()=>import('@/views/Archive/person_count'),meta:{title:"廉政档案统计"}}
-
-      ]
-    },
-    {
-      path: '/DouBan',
-      component: Layout,
-      redirect: '/DouBan/movie',
-      name:"DouBan",
-      title:"豆瓣查询",
-      icon:'tubiao',
-      children: [
-        { path: 'movie', name: 'movie', component: ()=>import('@/views/DouBan/movie'),meta:{title:"热门电影"}},
-        { path: 'music', name: 'music', component: ()=>import('@/views/DouBan/music'),meta:{title:"热门音乐"}},
-        { path: 'book', name: 'book', component: ()=>import('@/views/DouBan/book'),meta:{title:"热门书籍"}}
-
-      ]
-    },
-
-    {
-      path: '/system',
-      component: Layout,
-      redirect: '/system/users',
-      name:"system",
-      title:"系统设置",
-      icon:'zujian',
-      children: [
-        { path: 'users', name: 'users',component: ()=>import('@/views/system/users'),meta:{title:"用户设置"}},
-        { path: 'dept', name: 'dept',component: ()=>import('@/views/system/dept'),meta:{title:"部门设置"}},
-        { path: 'role', name: 'role', component: ()=>import('@/views/system/role'),meta:{title:"角色设置"}},
-        { path: 'formdesigner', name: 'formdesigner', component: ()=>import('@/views/system/formdesigner'),meta:{title:"表单设计"}},
-
-      ]
-    },
+export const asyncRouterMap = [{
+    path: '/Archive',
+    component: Layout,
+    redirect: '/Archive/person_edit',
+    name: "Archive",
+    title: "廉政档案",
+    icon: 'yonghuming',
+    children: [{
+        path: 'person_edit',
+        name: 'person_edit',
+        component: () => import('@/views/Archive/person_edit'),
+        meta: {
+          title: "廉政档案编辑"
+        }
+      },
+      {
+        path: 'person_detail',
+        name: 'person_detail',
+        component: () => import('@/views/Archive/person_detail'),
+        meta: {
+          title: "廉政档案查看"
+        }
+      },
+      {
+        path: 'person_count',
+        name: 'person_count',
+        component: () => import('@/views/Archive/person_count'),
+        meta: {
+          title: "廉政档案统计"
+        }
+      }
 
-
+    ]
+  },
+  {
+    path: '/DouBan',
+    component: Layout,
+    redirect: '/DouBan/movie',
+    name: "DouBan",
+    title: "豆瓣查询",
+    icon: 'tubiao',
+    children: [{
+        path: 'movie',
+        name: 'movie',
+        component: () => import('@/views/DouBan/movie'),
+        meta: {
+          title: "热门电影"
+        }
+      },
+      {
+        path: 'music',
+        name: 'music',
+        component: () => import('@/views/DouBan/music'),
+        meta: {
+          title: "热门音乐"
+        }
+      },
+      {
+        path: 'book',
+        name: 'book',
+        component: () => import('@/views/DouBan/book'),
+        meta: {
+          title: "热门书籍"
+        }
+      }
 
-    {path:"*",redirect:"/404",hidden:true}
-  ]
+    ]
+  },
 
+  {
+    path: '/system',
+    component: Layout,
+    redirect: '/system/users',
+    name: "system",
+    title: "系统设置",
+    icon: 'zujian',
+    children: [{
+        path: 'users',
+        name: 'users',
+        component: () => import('@/views/system/users'),
+        meta: {
+          title: "用户设置"
+        }
+      },
+      {
+        path: 'dept',
+        name: 'dept',
+        component: () => import('@/views/system/dept'),
+        meta: {
+          title: "部门设置"
+        }
+      },
+      {
+        path: 'role',
+        name: 'role',
+        component: () => import('@/views/system/role'),
+        meta: {
+          title: "角色设置"
+        }
+      },
+      {
+        path: 'formdesigner',
+        name: 'formdesigner',
+        component: () => import('@/views/system/formdesigner'),
+        meta: {
+          title: "表单设计"
+        }
+      },
 
-
-
+    ]
+  },
+  {
+    path: "*",
+    redirect: "/404",
+    hidden: true
+  }
+]
diff --git a/src/store/index.js b/src/store/index.js
@@ -10,8 +10,8 @@ import getters from './getters'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-  modules: {
-    app,
+   modules: {
+           app,
     user,
     permission,
     tagsView