车辆管理完成功能

src/api/couplet/vehicle.js

@@ -25,3 +25,29 @@ export function getVehicleTypes() {
   })
 }
 
+//编辑车辆
+export function editById(vehicle) {
+  return request({
+    url: '/vehicle/vehicle/editById',
+    method: 'post',
+    data:vehicle
+  })
+}
+
+//新增车辆
+export function insert(vehicle) {
+  return request({
+    url: '/vehicle/vehicle/insert',
+    method: 'post',
+    data:vehicle
+  })
+}
+
+//获取绑定当前车辆的标识
+export function getBindLogoByVehicleId(vehicleId) {
+  return request({
+    url: '/vehicle/vehicle/getBindLogoById/'+vehicleId,
+    method: 'get'
+  })
+}
+

src/views/couplet/vehicle/index.vue

@@ -4,15 +4,26 @@
     <!--    {{ vehicleList }}-->
 
     <!--    列表表单-->
-<!--    <el-form ref="form" :model="vehicleListParams" label-width="80px">-->
+    <el-form ref="form" :model="vehicleListParams" label-width="80px">
-<!--      <el-form-item label="车辆类型">-->
+      <el-form-item label="类型">
-<!--        <el-select v-model="vehicleTypes" placeholder="请选择车辆类型" @change="getVehicleList">-->
+        <el-select v-model="vehicleListParams.vehicleType" clearable placeholder="车辆类型" @change="getVehicleList">
-<!--          <el-option v-for="item in vehicleTypes" :label="item.vehicleTypeName" :value="item.vehicleTypeId"></el-option>-->
+          <el-option v-for="item in vehicleTypes" :key="item.vehicleTypeId" :label="item.vehicleTypeName"
-<!--        </el-select>-->
+                     :value="item.vehicleTypeId"></el-option>
-<!--      </el-form-item>-->
+        </el-select>
-<!--    </el-form>-->
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="vehicleListParams.vehicleState" clearable placeholder="车辆状态" @change="getVehicleList">
+          <el-option key="1" label="在线" value="1"></el-option>
+          <el-option key="0" label="离线" value="0"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
 
 
+    <el-button type="primary" icon="el-icon-edit" @click="toInsert">新增车辆</el-button>
+
+
+    <!--    列表-->
     <el-table :data="vehicleList" style="width: 100%" border>
       <el-table-column label="车辆id" width="90" align="center">
         <template slot-scope="scope">
@@ -44,11 +55,11 @@
           <span style="margin-left: 10px">{{ scope.row.batteryNumber }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="vin码" width="180" align="center">
+      <!--      <el-table-column label="vin码" width="180" align="center">-->
-        <template slot-scope="scope">
+      <!--        <template slot-scope="scope">-->
-          <span style="margin-left: 10px">{{ scope.row.vin }}</span>
+      <!--          <span style="margin-left: 10px">{{ scope.row.vin }}</span>-->0
-        </template>
+      <!--        </template>-->
-      </el-table-column>
+      <!--      </el-table-column>-->
       <el-table-column label="车辆状态" width="120" align="center">
         <template slot-scope="scope">
           <span style="margin-left: 10px" v-if="1==scope.row.vehicleState">
@@ -61,11 +72,93 @@
       </el-table-column>
       <el-table-column label="操作" width="180" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" @click="">编辑</el-button>
+          <el-button size="mini" @click="toEdit(scope.row)">编辑</el-button>
           <el-button size="mini" type="danger" @click="deleteById(scope.row.vehicleId)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <!--    分页-->
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="vehicleListParams.pageNum"
+      :page-sizes="[5,7,10,20]"
+      :page-size="vehicleListParams.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+
+    <!--    编辑对话框-->
+    <el-dialog :title=title :visible.sync="dialogEdit">
+      <el-form :model="vehicle">
+        <el-form-item label="车辆类型" :label-width="formLabelWidth">
+          <el-select v-model="vehicle.vehicleType" placeholder="车辆类型">
+            <el-option v-for="item in vehicleTypes" :key="item.vehicleTypeId" :label="item.vehicleTypeName"
+                       :value="item.vehicleTypeId"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电机厂商" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.motorManufacturer" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电池厂商" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.batteryManufacturer" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电机编号" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.motorNumber" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电池编号" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.batteryNumber" autocomplete="off"></el-input>
+        </el-form-item>
+        <!--        标签复选框 需要在点击编辑框的时候查询当前车说绑定的标识-->
+        <el-checkbox-group v-model="vehicle.logoIds">
+          <el-checkbox :label=1>标识1</el-checkbox>
+          <el-checkbox :label=2>标识2</el-checkbox>
+          <el-checkbox :label=3>标识3</el-checkbox>
+        </el-checkbox-group>
+
+      </el-form>
+      <!--      {{ vehicle }}-->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="reset()">取 消</el-button>
+        <el-button type="primary" @click="editById">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!--    新增对话框-->
+    <el-dialog :title=title :visible.sync="dialogInsert">
+      <el-form :model="vehicle">
+        <el-form-item label="车辆类型" :label-width="formLabelWidth">
+          <el-select v-model="vehicle.vehicleType" placeholder="车辆类型">
+            <el-option v-for="item in vehicleTypes" :key="item.vehicleTypeId" :label="item.vehicleTypeName"
+                       :value="item.vehicleTypeId"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电机厂商" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.motorManufacturer" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电池厂商" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.batteryManufacturer" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电机编号" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.motorNumber" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="电池编号" :label-width="formLabelWidth">
+          <el-input v-model="vehicle.batteryNumber" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <!--        标签复选框-->
+        <el-checkbox-group v-model="vehicle.logoIds">
+          <el-checkbox :label=1>标识1</el-checkbox>
+          <el-checkbox :label=2>标识2</el-checkbox>
+          <el-checkbox :label=3>标识3</el-checkbox>
+        </el-checkbox-group>
+      </el-form>
+      <!--      {{ vehicle }}-->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="reset()">取 消</el-button>
+        <el-button type="primary" @click="insert">确 定</el-button>
+      </div>
+    </el-dialog>
 
 
   </div>
@@ -74,7 +167,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {deleteById, getVehicleTypes, list} from "@/api/couplet/vehicle";
+import {deleteById, editById, getBindLogoByVehicleId, getVehicleTypes, insert, list} from "@/api/couplet/vehicle";
 
 export default {
   //import引入的组件需要注入到对象中才能使用"
@@ -86,6 +179,9 @@ export default {
       //车辆列表
       vehicleList: [],
 
+      //总页数
+      total: 0,
+
       //车辆类型
       vehicleTypes: [],
 
@@ -96,6 +192,10 @@ export default {
         //车辆状态 0离线 1在线
         vehicleState: '',
 
+        pageNum: 1,
+        pageSize: 5,
+
+
       },
 
       //编辑、新增车辆的入参
@@ -118,9 +218,18 @@ export default {
         //电池编号
         batteryNumber: '',
 
+        //车辆绑定标识
+        logoIds: [],
+
 
       },
 
+      //对话框的参数
+      formLabelWidth: '120px',
+      dialogEdit: false,
+      dialogInsert: false,
+      // 弹出层标题
+      title: ""
 
     };
   },
@@ -134,11 +243,22 @@ export default {
     getVehicleList() {
       list(this.vehicleListParams).then(
         res => {
-          this.vehicleList = res.data;
+          this.vehicleList = res.data.list;
+          this.total = res.data.total;
         }
       )
     },
 
+    //分页
+    handleSizeChange(val) {
+      this.vehicleListParams.pageSize = val;
+      this.getVehicleList();
+    },
+    handleCurrentChange(val) {
+      this.vehicleListParams.pageNum = val;
+      this.getVehicleList();
+    },
+
     //获取车辆类型
     getVehicleTypes() {
       getVehicleTypes().then(
@@ -179,6 +299,89 @@ export default {
         })
       })
     },
+
+    //编辑按钮
+    toEdit(row) {
+      this.reset()
+
+      //将各个属性进行赋值
+      this.vehicle.vehicleId = row.vehicleId;
+      this.vehicle.vehicleType = row.vehicleType;
+      this.vehicle.motorManufacturer = row.motorManufacturer;
+      this.vehicle.batteryManufacturer = row.batteryManufacturer;
+      this.vehicle.motorNumber = row.motorNumber;
+      this.vehicle.batteryNumber = row.batteryNumber;
+      //查询与当前车辆绑定 的标识
+      getBindLogoByVehicleId(row.vehicleId).then(
+        res => {
+          //再赋值
+          this.vehicle.logoIds = res.data;
+        }
+      )
+
+      this.title = "编辑车辆"
+      this.dialogEdit = true;
+    },
+    //重置对话框表单
+    reset() {
+      this.dialogEdit = false
+      this.dialogInsert = false
+      this.vehicle = {
+        //车辆id
+        vehicleId: '',
+        //车辆类型
+        vehicleType: '',
+        //电机厂商
+        motorManufacturer: '',
+        //电池厂商
+        batteryManufacturer: '',
+        //电机编号
+        motorNumber: '',
+        //电池编号
+        batteryNumber: '',
+        //车辆绑定标识
+        logoIds: [],
+      }
+      // this.$message.info("已取消")
+    },
+    //确认编辑
+    editById() {
+      editById(this.vehicle).then(
+        res => {
+          if (res.code == 200) {
+            this.dialogEdit = false;
+            this.getVehicleList();
+            this.$message.success("编辑成功");
+          } else {
+            this.$message.error("编辑失败");
+          }
+        }
+      );
+    },
+
+
+    //新增按钮
+    toInsert() {
+      this.reset()
+      this.title = "新增车辆"
+      this.dialogInsert = true;
+    },
+    //确认插入
+    insert() {
+      insert(this.vehicle).then(
+        res => {
+          if (res.code == 200) {
+            this.dialogInsert = false;
+            this.getVehicleList();
+            this.$message.success("新增成功");
+          } else {
+            this.$message.error("新增失败");
+          }
+        }
+      )
+    },
+
+
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {