wanda-adm:feat > 基础框架搭建

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
+    <el-scrollbar>
     <router-view />
+    </el-scrollbar>
   </div>
 </template>
 

src/layout/components/Navbar/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="navbar">
+    <span class="title">万达数字化运维平台</span>
     <hamburger
       id="hamburger-container"
       :is-active="sidebar.opened"
@@ -17,10 +18,10 @@
       >
         <div class="avatar-wrapper">
           <img
-            :src="avatar+'?imageView2/1/w/80/h/80'"
+            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg"
             class="user-avatar"
           >
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
@@ -28,22 +29,7 @@
               Home
             </el-dropdown-item>
           </router-link>
-          <a
-            target="_blank"
-            href="https://github.com/armour/vue-typescript-admin-template/"
-          >
-            <el-dropdown-item>
-              Github
-            </el-dropdown-item>
-          </a>
-          <a
-            target="_blank"
-            href="https://armour.github.io/vue-typescript-admin-docs/"
-          >
-            <el-dropdown-item>
-              Docs
-            </el-dropdown-item>
-          </a>
+
           <el-dropdown-item divided>
             <span
               style="display:block;"
@@ -57,9 +43,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
+import {Component, Vue} from 'vue-property-decorator'
+import {AppModule} from '@/store/modules/app'
+import {UserModule} from '@/store/modules/user'
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
 
@@ -84,6 +70,7 @@ export default class extends Vue {
   }
 
   private toggleSideBar() {
+
     AppModule.ToggleSideBar(false)
   }
 
@@ -99,8 +86,17 @@ export default class extends Vue {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background-color: rgb(48, 65, 86);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+
+  .title {
+    float: left;
+    padding: 0 20px;
+    margin: 0 auto;
+    line-height: 46px;
+    height: 100%;
+    color:#fff;
+  }
 
   .hamburger-container {
     line-height: 46px;
@@ -109,7 +105,7 @@ export default class extends Vue {
     padding: 0 15px;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)

src/layout/components/Sidebar/index.vue

@@ -73,7 +73,7 @@ export default class extends Vue {
   }
 
   .el-scrollbar__view {
-    height: 100%
+    height:calc(100% - 50px);
   }
 
   .el-scrollbar__bar {
@@ -90,10 +90,12 @@ export default class extends Vue {
 
 <style lang="scss" scoped>
 .el-scrollbar {
-  height: 100%
+
+  height: 100%;
 }
 
 .el-menu {
+  margin-top: 50px;
   border: none;
   height: 100%;
   width: 100% !important;

src/layout/index.vue

@@ -9,8 +9,8 @@
       @click="handleClickOutside"
     />
     <sidebar class="sidebar-container" />
-    <div class="main-container">
       <navbar />
+    <div class="main-container">
       <app-main />
     </div>
   </div>

src/router.ts

@@ -110,6 +110,7 @@ export default new Router({
     {
       path: '/scene',
       component: Layout,
+      redirect: '/scene/tiepoint',
       meta: {
         title: '现场实施',
         icon: 'nested'

src/styles/index.scss

@@ -12,9 +12,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
-html {
-  height: 100%;
-}
 
 #app {
   height: 100%;

src/views/maintain/device/index.vue

@@ -1,13 +1,114 @@
 <template>
-<div>设备</div>
+  <div class="app-container">
+    demo 组件引用，接口调用
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        align="center"
+        label="ID"
+        width="95"
+      >
+        <template slot-scope="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Title">
+        <template slot-scope="scope">
+          {{ scope.row.title }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Author"
+        width="180"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span>{{ scope.row.author }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="Pageviews"
+        width="110"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ scope.row.pageviews }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        class-name="status-col"
+        label="Status"
+        width="110"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.status | statusFilter">
+            {{ scope.row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        prop="created_at"
+        label="Created at"
+        width="250"
+      >
+        <template slot-scope="scope">
+          <i class="el-icon-time" />
+          <span>{{ scope.row.timestamp | parseTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
-</script>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { getArticles } from '@/api/articles'
+import { IArticleData } from '@/api/types'
+
+@Component({
+  name: 'Table',
+  filters: {
+    statusFilter: (status: string) => {
+      const statusMap: { [key: string]: string } = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    },
+    parseTime: (timestamp: string) => {
+      return new Date(timestamp).toISOString()
+    }
+  }
+})
+export default class extends Vue {
+  private list: IArticleData[] = []
+  private listLoading = true
+  private listQuery = {
+    page: 1,
+    limit: 20
+  }
 
-<style scoped>
+  created() {
+    this.getList()
+  }
 
-</style>
+  private async getList() {
+    this.listLoading = true
+    const { data } = await getArticles(this.listQuery)
+    this.list = data.items
+    // Just to simulate the time of the request
+    setTimeout(() => {
+      this.listLoading = false
+    }, 0.5 * 1000)
+  }
+}
+</script>

src/views/project/index.vue

@@ -1,10 +1,28 @@
 <template>
-  <div>項目管理</div>
+  <div>
+    <p>用户信息接口userinfo：</p>
+    <p>name:{{ name }}</p>
+    <p>roles:
+      <span v-for="role in roles" :key="role">{{ role }}</span>
+    </p>
+  </div>
 </template>
 
-<script>
-export default {
-  name: "index"
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+import {UserModule} from "../../store/modules/user";
+
+@Component({
+  name: 'index'
+})
+export default class extends Vue {
+  get name() {
+    return UserModule.name
+  }
+
+  get roles() {
+    return UserModule.roles
+  }
 }
 </script>