启动预案

src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

@@ -10,8 +10,19 @@
         </template>
         <template #default>
           <div v-for="(task, index) in tasks" :key="index" class="task-item">
-            <p class="unit-name">{{ task.dept_name }}</p>
+            <div class="task-header">
+              <p class="unit-name">{{ task.dept_name }}</p>
+              <div class="common-btn-primary2" @click="handleShowApprove(task)">领导批示</div>
+            </div>
             <p class="task-description">{{ task.content }}</p>
+            <p class="task-text">{{ task.comment }}</p>
+            <div v-if="task.show" class="form-box">
+              <el-input v-model="task.content2" class="custom-input" placeholder="请输入领导审批意见" />
+              <div class="form-footer">
+                <div class="common-btn" @click="handleCancel(task)">取消</div>
+                <div class="common-btn-primary" @click="handleSubmit(task)">确定</div>
+              </div>
+            </div>
           </div>
         </template>
       </el-skeleton>
@@ -80,7 +91,7 @@ const sendTasks = () => {
     ElMessage.error('事件ID未定义，无法发送任务！');
     return;
   }
-  
+
   sendTask({ eventId: props.eventId })
     .then(() => {
       ElMessage.success('任务已成功发送！');
@@ -90,6 +101,15 @@ const sendTasks = () => {
       //ElMessage.error('发送任务失败，请稍后再试！');
     })
 };
+const handleShowApprove = (item) => {
+  item.show = !!!item.show;
+};
+const handleCancel = (item) => {
+  item.show = false;
+};
+const handleSubmit = (item) => {
+  item.show = false;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -105,6 +125,22 @@ const sendTasks = () => {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
+  .task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .task-text {
+    color: red;
+  }
+  .form-box {
+    .form-footer {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 10px;
+    }
+  }
 }
 
 .unit-name {