yjhtgl-web/src/views/inspectionWork/patrolSubTasks.vue

<template>
  <div class="app-container p-2">
    <el-row :gutter="20">
      <!-- 基础信息 -->
      <el-col :lg="30" :xs="24" style="">
        <el-form-item>
          <div class="back-btn" @click="goBack">
            <el-icon><Back /></el-icon>
            返回上一级
          </div>
        </el-form-item>
        <el-row :span="24" :gutter="10">
          <el-col :span="20" label="任务名称">
            <h2 key="business" style="font-weight: bolder">{{ detailData.business }}</h2>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handleUpdate()"> 编辑 </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="handlefinal()"> 完成任务 </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" @click="handleDelete()"> 删除 </el-button>
          </el-col>
        </el-row>
        <div class="line" style="background: #e7e7e7; width: auto; height: 0.6px; position: relative"></div>
        <h3>基础信息</h3>
        <el-card style="margin-top: 10px" shadow="hover">
          <el-descriptions title="">
            <el-descriptions-item key="task_number" label="任务编号：">{{ detailData.task_number }}</el-descriptions-item>
            <el-descriptions-item key="business" label="巡查业务：">{{ detailData.business }}</el-descriptions-item>
            <el-descriptions-item key="create_by" label="创建人：">{{ detailData.create_by }}</el-descriptions-item>
            <el-descriptions-item key="create_time" label="创建时间：">{{ detailData.create_time }}</el-descriptions-item>
            <el-descriptions-item key="task_time" label="巡查时间范围：">{{ detailData.task_time }}</el-descriptions-item>
            <el-descriptions-item key="cycle" label="巡查周期：">{{ detailData.cycle }}</el-descriptions-item>
            <el-descriptions-item key="inspection_range" label="巡查范围：">{{ detailData.inspection_range }}</el-descriptions-item>
            <el-descriptions-item key="task_status" label="任务状态：">{{ detailData.task_status }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :lg="30" :xs="24">
        <h3>子任务记录</h3>
        <el-card style="margin-top: 10px" shadow="hover">
          <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column label="巡查业务" align="center" :formatter="(row) => businessMap[row.business]" />
            <el-table-column label="要求巡查时间" align="center" prop="task_time" />
            <el-table-column label="巡查周期" align="center" :formatter="(row) => cycleMap[row.cycle]" />
            <el-table-column label="巡查范围" align="center" :formatter="(row) => inspectionRangeMap[row.inspection_range]" />
            <el-table-column label="执行日期" align="center" prop="create_time" />
            <el-table-column label="已完成" align="center" prop="completed_num">
              <template #default="scope">
                <el-text class="common-btn-text-primary" @click="handleCompletedClick(scope.row)">{{ scope.row.completed_num }}</el-text>
              </template>
            </el-table-column>
            <el-table-column label="未完成" align="center" prop="incomplete_num">
            <template #default="scope">
              <el-text class="common-btn-text-primary" @click="handleIncompletedClick(scope.row)">{{ scope.row.incomplete_num }}</el-text>
            </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-text class="common-btn-text-primary" @click="handleResult(scope.row)">巡查结果</el-text>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            v-model:page="queryParams.page"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="fetchSubTasks"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
  <PatrolSubResult v-if="patrolSubResultState.show" :event-id="patrolSubResultState.eventId" @close="handleCancel" />
  <PatrolTaskEdit v-if="patrolTaskEditState.show" :event-id="patrolTaskEditState.eventId" @close="handleCancel" @refresh-parent="refreshBoth" />
  <Completed v-if="completedState.show" :event-id="completedState.eventId" @close="handleCancel" />
  <Incompleted v-if="incompletedState.show" :event-id="incompletedState.eventId" @close="handleCancel" />
</template>
<script setup lang="ts">
import { workDetail, workSubList, updatetask, deleteRisk } from '@/api/inspectionWork/inspector';
import { reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import PatrolSubResult from './patrolSubResult.vue';
import PatrolTaskEdit from './patrolTaskEdit.vue';
import Completed from './completed.vue';
import Incompleted from './incompleted.vue';
import { to } from 'await-to-js';
const props = defineProps<{ eventId: string }>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const total = ref(0);
const tableData = ref([]);
const multiple = ref(true);
const ids = ref<Array<number | string>>([]);
const single = ref(true);
const emits = defineEmits(['close']);
const detailData = ref({
  task_number: '',
  business: '',
  task_time: '',
  cycle: '',
  id: '',
  inspection_range: '',
  task_status: '',
  create_time: '',
  create_by: ''
});
const initFormData = reactive({
  finished: '',
  business: '',
  task_time: '',
  cycle: '',
  id: '',
  inspection_range: '',
  run_time: '',
  unfinished: ''
});
const data = reactive({
  form: { ...initFormData },
  queryParams: {
    page: 1,
    pageSize: 10
  }
});
const { queryParams, form } = toRefs(data);
// 映射表
const businessMap = {
  0: '城市隐患巡查',
  1: '森林防火巡查',
  2: '重点危化企业巡查',
  3: '重点水库水位巡查'
};

const cycleMap = {
  0: '每年',
  1: '每月',
  2: '每周',
  3: '每日',
  4: '一次'
};

const inspectionRangeMap = {
  0: '市级',
  1: '区县级',
  2: '镇街级',
  3: '村居级'
};

const taskStatusMap = {
  0: '未开始',
  1: '进行中',
  2: '未完成',
  3: '已完结'
};
let patrolTaskEditState = reactive({
  show: false,
  eventId: ''
});
let patrolSubResultState = reactive({
  show: false,
  eventId: ''
});
let completedState = reactive({
  show: false,
  eventId: ''
});
let incompletedState = reactive({
  show: false,
  eventId: ''
});
const handleCancel = () => {
  patrolTaskEditState.show = false;
  patrolSubResultState.show = false;
  completedState.show = false;
  incompletedState.show = false;
};
const handleUpdate = () => {
  patrolTaskEditState.eventId = props.eventId; // 假设eventId是id字段
  patrolTaskEditState.show = true;
};
const handleResult = (row) => {
  if (row) {
    patrolSubResultState.eventId = row.id; // 假设eventId是id字段
    patrolSubResultState.show = true;
  }
};
const handleCompletedClick = (row) => {
  if (row) {
    completedState.eventId = row.id; // 假设eventId是id字段
    completedState.show = true;
  }
};
const handleIncompletedClick = (row) => {
  if (row) {
    incompletedState.eventId = row.id; // 假设eventId是id字段
    incompletedState.show = true;
  }
};
const loading = ref(false);
const fetchWorkDetail = () => {
  loading.value = true;
  workDetail(props.eventId) // 使用从父组件接收到的eventId
    .then((res) => {
      if (res.code === 200) {
        let data = res.data;
        // 转换business
        data.business = businessMap[data.business] || '未知';
        // 转换cycle
        data.cycle = cycleMap[data.cycle] || '未知';
        // 转换inspection_range
        data.inspection_range = inspectionRangeMap[data.inspection_range] || '未知';
        // 转换task_status
        data.task_status = taskStatusMap[data.task_status] || '未知';

        detailData.value = data; // 将转换后的数据赋值给detailData
      } else {
        console.error(res.msg);
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const fetchSubTasks = () => {
  return workSubList(props.eventId, queryParams.value)
    .then((res) => {
      if (res.code === 200) {
        tableData.value = res.data;
        total.value = res.total;
        console.log('Fetched subtasks data:', tableData.value);
      } else {
        console.error(res.msg);
      }
    })
    .catch((error) => {
      console.error('Error fetching sub tasks:', error);
    });
};
const handleDelete = async () => {
  const [err] = await to(proxy?.$modal.confirm('是否确认删除？') as any);
  if (!err) {
    await deleteRisk([props.eventId]);
    proxy?.$modal.msgSuccess('删除成功');
    emits('close');
    emits('refreshsub');
  }
};
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
const handlefinal = async () => {
  try {
    const confirmed = await ElMessageBox.confirm('确定要完结任务吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    if (confirmed) {
      try {
        await updatetask({ id: props.eventId, task_status: '3' });
        console.log(`任务 ${props.eventId} 已完结`);
        fetchWorkDetail();
      } catch (error) {
        console.error(`任务 ${props.eventId} 完结失败:`, error);
      }
    } else {
      console.log(`任务 ${props.eventId} 未完结`);
    }
  } catch (error) {
    console.error('确认对话框处理失败:', error);
  }
};
const goBack = () => {
  emits('close');
};
const refreshBoth = () => {
  fetchWorkDetail();
  fetchSubTasks();
};
onMounted(() => {
  fetchWorkDetail(); // 在组件挂载后调用此函数以获取数据
  fetchSubTasks();
});
</script>