feat(): 增加电子围栏增删改查

.env.development

@@ -1,10 +1,10 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 客户业务系统
 
 # 开发环境配置
 ENV = 'development'
 
-# 若依管理系统/开发环境
+# 客户业务系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载

.env.production

@@ -1,8 +1,8 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 客户业务系统
 
 # 生产环境配置
 ENV = 'production'
 
-# 若依管理系统/生产环境
+# 客户业务系统/生产环境
 VUE_APP_BASE_API = '/prod-api'

.env.staging

@@ -1,10 +1,10 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 客户业务系统
 
 NODE_ENV = production
 
 # 测试环境配置
 ENV = 'staging'
 
-# 若依管理系统/测试环境
+# 客户业务系统/测试环境
 VUE_APP_BASE_API = '/stage-api'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "muyu",
   "version": "3.6.3",
-  "description": "若依管理系统",
+  "description": "客户业务系统",
   "author": "若依",
   "license": "MIT",
   "scripts": {
@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",

public/index.html

@@ -7,8 +7,11 @@
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <link href="<%= BASE_URL %>favicon.ico" rel="icon">
   <title><%= webpackConfig.name %></title>
+
+
   <!--[if lt IE 11]>
   <script>window.location.href = '/html/ie.html';</script><![endif]-->
+  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c40d968cfc9a8d5ff5453709dc80c793"></script>
   <style>
     html,
     body,

src/api/customerBusiness/fence.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询电子围栏列表
+export function listFence(query) {
+  return request({
+    url: '/customerBusiness/fence/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询电子围栏详细
+export function getFence(id) {
+  return request({
+    url: '/customerBusiness/fence/' + id,
+    method: 'get'
+  })
+}
+
+// 新增电子围栏
+export function addFence(data) {
+  return request({
+    url: '/customerBusiness/fence',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改电子围栏
+export function updateFence(data) {
+  return request({
+    url: '/customerBusiness/fence/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除电子围栏
+export function delFence(id) {
+  return request({
+    url: '/customerBusiness/fence/' + id,
+    method: 'delete'
+  })
+}

src/api/customerBusiness/vehicle.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询车辆录入列表
+export function listVehicle(query) {
+  return request({
+    url: '/customerBusiness/vehicle/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询车辆录入详细
+export function getVehicle(id) {
+  return request({
+    url: '/customerBusiness/vehicle/' + id,
+    method: 'get'
+  })
+}
+
+// 新增车辆录入
+export function addVehicle(data) {
+  return request({
+    url: '/customerBusiness/vehicle',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改车辆录入
+export function updateVehicle(data) {
+  return request({
+    url: '/customerBusiness/vehicle/'+data.id,
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除车辆录入
+export function delVehicle(id) {
+  return request({
+    url: '/customerBusiness/vehicle/' + id,
+    method: 'delete'
+  })
+}

src/views/customerBusiness/atlas/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="index">
+    <el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
+    <el-button type="primary" @click="editRectangle">编辑多边形</el-button>
+    <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
+    <div id="amapContainer"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'amapFence',
+  data () {
+    return {
+      path: [], // 当前绘制的多边形经纬度数组
+      polygonItem: [], // 地图上绘制的所有多边形对象
+      polyEditors: []  // 所有编辑对象数组
+    }
+  },
+  props: {
+    paths: {} // 编辑
+  },
+  mounted () {
+    this.intAmap(() => {
+      if (this.paths) {
+        this.editRectangle(this.paths);
+      }
+    });
+  },
+  methods: {
+    // 地图初始化
+    intAmap (callBack) {
+      this.AMap = window.AMap;
+      this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar'], function () {
+        //TODO  创建控件并添加
+      });
+      this.map = new this.AMap.Map("amapContainer", {
+        center: [116.434381, 39.898515],
+        zoom: 14,
+        mapStyle: "amap://styles/darkblue",
+        pitch: 80,
+        rotation: -15,
+        viewMode: '3D',//开启3D视图,默认为关闭
+        buildingAnimation: true,//楼块出现是否带动画
+      });
+      this.map.addControl(new this.AMap.ControlBar());
+      if (callBack && typeof callBack == 'function') {
+        callBack();
+      }
+    },
+    // 编辑围栏
+    editRectangle (paths) {
+      const path = paths;
+      const AMap = window.AMap;
+      var polygon = new this.AMap.Polygon({
+        path: path,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        fillColor: '#1791fc',
+        zIndex: 50,
+      });
+
+      this.map.add(polygon);
+      this.polygonItem.push(polygon);
+      // 缩放地图到合适的视野级别
+      this.map.setFitView([polygon]);
+
+      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
+      this.polyEditor.open();
+      this.polyEditors.push(this.polyEditor);
+
+      this.polyEditor.on('addnode', function (event) {
+        console.info('触发事件：addnode', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('adjust', function (event) {
+        console.info('触发事件：adjust', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('removenode', function (event) {
+        console.info('触发事件：removenode', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+      });
+
+      this.polyEditor.on('end', function (event) {
+        console.info('触发事件： end', event)
+        console.info('修改后的经纬度：', polygon.getPath())
+        // event.target 即为编辑后的多边形对象
+      });
+    },
+    // 绘制多边形
+    drawRectangle () {
+      const vm = this;
+      this.mouseTool = new this.AMap.MouseTool(this.map);
+      const polygon = this.mouseTool.polygon({
+        strokeColor: 'red',
+        strokeOpacity: 0.5,
+        strokeWeight: 6,
+        fillColor: 'blue',
+        fillOpacity: 0.5,
+        // strokeStyle还支持 solid
+        strokeStyle: 'solid',
+        // strokeDasharray: [30,10],
+      });
+
+      this.mouseTool.on('draw', function (event) {
+        // event.obj 为绘制出来的覆盖物对象
+        var polygonItem = event.obj;
+        var paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
+        console.log('覆盖物对象绘制完成各个点的坐标', paths);
+        var path = [];  // 编辑的路径
+        paths.forEach(v => {
+          path.push([v.lng, v.lat])
+        });
+        vm.path = path;
+        vm.editRectangle(vm.path);
+        vm.polygonItem.push(event.obj);
+        vm.map.remove(event.obj); // 删除多边形
+        console.log(polygon, '------polygon-----');
+      });
+    },
+    // 批量删除多边形
+    deleRectangle () {
+      // 取消编辑状态
+      this.polyEditors.forEach(v => {
+        v.close();
+      });
+      this.map.clearMap(); // 删除地图所有覆盖物
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#amapContainer {
+  height: 800px;
+  width: 1000px;
+}
+</style>

src/views/customerBusiness/fence/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="电子围栏名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入电子围栏名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="经纬度信息" prop="longitudeAndLatitude">
+        <el-input
+          v-model="queryParams.longitudeAndLatitude"
+          placeholder="请输入经纬度信息"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['customerBusiness:fence:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['customerBusiness:fence:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['customerBusiness:fence:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['customerBusiness:fence:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="电子围栏名称" align="center" prop="name" />
+      <el-table-column label="围栏类型" align="center" prop="fenceType" />
+      <el-table-column label="经纬度信息" align="center" prop="longitudeAndLatitude" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['customerBusiness:fence:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['customerBusiness:fence:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改电子围栏对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="电子围栏名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入电子围栏名称" />
+        </el-form-item>
+        <el-form-item label="电子围栏类型" prop="fenceType">
+          <el-input v-model="form.fenceType" placeholder="电子围栏类型" />
+        </el-form-item>
+        <el-form-item label="经纬度信息" prop="longitudeAndLatitude">
+          <el-input v-model="form.longitudeAndLatitude" placeholder="请输入经纬度信息" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listFence, getFence, delFence, addFence, updateFence } from "@/api/customerBusiness/fence";
+
+export default {
+  name: "Fence",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 电子围栏表格数据
+      fenceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        fenceType: null,
+        longitudeAndLatitude: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询电子围栏列表 */
+    getList() {
+      this.loading = true;
+      listFence(this.queryParams).then(response => {
+        this.fenceList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        fenceType: null,
+        longitudeAndLatitude: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加电子围栏";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getFence(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改电子围栏";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateFence(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addFence(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项？').then(function() {
+        return delFence(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('customerBusiness/fence/export', {
+        ...this.queryParams
+      }, `fence_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/customerBusiness/vehicle/index.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="车辆vin" prop="vin">
+        <el-input
+          v-model="queryParams.vin"
+          placeholder="请输入车辆vin"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="品牌" prop="brand">
+        <el-input
+          v-model="queryParams.brand"
+          placeholder="请输入品牌"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="型号" prop="model">
+        <el-input
+          v-model="queryParams.model"
+          placeholder="请输入型号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="生产日期" prop="productionDate">
+        <el-date-picker clearable
+          v-model="queryParams.productionDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择生产日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="车身颜色" prop="color">
+        <el-input
+          v-model="queryParams.color"
+          placeholder="请输入车身颜色"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="发动机排量" prop="engineCapacity">
+        <el-input
+          v-model="queryParams.engineCapacity"
+          placeholder="请输入发动机排量"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="变速器类型" prop="transmission">
+        <el-input
+          v-model="queryParams.transmission"
+          placeholder="请输入变速器类型"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="行驶里程" prop="mileage">
+        <el-input
+          v-model="queryParams.mileage"
+          placeholder="请输入行驶里程"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="注册日期" prop="registrationDate">
+        <el-date-picker clearable
+          v-model="queryParams.registrationDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择注册日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="车牌号码" prop="licenseNumber">
+        <el-input
+          v-model="queryParams.licenseNumber"
+          placeholder="请输入车牌号码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="持有者" prop="holder">
+        <el-input
+          v-model="queryParams.holder"
+          placeholder="请输入持有者"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['customerBusiness:vehicle:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['customerBusiness:vehicle:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['customerBusiness:vehicle:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['customerBusiness:vehicle:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="vehicleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="车辆id" align="center" prop="id" />
+      <el-table-column label="车辆vin" align="center" prop="vin" />
+      <el-table-column label="品牌" align="center" prop="brand" />
+      <el-table-column label="型号" align="center" prop="model" />
+      <el-table-column label="生产日期" align="center" prop="productionDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="车身类型" align="center" prop="bodyType" />
+      <el-table-column label="车身颜色" align="center" prop="color" />
+      <el-table-column label="发动机排量" align="center" prop="engineCapacity" />
+      <el-table-column label="燃油类型" align="center" prop="fuelType" />
+      <el-table-column label="变速器类型" align="center" prop="transmission" />
+      <el-table-column label="驱动方式" align="center" prop="driveType" />
+      <el-table-column label="行驶里程" align="center" prop="mileage" />
+      <el-table-column label="注册日期" align="center" prop="registrationDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.registrationDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="车牌号码" align="center" prop="licenseNumber" />
+      <el-table-column label="持有者" align="center" prop="holder" />
+      <el-table-column label="车辆类型" align="center" prop="vehicleType" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['customerBusiness:vehicle:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['customerBusiness:vehicle:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改车辆录入对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="车辆vin" prop="vin">
+          <el-input v-model="form.vin" placeholder="请输入车辆vin" />
+        </el-form-item>
+        <el-form-item label="品牌" prop="brand">
+          <el-input v-model="form.brand" placeholder="请输入品牌" />
+        </el-form-item>
+
+        <el-form-item label="型号" prop="model">
+          <el-input v-model="form.model" placeholder="请输入型号" />
+        </el-form-item>
+        <el-form-item label="生产日期" prop="productionDate">
+          <el-date-picker clearable
+            v-model="form.productionDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择生产日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="车身颜色" prop="color">
+          <el-input v-model="form.color" placeholder="请输入车身颜色" />
+        </el-form-item>
+        <el-form-item label="车身类型" prop="bodyType">
+          <el-input v-model="form.bodyType" placeholder="请输入车身类型" />
+        </el-form-item>
+        <el-form-item label="车辆类型" prop="vehicleType">
+          <el-input v-model="form.vehicleType" placeholder="请输入车辆类型" />
+        </el-form-item>
+        <el-form-item label="发动机排量" prop="engineCapacity">
+          <el-input v-model="form.engineCapacity" placeholder="请输入发动机排量" />
+        </el-form-item>
+        <el-form-item label="变速器类型" prop="transmission">
+          <el-input v-model="form.transmission" placeholder="请输入变速器类型" />
+        </el-form-item>
+        <el-form-item label="行驶里程" prop="mileage">
+          <el-input v-model="form.mileage" placeholder="请输入行驶里程" />
+        </el-form-item>
+        <el-form-item label="注册日期" prop="registrationDate">
+          <el-date-picker clearable
+            v-model="form.registrationDate"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="请选择注册日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="车牌号码" prop="licenseNumber">
+          <el-input v-model="form.licenseNumber" placeholder="请输入车牌号码" />
+        </el-form-item>
+        <el-form-item label="持有者" prop="holder">
+          <el-input v-model="form.holder" placeholder="请输入持有者" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listVehicle, getVehicle, delVehicle, addVehicle, updateVehicle } from "@/api/customerBusiness/vehicle";
+
+export default {
+  name: "Vehicle",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 车辆录入表格数据
+      vehicleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        vin: null,
+        brand: null,
+        model: null,
+        productionDate: null,
+        bodyType: null,
+        color: null,
+        engineCapacity: null,
+        fuelType: null,
+        transmission: null,
+        driveType: null,
+        mileage: null,
+        registrationDate: null,
+        licenseNumber: null,
+        holder: null,
+        vehicleType: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询车辆录入列表 */
+    getList() {
+      this.loading = true;
+      listVehicle(this.queryParams).then(response => {
+        this.vehicleList = response.data.rows;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        vin: null,
+        brand: null,
+        model: null,
+        productionDate: null,
+        bodyType: null,
+        color: null,
+        engineCapacity: null,
+        fuelType: null,
+        transmission: null,
+        driveType: null,
+        mileage: null,
+        registrationDate: null,
+        licenseNumber: null,
+        holder: null,
+        vehicleType: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加车辆录入";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getVehicle(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改车辆录入";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateVehicle(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addVehicle(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除车辆录入编号为"' + ids + '"的数据项？').then(function() {
+        return delVehicle(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('customerBusiness/vehicle/export', {
+        ...this.queryParams
+      }, `vehicle_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/index.vue

@@ -46,7 +46,7 @@
       <el-col :lg="12" :sm="24" style="padding-left: 20px">
         <h2>若依后台管理框架</h2>
         <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
+          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了客户业务系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
         </p>
         <p>
           <b>当前版本:</b> <span>v{{ version }}</span>

vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '客户业务系统' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口