流程页面联调

package-lock.json

@@ -2673,6 +2673,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -3274,7 +3282,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -6098,8 +6105,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -6194,8 +6200,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
       "version": "1.1.5",
@@ -6236,7 +6241,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6384,7 +6388,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -6413,8 +6416,7 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
@@ -7515,6 +7517,11 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "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-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -8408,8 +8415,7 @@
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-      "dev": true
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
     },
     "object-is": {
       "version": "1.1.5",
@@ -10208,10 +10214,12 @@
       }
     },
     "qs": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-      "dev": true
+      "version": "6.10.5",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
+      "integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "4.3.4",
@@ -10544,6 +10552,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.3",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
+          "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -10975,7 +10991,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "clipboard": "^2.0.11",
     "core-js": "^3.6.5",
     "qrcode": "^1.5.0",
@@ -15,7 +16,9 @@
     "vant": "^3.5.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.15",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "js-cookie": "^2.2.1",
+    "qs": "^6.9.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.12",

src/api/baseUrl.js

+// 默认url
+export const BASE_API = function () {
+  return process.env.NODE_ENV === 'production' ? 'crm-app' : 'huigou'
+}

src/api/login.js

+import request from '@/utils/request'
+import { BASE_API } from '@/api/baseUrl'
+
+/**
+ * 登录
+ * @param {*} params
+ */
+export function login(data) {
+  return request({
+    url: BASE_API() + '/login',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    data: data
+  })
+}
+
+/**
+ * 登出
+ * @param {*} params
+ */
+export function logout(data) {
+  return request({
+    url: BASE_API() + '/logout',
+    method: 'post',
+    data: data
+  })
+}

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 
 import store from './store'
 import router from './router'
+import './permission'
 import './assets/styles/reset.css'
 import App from './App.vue'
 
@@ -16,7 +17,8 @@ import {
   Field,
   CellGroup,
   Picker,
-  Popup
+  Popup,
+  Toast
 } from 'vant'
 
 const app = createApp(App)
@@ -34,5 +36,6 @@ app
   .use(CellGroup)
   .use(Picker)
   .use(Popup)
+  .use(Toast)
 
 app.mount('#app')

src/permission.js

+/* eslint-disable space-before-function-paren */
+import router from './router'
+// import store from './store'
+import { getToken } from '@/utils/auth' // get token from cookie
+// import { login } from '@/api/login'
+
+// 过滤器白名单
+const whiteList = ['', ''] // no redirect whitelist
+
+router.beforeEach(async (to, from, next) => {
+  // console.log('to---', to)
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+
+  const hasToken = getToken()
+
+  if (hasToken) {
+    next()
+  } else {
+    if (to.query?.taskToken) {
+      // login({ ...to.query })
+      //   .then(async res => {
+      //     if (res.status) {
+      //       await store.dispatch('setToken', res.data.token)
+      //       store.commit('SET_USERINFO', res.data.operator || {})
+      //       next()
+      //     } else {
+      //       next('/login')
+      //     }
+      //   })
+      //   .catch(() => {
+      //     next('/login')
+      //   })
+      next()
+    } else {
+      if (whiteList.indexOf(to.path) !== -1) {
+        next('/login')
+      } else {
+        next('/login?redirect=${to.path}')
+        // return `/login?redirect=${to.path}`
+      }
+    }
+  }
+})

src/router/index.js

 import { createRouter, createWebHashHistory } from 'vue-router'
 
 export const globalRouter = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/Login.vue')
+  },
   {
     path: '',
     name: 'MonthFlow2',

src/store/actions.js

-const actions = {}
+import { login, logout } from '@/api/login'
+import { resetRouter } from '@/router'
+import { setToken, clearToken } from '@/utils/auth'
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password } = userInfo
+    return new Promise((resolve, reject) => {
+      login({ userName: username.trim(), password: password })
+        .then(response => {
+          const { data, status } = response
+          if (status !== 200) {
+            // Message.error('登录失败，请验证账号名和密码')
+            return
+          }
+          commit('SET_TOKEN', data)
+          setToken(data)
+          resolve()
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  },
+  outlogin({ commit }, token) {
+    if (token !== null) {
+      commit('SET_TOKEN', token)
+      setToken(token)
+    }
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token)
+        .then(() => {
+          commit('SET_TOKEN', '')
+          clearToken()
+          resetRouter()
+
+          resolve()
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', '')
+      clearToken()
+      resolve()
+    })
+  },
+
+  setToken({ commit }, token) {
+    return new Promise(resolve => {
+      commit('SET_TOKEN', token)
+      setToken(token)
+      resolve()
+    })
+  },
+
+  // dynamically modify permissions
+  changeRoles({ commit }, role) {
+    return new Promise(resolve => {
+      const token = role + '-token'
+      commit('SET_TOKEN', token)
+      setToken(token)
+      resolve()
+    })
+  }
+}
 
 export default actions

src/store/getters.js

 const getters = {
-  userInfo: state => state.user.userInfo
+  userInfo: state => state.userInfo,
+  token: state => state.token
 }
 
 export default getters

src/store/mutations.js

@@ -35,6 +35,12 @@ const mutations = {
   endUpload(state) {
     state.isUploading = false
     state.uploadPercent = 0
+  },
+  SET_USERINFO(state, userInfo) {
+    state.userInfo = userInfo
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
   }
 }
 

src/store/state.js

+import { getToken } from '@/utils/auth'
+
 const state = {
   isLoading: false,
   isUploading: false,
   uploadPercent: 0,
   clientWidth: '',
-  clientHeight: ''
+  clientHeight: '',
+  userInfo: {},
+  token: getToken()
 }
 
 export default state

src/store/user.js

-import router, { resetRouter } from '@/router'
-
-const state = {
-  userInfo: {}
-}
-
-const mutations = {
-  SET_USERINFO(state, userInfo) {
-    state.userInfo = userInfo
-  }
-}
-
-const actions = {
-  // user login
-  login({ commit }, userInfo) {
-    const { username, password } = userInfo
-    return new Promise((resolve, reject) => {
-      login({ userName: username.trim(), password: password })
-        .then(response => {
-          const { data, status } = response
-          if (status !== 200) {
-            // Message.error('登录失败，请验证账号名和密码')
-            return
-          }
-          commit('SET_TOKEN', data)
-          setToken(data)
-          resolve()
-        })
-        .catch(error => {
-          reject(error)
-        })
-    })
-  },
-  outlogin({ commit }, token) {
-    if (token !== null) {
-      commit('SET_TOKEN', token)
-      setToken(token)
-    }
-  },
-
-  // get user info
-  getInfo({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token)
-        .then(response => {
-          const { data } = response
-
-          if (!data) {
-            reject('获取用户失败')
-          }
-
-          commit('SET_USERINFO', data)
-          resolve(data)
-        })
-        .catch(error => {
-          reject(error)
-        })
-    })
-  },
-
-  // user logout
-  logout({ commit, state, dispatch }) {
-    return new Promise((resolve, reject) => {
-      logout(state.token)
-        .then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          removeToken()
-          resetRouter()
-
-          resolve()
-        })
-        .catch(error => {
-          reject(error)
-        })
-    })
-  },
-
-  // remove token
-  resetToken({ commit }) {
-    return new Promise(resolve => {
-      commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
-      removeToken()
-      resolve()
-    })
-  },
-
-  // dynamically modify permissions
-  changeRoles({ commit, dispatch }, role) {
-    return new Promise(async resolve => {
-      const token = role + '-token'
-
-      commit('SET_TOKEN', token)
-      setToken(token)
-
-      const { roles } = await dispatch('getInfo')
-
-      resetRouter()
-
-      resolve()
-    })
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+// 是否需要前缀
+const HEADER_TOKEN_KEY = 'X-Auth-Token'
+
+/**
+ * 获取token
+ */
+const getToken = function () {
+  return Cookies.get(HEADER_TOKEN_KEY)
+}
+/**
+ * 设置token
+ */
+const setToken = function (token) {
+  return Cookies.set(HEADER_TOKEN_KEY, token)
+}
+
+/**
+ * 删除token
+ */
+const clearToken = function () {
+  return Cookies.remove(HEADER_TOKEN_KEY)
+}
+
+export { HEADER_TOKEN_KEY, getToken, setToken, clearToken }

src/utils/index.js

@@ -5,3 +5,22 @@ export const isH5OrPc = () => {
   }
   return 'PC'
 }
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function getQueryObject(url) {
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
+}

src/utils/request.js

+import axios from 'axios'
+import Qs from 'qs'
+import { Toast } from 'vant'
+import store from '@/store'
+import router from '@/router'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: '',
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 1000 * 30, // request timeout
+  headers: {
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'application/json;charset=utf-8'
+  }
+})
+
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // do something before request is sent
+
+    if (
+      (config.url.indexOf('login') > 0 || config.headers['needFormat']) &&
+      config.data &&
+      config.headers['Content-Type'] === 'application/x-www-form-urlencoded'
+    ) {
+      config.data = Qs.stringify(config.data, {
+        arrayFormat: 'repeat'
+      })
+    }
+
+    if (store.getters.token) {
+      config.headers['X-Auth-Token'] = getToken()
+    }
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error) // for debug
+    return Promise.reject(error)
+  }
+)
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+   * If you want to get http information such as headers or status
+   * Please return  response => response
+   */
+
+  /**
+   * Determine the request status by custom code
+   * Here is just an example
+   * You can also judge the status by HTTP Status Code
+   */
+  async response => {
+    // stream形式
+    if (response.data instanceof Blob) {
+      return {
+        data: response.data,
+        type: response.headers['content-type'],
+        name: decodeURIComponent(response.headers['content-disposition'].split('=')[1]).replaceAll(
+          '"',
+          ''
+        )
+      }
+    }
+    const dataAxios = response.data
+    const { status, message, msg } = dataAxios
+    // scm接口
+    if (response.config.url.indexOf('scm') !== -1) {
+      return dataAxios
+    }
+    if (response.config.responseType === 'arraybuffer') {
+      // 刷新tonken
+      return response
+    }
+    await store.dispatch('resetToken')
+    router.replace('/login')
+    if (status === 401) {
+      Toast(msg)
+      return
+    }
+    if (status === 2) {
+      Toast(message || msg)
+      return
+    }
+    return dataAxios
+  },
+  async error => {
+    // const { data } = error.response
+    console.error('error: ', error) // for debug
+    if (`${error}`.indexOf('401') !== -1) {
+      Toast(`登录用户失效，请重新登录`)
+      await store.dispatch('resetToken')
+      router.replace('/login')
+      return
+    }
+
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/Login.vue

+<template>
+  <div class="wrapper">
+    <h1>登录失败</h1>
+  </div>
+</template>
+<script>
+import { login } from '@/api/login'
+import { getQueryObject } from '@/utils/index'
+
+export default {
+  data() {
+    return {
+      urlObj: {}
+    }
+  },
+  created() {
+    let url =
+      'http://10.0.135.139:8081#/wly/to-goods/base-setting/delivery-plan-approve?taskToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJsb2dpbk5hbWUiOiIxMDAwMjQ5NCIsImV4cCI6NDc3NjgzOTAyOSwidGFza0lkIjoiNmQ2ZWQ5YjktZTdlOS0xMWVjLWE0ZjEtMTBmMDA1YzBmNjMwIn0._83ADC4o-v04sMxIuW1mri7BdrZiM5ey03WEb7gDRe3cx7Lbi1pMOk1WHFFsUMXVxlqSEhjK7ZfP-BKhONXJdg&id=0fb1a6fb6a84b582ec552089df5e794f&taskId=6d6ed9b9-e7e9-11ec-a4f1-10f005c0f630'
+    let res = getQueryObject(url)
+    this.urlObj = res
+    this.handleLogin()
+  },
+  methods: {
+    handleLogin() {
+      login({
+        taskToken: this.urlObj.taskToken
+      }).then(resp => {
+        console.log('handleLogin', resp)
+        const { token, operator } = resp.data
+        this.$store.commit('SET_USERINFO', operator)
+        this.$store.dispatch('setToken', token).then(() => {})
+      })
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

src/views/month-flow/monthFlow.vue

@@ -79,9 +79,11 @@ export default {
   data() {
     return {
       activeNames: ['1'],
-      downloadIcon: require('@/assets/images/download@3x.png')
+      downloadIcon: require('@/assets/images/download@3x.png'),
+      urlObj: {}
     }
   },
+  created() {},
   methods: {
     onClickLeft() {}
   }

src/views/ship-approval/ShipApproval.vue

@@ -156,6 +156,8 @@
   </div>
 </template>
 <script>
+import { login } from '@/api/login'
+
 export default {
   data() {
     return {
@@ -179,6 +181,16 @@ export default {
     },
     checkDetail() {
       this.$router.push({ name: 'InvoiceOccupancyDetail' })
+    },
+    handleLogin() {
+      login({
+        taskToken: ''
+      }).then(resp => {
+        const { data } = resp
+        const { token, operator } = data
+        this.$store.commit('user/SET_USERINFO', operator)
+        this.$store.dispatch('user/setToken', token).then(() => {})
+      })
     }
   }
 }

vue.config.js

@@ -13,7 +13,17 @@ module.exports = {
       }
     }
   },
-  devServer: {},
+  devServer: {
+    proxy: {
+      '/huigou': {
+        target: 'http://10.0.135.139',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/huigou': '/crm-app' // 重写,
+        }
+      }
+    }
+  },
   productionSourceMap: false,
   configureWebpack: {
     resolve: {