7.24

.env.development

@@ -1,6 +1,6 @@
-# just a flag
-ENV = 'development'
-
-# base api
-# VUE_APP_BASE_API = '/dev-api'
-VUE_APP_BASE_API = 'http://localhost:9528/'
+# just a flag
+ENV = 'development'
+
+# base api
+# VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'https://ht.9026.com/'

src/api/contracts.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function contractsPageApi(data) {
+  return request({
+    url: '/api/Contract/search',
+    method: 'post',
+    data
+  })
+}

src/api/user.js

@@ -1,32 +1,32 @@
-import request from '@/utils/request'
-
-export function login(data) {
-  return request({
-    url: '/api/Account/login',
-    method: 'post',
-    data
-  })
-}
-
-export function getInfo(token) {
-  return request({
-    url: '/api/Contract/search',
-    method: 'post',
-    params: { token }
-  })
-}
-
-export function logout() {
-  return request({
-    url: '/vue-admin-template/user/logout',
-    method: 'post'
-  })
-}
-
-// 新增出票人
-export function addTicketdrawer(){
-  return request({
-    url:'/api/Drawer',
-    method:'post'
-  })
-}
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/api/Account/login',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo(token) {
+  return request({
+    url: '/api/Contract/search',
+    method: 'post',
+    params: { token }
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/vue-admin-template/user/logout',
+    method: 'post'
+  })
+}
+
+// 新增出票人
+export function addTicketdrawer() {
+  return request({
+    url: '/api/Drawer',
+    method: 'post'
+  })
+}

src/layout/components/Navbar.vue

@@ -1,140 +1,139 @@
-<template>
-  <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb class="breadcrumb-container" />
-
-    <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click" >
-        <div class="avatar-wrapper">
-          <img src="../../assets/img/logo.png" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown" >
-          <router-link to="/">
-            <el-dropdown-item>
-              首页
-            </el-dropdown-item>
-          </router-link>
-          <!-- <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出</span>
-          </el-dropdown-item> -->
-		  <router-link to="/login">
-		    <el-dropdown-item>
-		      退出
-		    </el-dropdown-item>
-		  </router-link>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    // async logout() {
-    //   await this.$store.dispatch('user/logout')
-    //   this.$router.push({path:'/login'})
-    // }
-  }
-}
-</script>
-
-<style lang="scss" >
-.navbar {
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, .025)
-    }
-  }
-  .right-menu .el-dropdown-menu__item{
-    padding:0 30px !important;
-  }
-  .breadcrumb-container {
-    float: left;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background .3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, .025)
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="navbar">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <breadcrumb class="breadcrumb-container" />
+
+    <div class="right-menu">
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <img src="../../assets/img/logo.png" class="user-avatar">
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              首页
+            </el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span style="display:block;">退出</span>
+          </el-dropdown-item>
+          <!-- <router-link to="/login">
+            <el-dropdown-item>
+              退出
+            </el-dropdown-item>
+          </router-link> -->
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/ActionLogout')
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+  .right-menu .el-dropdown-menu__item{
+    padding:0 30px !important;
+  }
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/permission.js

@@ -1,68 +1,69 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/utils/auth' // get token from cookie
-import getPageTitle from '@/utils/get-page-title'
-
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
-const whiteList = ['/login'] // no redirect whitelist
-
-router.beforeEach(async(to, from, next) => {
-  // start progress bar
-  NProgress.start()
-
-  // set page title
-  document.title = getPageTitle(to.meta.title)
-
-  // determine whether the user has logged in
-  const hasToken = getToken()
-
-  if (hasToken) {
-    if (to.path === '/login') {
-      // if is logged in, redirect to the home page
-      next()
-      NProgress.done()
-    }
-    else if(to.path==='/register'){
-      next()
-    }
-    else {
-      const hasGetUserInfo = store.getters.name
-      if (hasGetUserInfo) {
-        next()
-      } else {
-        try {
-          // get user info
-          await store.dispatch('user/getInfo')
-
-          next()
-        } catch (error) {
-          // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
-        }
-      }
-    }
-  } else {
-    /* has no token*/
-
-    if (whiteList.indexOf(to.path) !== -1) {
-      // in the free login whitelist, go directly
-      next()
-    } else {
-      // other pages that do not have permission to access are redirected to the login page.
-      next()
-      NProgress.done()
-    }
-  }
-})
-
-router.afterEach(() => {
-  // finish progress bar
-  NProgress.done()
-})
+import router from './router'
+import $store from './store'
+import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['/login'] // no redirect whitelist
+
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
+  // determine whether the user has logged in
+  const hasToken = getToken()
+
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next()
+      NProgress.done()
+    } else if (to.path === '/register') {
+      next()
+    } else {
+      next()
+      // const hasGetUserInfo = $store.getters.name
+      // if (hasGetUserInfo) {
+      //   next()
+      // } else {
+      // try {
+      //   // get user info
+      //   // await store.dispatch('user/getInfo')
+      //   await $store.dispatch('user/ActionUserInfo')
+
+      //   next()
+      // } catch (error) {
+      //   // remove token and go to login page to re-login
+      //   await $store.dispatch('user/resetToken')
+      //   Message.error(error || 'Has Error')
+      //   next(`/login?redirect=${to.path}`)
+      //   NProgress.done()
+      // }
+      // }
+    }
+  } else {
+    /* has no token*/
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next({
+        name: 'login'
+      })
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})

src/router/index.js

@@ -1,364 +1,364 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-/* Layout */
-import Layout from '@/layout'
-
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
-export const constantRoutes = [
-  {
-    path: '/login',
-    component: () => import('@/views/login/index'),
-    // hidden: true
-  },
-  {
-      path: '/register',
-      component: () => import('@/views/register/index'),
-      // hidden: true
-    },
-  {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
-  },
-
-  // {
-  //   path: '/',
-  //   component: Layout,
-  //   redirect: '/dashboard',
-  //   children: [{
-  //     path: 'dashboard',
-  //     name: 'Dashboard',
-  //     component: () => import('@/views/dashboard/index'),
-  //     meta: { title: '合同列表', icon: 'dashboard' }
-  //   }]
-  // },
- {
-   path: '/',
-   component: Layout,
-   redirect: '/contracts',
-   name: 'Example',
-   meta: { title: '合同列表', icon: 'el-icon-s-order' },
-   children: [
-     {
-       path: 'contracts',
-       name: 'contracts',
-      component: () => import('@/views/contracts/index'),
-      meta: { title: '合同列表',icon: 'el-icon-s-order' },
-
-      // hidden:true,
-     },
-     {
-       path: '/detail',
-       name: 'detail',
-      component: () => import('@/views/contracts/detail'),
-      meta: { title: '合同详情'},
-      hidden:true,
-      },
-     // {
-     //   path: 'contracts/addcontract',
-     //   name: 'addcontract',
-     //  component: () => import('@/views/contracts/addcontract'),
-     //  meta: { title: '上传合同' },
-     //  hidden:true
-     // },
-    {
-      path: 'contracts/addnewbill',
-      name: 'addnewbill',
-     component: () => import('@/views/contracts/addnewbill'),
-     meta: { title: '新增汇票' },
-     hidden:true
-    },
-		{
-		  path: 'contracts/billDetail',
-		  name: 'billDetail',
-		 component: () => import('@/views/contracts/billDetail'),
-		 meta: { title: '汇票详情' },
-		 hidden:true
-		},
-		{
-			path:'contracts/addcontract',
-			name:'addcontract',
-			component:()=>import('@/views/contracts/new_file'),
-			meta:{title:"新增合同"},
-			hidden:true
-		}
-   ]
- },
-
-  {
-    path: '/table',
-    component: Layout,
-    redirect: '/table',
-    name: 'Example',
-    meta: { title: '承兑人列表', icon: 'el-icon-s-help' },
-    children: [
-      {
-        path: 'table',
-        name: 'Table',
-       component: () => import('@/views/table/index'),
-       meta: { title: '承兑人列表', icon: 'el-icon-s-help' },
-      },
-      {
-        path: '/table/addAcceptor',
-        name: 'Table',
-       component: () => import('@/views/table/addAcceptor'),
-       meta: { title: '新增承兑人' },
-       hidden:true,
-      },
-      {
-        path: 'table/detail',
-        name: 'Table',
-       component: () => import('@/views/table/detail'),
-       meta: { title: '承兑人详情' },
-       hidden:true,
-      },
-    ]
-  },
-
-
-  {
-    path: '/form',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: '出票人列表', icon: 'form' }
-      },
-      {
-        path:'/form/addTicketdrawer',
-        name:'addTicketdrawer',
-        component:()=>import('@/views/form/addTicketdrawer'),
-        meta:{title:'新增出票人'},
-        hidden:true,
-      },
-			{
-			  path:'/form/detail',
-			  name:'detail',
-			  component:()=>import('@/views/form/detail'),
-			  meta:{title:'出票人详情'},
-			  hidden:true,
-			}
-    ]
-  },
-  {
-    path: '/delivery',
-    component: Layout,
-    children: [
-      {
-         path: 'index',
-        name: 'delivery',
-        component: () => import('@/views/delivery/index'),
-        meta: { title: '供应商账号', icon: 'el-icon-s-promotion' }
-      },
-      {
-        path:'/edit',
-        name:'edit',
-        component:()=>import('@/views/delivery/edit'),
-        meta:{title:'编辑'},
-        hidden:true
-      }
-    ]
-  },
-  // {
-  //   path: '/nested',
-  //   component: Layout,
-  //   redirect: '/nested/menu1',
-  //   name: 'Settlement',
-  //   meta: {
-  //     title: '供应商账号',
-  //     icon: 'nested'
-  //   },
-  //   children: [
-  //     {
-  //       path: 'menu1',
-  //       component: () => import('@/views/nested/menu1/index'), // Parent router-view
-  //       name: 'Menu1',
-  //       meta: { title: 'Menu1' },
-  //       children: [
-  //         {
-  //           path: 'menu1-1',
-  //           component: () => import('@/views/nested/menu1/menu1-1'),
-  //           name: 'Menu1-1',
-  //           meta: { title: 'Menu1-1' }
-  //         },
-  //         {
-  //           path: 'menu1-2',
-  //           component: () => import('@/views/nested/menu1/menu1-2'),
-  //           name: 'Menu1-2',
-  //           meta: { title: 'Menu1-2' },
-  //           children: [
-  //             {
-  //               path: 'menu1-2-1',
-  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-  //               name: 'Menu1-2-1',
-  //               meta: { title: 'Menu1-2-1' }
-  //             },
-  //             {
-  //               path: 'menu1-2-2',
-  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-  //               name: 'Menu1-2-2',
-  //               meta: { title: 'Menu1-2-2' }
-  //             }
-  //           ]
-  //         },
-  //         {
-  //           path: 'menu1-3',
-  //           component: () => import('@/views/nested/menu1/menu1-3'),
-  //           name: 'Menu1-3',
-  //           meta: { title: 'Menu1-3' }
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       path: 'menu2',
-  //       component: () => import('@/views/nested/menu2/index'),
-  //       name: 'Menu2',
-  //       meta: { title: 'menu2' }
-  //     }
-  //   ]
-  // },
-
-  {
-    path: '/shipments',
-    component: Layout,
-    children: [
-      {
-        path: '/shipments/index',
-        name: 'shipments',
-        component: () => import('@/views/shipments/index'),
-        meta: { title: '报表统计', icon: 'el-icon-s-marketing'},
-        },
-      {
-        path:'/shipments1',
-        name:'shipments1',
-        component: () => import('@/views/shipments/shipments1'),
-        meta:{title:'出票人分类报表'},
-        hidden:true,
-      },
-      {
-        path:'/shipments2',
-        name:'shipments2',
-        component: () => import('@/views/shipments/shipments2'),
-        meta:{title:'合同统计列表'},
-        hidden:true,
-      },
-      {
-        path:'/shipments3',
-        name:'shipments3',
-        component: () => import('@/views/shipments/shipments3'),
-        meta:{title:'供应商统计列表'},
-        hidden:true,
-      }
-
-    ]
-  },
-  {
-    path: '/management',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'management',
-        component: () => import('@/views/management/index'),
-        meta: { title: '业务管理员', icon: 'el-icon-s-management' }
-      }
-    ]
-  },
-  {
-    path: '/sucuirtyaudit',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'sucuirtyaudit',
-        component: () => import('@/views/sucuirtyaudit/index'),
-        meta: { title: '安全审计', icon: 'el-icon-s-check' },
-      },
-      {
-        path:'/annexList',
-        name:'annexList',
-        component:()=>import('@/views/sucuirtyaudit/annexList'),
-        meta:{title:'附件列表'},
-        hidden:true
-      },
-	  {
-		path:'/logdetail',
-		name:'detail',
-		component:()=>import('@/views/sucuirtyaudit/detail'),
-		meta:{title:'审计日志详情'},
-		hidden:true
-	  }
-    ]
-  },
-  {
-    path: '/databackup',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'databackup',
-        component: () => import('@/views/databackup/index'),
-        meta: { title: '数据备份', icon: 'el-icon-upload' }
-      }
-    ]
-  },
-  {
-    path: '/mine',
-    component: Layout,
-    children: [
-      {
-         path: 'index',
-       name: 'mine',
-       component: () => import('@/views/mine/index'),
-        meta: { title: '个人资料', icon: 'el-icon-s-custom' }
-      }
-    ]
-  },
-
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
-
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
-
-const router = createRouter()
-
-// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
-}
-
-export default router
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login/index')
+    // hidden: true
+  },
+  {
+    path: '/register',
+    component: () => import('@/views/register/index')
+    // hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+
+  // {
+  //   path: '/',
+  //   component: Layout,
+  //   redirect: '/dashboard',
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: '合同列表', icon: 'dashboard' }
+  //   }]
+  // },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/contracts',
+    name: 'Example',
+    meta: { title: '合同列表', icon: 'el-icon-s-order' },
+    children: [
+      {
+        path: 'contracts',
+        name: 'contracts',
+        component: () => import('@/views/contracts/index'),
+        meta: { title: '合同列表', icon: 'el-icon-s-order' }
+
+      // hidden:true,
+      },
+      {
+        path: '/detail',
+        name: 'detail',
+        component: () => import('@/views/contracts/detail'),
+        meta: { title: '合同详情' },
+        hidden: true
+      },
+      // {
+      //   path: 'contracts/addcontract',
+      //   name: 'addcontract',
+      //  component: () => import('@/views/contracts/addcontract'),
+      //  meta: { title: '上传合同' },
+      //  hidden:true
+      // },
+      {
+        path: 'contracts/addnewbill',
+        name: 'addnewbill',
+        component: () => import('@/views/contracts/addnewbill'),
+        meta: { title: '新增汇票' },
+        hidden: true
+      },
+      {
+        path: 'contracts/billDetail',
+        name: 'billDetail',
+        component: () => import('@/views/contracts/billDetail'),
+        meta: { title: '汇票详情' },
+        hidden: true
+      },
+      {
+        path: 'contracts/addcontract',
+        name: 'addcontract',
+        component: () => import('@/views/contracts/new_file'),
+        meta: { title: '新增合同' },
+        hidden: true
+      }
+    ]
+  },
+
+  {
+    path: '/table',
+    component: Layout,
+    redirect: '/table',
+    name: 'Example',
+    meta: { title: '承兑人列表', icon: 'el-icon-s-help' },
+    children: [
+      {
+        path: 'table',
+        name: 'Table',
+        component: () => import('@/views/table/index'),
+        meta: { title: '承兑人列表', icon: 'el-icon-s-help' }
+      },
+      {
+        path: '/table/addAcceptor',
+        name: 'Table',
+        component: () => import('@/views/table/addAcceptor'),
+        meta: { title: '新增承兑人' },
+        hidden: true
+      },
+      {
+        path: 'table/detail',
+        name: 'Table',
+        component: () => import('@/views/table/detail'),
+        meta: { title: '承兑人详情' },
+        hidden: true
+      }
+    ]
+  },
+
+  {
+    path: '/form',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'Form',
+        component: () => import('@/views/form/index'),
+        meta: { title: '出票人列表', icon: 'form' }
+      },
+      {
+        path: '/form/addTicketdrawer',
+        name: 'addTicketdrawer',
+        component: () => import('@/views/form/addTicketdrawer'),
+        meta: { title: '新增出票人' },
+        hidden: true
+      },
+      {
+        path: '/form/detail',
+        name: 'detail',
+        component: () => import('@/views/form/detail'),
+        meta: { title: '出票人详情' },
+        hidden: true
+      }
+    ]
+  },
+  {
+    path: '/delivery',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'delivery',
+        component: () => import('@/views/delivery/index'),
+        meta: { title: '供应商账号', icon: 'el-icon-s-promotion' }
+      },
+      {
+        path: '/edit',
+        name: 'edit',
+        component: () => import('@/views/delivery/edit'),
+        meta: { title: '编辑' },
+        hidden: true
+      }
+    ]
+  },
+  // {
+  //   path: '/nested',
+  //   component: Layout,
+  //   redirect: '/nested/menu1',
+  //   name: 'Settlement',
+  //   meta: {
+  //     title: '供应商账号',
+  //     icon: 'nested'
+  //   },
+  //   children: [
+  //     {
+  //       path: 'menu1',
+  //       component: () => import('@/views/nested/menu1/index'), // Parent router-view
+  //       name: 'Menu1',
+  //       meta: { title: 'Menu1' },
+  //       children: [
+  //         {
+  //           path: 'menu1-1',
+  //           component: () => import('@/views/nested/menu1/menu1-1'),
+  //           name: 'Menu1-1',
+  //           meta: { title: 'Menu1-1' }
+  //         },
+  //         {
+  //           path: 'menu1-2',
+  //           component: () => import('@/views/nested/menu1/menu1-2'),
+  //           name: 'Menu1-2',
+  //           meta: { title: 'Menu1-2' },
+  //           children: [
+  //             {
+  //               path: 'menu1-2-1',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
+  //               name: 'Menu1-2-1',
+  //               meta: { title: 'Menu1-2-1' }
+  //             },
+  //             {
+  //               path: 'menu1-2-2',
+  //               component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
+  //               name: 'Menu1-2-2',
+  //               meta: { title: 'Menu1-2-2' }
+  //             }
+  //           ]
+  //         },
+  //         {
+  //           path: 'menu1-3',
+  //           component: () => import('@/views/nested/menu1/menu1-3'),
+  //           name: 'Menu1-3',
+  //           meta: { title: 'Menu1-3' }
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       path: 'menu2',
+  //       component: () => import('@/views/nested/menu2/index'),
+  //       name: 'Menu2',
+  //       meta: { title: 'menu2' }
+  //     }
+  //   ]
+  // },
+
+  {
+    path: '/shipments',
+    component: Layout,
+    children: [
+      {
+        path: '/shipments/index',
+        name: 'shipments',
+        component: () => import('@/views/shipments/index'),
+        meta: { title: '报表统计', icon: 'el-icon-s-marketing' }
+      },
+      {
+        path: '/shipments1',
+        name: 'shipments1',
+        component: () => import('@/views/shipments/shipments1'),
+        meta: { title: '出票人分类报表' },
+        hidden: true
+      },
+      {
+        path: '/shipments2',
+        name: 'shipments2',
+        component: () => import('@/views/shipments/shipments2'),
+        meta: { title: '合同统计列表' },
+        hidden: true
+      },
+      {
+        path: '/shipments3',
+        name: 'shipments3',
+        component: () => import('@/views/shipments/shipments3'),
+        meta: { title: '供应商统计列表' },
+        hidden: true
+      }
+
+    ]
+  },
+  {
+    path: '/management',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'management',
+        component: () => import('@/views/management/index'),
+        meta: { title: '业务管理员', icon: 'el-icon-s-management' }
+      }
+    ]
+  },
+  {
+    path: '/sucuirtyaudit',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'sucuirtyaudit',
+        component: () => import('@/views/sucuirtyaudit/index'),
+        meta: { title: '安全审计', icon: 'el-icon-s-check' }
+      },
+      {
+        path: '/annexList',
+        name: 'annexList',
+        component: () => import('@/views/sucuirtyaudit/annexList'),
+        meta: { title: '附件列表' },
+        hidden: true
+      },
+      {
+        path: '/logdetail',
+        name: 'detail',
+        component: () => import('@/views/sucuirtyaudit/detail'),
+        meta: { title: '审计日志详情' },
+        hidden: true
+      }
+    ]
+  },
+  {
+    path: '/databackup',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'databackup',
+        component: () => import('@/views/databackup/index'),
+        meta: { title: '数据备份', icon: 'el-icon-upload' }
+      }
+    ]
+  },
+  {
+    path: '/mine',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        name: 'mine',
+        component: () => import('@/views/mine/index'),
+        meta: { title: '个人资料', icon: 'el-icon-s-custom' }
+      }
+    ]
+  },
+
+  // 404 page must be placed at the end !!!
+  { path: '*', redirect: '/404', hidden: true }
+]
+
+const createRouter = () => new Router({
+  // mode: 'history', // require service support
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router

src/store/modules/user.js

@@ -1,131 +1,175 @@
-import {
-	login,
-	logout,
-	getInfo
-} from '@/api/user'
-import {
-	getToken,
-	setToken,
-	removeToken
-} from '@/utils/auth'
-import {
-	resetRouter
-} from '@/router'
-
-const getDefaultState = () => {
-	return {
-		token: getToken(),
-		name: '',
-		avatar: '',
-		checked: ''
-	}
-}
-
-const state = getDefaultState()
-
-const mutations = {
-	RESET_STATE: (state) => {
-		Object.assign(state, getDefaultState())
-	},
-	SET_TOKEN: (state, token) => {
-		state.token = token
-	},
-	SET_NAME: (state, name) => {
-		state.name = name
-	},
-	SET_AVATAR: (state, avatar) => {
-		state.avatar = avatar
-	},
-	getAdmin: (state, data) => {
-		state.checked = data
-	},
-}
-
-const actions = {
-	getAdmin: (state, data) => {
-		state.checked = data
-	},
-	// user login
-	login({
-		commit
-	}, userInfo) {
-		const {
-			username,
-			password,
-			loginType
-		} = userInfo
-		 new Promise((resolve, reject) => {
-			login({
-				account: username.trim(),
-				password: password,
-				loginType: loginType
-			}).then(response => {
-				const {
-					data
-				} = response
-				console.log('2', data)
-				commit('SET_TOKEN', data)
-				setToken(data)
-				resolve()
-			}).catch(error => {
-				reject(error)
-			})
-		})
-	},
-
-	// get user info
-	// getInfo({ commit, state }) {
-	//   return new Promise((resolve, reject) => {
-	//     getInfo(state.token).then(response => {
-	//       const { data } = response
-
-	//       if (!data) {
-	//         return reject('Verification failed, please Login again.')
-	//       }
-
-	//       const { name, avatar } = data
-
-	//       commit('SET_NAME', name)
-	//       commit('SET_AVATAR', avatar)
-	//       resolve(data)
-	//     }).catch(error => {
-	//       reject(error)
-	//     })
-	//   })
-	// },
-
-	// user logout
-	logout({
-		commit,
-		state
-	}) {
-		return new Promise((resolve, reject) => {
-			logout(state.token).then(() => {
-				removeToken() // must remove  token  first
-				resetRouter()
-				commit('RESET_STATE')
-				resolve()
-			}).catch(error => {
-				reject(error)
-			})
-		})
-	},
-
-	// remove token
-	resetToken({
-		commit
-	}) {
-		return new Promise(resolve => {
-			removeToken() // must remove  token  first
-			commit('RESET_STATE')
-			resolve()
-		})
-	}
-}
-
-export default {
-	namespaced: true,
-	state,
-	mutations,
-	actions
-}
+import {
+  login,
+  logout,
+  getInfo
+} from '@/api/user'
+import {
+  getToken,
+  setToken,
+  removeToken,
+  setUserInfo,
+  getUserInfo,
+  removeUserInfo
+} from '@/utils/auth'
+import {
+  resetRouter
+} from '@/router'
+import $router from '@/router'
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    name: '',
+    avatar: '',
+    checked: '',
+    userInfo: getUserInfo() || {}
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_USER_INFO: (state, userInfo) => {
+    state.userInfo = userInfo
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_AVATAR: (state, avatar) => {
+    state.avatar = avatar
+  },
+  getAdmin: (state, data) => {
+    state.checked = data
+  }
+}
+
+const actions = {
+  getAdmin: (state, data) => {
+    state.checked = data
+  },
+  // 登录
+  ActionLogin({ commit }, userInfo) {
+    const { username: account } = userInfo
+    login({ account, ...userInfo }).then(res => {
+      if (res?.data) {
+        const { token, userInfo } = res?.data
+        commit('SET_TOKEN', token)
+        commit('SET_USER_INFO', userInfo)
+        setToken(token)
+        setUserInfo(userInfo)
+        $router.push({
+          path: '/'
+        })
+      }
+    })
+  },
+  // 获取用户信息
+  ActionUserInfo({ commit, dispatch }) {
+    return new Promise((resolve, reject) => {
+      if (Object.keys(state.userInfo).length > 0) {
+        resolve(state.userInfo)
+      } else if (getUserInfo()) {
+        resolve(getUserInfo)
+      } else {
+        reject()
+      }
+    })
+  },
+  // 退出登录
+  ActionLogout({ commit, dispatch }) {
+    removeToken() // must remove  token  first
+    removeUserInfo()
+    resetRouter()
+    commit('SET_TOKEN', '')
+    commit('SET_USER_INFO', {})
+    $router.push({ path: '/login' })
+  },
+  // user login
+  login({
+    commit
+  }, userInfo) {
+    const {
+      username,
+      password,
+      loginType
+    } = userInfo
+    new Promise((resolve, reject) => {
+      login({
+        account: username.trim(),
+        password: password,
+        loginType: loginType
+      }).then(response => {
+        const {
+          data
+        } = response
+        console.log('2', data)
+        commit('SET_TOKEN', data)
+        setToken(data)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // get user info
+  // getInfo({ commit, state }) {
+  //   return new Promise((resolve, reject) => {
+  //     getInfo(state.token).then(response => {
+  //       const { data } = response
+
+  //       if (!data) {
+  //         return reject('Verification failed, please Login again.')
+  //       }
+
+  //       const { name, avatar } = data
+
+  //       commit('SET_NAME', name)
+  //       commit('SET_AVATAR', avatar)
+  //       resolve(data)
+  //     }).catch(error => {
+  //       reject(error)
+  //     })
+  //   })
+  // },
+
+  // user logout
+  logout({
+    commit,
+    state
+  }) {
+    return new Promise((resolve, reject) => {
+      logout(state.token).then(() => {
+        removeToken() // must remove  token  first
+        resetRouter()
+        commit('RESET_STATE')
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+
+  // remove token
+  resetToken({
+    commit
+  }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/utils/auth.js

@@ -1,15 +1,28 @@
-import Cookies from 'js-cookie'
-
-const TokenKey = 'vue_admin_template_token'
-
-export function getToken() {
-  return Cookies.get(TokenKey)
-}
-
-export function setToken(token) {
-  return Cookies.set(TokenKey, token)
-}
-
-export function removeToken() {
-  return Cookies.remove(TokenKey)
-}
+import Cookies from 'js-cookie'
+
+const TokenKey = 'vue_admin_template_token'
+const UserInfoKey = 'vue_admin_template_user_info'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+
+export function getUserInfo() {
+  return Cookies.get(UserInfoKey)
+}
+
+export function setUserInfo(userInfo) {
+  return Cookies.set(UserInfoKey, userInfo)
+}
+
+export function removeUserInfo() {
+  return Cookies.remove(UserInfoKey)
+}

src/utils/request.js

@@ -1,107 +1,116 @@
-import axios from 'axios'
-import {
-	MessageBox,
-	Message
-} from 'element-ui'
-import store from '@/store'
-import {
-	getToken
-} from '@/utils/auth'
-
-// create an axios instance
-const service = axios.create({
-	baseURL: 'https://ht.9026.com/', // url = base url + request url
-	// withCredentials: true, // send cookies when cross-domain requests
-	timeout: 60000, // request timeout
-
-
-})
-
-// request interceptor
-service.interceptors.request.use(
-	config => {
-		// do something before request is sent
-		config.headers['Content-Type'] = 'application/json'
-		// config.headers['Content-Type']='charset=utf-8'
-		config.headers = {
-			'User-Agent-type': 'apifox/1.0.0 (https://www.apifox.cn)'
-		}
-		let string = getToken()
-		if(string){
-			let obj =JSON.parse(string)
-			console.log(obj.token,'obj')
-			config.headers['Authorization'] = obj.token
-		}
-		if (store.getters.token) {
-			// let each request carry token
-			// ['X-Token'] is a custom headers key
-			// please modify it according to the actual situation
-			let string = getToken()
-			let obj = eval('(' + string + ')')
-			config.headers['Authorization'] = obj.token
-			console.log(obj.token)
-			// config.headers['Authorization'] = getToken()
-
-		}
-		return config
-	},
-	error => {
-		// do something with request error
-		console.log(error) // for debug
-		return Promise.reject(error)
-	}
-)
-
-// response interceptor
-service.interceptors.response.use(
-	/**
-	 * If you want to get http information such as headers or status
-	 * Please return  response => response
-	 */
-
-	/**
-	 * Determine the request status by custom code
-	 * Here is just an example
-	 * You can also judge the status by HTTP Status Code
-	 */
-	response => {
-		const res = response.data
-		console.log(res)
-		// if the custom code is not 20000, it is judged as an error.
-		if (res.code !== 200) {
-			Message({
-				message: res.msg || 'Error',
-				type: 'error',
-				duration: 5 * 1000
-			})
-
-			// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-			// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-			//   // to re-login
-			//   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-			//     confirmButtonText: 'Re-Login',
-			//     cancelButtonText: 'Cancel',
-			//     type: 'warning'
-			//   }).then(() => {
-			//     store.dispatch('user/resetToken').then(() => {
-			//       location.reload()
-			//     })
-			//   })
-			// }
-			return Promise.reject(new Error(res.msg || 'Error'))
-		} else {
-			return res
-		}
-	},
-	error => {
-		console.log('err' + error) // for debug
-		Message({
-			message: error.msg,
-			type: 'error',
-			duration: 5 * 1000
-		})
-		return Promise.reject(error)
-	}
-)
-
-export default service
+import axios from 'axios'
+import {
+  MessageBox,
+  Message
+} from 'element-ui'
+import store from '@/store'
+import {
+  getToken
+} from '@/utils/auth'
+
+// create an axios instance
+const service = axios.create({
+  baseURL: `${process.env.VUE_APP_BASE_API}`, // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 10 * 1000, // request timeout
+  method: 'post',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+service.interceptors.request.use(
+  config => {
+    const token = getToken()
+    if (token) {
+      config.headers.Authorization = token
+    }
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+// // request interceptor
+// service.interceptors.request.use(
+//   config => {
+//     // do something before request is sent
+//     config.headers['Content-Type'] = 'application/json'
+//     // config.headers['Content-Type']='charset=utf-8'
+//     config.headers = {
+//       'User-Agent-type': 'apifox/1.0.0 (https://www.apifox.cn)'
+//     }
+//     const string = getToken()
+//     if (string) {
+//       const obj = JSON.parse(string)
+//       console.log(obj.token, 'obj')
+//       config.headers['Authorization'] = obj.token
+//     }
+//     if (store.getters.token) {
+//       // let each request carry token
+//       // ['X-Token'] is a custom headers key
+//       // please modify it according to the actual situation
+//       const string = getToken()
+//       const obj = eval('(' + string + ')')
+//       config.headers['Authorization'] = obj.token
+//       console.log(obj.token)
+//       // config.headers['Authorization'] = getToken()
+//     }
+//     return config
+//   },
+//   error => {
+//     // do something with request error
+//     console.log(error) // for debug
+//     return Promise.reject(error)
+//   }
+// )
+
+// response interceptor
+service.interceptors.response.use(
+  /**
+	 * If you want to get http information such as headers or status
+	 * Please return  response => response
+	 */
+
+  /**
+	 * Determine the request status by custom code
+	 * Here is just an example
+	 * You can also judge the status by HTTP Status Code
+	 */
+  response => {
+    const res = response.data
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.code !== 200) {
+      Message({
+        message: res.msg || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+
+      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      //   // to re-login
+      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+      //     confirmButtonText: 'Re-Login',
+      //     cancelButtonText: 'Cancel',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     store.dispatch('user/resetToken').then(() => {
+      //       location.reload()
+      //     })
+      //   })
+      // }
+      return Promise.reject(new Error(res.msg || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.msg,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/views/contracts/index.vue

@@ -1,471 +1,522 @@
-<template>
-	<div class="app-container">
-		<el-row type="flex" justify="space-between" style="margin-bottom: 20px">
-			<div class="grid-content bg-purple">
-				<el-input placeholder="合同名称/编号、承兑人名称或出票..." v-model="search" @change="Search" clearable
-					style="width: 100%">
-					<i slot="prefix" class="el-input__icon el-icon-search"></i>
-				</el-input>
-			</div>
-			<div class="grid-content bg-purple">
-				<el-dropdown @command="handleCommand">
-					<div class="pulldown">
-						<span class="el-dropdown-link" v-if="!status"> 合同状态 </span>
-						<span class="el-dropdown-link" v-if="status">
-							{{ status }}
-						</span>
-						<i class="el-icon-arrow-down el-icon--right"></i>
-					</div>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
-						<el-dropdown-item command="正常">正常</el-dropdown-item>
-						<el-dropdown-item command="删除">删除</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-			</div>
-			<div class="grid-content bg-purple">
-				<el-dropdown @command="handlehpCommand">
-					<div class="pulldown">
-						<span class="el-dropdown-link" v-if="!hpstatus"> 汇票状态 </span>
-						<span class="el-dropdown-link" v-if="hpstatus">
-							{{ hpstatus }}
-						</span>
-						<i class="el-icon-arrow-down el-icon--right"></i>
-					</div>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
-						<el-dropdown-item command="正常">正常</el-dropdown-item>
-						<el-dropdown-item command="删除">删除</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-			</div>
-			<div class="grid-content bg-purple">
-				<el-dropdown @command="handleCommandAuditstatus">
-					<div class="pulldown">
-						<span class="el-dropdown-link" v-if="!Auditstatus"> 审核状态 </span>
-						<span class="el-dropdown-link" v-if="Auditstatus">
-							{{ Auditstatus }}
-						</span>
-						<i class="el-icon-arrow-down el-icon--right"></i>
-					</div>
-					<el-dropdown-menu slot="dropdown">
-						<el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
-						<el-dropdown-item command="待审核">待审核</el-dropdown-item>
-						<el-dropdown-item command="成功">成功</el-dropdown-item>
-						<el-dropdown-item command="失败">失败</el-dropdown-item>
-					</el-dropdown-menu>
-				</el-dropdown>
-			</div>
-			<div class="grid-content bg-purple">
-				<div class="block">
-					<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
-						start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd">
-					</el-date-picker>
-				</div>
-			</div>
-		</el-row>
-		
-		<el-table v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border fit
-			highlight-current-row @select="handleSelectionChange"  @select-all="handleAll">
-			<el-table-column align="center" label="" width="55" type="selection">
-			</el-table-column>
-			<el-table-column label="合同名称" align="center" prop="name">
-			</el-table-column>
-			<el-table-column label="合同编号" align="center" prop="contractNo" width="155">
-			</el-table-column>
-			<el-table-column label="承兑人" align="center" prop="acceptorName">
-			</el-table-column>
-			<el-table-column label="出票人" align="center" prop="drawersName">
-			</el-table-column>
-			<el-table-column label="汇票状态" align="center" prop="draftStatusText">
-			</el-table-column>
-			<el-table-column label="合同状态" align="center" prop="contractStatusText">
-			</el-table-column>
-			<el-table-column class-name="status-col" label="审核状态" align="center" prop="statusText">
-			</el-table-column>
-			<el-table-column align="center" label="时间" prop="createdAt" width="155">
-			</el-table-column>
-			<el-table-column align="center" prop="created_at" label="操作" width="250">
-				<template slot-scope="scope">
-					<el-tag type="primary" style="cursor: pointer" @click="tapDetail(scope.row.id)">查看详情</el-tag>
-					<el-tag type="success" style="cursor: pointer"  v-if="checked == 0" @click="Ssuccessed(scope.row.id)">
-						审核成功</el-tag>
-					<el-tag type="danger" style="cursor: pointer"  v-if="checked == 0" @click="Sfailed(scope.row.id)">审核失败
-					</el-tag>
-					<el-tag type="success" style="cursor: pointer" v-if="checked == 1">恢复
-					</el-tag>
-					<el-tag type="danger" style="cursor: pointer" v-if="checked == 1">删除</el-tag>
-				</template>
-			</el-table-column>
-		</el-table>
-		<div style="display: flex;justify-content: space-between;">
-			<el-row type="flex" justify="space-between" >
-				<div class="btn" style="display: flex; justify-content: flex-end">
-					<el-button type="primary" @click="addNewContract" v-if="checked == 1">上传合同</el-button>
-					<el-button type="primary" v-if="checked == 0" @click="failed">审核失败</el-button>
-					<el-button type="primary" v-if="checked == 0" @click="successed">审核成功</el-button>
-					<el-button type="primary" @click="Exports">批量导出</el-button>
-					<el-button type="success" @click="recover">恢复</el-button>
-					<el-button type="danger" @click="deleted">删除</el-button>
-				</div>
-			</el-row>
-			<div class="pagesip">
-				<el-button type="primary" size="small"
-					style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpFirstPage">首页
-				</el-button>
-				<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next"
-					:total="list.length" :page-size="10" prev-text="上一页" next-text="下一页" :hide-on-single-page="false"
-					ref="pagination">
-				</el-pagination>
-				<el-button type="primary" size="small"
-					style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpLastPage">尾页
-				</el-button>
-			</div>
-		</div>
-		
-	</div>
-</template>
-
-<script>
-	import {
-		getList
-	} from "@/api/table";
-	import {
-		dataConversionUtil
-	} from '../../utils/Excel.js'
-	export default {
-		filters: {
-			statusFilter(status) {
-				const statusMap = {
-					published: "success",
-					draft: "gray",
-					deleted: "danger",
-				};
-				return statusMap[status];
-			},
-		},
-		mounted() {
-			this.checked = this.$store.state.user.checked;
-			this.$request({
-				url: "/api/Contract/search",
-				method: "post",
-				data: {
-					pageIndex: 1,
-					pageSize: 100,
-				},
-			}).then((res) => {
-				console.log(res);
-				this.list = res.data.result;
-				this.getPageData();
-			});
-		},
-		data() {
-			return {
-				srcList: [],
-				list: [],
-				temporaryList: [],
-				listLoading: false,
-				status: "",
-				hpstatus: "",
-				Auditstatus: "",
-				search: "",
-				currentPage: 1,
-				pagesize: 10,
-				checked: "",
-				pickerOptions: {
-					shortcuts: [{
-							text: "最近一周",
-							onClick(picker) {
-								const end = new Date();
-								const start = new Date();
-								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-								picker.$emit("pick", [start, end]);
-							},
-						},
-						{
-							text: "最近一个月",
-							onClick(picker) {
-								const end = new Date();
-								const start = new Date();
-								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-								picker.$emit("pick", [start, end]);
-							},
-						},
-						{
-							text: "最近三个月",
-							onClick(picker) {
-								const end = new Date();
-								const start = new Date();
-								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-								picker.$emit("pick", [start, end]);
-							},
-						},
-					],
-				},
-				value2: "",
-			};
-		},
-		created() {},
-		methods: {
-			addNewContract() {
-				this.$router.push({
-					path: "contracts/addcontract",
-				});
-			},
-			tapDetail(id) {
-				console.log(id)
-				this.$router.push({
-					path: "/detail",
-					query: {
-						id: id
-					}
-				});
-			},
-			successed() {
-				// let successed = this.list.filter(item => item.id == id)
-				let ids=Array.from(this.multipleSelection,({id})=>id)
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids: ids,
-						operateType: 3
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			Ssuccessed(id){
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids:[id],
-						operateType: 3
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			failed() {
-				// let failed = this.list.filter(item => item.id == id)
-				let ids=Array.from(this.multipleSelection,({id})=>id)
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids: ids,
-						operateType: 4
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			Sfailed(id){
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids: [id],
-						operateType: 4
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			recover(id) {
-				let ids=Array.from(this.multipleSelection,({id})=>id)
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids: ids,
-						operateType: 2
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			deleted(){
-				let ids=Array.from(this.multipleSelection,({id})=>id)
-				this.$request({
-					url: '/api/Contract/manage',
-					method: 'post',
-					data: {
-						ids: ids,
-						operateType: 1
-					}
-				}).then((res) => {
-					if(res.code==200){
-						this.$message({
-							type:'success',
-							message:res.msg
-						})
-					}else{
-						this.$message({
-							type:'danger',
-							message:res.msg
-						})
-					}
-				})
-			},
-			handleCommand(command) {
-				this.status = command;
-				if (this.status == "正常" || this.status == "删除") {
-					this.temporaryList = this.srcList.filter(item => item.contractStatusText == this.status)
-				} else {
-					this.temporaryList = this.srcList
-				}
-			},
-			handlehpCommand(command) {
-				this.hpstatus = command;
-				if (this.hpstatus == "正常" || this.hpstatus == "删除") {
-					this.temporaryList = this.srcList.filter(item => item.draftStatusText == this.hpstatus)
-				} else {
-					this.temporaryList = this.srcList
-				}
-			},
-			handleCommandAuditstatus(command) {
-				this.Auditstatus = command;
-				if (this.Auditstatus == "成功" || this.Auditstatus == "失败" || this.Auditstatus == "待审核") {
-					this.temporaryList = this.srcList.filter(item => item.statusText == this.Auditstatus)
-				} else {
-					this.temporaryList = this.srcList
-				}
-			},
-			handleSelectionChange(data) {
-				this.multipleSelection = data;
-				console.log(this.multipleSelection);
-			},
-			handleAll(data) {
-				this.multipleSelection = data
-				console.log(this.multipleSelection)
-			},
-			handleCurrentChange(val) {
-				this.currentPage = val;
-				this.getPageData();
-			},
-			jumpFirstPage() {
-				this.$refs.pagination.handleCurrentChange(1);
-				this.$emit("handleCurrentChange", 1);
-			},
-			jumpLastPage() {
-				let font = this.$refs.pagination;
-				let cpage = Math.ceil(font.total / font.pageSize);
-				font.handleCurrentChange(cpage);
-			},
-			getPageData() {
-				let start = (this.currentPage - 1) * this.pagesize;
-				let end = start + this.pagesize;
-				this.srcList = this.list.slice(start, end);
-				this.temporaryList = this.srcList
-			},
-			Search() {
-				if (this.search == "") {
-					this.temporaryList = this.srcList
-				} else {
-					this.temporaryList = this.list.filter(item => item.name == this.search || item.contractNo == this
-						.search || item.acceptorName == this.search || item.drawersName == this.search)
-				}
-			},
-			Exports() {
-				var tableHeader = [
-					['序号', '合同名称', '合同编号', '承兑人', '出票人', '汇票状态', '合同状态', '审核状态', '时间'],
-				]
-				var dataList = []
-				this.multipleSelection.forEach((item, index) => {
-					dataList.push([index + 1, item.name, item.contractNo, item.acceptorName, item.drawersName, item
-						.draftStatusText, item.contractStatusText, item.statusText, item.createdAt
-					]);
-				})
-				dataConversionUtil.dataToExcel('合同列表', tableHeader, dataList)
-				this.$message.success('导出成功!');
-			},
-			
-		},
-	};
-</script>
-<style lang="scss">
-	.pulldown {
-		width: 185px;
-		height: 40px;
-		border: 1px solid #e8e8e8;
-		border-radius: 10px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 20px;
-		color: #999999;
-	}
-
-	.pagesip {
-		width: 100%;
-		margin: 20px auto;
-		padding-right: 50px;
-		display: flex;
-		// align-items: center;
-		justify-content: flex-end;
-	}
-
-	.el-pagination.is-background .el-pager li:not(.disabled).active {
-		background-color: #d8ab5a;
-	}
-
-	.el-col {
-		margin-bottom: 20px;
-	}
-	.btn{
-		padding: 20px;
-	}
-</style>
+<template>
+  <div class="app-container">
+    <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
+      <div class="grid-content bg-purple">
+        <el-input
+          v-model="search"
+          placeholder="合同名称/编号、承兑人名称或出票..."
+          clearable
+          style="width: 100%"
+          @change="Search"
+        >
+          <i slot="prefix" class="el-input__icon el-icon-search" />
+        </el-input>
+      </div>
+      <div class="grid-content bg-purple">
+        <el-dropdown @command="handleCommand">
+          <div class="pulldown">
+            <span v-if="!status" class="el-dropdown-link"> 合同状态 </span>
+            <span v-if="status" class="el-dropdown-link">
+              {{ status }}
+            </span>
+            <i class="el-icon-arrow-down el-icon--right" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
+            <el-dropdown-item command="正常">正常</el-dropdown-item>
+            <el-dropdown-item command="删除">删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="grid-content bg-purple">
+        <el-dropdown @command="handlehpCommand">
+          <div class="pulldown">
+            <span v-if="!hpstatus" class="el-dropdown-link"> 汇票状态 </span>
+            <span v-if="hpstatus" class="el-dropdown-link">
+              {{ hpstatus }}
+            </span>
+            <i class="el-icon-arrow-down el-icon--right" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
+            <el-dropdown-item command="正常">正常</el-dropdown-item>
+            <el-dropdown-item command="删除">删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="grid-content bg-purple">
+        <el-dropdown @command="handleCommandAuditstatus">
+          <div class="pulldown">
+            <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
+            <span v-if="Auditstatus" class="el-dropdown-link">
+              {{ Auditstatus }}
+            </span>
+            <i class="el-icon-arrow-down el-icon--right" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
+            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
+            <el-dropdown-item command="成功">成功</el-dropdown-item>
+            <el-dropdown-item command="失败">失败</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="grid-content bg-purple">
+        <div class="block">
+          <el-date-picker
+            v-model="value2"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd"
+          />
+        </div>
+      </div>
+    </el-row>
+
+    <el-table
+      v-loading="listLoading"
+      :data="temporaryList"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+      @select="handleSelectionChange"
+      @select-all="handleAll"
+    >
+      <el-table-column align="center" label="" width="55" type="selection" />
+      <el-table-column label="合同名称" align="center" prop="name" />
+      <el-table-column label="合同编号" align="center" prop="contractNo" width="155" />
+      <el-table-column label="承兑人" align="center" prop="acceptorName" />
+      <el-table-column label="出票人" align="center" prop="drawersName" />
+      <el-table-column label="汇票状态" align="center" prop="draftStatusText" />
+      <el-table-column label="合同状态" align="center" prop="contractStatusText" />
+      <el-table-column class-name="status-col" label="审核状态" align="center" prop="statusText" />
+      <el-table-column align="center" label="时间" prop="createdAt" width="155" />
+      <el-table-column align="center" prop="created_at" label="操作" width="250">
+        <template slot-scope="scope">
+          <el-tag type="primary" style="cursor: pointer" @click="tapDetail(scope.row.id)">查看详情</el-tag>
+          <el-tag v-if="checked === 0" type="success" style="cursor: pointer" @click="Ssuccessed(scope.row.id)">
+            审核成功</el-tag>
+          <el-tag v-if="checked === 0" type="danger" style="cursor: pointer" @click="Sfailed(scope.row.id)">审核失败
+          </el-tag>
+          <el-tag v-if="checked === 1" type="success" style="cursor: pointer">恢复
+          </el-tag>
+          <el-tag v-if="checked === 1" type="danger" style="cursor: pointer">删除</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="display: flex;justify-content: space-between;">
+      <el-row type="flex" justify="space-between">
+        <div class="btn" style="display: flex; justify-content: flex-end">
+          <el-button v-if="checked === 1" type="primary" @click="addNewContract">上传合同</el-button>
+          <el-button v-if="checked === 0" type="primary" @click="failed">审核失败</el-button>
+          <el-button v-if="checked === 0" type="primary" @click="successed">审核成功</el-button>
+          <el-button type="primary" @click="Exports">批量导出</el-button>
+          <el-button type="success" @click="recover">恢复</el-button>
+          <el-button type="danger" @click="deleted">删除</el-button>
+        </div>
+      </el-row>
+      <div class="pagesip">
+        <el-button
+          type="primary"
+          size="small"
+          style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
+          @click="jumpFirstPage"
+        >首页
+        </el-button>
+        <el-pagination
+          ref="pagination"
+          background
+          layout="prev, pager, next"
+          :total="list.length"
+          :page-size="10"
+          prev-text="上一页"
+          next-text="下一页"
+          :hide-on-single-page="false"
+          @current-change="handleCurrentChange"
+        />
+        <el-button
+          type="primary"
+          size="small"
+          style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
+          @click="jumpLastPage"
+        >尾页
+        </el-button>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {
+  dataConversionUtil
+} from '../../utils/Excel.js'
+import { contractsPageApi } from '@/api/contracts'
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'gray',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      srcList: [],
+      list: [],
+      temporaryList: [],
+      listLoading: false,
+      status: '',
+      hpstatus: '',
+      Auditstatus: '',
+      search: '',
+      currentPage: 1,
+      pagesize: 10,
+      checked: '',
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        },
+        {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }
+        ]
+      },
+      value2: '',
+      filter: {
+        current: 1,
+        size: 10
+      },
+      pagination: {
+        current: 0,
+        total: 0,
+        pageSize: 10
+      }
+    }
+  },
+  mounted() {
+    this.checked = this.$store.state.user.checked
+    // this.$request({
+    //   url: '/api/Contract/search',
+    //   method: 'post',
+    //   data: {
+    //     pageIndex: 1,
+    //     pageSize: 100
+    //   }
+    // }).then((res) => {
+    //   console.log(res)
+    //   this.list = res.data.result
+    //   this.getPageData()
+    // })
+    this.loadData()
+  },
+  methods: {
+    loadData(filtter = {}) {
+      const params = {
+        ...this.filter,
+        ...filtter
+      }
+      contractsPageApi(params).then(res => {
+        const { data } = res
+        this.filter = params
+        this.temporaryList = data.result
+        this.pagination = {
+          ...this.pagination,
+          current: params.current,
+          pageSize: params.size,
+          total: data.total
+        }
+      })
+    },
+    addNewContract() {
+      this.$router.push({
+        path: 'contracts/addcontract'
+      })
+    },
+    tapDetail(id) {
+      console.log(id)
+      this.$router.push({
+        path: '/detail',
+        query: {
+          id: id
+        }
+      })
+    },
+    successed() {
+      // let successed = this.list.filter(item => item.id === id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: ids,
+          operateType: 3
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    Ssuccessed(id) {
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: [id],
+          operateType: 3
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    failed() {
+      // let failed = this.list.filter(item => item.id === id)
+      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: ids,
+          operateType: 4
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    Sfailed(id) {
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: [id],
+          operateType: 4
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    recover(id) {
+      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: ids,
+          operateType: 2
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    deleted() {
+      const ids = Array.from(this.multipleSelection, ({ id }) => id)
+      this.$request({
+        url: '/api/Contract/manage',
+        method: 'post',
+        data: {
+          ids: ids,
+          operateType: 1
+        }
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+        } else {
+          this.$message({
+            type: 'danger',
+            message: res.msg
+          })
+        }
+      })
+    },
+    handleCommand(command) {
+      this.status = command
+      if (this.status === '正常' || this.status === '删除') {
+        this.temporaryList = this.srcList.filter(item => item.contractStatusText === this.status)
+      } else {
+        this.temporaryList = this.srcList
+      }
+    },
+    handlehpCommand(command) {
+      this.hpstatus = command
+      if (this.hpstatus === '正常' || this.hpstatus === '删除') {
+        this.temporaryList = this.srcList.filter(item => item.draftStatusText === this.hpstatus)
+      } else {
+        this.temporaryList = this.srcList
+      }
+    },
+    handleCommandAuditstatus(command) {
+      this.Auditstatus = command
+      if (this.Auditstatus === '成功' || this.Auditstatus === '失败' || this.Auditstatus === '待审核') {
+        this.temporaryList = this.srcList.filter(item => item.statusText === this.Auditstatus)
+      } else {
+        this.temporaryList = this.srcList
+      }
+    },
+    handleSelectionChange(data) {
+      this.multipleSelection = data
+      console.log(this.multipleSelection)
+    },
+    handleAll(data) {
+      this.multipleSelection = data
+      console.log(this.multipleSelection)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getPageData()
+    },
+    jumpFirstPage() {
+      this.$refs.pagination.handleCurrentChange(1)
+      this.$emit('handleCurrentChange', 1)
+    },
+    jumpLastPage() {
+      const font = this.$refs.pagination
+      const cpage = Math.ceil(font.total / font.pageSize)
+      font.handleCurrentChange(cpage)
+    },
+    getPageData() {
+      const start = (this.currentPage - 1) * this.pagesize
+      const end = start + this.pagesize
+      this.srcList = this.list.slice(start, end)
+      this.temporaryList = this.srcList
+    },
+    Search() {
+      if (this.search === '') {
+        this.temporaryList = this.srcList
+      } else {
+        this.temporaryList = this.list.filter(item => item.name === this.search || item.contractNo === this
+          .search || item.acceptorName === this.search || item.drawersName === this.search)
+      }
+    },
+    Exports() {
+      var tableHeader = [
+        ['序号', '合同名称', '合同编号', '承兑人', '出票人', '汇票状态', '合同状态', '审核状态', '时间']
+      ]
+      var dataList = []
+      this.multipleSelection.forEach((item, index) => {
+        dataList.push([index + 1, item.name, item.contractNo, item.acceptorName, item.drawersName, item
+          .draftStatusText, item.contractStatusText, item.statusText, item.createdAt
+        ])
+      })
+      dataConversionUtil.dataToExcel('合同列表', tableHeader, dataList)
+      this.$message.success('导出成功!')
+    }
+
+  }
+}
+</script>
+<style lang="scss">
+	.pulldown {
+		width: 185px;
+		height: 40px;
+		border: 1px solid #e8e8e8;
+		border-radius: 10px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 20px;
+		color: #999999;
+	}
+
+	.pagesip {
+		width: 100%;
+		margin: 20px auto;
+		padding-right: 50px;
+		display: flex;
+		// align-items: center;
+		justify-content: flex-end;
+	}
+
+	.el-pagination.is-background .el-pager li:not(.disabled).active {
+		background-color: #d8ab5a;
+	}
+
+	.el-col {
+		margin-bottom: 20px;
+	}
+	.btn{
+		padding: 20px;
+	}
+</style>

src/views/login/index.vue

@@ -1,432 +1,459 @@
-<template>
-  <div class="login-container">
-    <el-row>
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="flex1">
-          <el-image :src="src" style="width: 299px; height: 211px"></el-image>
-        </el-col>
-        <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10" class="flex1">
-          <div>
-            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-              label-position="left">
-
-              <div class="title-container">
-                <h3 class="title">登录</h3>
-              </div>
-              <div class="checkbox flex1">
-                <div class="business " @click="checked=0" :class="checked==0 ? 'bnesper' : 'actbnes' ">
-                  <p class="asp">业务人员</p>
-                </div>
-                <div class="business " @click="checked=1" :class="checked==1 ? 'applyper' : 'actapp' ">
-                  <p class="asp">供应商</p>
-                </div>
-              </div>
-              <el-form-item prop="username">
-                <span class="svg-container"> 账户 </span>
-                <el-input ref="username" v-model="loginForm.username" placeholder="请输入账户名称" name="username" type="text"
-                  tabindex="1" auto-complete="on" />
-              </el-form-item>
-
-              <el-form-item prop="password">
-                <span class="svg-container">
-                  密码
-                </span>
-                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-                  placeholder="请输入密码" name="password" tabindex="2" auto-complete="on"
-                  @keyup.enter.native="handleLogin" />
-                <span class="show-pwd" @click="showPwd">
-                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-                </span>
-              </el-form-item>
-
-              <div class="registerbtn flex2">
-                <div class="forgect" @click.stop="registerNum">
-                  <p class="nes">新用户注册</p>
-                </div>
-                <div class="forgect" @click="open">
-                  <p class="asp">忘记密码？</p>
-                </div>
-              </div>
-              <el-button :loading="loading" type="primary" class="loginbtn" @click.native.prevent="handleLogin">登录
-              </el-button>
-            </el-form>
-          </div>
-        </el-col>
-      </el-col>
-
-    </el-row>
-  </div>
-</template>
-
-<script>
-  let that
-  import {
-    validUsername
-  } from '@/utils/validate'
-  import logo from '/src/assets/img/logo.png'
-  export default {
-    name: 'Login',
-    data() {
-      const validateUsername = (rule, value, callback) => {
-        if (value.length ==0) {
-          callback(new Error('请输入账户名称'))
-        } else {
-          callback()
-        }
-      }
-      const validatePassword = (rule, value, callback) => {
-        if (value.length < 6) {
-          callback(new Error('请输入大于6位数密码'))
-        } else {
-          callback()
-        }
-      }
-      const validateloginType = (rule, value, callback) => {
-
-      }
-      return {
-        loginForm: {
-          username: '78',
-          password: '18382065209',
-          loginType:0
-        },
-        loginRules: {
-          username: [{
-            required: true,
-            trigger: 'blur',
-            validator: validateUsername
-          }],
-          password: [{
-            required: true,
-            trigger: 'blur',
-            validator: validatePassword
-          }],
-          loginType: [{
-            required: true,
-            trigger: 'blur',
-            validator: validateloginType
-          }]
-        },
-        loading: false,
-        passwordType: 'password',
-        redirect: undefined,
-        src: logo,
-        checked: 0
-      }
-    },
-    watch: {
-      $route: {
-        handler: function(route) {
-          this.redirect = route.query && route.query.redirect
-        },
-        immediate: true
-      }
-    },
-    created() {
-      that=this
-    },
-    mounted(){
-      if(this.$route.query.checked){
-        this.checked=this.$route.query.checked
-        console.log(this.checked)
-      }
-     
-    },
-    methods: {
-      showPwd() {
-        if (this.passwordType === 'password') {
-          this.passwordType = ''
-        } else {
-          this.passwordType = 'password'
-        }
-        this.$nextTick(() => {
-          this.$refs.password.focus()
-        })
-      },
-      registerNum() {
-          this.$router.push({
-            path: '/register',
-            query: {
-              checked: this.checked
-            }
-          })
-
-      },
-      open() {
-        const h = this.$createElement;
-        this.$msgbox({
-          title: '',
-          message: h('p', null, [
-            h('span', null, '请电话联系管理员，进行密码确定 '),
-          ]),
-          showCancelButton: true,
-          showConfirmButton: true,
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              done();
-            } else {
-              done();
-            }
-          }
-        }).then(action => {
-          this.$message({
-            type: 'info',
-            message: 'action: ' + action
-          });
-        });
-
-      },
-      handleLogin() {
-      that.loginForm.loginType=that.checked+1
-      console.log( this.loginForm,88)
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            this.$store.dispatch('user/login', that.loginForm).then((res) => {
-                // console.log(res.data)
-              this.$router.push({
-                path: '/'
-              })
-              this.loading = false
-				this.$store.commit("user/getAdmin",that.checked)
-            }).catch(() => {
-              this.loading = false
-            })
-          } else {
-            console.log('error submit!!')
-            return false
-          }
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="scss" >
-  /* 修复input 背景不协调 和光标变色 */
-  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-  $bg:#F6F6F6;
-  $light_gray:#BEBDBB;
-  $cursor: #BEBDBB;
-
-  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-    .login-container .el-input input {
-      color: $cursor;
-    }
-  }
-
-  /* reset element-ui css */
-  .login-container {
-    background: url("../../assets/img/loginbg.png") no-repeat;
-    background-size: 100%;
-
-    .el-input {
-      display: inline-block;
-      height: 47px;
-      width: 85%;
-      background-color: #F6F6F6;
-
-      input {
-        background: #F6F6F6;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        padding: 12px 5px 12px 15px;
-        color: $light_gray;
-        height: 47px;
-        caret-color: $cursor;
-
-        &:-webkit-autofill {
-          box-shadow: 0 0 0px 1000px $bg inset !important;
-          -webkit-text-fill-color: $cursor !important;
-        }
-      }
-    }
-
-    .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background: #F6F6F6;
-      border-radius: 5px;
-      color: #454545;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-  $bg:#2d3a4b;
-  $dark_gray:#F6F6F6;
-  $light_gray:#eee;
-
-  .login-container {
-    height: 100%;
-    width: 100%;
-    // background-color: $bg;
-    // overflow: hidden;
-
-    .login-form {
-      position: relative;
-      width: 470px;
-      max-width: 100%;
-      padding: 0 35px 0;
-      margin: 0 auto;
-      // overflow: hidden;
-    }
-
-    .tips {
-      font-size: 14px;
-      color: #fff;
-      margin-bottom: 10px;
-
-      span {
-        &:first-of-type {
-          margin-right: 16px;
-        }
-      }
-    }
-
-    .svg-container {
-      padding: 6px 5px 6px 15px;
-      color: #1F242A;
-      vertical-align: middle;
-      // width: 30px;
-      display: inline-block;
-    }
-
-    .title-container {
-      position: relative;
-
-      .title {
-        font-size: 48px;
-        color: #1F242A;
-        margin: 0px auto 40px auto;
-        // text-align: center;
-        font-weight: bold;
-      }
-    }
-
-    .show-pwd {
-      position: absolute;
-      right: 10px;
-      top: 7px;
-      font-size: 16px;
-      color: $dark_gray;
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-
-  .el-row {
-    height: 100%;
-  }
-
-  .el-col {
-    height: 100%;
-  }
-
-  .business {
-    width: 305px;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    // background-color: #D8AB5A;
-    border-raotherdius: 20rpx;
-    color: #FFFFFF;
-    margin-top: 57rpx;
-  }
-
-  .business {
-    width: 305rpx;
-    height: 90rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    // background-color: #D8AB5A;
-    border-raotherdius: 20rpx;
-    color: #FFFFFF;
-    margin-top: 57rpx;
-    // line-height: 110rpx;
-  }
-
-  .bnesper {
-    background-size: 100%;
-    background-image: url("../../assets/img/loginbtn4.png");
-    background-repeat: no-repeat;
-    padding-top: 10rpx;
-    color: #FFF1D8;
-
-    .asp {
-      padding-bottom: 5px;
-    }
-  }
-
-  .applyper {
-    background-image: url("../../assets/img/loginbt1.png");
-    background-repeat: no-repeat;
-    background-size: 100%;
-    padding-top: 10rpx;
-    color: #FFF1D8;
-
-    .asp {
-      padding-bottom: 5px;
-    }
-  }
-
-  .actapp {
-    background-image: url("../../assets/img/loginbtn3.png");
-    background-repeat: no-repeat;
-    background-size: 100%;
-    color: #D05C39;
-    margin-bottom: 80rpx;
-
-    .asp {
-      padding-bottom: 20px;
-    }
-
-    // line-height: 180rpx;
-  }
-
-  .actbnes {
-    background-image: url("../../assets/img/loginbt2.png");
-    background-repeat: no-repeat;
-    background-size: 100%;
-    color: #D05C39;
-
-    .asp {
-      padding-bottom: 20px;
-    }
-  }
-
-  .loginbtn {
-    width: 100%;
-    margin-bottom: 30px;
-    background: linear-gradient(to right, #FFE1AD, #D07539);
-    border: none;
-
-    height: 56px;
-    border-radius: 10px;
-
-    font-size: 24px;
-
-  }
-
-  .registerbtn {
-    margin-top: -20px;
-    margin-bottom: 30px;
-    font-size: 16px;
-
-    .forgect {
-      cursor: pointer;
-    }
-
-    .nes {
-      color: #D05C39;
-    }
-
-  }
-</style>
+<template>
+  <div class="login-container">
+    <el-row>
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="flex1">
+          <el-image :src="src" style="width: 299px; height: 211px" />
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10" class="flex1">
+          <div>
+            <el-form
+              ref="loginForm"
+              :model="loginForm"
+              :rules="loginRules"
+              class="login-form"
+              auto-complete="on"
+              label-position="left"
+            >
+
+              <div class="title-container">
+                <h3 class="title">登录</h3>
+              </div>
+              <div class="checkbox flex1">
+                <div class="business " :class="checked==0 ? 'bnesper' : 'actbnes' " @click="checked=0">
+                  <p class="asp">业务人员</p>
+                </div>
+                <div class="business " :class="checked==1 ? 'applyper' : 'actapp' " @click="checked=1">
+                  <p class="asp">供应商</p>
+                </div>
+              </div>
+              <el-form-item prop="username">
+                <span class="svg-container"> 账户 </span>
+                <el-input
+                  ref="username"
+                  v-model="loginForm.username"
+                  placeholder="请输入账户名称"
+                  name="username"
+                  type="text"
+                  tabindex="1"
+                  auto-complete="on"
+                />
+              </el-form-item>
+
+              <el-form-item prop="password">
+                <span class="svg-container">
+                  密码
+                </span>
+                <el-input
+                  :key="passwordType"
+                  ref="password"
+                  v-model="loginForm.password"
+                  :type="passwordType"
+                  placeholder="请输入密码"
+                  name="password"
+                  tabindex="2"
+                  auto-complete="on"
+                  @keyup.enter.native="handleLogin"
+                />
+                <span class="show-pwd" @click="showPwd">
+                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+                </span>
+              </el-form-item>
+
+              <div class="registerbtn flex2">
+                <div class="forgect" @click.stop="registerNum">
+                  <p class="nes">新用户注册</p>
+                </div>
+                <div class="forgect" @click="open">
+                  <p class="asp">忘记密码？</p>
+                </div>
+              </div>
+              <el-button :loading="loading" type="primary" class="loginbtn" @click.native.prevent="handleLogin">登录
+              </el-button>
+            </el-form>
+          </div>
+        </el-col>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+let that
+import {
+  validUsername
+} from '@/utils/validate'
+import logo from '/src/assets/img/logo.png'
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (value.length === 0) {
+        callback(new Error('请输入账户名称'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('请输入大于6位数密码'))
+      } else {
+        callback()
+      }
+    }
+    const validateloginType = (rule, value, callback) => {
+
+    }
+    return {
+      loginForm: {
+        username: 'admin',
+        password: '123456',
+        loginType: 0
+      },
+      loginRules: {
+        username: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateUsername
+        }],
+        password: [{
+          required: true,
+          trigger: 'blur',
+          validator: validatePassword
+        }],
+        loginType: [{
+          required: true,
+          trigger: 'blur',
+          validator: validateloginType
+        }]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined,
+      src: logo,
+      checked: 0
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  created() {
+    that = this
+  },
+  mounted() {
+    if (this.$route.query.checked) {
+      this.checked = this.$route.query.checked
+      console.log(this.checked)
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    registerNum() {
+      this.$router.push({
+        path: '/register',
+        query: {
+          checked: this.checked
+        }
+      })
+    },
+    open() {
+      const h = this.$createElement
+      this.$msgbox({
+        title: '',
+        message: h('p', null, [
+          h('span', null, '请电话联系管理员，进行密码确定 ')
+        ]),
+        showCancelButton: true,
+        showConfirmButton: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            done()
+          } else {
+            done()
+          }
+        }
+      }).then(action => {
+        this.$message({
+          type: 'info',
+          message: 'action: ' + action
+        })
+      })
+    },
+    handleLogin() {
+      this.loginForm.loginType = this.checked + 1
+      this.$refs.loginForm.validate(valid => {
+        if (!valid) {
+          this.$message.error('请检查表单')
+          return
+        }
+        this.$store.dispatch('user/ActionLogin', this.loginForm)
+      })
+    }
+    //  handleLogin() {
+    //   that.loginForm.loginType = that.checked + 1
+    //   console.log(this.loginForm, 88)
+    //   this.$refs.loginForm.validate(valid => {
+    //     if (valid) {
+    //       this.loading = true
+    //       this.$store.dispatch('user/login', that.loginForm).then((res) => {
+    //         // console.log(res.data)
+    //         this.$router.push({
+    //           path: '/'
+    //         })
+    //         this.loading = false
+    //         this.$store.commit('user/getAdmin', that.checked)
+    //       }).catch(() => {
+    //         this.loading = false
+    //       })
+    //     } else {
+    //       console.log('error submit!!')
+    //       return false
+    //     }
+    //   })
+  }
+}
+</script>
+
+<style lang="scss" >
+  /* 修复input 背景不协调 和光标变色 */
+  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+  $bg:#F6F6F6;
+  $light_gray:#BEBDBB;
+  $cursor: #BEBDBB;
+
+  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+    .login-container .el-input input {
+      color: $cursor;
+    }
+  }
+
+  /* reset element-ui css */
+  .login-container {
+    background: url("../../assets/img/loginbg.png") no-repeat;
+    background-size: 100%;
+
+    .el-input {
+      display: inline-block;
+      height: 47px;
+      width: 85%;
+      background-color: #F6F6F6;
+
+      input {
+        background: #F6F6F6;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        padding: 12px 5px 12px 15px;
+        color: $light_gray;
+        height: 47px;
+        caret-color: $cursor;
+
+        &:-webkit-autofill {
+          box-shadow: 0 0 0px 1000px $bg inset !important;
+          -webkit-text-fill-color: $cursor !important;
+        }
+      }
+    }
+
+    .el-form-item {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: #F6F6F6;
+      border-radius: 5px;
+      color: #454545;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  $bg:#2d3a4b;
+  $dark_gray:#F6F6F6;
+  $light_gray:#eee;
+
+  .login-container {
+    height: 100%;
+    width: 100%;
+    // background-color: $bg;
+    // overflow: hidden;
+
+    .login-form {
+      position: relative;
+      width: 470px;
+      max-width: 100%;
+      padding: 0 35px 0;
+      margin: 0 auto;
+      // overflow: hidden;
+    }
+
+    .tips {
+      font-size: 14px;
+      color: #fff;
+      margin-bottom: 10px;
+
+      span {
+        &:first-of-type {
+          margin-right: 16px;
+        }
+      }
+    }
+
+    .svg-container {
+      padding: 6px 5px 6px 15px;
+      color: #1F242A;
+      vertical-align: middle;
+      // width: 30px;
+      display: inline-block;
+    }
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 48px;
+        color: #1F242A;
+        margin: 0px auto 40px auto;
+        // text-align: center;
+        font-weight: bold;
+      }
+    }
+
+    .show-pwd {
+      position: absolute;
+      right: 10px;
+      top: 7px;
+      font-size: 16px;
+      color: $dark_gray;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  .el-row {
+    height: 100%;
+  }
+
+  .el-col {
+    height: 100%;
+  }
+
+  .business {
+    width: 305px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    // background-color: #D8AB5A;
+    border-raotherdius: 20rpx;
+    color: #FFFFFF;
+    margin-top: 57rpx;
+  }
+
+  .business {
+    width: 305rpx;
+    height: 90rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    // background-color: #D8AB5A;
+    border-raotherdius: 20rpx;
+    color: #FFFFFF;
+    margin-top: 57rpx;
+    // line-height: 110rpx;
+  }
+
+  .bnesper {
+    background-size: 100%;
+    background-image: url("../../assets/img/loginbtn4.png");
+    background-repeat: no-repeat;
+    padding-top: 10rpx;
+    color: #FFF1D8;
+
+    .asp {
+      padding-bottom: 5px;
+    }
+  }
+
+  .applyper {
+    background-image: url("../../assets/img/loginbt1.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding-top: 10rpx;
+    color: #FFF1D8;
+
+    .asp {
+      padding-bottom: 5px;
+    }
+  }
+
+  .actapp {
+    background-image: url("../../assets/img/loginbtn3.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: #D05C39;
+    margin-bottom: 80rpx;
+
+    .asp {
+      padding-bottom: 20px;
+    }
+
+    // line-height: 180rpx;
+  }
+
+  .actbnes {
+    background-image: url("../../assets/img/loginbt2.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    color: #D05C39;
+
+    .asp {
+      padding-bottom: 20px;
+    }
+  }
+
+  .loginbtn {
+    width: 100%;
+    margin-bottom: 30px;
+    background: linear-gradient(to right, #FFE1AD, #D07539);
+    border: none;
+
+    height: 56px;
+    border-radius: 10px;
+
+    font-size: 24px;
+
+  }
+
+  .registerbtn {
+    margin-top: -20px;
+    margin-bottom: 30px;
+    font-size: 16px;
+
+    .forgect {
+      cursor: pointer;
+    }
+
+    .nes {
+      color: #D05C39;
+    }
+
+  }
+</style>