From 6e77573ac29b83708923349f19c42c8702c3d86f Mon Sep 17 00:00:00 2001
From: huangyuxuan <huangyuxuan@zcloudchina.com>
Date: Tue, 7 Jan 2025 09:24:51 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD](hyx=5F?=
 =?UTF-8?q?=E9=97=A8=E5=8F=A3=E9=97=A8=E7=A6=81):=20=20-=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E9=97=A8=E5=8F=A3=E9=97=A8=E7=A6=81=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jgCarMessage/components/List.vue          | 117 +++
 .../jgCarMessage/components/car_view.vue      | 922 ++++++++++++++++++
 .../jgCarMessage/components/record.vue        | 205 ++++
 .../longtermvehicle/jgCarMessage/index.vue    |  36 +
 4 files changed, 1280 insertions(+)
 create mode 100644 src/views/longtermvehicle/jgCarMessage/components/List.vue
 create mode 100644 src/views/longtermvehicle/jgCarMessage/components/car_view.vue
 create mode 100644 src/views/longtermvehicle/jgCarMessage/components/record.vue
 create mode 100644 src/views/longtermvehicle/jgCarMessage/index.vue

diff --git a/src/views/longtermvehicle/jgCarMessage/components/List.vue b/src/views/longtermvehicle/jgCarMessage/components/List.vue
new file mode 100644
index 0000000..6481542
--- /dev/null
+++ b/src/views/longtermvehicle/jgCarMessage/components/List.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="90px">
+      <el-row>
+        <el-col :span="4">
+          <el-form-item label="分公司名称">
+            <el-input v-model="searchForm.CORP_NAME" placeholder="分公司名称"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="4">
+          <el-form-item label-width="10px">
+            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
+              搜索
+            </el-button>
+            <el-button v-waves class="filter-item" 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="multipleTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="NAME" label="部门名称" />
+      <el-table-column prop="DEPT_TYPE_NAME" label="部门类型" />
+      <el-table-column prop="USER_COUNT" label="部门人数" />
+      <el-table-column label="操作" align="left" width="110">
+        <template slot-scope="{row}">
+          <el-button type="success" icon="el-icon-view" size="mini" @click="handleEdit(row)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectTree from '@/components/SelectTree'
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+export default {
+  components: {Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      searchForm: {
+        CORP_NAME: ''
+      },
+      total: 0,
+      varList: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getRowKey(row) {
+      return row.CORPINFO_ID
+    },
+    // 搜索
+    getQuery() {
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      this.listLoading = true
+      requestFN(
+        '/mkmjManagement/getJgDepartmentList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchForm
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.deptList
+        this.total = data.page.totalResult
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 查看
+    handleEdit(row) {
+      console.log('--------------------------')
+      this.$parent.activeName = 'CarView'
+      this.$parent.CORPINFO_ID = row.CORPINFO_ID
+    },
+    goKeyReset() {
+      this.searchForm = {
+        CORP_NAME: ''
+      }
+      this.getList()
+    }
+  }
+}
+</script>
diff --git a/src/views/longtermvehicle/jgCarMessage/components/car_view.vue b/src/views/longtermvehicle/jgCarMessage/components/car_view.vue
new file mode 100644
index 0000000..d924c50
--- /dev/null
+++ b/src/views/longtermvehicle/jgCarMessage/components/car_view.vue
@@ -0,0 +1,922 @@
+<template>
+  <div class="icons-container">
+    <el-container>
+      <el-aside width="200px" style="background-color:#fff">
+        <div class="filter-btn-group">
+          <el-tree
+            v-loading="treeLoading"
+            ref="tree"
+            :data="treeData"
+            :props="defaultProps"
+            :filter-node-method="filterNode"
+            class="filter-tree"
+            @node-click="handleNodeClick"/>
+        </div>
+      </el-aside>
+      <el-main>
+        <el-form label-width="60px">
+          <el-row>
+            <el-col :span="2">
+              <el-form-item label-width="0px">
+                <el-button v-show="DEPARTMENT_ID != '0'" icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
+              </el-form-item>
+            </el-col>
+            <el-col :span="3">
+              <el-form-item label="车牌号">
+                <el-input v-model="searchForm.LICENCE_NO" placeholder="请输入车牌号..." />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆类型" prop="VEHICLE_TYPE" label-width="100px">
+                <SelectTree
+                  ref="selectTree_Search1"
+                  :clearable="false"
+                  :options="vehicleTypeList"
+                  :props="vehicleDefaultProps"
+                  v-model="searchForm.VEHICLE_TYPE"
+                  placeholder="请选择车辆类型"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID" label-width="100px">
+                <SelectTree
+                  ref="selectTree_Search2"
+                  :clearable="false"
+                  :options="treeData"
+                  :props="defaultProps"
+                  v-model="searchForm.VEHICLE_DEPARTMENT_ID"
+                  placeholder="请选择车辆所属部门"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="m-l-10">
+              <el-form-item label="车辆责任人" label-width="100px">
+                <el-input v-model="searchForm.USER_NAME" placeholder="请输入车辆责任人..." />
+              </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="vehicleMessageTable"
+          :data="varList"
+          :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="CORPINFO_NAME" label="分公司名称" align="center" />
+          <el-table-column prop="LICENCE_NO" label="车牌号" align="center" />
+          <el-table-column label="车牌类型" align="center">
+            <template slot-scope="{row}">
+              {{ translateLicenceType(row.LICENCE_TYPE) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="车辆类型" align="center">
+            <template slot-scope="{row}">
+              {{ translateVehicleType(row.VEHICLE_TYPE) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="DEPARTMENT_NAME" label="车辆所属部门" align="center" />
+          <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>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="page-btn-group">
+          <div>
+            <el-button type="primary" icon="el-icon-plus" @click="openAddDialogAddBtn">新增</el-button>
+          </div>
+          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getPageList" />
+        </div>
+        <!--  添加车辆信息  -->
+        <el-dialog :visible.sync="addDialogVisible" title="添加车辆信息" width="600px">
+          <el-form v-if="addDialogVisible" ref="addForm" :model="addForm" label-width="170px" style="padding:0 20px; width: 500px;">
+            <el-form-item :rules="[{required: true}]" label="车牌号">
+              <el-input v-model="addForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoAdd()"/>
+            </el-form-item>
+            <!-- 白牌、蓝牌、黄牌、绿牌、黑牌 下拉框-->
+            <el-form-item :rules="[{required: true}]" label="车牌类型" prop="LICENCE_TYPE">
+              <SelectTree
+                ref="selectTree_add2"
+                :clearable="false"
+                :options="licenceTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.LICENCE_TYPE"
+                placeholder="请选择车牌类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 货车、轿车、大巴客车  下拉框-->
+            <el-form-item :rules="[{required: true}]" label="车辆类型" prop="VEHICLE_TYPE">
+              <SelectTree
+                ref="selectTree_add3"
+                :clearable="false"
+                :options="vehicleTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.VEHICLE_TYPE"
+                placeholder="请选择车辆类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 员工车辆、单位车辆、外部车辆 下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
+              <SelectTree
+                ref="selectTree_add4"
+                :clearable="false"
+                :options="vehicleBelongTypeList"
+                :props="vehicleDefaultProps"
+                v-model="addForm.VEHICLE_BELONG_TYPE"
+                placeholder="请选择车辆所属类型"
+                style="width: 300px"/>
+            </el-form-item>
+            <!-- 车辆所属部门下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
+              <SelectTree
+                ref="selectTree_add1"
+                :clearable="false"
+                :options="treeData"
+                :props="defaultProps"
+                v-model="addForm.VEHICLE_DEPARTMENT_ID"
+                placeholder="请选择车辆所属部门"
+                style="width: 300px"
+                @change="addUserList"/>
+            </el-form-item>
+            <!-- 车辆责任人下拉框 -->
+            <el-form-item :rules="[{required: true}]" label="车辆责任人" prop="USER_ID">
+              <el-select :value="addForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdAddChange">
+                <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID"/>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="addDialogCancelBtn">取 消</el-button>
+            <el-button type="primary" @click="addDialogConfirmBtn">确 定</el-button>
+          </div>
+        </el-dialog>
+        <el-dialog :visible.sync="editDialogVisible" title="修改" width="600px">
+          <el-form ref="editForm" :model="editForm" label-width="170px" style="width: 500px;">
+            <el-form-item :rules="[{required: true}]" label="车牌号">
+              <el-input v-model="editForm.LICENCE_NO" :autosize="{ minRows: 1}" type="text" maxlength="300" placeholder="这里输入车牌号..." @blur="goCheckLicenceNoUpdate()"/>
+            </el-form-item>
+            <el-form-item label="车牌类型" prop="LICENCE_TYPE">
+              <el-select :value="editForm.LICENCE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in licenceTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车辆类型" prop="VEHICLE_TYPE">
+              <el-select :value="editForm.VEHICLE_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in vehicleTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="车辆所属类型" prop="VEHICLE_BELONG_TYPE">
+              <el-select :value="editForm.VEHICLE_BELONG_TYPE" clearable placeholder="请选择" @visible-change="$forceUpdate()">
+                <el-option v-for="item in vehicleBelongTypeList" :key="item.ID" :label="item.NAME" :value="item.ID" />
+              </el-select>
+            </el-form-item>
+            <!-- 车辆所属部门下拉框 -->
+            <el-form-item label="车辆所属部门" prop="VEHICLE_DEPARTMENT_ID">
+              <SelectTree
+                ref="selectTree_edit"
+                :clearable="true"
+                :options="treeData"
+                :props="defaultProps"
+                v-model="editForm.VEHICLE_DEPARTMENT_ID"
+                placeholder="请选择车辆所属部门"
+                style="width: 300px"
+                @change="updateUserList"/>
+            </el-form-item>
+            <!-- 车辆责任人下拉框 -->
+            <el-form-item label="车辆责任人" prop="USER_ID">
+              <el-select :value="editForm.USER_ID" clearable placeholder="请选择" @visible-change="$forceUpdate()" @change="userIdUpdateChange">
+                <el-option v-for="item in userList" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="editDialogCancelBtn">取 消</el-button>
+            <el-button type="primary" @click="editDialogConfirmBtn">提 交</el-button>
+          </div>
+        </el-dialog>
+        <el-dialog :visible.sync="detailDialogVisible" title="详情" width="600px">
+          <el-form ref="form" :model="detailForm" label-width="170px" style="width: 500px;">
+            <el-form-item label="车牌号">
+              <el-input v-model="detailForm.LICENCE_NO" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车牌类型">
+              <el-input v-model="detailForm.LICENCE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆类型">
+              <el-input v-model="detailForm.VEHICLE_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆所属类型">
+              <el-input v-model="detailForm.VEHICLE_BELONG_TYPE" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆所属部门">
+              <el-input v-model="detailForm.VEHICLE_DEPARTMENT_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+            <el-form-item label="车辆责任人">
+              <el-input v-model="detailForm.USER_ID" :disabled="true" :autosize="{ minRows: 1}" type="text" maxlength="300"/>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="detailDialogReturnBtn">返回</el-button>
+          </div>
+        </el-dialog>
+      </el-main>
+    </el-container>
+
+    <div class="heightt"/>
+  </div>
+</template>
+
+<script>
+import SelectTree from '@/components/SelectTree'
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+export default {
+  components: { Pagination, SelectTree },
+  directives: { waves },
+  data() {
+    return {
+      config: config,
+      treeLoading: false,
+      listLoading: true,
+      add: true,
+      del: true,
+      edit: true,
+      readonly: true,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      defaultProps: {
+        value: 'id',
+        children: 'nodes',
+        label: 'name'
+      },
+      treeData: [],
+      // 从此处开始写自己的属性
+      loginUserCorpInfoId: '', // 从接口获取用户所属企业
+      CORPINFO_ID: '', // 企业id
+      DEPARTMENT_ID: '', // 部门ID
+      KEYWORDS: '',
+      loginUserId: '', // 登录人ID
+      // 车牌类型列表
+      licenceTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '白牌' },
+        { ID: '1', NAME: '蓝牌' },
+        { ID: '2', NAME: '黄牌' },
+        { ID: '3', NAME: '绿牌' },
+        { ID: '4', NAME: '黑牌' }
+      ],
+      // 车辆类型列表
+      vehicleTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '货车' },
+        { ID: '1', NAME: '轿车' },
+        { ID: '2', NAME: '大巴客车' }
+      ],
+      // 车辆所属类型列表
+      vehicleBelongTypeList: [
+        // { ID: '', NAME: '请选择' },
+        { ID: '0', NAME: '员工车辆' },
+        { ID: '1', NAME: '单位车辆' }
+        // { ID: '2', NAME: '外部车辆' }
+      ],
+      // 车辆下拉树默认属性
+      vehicleDefaultProps: {
+        value: 'ID',
+        label: 'NAME',
+        children: 'nodes'
+      },
+      departmentTreeData: [],
+      // inspectionTypeList: [], //字典列表
+      // 列表展示的数据
+      varList: [],
+      // 查询表单的数据
+      searchForm: {
+        DEPARTMENT_ID: '',
+        VEHICLE_ID: '', // 车辆ID(基础属性)
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_DEPARTMENT_ID: '' // 车辆所属部门ID
+      },
+      // 添加表单的数据
+      addForm: {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门id
+        VEHICLE_DEPARTMENT_NAME: '', // 车辆所属部门名称
+        USER_ID: '', // 车辆责任人
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人id
+        EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
+        DEPARTMENT_NAME: '', // 部门名称
+        DEPARTMENT_ID: '',
+        USER_NAME: '' // 车辆责任人姓名
+      },
+      // 修改表单的数据
+      editForm: {
+        VEHICLE_ID: '', // 车辆id(基础属性)
+        LICENCE_NO: '', // 车牌号
+        OLD_LICENCE_NO: '', // 修改前的车牌号
+        USER_ID: '', // 车辆责任人
+        USER_NAME: '', // 车辆责任人姓名
+        LICENCE_TYPE: '', // 车牌类型
+        VEHICLE_TYPE: '', // 车辆类型
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        DEPARTMENT_NAME: '', // 车辆所属部门名称
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        EMPLOYEE_VEHICLE_USER_NAME: '', // 车辆所属人姓名
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        VEHICLE_DEPARTMENT_NAME: '' // 车辆所属部门名称
+      },
+      // 详情表单的数据
+      detailForm: {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        USER_ID: '', // 车辆责任人id
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        LICENCE_TYPE: null, // 车牌类型
+        VEHICLE_TYPE: null // 车辆类型
+      },
+      addDialogVisible: false, // 添加弹窗的展示与不展示
+      editDialogVisible: false, // 编辑弹窗的展示与不展示
+      detailDialogVisible: false, // 详情弹窗的展示与不展示
+      userList: [], // 部门用户列表
+      selectTree_edit: []
+    }
+  },
+  created() {
+    // 调用自己的方法
+    this.getLoginUserInfo() // 获取当前登陆用户的信息
+    this.CORPINFO_ID = this.$parent.CORPINFO_ID
+    this.updateBranchName(this.CORPINFO_ID)
+    this.getPageList() // 获取分页列表要展示的数据
+
+  },
+  methods: {
+    // 之前旧的
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    handleNodeClick(node, data, value) {
+      this.searchForm.VEHICLE_DEPARTMENT_ID = node.id
+      this.getPageList(node.id)
+    },
+    updateBranchName(ID) {
+      requestFN(
+        '/department/listTreeCorpInfo',
+        // '/department/listTree',
+        {
+          CORPINFO_ID: ID
+        }
+      ).then((data) => {
+        this.treeData = JSON.parse(data.zTreeNodes)
+      }).catch((e) => {
+      })
+    },
+    goReturn() {
+      this.$parent.activeName = 'List'
+    },
+    // 从此处开始写自己的事件
+    getRowKey(row) {
+      return row.VEHICLE_ID
+    },
+    translateLicenceType(id) {
+      for (var i = 0; i < this.licenceTypeList.length; i++) {
+        if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
+      }
+    },
+    translateVehicleType(id) {
+      for (var i = 0; i < this.vehicleTypeList.length; i++) {
+        if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
+      }
+    },
+    translateVehicleBelongType(id) {
+      for (var i = 0; i < this.vehicleBelongTypeList.length; i++) {
+        if (this.vehicleBelongTypeList[i].ID == id) return this.vehicleBelongTypeList[i].NAME
+      }
+    },
+    getLoginUserInfo() { // 获取登录人信息
+      return new Promise((resolve) => {
+        requestFN(
+          '/user/goEditMyInfo',
+          {}
+        ).then((data) => {
+          console.info(data.pd)
+          this.loginUserId = data.pd.USER_ID
+          // this.loginUserName = data.pd.NAME
+          this.loginUserCorpInfoId = data.pd.CORPINFO_ID
+          // this.loginUserDepartmentName = data.pd.DEPARTMENT_NAME
+          resolve('ok')
+        }).catch((e) => {
+
+        })
+      })
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.vehicleMessageTable.clearSelection() // 先置空表格再查询
+      this.getPageList()
+    },
+    goKeyReset() {
+      this.resetSearch()
+      this.getQuery()
+    },
+    // 获取列表
+    getPageList() {
+      console.log('22222222222222222222222222222')
+      this.listLoading = true
+      requestFN(
+        'vehiclemessage/getPageList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          ...this.searchForm,
+          'CORPINFO_ID': this.CORPINFO_ID,
+          CAR_FROM: 0
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        // this.hasButton()
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 打开新增弹窗的新增按钮
+    openAddDialogAddBtn() {
+      this.addDialogVisible = true
+      this.reSetAddDialog()
+      this.ISCHECK = false
+    },
+    // 添加弹窗的取消按钮
+    addDialogCancelBtn() {
+      this.addDialogVisible = false
+    },
+    // 查看弹窗的返回按钮
+    detailDialogReturnBtn() {
+      this.detailDialogVisible = false
+    },
+    // 置空添加弹窗
+    reSetAddDialog() {
+      this.addForm.LICENCE_NO = ''
+      this.addForm.USER_ID = ''
+      this.addForm.VEHICLE_DEPARTMENT_ID = ''
+      this.addForm.LICENCE_TYPE = ''
+      this.addForm.VEHICLE_TYPE = ''
+      this.addForm.VEHICLE_BELONG_TYPE = ''
+      this.addForm.EMPLOYEE_VEHICLE_USER_ID = ''
+      this.userList = []
+      this.addForm.DEPARTMENT_NAME = ''
+      this.addForm.DEPARTMENT_ID = ''
+    },
+    // 添加弹窗的确定按钮
+    addDialogConfirmBtn() {
+      if (this.addForm.LICENCE_NO !== null && this.addForm.LICENCE_NO === '') {
+        this.$message({
+          message: '车牌号不能为空',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.LICENCE_TYPE !== null && this.addForm.LICENCE_TYPE === '') {
+        this.$message({
+          message: '请选择车牌类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_TYPE !== null && this.addForm.VEHICLE_TYPE === '') {
+        this.$message({
+          message: '请选择车辆类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_BELONG_TYPE !== null && this.addForm.VEHICLE_BELONG_TYPE === '') {
+        this.$message({
+          message: '请选择车辆所属类型',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_DEPARTMENT_ID !== null && this.addForm.VEHICLE_DEPARTMENT_ID === '') {
+        this.$message({
+          message: '请选择车辆所属部门',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.USER_ID !== null && this.addForm.USER_ID === '') {
+        this.$message({
+          message: '请选择车辆责任人',
+          type: 'error'
+        })
+        return false
+      }
+      if (this.addForm.VEHICLE_BELONG_TYPE === '0') {
+        this.addForm.EMPLOYEE_VEHICLE_USER_ID = this.addForm.USER_ID // 车辆所属人id
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = this.addForm.USER_NAME // 车辆所属人姓名
+      } else {
+        this.addForm.EMPLOYEE_VEHICLE_USER_ID = '' // 车辆所属人id
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = '' // 车辆所属人姓名
+      }
+      this.addRequest()
+    },
+    addRequest() {
+      requestFN(
+        'vehiclemessage/addVehicleMessage',
+        {
+          ...this.addForm,
+          'CORPINFO_ID': this.CORPINFO_ID
+        }
+      ).then((data) => {
+        if (data.result === 'fail') {
+          this.$message({
+            message: data.msg,
+            type: 'error'
+          })
+        } else {
+          this.$message.success('车辆信息添加成功')
+          this.getPageList() // 重新加载列表
+          this.addDialogVisible = false
+        }
+      }).catch((e) => {
+      })
+    },
+    // 打开编辑弹窗的编辑按钮
+    openEditDialogEditBtn(VEHICLE_ID) {
+      this.editForm = {
+        VEHICLE_ID: VEHICLE_ID, // 车辆id(基础属性)
+        LICENCE_NO: '', // 车牌号
+        OLD_LICENCE_NO: '', // 修改前的车牌号
+        USER_ID: '', // 车辆责任人
+        EMPLOYEE_VEHICLE_USER_ID: '', // 车辆所属人
+        VEHICLE_DEPARTMENT_ID: '' // 车辆归属公司或责任公司（车辆所属部门）
+      }
+      this.userList = []
+      this.editDialogVisible = true
+      // 提供查询接口回显数据
+      requestFN(
+        'vehiclemessage/updateShowVehicleMessage',
+        {
+          VEHICLE_ID: VEHICLE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.editForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.editForm.OLD_LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.editForm.USER_ID = data.pd.USER_ID // 车辆责任人
+          this.editForm.LICENCE_TYPE = String(data.pd.LICENCE_TYPE) // 车牌类型
+          this.editForm.VEHICLE_TYPE = String(data.pd.VEHICLE_TYPE) // 车辆类型
+          this.editForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : data.pd.VEHICLE_BELONG_TYPE // 车辆所属类型
+          if ('VEHICLE_DEPARTMENT_ID' in data.pd) { // 存在车辆归属部门id
+            const node = {}
+            node.id = data.pd.VEHICLE_DEPARTMENT_ID
+            // this.$refs.selectTree_edit.clearHandle() // 这句代码会报错，注释掉了
+            this.editForm.VEHICLE_DEPARTMENT_ID = data.pd.VEHICLE_DEPARTMENT_ID
+            this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
+              this.$refs.selectTree_edit.handleNodeClick(node)
+            })
+          }
+        } else {
+          this.$message({
+            message: '数据回显失败',
+            type: 'error'
+          })
+        }
+      }).catch((e) => {
+      })
+    },
+    editDialogCancelBtn() {
+      this.editDialogVisible = false
+    },
+    // 查看按钮(展示详情)
+    showDetail(VEHICLE_ID) {
+      this.detailForm = {
+        LICENCE_NO: '', // 车牌号
+        VEHICLE_DEPARTMENT_ID: '', // 车辆所属部门
+        VEHICLE_BELONG_TYPE: '', // 车辆所属类型
+        USER_ID: '', // 车辆责任人
+        EMPLOYEE_VEHICLE_USER_ID: '', // 员工车辆所属人
+        LICENCE_TYPE: null, // 车牌类型
+        VEHICLE_TYPE: null // 车辆类型
+      }
+      this.detailDialogVisible = true
+      // 提供查询接口回显数据
+      requestFN(
+        'vehiclemessage/detailVehicleMessage',
+        {
+          VEHICLE_ID: VEHICLE_ID
+        }
+      ).then((data) => {
+        if (data.result === 'success') {
+          this.detailForm.LICENCE_NO = data.pd.LICENCE_NO // 车牌号
+          this.detailForm.VEHICLE_DEPARTMENT_ID = data.pd.DEPARTMENT_NAME // 车辆所属部门
+          this.detailForm.LICENCE_TYPE = this.translateLicenceType(data.pd.LICENCE_TYPE) // 车牌类型
+          this.detailForm.VEHICLE_TYPE = this.translateVehicleType(data.pd.VEHICLE_TYPE) // 车辆类型
+          this.detailForm.VEHICLE_BELONG_TYPE = data.pd.VEHICLE_BELONG_TYPE === undefined ? '' : this.translateVehicleBelongType(data.pd.VEHICLE_BELONG_TYPE)
+          this.detailForm.USER_ID = data.pd.USER_NAME // 车辆责任人
+        } else {
+          this.$message({
+            message: '数据回显失败',
+            type: 'error'
+          })
+        }
+      }).catch((e) => {
+      })
+    },
+    // 修改弹窗的确定按钮
+    editDialogConfirmBtn() {
+      this.$refs.editForm.validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '数据保存中...',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          this.listLoading = true
+          requestFN(
+            'vehiclemessage/updateVehicleMessage',
+            {
+              ...this.editForm
+            }
+          ).then((data) => {
+            if (data.result === 'success') {
+              this.$message({
+                message: '修改成功',
+                type: 'success'
+              })
+            } else {
+              this.$message({
+                message: data.msg,
+                type: 'success'
+              })
+            }
+            this.listLoading = false
+            loading.close()
+            this.editDialogVisible = false
+            this.getQuery()
+          }).catch((e) => {
+            this.listLoading = false
+            loading.close()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    // 删除单条数据的删除按钮
+    deleteSingleDataDeleteBtn(id, USER_ID, EMPLOYEE_VEHICLE_USER_ID) {
+      this.$confirm('确定要删除吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          'vehiclemessage/deleteVehicleMessage',
+          {
+            VEHICLE_ID: id,
+            USER_ID: USER_ID,
+            EMPLOYEE_VEHICLE_USER_ID: EMPLOYEE_VEHICLE_USER_ID
+          }
+        ).then((data) => {
+          if (data.result === 'success') {
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: data.msg,
+              type: 'success'
+            })
+          }
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getPageList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+
+    resetSearch() {
+      this.searchForm = {
+        LICENCE_NO: '' // 车牌号（输入框）
+      }
+      this.$refs.selectTree_Search1.clearHandle() // 清空
+      this.$refs.selectTree_Search2.clearHandle()
+    },
+    addUserList(DEPARTMENT_ID) {
+      // this.getUserList(DEPARTMENT_ID)
+      this.customGetUserList(DEPARTMENT_ID)
+      this.handleDepartmentAddChange(DEPARTMENT_ID)
+    },
+    updateUserList(DEPARTMENT_ID) {
+      this.getUserList(DEPARTMENT_ID)
+      this.handleDepartmentUpdateChange(DEPARTMENT_ID)
+    },
+    getUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
+      this.userList = []
+      console.info(DEPARTMENT_ID)
+      requestFN(
+        '/user/listAll',
+        {
+          DEPARTMENT_ID: DEPARTMENT_ID,
+          tm: new Date().getTime()
+        }
+      ).then((data) => {
+        console.info(data)
+        this.userList = data.userList
+      }).catch((e) => {
+        // this.listLoading = false
+      })
+    },
+    customGetUserList(DEPARTMENT_ID) { // 根据部门获取部门内的人员
+      this.userList = []
+      requestFN(
+        'vehiclemessage/selectTreeByDepartmentId',
+        {
+          DEPARTMENT_ID: DEPARTMENT_ID,
+          tm: new Date().getTime()
+        }
+      ).then((data) => {
+        this.userList = data.list
+      }).catch((e) => {
+        // this.listLoading = false
+      })
+    },
+    // 添加弹窗中的车辆责任人
+    userIdAddChange(event) {
+      this.addForm.USER_ID = event
+      this.handleUserAddChange(event)
+    },
+    // 添加弹窗中的车辆所属人
+    employeeUserIdAddChange(event) {
+      this.addForm.EMPLOYEE_VEHICLE_USER_ID = event
+      this.handleEmployeeUserAddChange(event)
+    },
+    // 修改弹窗中的车辆责任人
+    userIdUpdateChange(event) {
+      this.editForm.USER_ID = event
+      this.handleUserUpdateChange(event)
+    },
+    handleDepartmentAddChange(value) {
+      this.addForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
+    },
+    handleDepartmentUpdateChange(value) {
+      this.editForm.VEHICLE_DEPARTMENT_NAME = this.findLabelByValue(this.treeData, value)
+    },
+    findLabelByValue(tree, value) {
+      for (const node of tree) {
+        if (node.id === value) {
+          return node.name
+        }
+        if (node.nodes && node.nodes.length > 0) {
+          const result = this.findLabelByValue(node.nodes, value)
+          if (result) {
+            return result
+          }
+        }
+      }
+      return ''
+    },
+    handleUserAddChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.addForm.USER_NAME = selectedUser.NAME
+      } else {
+        this.addForm.USER_NAME = ''
+      }
+    },
+    handleEmployeeUserAddChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = selectedUser.NAME
+      } else {
+        this.addForm.EMPLOYEE_VEHICLE_USER_NAME = ''
+      }
+    },
+    handleUserUpdateChange(value) {
+      const selectedUser = this.userList.find(user => user.USER_ID === value)
+      if (selectedUser) {
+        this.editForm.USER_NAME = selectedUser.NAME
+      } else {
+        this.editForm.USER_NAME = ''
+      }
+    },
+    goCheckLicenceNoAdd() {
+      if (this.addForm.LICENCE_NO) {
+        const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+        const result = regex.test(this.addForm.LICENCE_NO)
+        if (result) {
+          console.log('格式校验通过')
+          requestFN(
+            'vehiclemessage/goCheckLicenceNo',
+            {
+              'LICENCE_NO': this.addForm.LICENCE_NO
+            }
+          ).then((data) => {
+            if (data.result === 'success') {
+              this.$message.success('验证通过')
+              this.ISCHECK = true
+            } else {
+              this.$message.error('车牌号已存在,请重新输入')
+              this.ISCHECK = false
+            }
+          }).catch((e) => {
+            console.info(e)
+            this.listLoading = false
+            this.ISCHECK = false
+          })
+        } else {
+          this.$message.success('车牌号不规范')
+          this.ISCHECK = false
+        }
+      }
+    },
+    goCheckLicenceNoUpdate() {
+      if (this.editForm.LICENCE_NO) {
+        if (this.editForm.LICENCE_NO !== this.editForm.OLD_LICENCE_NO) {
+          const regex = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/
+          const result = regex.test(this.editForm.LICENCE_NO)
+          if (result) {
+            console.log('格式校验通过')
+            requestFN(
+              'vehiclemessage/goCheckLicenceNo',
+              {
+                'LICENCE_NO': this.editForm.LICENCE_NO
+              }
+            ).then((data) => {
+              if (data.result === 'success') {
+                this.$message.success('验证通过')
+                this.ISCHECK = true
+              } else {
+                this.$message.error('车牌号已存在,请重新输入')
+                this.ISCHECK = false
+              }
+            }).catch((e) => {
+              console.info(e)
+              this.listLoading = false
+              this.ISCHECK = false
+            })
+          } else {
+            this.$message.success('车牌号不规范')
+            this.ISCHECK = false
+          }
+        }
+      }
+    },
+    // 车辆进出记录按钮的点击事件
+    vehicleInOutRecordBtn(LICENCE_NO) {
+      this.$parent.activeName = 'Record'
+      this.$parent.LICENCE_NO = LICENCE_NO
+    }
+  }
+}
+</script>
+<style>
+.m-l-10 {
+  margin-left: 10px;
+}
+.q-f-w-v-200{
+  width: 200px;
+}
+</style>
diff --git a/src/views/longtermvehicle/jgCarMessage/components/record.vue b/src/views/longtermvehicle/jgCarMessage/components/record.vue
new file mode 100644
index 0000000..cc38e3e
--- /dev/null
+++ b/src/views/longtermvehicle/jgCarMessage/components/record.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-row>
+        <el-col :span="2">
+          <el-form-item label-width="0px">
+            <el-button icon="el-icon-arrow-left" @click="goReturn()">返回</el-button>
+          </el-form-item>
+        </el-col>
+        <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.getDict()
+    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
+      }
+    },
+    goReturn() {
+      this.$parent.activeName = 'CarView'
+    },
+    getDict() {
+      requestFN(
+        'dictionaries/getLevels',
+        {
+          DICTIONARIES_ID: '1c73fa2717f2835165104aee234caefe'
+        }
+      ).then((data) => {
+        this.RegionList = data.list
+      })
+        .catch((e) => {
+          this.listLoading = false
+        })
+    },
+  }
+}
+</script>
diff --git a/src/views/longtermvehicle/jgCarMessage/index.vue b/src/views/longtermvehicle/jgCarMessage/index.vue
new file mode 100644
index 0000000..90efec4
--- /dev/null
+++ b/src/views/longtermvehicle/jgCarMessage/index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <IndexList v-show="activeName==='List'" ref="list" />
+    <CarView v-if="activeName==='CarView'" />
+    <Record v-if="activeName==='Record'" />
+  </div>
+</template>
+
+<script>
+import IndexList from './components/List'
+import CarView from "./components/car_view";
+import Record from "./components/record";
+export default {
+  components: {
+    CarView: CarView,
+    IndexList: IndexList,
+    Record: Record
+  },
+  data() {
+    return {
+      activeName: 'List'
+    }
+  },
+  watch: {
+    activeName(newValue, oldValue) {
+      if (newValue == 'List') {
+        this.$refs.list.getQuery()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>