迭代八巡查工作：巡查结果的界面搭建和接口调试

src/api/inspectionWork/inspector.ts

@@ -117,3 +117,33 @@ export function workSubList(task_id) {
     params: task_id
   });
 }
+// 删除风险任务
+export const deleteRisk = (id) => {
+  return request({
+    url: '/api/riskManagement/inspection/task/delete/' + id,
+    method: 'delete',
+    params: id
+  });
+};
+// 查询巡查结果列表
+export function resultList(children_task_id, queryParams) {
+  return request({
+    url: '/api/riskManagement/inspection/task/children/task/result/' + children_task_id + '/list',
+    method: 'get',
+    params: {
+      page: queryParams.page,
+      pageSize: queryParams.pageSize,
+      inspection_result: queryParams.inspection_result,
+      area_code: queryParams.area,
+      nick_name: queryParams.nick_name
+    }
+  });
+}
+// 查询用户详情
+export function fileDownload(url) {
+  return request({
+    url: '/api/file/download/' + url,
+    method: 'get',
+    params: url
+  });
+}

src/views/inspectionWork/patrolSubResult.vue

@@ -0,0 +1,236 @@
+<template>
+  <div>
+    <el-dialog v-model="showSearch" title="巡查结果" width="80%" @close="$emit('close')">
+      <div class="app-container">
+        <transition name="fade">
+          <div v-show="showSearch">
+            <el-form ref="queryFormRef" :model="queryParams">
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="所属区划：" prop="area" label-width="auto">
+                    <el-tree-select
+                      v-model="divisionSelectedId"
+                      :data="formattedDivisionData"
+                      :props="{ label: 'label', value: 'code', children: 'children' }"
+                      :render-after-expand="false"
+                      style="width: 468px"
+                      @change="onDivisionChange"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="巡查结果：" prop="inspection_result" label-width="auto">
+                    <el-select v-model="queryParams.inspection_result" placeholder="全部" clearable>
+                      <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item prop="nick_name" label-width="auto">
+                    <el-input v-model="queryParams.nick_name" placeholder="请输入巡查人"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-button type="primary" @click="handleQuery">搜索</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="Plus" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column label="巡查点" align="center" prop="inspection_point_name" />
+          <el-table-column label="所属区划" align="center" prop="area" />
+          <el-table-column label="执行日期" align="center" prop="create_time" />
+          <el-table-column label="巡查人" align="center" prop="nick_name" />
+          <el-table-column label="巡查结果" align="center">
+            <template #default="{ row }">
+              {{ getInspectionResultText(row.inspection_result) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="现场照片" align="center" prop="fileList">
+            <template #default="{ row }">
+              <div v-if="row.fileList && row.fileList.length > 0">
+                <img v-for="file in row.fileList" :key="file.uid" :src="file.previewUrl" alt="" style="max-width: 100px" />
+              </div>
+              <div v-else>无图片</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" align="center" prop="remark" />
+        </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { inspectorDivision, resultList, fileDownload } from '@/api/inspectionWork/inspector';
+import { ElMessage } from 'element-plus';
+const loading = ref(true);
+const showSearch = ref(true);
+const multiple = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const total = ref(0);
+const tableData = ref([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const divisionSelectedId = ref(null);
+const formattedDivisionData = ref([]);
+const rawDivisionData = ref([]);
+const props = defineProps<{
+  eventId: string | number;
+}>();
+const initFormData = reactive({
+  id: '',
+  children_task_id: '',
+  inspection_point_name: '',
+  area: '',
+  create_time: '',
+  nick_name: '',
+  inspection_result: '',
+  remark: '',
+  fileList: []
+});
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: '',
+    pageSize: '',
+    inspection_result: '',
+    area_code: '',
+    nick_name: ''
+  }
+});
+const { queryParams, form } = toRefs(data);
+const cycleOptions = ref([
+  { label: '全部', value: '' }, // 通常“全部”对应空值或者特定的标识符，表示不按此条件过滤
+  { label: '正常', value: '1' },
+  { label: '异常', value: '2' }
+]);
+const getInspectionResultText = (resultCode) => {
+  switch (resultCode) {
+    case '1':
+      return '正常';
+    case '2':
+      return '异常';
+    default:
+      return '全部';
+  }
+};
+
+const fetchResulData = () => {
+  loading.value = true; // 开始加载
+  return resultList(props.eventId, queryParams.value)
+    .then((res) => {
+      if (res.code === 200) {
+        tableData.value = res.data || []; // 确保tableData是一个数组
+        total.value = res.total || 0; // 确保total是一个数字
+        console.log('Fetched subtasks data:', tableData.value);
+      } else {
+        console.error(res.msg);
+      }
+      loading.value = false; // 结束加载
+    })
+    .catch((error) => {
+      console.error('Error fetching sub tasks:', error);
+      loading.value = false; // 结束加载
+    });
+};
+const loadFilePreviews = (rowData) => {
+  if (rowData.fileList && rowData.fileList.length > 0) {
+    for (const file of rowData.fileList) {
+      try {
+        fileDownload(file.url)
+          .then((response) => {
+            if (response && response.data) {
+              file.previewUrl = URL.createObjectURL(new Blob([response.data]));
+            }
+          })
+          .catch((error) => {
+            console.error(`Failed to load image at ${file.url}:`, error);
+          });
+      } catch (error) {
+        console.error(`Failed to start download for ${file.url}:`, error);
+      }
+    }
+  }
+};
+const fetchAndLoadPreviews = () => {
+  fetchResulData().then(() => {
+    tableData.value.forEach(loadFilePreviews);
+  });
+};
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  fetchResulData();
+};
+// 重置查询条件
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, nick_name: '', area_code: '', inspection_result: '' };
+  handleQuery();
+};
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+const fetchDivisionData = async () => {
+  const response = await inspectorDivision();
+  if (response.code === 200) {
+    rawDivisionData.value = response.data;
+    formattedDivisionData.value = formatDivisionData(rawDivisionData.value);
+    console.log('Formatted Division Data:', formattedDivisionData.value);
+  } else {
+    ElMessage.error(response.msg);
+  }
+};
+const onDivisionChange = (value) => {
+  // 确认选中的项存在
+  const selectedDivision = findNode(formattedDivisionData.value, value);
+  if (!selectedDivision) {
+    ElMessage.warning('未找到匹配的责任区划。');
+    // 将选中的值重置为 null 或空字符串，防止后续逻辑错误
+    divisionSelectedId.value = null;
+  } else {
+    console.log('Selected Division:', selectedDivision); // 调试输出
+  }
+};
+// 递归查找节点
+const findNode = (nodes, code) => {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.code === code) {
+      return node;
+    }
+    if (node.children && node.children.length > 0) {
+      const found = findNode(node.children, code);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+// 格式化责任区划数据
+const formatDivisionData = (data) => {
+  return data.map((item) => ({
+    id: item.id,
+    label: item.label,
+    code: item.code,
+    children: item.children ? formatDivisionData(item.children) : []
+  }));
+};
+onMounted(() => {
+  fetchResulData();
+  fetchDivisionData();
+});
+</script>

src/views/inspectionWork/patrolSubTasks.vue

@@ -20,7 +20,7 @@
             <el-button type="primary" @click="handlefinal()"> 完成任务 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" @click="handleDelete"> 删除预案 </el-button>
+            <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>
@@ -51,7 +51,7 @@
             <el-table-column label="未完成" align="center" prop="incomplete_num" />
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template #default="scope">
-                <el-text class="common-btn-text-primary" @click="handleView(scope.row)">巡查结果</el-text>
+                <el-text class="common-btn-text-primary" @click="handleResult(scope.row)">巡查结果</el-text>
               </template>
             </el-table-column>
           </el-table>
@@ -66,12 +66,18 @@
       </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" />
 </template>
 <script setup lang="ts">
-import { workDetail, workSubList, updatetask } from '@/api/inspectionWork/inspector';
+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 { 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);
@@ -136,6 +142,28 @@ const taskStatusMap = {
   2: '未完成',
   3: '已完结'
 };
+let patrolTaskEditState = reactive({
+  show: false,
+  eventId: ''
+});
+let patrolSubResultState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  patrolTaskEditState.show = false;
+  patrolSubResultState.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 loading = ref(false);
 const fetchWorkDetail = () => {
   loading.value = true;
@@ -176,6 +204,15 @@ const fetchSubTasks = () => {
       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;
@@ -206,6 +243,10 @@ const handlefinal = async () => {
 const goBack = () => {
   emits('close');
 };
+const refreshBoth = () => {
+  fetchWorkDetail();
+  fetchSubTasks();
+};
 onMounted(() => {
   fetchWorkDetail(); // 在组件挂载后调用此函数以获取数据
   fetchSubTasks();

src/views/inspectionWork/patrolTask.vue

@@ -67,7 +67,7 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
               <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
-              <el-text class="common-btn-text-danger" v-if="scope.row.task_status !== '3'" @click="handleWork(scope.row)">完成任务</el-text>
+              <el-text v-if="scope.row.task_status !== '3'" class="common-btn-text-danger" @click="handleWork(scope.row)">完成任务</el-text>
               <el-text class="common-btn-text-danger" @click="handleDelete(scope.row)">删除</el-text>
             </template>
           </el-table-column>
@@ -76,7 +76,7 @@
       </div>
     </div>
   </div>
-  <PatrolSubTasks v-if="patrolSubTasksState.show" :event-id="patrolSubTasksState.eventId" @close="handleCancel" />
+  <PatrolSubTasks v-if="patrolSubTasksState.show" :event-id="patrolSubTasksState.eventId" @close="handleCancel" @refreshsub="fetchWorkrData" />
   <PatrolTaskEdit v-if="patrolTaskEditState.show" :event-id="patrolTaskEditState.eventId" @close="handleCancel" @refresh="fetchWorkrData" />
   <PatrolTaskAdd v-if="patrolTaskAddState.show" @close="handleCancel" @refresh="fetchWorkrData" />
 </template>

src/views/inspectionWork/patrolTaskEdit.vue

@@ -71,7 +71,7 @@ import { ElMessage } from 'element-plus';
 const demoFormRef = ref(null);
 const buttonLoading = ref(false);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const emits = defineEmits(['close']);
+const emit = defineEmits(['close']);
 const props = defineProps<{ eventId: string }>();
 let form = ref({
   id: '',
@@ -111,14 +111,15 @@ const submitForm = async () => {
   const response = await updatetask(form.value);
   if (response.code === 200) {
     ElMessage.success('提交成功');
-    emits('refresh'); // 提交成功后通知父组件刷新
-    emits('close'); // 关闭弹窗
+    emit('refresh'); // 提交成功后通知父组件刷新
+    emit('refreshParent'); // 提交成功后通知子任务组件刷新
+    cancel(); // 关闭弹窗
   } else {
     ElMessage.error(response.msg);
   }
 };
 
 const cancel = () => {
-  emits('close');
+  emit('close');
 };
 </script>