add example page

src/api/table.js

+import fetch from '@/utils/fetch';
+
+export function getList(params) {
+  return fetch({
+    url: '/table/list',
+    method: 'get',
+    params
+  });
+}
+
+

src/router/index.js

@@ -16,7 +16,8 @@ const dashboard = _import('dashboard/index');
 /* error page */
 const Err404 = _import('404');
 
-const Page = _import('page/index');
+const Form = _import('page/form');
+const Table = _import('table/index');
 
 Vue.use(Router);
 
@@ -51,11 +52,20 @@ export const asyncRouterMap = [
     path: '/example',
     component: Layout,
     redirect: 'noredirect',
-    name: 'page',
-    icon: 'zonghe',
+    name: 'Example',
+    icon: 'zujian',
     children: [
-      { path: 'index', component: Page, name: 'page' }
+      { path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
     ]
   },
+  {
+    path: '/table',
+    component: Layout,
+    redirect: '/table/index',
+    name: 'Table',
+    icon: 'tubiaoleixingzhengchang',
+    noDropdown: true,
+    children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
+  },
   { path: '*', redirect: '/404', hidden: true }
 ];

src/views/dashboard/index.vue

 <template>
-    <div class="dashboard-container">
-      {{name}}
-    </div>
+  <div class="dashboard-container">
+    <div class='dashboard-text'>name:{{name}}</div>
+    <div class='dashboard-text'>role:<span v-for='role in roles' :key='role'>{{role}}</span></div>
+  </div>
 </template>
 
 <script>
@@ -16,3 +17,15 @@
       }
     }
 </script>
+
+<style rel="stylesheet/scss" lang="scss">
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+</style>

src/views/page/form.vue

+<template>
+    <div class="app-container">
+        <el-form ref="form" :model="form" label-width="80px">
+            <el-form-item label="活动名称">
+                <el-input v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="活动区域">
+                <el-select v-model="form.region" placeholder="请选择活动区域">
+                    <el-option label="区域一" value="shanghai"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="活动时间">
+                <el-col :span="11">
+                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+                </el-col>
+                <el-col class="line" :span="2">-</el-col>
+                <el-col :span="11">
+                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+                </el-col>
+            </el-form-item>
+            <el-form-item label="即时配送">
+                <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+            </el-form-item>
+            <el-form-item label="活动性质">
+                <el-checkbox-group v-model="form.type">
+                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+                    <el-checkbox label="地推活动" name="type"></el-checkbox>
+                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item label="特殊资源">
+                <el-radio-group v-model="form.resource">
+                    <el-radio label="线上品牌商赞助"></el-radio>
+                    <el-radio label="线下场地免费"></el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item label="活动形式">
+                <el-input type="textarea" v-model="form.desc"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">立即创建</el-button>
+                <el-button>取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  }
+</script>

src/views/page/index.vue

-<template>
-    <div class="login-container">
-        a
-    </div>
-</template>

src/views/table/index.vue

+<template>
+  <div class="app-container">
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
+      <el-table-column align="center" label='ID' width="95">
+        <template scope="scope">
+          {{scope.$index}}
+        </template>
+      </el-table-column>
+      <el-table-column label="Title">
+        <template scope="scope">
+          {{scope.row.title}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Author" width="110" align="center">
+        <template scope="scope">
+          <span>{{scope.row.author}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Pageviews" width="110" align="center">
+        <template scope="scope">
+          {{scope.row.pageviews}}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
+        <template scope="scope">
+          <i class="el-icon-time"></i>
+          <span>{{scope.row.display_time}}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/table';
+export default {
+  data() {
+    return {
+      list: null,
+      listLoading: true
+    }
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true;
+      getList(this.listQuery).then(response => {
+        this.list = response.data.items;
+        this.listLoading = false;
+      })
+    }
+  }
+};
+</script>