From e4e10d63aa21a326b8db33d04e2dd91781d5013b Mon Sep 17 00:00:00 2001
From: Yan Nan <255809923@qq.com>
Date: Mon, 8 Apr 2024 10:01:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=AD=90=E5=9B=B4=E6=A0=8F48?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/record.js          |   9 ++
 src/views/system/record/index.vue | 222 ++++++++++++++++++++++++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 src/api/system/record.js
 create mode 100644 src/views/system/record/index.vue

diff --git a/src/api/system/record.js b/src/api/system/record.js
new file mode 100644
index 0000000..7fe692d
--- /dev/null
+++ b/src/api/system/record.js
@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function recordList(data) {
+  return request({
+    url: '/corpor/recordList',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/system/record/index.vue b/src/views/system/record/index.vue
new file mode 100644
index 0000000..0ec2125
--- /dev/null
+++ b/src/views/system/record/index.vue
@@ -0,0 +1,222 @@
+<template>
+  <div>
+
+    <h1>车辆记录管理</h1>
+
+
+
+<!--    条件查询-->
+    <el-form :inline="true" :model="record" class="demo-form-inline">
+
+      <el-form-item label="VIN">
+        <el-input v-model="record.recordName" placeholder="审批人"></el-input>
+      </el-form-item>
+
+      <el-form-item label="开始时间">
+        <el-date-picker
+          v-model="record.recordDateStart"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="结束时间">
+        <el-date-picker
+          v-model="record.recordDateEnd"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+        <el-button @click="reset" icon="el-icon-refresh-left">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
+
+<!--    记录车辆列表-->
+    <el-table :data="tableData" style="width: 100%">
+
+      <el-table-column
+        label="车辆记录ID"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordId }}</span>
+        </template>
+      </el-table-column>
+
+
+
+      <el-table-column
+        label="VIN"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="开始时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordDateStart }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="结束时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordDateEnd }}</span>
+        </template>
+      </el-table-column>
+
+
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-link type="primary" icon="el-icon-map-location" @click="historicaltrack">历史轨迹</el-link>
+          <el-link type="primary" icon="el-icon-delete" @click="del">删除</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+
+
+<!--    分页查询-->
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="record.pageNum"
+      :page-sizes="[1, 3, 10, 20]"
+      :page-size="record.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+
+  </div>
+</template>
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import axios from "axios";
+import {recordList} from "@/api/system/record";
+import {resetForm} from "@/utils/muyu";
+  export default {
+    //import引入的组件需要注入到对象中才能使用"
+    components: {axios},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+
+        tableData:[],
+        record:{
+          recordName:'',
+          recordDateStart:'',
+          recordDateEnd:'',
+          pageNum:1,
+          pageSize:5
+        },
+        total:0,
+
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      resetForm,
+
+      /**
+       * 车辆记录列表
+       */
+      list(){
+        recordList(this.record).then(
+          res=>{
+            this.tableData=res.data.list
+            this.total=res.data.total
+            console.log(this.tableData)
+            console.log(res)
+          }
+        )
+      },
+
+
+      /**
+       * 条件查询
+       */
+      onSubmit(){
+        this.list()
+      },
+
+      /**
+       * 条件重置
+       */
+      reset(){
+        //重置表单
+        this.record.recordName=''
+        this.record.recordDateStart=''
+        this.record.recordDateEnd=''
+        this.list()
+      },
+
+      /**
+       * 分页查询
+       */
+      handleSizeChange(val){
+        this.record.pageSize=val
+        this.list()
+      },
+      handleCurrentChange(val){
+        this.record.pageNum=val
+        this.list()
+      },
+
+
+      /**
+       * 历史轨迹
+       */
+
+
+
+      /**
+       * 删除
+       */
+
+
+
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.list()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>