refactor:安全巡查-新增巡查任务中巡查点新增删除实现交互

src/views/safety-inspection/addInspectionTask.vue

@@ -13,10 +13,13 @@
           <el-input type="textarea" rows="4" v-model="addTaskFrom.taskContent" placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item label="巡查点">
-          <el-select v-model="addTaskFrom.inspectionPoint" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
+          <div  v-for="(item, index) in addTaskFrom.inspectionPoints" :key="index" class="ins-point">
+            <el-select v-model="item.value" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select">
+              <el-option :label="opt.label" :value="opt.value" v-for="opt in inspectionOptions" :key="opt.value"></el-option>
+            </el-select>
+            <img src="@/assets/image/safety-inspection/del.png" alt="" @click="removeOption(index)" v-if="isFirstItem()">
+            <img src="@/assets/image/safety-inspection/add.png" alt=""  v-if="isLastItem(index)" @click="addOption">
+          </div>
         </el-form-item>
         <el-form-item label="巡查时长">
           <el-input v-model="addTaskFrom.taskDuration" placeholder="请输入" style="width: 85%"></el-input>
@@ -50,10 +53,14 @@ export default {
       addTaskFrom: {
         taskName: '',
         taskContent: '',
-        inspectionPoint: '',
+        inspectionPoints: [{ value: '' }],
         taskDuration: '',
         person: ''
-      }
+      },
+       inspectionOptions: [
+        { value: 'shanghai', label: '上海' },
+        { value: 'beijing', label: '北京' }
+      ],
     }
   },
   mounted() {
@@ -64,7 +71,22 @@ export default {
   destroyed() {
     this.$globalEventBus.$off('clcikAddTask')
   },
-  methods: {}
+  methods: {
+     isLastItem(index) {
+      return index === this.addTaskFrom.inspectionPoints.length - 1
+    },
+    isFirstItem(){
+      return this.addTaskFrom.inspectionPoints.length > 1
+    },  
+    addOption() {
+      this.addTaskFrom.inspectionPoints.push({ value: '' })
+    },
+    removeOption(index) {
+      if (this.addTaskFrom.inspectionPoints.length > 1) {
+        this.addTaskFrom.inspectionPoints.splice(index, 1)
+      }
+    }
+  }
 }
 </script>
 
@@ -111,6 +133,15 @@ export default {
         color: #fff;
       }
     }
+    .ins-point{
+      display: flex;
+      align-items: center;
+      gap:px-to-rem(5);
+      margin-bottom:px-to-rem(20);
+    }
+    .ins-point:last-child{
+      margin-bottom: 0;
+    }
   }
 }
 </style>

src/views/smart-early-warning/right.vue

@@ -120,12 +120,12 @@ export default {
           thumbnail: ImgUrl
         },
         {
-          image: 'https://picsum.photos/1200/800?city=1',
-          thumbnail: 'https://picsum.photos/200/150?city=1'
+          image: ImgUrl,
+          thumbnail: ImgUrl
         },
         {
-          image: 'https://picsum.photos/1200/800?animal=1',
-          thumbnail: 'https://picsum.photos/200/150?animal=1'
+          image: ImgUrl,
+          thumbnail: ImgUrl
         }
       ],
       sourceObj: {