diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 52faf71..882a7c5 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -29,7 +29,7 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/staff/delete')" class="edit_btn" @click="del">删除</el-button>
+          <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
           <el-button class="edit_btn" size="small">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 52faf71..882a7c5 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -29,7 +29,7 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/staff/delete')" class="edit_btn" @click="del">删除</el-button>
+          <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
           <el-button class="edit_btn" size="small">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index a212942..6b99246 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">人员信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">人员信息</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="checkin">新增</el-button>
+          <el-button class="edit_btn" size="small" @click="checkin">新增来访人员</el-button>
         </el-col>
       </el-row>
 
@@ -28,9 +28,9 @@
       </el-table>
     </div>
 
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">来访信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
       </el-row>
 
       <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
@@ -92,8 +92,7 @@
     <div style="height: 120px;">
       <el-row type="flex" justify="center">
         <el-col :span="15" style="text-align:center">
-          <el-button @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
+          <el-button type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
         </el-col>
       </el-row>
     </div>
@@ -112,7 +111,7 @@
 const now = new Date()
 
 export default {
-  name: 'VisitorPersonAdd',
+  name: 'VisitorAddPerson',
   components: { VisitorCheckIn, DeptSelect },
   data() {
     return {
@@ -147,8 +146,8 @@
       datePickerOptions: {
         disabledDate(time) {
           const yesterday = new Date(now.getTime() - oneDayTime)
-          const oneMonthLater = new Date(now.getTime() + (oneDayTime * 30))
-          return time.getTime() < yesterday || time.getTime() > oneMonthLater
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
         }
       },
       columns: [

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 52faf71..882a7c5 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -29,7 +29,7 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/staff/delete')" class="edit_btn" @click="del">删除</el-button>
+          <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
           <el-button class="edit_btn" size="small">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index a212942..6b99246 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">人员信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">人员信息</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="checkin">新增</el-button>
+          <el-button class="edit_btn" size="small" @click="checkin">新增来访人员</el-button>
         </el-col>
       </el-row>
 
@@ -28,9 +28,9 @@
       </el-table>
     </div>
 
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">来访信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
       </el-row>
 
       <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
@@ -92,8 +92,7 @@
     <div style="height: 120px;">
       <el-row type="flex" justify="center">
         <el-col :span="15" style="text-align:center">
-          <el-button @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
+          <el-button type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
         </el-col>
       </el-row>
     </div>
@@ -112,7 +111,7 @@
 const now = new Date()
 
 export default {
-  name: 'VisitorPersonAdd',
+  name: 'VisitorAddPerson',
   components: { VisitorCheckIn, DeptSelect },
   data() {
     return {
@@ -147,8 +146,8 @@
       datePickerOptions: {
         disabledDate(time) {
           const yesterday = new Date(now.getTime() - oneDayTime)
-          const oneMonthLater = new Date(now.getTime() + (oneDayTime * 30))
-          return time.getTime() < yesterday || time.getTime() > oneMonthLater
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
         }
       },
       columns: [
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
new file mode 100644
index 0000000..57bc84a
--- /dev/null
+++ b/src/views/visitor/visitorAddCar.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="app-container">
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">车辆信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="checkinCar">新增来访车辆</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitCarDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorCarColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delCar(scope.row.plateNumber)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">随车人员信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button :disabled="!hasOneCar" class="edit_btn" size="small" @click="checkinPersonWithCar">新增随车人员</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitorBaseDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="detailVisitor(scope.row)">详情</el-button>
+            <el-button type="text" @click="del(scope.row.idCard)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
+      </el-row>
+
+      <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="访客所在单位" prop="deptname">
+              <el-input v-model.trim="dataForm.deptname" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在单位"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+            <el-form-item label="访客所在城市" prop="city">
+              <el-input v-model.trim="dataForm.city" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在城市"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="接访部门" prop="deptid">
+              <dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="接访人员" prop="personId">
+              <el-select v-model="dataForm.personId" placeholder="请选择接访人" filterable clearable>
+                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="来访事由" prop="matter">
+              <el-input v-model.trim="dataForm.matter" clearable show-word-limit maxlength="30" type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="授权时间">
+              <el-radio-group v-model="authTimeType">
+                <el-radio-button v-for="item in authTimeList" :key="item.value" :label="item.value">{{ item.name }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-date-picker
+              :readonly="!customTimeRange"
+              v-model="timeRange"
+              :picker-options="datePickerOptions"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期" />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="剩余车位">
+              <el-input v-model.trim="dataForm.city" readonly type="text" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div style="height: 120px;">
+      <el-row type="flex" justify="center">
+        <el-col :span="15" style="text-align:center">
+          <el-button :loading="btnLoading" type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <visitor-car-check-in ref="checkin" @checked="visitorCheckedIn" />
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+import { daysInMonth, oneDayTime, getDate, formatToString } from '@/utils/calendarUtil'
+import { getStaffByDept } from '@/api/staff'
+import { addVisitorCarAndPerson } from '@/api/visitor'
+import VisitorCarCheckIn from '@/views/visitor/visitorCarCheckIn'
+
+const now = new Date()
+
+export default {
+  name: 'VisitorAddCar',
+  components: { VisitorCarCheckIn, DeptSelect },
+  data() {
+    return {
+      dataForm: {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [], // 来访人员列表
+        visitCarDTOList: [] // 来访车辆列表
+      }, // 表单
+      rules: {
+        deptname: [{ required: true, message: '单位不能为空', trigger: ['blur', 'change'] }],
+        city: [{ required: true, message: '城市不能为空', trigger: ['blur', 'change'] }],
+        deptid: [{ required: true, message: '接访部门不能为空', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '接访人员不能为空', trigger: ['blur', 'change'] }],
+        matter: [{ required: true, message: '来访原因不能为空', trigger: ['blur', 'change'] }]
+      },
+      hasOneCar: false, // 是否已经有一辆来访车辆
+      staffList: [], // 接访人员列表
+      labelPosition: 'right',
+      authTimeList: [{ name: '当日', value: '1' }, { name: '本周', value: '2' }, { name: '本月', value: '3' }, { name: '自定义', value: '4' }],
+      authTimeType: '1',
+      timeRange: [],
+      customTimeRange: false,
+      deptShowTop: true, // 权属单位下拉是否显示顶级
+      deptShow: true,
+      formLoading: false,
+      dialogFormVisible: false,
+      btnLoading: false, // 保存按钮是否不允许点击
+      datePickerOptions: {
+        disabledDate(time) {
+          const yesterday = new Date(now.getTime() - oneDayTime)
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
+        }
+      },
+      visitorCarColumns: [
+        { text: '车牌号', value: 'plateNumber', align: 'center', width: 140 },
+        { text: '司机姓名', value: 'ownerName', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'ownerPhone', align: 'center' }
+      ], // 显示列
+      visitorColumns: [
+        { text: '姓名', value: 'name', align: 'center', width: 140 },
+        { text: '性别', value: 'sexStr', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'phone', align: 'center' },
+        { text: '体温', value: 'temperature', align: 'center' },
+        { text: '随行车辆', value: 'plateNumber', align: 'center' }
+      ]
+    }
+  },
+  watch: {
+    'authTimeType': function(val) {
+      const weekDay = now.getDay() // 周几
+      const monthDay = now.getDate() // 日期
+      const month = now.getMonth() // 月份
+
+      this.customTimeRange = false
+
+      if (val === '1') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+      } else if (val === '2') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(7 - weekDay + 1, 'DATE')]
+      } else if (val === '3') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(daysInMonth[month + 1] - monthDay + 1, 'DATE')]
+      } else if (val === '4') {
+        this.timeRange = []
+        this.customTimeRange = true
+      }
+    },
+    dataForm: {
+      handler(newValue) {
+        this.hasOneCar = newValue.visitCarDTOList.length > 0
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.resetForm()
+    this.initDateRange()
+  },
+  methods: {
+    // 重置表单
+    resetForm() {
+      this.dataForm = {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [],
+        visitCarDTOList: []
+      }
+
+      // 清除验证
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+
+      this.btnLoading = false
+    },
+    initDateRange() {
+      this.authTimeType = '1' // 当日
+      this.dataForm.startTime = getDate(0, 'DATE')
+      this.dataForm.endTime = getDate(1, 'DATE')
+      this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+    },
+    // 身份证号加密显示
+    encrypIdCardNo(idCard) {
+      if (idCard.length > 6) {
+        return idCard.substr(0, 6) + '********' + idCard.substr(14)
+      } else if (idCard) {
+        return idCard
+      } else {
+        return ''
+      }
+    },
+    // 打开访客登记页面
+    checkinCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createCar', this.dialogFormVisible)
+    },
+    checkinPersonWithCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createPerson', this.dialogFormVisible)
+    },
+    // 一位访客登记完毕
+    visitorCheckedIn(type, visitor) {
+      if (type === 'createCar') {
+        this.dataForm.visitCarDTOList.push(visitor)
+      } else if (type === 'createPerson') {
+        this.dataForm.visitorBaseDTOList.push(visitor)
+      }
+    },
+    detailVisitor(row) {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('detail', this.dialogFormVisible, row)
+    },
+    delCar(plateNumber) {
+      this.dataForm.visitCarDTOList = this.dataForm.visitCarDTOList.filter(car => {
+        return car.plateNumber !== plateNumber
+      })
+
+      // 删除车辆关联的所有人员
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.plateNumber !== plateNumber
+      })
+    },
+    del(idCard) {
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.idCard !== idCard
+      })
+
+      // 如果是车主，则删除对应的车辆
+      const carToDel = this.dataForm.visitCarDTOList.filter(car => {
+        return car.idCard === idCard
+      })
+      this.delCar(carToDel[0].plateNumber)
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+
+      this.$refs['dataForm'].validate((valid) => {
+        if (this.dataForm.visitorBaseDTOList.length === 0) {
+          this.$message.error('来访人员列表不能为空')
+        } if (this.hasOneCar === false) {
+          this.$message.error('来访车辆列表不能为空')
+        } else if (valid) {
+          this.dataForm.visitTime = formatToString(now, 'SECOND')
+          addVisitorCarAndPerson(this.dataForm).then(response => {
+            if (response.code === 200) {
+              // 注册成功后清除表单
+              this.resetForm()
+
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$router.push({ path: '/staff/list' })
+              })
+            } else {
+              this.$message.error(response.message)
+              this.btnLoading = false
+            }
+          }).catch(() => {
+            this.$message.error('保存失败，服务器异常')
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    fetchStaffList() {
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.dataForm.personId = ''
+        this.staffList = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+  .hide .el-upload--picture-card {
+    display: none;
+  }
+  .main-form{
+    margin: 0px 30px;
+    margin-top: 20px;
+    padding: 10px;
+    overflow: auto;
+  }
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+  .line{
+    width: 50px;
+    margin-left: 5px;
+  }
+  .hide .el-upload-–picture-card{
+    display: none;
+  }
+  .imgBox{
+    width: 100%;
+    text-align: center;
+  }
+  .avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 238px;
+    line-height: 238px;
+    text-align: center;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  .id-card-btn{
+    width:126px;
+    margin-left: 12px;
+    margin-top: 20px;
+  }
+
+  $tableTitleHeight:46px;
+  .app-container{
+    margin-bottom:20px
+  }
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 52faf71..882a7c5 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -29,7 +29,7 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/staff/delete')" class="edit_btn" @click="del">删除</el-button>
+          <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
           <el-button class="edit_btn" size="small">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index a212942..6b99246 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">人员信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">人员信息</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="checkin">新增</el-button>
+          <el-button class="edit_btn" size="small" @click="checkin">新增来访人员</el-button>
         </el-col>
       </el-row>
 
@@ -28,9 +28,9 @@
       </el-table>
     </div>
 
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">来访信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
       </el-row>
 
       <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
@@ -92,8 +92,7 @@
     <div style="height: 120px;">
       <el-row type="flex" justify="center">
         <el-col :span="15" style="text-align:center">
-          <el-button @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
+          <el-button type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
         </el-col>
       </el-row>
     </div>
@@ -112,7 +111,7 @@
 const now = new Date()
 
 export default {
-  name: 'VisitorPersonAdd',
+  name: 'VisitorAddPerson',
   components: { VisitorCheckIn, DeptSelect },
   data() {
     return {
@@ -147,8 +146,8 @@
       datePickerOptions: {
         disabledDate(time) {
           const yesterday = new Date(now.getTime() - oneDayTime)
-          const oneMonthLater = new Date(now.getTime() + (oneDayTime * 30))
-          return time.getTime() < yesterday || time.getTime() > oneMonthLater
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
         }
       },
       columns: [
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
new file mode 100644
index 0000000..57bc84a
--- /dev/null
+++ b/src/views/visitor/visitorAddCar.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="app-container">
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">车辆信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="checkinCar">新增来访车辆</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitCarDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorCarColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delCar(scope.row.plateNumber)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">随车人员信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button :disabled="!hasOneCar" class="edit_btn" size="small" @click="checkinPersonWithCar">新增随车人员</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitorBaseDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="detailVisitor(scope.row)">详情</el-button>
+            <el-button type="text" @click="del(scope.row.idCard)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
+      </el-row>
+
+      <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="访客所在单位" prop="deptname">
+              <el-input v-model.trim="dataForm.deptname" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在单位"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+            <el-form-item label="访客所在城市" prop="city">
+              <el-input v-model.trim="dataForm.city" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在城市"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="接访部门" prop="deptid">
+              <dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="接访人员" prop="personId">
+              <el-select v-model="dataForm.personId" placeholder="请选择接访人" filterable clearable>
+                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="来访事由" prop="matter">
+              <el-input v-model.trim="dataForm.matter" clearable show-word-limit maxlength="30" type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="授权时间">
+              <el-radio-group v-model="authTimeType">
+                <el-radio-button v-for="item in authTimeList" :key="item.value" :label="item.value">{{ item.name }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-date-picker
+              :readonly="!customTimeRange"
+              v-model="timeRange"
+              :picker-options="datePickerOptions"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期" />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="剩余车位">
+              <el-input v-model.trim="dataForm.city" readonly type="text" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div style="height: 120px;">
+      <el-row type="flex" justify="center">
+        <el-col :span="15" style="text-align:center">
+          <el-button :loading="btnLoading" type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <visitor-car-check-in ref="checkin" @checked="visitorCheckedIn" />
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+import { daysInMonth, oneDayTime, getDate, formatToString } from '@/utils/calendarUtil'
+import { getStaffByDept } from '@/api/staff'
+import { addVisitorCarAndPerson } from '@/api/visitor'
+import VisitorCarCheckIn from '@/views/visitor/visitorCarCheckIn'
+
+const now = new Date()
+
+export default {
+  name: 'VisitorAddCar',
+  components: { VisitorCarCheckIn, DeptSelect },
+  data() {
+    return {
+      dataForm: {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [], // 来访人员列表
+        visitCarDTOList: [] // 来访车辆列表
+      }, // 表单
+      rules: {
+        deptname: [{ required: true, message: '单位不能为空', trigger: ['blur', 'change'] }],
+        city: [{ required: true, message: '城市不能为空', trigger: ['blur', 'change'] }],
+        deptid: [{ required: true, message: '接访部门不能为空', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '接访人员不能为空', trigger: ['blur', 'change'] }],
+        matter: [{ required: true, message: '来访原因不能为空', trigger: ['blur', 'change'] }]
+      },
+      hasOneCar: false, // 是否已经有一辆来访车辆
+      staffList: [], // 接访人员列表
+      labelPosition: 'right',
+      authTimeList: [{ name: '当日', value: '1' }, { name: '本周', value: '2' }, { name: '本月', value: '3' }, { name: '自定义', value: '4' }],
+      authTimeType: '1',
+      timeRange: [],
+      customTimeRange: false,
+      deptShowTop: true, // 权属单位下拉是否显示顶级
+      deptShow: true,
+      formLoading: false,
+      dialogFormVisible: false,
+      btnLoading: false, // 保存按钮是否不允许点击
+      datePickerOptions: {
+        disabledDate(time) {
+          const yesterday = new Date(now.getTime() - oneDayTime)
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
+        }
+      },
+      visitorCarColumns: [
+        { text: '车牌号', value: 'plateNumber', align: 'center', width: 140 },
+        { text: '司机姓名', value: 'ownerName', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'ownerPhone', align: 'center' }
+      ], // 显示列
+      visitorColumns: [
+        { text: '姓名', value: 'name', align: 'center', width: 140 },
+        { text: '性别', value: 'sexStr', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'phone', align: 'center' },
+        { text: '体温', value: 'temperature', align: 'center' },
+        { text: '随行车辆', value: 'plateNumber', align: 'center' }
+      ]
+    }
+  },
+  watch: {
+    'authTimeType': function(val) {
+      const weekDay = now.getDay() // 周几
+      const monthDay = now.getDate() // 日期
+      const month = now.getMonth() // 月份
+
+      this.customTimeRange = false
+
+      if (val === '1') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+      } else if (val === '2') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(7 - weekDay + 1, 'DATE')]
+      } else if (val === '3') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(daysInMonth[month + 1] - monthDay + 1, 'DATE')]
+      } else if (val === '4') {
+        this.timeRange = []
+        this.customTimeRange = true
+      }
+    },
+    dataForm: {
+      handler(newValue) {
+        this.hasOneCar = newValue.visitCarDTOList.length > 0
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.resetForm()
+    this.initDateRange()
+  },
+  methods: {
+    // 重置表单
+    resetForm() {
+      this.dataForm = {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [],
+        visitCarDTOList: []
+      }
+
+      // 清除验证
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+
+      this.btnLoading = false
+    },
+    initDateRange() {
+      this.authTimeType = '1' // 当日
+      this.dataForm.startTime = getDate(0, 'DATE')
+      this.dataForm.endTime = getDate(1, 'DATE')
+      this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+    },
+    // 身份证号加密显示
+    encrypIdCardNo(idCard) {
+      if (idCard.length > 6) {
+        return idCard.substr(0, 6) + '********' + idCard.substr(14)
+      } else if (idCard) {
+        return idCard
+      } else {
+        return ''
+      }
+    },
+    // 打开访客登记页面
+    checkinCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createCar', this.dialogFormVisible)
+    },
+    checkinPersonWithCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createPerson', this.dialogFormVisible)
+    },
+    // 一位访客登记完毕
+    visitorCheckedIn(type, visitor) {
+      if (type === 'createCar') {
+        this.dataForm.visitCarDTOList.push(visitor)
+      } else if (type === 'createPerson') {
+        this.dataForm.visitorBaseDTOList.push(visitor)
+      }
+    },
+    detailVisitor(row) {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('detail', this.dialogFormVisible, row)
+    },
+    delCar(plateNumber) {
+      this.dataForm.visitCarDTOList = this.dataForm.visitCarDTOList.filter(car => {
+        return car.plateNumber !== plateNumber
+      })
+
+      // 删除车辆关联的所有人员
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.plateNumber !== plateNumber
+      })
+    },
+    del(idCard) {
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.idCard !== idCard
+      })
+
+      // 如果是车主，则删除对应的车辆
+      const carToDel = this.dataForm.visitCarDTOList.filter(car => {
+        return car.idCard === idCard
+      })
+      this.delCar(carToDel[0].plateNumber)
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+
+      this.$refs['dataForm'].validate((valid) => {
+        if (this.dataForm.visitorBaseDTOList.length === 0) {
+          this.$message.error('来访人员列表不能为空')
+        } if (this.hasOneCar === false) {
+          this.$message.error('来访车辆列表不能为空')
+        } else if (valid) {
+          this.dataForm.visitTime = formatToString(now, 'SECOND')
+          addVisitorCarAndPerson(this.dataForm).then(response => {
+            if (response.code === 200) {
+              // 注册成功后清除表单
+              this.resetForm()
+
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$router.push({ path: '/staff/list' })
+              })
+            } else {
+              this.$message.error(response.message)
+              this.btnLoading = false
+            }
+          }).catch(() => {
+            this.$message.error('保存失败，服务器异常')
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    fetchStaffList() {
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.dataForm.personId = ''
+        this.staffList = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+  .hide .el-upload--picture-card {
+    display: none;
+  }
+  .main-form{
+    margin: 0px 30px;
+    margin-top: 20px;
+    padding: 10px;
+    overflow: auto;
+  }
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+  .line{
+    width: 50px;
+    margin-left: 5px;
+  }
+  .hide .el-upload-–picture-card{
+    display: none;
+  }
+  .imgBox{
+    width: 100%;
+    text-align: center;
+  }
+  .avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 238px;
+    line-height: 238px;
+    text-align: center;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  .id-card-btn{
+    width:126px;
+    margin-left: 12px;
+    margin-top: 20px;
+  }
+
+  $tableTitleHeight:46px;
+  .app-container{
+    margin-bottom:20px
+  }
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
new file mode 100644
index 0000000..faabda9
--- /dev/null
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -0,0 +1,336 @@
+<!-- 访客车辆刷证登记页面 -->
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
+      <el-row>
+        <el-col :span="6">
+          <el-row>
+            <div class="avatar">
+              <el-image
+                :src="photo!==''?photo:defaultPhoto"
+                fit="cover"
+                style="width: 130px; height: 175px"/>
+            </div>
+          </el-row>
+          <el-row>
+            <el-button v-show="isEditMode" :disabled="readCard" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
+          </el-row>
+        </el-col>
+
+        <el-col :span="16">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="姓名" prop="name">
+                <el-input v-model.trim="dataForm.name" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="必填"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="性别" prop="sex">
+                <el-select v-model="dataForm.sex" :disabled="readCard||!isEditMode" placeholder="性别" clearable>
+                  <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="24" >
+              <el-form-item label="身份证号" prop="idCard">
+                <el-input v-model.trim="dataForm.idCard" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="身份证号"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="14">
+              <el-form-item label="联系电话" prop="phone">
+                <el-input v-model.trim="dataForm.phone" :disabled="!isEditMode" type="text" placeholder="联系电话"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="体温" prop="temperature">
+                <el-input v-model.trim="dataForm.temperature" :disabled="!isEditMode" type="text" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="车牌号" prop="plateNumber">
+                <el-input v-show="checkInCar" v-model.trim="dataForm.plateNumber" :disabled="!isEditMode" type="text" placeholder="车牌号"/>
+                <el-select v-show="!checkInCar" v-model="dataForm.plateNumber">
+                  <el-option v-for="item in this.$parent.dataForm.visitCarDTOList" :key="item.plateNumber" :label="item.plateNumber" :value="item.plateNumber" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div v-show="isEditMode" slot="footer" class="dialog-footer">
+      <el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getSexType } from '@/api/allDict'
+import { getBirthdayByIdNO, getSexByIdNO } from '@/utils/dataAnalysis'
+import { phoneValidator, temValidator, plateValidator } from '@/utils/validate'
+
+export default {
+  name: 'VisitorCarCheckIn',
+  data() {
+    return {
+      isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
+      readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
+      checkInCar: true, // 添加车辆还是添加随车人员
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update,detail
+      dataForm: {
+        idCard: '', // 身份证号
+        name: '', // 姓名
+        sex: '', // 性别
+        sexStr: '',
+        phone: '', // 联系电话
+        birthday: '', // 出生日期
+        temperature: '', // 体温
+        photo: '',
+        address: '',
+        plateNumber: '' // 来访车辆车牌号
+      }, // 表单
+      photo: '', // 图片路径
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
+      textMap: {
+        createCar: '来访车辆登记',
+        createPerson: '随车人员登记',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
+        temperature: [{ required: true, trigger: ['blur', 'change'], validator: temValidator }],
+        plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }]
+      }, // 前端校验规则
+      sexList: [],
+      btnLoading: true // 保存按钮是否不允许点击
+    }
+  },
+  watch: {
+    'dataForm.idCard': function(val) {
+      this.dataForm.birthday = getBirthdayByIdNO(val)
+      this.dataForm.sex = getSexByIdNO(val)
+    }
+  },
+  created() {
+    // 初始化性别字典值列表
+    getSexType().then(response => {
+      this.sexList = response.data
+    })
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.btnLoading = false
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+
+      this.resetForm()
+
+      if (dialogStatus === 'createCar') { // 如果是新增，清除验证
+        this.isEditMode = true
+        this.readCard = false
+        this.checkInCar = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'createPerson') {
+        this.isEditMode = true
+        this.readCard = false
+        this.checkInCar = false
+
+        // 默认选中第一辆车
+        if (this.$parent.dataForm.visitCarDTOList.length > 0) {
+          this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
+        }
+
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'detail') {
+        this.isEditMode = false
+
+        this.dataForm = {
+          idCard: row.idCard,
+          name: row.name,
+          phone: row.phone,
+          temperature: row.temperature,
+          address: row.address,
+          plateNumber: row.plateNumber
+        }
+
+        this.photo = row.photo
+      }
+    },
+    // 清除数据
+    resetForm() {
+      this.dataForm = {
+        idCard: '', // 身份证号
+        name: '', // 姓名
+        sex: '', // 性别
+        sexStr: '',
+        phone: '', // 联系电话
+        birthday: '', // 出生日期
+        temperature: '', // 体温
+        photo: '',
+        address: '',
+        plateNumber: ''
+      }
+
+      this.photo = ''
+      this.btnLoading = false
+      this.readCard = false
+
+      this.isEditMode = true
+      this.readCard = false
+    },
+    readIDCard() {
+      const that = this
+      this.ws = that.$root.ws
+      if (this.ws === null) {
+        this.ws = new WebSocket(that.$root.wsURL)
+        // 注册各类回调
+        this.ws.onopen = function() {
+          that.ws.send('ReadIdCard')
+        }
+        this.ws.onclose = function() {
+          that.$message.info('与ICS连接断开')
+          that.$root.ws = null
+        }
+        this.ws.onerror = function() {
+          that.$message.error('与ICS通信发生错误')
+        }
+        that.$root.ws = this.ws
+      } else {
+        this.ws.send('ReadIdCard')
+      }
+      this.ws.onmessage = function(receiveMsg) {
+        const data = JSON.parse(receiveMsg.data)
+        if (data !== '' && data.message !== 'fail') {
+          that.dataForm.idCard = data.IdCardNo
+          that.dataForm.name = data.Name
+          that.photo = data.Photo
+          that.dataForm.photo = data.Photo
+          that.dataForm.address = data.Address
+          that.dataForm.sexStr = data.Sex
+
+          // 读过身份证了
+          that.readCard = true
+        } else {
+          that.$message.warning('读卡失败')
+        }
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+
+      this.visitorCheckedIn()
+    },
+    // 新增数据
+    visitorCheckedIn: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid && this.readCard) {
+          // 车辆列表
+          const carList = this.$parent.dataForm.visitCarDTOList
+          let isCarChecked = false
+          // 访客列表
+          const list = this.$parent.dataForm.visitorBaseDTOList
+          let isChecked = false
+
+          // 添加车辆
+          if (this.dialogStatus === 'createCar') {
+            // 遍历父组件的carList，检查是否已经登记过
+            carList.forEach(item => {
+              if (item.plateNumber === this.dataForm.plateNumber) {
+                isCarChecked = true
+              }
+            })
+
+            // 首先添加车辆
+            if (isCarChecked === true) {
+              this.$message.error('该辆车已经登记过，请检查')
+
+              this.$nextTick(() => {
+                this.btnLoading = false
+                this.readCard = false
+              })
+            } else {
+              // 发送信号登记车辆
+              const car = {
+                plateNumber: this.dataForm.plateNumber,
+                idCard: this.dataForm.idCard,
+                ownerName: this.dataForm.name,
+                ownerPhone: this.dataForm.phone
+              }
+              this.$emit('checked', 'createCar', car)
+
+              // 发送信号让父组件添加人员
+              this.$emit('checked', 'createPerson', this.dataForm)
+
+              this.dialogFormVisible = false
+            }
+          } else if (this.dialogStatus === 'createPerson') {
+            // 遍历父组件的visitorBaseDTOList，检查是否已经登记过
+            list.forEach(item => {
+              if (item.idCard === this.dataForm.idCard) {
+                isChecked = true
+              }
+            })
+
+            if (isChecked === true) {
+              this.$message.error('该身份证已经登记过，请检查')
+
+              this.$nextTick(() => {
+                this.btnLoading = false
+                this.readCard = false
+              })
+            } else {
+              // 发送信号让父组件添加
+              this.$emit('checked', 'createPerson', this.dataForm)
+
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.dialogFormVisible = false
+              })
+            }
+          }
+        } else {
+          this.btnLoading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .dialog-footer {
+    margin-top: -20px;
+    text-align: center;
+  }
+</style>

diff --git a/src/api/visitor.js b/src/api/visitor.js
index be930bd..cba599b 100644
--- a/src/api/visitor.js
+++ b/src/api/visitor.js
@@ -9,3 +9,12 @@
     data
   })
 }
+
+// 访客车辆及人员登记
+export function addVisitorCarAndPerson(data) {
+  return request({
+    url: '/visitorCar/add',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/modules/visitor.js b/src/router/modules/visitor.js
index a60b5dd..f1ab563 100644
--- a/src/router/modules/visitor.js
+++ b/src/router/modules/visitor.js
@@ -20,6 +20,12 @@
         name: 'VisitorAdd',
         component: () => import('@/views/visitor/visitorAdd'),
         meta: { title: '访客登记', icon: '', permission: ['/visitor/add'], keepAlive: true }
+      },
+      {
+        path: '/visitor/addCar',
+        name: 'VisitorAddCar',
+        component: () => import('@/views/visitor/visitorAddCar'),
+        meta: { title: '访客车辆登记', icon: '', permission: ['/visitor/addCar'], keepAlive: true }
       }
       // {
       //   path: '/visitor/personList',
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 147b862..ce760ab 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -134,3 +134,18 @@
     callback(new Error('体温不能为空'))
   }
 }
+
+// 车牌号校验validator
+export const plateValidator = (rule, value, callback) => {
+  const reg = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5}$/
+  const regNew = /^[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]$/
+  if (value !== '') {
+    if (reg.test(value) === false && regNew.test(value) === false) {
+      callback(new Error('请输入正确的车牌号'))
+    } else {
+      callback()
+    }
+  } else {
+    callback(new Error('车牌号不能为空'))
+  }
+}
diff --git a/src/views/staff/staffList.vue b/src/views/staff/staffList.vue
index 52faf71..882a7c5 100644
--- a/src/views/staff/staffList.vue
+++ b/src/views/staff/staffList.vue
@@ -29,7 +29,7 @@
       <el-row class="table-title">
         <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button v-if="hasPerm('/staff/delete')" class="edit_btn" @click="del">删除</el-button>
+          <el-button v-if="hasPerm('/staff/delete')" size="small" class="edit_btn" @click="del">删除</el-button>
           <el-button class="edit_btn" size="small">导出</el-button>
           <el-button v-if="hasPerm('/staff/add')" class="edit_btn" size="small" @click="add">新增</el-button>
         </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index a212942..6b99246 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">人员信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">人员信息</div></el-col>
         <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="checkin">新增</el-button>
+          <el-button class="edit_btn" size="small" @click="checkin">新增来访人员</el-button>
         </el-col>
       </el-row>
 
@@ -28,9 +28,9 @@
       </el-table>
     </div>
 
-    <div style="margin: 25px;">
-      <el-row :gutter="20" class="table-title">
-        <el-col :span="6"><div class="title-header">来访信息</div></el-col>
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
       </el-row>
 
       <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
@@ -92,8 +92,7 @@
     <div style="height: 120px;">
       <el-row type="flex" justify="center">
         <el-col :span="15" style="text-align:center">
-          <el-button @click="resetForm"> 重置 </el-button>
-          <el-button type="primary" style="margin-left: 20px;" @click="saveData"> 保存 </el-button>
+          <el-button type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
         </el-col>
       </el-row>
     </div>
@@ -112,7 +111,7 @@
 const now = new Date()
 
 export default {
-  name: 'VisitorPersonAdd',
+  name: 'VisitorAddPerson',
   components: { VisitorCheckIn, DeptSelect },
   data() {
     return {
@@ -147,8 +146,8 @@
       datePickerOptions: {
         disabledDate(time) {
           const yesterday = new Date(now.getTime() - oneDayTime)
-          const oneMonthLater = new Date(now.getTime() + (oneDayTime * 30))
-          return time.getTime() < yesterday || time.getTime() > oneMonthLater
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
         }
       },
       columns: [
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
new file mode 100644
index 0000000..57bc84a
--- /dev/null
+++ b/src/views/visitor/visitorAddCar.vue
@@ -0,0 +1,450 @@
+<template>
+  <div class="app-container">
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">车辆信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button class="edit_btn" size="small" @click="checkinCar">新增来访车辆</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitCarDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorCarColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delCar(scope.row.plateNumber)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">随车人员信息</div></el-col>
+        <el-col :span="12" :offset="6" class="edit_btns">
+          <el-button :disabled="!hasOneCar" class="edit_btn" size="small" @click="checkinPersonWithCar">新增随车人员</el-button>
+        </el-col>
+      </el-row>
+
+      <el-table :data="dataForm.visitorBaseDTOList" class="table" row-class-name="small-row-class" border>
+        <!--序号列-->
+        <el-table-column align="center" type="index" label="#" width="55"/>
+        <!--内容列-->
+        <el-table-column v-for="column in visitorColumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="column.value === 'idCard'">{{ encrypIdCardNo(scope.row[column.value]) }}</span>
+            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <!--操作列-->
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button type="text" @click="detailVisitor(scope.row)">详情</el-button>
+            <el-button type="text" @click="del(scope.row.idCard)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin: 15px;">
+      <el-row class="table-title">
+        <el-col :span="6"><div class="title-header" style="margin-left: 10px;">来访信息</div></el-col>
+      </el-row>
+
+      <el-form v-loading="formLoading" ref="dataForm" :label-position="labelPosition" :rules="rules" :model="dataForm" class="main-form" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="访客所在单位" prop="deptname">
+              <el-input v-model.trim="dataForm.deptname" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在单位"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" >
+            <el-form-item label="访客所在城市" prop="city">
+              <el-input v-model.trim="dataForm.city" clearable show-word-limit maxlength="30" type="text" placeholder="必填，访客所在城市"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="接访部门" prop="deptid">
+              <dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="接访人员" prop="personId">
+              <el-select v-model="dataForm.personId" placeholder="请选择接访人" filterable clearable>
+                <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="来访事由" prop="matter">
+              <el-input v-model.trim="dataForm.matter" clearable show-word-limit maxlength="30" type="text" placeholder="必填"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="授权时间">
+              <el-radio-group v-model="authTimeType">
+                <el-radio-button v-for="item in authTimeList" :key="item.value" :label="item.value">{{ item.name }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-date-picker
+              :readonly="!customTimeRange"
+              v-model="timeRange"
+              :picker-options="datePickerOptions"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期" />
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="剩余车位">
+              <el-input v-model.trim="dataForm.city" readonly type="text" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div style="height: 120px;">
+      <el-row type="flex" justify="center">
+        <el-col :span="15" style="text-align:center">
+          <el-button :loading="btnLoading" type="primary" style="width: 150px;" @click="saveData"> 保存 </el-button>
+        </el-col>
+      </el-row>
+    </div>
+
+    <visitor-car-check-in ref="checkin" @checked="visitorCheckedIn" />
+  </div>
+</template>
+
+<script>
+import DeptSelect from '@/components/DeptSelect'
+import { daysInMonth, oneDayTime, getDate, formatToString } from '@/utils/calendarUtil'
+import { getStaffByDept } from '@/api/staff'
+import { addVisitorCarAndPerson } from '@/api/visitor'
+import VisitorCarCheckIn from '@/views/visitor/visitorCarCheckIn'
+
+const now = new Date()
+
+export default {
+  name: 'VisitorAddCar',
+  components: { VisitorCarCheckIn, DeptSelect },
+  data() {
+    return {
+      dataForm: {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [], // 来访人员列表
+        visitCarDTOList: [] // 来访车辆列表
+      }, // 表单
+      rules: {
+        deptname: [{ required: true, message: '单位不能为空', trigger: ['blur', 'change'] }],
+        city: [{ required: true, message: '城市不能为空', trigger: ['blur', 'change'] }],
+        deptid: [{ required: true, message: '接访部门不能为空', trigger: ['blur', 'change'] }],
+        personId: [{ required: true, message: '接访人员不能为空', trigger: ['blur', 'change'] }],
+        matter: [{ required: true, message: '来访原因不能为空', trigger: ['blur', 'change'] }]
+      },
+      hasOneCar: false, // 是否已经有一辆来访车辆
+      staffList: [], // 接访人员列表
+      labelPosition: 'right',
+      authTimeList: [{ name: '当日', value: '1' }, { name: '本周', value: '2' }, { name: '本月', value: '3' }, { name: '自定义', value: '4' }],
+      authTimeType: '1',
+      timeRange: [],
+      customTimeRange: false,
+      deptShowTop: true, // 权属单位下拉是否显示顶级
+      deptShow: true,
+      formLoading: false,
+      dialogFormVisible: false,
+      btnLoading: false, // 保存按钮是否不允许点击
+      datePickerOptions: {
+        disabledDate(time) {
+          const yesterday = new Date(now.getTime() - oneDayTime)
+          const oneYearLater = new Date(now.getTime() + (oneDayTime * 360))
+          return time.getTime() < yesterday || time.getTime() > oneYearLater
+        }
+      },
+      visitorCarColumns: [
+        { text: '车牌号', value: 'plateNumber', align: 'center', width: 140 },
+        { text: '司机姓名', value: 'ownerName', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'ownerPhone', align: 'center' }
+      ], // 显示列
+      visitorColumns: [
+        { text: '姓名', value: 'name', align: 'center', width: 140 },
+        { text: '性别', value: 'sexStr', align: 'center' },
+        { text: '身份证号码', value: 'idCard', align: 'center' },
+        { text: '联系方式', value: 'phone', align: 'center' },
+        { text: '体温', value: 'temperature', align: 'center' },
+        { text: '随行车辆', value: 'plateNumber', align: 'center' }
+      ]
+    }
+  },
+  watch: {
+    'authTimeType': function(val) {
+      const weekDay = now.getDay() // 周几
+      const monthDay = now.getDate() // 日期
+      const month = now.getMonth() // 月份
+
+      this.customTimeRange = false
+
+      if (val === '1') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+      } else if (val === '2') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(7 - weekDay + 1, 'DATE')]
+      } else if (val === '3') {
+        this.timeRange = [getDate(0, 'DATE'), getDate(daysInMonth[month + 1] - monthDay + 1, 'DATE')]
+      } else if (val === '4') {
+        this.timeRange = []
+        this.customTimeRange = true
+      }
+    },
+    dataForm: {
+      handler(newValue) {
+        this.hasOneCar = newValue.visitCarDTOList.length > 0
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.resetForm()
+    this.initDateRange()
+  },
+  methods: {
+    // 重置表单
+    resetForm() {
+      this.dataForm = {
+        visitTime: '',
+        deptname: '', // 访客所在单位
+        city: '', // 访客所在城市
+        deptid: '', // 接访部门
+        personId: '', // 接访人员
+        matter: '', // 来访原因
+        startTime: '',
+        endTime: '',
+        visitorBaseDTOList: [],
+        visitCarDTOList: []
+      }
+
+      // 清除验证
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+
+      this.btnLoading = false
+    },
+    initDateRange() {
+      this.authTimeType = '1' // 当日
+      this.dataForm.startTime = getDate(0, 'DATE')
+      this.dataForm.endTime = getDate(1, 'DATE')
+      this.timeRange = [getDate(0, 'DATE'), getDate(1, 'DATE')]
+    },
+    // 身份证号加密显示
+    encrypIdCardNo(idCard) {
+      if (idCard.length > 6) {
+        return idCard.substr(0, 6) + '********' + idCard.substr(14)
+      } else if (idCard) {
+        return idCard
+      } else {
+        return ''
+      }
+    },
+    // 打开访客登记页面
+    checkinCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createCar', this.dialogFormVisible)
+    },
+    checkinPersonWithCar() {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('createPerson', this.dialogFormVisible)
+    },
+    // 一位访客登记完毕
+    visitorCheckedIn(type, visitor) {
+      if (type === 'createCar') {
+        this.dataForm.visitCarDTOList.push(visitor)
+      } else if (type === 'createPerson') {
+        this.dataForm.visitorBaseDTOList.push(visitor)
+      }
+    },
+    detailVisitor(row) {
+      this.dialogFormVisible = true
+      this.$refs.checkin.initDialog('detail', this.dialogFormVisible, row)
+    },
+    delCar(plateNumber) {
+      this.dataForm.visitCarDTOList = this.dataForm.visitCarDTOList.filter(car => {
+        return car.plateNumber !== plateNumber
+      })
+
+      // 删除车辆关联的所有人员
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.plateNumber !== plateNumber
+      })
+    },
+    del(idCard) {
+      this.dataForm.visitorBaseDTOList = this.dataForm.visitorBaseDTOList.filter(visitor => {
+        return visitor.idCard !== idCard
+      })
+
+      // 如果是车主，则删除对应的车辆
+      const carToDel = this.dataForm.visitCarDTOList.filter(car => {
+        return car.idCard === idCard
+      })
+      this.delCar(carToDel[0].plateNumber)
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+
+      this.$refs['dataForm'].validate((valid) => {
+        if (this.dataForm.visitorBaseDTOList.length === 0) {
+          this.$message.error('来访人员列表不能为空')
+        } if (this.hasOneCar === false) {
+          this.$message.error('来访车辆列表不能为空')
+        } else if (valid) {
+          this.dataForm.visitTime = formatToString(now, 'SECOND')
+          addVisitorCarAndPerson(this.dataForm).then(response => {
+            if (response.code === 200) {
+              // 注册成功后清除表单
+              this.resetForm()
+
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$router.push({ path: '/staff/list' })
+              })
+            } else {
+              this.$message.error(response.message)
+              this.btnLoading = false
+            }
+          }).catch(() => {
+            this.$message.error('保存失败，服务器异常')
+            this.btnLoading = false
+          })
+        }
+      })
+    },
+    fetchStaffList() {
+      getStaffByDept({ deptId: this.dataForm.deptid }).then(response => {
+        this.dataForm.personId = ''
+        this.staffList = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+  .hide .el-upload--picture-card {
+    display: none;
+  }
+  .main-form{
+    margin: 0px 30px;
+    margin-top: 20px;
+    padding: 10px;
+    overflow: auto;
+  }
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+  .line{
+    width: 50px;
+    margin-left: 5px;
+  }
+  .hide .el-upload-–picture-card{
+    display: none;
+  }
+  .imgBox{
+    width: 100%;
+    text-align: center;
+  }
+  .avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 238px;
+    line-height: 238px;
+    text-align: center;
+  }
+  .avatar {
+    margin: 10px;
+    display: block;
+  }
+  .id-card-btn{
+    width:126px;
+    margin-left: 12px;
+    margin-top: 20px;
+  }
+
+  $tableTitleHeight:46px;
+  .app-container{
+    margin-bottom:20px
+  }
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>
diff --git a/src/views/visitor/visitorCarCheckIn.vue b/src/views/visitor/visitorCarCheckIn.vue
new file mode 100644
index 0000000..faabda9
--- /dev/null
+++ b/src/views/visitor/visitorCarCheckIn.vue
@@ -0,0 +1,336 @@
+<!-- 访客车辆刷证登记页面 -->
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-well-code="right" label-width="100px">
+      <el-row>
+        <el-col :span="6">
+          <el-row>
+            <div class="avatar">
+              <el-image
+                :src="photo!==''?photo:defaultPhoto"
+                fit="cover"
+                style="width: 130px; height: 175px"/>
+            </div>
+          </el-row>
+          <el-row>
+            <el-button v-show="isEditMode" :disabled="readCard" type="primary" plain class="id-card-btn" @click="readIDCard">读取身份证</el-button>
+          </el-row>
+        </el-col>
+
+        <el-col :span="16">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="姓名" prop="name">
+                <el-input v-model.trim="dataForm.name" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="必填"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="性别" prop="sex">
+                <el-select v-model="dataForm.sex" :disabled="readCard||!isEditMode" placeholder="性别" clearable>
+                  <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="24" >
+              <el-form-item label="身份证号" prop="idCard">
+                <el-input v-model.trim="dataForm.idCard" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="身份证号"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="14">
+              <el-form-item label="联系电话" prop="phone">
+                <el-input v-model.trim="dataForm.phone" :disabled="!isEditMode" type="text" placeholder="联系电话"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="体温" prop="temperature">
+                <el-input v-model.trim="dataForm.temperature" :disabled="!isEditMode" type="text" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="车牌号" prop="plateNumber">
+                <el-input v-show="checkInCar" v-model.trim="dataForm.plateNumber" :disabled="!isEditMode" type="text" placeholder="车牌号"/>
+                <el-select v-show="!checkInCar" v-model="dataForm.plateNumber">
+                  <el-option v-for="item in this.$parent.dataForm.visitCarDTOList" :key="item.plateNumber" :label="item.plateNumber" :value="item.plateNumber" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div v-show="isEditMode" slot="footer" class="dialog-footer">
+      <el-button :loading="btnLoading" :disabled="!readCard" type="primary" @click="saveData">保存</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getSexType } from '@/api/allDict'
+import { getBirthdayByIdNO, getSexByIdNO } from '@/utils/dataAnalysis'
+import { phoneValidator, temValidator, plateValidator } from '@/utils/validate'
+
+export default {
+  name: 'VisitorCarCheckIn',
+  data() {
+    return {
+      isEditMode: true, // 是否为编辑模式，非编辑模式都为只读
+      readCard: false, // 是否从读卡器读卡，未从读卡器读卡不能提交，读卡之后不能编辑
+      checkInCar: true, // 添加车辆还是添加随车人员
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update,detail
+      dataForm: {
+        idCard: '', // 身份证号
+        name: '', // 姓名
+        sex: '', // 性别
+        sexStr: '',
+        phone: '', // 联系电话
+        birthday: '', // 出生日期
+        temperature: '', // 体温
+        photo: '',
+        address: '',
+        plateNumber: '' // 来访车辆车牌号
+      }, // 表单
+      photo: '', // 图片路径
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
+      textMap: {
+        createCar: '来访车辆登记',
+        createPerson: '随车人员登记',
+        detail: '详情'
+      }, // 表头显示标题
+      rules: {
+        phone: [{ required: true, trigger: ['blur', 'change'], validator: phoneValidator }],
+        temperature: [{ required: true, trigger: ['blur', 'change'], validator: temValidator }],
+        plateNumber: [{ required: true, trigger: ['blur', 'change'], validator: plateValidator }]
+      }, // 前端校验规则
+      sexList: [],
+      btnLoading: true // 保存按钮是否不允许点击
+    }
+  },
+  watch: {
+    'dataForm.idCard': function(val) {
+      this.dataForm.birthday = getBirthdayByIdNO(val)
+      this.dataForm.sex = getSexByIdNO(val)
+    }
+  },
+  created() {
+    // 初始化性别字典值列表
+    getSexType().then(response => {
+      this.sexList = response.data
+    })
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.btnLoading = false
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+
+      this.resetForm()
+
+      if (dialogStatus === 'createCar') { // 如果是新增，清除验证
+        this.isEditMode = true
+        this.readCard = false
+        this.checkInCar = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'createPerson') {
+        this.isEditMode = true
+        this.readCard = false
+        this.checkInCar = false
+
+        // 默认选中第一辆车
+        if (this.$parent.dataForm.visitCarDTOList.length > 0) {
+          this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
+        }
+
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'detail') {
+        this.isEditMode = false
+
+        this.dataForm = {
+          idCard: row.idCard,
+          name: row.name,
+          phone: row.phone,
+          temperature: row.temperature,
+          address: row.address,
+          plateNumber: row.plateNumber
+        }
+
+        this.photo = row.photo
+      }
+    },
+    // 清除数据
+    resetForm() {
+      this.dataForm = {
+        idCard: '', // 身份证号
+        name: '', // 姓名
+        sex: '', // 性别
+        sexStr: '',
+        phone: '', // 联系电话
+        birthday: '', // 出生日期
+        temperature: '', // 体温
+        photo: '',
+        address: '',
+        plateNumber: ''
+      }
+
+      this.photo = ''
+      this.btnLoading = false
+      this.readCard = false
+
+      this.isEditMode = true
+      this.readCard = false
+    },
+    readIDCard() {
+      const that = this
+      this.ws = that.$root.ws
+      if (this.ws === null) {
+        this.ws = new WebSocket(that.$root.wsURL)
+        // 注册各类回调
+        this.ws.onopen = function() {
+          that.ws.send('ReadIdCard')
+        }
+        this.ws.onclose = function() {
+          that.$message.info('与ICS连接断开')
+          that.$root.ws = null
+        }
+        this.ws.onerror = function() {
+          that.$message.error('与ICS通信发生错误')
+        }
+        that.$root.ws = this.ws
+      } else {
+        this.ws.send('ReadIdCard')
+      }
+      this.ws.onmessage = function(receiveMsg) {
+        const data = JSON.parse(receiveMsg.data)
+        if (data !== '' && data.message !== 'fail') {
+          that.dataForm.idCard = data.IdCardNo
+          that.dataForm.name = data.Name
+          that.photo = data.Photo
+          that.dataForm.photo = data.Photo
+          that.dataForm.address = data.Address
+          that.dataForm.sexStr = data.Sex
+
+          // 读过身份证了
+          that.readCard = true
+        } else {
+          that.$message.warning('读卡失败')
+        }
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+
+      this.visitorCheckedIn()
+    },
+    // 新增数据
+    visitorCheckedIn: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid && this.readCard) {
+          // 车辆列表
+          const carList = this.$parent.dataForm.visitCarDTOList
+          let isCarChecked = false
+          // 访客列表
+          const list = this.$parent.dataForm.visitorBaseDTOList
+          let isChecked = false
+
+          // 添加车辆
+          if (this.dialogStatus === 'createCar') {
+            // 遍历父组件的carList，检查是否已经登记过
+            carList.forEach(item => {
+              if (item.plateNumber === this.dataForm.plateNumber) {
+                isCarChecked = true
+              }
+            })
+
+            // 首先添加车辆
+            if (isCarChecked === true) {
+              this.$message.error('该辆车已经登记过，请检查')
+
+              this.$nextTick(() => {
+                this.btnLoading = false
+                this.readCard = false
+              })
+            } else {
+              // 发送信号登记车辆
+              const car = {
+                plateNumber: this.dataForm.plateNumber,
+                idCard: this.dataForm.idCard,
+                ownerName: this.dataForm.name,
+                ownerPhone: this.dataForm.phone
+              }
+              this.$emit('checked', 'createCar', car)
+
+              // 发送信号让父组件添加人员
+              this.$emit('checked', 'createPerson', this.dataForm)
+
+              this.dialogFormVisible = false
+            }
+          } else if (this.dialogStatus === 'createPerson') {
+            // 遍历父组件的visitorBaseDTOList，检查是否已经登记过
+            list.forEach(item => {
+              if (item.idCard === this.dataForm.idCard) {
+                isChecked = true
+              }
+            })
+
+            if (isChecked === true) {
+              this.$message.error('该身份证已经登记过，请检查')
+
+              this.$nextTick(() => {
+                this.btnLoading = false
+                this.readCard = false
+              })
+            } else {
+              // 发送信号让父组件添加
+              this.$emit('checked', 'createPerson', this.dataForm)
+
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.dataForm.plateNumber = this.$parent.dataForm.visitCarDTOList[0].plateNumber
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.dialogFormVisible = false
+              })
+            }
+          }
+        } else {
+          this.btnLoading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .el-select{
+    width: 100%;
+  }
+  .el-date-editor{
+    width: 100%;
+  }
+  .dialog-footer {
+    margin-top: -20px;
+    text-align: center;
+  }
+</style>
diff --git a/src/views/visitor/visitorCheckIn.vue b/src/views/visitor/visitorCheckIn.vue
index db4ffb4..7c536cb 100644
--- a/src/views/visitor/visitorCheckIn.vue
+++ b/src/views/visitor/visitorCheckIn.vue
@@ -54,29 +54,29 @@
             </el-col>
           </el-row>
 
-          <el-row>
-            <el-col :span="24" >
-              <el-form-item label="出生日期" prop="birthday">
-                <el-date-picker
-                  v-model="dataForm.birthday"
-                  :editable="false"
-                  :readonly="readCard"
-                  :disabled="!isEditMode"
-                  type="date"
-                  style="width: 100%"
-                  value-format="yyyy-MM-dd"
-                  placeholder="选择出生日期"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <!--          <el-row>-->
+          <!--            <el-col :span="24" >-->
+          <!--              <el-form-item label="出生日期" prop="birthday">-->
+          <!--                <el-date-picker-->
+          <!--                  v-model="dataForm.birthday"-->
+          <!--                  :editable="false"-->
+          <!--                  :readonly="readCard"-->
+          <!--                  :disabled="!isEditMode"-->
+          <!--                  type="date"-->
+          <!--                  style="width: 100%"-->
+          <!--                  value-format="yyyy-MM-dd"-->
+          <!--                  placeholder="选择出生日期"/>-->
+          <!--              </el-form-item>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
 
-          <el-row :gutter="20">
-            <el-col :span="24">
-              <el-form-item label="住址" prop="address">
-                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <!--          <el-row :gutter="20">-->
+          <!--            <el-col :span="24">-->
+          <!--              <el-form-item label="住址" prop="address">-->
+          <!--                <el-input v-model.trim="dataForm.address" :readonly="readCard" :disabled="!isEditMode" type="text" placeholder="非必填"/>-->
+          <!--              </el-form-item>-->
+          <!--            </el-col>-->
+          <!--          </el-row>-->
         </el-col>
       </el-row>
     </el-form>