router添加

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
   rules: {
     // allow async-await
     'generator-star-spacing': 'off',
+    "space-before-function-paren": 0,
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }

package-lock.json

@@ -516,6 +516,38 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "is-buffer": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
+          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6004,6 +6036,11 @@
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
       "integrity": "sha512-xcinL3AuDJk7VSzsHgb9DvvIXayBbadtMZ4HFPx8rUszbW1MuNMlwYVC4zzCZ6e1sqZpnNS5ZFYOhXqA39T7LQ=="
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -6688,8 +6725,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -11893,6 +11929,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+      "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -11,13 +11,16 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "element-ui": "^2.4.7",
     "font-awesome": "^4.7.0",
+    "js-cookie": "^2.2.1",
     "node-sass": "^4.9.3",
     "normalize.css": "^8.0.0",
     "sass-loader": "^7.1.0",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,18 +1,11 @@
 <template>
   <div id="app">
-    <FlowChart></FlowChart>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import FlowChart from './components/FlowChart'
 
-export default {
-  name: 'App',
-  components: {
-    FlowChart
-  }
-}
 </script>
 
 <style>

src/api/flowchart.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+// 项目方列表
+export function queryBills(data) {
+  return request({
+    url: '/api/agency/tasksource/list',
+    method: 'post',
+    data
+  })
+}

src/components/HelloWorld.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -13,6 +13,7 @@ import '@/styles/index.scss' // global css
 
 import App from './App'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
@@ -21,6 +22,7 @@ Vue.use(ElementUI)
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
 
 Vue.use(Router)
 
@@ -8,8 +7,9 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'home',
+      component: () => import('@/views/home'),
+      meta: { title: '流程图demo' }
     }
   ]
 })

src/store/getters.js

@@ -0,0 +1,4 @@
+const getters = {
+  token: state => state.user.token
+}
+export default getters

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import getters from './getters'
+import flowchart from './modules/flowchart'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    flowchart
+  },
+  getters
+})
+
+export default store

src/store/modules/flowchart.js

@@ -0,0 +1,27 @@
+import { queryBills } from '@/api/flowchart'
+
+const flowchart = {
+  state: {
+    customer: [],
+    claims: []
+  },
+  mutations: {
+    SET_CUSTOMER: (state, customer) => {
+      state.customer = customer
+    }
+  },
+  actions: {
+    // 财务结算列表
+    getBillList({ commit }, payload = {}) {
+      return new Promise((resolve, reject) => {
+        queryBills(payload).then(res => {
+          commit('SET_CUSTOMER', res.data)
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }
+  }
+}
+export default flowchart

src/utils/auth.js

@@ -0,0 +1,43 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Agency-Admin-Token'
+const UserKey = 'Agency-Account'
+const customerServiceId = 'Agency-CustomerServiceId'
+const AgencyId = 'Agency-AgencyId'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+export function getUser() {
+  return Cookies.get(UserKey)
+}
+export function getCustomerServiceId() {
+  return Cookies.get(customerServiceId)
+}
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+export function setUser(username) {
+  return Cookies.set(UserKey, username)
+}
+export function setCustomerServiceId(id) {
+  return Cookies.set(customerServiceId, id)
+}
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+export function removeUser() {
+  return Cookies.remove(UserKey)
+}
+export function removeCustomerServiceId() {
+  return Cookies.remove(customerServiceId)
+}
+export function setAgencyId(agencyId) {
+  return Cookies.set(AgencyId, agencyId)
+}
+export function getAgencyId() {
+  return Cookies.get(AgencyId)
+}
+export function removeAgencyId() {
+  return Cookies.remove(AgencyId)
+}

src/utils/request.js

@@ -0,0 +1,74 @@
+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import { getToken, getUser } from '@/utils/auth'
+import store from '../store'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.NODE_ENV === 'development' ? process.env.BASE_API : null, // api的base_url
+  timeout: 8000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  if (store.getters.token) {
+    config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    config.headers['code'] = `PC${getUser()}` // 让每个请求携带用户名
+  }
+  return config
+}, error => {
+  // Do something with request error
+  console.log(error) // for debug
+  Promise.reject(error)
+})
+
+// response拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+     * code为非A00000是抛错
+     */
+    const res = response.data
+    if (res.code !== 'A00000') {
+      Message({
+        message: res.msg,
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      //  A00004:未登录或Token 过期了;A00002:系统繁忙，此结果一般表示系统有错，需开发人员解决
+      if (res.code === 'A00004') {
+        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          store.dispatch('FedLogOut').then(() => {
+            location.reload()// 为了重新实例化vue-router对象 避免bug
+          })
+        })
+      }
+      // A00003:业务错误
+      if (res.code === 'A00003') {
+        Message({
+          message: res.msg,
+          type: 'warning',
+          duration: 5 * 1000
+        })
+      }
+      return Promise.reject(new Error('error'))
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    Message({
+      message: error.msg ? error.msg : '请求失败，请检查网络状况',
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/home/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="home-container">
+    <FlowChart></FlowChart>
+  </div>
+</template>
+
+<script>
+import FlowChart from '@/components/FlowChart'
+
+export default {
+  name: 'App',
+  components: {
+    FlowChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.home-container {
+  height: 100%;
+}
+</style>>