修改前端

src/main/vue/bill/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: 'eslint:recommended',
+  rules: {
+    'no-console': 'off',
+  },
+};

src/main/vue/bill/src/App.vue

@@ -1,34 +1,93 @@
 <template>
   <div id="app">
     <!-- <img alt="logo" src="https://fairy8-1258530674.picsh.myqcloud.com/img/20190611100737.png" width="400px"> -->
-    <span style="color:#0081FF;font-size:22px"><b>Bills Assistant</b></span>
+    <!-- <el-row  :gutter="10"> -->
-    <!-- <HR align=center width=300 color=#987cb9 SIZE=1> -->
+    <div
-    <!-- <hr style="border:1 dashed #987cb9" width="50%" color=#ACACAC size=1/> -->
+      style="width:800px;text-align:center;align-self: center;margin: auto;top: 0;left: 0;right: 0;bottom: 0;"
-    <br/>
+    >
-    <!-- <router-link to="/login">登录页</router-link> -->
+      <!-- <div> -->
-    <p/>
+      <el-row>
-    <router-view/>
+        <!-- <el-col :span="4"><div class="grid-content bg-purple">b</div></el-col> -->
+        <el-col :span="16" :offset="4">
+          <div class="grid-content bg-purple" style="color:#0081FF;font-size:22px">Bill Assistant</div>
+        </el-col>
+        <el-col  :span="4" style="text-align:right;">
+          <el-button v-if="showLogout()" type="text" @click="logout()">登出</el-button>
+        </el-col>
+        <!-- <el-col :span="16">
+            <div>
+                <span style="color:#0081FF;font-size:22px">Bills Assistant</span>
+            </div>
+        </el-col>
+        <el-col :span="4">
+            <el-button type="text">logout</el-button>
+        </el-col>-->
+      </el-row>
+      <!-- <HR align=center width=300 color=#987cb9 SIZE=1> -->
+      <!-- <hr style="border:1 dashed #987cb9" width="50%" color=#ACACAC size=1/> -->
+      <!-- <br/> -->
+      <!-- <router-link to="/login">登录页</router-link> -->
+      <p/>
+      <router-view v-if="isRouterAlive"/>
+    </div>
     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
     <p/>
-    
+    <img
-    <img alt="footer" src="https://fairy8-1258530674.picsh.myqcloud.com/img/20190611100310.png" width="150px">
+      alt="footer"
+      src="https://fairy8-1258530674.picsh.myqcloud.com/img/20190611100310.png"
+      width="150px"
+    >
   </div>
 </template>
 
 <script>
 // import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'app',
+  name: "app",
+  provide () {
+    return {
+      reload: this.reload
+    }
+  },
+  data(){
+    return {
+      isRouterAlive: true,
+    }
+  },
+  methods: {
+    logout() {
+      console.log("logout!");
+      window.localStorage.removeItem("token");
+    //   console.log("window.localStorage:" + window.localStorage);
+      this.reload();
+    },
+    reload () {
+      this.isRouterAlive = false
+      this.$nextTick(function () {
+        this.isRouterAlive = true
+      })
+    },
+    showLogout () {
+        console.info("showLogout");
+        if (localStorage.token) {
+            console.info("showLogout:true");
+            return true;
+        }
+        else {
+            console.info("showLogout:false");
+            return false;
+        }
+    }
+  }
   /*components: {
     HelloWorld
   }*/
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/main/vue/bill/src/axios/api.request.js

@@ -8,4 +8,4 @@ const HttpRequest = axios.create({
   // 请求超时时间
   timeout: 10000
 })
-export default HttpRequest
+export default HttpRequest

src/main/vue/bill/src/axios/index.js

@@ -4,6 +4,7 @@ export default {
      */
     baseUrl: {
         dev: 'http://localhost:30000',
-        pro: 'https://bill.fairy8.cn/api'
+        pro: 'https://fairy8.cn:30443'
+        // pro: 'https://bill.fairy8.cn/api'
     }
 };

src/main/vue/bill/src/main.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from '@/router/index.js'
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import HttpRequest from '@/axios/api.request'
@@ -14,6 +13,48 @@ Vue.use(ElementUI)
 Vue.prototype.$moment = moment;
 
 
+
+
+/** 
+ * Loading实现 
+ * */
+
+
+
+let loading        //定义loading变量
+
+function startLoading() {    //使用Element loading-start 方法
+    loading = ElementUI.Loading.service({
+        lock: true,
+        text: '加载中……',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
+}
+function endLoading() {    //使用Element loading-close 方法
+    loading.close()
+}
+
+let needLoadingRequestCount = 0
+export function showFullScreenLoading() {
+    if (needLoadingRequestCount === 0) {
+        startLoading()
+    }
+    needLoadingRequestCount++
+}
+
+export function tryHideFullScreenLoading() {
+    if (needLoadingRequestCount <= 0) return
+    needLoadingRequestCount--
+    if (needLoadingRequestCount === 0) {
+        endLoading()
+    }
+}
+
+
+/**
+ * Axios 拦截器
+ */
+
 HttpRequest.interceptors.request.use(
   config => {
     // 判断token是否存在
@@ -22,6 +63,7 @@ HttpRequest.interceptors.request.use(
       config.headers.Authorization = localStorage.token
     }
     // config.headers.Authorization = "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhbGF3biIsImNyZWF0ZWQiOjE1NTg2ODY4MTk0NjcsImlhdCI6MTU1ODY4NjgxOSwiZXhwIjoxNTU5MjkxNjE5fQ.N9ZSMrStIaUyngSpvmup_akXQaueLSIX5-h4Q_fixdM"  //将token设置成请求头
+    // showFullScreenLoading()
     return config
   }, function(err) {
     return Promise.reject(err)
@@ -32,9 +74,11 @@ HttpRequest.interceptors.request.use(
 // http response 拦截器
 HttpRequest.interceptors.response.use(
     response => {
+        // tryHideFullScreenLoading()
         return response;
     },
     error => {
+        // tryHideFullScreenLoading()
         if (error.response) {
             switch (error.response.status) {
                 case 401:
@@ -49,7 +93,8 @@ HttpRequest.interceptors.response.use(
             }
         }
         return Promise.reject(error.response.data)   // 返回接口返回的错误信息
-    });
+    }
+);
 
 
 

src/main/vue/bill/src/views/Bill.vue

@@ -509,8 +509,8 @@ export default {
                                 _this.$message.error('未知错误');
                             } else {
                                 // Something happened in setting up the request that triggered an Error
-                                console.log("Error", error.message);
+                                console.log("Error", error);
-                                _this.$message.error(error.response.message);
+                                _this.$message.error(error.error);
                             }
                             console.log(error.config);
                         });

src/main/vue/bill/src/views/Gird.vue

@@ -2,16 +2,16 @@
   <div class="main">
     <div class="group">
       <el-table
+        v-loading="isGirdLoading"  
         :data="book"
         height="600px"
         style="width: 100%"
-        @cell-mouse-enter="handleMouseEnter"
+        @cell-mouse-enter="handleMouseEnter">
-      >
         <!-- highlight-current-row -->
         <!-- @current-change="handleCurrentChange" -->
         <el-table-column prop="applyDate" label="申请日期" width="150" :formatter="dateFormat"></el-table-column>
         <el-table-column prop="totalAmount" label="总金额" width="100"></el-table-column>
-        <el-table-column prop="fee" label="税费" width="100"></el-table-column>
+        <el-table-column prop="fee" label="税金（8%）" width="100"></el-table-column>
         <el-table-column prop="post.contact" label="快递地址" width="100">
           <template slot-scope="scope">
             <el-popover trigger="hover" placement="right">
@@ -102,6 +102,7 @@ export default {
   name: "Gird",
   data() {
     return {
+      isGirdLoading:true,
       isAddShow: false,
       isEditShow: false,
       isDetailShow: false,
@@ -194,10 +195,12 @@ export default {
       this.$router.push({ path: "Bill" });
     },
     refresh() {
-      fetchBooks().then(res => {
+        fetchBooks().then(res => {
-        // console.info("res.data:" + res.data);
+            // console.info("res.data:" + res.data);
-        this.book = res.data;
+            this.isGirdLoading = true;
-      });
+            this.book = res.data;
+            this.isGirdLoading = false;
+        });
     },
     handleCurrentChange(val) {
       this.focusRow = val;

src/main/vue/bill/src/views/Login.vue

@@ -1,27 +1,34 @@
 <template>
   <div class="login">
     <div class="group">
-      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
+      <el-form v-loading="disabled"  ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
         <el-form-item label="用户名" prop="username">
           <el-input v-model="ruleForm.username" clearable placeholder="请输入用户名"></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input v-model="ruleForm.password" @keyup.enter.native="onSubmit('ruleForm')" show-password placeholder="请输入密码"></el-input>
+          <el-input
+            v-model="ruleForm.password"
+            @keyup.enter.native="onSubmit('ruleForm')"
+            show-password
+            placeholder="请输入密码"
+          ></el-input>
         </el-form-item>
 
         <!-- <el-row :gutter="20"> -->
         <el-row>
-            <el-col :span="18">
+          <el-col :span="18">
-                <el-form-item>
+            <el-form-item>
-                    <el-button type="primary" @click="onSubmit('ruleForm')" :disabled="disabled">登录</el-button>
+              <el-button type="primary" @click="onSubmit('ruleForm')" :disabled="disabled">登录</el-button>
-                    <el-button @click="reset('ruleForm')">重置</el-button>
+              <el-button @click="reset('ruleForm')">重置</el-button>
-                </el-form-item>
+            </el-form-item>
-            </el-col>
+          </el-col>
-            <el-col :span="6">
+          <el-col :span="6">
-                <el-form-item label-width="50px">
+            <el-form-item label-width="50px">
-                    <span align="right"><el-link type="primary" :underline="false" href="/#/Register">注册</el-link></span>
+              <span align="right">
-                </el-form-item>
+                <el-link type="primary" :underline="false" href="/#/Register">注册</el-link>
-            </el-col>
+              </span>
+            </el-form-item>
+          </el-col>
         </el-row>
       </el-form>
     </div>
@@ -29,25 +36,25 @@
 </template>
 
 <script>
-import { login } from '../api/user.js';
+import { login } from "../api/user.js";
-import { encrypt,decrypt } from "../utils/encoder.js";
+import { encrypt, decrypt } from "../utils/encoder.js";
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     return {
       disabled: false,
       ruleForm: {
-        username: '',
+        username: "",
-        password: ''
+        password: ""
       },
       rules: {
         username: [
-          { required: true, message: '请输入户名', trigger: 'blur' },
+          { required: true, message: "请输入户名", trigger: "blur" },
-          { min: 3, max: 15, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+          { min: 3, max: 15, message: "长度在 3 到 30 个字符", trigger: "blur" }
         ],
         password: [
-          { required: true, message: '请输入密码', trigger: 'change' },
+          { required: true, message: "请输入密码", trigger: "change" },
-          { min: 3, max: 15, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+          { min: 3, max: 15, message: "长度在 3 到 30 个字符", trigger: "blur" }
         ]
       }
     };
@@ -57,21 +64,21 @@ export default {
       this.$refs[formName].validate(valid => {
         var _this = this;
         if (valid) {
-            this.disabled = true;
+          this.disabled = true;
-            /** 加密处理 */
+          /** 加密处理 */
-            var encoderStr = encrypt(this.ruleForm.password);
+          var encoderStr = encrypt(this.ruleForm.password);
-            console.log('密文:' + encoderStr);
+          console.log("密文:" + encoderStr);
-            console.log('解密:' + decrypt(encoderStr));
+          console.log("解密:" + decrypt(encoderStr));
-            this.ruleForm.password = encoderStr;
+          this.ruleForm.password = encoderStr;
-            
+
-            /** 访问登录服务 */
+          /** 访问登录服务 */
-            login(this.ruleForm)
+          login(this.ruleForm)
             .then(res => {
-              var token = 'Bearer ' + res.data.token;
+              var token = "Bearer " + res.data.token;
-              console.log('token:' + token);
+              console.log("token:" + token);
-              window.localStorage.setItem('token', token);
+              window.localStorage.setItem("token", token);
-              this.$message({ message: '登录成功', type: 'success' });
+              this.$message({ message: "登录成功", type: "success" });
-              this.$router.push({ path: 'Gird' }) 
+              this.$router.push({ path: "Gird" });
             })
             .catch(function(error) {
               // _this.$message({ message: error.response.statusText, type: 'error' });
@@ -81,7 +88,10 @@ export default {
               if (error.response) {
                 // The request was made and the server responded with a status code
                 // that falls out of the range of 2xx
-                _this.$message({ message: error.response.data.message, type: 'error' });
+                _this.$message({
+                  message: error.response.data.message,
+                  type: "error"
+                });
                 console.log(error.response.data);
                 console.log(error.response.status);
                 console.log(error.response.headers);
@@ -91,35 +101,34 @@ export default {
                 // http.ClientRequest in node.js
                 // _this.$message.error(error.request);
                 console.log(error.request);
-                _this.$message.error('未知错误');
+                _this.$message.error("未知错误");
               } else {
                 // Something happened in setting up the request that triggered an Error
                 // console.log('Error', error.message);
-                console.log('Error', error.status);
+                console.log("Error", error.status);
-                if(error.status == 401  ){
+                if (error.status == 401) {
-                     _this.$message.error('用户名或密码有误');
+                  _this.$message.error("用户名或密码有误");
-                     _this.reset('ruleForm');
+                  _this.reset("ruleForm");
-                    //  _this.ruleForm.password = '';
+                  //  _this.ruleForm.password = '';
-                }
+                } else {
-                else {
+                  //  _this.ruleForm.password = '';
-                    //  _this.ruleForm.password = '';
+                  _this.$message.error(error.status + ':' + error.message);
-                     _this.$message.error(error.status.toString() + error.message);
+                  _this.reset("ruleForm");
-                     _this.reset('ruleForm');
                 }
               }
               console.log(error.config);
               // _this.$message.error(error.response.statusText);
             });
         } else {
-          console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
     },
     reset(formName) {
-      console.log('reset')
+      console.log("reset");
       this.$refs[formName].resetFields();
-      this.$refs[formName].focus();
+    //   this.$refs[formName].focus();
       this.disabled = false;
     }
   }