update

src/components/Layout/Sidebar/MenuItem.vue

@@ -63,9 +63,6 @@ export default {
       return path.resolve(this.parentPath, this.routePath)
     }
   },
-  created() {
-    console.log(this.navItem)
-  },
   methods: {
     hasOneShowingChild(item) {
       return item.meta.onlyShowOneChild && item.children && item.children.length === 1

src/components/Layout/Sidebar/index.vue

@@ -6,7 +6,7 @@
         src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.png"
       /> -->
       <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/favicon.svg" />
-      <span>内容维护系统</span>
+      <span>证书查询系统</span>
     </div>
     <el-scrollbar wrap-class="scrollbar-wrapper sidebar-container-wrap">
       <el-menu

src/pages/course/index.vue

 <template>
-  <div>课程管理</div>
+  <div class="course page_container">
+    <table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
+      <template #header-aside>
+        <el-button type="primary" size="mini" @click="handleCreate" v-if="hasImport">新增</el-button>
+        <el-button type="primary" size="mini" @click="handleImport" v-if="hasImport">导入</el-button>
+      </template>
+      <!-- 项目Id -->
+      <template v-slot:table_id="scope"
+        ><span class="details-handle" @click="handleDetails(scope.row)">{{ scope.row.id }}</span></template
+      >
+      <!-- 状态 -->
+      <template v-slot:status="{ row }">
+        <el-switch
+          v-model="row.status"
+          :active-value="1"
+          :inactive-value="0"
+          active-text="启用"
+          inactive-text="停用"
+          @change="statusChange(row)"
+          :disabled="!hasCreate"
+        ></el-switch>
+      </template>
+      <template #footer>
+        已选中 {{multipleSelection.length}} 项
+        <el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+          >删除</el-button
+        >
+      </template>
+    </table-list>
+  </div>
 </template>
+<script>
+import TableList from '@/components/TableList'
+export default {
+  components: { TableList },
+  data() {
+    return {
+      multipleSelection: []
+    }
+  },
+  computed: {
+    hasImport() {
+      return true
+    },
+    hasDelete() {
+      return true
+    },
+    tableOptions() {
+      return {
+        data: [
+          { id: '123001', name: '高品质运营管理', en_name: 'High Quality Operations Management', publish_time: '2016-09-20 11:00:54' },
+          { id: '123001', name: '酒店和旅游行业市场营销', en_name: 'Marketing for Hospitality & Tourism Industry', publish_time: '2016-09-20 11:00:54' }
+        ],
+        remote: {
+          httpRequest: null,
+          params: { name: '' }
+        },
+        filters: [
+          { type: 'input', placeholder: '请输入课程ID/课程名称', prop: 'name' }
+        ],
+        columns: [
+          { type: 'selection', minWidth: '50px', fixed: 'left', visible: this.hasDelete },
+          { prop: 'id', label: '课程ID', slots: 'table_id', minWidth: '120px', fixed: 'left' },
+          { prop: 'name', label: '课程名称', minWidth: '130px' },
+          { prop: 'en_name', label: '课程名称（英）', minWidth: '160px' },
+          { prop: 'publish_time', label: '发布时间', minWidth: '120px' }
+        ],
+        bodyHeight: 'calc(100% - 50px)'
+      }
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val.map(item => item.id)
+    },
+    handleCreate() {},
+    handleImport() {},
+    handleRemove() {},
+    handleDetails() {}
+  }
+}
+</script>
\ No newline at end of file

src/pages/project/index.vue

+<template>
+  <div class="course page_container">
+    <table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
+      <template #header-aside>
+        <el-button type="primary" size="mini" @click="handleCreate" v-if="hasImport">新增</el-button>
+        <el-button type="primary" size="mini" @click="handleImport" v-if="hasImport">导入</el-button>
+      </template>
+      <!-- 项目Id -->
+      <template v-slot:table_id="scope">
+        <span class="details-handle" @click="handleDetails(scope.row)">{{ scope.row.id }}</span>
+      </template>
+       <!-- 操作 -->
+      <template v-slot:table-operate="{ row }">
+        <el-button type="text" @click="handleEdit(row)" size="mini">编辑</el-button>
+        <el-button type="text" @click="handleAdd(row)" size="mini">添加</el-button>
+      </template>
+      <template #footer>
+        已选中 {{multipleSelection.length}} 项
+        <el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+          >删除</el-button
+        >
+      </template>
+    </table-list>
+  </div>
+</template>
+<script>
+import TableList from '@/components/TableList'
+export default {
+  components: { TableList },
+  data() {
+    return {
+      multipleSelection: []
+    }
+  },
+  computed: {
+    hasImport() {
+      return true
+    },
+    hasDelete() {
+      return true
+    },
+    tableOptions() {
+      return {
+        data: [
+          { id: '123001', name: '高品质运营管理', en_name: 'High Quality Operations Management', publish_time: '2016-09-20 11:00:54', type: '长期', editor: '刘义', update_time: '2016-09-20 11:00:54', course_count: 10, student_count: 10 },
+          { id: '123001', name: '酒店和旅游行业市场营销', en_name: 'Marketing for Hospitality & Tourism Industry', publish_time: '2016-09-20 11:00:54', type: '短期', editor: '刘义', update_time: '2016-09-20 11:00:54', course_count: 10, student_count: 10 }
+        ],
+        remote: {
+          httpRequest: null,
+          params: { name: '' }
+        },
+        filters: [
+          { type: 'input', placeholder: '请输入课程ID/课程名称', prop: 'name' }
+        ],
+        columns: [
+          { type: 'selection', minWidth: '50px', fixed: 'left', visible: this.hasDelete },
+          { prop: 'id', label: '项目ID', slots: 'table_id', minWidth: '120px', fixed: 'left' },
+          { prop: 'name', label: '项目名称', minWidth: '130px' },
+          { prop: 'en_name', label: '项目名称（英）', minWidth: '160px' },
+          { prop: 'type', label: '项目类型', minWidth: '120px' },
+          { prop: 'publish_time', label: '发布时间', minWidth: '120px' },
+          { prop: 'editor', label: '修改人', minWidth: '80px' },
+          { prop: 'update_time', label: '修改时间', minWidth: '150px' },
+          { prop: 'course_count', label: '课程数', minWidth: '70px' },
+          { prop: 'student_count', label: '学员数', minWidth: '70px' },
+          { prop: 'operate', label: '操作', slots: 'table-operate', minWidth: '120px', fixed: 'right' }
+        ],
+        bodyHeight: 'calc(100% - 50px)'
+      }
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val.map(item => item.id)
+    },
+    handleCreate() {},
+    handleImport() {},
+    handleRemove() {},
+    handleDetails() {},
+    handleEdit() {},
+    handleAdd() {}
+  }
+}
+</script>
\ No newline at end of file

src/pages/student/index.vue

+<template>
+  <div class="student page_container">
+    <table-list v-bind="tableOptions" ref="tabList" @selection-change="handleSelectionChange">
+      <template #header-aside>
+        <el-button type="primary" size="mini" @click="handleImport" v-if="hasImport">导入</el-button>
+      </template>
+      <!-- 项目Id -->
+      <template v-slot:table_id="scope"
+        ><span class="details-handle" @click="handleDetails(scope.row)">{{ scope.row.id }}</span></template
+      >
+      <!-- 状态 -->
+      <template v-slot:status="{ row }">
+        <el-switch
+          v-model="row.status"
+          :active-value="1"
+          :inactive-value="0"
+          active-text="启用"
+          inactive-text="停用"
+          @change="statusChange(row)"
+          :disabled="!hasCreate"
+        ></el-switch>
+      </template>
+      <template #footer>
+        已选中 {{multipleSelection.length}} 项
+        <el-button style="margin-left:15px;" size="mini" :disabled="!multipleSelection.length" @click="handleRemove" v-if="hasDelete"
+          >删除</el-button
+        >
+      </template>
+    </table-list>
+  </div>
+</template>
+<script>
+import TableList from '@/components/TableList'
+export default {
+  components: { TableList },
+  data() {
+    return {
+      multipleSelection: []
+    }
+  },
+  computed: {
+    hasImport() {
+      return true
+    },
+    hasDelete() {
+      return true
+    },
+    tableOptions() {
+      return {
+        data: [
+          {
+            id: '123000',
+            country: '中国',
+            city: '辽宁省大连市',
+            name: '张三',
+            en_name: 'San Zhang',
+            sex: '女',
+            age: '29',
+            ID: '211202********4567',
+            mobile: '13367891234',
+            email: 'ahgl@163.com',
+            hasSchoolRoll: '是',
+            editor: '刘义',
+            update_time: '2016-09-20 11:00:54',
+            creator: '刘义',
+            created_time: '2016-09-20 11:00:54'
+          },
+          {
+            id: '123001',
+            country: '中国',
+            city: '河北省石家庄',
+            name: '李四',
+            en_name: 'Si Li',
+            sex: '男',
+            age: '33',
+            ID: '211202********4567',
+            mobile: '13367891234',
+            email: 'ahgl@163.com',
+            hasSchoolRoll: '是',
+            editor: '刘义',
+            update_time: '2016-09-20 11:00:54',
+            creator: '刘义',
+            created_time: '2016-09-20 11:00:54'
+          }
+        ],
+        remote: {
+          httpRequest: null,
+          params: { name: '', mobile: '', email: '' }
+        },
+        filters: [
+          { type: 'input', placeholder: '请输入学籍ID/学员姓名', prop: 'name' },
+          { type: 'input', placeholder: '手机号码', prop: 'mobile' },
+          { type: 'input', placeholder: '邮箱地址', prop: 'email' }
+        ],
+        columns: [
+          { type: 'selection', minWidth: '50px', fixed: 'left', visible: this.hasDelete },
+          { prop: 'id', label: '学籍ID', slots: 'table_id', minWidth: '120px', fixed: 'left' },
+          { prop: 'country', label: '国家', minWidth: '120px' },
+          { prop: 'city', label: '省市', minWidth: '120px' },
+          { prop: 'name', label: '姓名', minWidth: '90px' },
+          { prop: 'en_name', label: '姓名（英）', minWidth: '150px' },
+          { prop: 'sex', label: '性别', minWidth: '60px' },
+          { prop: 'age', label: '年龄', minWidth: '60px' },
+          { prop: 'ID', label: '身份证号', minWidth: '150px' },
+          { prop: 'mobile', label: '电话号码', minWidth: '130px' },
+          { prop: 'email', label: '邮箱地址', minWidth: '150px' },
+          { prop: 'hasSchoolRoll', label: '是否有学籍', minWidth: '80px' },
+          { prop: 'editor', label: '修改人', minWidth: '80px' },
+          { prop: 'update_time', label: '修改时间', minWidth: '150px' },
+          { prop: 'creator', label: '创建人', minWidth: '80px' },
+          { prop: 'created_time', label: '创建时间', minWidth: '150px' }
+        ],
+        bodyHeight: 'calc(100% - 50px)'
+      }
+    }
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val.map(item => item.id)
+    },
+    handleImport() {},
+    handleRemove() {},
+    handleDetails() {}
+  }
+}
+</script>
\ No newline at end of file

src/pages/students/index.vue

-<template>
-  <div>学员管理</div>
-</template>
\ No newline at end of file

src/router/routes.js

@@ -8,14 +8,14 @@ export default [
     hidden: true
   },
   {
-    path: '/students',
+    path: '/student',
     component: Layout,
     meta: { onlyShowOneChild: true },
     children: [
       {
         path: '',
-        name: 'Students',
-        component: () => import('@/pages/students/index'),
+        name: 'Student',
+        component: () => import('@/pages/student/index'),
         meta: { title: '学员管理', icon: '', permission: 'content-menu-advert-list' }
       }
     ]
@@ -33,6 +33,32 @@ export default [
       }
     ]
   },
+  {
+    path: '/project',
+    component: Layout,
+    meta: { onlyShowOneChild: true },
+    children: [
+      {
+        path: '',
+        name: 'Project',
+        component: () => import('@/pages/project/index'),
+        meta: { title: '项目管理', icon: '', permission: 'content-menu-advert-list' }
+      }
+    ]
+  },
+  {
+    path: '/role',
+    component: Layout,
+    meta: { onlyShowOneChild: true },
+    children: [
+      {
+        path: '',
+        name: 'Role',
+        component: () => import('@/pages/role/index'),
+        meta: { title: '权限管理', icon: '', permission: 'content-menu-advert-list' }
+      }
+    ]
+  },
   {
     path: '/error-page',
     component: Layout,