From 25c8d16954b092020bf1173c4855620e05c9fab8 Mon Sep 17 00:00:00 2001
From: liuyunhu <3286117488@qq.com>
Date: Sun, 31 Mar 2024 15:56:17 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/{system => couplet}/vehicle.js |  8 +++++++
 src/views/couplet/vehicle/index.vue    | 29 +++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)
 rename src/api/{system => couplet}/vehicle.js (73%)

diff --git a/src/api/system/vehicle.js b/src/api/couplet/vehicle.js
similarity index 73%
rename from src/api/system/vehicle.js
rename to src/api/couplet/vehicle.js
index f4520e4..fb26225 100644
--- a/src/api/system/vehicle.js
+++ b/src/api/couplet/vehicle.js
@@ -17,3 +17,11 @@ export function deleteById(vehicleId) {
   })
 }
 
+//获取车辆类型
+export function getVehicleTypes() {
+  return request({
+    url: '/vehicle/vehicleType/list',
+    method: 'get'
+  })
+}
+
diff --git a/src/views/couplet/vehicle/index.vue b/src/views/couplet/vehicle/index.vue
index 851dc3a..79356d5 100644
--- a/src/views/couplet/vehicle/index.vue
+++ b/src/views/couplet/vehicle/index.vue
@@ -3,14 +3,22 @@
     <h1>车辆管理页面</h1>
     <!--    {{ vehicleList }}-->
 
+    <!--    列表表单-->
+<!--    <el-form ref="form" :model="vehicleListParams" label-width="80px">-->
+<!--      <el-form-item label="车辆类型">-->
+<!--        <el-select v-model="vehicleTypes" placeholder="请选择车辆类型" @change="getVehicleList">-->
+<!--          <el-option v-for="item in vehicleTypes" :label="item.vehicleTypeName" :value="item.vehicleTypeId"></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+<!--    </el-form>-->
+
+
     <el-table :data="vehicleList" style="width: 100%" border>
       <el-table-column label="车辆id" width="90" align="center">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.vehicleId }}</span>
         </template>
       </el-table-column>
-
-      <!--   TODO   暂时显示车辆类型id，待处理-->
       <el-table-column label="车辆类型" width="90" align="center">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.vehicleTypeName }}</span>
@@ -66,7 +74,7 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
-import {deleteById, list} from "@/api/system/vehicle";
+import {deleteById, getVehicleTypes, list} from "@/api/couplet/vehicle";
 
 export default {
   //import引入的组件需要注入到对象中才能使用"
@@ -78,6 +86,9 @@ export default {
       //车辆列表
       vehicleList: [],
 
+      //车辆类型
+      vehicleTypes: [],
+
       //查询列表的入参
       vehicleListParams: {
         //车辆类型
@@ -128,6 +139,15 @@ export default {
       )
     },
 
+    //获取车辆类型
+    getVehicleTypes() {
+      getVehicleTypes().then(
+        res => {
+          this.vehicleTypes = res.data;
+        }
+      )
+    },
+
     //根据车辆id进行删除
     deleteById(vehicleId) {
       this.$confirm('此操作将永久删除该数据，是否继续？', "提示", {
@@ -164,6 +184,9 @@ export default {
   created() {
     //获取车辆列表
     this.getVehicleList()
+
+    //获取车辆类型
+    this.getVehicleTypes()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {

From 00eb65d366b88839092790bf27e0637f6ea5f939 Mon Sep 17 00:00:00 2001
From: liuyunhu <3286117488@qq.com>
Date: Sun, 31 Mar 2024 22:13:49 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/couplet/vehicle.js          |  26 ++++
 src/views/couplet/vehicle/index.vue | 233 ++++++++++++++++++++++++++--
 2 files changed, 244 insertions(+), 15 deletions(-)

diff --git a/src/api/couplet/vehicle.js b/src/api/couplet/vehicle.js
index fb26225..7db9029 100644
--- a/src/api/couplet/vehicle.js
+++ b/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'
+  })
+}
+
diff --git a/src/views/couplet/vehicle/index.vue b/src/views/couplet/vehicle/index.vue
index 79356d5..4863095 100644
--- a/src/views/couplet/vehicle/index.vue
+++ b/src/views/couplet/vehicle/index.vue
@@ -4,15 +4,26 @@
     <!--    {{ vehicleList }}-->
 
     <!--    列表表单-->
-<!--    <el-form ref="form" :model="vehicleListParams" label-width="80px">-->
-<!--      <el-form-item label="车辆类型">-->
-<!--        <el-select v-model="vehicleTypes" placeholder="请选择车辆类型" @change="getVehicleList">-->
-<!--          <el-option v-for="item in vehicleTypes" :label="item.vehicleTypeName" :value="item.vehicleTypeId"></el-option>-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
-<!--    </el-form>-->
+    <el-form ref="form" :model="vehicleListParams" label-width="80px">
+      <el-form-item label="类型">
+        <el-select v-model="vehicleListParams.vehicleType" clearable placeholder="车辆类型" @change="getVehicleList">
+          <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="状态">
+        <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">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.vin }}</span>
-        </template>
-      </el-table-column>
+      <!--      <el-table-column label="vin码" width="180" align="center">-->
+      <!--        <template slot-scope="scope">-->
+      <!--          <span style="margin-left: 10px">{{ scope.row.vin }}</span>-->0
+      <!--        </template>-->
+      <!--      </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() {