完善打印功能

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,6 +226,12 @@ export default {
         jobNumber: this.selected.jobNumber,
         cellphone: this.selected.cellphone,
       };
+      this.$confirm(`确认要${this.editType ? '编辑' : '新增'}吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
           if (this.editType) {
             updateTeacher(entity)
               .then(res => {
@@ -248,6 +254,10 @@ export default {
                 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,19 +6,29 @@ 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 {
+      return;
+    }
+    // 路由已经鉴权
     if (store.getters.isRouteDone) {
-        next(); //
-      } else {
-        // if(store.getters.userInfo.loginState)
+      next();
+      return;
+    }
+    // 没有鉴权动态获取路由
     store
       .dispatch('GenerateRoutes')
       .then(() => {
@@ -33,16 +43,10 @@ router.beforeEach((to, from, next) => {
           next({ path: '/login' });
         });
       });
+    return;
   }
-    }
-  } else {
-    if (whiteList.indexOf(to.path) !== -1) {
-      next();
-    } else {
   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,
 };