更改预案发送（未完成）

src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

@@ -1,7 +1,7 @@
 <template>
-  <Dialog v-model="props.modelValue" :title="props.title" class="dialog-wrap" hide-footer>
+  <el-dialog ref="formDialogRef" v-model="props.modelValue" :title="props.title" width="900px" @close="closeDialog">
     <transition name="fade">
-      <div class="task-list mb-[20px]">
+      <div v-if="dialogVisible" class="mb-[20px]">
         <el-skeleton :loading="loading" animated>
           <template #template>
             <div v-for="n in 3" :key="n" class="task-item">
@@ -18,34 +18,39 @@
         </el-skeleton>
       </div>
     </transition>
-    <div class="footer">
+    <template #footer>
       <div class="dialog-footer">
-        <el-button @click="closeDialog">取 消</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="sendTasks">确认发送H5短信</el-button>
       </div>
-    </div>
-  </Dialog>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
 import { defineProps, defineEmits, ref, watch, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-import { unitTask, sendTask } from '@/api/duty/eventing';
+import { ElMessage, ElLoading } from 'element-plus'; // 假设使用的是 Element Plus
+import { unitTask, sendTask } from '@/api/duty/eventing'; // 导入已有的 unitTask 接口
 
+// 定义组件属性类型
 interface Props {
   modelValue: boolean;
   title: string;
-  planId?: string;
+  planId?: string; // 新增 planId prop
   eventId?: string;
 }
 
 const props = defineProps<Props>();
+
+// 定义事件发射器
 const emit = defineEmits(['update:modelValue']);
 
-const dialogVisible = ref(props.modelValue);
-const tasks = ref([]);
-const loading = ref(false);
+// 内部响应式变量
+const dialogVisible = ref(props.modelValue); // 控制子对话框的显示状态
+const tasks = ref<Array<{ id: string; dept_id: string; dept_name: string; content: string }>>([]);
+const loading = ref(false); // 控制加载提示的状态
 
+// 监听 modelValue 变化，确保当外部关闭时，内部对话框也关闭
 watch(
   () => props.modelValue,
   (newValue) => {
@@ -55,11 +60,23 @@ watch(
     }
   }
 );
+// 在组件挂载后显示对话框（仅用于测试）
+onMounted(() => {
+  // 如果需要，可以在这里进行一些初始化操作
+});
 
+// 当主对话框关闭时，更新父组件的 modelValue
 const closeDialog = () => {
   emit('update:modelValue', false);
 };
 
+// 当子对话框关闭时，重置选中状态
+const handleClose = () => {
+  dialogVisible.value = false;
+  emit('update:modelValue', false);
+};
+
+// 获取任务列表，并显示加载提示
 const fetchDataWithLoading = async () => {
   loading.value = true;
   try {
@@ -76,18 +93,24 @@ const fetchDataWithLoading = async () => {
   }
 };
 
+// 发送任务时的操作
 const sendTasks = () => {
+  // 检查 props.eventId 是否存在
   if (!props.eventId) {
     ElMessage.error('事件ID未定义，无法发送任务！');
     return;
   }
 
+  // 调用 sendTask 函数发送任务
   sendTask({ eventId: props.eventId })
-    .then(() => {
+    .then((response) => {
+      console.log('发送H5短信成功', response);
       ElMessage.success('任务已成功发送！');
-      closeDialog();
+      dialogVisible.value = false;
+      emit('update:modelValue', false);
     })
-    .catch(() => {
+    .catch((error) => {
+      console.error('发送H5短信失败', error);
       ElMessage.error('发送任务失败，请稍后再试！');
     });
 };
@@ -102,15 +125,7 @@ const sendTasks = () => {
 // };
 </script>
 
-<style lang="scss" scoped>
-.dialog-wrap {
-  .dialog-footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 30px;
-  }
-}
-
+<style scoped>
 .task-list {
   padding: 20px;
 }
@@ -134,4 +149,9 @@ const sendTasks = () => {
   word-break: break-all;
   white-space: pre-wrap;
 }
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>