访客车里记录

src/store/modules/cart.js

@@ -0,0 +1,23 @@
+import lodash from 'lodash'
+import { interact } from '../../utils'
+import apis from '../../config/api'
+
+export default {
+  namespaced: true,
+  state: {
+    carRecord: {}
+  },
+  mutations: {
+    carRecord(state, payload) {
+      state.carRecord = payload || {}
+    }
+  },
+  actions: {
+    getCartRecord({ commit }, payload) { // 查询所有
+      const api = lodash.get(apis, 'cart.list')
+      interact(api, payload).then((data) => {
+        commit('carRecord', data)
+      })
+    }
+  }
+}

src/views/cart/list.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="root">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label="车牌">
+        <el-input v-model="formInline.plateNumber" placeholder="车牌"></el-input>
+      </el-form-item>
+      <el-form-item label="客户姓名">
+        <el-input v-model="formInline.customerName" placeholder="客户姓名"></el-input>
+      </el-form-item>
+      <el-form-item label="手机">
+        <el-input v-model="formInline.phone" placeholder="手机"></el-input>
+      </el-form-item>
+      <el-form-item label="来访时间">
+        <el-date-picker
+                v-model="formInline.recordDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="来访时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+            :data="cartList.records"
+            border
+            style="width: 100%">
+      <el-table-column
+              prop="serialNo"
+              label="序号"
+              width="180"/>
+      <el-table-column
+              prop="plateNumber"
+              label="车牌"/>
+      <el-table-column
+              prop="driverImage"
+              label="驾驶员照片">
+        <template slot-scope="scope">
+          <el-image
+                  style="width: 100px; height: 100px"
+                  :src="scope.row.driverImage"
+                  fit="fill"></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+              prop="customerName"
+              label="客户姓名"/>
+      <el-table-column
+              prop="phone"
+              label="手机号"/>
+      <el-table-column
+              prop="createDate"
+              label="来访时间"/>
+    </el-table>
+    <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="formInline.pageNum"
+            :page-sizes="[1,10, 20, 30, 40]"
+            :page-size="formInline.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="cartList.total || 0">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const {mapState: mapCartState, mapActions: mapCartActions} = createNamespacedHelpers('cart')
+
+export default {
+  name: 'cart-index',
+  data() {
+    return {
+      formInline: {
+        plateNumber: '',
+        recordDate: '',
+        customerName: '',
+        phone: '',
+        pageNum: 1,
+        pageSize: 10
+      }
+    }
+  },
+  computed: {
+    ...mapCartState({
+      cartList: x => x.carRecord
+    })
+  },
+  created() {
+    this.getPage()
+  },
+  methods: {
+    ...mapCartActions([
+      'getCartRecord'
+    ]),
+    onSubmit() {
+      this.getPage()
+    },
+    getPage() {
+      this.getCartRecord(this.formInline)
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`)
+      this.formInline.pageSize = val
+      this.getPage()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`)
+      this.formInline.pageNum = val
+      this.getPage()
+    }
+  }
+}
+</script>
+