yjhtgl-web/src/views/emergencyCommandMap/RightSection/TaskDelivery.vue

<template>
  <Dialog v-model="dialogVisible" type="xl" :title="props.title" @close="closeDialog">
    <div class="content">
      <el-skeleton :loading="loading" animated>
        <template #template>
          <div v-for="n in 3" :key="n" class="task-item">
            <el-skeleton-item variant="p" style="width: 80%" />
            <el-skeleton-item variant="p" style="margin-top: 16px" />
          </div>
        </template>
        <template #default>
          <div v-for="(task, index) in tasks" :key="index" class="task-item">
            <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 v-if="!!task.comment" 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>
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-right:8px">
        <div class="common-btn" @click="closeDialog" style="margin-right: 20px">取 消</div>
        <div class="common-btn-primary2" @click="sendTasks">确认发送H5短信</div>
        
      </div>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { unitTask, sendTask } from '@/api/duty/eventing';

interface Props {
  modelValue: boolean;
  title: string;
  planId?: string;
  eventId?: string;
}

const props = defineProps<Props>();
const emit = defineEmits(['update:modelValue']);

const dialogVisible = ref(props.modelValue);
const tasks = ref([]);
const loading = ref(false);

watch(
  () => props.modelValue,
  (newValue) => {
    dialogVisible.value = newValue;
    if (newValue && props.planId && props.eventId) {
      fetchDataWithLoading(/*props.planId, props.eventId*/);
    }
  }
);

const closeDialog = () => {
  dialogVisible.value = false; // 直接更新
  emit('update:modelValue', false);
};

const fetchDataWithLoading = async () => {
  loading.value = true;
  try {
    const response = await unitTask({ plan_id: props.planId });
    if (response && response.data && Array.isArray(response.data)) {
      tasks.value = response.data;
    } else {
      ElMessage.error('未能从服务器获取有效任务数据');
    }
  } catch (error) {
    // ElMessage.error('获取任务数据失败');
  } finally {
    loading.value = false;
  }
};

const sendTasks = () => {
  if (!props.eventId) {
    ElMessage.error('事件ID未定义，无法发送任务！');
    return;
  }

  // 领导批示内容
  let task_list = {};
  tasks.value.map((v)=>{
    if(v.content2 && v.content2 != "") {
      task_list[v.dept_id] =  v.content2
    }
  })
  // console.log(tasks.value);
  sendTask({ eventId: props.eventId, tasks: task_list })
    .then(() => {
      ElMessage.success('任务已成功发送！');
      closeDialog(); // 使用关闭方法
    })
    .catch(() => {
      //ElMessage.error('发送任务失败，请稍后再试！');
    });
};
const handleShowApprove = (item) => {
  item.show = !!!item.show;
};
const handleCancel = (item) => {
  item.content2 = "";
  item.comment = "";
  item.show = false;
};
const handleSubmit = (item) => {
  item.comment = item.content2;
  item.show = false;
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
}

.task-item {
  display: block;
  padding: 10px;
  margin-bottom: 10px;
  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 {
  font-weight: bold;
  margin-bottom: 5px;
  word-break: break-all;
}

.task-description {
  word-break: break-all;
  white-space: pre-wrap;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
</style>