增加围栏删除

src/api/fence/add.js

@@ -27,3 +27,11 @@ export function fenceList(data) {
     data
   })
 }
+
+//删除围栏
+export function deleteFenceById(id) {
+  return request({
+    url: 'carBase/baseFence/deleteFence?fenceId='+ id,
+    method: 'post'
+  })
+}

src/views/car/fence.vue

@@ -1,50 +1,49 @@
 <template>
   <div>
-    <el-button type="success" @click="upiInsertDialog">添加围栏</el-button>
+    <el-button type="success" plain @click="upiInsertDialog" icon="el-icon-check">添加围栏</el-button>
+    <el-button type="danger" plain @click="deleteFence()" icon="el-icon-check">删除围栏</el-button>
 
-    <el-table :data="fenceData" style="width: 100%">
+    <el-table :data="fenceData" style="width: 500%"  @selection-change="handleSelectionChange">
+
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
 
 
-<!--      <el-table-column label="围栏编号" width="180">-->
+      <el-table-column label="围栏名称" width="220">
-<!--        <template slot-scope="scope">-->
-<!--          <span>{{scope.row.fenceId}}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-
-
-      <el-table-column label="围栏名称" width="200px">
         <template slot-scope="scope">
           <span>{{scope.row.fenceName}}</span>
         </template>
       </el-table-column>
 
 
-      <el-table-column label="行驶状态" width="200px">
+      <el-table-column label="行驶状态" width="220">
         <template slot-scope="scope">
           <span v-if="scope.row.driveStatus===1">驶入</span>
           <span v-if="scope.row.driveStatus===2">驶出</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="围栏状态" width="200px">
+      <el-table-column label="围栏状态" width="350">
         <template slot-scope="scope">
           <span v-if="scope.row.fenceStatus===0">停用</span>
           <span v-if="scope.row.fenceStatus===1">正常</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="围栏坐标" width="200px">
+      <el-table-column label="围栏坐标" width="400">
         <template slot-scope="scope">
           <span>{{scope.row.fenceLocation}}</span>
         </template>
       </el-table-column>
 
 
-      <el-table-column label="操作" width="200px">
+      <el-table-column label="操作" width="220">
         <template slot-scope="scope">
           <el-button type="text" @click="updialog(scope.row)">编辑围栏</el-button>
           <el-button type="text">编辑</el-button>
-          <el-button type="text">删除</el-button>
+          <el-button type="text" @click="deleteFence(scope.row.fenceId)">删除</el-button>
         </template>
       </el-table-column>
 
@@ -99,7 +98,7 @@
 </template>
 
 <script>
-import {fenceList, insertFence, updateFenceMapAddr} from "@/api/fence/add";
+import {deleteFenceById, fenceList, insertFence, updateFenceMapAddr} from "@/api/fence/add";
 import log from "@/views/monitor/job/log.vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 export default {
@@ -110,6 +109,7 @@ export default {
       mapAddr:'',
       dialogVisible:false,
       dialogVisibleTwo:false,
+      ids:"",
       //围栏列表
       fenceData:[],
       total:0,
@@ -134,6 +134,7 @@ export default {
 
   methods: {
     updialog(data) {
+      this.updateFences = {}
       this.dialogVisible=true
       setTimeout(() => {
           this.initMap();},
@@ -141,6 +142,9 @@ export default {
       )
       this.updateFences = data
     },
+    handleSelectionChange(val) {
+      this.dis = val;
+    },
     initMap() {
       AMapLoader.load({
         key: '9a267a434f26f5dd5a87fb89d128f745', // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -213,14 +217,19 @@ export default {
      this.updateFences.fenceLocation = this.mapAddr
       console.log(this.updateFences)
       updateFenceMapAddr(this.updateFences).then(res =>{
-        if (res.data.code == 500){
+        if (res.data.code === 200){
-          alert("围栏编辑失败!")
-        }
           alert("围栏编辑成功!")
           this.dialogVisible=false
-          this.updateFences = {
+        }
-          }
+      })
-
+    },
+    //删除
+    deleteFence(id) {
+      deleteFenceById(id).then(res =>{
+        if (res.data.code === 200){
+          alert("已成功删除!")
+          this.getFenceList()
+        }
       })
     },
     upiInsertDialog() {
@@ -228,18 +237,17 @@ export default {
     },
     onSubmit() {
       insertFence(this.insertFences).then(res =>{
-        if (res.data.code == 500){
+        this.dialogVisibleTwo = false
+        if (res.data.code === 500){
           alert("添加围栏失败!");
         }
         alert("添加围栏成功!")
-        this.dialogVisibleTwo = false
       })
     },
     getFenceList() {
       fenceList(this.selectQuery).then(res =>{
         this.fenceData = res.data.rows
         this.total = res.data.total
-
       })
     },