表格

src/components/siderBar/index.vue

@@ -13,7 +13,9 @@
                 <span>{{item.title}}</span>
               </template>
               <el-menu-item-group>
-                <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">{{subItem.title}}</el-menu-item>
+                <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">
+                  <router-link :to="{name:subItem.pathName,query:{}}">{{subItem.title}}</router-link>
+                </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
             <el-menu-item v-else :index="String(index)" :key="index">

src/components/siderBar/page.scss

@@ -0,0 +1,40 @@
+
+a{
+  width: 100%;
+  display: inline-block;
+  color: #666;
+}
+
+.el-menu-item.is-active{
+  background: rgba(64, 158, 255, .1);
+}
+
+.el-menu-item.is-active{
+  a{
+    color: #409EFF;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/components/tableSearch/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableSearch flex-h">
+    <div class="flex-item">
+      <el-input
+        placeholder="请输入内容"
+        v-model="key"
+        clearable>
+      </el-input>
+    </div>
+    <el-button
+        size="mini"
+        type="primary" @click="search">搜索</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: [''],
+  data () {
+    return {
+      key: ''
+    }
+  },
+  mounted () {
+    this.$nextTick(function () {
+      // console.log(this.menu)
+    })
+  },
+  methods: {
+    search () { // 搜索
+      this.$emit('exportSearchKey', this.key)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/tableSearch/page.scss

@@ -0,0 +1,35 @@
+
+
+.tableSearch{
+  width: 300px;
+  &>*{
+    margin-right: 10px;
+  }
+  &>*:last-child{
+    margin-right: 0;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/main.js

@@ -3,17 +3,18 @@
 import Vue from 'vue'
 import App from './App'
 import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import Cookies from 'vue-cookie'
 import './style/main.css'
 import router from './router'
-import Ajax from './util/ajax'
+// import Ajax from './util/ajax'
 
 Vue.use(ElementUI)
 Vue.use(Cookies)
 
 Vue.config.productionTip = false
-const http = new Ajax()
-Vue.prototype.$ajax = http
+// const http = new Ajax()
+// Vue.prototype.$ajax = http
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/pages/login/index.vue

@@ -6,15 +6,15 @@
         <span>城的空间 · 登录</span>
       </div>
       <div class="login">
-        <input type="text" placeholder="请输入账号">
-        <input type="password" placeholder="请输入密码">
+        <input type="text" v-model="account" placeholder="请输入账号">
+        <input type="password" v-model="password" placeholder="请输入密码">
         <div>
           <label :class="{'active':remberAccount}" @click="triggerRember">
             <i class="iconfont icon-gouxuan"></i>
             <span onselectstart="return false">记住账号密码</span>
           </label>
         </div>
-        <a class="btn">登 录</a>
+        <a class="btn" @click="toLogin">登 录</a>
       </div>
     </div>
   </div>
@@ -25,6 +25,8 @@ export default {
   name: '',
   data () {
     return {
+      account: '', // 账号
+      password: '', // 密码
       remberAccount: true, // 记住账号密码
     }
   },
@@ -34,10 +36,28 @@ export default {
     })
   },
   methods: {
+    // 登录
+    toLogin () {
+      if (this.remberAccount) {
+        var aData = { account: this.account, password: this.password, remberAccount: true }
+        this.$cookie.set('accountInfo', JSON.stringify(aData))
+      } else {
+        this.$cookie.delete('accountInfo')
+      }
+    },
+
     // 初始化登陆逻辑
     initLogin () {
-      if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === '') {
-
+      var aData = {}
+      if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === null) {
+        aData = { account: '', password: '', remberAccount: true }
+        this.$cookie.set('accountInfo', JSON.stringify(aData))
+      } else {
+        aData = this.$cookie.get('accountInfo')
+        aData = JSON.parse(aData)
+        for (var n in aData) {
+          this[n] = aData[n]
+        }
       }
     },
 

src/pages/system/channelList/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success">新增渠道</el-button>
+        </div>
+        <tableSearch @exportSearchKey="searchList"></tableSearch>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="channelName"
+          label="渠道名"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="channelCode"
+          label="渠道code">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-size="10"
+      layout="prev, pager, next, jumper"
+      :total="100">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import tableSearch from '@/components/tableSearch/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentPage: 0, // 当前页码
+      tableSearch: { // 表格搜索条件
+        key: '111', // 搜索关键字
+      },
+      tableData: [{
+        channelName: 'xxx',
+        channelCode: 'xxx'
+      }, {
+        channelName: 'xxx',
+        channelCode: 'xxx'
+      }, {
+        channelName: 'xxx',
+        channelCode: 'xxx'
+      }, {
+        channelName: 'xxx',
+        channelCode: 'xxx'
+      }]
+    }
+  },
+  components: {
+    tableSearch,
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
+    handleEdit (index, row) { // 编辑
+      console.log(index, row)
+    },
+    handleDelete (index, row) { // 删除
+      console.log(index, row)
+      this.$confirm('确认删除此渠道?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    searchList (key) { // 搜索列表
+      console.log(key)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/channelList/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/index.vue

@@ -18,8 +18,8 @@
           <breadCrumb :list="breadCrumb"></breadCrumb>
         </div>
         <div class="flex-item">
-          <div>
-            业务页面
+          <div class="subPageBox">
+            <router-view></router-view>
           </div>
         </div>
       </div>
@@ -52,19 +52,11 @@ export default {
         pathName: ''
       }],
       pageMenu: [{
-        title: '一级菜单1',
+        title: '渠道管理',
         pathName: '',
         children: [{
-          title: '二级菜单1',
-          pathName: '',
-          children: [],
-        }, {
-          title: '二级菜单2',
-          pathName: '',
-          children: [],
-        }, {
-          title: '二级菜单3',
-          pathName: '',
+          title: '渠道列表',
+          pathName: 'channelList',
           children: [],
         }],
       }, {

src/pages/system/page.js

@@ -0,0 +1,19 @@
+
+import system from './index'
+import channelList from './channelList/index'
+
+export default {
+  router: [
+    {
+      path: '/system',
+      name: 'system',
+      component: system,
+      children: [{
+        path: 'channelList',
+        name: 'channelList',
+        component: channelList,
+        children: [],
+      }],
+    },
+  ],
+}

src/pages/system/page.scss

@@ -79,6 +79,13 @@
   border-bottom: 1px solid #eee;
 }
 
+.subPageBox{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
 
 
 

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import login from '@/pages/login/index'
-import system from '@/pages/system/index'
+import system from '@/pages/system/page'
 import test from '@/pages/test/test'
 
 Vue.use(Router)
@@ -13,11 +13,8 @@ export default new Router({
       name: 'login',
       component: login
     },
-    {
-      path: '/system',
-      name: 'system',
-      component: system
-    },
+    { path: '/', redirect: '/index' },
+    ...system.router,
     {
       path: '/test',
       name: 'test',

src/style/main.css

@@ -136,6 +136,13 @@ select:focus {
   overflow: hidden;
 }
 
+.subPage{
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+}
+
 * > img.cover {
   width: 100%;
   height: 100%;
@@ -161,3 +168,25 @@ select:focus {
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.3);
 }
+
+.system-table-box{
+  width: calc(100% - 40px);
+  margin: 20px auto 0;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  border-bottom: none;
+}
+
+.system-table-search{
+  width: calc(100% - 40px);
+  margin: 20px auto 0;
+}
+
+.el-pagination{
+  text-align: right;
+  margin: 20px auto 0;
+}
+
+.el-pagination>*:last-child{
+  margin-right: 20px
+}