增加模块

config/dev.env.js

@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"https://123456789"',
-})
+  BASE_API: '"http://manage.ai160.com/"',
+})

config/prod.env.js

@@ -1,5 +1,5 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"https://11111"',
+  BASE_API: '"http://manage.ai160.com/"',
 }

package-lock.json

@@ -856,6 +856,16 @@
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "dev": true,
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "autodll-webpack-plugin": "^0.4.2",
     "autoprefixer": "^9.5.1",
+    "axios": "^0.18.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^7.1.5",

src/api/nav1.js

@@ -0,0 +1,24 @@
+import request from '../utils/request';
+
+export function companyList() {
+  return request({
+    url: '/manageBase/company',
+    method: 'get'
+  })
+}
+
+export function setCompanyList(data) {
+  return request({
+    url: '/manageBase/company',
+    method: 'put',
+    data,
+  })
+}
+
+export function addCompanyList(data) {
+  return request({
+    url: '/manageBase/company',
+    method: 'post',
+    data,
+  })
+}

src/pages/layout/Layout.vue

@@ -3,6 +3,7 @@
     <LeftNav/>
     <div class="right-con">
       <TopTitle/>
+      <!--<Tabs/>-->
       <router-view/>
     </div>
   </div>
@@ -10,11 +11,13 @@
 <script>
 import TopTitle from './toptitle/TopTitle';
 import LeftNav from './leftnav/LeftNav';
+import Tabs from './tabs/Tabs';
 
 export default {
   components: {
     TopTitle,
-    LeftNav
+    LeftNav,
+    Tabs
   },
 }
 </script>

src/pages/layout/leftnav/LeftNav.vue

@@ -11,14 +11,32 @@
         <i class="el-icon-menu"></i>
         <span slot="title">首页</span>
       </el-menu-item>
+      <el-submenu index="/nav">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>导航</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="/nav/nav1" route="/nav/nav1">
+            <span slot="title">导航一</span>
+          </el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group>
+          <el-menu-item index="/nav/nav2" route="/nav/nav2">
+            <span slot="title">导航二</span>
+          </el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <!--
       <el-menu-item index="/nav/nav1" route="/nav/nav1">
         <i class="el-icon-menu"></i>
-        <span slot="title">导航二</span>
+        <span slot="title">导航一</span>
       </el-menu-item>
       <el-menu-item index="/nav/nav2" route="/nav/nav2">
         <i class="el-icon-setting"></i>
-        <span slot="title">导航四</span>
+        <span slot="title">导航二</span>
       </el-menu-item>
+      -->
     </el-menu>
   </div>
 </template>

src/pages/layout/tabs/Tabs.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="tabs">
+    <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
+      <el-tab-pane
+        :key="item.name"
+        v-for="(item, index) in editableTabs"
+        :label="item.title"
+        :name="item.name"
+      >
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        editableTabsValue: '',
+        editableTabs: [],
+      }
+    },
+    methods: {
+      handleTabsEdit(targetName, action) {
+        if (action === 'add') {
+          if (this.editableTabs.length > 2) {
+               this.editableTabs.forEach(item => {
+                //  console.log(item.name)
+                // if (path.indexOf(item.name) == -1) {
+
+                // }
+               })
+          } else {
+            this.editableTabs.push({
+              title: targetName.title,
+              name: targetName.url,
+            });
+            this.editableTabsValue = targetName.url;
+          }
+        }
+        if (action === 'remove') {
+          let tabs = this.editableTabs;
+          let activeName = this.editableTabsValue;
+            tabs.forEach((tab, index) => {
+              if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                  activeName = nextTab.name;
+                }
+              }
+            });
+          this.editableTabsValue = activeName;
+          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        }
+      }
+    },
+    watch: {
+      $route(to, from) {
+        const router = this.$router.options.routes;
+        const path = this.$route.path;
+        console.log(path)
+        this.editableTabsValue = path;
+        router.forEach(element => {
+            if(element.children) {
+              element.children.forEach(item => {
+                console.log(item.meta)
+                if (path.indexOf(item.meta.url) !== -1) {
+                  console.log(item.meta)
+                  this.handleTabsEdit(item.meta, 'add')
+                }
+              })
+            }
+        });
+      }
+    },
+    mounted: function () {
+      const router = this.$router.options.routes;
+      const path = this.$route.path;
+      console.log(path)
+      this.editableTabsValue = path;
+      router.forEach(element => {
+          if(element.children) {
+            element.children.forEach(item => {
+              console.log(item.meta)
+              if (path.indexOf(item.meta.url) !== -1) {
+                console.log(item.meta)
+                this.handleTabsEdit(item.meta, 'add')
+              }
+            })
+          }
+      });
+    }
+  }
+</script>
+<style lang="scss">
+  .tabs {
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid #ccc;
+    padding: 4px 0;
+    box-sizing: border-box;
+    .el-tabs--card {
+      margin: 0;
+      .el-tabs__header {
+        border: none;
+        margin: 0;
+        .el-tabs__item {
+          border: 1px solid #ccc;
+          margin: 0 5px;
+          height: 32px;
+          line-height: 32px;
+        }
+        .el-tabs__nav {
+          border: none;
+        }
+      }
+    }
+    .el-tabs__item.is-active {
+      background-color: #42b983;
+      color: #fff;
+      border-color: #42b983;
+    }
+  }
+</style>
+

src/pages/layout/toptitle/TopTitle.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="top-title">
     <el-breadcrumb separator="/">
-      <el-breadcrumb-item>您的位置：</el-breadcrumb-item>
-        <el-breadcrumb-item :to="item.url" v-for="item of breadListLast" :key="item.url">
-          {{item.title}}
-        </el-breadcrumb-item>
+      <el-breadcrumb-item :to="item.url" v-for="item of breadListLast" :key="item.url">
+        {{item.title}}
+      </el-breadcrumb-item>
     </el-breadcrumb>
     <el-dropdown>
       <div class="avator">

src/pages/login/Login.vue

@@ -65,7 +65,6 @@
             this.$store.dispatch('Login', this.loginForm).then(() => {
               alert('登录成功');
               this.$router.push({ path: '/nav/nav1' })
-              // router.push({ path: '/nav/nav1' })
             }).catch(() => {
               alert('登录失败');
             })

src/pages/nav1/Nav1.vue

@@ -1,6 +1,120 @@
 <template>
-<div>
-nav1
-</div>
+  <div>
+     <el-button type="primary" @click="addEdit">增加</el-button>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        label="id">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="姓名">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+        </template>
+      </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>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="50%"
+      center>
+      <el-form :model="form" ref="ruleForm">
+        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth" :rules="{required: true, message: '姓名不能为空'}">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="setTable('ruleForm')">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
+<script>
+  import { companyList, setCompanyList, addCompanyList } from '../../api/nav1.js';
+  import { mapGetters } from 'vuex';
+  export default {
+    data() {
+      return {
+        tableData: [],
+        dialogVisible: false,
+        form: {
+          name: '',
+          status:'DEL'
+        },
+        formLabelWidth: '120px',
+        setIndex: '',
+        title: '',
+        type: ''
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+        this.dialogVisible = true;
+        this.setIndex = index;
+        this.form.id = row.id;
+        this.title = '编辑';
+        this.type = 'set';
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        console.log(index, row);
+      },
+      setTable(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            console.log(this.form)
+            const form = this.form;
+            if(this.type == 'add') {
+              addCompanyList(form).then(res => {
+                companyList().then(res => {
+                  if(res.code == 200) {
+                    this.tableData = res.data;
+                  }
+                })
+              })
+            }else {
+              const index = this.setIndex;
+              setCompanyList(form).then(res => {
+                this.tableData[index].name = form.name;
+              });
+            }
+            this.dialogVisible = false;
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      addEdit() {
+        this.dialogVisible = true;
+        this.title = '增加';
+        this.type = 'add';
+      }
+    },
+    created () {
+      companyList().then(res => {
+        if(res.code == 200) {
+          this.tableData = res.data;
+        }
+      })
+    }
+  }
+</script>
+

src/store/getter.js

@@ -1,4 +1,5 @@
 const getters = {
-  flag: state => state.login.flag
+  flag: state => state.login.flag,
+  data: state => state.navList.data
 }
 export default getters

src/store/index.js

@@ -1,13 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import login from './modules/login'
+import navList from './modules/navList'
 import getters from './getter'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
-    login
+    login,
+    navList
   },
   getters
 })

src/store/modules/navList.js

@@ -0,0 +1,43 @@
+import { companyList, setCompanyList } from '../../api/nav1.js';
+const navList = {
+  state: {
+    data: [],
+  },
+  mutations: {
+    GET_LIST: (state, data) => {
+      state.data = data
+    },
+    SET_LIST: (state, { data, index }) => {
+      state.data[index] = data
+    }
+  },
+  actions: {
+    getCompanyList({ commit }) {
+      return new Promise((resolve, reject) => {
+        companyList().then(res => {
+           if(res.code == 200) {
+            commit('GET_LIST', res.data);
+            resolve(res.data);
+          }
+        }).catch(error => {
+          reject(error);
+        })
+      })
+    },
+    setCompanyList({commit}, { form, index }) {
+      return new Promise((resolve, reject) => {
+        setCompanyList(form).then(res => {
+           if(res.code == 200) {
+             const data = res.data;
+             commit('SET_LIST', { data, index });
+            resolve(res.data);
+          }
+        }).catch(error => {
+          reject(error);
+        })
+      })
+    }
+  }
+}
+
+export default navList

src/utils/request.js

@@ -0,0 +1,74 @@
+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+// import store from '../store'
+// import { getToken } from '@/utils/auth'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.BASE_API, // api 的 base_url
+  timeout: 5000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    config.headers['uid'] = 1
+    // if (store.getters.token) {
+    //   config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+     * code为非200是抛错 可结合自己业务进行修改
+     */
+    const res = response.data
+    if (res.code !== 200) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      //   MessageBox.confirm(
+      //     '你已被登出，可以取消继续留在该页面，或者重新登录',
+      //     '确定登出',
+      //     {
+      //       confirmButtonText: '重新登录',
+      //       cancelButtonText: '取消',
+      //       type: 'warning'
+      //     }
+      //   ).then(() => {
+      //     store.dispatch('FedLogOut').then(() => {
+      //       location.reload() // 为了重新实例化vue-router对象 避免bug
+      //     })
+      //   })
+      // }
+      // return Promise.reject('error')
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service