1、口门门禁管理系统--->长期车辆进港管理模块--->分公司车辆信息--->车辆进出记录

src/views/longtermvehicleinputportmessage/vehiclemessage/components/list.vue

@@ -81,6 +81,7 @@
       <el-table-column prop="USER_NAME" label="车辆责任人" align="center"/>
       <el-table-column label="操作" align="center" width="480">
         <template slot-scope="{row}">
+          <el-button type="warning" icon="el-icon-more" size="mini" @click="vehicleInOutRecordBtn(row.LICENCE_NO)">车辆进出记录</el-button>
           <el-button icon="el-icon-view" size="mini" @click="showDetail(row.VEHICLE_ID)">查看</el-button>
           <el-button type="primary" icon="el-icon-edit" size="mini" @click="openEditDialogEditBtn(row.VEHICLE_ID)">修改</el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSingleDataDeleteBtn(row.VEHICLE_ID, row.USER_ID, row.EMPLOYEE_VEHICLE_USER_ID)">删除</el-button>
@@ -820,6 +821,11 @@ export default {
           }
         }
       }
+    },
+    // 车辆进出记录按钮的点击事件
+    vehicleInOutRecordBtn(LICENCE_NO) {
+      this.$parent.activeName = 'Record'
+      this.$parent.LICENCE_NO = LICENCE_NO
     }
   }
 }

src/views/longtermvehicleinputportmessage/vehiclemessage/components/record.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="口门名称：" label-width="110px">
+            <el-input v-model="searchForm.KEYWORDS" style="width:206px" placeholder="请输入内容"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="口门状态" label-width="110px">
+            <el-select v-model="searchForm.GATE_STATUS" placeholder="请选择">
+              <el-option v-for="(item,index) in StatusList" :key="index" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="所属区域" label-width="110px">
+            <el-select v-model="searchForm.REGION_BIANMA" placeholder="请选择">
+              <el-option v-for="(item,index) in RegionList" :key="index" :label="item.NAME" :value="item.BIANMA"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves type="success" icon="el-icon-refresh" @click="goKeyReset">
+              重置
+            </el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table
+      v-loading="listLoading"
+      ref="queryTable"
+      :data="varList"
+      :cell-style="getPlateColor"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="REGION_NAME" label="区域" width="100px" align="center"/>
+      <el-table-column prop="AREA_NAME" label="口门名称" width="100px" align="center"/>
+      <el-table-column prop="AREA_LEVEL_NAME" label="口门级别" width="100px" align="center"/>
+      <el-table-column prop="vehicle_plate_number" label="车牌号" width="100px" align="center"/>
+      <!--      <el-table-column prop="vehicle_category_name" label="车辆类型" width="150px" align="center"/>-->
+      <el-table-column prop="VEHICLE_TYPE_NAME" label="车辆类型" width="150px" align="center"/>
+      <!--      <el-table-column prop="vehicle_filing_method" label="车辆所属类型" width="100px" align="center"/>-->
+      <el-table-column prop="VEHICLE_BELONG_TYPE_NAME" label="车辆所属类型" width="100px" align="center"/>
+      <el-table-column prop="vehicle_arrival_status" label="车辆在港状态" width="100px" align="center"/>
+      <el-table-column prop="VEHICLE_DEPARTMENT_NAME" label="车辆所属部门" align="center"/>
+      <!--      <el-table-column prop="vehicle_filing_info_recording_org" label="车辆所属部门" align="center"/>-->
+      <el-table-column prop="USER_NAME" label="车辆责任人" width="150ox" align="center"/>
+      <!--      <el-table-column prop="vehicle_contact_name" label="车辆联系人" width="150ox" align="center"/>-->
+      <!--      <el-table-column prop="vehicle_contact_phone_number" label="联系人手机号" width="120px" align="center"/>-->
+      <el-table-column prop="vehicle_arrival_barrier" label="入港闸口" align="center"/>
+      <el-table-column prop="vehicle_arrival_time" label="入港时间" align="center"/>
+      <el-table-column prop="vehicle_departure_barrier" label="离港闸口" align="center"/>
+      <el-table-column prop="vehicle_departure_time" label="离港时间" align="center"/>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+        <el-button plain type="info" @click="returnBtn">返回</el-button>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+    </div>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+import safetyFlowChart from '../../../hiddenUtil/safetyFlowChart'
+export default {
+  components: { Pagination, safetyFlowChart },
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      // 列表展示的数据
+      varList: [],
+      // 查询表单的数据
+      searchForm: {
+        LICENCE_NO: '', // 车牌号
+        KEYWORDS: '',
+        GATE_STATUS: '',
+        REGION_BIANMA: ''
+      },
+      RegionList: [],
+      StatusList: [
+        { value: '0', label: '停用' },
+        { value: '1', label: '正常' },
+        { value: '2', label: '暂时关闭' }
+      ]
+    }
+  },
+  created() {
+    this.searchForm.LICENCE_NO = this.$parent.LICENCE_NO
+    this.getPageList() // 获取分页列表要展示的数据
+  },
+  methods: {
+    getRowKey(row) {
+      return row.id_sequence
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.queryTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    resetSearch() {
+      this.searchForm.KEYWORDS = ''
+      this.searchForm.GATE_STATUS = ''
+      this.searchForm.REGION_BIANMA = ''
+    },
+    goKeyReset() {
+      this.resetSearch()
+      this.getQuery()
+    },
+    // 获取列表
+    getPageList() {
+      this.listLoading = true
+      requestFN(
+        '/vehiclemessage/getInOutPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchForm
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 车辆进出记录按钮的点击事件
+    returnBtn() {
+      this.$parent.activeName = 'List'
+    },
+    getPlateColor(row, column, rowIndex, columnIndex) {
+      if (row.column.label === '车牌号') {
+        const colorMap = {
+          蓝牌: 'background-color: blue;color: white',
+          黄牌: 'background-color: yellow;color: black',
+          新能源: 'background-color: green;color: white',
+          白牌: 'background-color: gray;color: black',
+          黑牌: 'background-color: black;color: white',
+          其他: 'background-color: white;color: black',
+          default: 'background-color: white;color: black'
+        }
+        // const plateColor = row.row.vehicle_plate_color || 'default'
+        const plateColor = row.row.LICENCE_TYPE_NAME || 'default'
+        const backgroundColorAndColor = colorMap[plateColor] || colorMap.default
+        return backgroundColorAndColor
+      }
+    }
+  }
+}
+</script>

src/views/longtermvehicleinputportmessage/vehiclemessage/index.vue

@@ -1,19 +1,23 @@
 <template>
   <div>
     <List v-show="activeName==='List'" ref="list" />
+    <Record v-if="activeName==='Record'" />
   </div>
 </template>
 
 <script>
 import List from './components/list'
+import Record from './components/record'
 export default {
   components: {
-    List
+    List,
+    Record
   },
   data() {
     return {
       activeName: 'List',
-      INSPECTION_ID: ''
+      INSPECTION_ID: '',
+      LICENCE_NO: ''
     }
   },
   watch: {