获取车辆列表

src/api/vehicle/instance.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function instanceList(params) {
+  return request({
+    url: '/vehicle/instance/list',
+    method: 'post',
+    data: params
+  })
+}

src/router/index.js

@@ -61,7 +61,7 @@ export const constantRoutes = [
       {
         path: 'index',
         name: '数据模拟',
-        component: () => import('@/views/form/index'),
+        component: () => import('@/views/vehicle/index'),
         meta: { title: '数据模拟', icon: 'form' }
       }
     ]

src/utils/request.js

@@ -46,7 +46,7 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.code !== 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',
@@ -66,7 +66,7 @@ service.interceptors.response.use(
           })
         })
       }
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject(new Error(res.msg || 'Error'))
     } else {
       return res
     }
@@ -74,7 +74,7 @@ service.interceptors.response.use(
   error => {
     console.log('err' + error) // for debug
     Message({
-      message: error.message,
+      message: error.msg,
       type: 'error',
       duration: 5 * 1000
     })

src/views/form/index.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="form" :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%;" />
-        </el-col>
-        <el-col :span="2" class="line">-</el-col>
-        <el-col :span="11">
-          <el-time-picker v-model="form.date2" type="fixed-time" placeholder="Pick a time" style="width: 100%;" />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button @click="onCancel">Cancel</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
-        delivery: false,
-        type: [],
-        resource: '',
-        desc: ''
-      }
-    }
-  },
-  methods: {
-    onSubmit() {
-      this.$message('submit!')
-    },
-    onCancel() {
-      this.$message({
-        message: 'cancel!',
-        type: 'warning'
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.line{
-  text-align: center;
-}
-</style>
-

src/views/vehicle/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
+          <el-radio-group v-model="checkVin" style="width: 98%">
+            <div class="vehicleDiv" v-for="vehicle in vehicleList">
+              <el-radio :label="vehicle.vin">{{vehicle.vin}}</el-radio>
+            </div>
+          </el-radio-group>
+
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <div class="grid-content bg-purple" :style="{'height': contentHeight+'px'}">
+
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {instanceList} from "@/api/vehicle/instance";
+
+export default {
+  data() {
+    return {
+      contentHeight: 1024,
+      checkVin: null,
+      vehicleList: [],
+      queryParams: {
+        vin: null,
+      }
+    }
+  },
+  created() {
+    this.contentHeight = window.innerHeight - 60
+    this.getInstanceList()
+  },
+  methods: {
+    getInstanceList() {
+      instanceList(this.queryParams).then(response => {
+        this.vehicleList = response.data;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 10px 5px 0 10px;
+}
+
+.el-row {
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bg-purple {
+  background: #f4f4f5;
+}
+
+.grid-content {
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.grid-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.grid-content::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.grid-content::-webkit-scrollbar-track {
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.vehicleDiv {
+  height: 50px;
+  margin: 0 0 10px 0
+}
+</style>
+