修改前端

2019-06-19 11:37:21 +08:00
parent 7a3105c414
commit f5d0dc8f87
9 changed files with 200 additions and 77 deletions
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: 'eslint:recommended',
+  rules: {
+    'no-console': 'off',
+  },
+};
@@ -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>
-    <!-- <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/>
+    <!-- <el-row  :gutter="10"> -->
+    <div
+      style="width:800px;text-align:center;align-self: center;margin: auto;top: 0;left: 0;right: 0;bottom: 0;"
+    >
+      <!-- <div> -->
+      <el-row>
+        <!-- <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 alt="footer" src="https://fairy8-1258530674.picsh.myqcloud.com/img/20190611100310.png" width="150px">
+    <img
+      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;
@@ -8,4 +8,4 @@ const HttpRequest = axios.create({
  // 请求超时时间
  timeout: 10000
 })
-export default HttpRequest
+export default HttpRequest
@@ -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'
    }
 };
@@ -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)   // 返回接口返回的错误信息
-    });
+    }
+);



@@ -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);
-                                _this.$message.error(error.response.message);
+                                console.log("Error", error);
+                                _this.$message.error(error.error);
                            }
                            console.log(error.config);
                        });
@@ -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 => {
-        // console.info("res.data:" + res.data);
-        this.book = res.data;
-      });
+        fetchBooks().then(res => {
+            // console.info("res.data:" + res.data);
+            this.isGirdLoading = true;
+            this.book = res.data;
+            this.isGirdLoading = false;
+        });
    },
    handleCurrentChange(val) {
      this.focusRow = val;
@@ -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-form-item>
-                    <el-button type="primary" @click="onSubmit('ruleForm')" :disabled="disabled">登录</el-button>
-                    <el-button @click="reset('ruleForm')">重置</el-button>
-                </el-form-item>
-            </el-col>
-            <el-col :span="6">
-                <el-form-item label-width="50px">
-                    <span align="right"><el-link type="primary" :underline="false" href="/#/Register">注册</el-link></span>
-                </el-form-item>
-            </el-col>
+          <el-col :span="18">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit('ruleForm')" :disabled="disabled">登录</el-button>
+              <el-button @click="reset('ruleForm')">重置</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="50px">
+              <span align="right">
+                <el-link type="primary" :underline="false" href="/#/Register">注册</el-link>
+              </span>
+            </el-form-item>
+          </el-col>
        </el-row>
      </el-form>
    </div>
@@ -29,25 +36,25 @@
 </template>

 <script>
-import { login } from '../api/user.js';
-import { encrypt,decrypt } from "../utils/encoder.js";
+import { login } from "../api/user.js";
+import { encrypt, decrypt } from "../utils/encoder.js";
 export default {
-  name: 'Login',
+  name: "Login",
  data() {
    return {
      disabled: false,
      ruleForm: {
-        username: '',
-        password: ''
+        username: "",
+        password: ""
      },
      rules: {
        username: [
-          { required: true, message: '请输入户名', trigger: 'blur' },
-          { min: 3, max: 15, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+          { required: true, message: "请输入户名", trigger: "blur" },
+          { min: 3, max: 15, message: "长度在 3 到 30 个字符", trigger: "blur" }
        ],
        password: [
-          { required: true, message: '请输入密码', trigger: 'change' },
-          { min: 3, max: 15, message: '长度在 3 到 30 个字符', trigger: 'blur' }
+          { required: true, message: "请输入密码", trigger: "change" },
+          { 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;
-            /** 加密处理 */
-            var encoderStr = encrypt(this.ruleForm.password);
-            console.log('密文:' + encoderStr);
-            console.log('解密:' + decrypt(encoderStr));
-            this.ruleForm.password = encoderStr;
-            
-            /** 访问登录服务 */
-            login(this.ruleForm)
+          this.disabled = true;
+          /** 加密处理 */
+          var encoderStr = encrypt(this.ruleForm.password);
+          console.log("密文:" + encoderStr);
+          console.log("解密:" + decrypt(encoderStr));
+          this.ruleForm.password = encoderStr;
+
+          /** 访问登录服务 */
+          login(this.ruleForm)
            .then(res => {
-              var token = 'Bearer ' + res.data.token;
-              console.log('token:' + token);
-              window.localStorage.setItem('token', token);
-              this.$message({ message: '登录成功', type: 'success' });
-              this.$router.push({ path: 'Gird' }) 
+              var token = "Bearer " + res.data.token;
+              console.log("token:" + token);
+              window.localStorage.setItem("token", token);
+              this.$message({ message: "登录成功", type: "success" });
+              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);
-                if(error.status == 401  ){
-                     _this.$message.error('用户名或密码有误');
-                     _this.reset('ruleForm');
-                    //  _this.ruleForm.password = '';
-                }
-                else {
-                    //  _this.ruleForm.password = '';
-                     _this.$message.error(error.status.toString() + error.message);
-                     _this.reset('ruleForm');
+                console.log("Error", error.status);
+                if (error.status == 401) {
+                  _this.$message.error("用户名或密码有误");
+                  _this.reset("ruleForm");
+                  //  _this.ruleForm.password = '';
+                } else {
+                  //  _this.ruleForm.password = '';
+                  _this.$message.error(error.status + ':' + error.message);
+                  _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;
    }
  }