完成登录页面和部分下单查询

package-lock.json

@@ -7561,6 +7561,11 @@
       "integrity": "sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "element-ui": "^2.15.1",
+    "js-cookie": "^2.2.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <navigation v-if="$route.meta.keepAlive"/>
-    <router-view/>
+    <navigation v-if="$route.meta.keepAlive" style="z-index: 10000"/>
+    <router-view style="padding-top: 62px;"/>
     <el_footer v-if="$route.meta.keepAlive"/>
    </div>
 </template>
@@ -10,6 +10,7 @@
 import navigation from './views/navigation/navigation'
 import el_footer from './views/footer/index'
 import { request } from './request/request'
+import Cookies from 'js-cookie';
 export default {
   name: 'App',
   components:{
@@ -22,7 +23,10 @@ export default {
     };
   },
   created(){
-
+    // console.log(Cookies.get('TokenKey'));
+    // if (Cookies.get('TokenKey')){
+    //   this.$router.push({ path: this.redirect || '/' });
+    // }
   },
   methods: {
 

src/request/request.js

@@ -9,9 +9,7 @@
 
 //配置文件
 import axios from 'axios';
-// import { getToken } from 'src/utils/auth';
-// import errorCode from 'src/utils/errorCode';
-// import store from 'src/store';
+import Cookies from 'js-cookie'
 import { Notification, MessageBox, Message } from 'element-ui'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 
@@ -46,35 +44,8 @@ export function request(config) {
 
   // 响应拦截
   newVar.interceptors.response.use(function (response) {
-    // 未设置状态码则默认成功状态
-    let code = res.data.code || 200;
-    // 获取错误信息
-    let msg = errorCode[code] || res.data.msg || errorCode['default']
-    if (code === 401) {
-      MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
-          confirmButtonText: '重新登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }
-      ).then(() => {
-        store.dispatch('LogOut').then(() => {
-          location.href = '/index';
-        })
-      })
-    } else if (code === 500) {
-      Message({
-        message: msg,
-        type: 'error'
-      })
-      return Promise.reject(new Error(msg))
-    } else if (code !== 200) {
-      Notification.error({
-        title: msg
-      })
-      return Promise.reject('error')
-    } else {
-      return res.data
-    }
+    // console.log(response);
+    return Promise.resolve(response);
   }, function (error) {
     // console.log('返回进入拦截失败')
     return Promise.reject(error);
@@ -84,8 +55,8 @@ export function request(config) {
   newVar.interceptors.request.use(config => {
     // 是否需要设置 token
     // const isToken = (config.headers || {}).isToken === false
-    if (getToken() && !isToken) {
-      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    if (Cookies.get('TokenKey')) {
+      config.headers['Authorization'] = 'Bearer ' + Cookies.get('TokenKey') // 让每个请求携带自定义token 请根据实际情况自行修改
     }
     return config;
   }, error => {

src/views/inquiryAndOrder/index.vue

@@ -86,23 +86,65 @@
         <button style="width: 400px;height: 0;border: none;padding: 0;"></button>
       </div>
       <div v-if="selection === '4'">
-        <el-input placeholder="请输入起运港口">
-          <template slot="prepend">起运港口</template>
-        </el-input>
-        <el-input placeholder="请输入目的港口">
-          <template slot="prepend">目的港口</template>
-        </el-input>
+        <div style="width: 400px;align-items: center;display: flex;">
+          <el-button disabled style="border: 1px solid #DCDFE6;color:#95989d;background-color: #f5f7fa;border-top-right-radius:0;border-bottom-right-radius:0">起运港口</el-button>
+          <el-select
+            v-model="portToPort.fPortofloadid"
+            filterable
+            remote
+            @change="handleQuery"
+            style="width: 100%;"
+            class="elSelect"
+            :remote-method="handleQuery"
+            placeholder="请输入模糊查找起运港口"
+          >
+            <el-scrollbar>
+              <el-option
+                v-for="(dict, index) in fMblnoOptions"
+                :key="dict.fId"
+                :label="dict.fName"
+                :value="dict.fId"
+              ></el-option>
+            </el-scrollbar>
+          </el-select>
+        </div>
+
+        <div style="width: 400px;align-items: center;display: flex;">
+          <el-button disabled style="border: 1px solid #DCDFE6;color:#95989d;background-color: #f5f7fa;border-top-right-radius:0;border-bottom-right-radius:0">目的港口</el-button>
+          <el-select
+            v-model="portToPort.fPortofloadid"
+            filterable
+            remote
+            @change="handleQuery"
+            style="width: 100%;"
+            class="elSelect"
+            :remote-method="handleQuery"
+            placeholder="请输入模糊查找目的港口"
+          >
+            <el-scrollbar>
+              <el-option
+                v-for="(dict, index) in fMblnoOptions"
+                :key="dict.fId"
+                :label="dict.fName"
+                :value="dict.fId"
+              ></el-option>
+            </el-scrollbar>
+          </el-select>
+        </div>
+<!--        <el-input placeholder="请输入目的港口" v-model="portToPort.fDistinationid">-->
+<!--          <template slot="prepend">目的港口</template>-->
+<!--        </el-input>-->
         <el-input placeholder="请输入货物名称">
           <template slot="prepend">货物名称</template>
         </el-input>
-        <el-input placeholder="请输入预计装货时间">
+        <el-input placeholder="请输入预计装货时间" v-model="portToPort.fEta">
           <template slot="prepend">预计装货时间</template>
         </el-input>
         <button class="stealthbutton"></button>
         <button class="stealthbutton"></button>
       </div>
       <div>
-        <el-button type="primary">船期查询</el-button>
+        <el-button type="primary" @click="schedule">船期查询</el-button>
       </div>
       <el-divider>查询船期</el-divider>
       <div
@@ -216,10 +258,20 @@
 </template>
 
 <script>
+import { request } from '../../request/request';
+import Cookies from 'js-cookie';
+
 export default {
   name: 'inquiryAndOrder',
   data() {
     return {
+      fMblnoOptions:[],
+      portToPort:{
+        fPortofloadid:'',
+        fDistinationid:'',
+        fEta:'',
+        portofloadidName:''
+      },
       value1: '',
       selection: '1',
       whether: false,
@@ -256,6 +308,46 @@ export default {
       console.log(key, keyPath);
       this.selection = key;
     },
+    schedule(){
+      // v-if="selection === '1'"
+      // switch (this.selection){
+      //   case '1':
+      //     break
+      //   case '2':
+      //     break
+      //   case '3':
+      //     break
+      //   case '4':
+      //     break
+      //   default:
+      //     break
+      // }
+      request({
+        url: '/shipping/voyage/freightList',
+        method: 'get',
+        params: this.portToPort
+      }).then(res => {
+        console.log(res);
+      }).catch(err => {
+        console.log(err);
+      })
+    },
+    handleQuery(){
+      // this.fMblnoOptions
+      request({
+        url: '/shipping/address/selectPortName',
+        method: 'get',
+        params: {
+          fName:this.portToPort.fPortofloadid
+        }
+      }).then(res => {
+        console.log(res);
+        this.fMblnoOptions = res.data.rows
+        console.log(this.fMblnoOptions);
+      }).catch(err => {
+        console.log(err);
+      })
+    }
   }
 };
 </script>

src/views/login/index.vue

@@ -107,7 +107,6 @@ export default {
       }).then(res => {
         console.log(res)
         this.codeUrl = "data:image/gif;base64," + res.data.img;
-        console.log(this.codeUrl);
         this.loginForm.uuid = res.uuid;
       }).catch(err => {
         console.log(err);
@@ -141,9 +140,14 @@ export default {
             method: 'post',
             data: this.loginForm
           }).then(res => {
+            // console.log(res.data.token);
             // localStorage.setItem('companyName', this.company_name);
-            // this.$router.push({ path: this.redirect || '/' });
+            Cookies.set("username",this.loginForm.username);
+            Cookies.set('TokenKey', res.data.token)
+            console.log(Cookies.get());
+            this.$router.push({ path: this.redirect || '/' });
           }).catch(err => {
+            console.log(err);
             this.loading = false;
             this.getCode();
           })

src/views/navigation/navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;display: flex;justify-content:space-around;box-shadow: 0 3px 7px 0 rgba(0,0,0,0.09);">
+  <div style="width: 100%;height: 62px;display: flex;justify-content:space-around;box-shadow: 0 3px 7px 0 rgba(0,0,0,0.09);position:fixed;left: 0;background-color: #FFFFFF">
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
@@ -50,29 +50,46 @@
         <el-menu-item index="7-6">优惠券</el-menu-item>
         <el-menu-item index="7-7">帐号管理</el-menu-item>
       </el-submenu>
-      <div style="width: 100px;margin-top: 18px;float: right;color: #909399" @click="immediately">
+      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" @click="immediately" v-if="loginStatus === false">
         登录
       </div>
+      <div style="width: 100px;margin-top: 18px;float: right;color: #909399;font-size: 15px;" v-else>
+        <span>{{ username }}</span>
+        丨
+        <span>注销</span>
+      </div>
     </el-menu>
   </div>
 </template>
 
 <script>
+import Cookies from 'js-cookie'
 export default {
   name: 'navigation',
   data() {
     return {
       activeIndex:'',
+      loginStatus:false,
+      username:''
     };
   },
   watch: {
     $route(e) {
       this.activeIndex = e.path;  // e里面的是当前路由的信息
+      console.log(e.path);
     },
   },
+  created() {
+    this.activeIndex = this.$route.path
+    if (Cookies.get('TokenKey')){
+      this.loginStatus = true
+      this.username = Cookies.get('username')
+    }
+  },
   methods: {
     handleSelect(key, keyPath) {
       this.$router.push(key);
+      console.log(keyPath);
     },
     immediately(){
       this.$router.push('/login')