完善打印功能

src/containers/management/user/user.vue

@@ -2,10 +2,10 @@
   <div class="manage-account main-wrap">
     <el-form class="search-bar">
       <div class="grid-content">
-        <el-input v-model.trim="filters.name" placeholder="请输入姓名" clearable></el-input>
+        <el-input v-model.trim="filters.name" :maxlength="20" placeholder="请输入姓名" clearable></el-input>
       </div>
       <div class="grid-content">
-        <el-input v-model.trim="filters.department" placeholder="请输入科室" clearable></el-input>
+        <el-input v-model.trim="filters.department" :maxlength="20" placeholder="请输入科室" clearable></el-input>
       </div>
       <div class="grid-content">
         <el-select v-model="filters.isFrozen" filterable clearable placeholder="账号状态">
@@ -226,28 +226,38 @@ export default {
         jobNumber: this.selected.jobNumber,
         cellphone: this.selected.cellphone,
       };
-      if (this.editType) {
-        updateTeacher(entity)
-          .then(res => {
-            this.fetchList();
-            this.resetEditDialog();
-            this.$message.success(res.msg);
-          })
-          .catch(err => {
-            this.$message.error(err.msg || '更新失败！');
-          });
-      } else {
-        addTeacher(entity)
-          .then(res => {
-            this.fetchList();
-            this.fetchAllAuthUserList();
-            this.resetEditDialog();
-            this.$message.success(res.msg);
-          })
-          .catch(err => {
-            this.$message.error(err.msg || '新增失败！');
-          });
-      }
+      this.$confirm(`确认要${this.editType ? '编辑' : '新增'}吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          if (this.editType) {
+            updateTeacher(entity)
+              .then(res => {
+                this.fetchList();
+                this.resetEditDialog();
+                this.$message.success(res.msg);
+              })
+              .catch(err => {
+                this.$message.error(err.msg || '更新失败！');
+              });
+          } else {
+            addTeacher(entity)
+              .then(res => {
+                this.fetchList();
+                this.fetchAllAuthUserList();
+                this.resetEditDialog();
+                this.$message.success(res.msg);
+              })
+              .catch(err => {
+                this.$message.error(err.msg || '新增失败！');
+              });
+          }
+        })
+        .catch(action => {
+          console.log(action);
+        });
     },
     toggleTeacherStatus(data) {
       this.$confirm(

src/containers/print/publicCar.vue

+<template>
+  <div id="publicCarForm" class="printTableWrap">
+    <div class="tableTitle">成都师范学院公务用车审批表</div>
+    <div class="printTable">
+      <div class="tableRow">
+        <div :span="4" class="tableCell tabelCol-4">用车部门</div>
+        <div :span="10" class="tableCell tabelCol-10">{{selected.department}}</div>
+        <div :span="6" class="tableCell tabelCol-6">用车申请时间</div>
+        <div :span="4" class="tableCell tabelCol-4">{{selected.department}}</div>
+      </div>
+      <div class="tableRow">
+        <div :span="4" class="tableCell tabelCol-4">申请人</div>
+        <div :span="10" class="tableCell tabelCol-10">{{selected.name}}</div>
+        <div :span="6" class="tableCell tabelCol-6">用车人数</div>
+        <div :span="4" class="tableCell tabelCol-4">{{selected.userCount}}人</div>
+      </div>
+      <div class="tableRow">
+        <div :span="4" class="tableCell tabelCol-4">用车类型<br>（勾选）</div>
+          <div :span="20" class="tableCell tabelCol-20 tal">{{selected.categoryName}}</div>
+        </div>
+        <div class="tableRow">
+          <div :span="4" class="tableCell tabelCol-4">用车起始时间</div>
+          <div :span="20" class="tableCell tabelCol-20 tal">{{selected.beginDate}} - {{selected.endDate}}（共 {{2}} 天）</div>
+        </div>
+        <div class="tableRow">
+          <div :span="4" class="tableCell tabelCol-4">用车详细路线</div>
+          <div :span="20" class="tableCell tabelCol-20 tal">{{selected.lineDescription}}</div>
+        </div>
+        <div class="tableRow">
+          <div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div>
+            <div :span="4" class="tableCell tabelCol-12"></div>
+            <div :span="4" class="tableCell tabelCol-4">派车人</div>
+            <div :span="4" class="tableCell tabelCol-4">
+              {{selected.dealName}}<br/>
+              {{selected.carPlate}}</div>
+            </div>
+            <div class="tableRow">
+              <div :span="4" class="tableCell tabelCol-4">出车公里数</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.startKilometers}}</div>
+              <div :span="4" class="tableCell tabelCol-4">收车公里数</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.stopKilometers}}</div>
+              <div :span="4" class="tableCell tabelCol-4">实际公里数</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.trueKilometers}}</div>
+            </div>
+            <div class="tableRow">
+              <div :span="4" class="tableCell tabelCol-4">资金来源</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.priceSource}}</div>
+              <div :span="4" class="tableCell tabelCol-4">用车单价</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.price}}</div>
+              <div :span="4" class="tableCell tabelCol-4">用车金额</div>
+              <div :span="4" class="tableCell tabelCol-4">{{selected.totalPrice}}</div>
+            </div>
+            <div class="tableRow">
+              <div :span="4" class="tableCell tabelCol-4">驾驶员签字</div>
+              <div :span="8" class="tableCell tabelCol-8"></div>
+              <div :span="4" class="tableCell tabelCol-4">用车人签字</div>
+              <div :span="8" class="tableCell tabelCol-8"></div>
+            </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const {
+      query: { data },
+    } = this.$route;
+    console.log(data);
+    return {
+      selected: JSON.parse(data),
+    };
+  },
+  created() {
+    window.vmPrint = this.printHandle;
+  },
+  methods: {
+    printHandle() {
+      // window.print();
+      document.execCommand('print', false, null);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.printTableWrap {
+  color: #000;
+  border-collapse: collapse;
+  text-align: center;
+  max-width: 649px;
+  max-height: 978px;
+  text-align: center;
+  margin: 0 auto;
+  .tableTitle {
+    font-size: 20px;
+    line-height: 80px;
+  }
+  .printTable {
+    border: 1px solid #000;
+    .tal {
+      text-indent: 20px;
+      text-align: left;
+    }
+    .tableRow {
+      display: flex;
+    }
+    .tableCell {
+      padding: 10px 0;
+      border-bottom: 1px solid #000;
+      border-right: 1px solid #000;
+    }
+    .tableCell:last-child {
+      border-right: none;
+    }
+    .tableRow:last-child .tableCell {
+      border-bottom: none;
+    }
+    .tabelCol-4 {
+      width: 16.66667%;
+    }
+    .tabelCol-10 {
+      width: 41.66667%;
+    }
+    .tabelCol-6 {
+      width: 25%;
+    }
+    .tabelCol-8 {
+      width: 33.33333%;
+    }
+    .tabelCol-20 {
+      width: 83.33333%;
+    }
+    .tabelCol-12 {
+      width: 50%;
+    }
+  }
+}
+</style>

src/permission.js

@@ -6,43 +6,47 @@ import { getToken } from '@/utils/auth'; // 验权
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
-const whiteList = ['/login']; // 不重定向白名单
+const whiteList = ['/login', '/print/publicCar']; // 不重定向白名单
 
 router.beforeEach((to, from, next) => {
   NProgress.start(); // 进度条Progress
+  // 白名单直接进入
+  if (whiteList.indexOf(to.path) !== -1) {
+    next();
+    NProgress.done();
+    return;
+  }
+  // 如果有用户登陆信息
   if (getToken()) {
     if (to.path === '/login') {
       next({ path: '/' });
       NProgress.done();
-    } else {
-      if (store.getters.isRouteDone) {
-        next(); //
-      } else {
-        // if(store.getters.userInfo.loginState)
-        store
-          .dispatch('GenerateRoutes')
-          .then(() => {
-            router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
-            next({ ...to, replace: true });
-          })
-          .catch(err => {
-            console.log('验证失败,请重新登录');
-            console.log(err);
-            store.dispatch('FedLogOut').then(() => {
-              // Message.error('验证失败,请重新登录');
-              next({ path: '/login' });
-            });
-          });
-      }
+      return;
     }
-  } else {
-    if (whiteList.indexOf(to.path) !== -1) {
+    // 路由已经鉴权
+    if (store.getters.isRouteDone) {
       next();
-    } else {
-      next('/login');
-      NProgress.done();
+      return;
     }
+    // 没有鉴权动态获取路由
+    store
+      .dispatch('GenerateRoutes')
+      .then(() => {
+        router.addRoutes(store.getters.addRouters); // 动态添加可访问路由表
+        next({ ...to, replace: true });
+      })
+      .catch(err => {
+        console.log('验证失败,请重新登录');
+        console.log(err);
+        store.dispatch('FedLogOut').then(() => {
+          // Message.error('验证失败,请重新登录');
+          next({ path: '/login' });
+        });
+      });
+    return;
   }
+  next('/login');
+  NProgress.done();
 });
 
 router.afterEach(() => {

src/router/index.js

@@ -7,6 +7,7 @@ import errorPage401 from '@/containers/errorPage/401';
 import systemRoute from './system';
 import baseRoute from './baseData';
 import managementRoute from './management';
+import printPublicCarPage from '../containers/print/publicCar.vue';
 
 const _import = require('./_import_' + process.env.NODE_ENV);
 
@@ -31,6 +32,12 @@ export const constantRouterMap = [
       },
     ],
   },
+  {
+    path: '/print/publicCar',
+    component: printPublicCarPage,
+    name: 'printPublicCarPage',
+    hidden: true,
+  },
 ];
 
 export const asyncRouterMap = [

src/store/modules/user/index.js

@@ -14,7 +14,7 @@ const state = {
 
 const getters = {
   token: state => state.token,
-  userInfo: ({ token, ...other }) => other,
+  userInfo: ({ token, route, ...other }) => other,
   adminId: state => state.id,
 };