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

<template>
  <el-dialog v-model="showSearch" title="已完成" width="80%" @close="$emit('close')">
    <el-row :gutter="20">
      <el-col :lg="4" :xs="24">
        <el-tree
          ref="deptTreeRef"
          class="mt-2"
          node-key="id"
          :data="deptOptions"
          :props="{ label: 'label', children: 'children' }"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          highlight-current
          default-expand-all
          @node-click="handleNodeClick"
        />
      </el-col>
      <el-col :lg="20" :xs="24">
        <transition name="fade">
          <div v-show="showSearch">
            <el-form ref="queryFormRef" :model="queryParams">
              <el-button type="primary" @click="handleExport">导出</el-button>
            </el-form>
          </div>
        </transition>
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column label="排查范围" align="center" prop="area" />
          <el-table-column label="任务进度" align="center" prop="task_status">
            <!-- 使用自定义槽来渲染转换后的文本 -->
            <template #default="scope">
              {{ formatStatus(scope.row.task_status) }}
            </template>
          </el-table-column>
          <el-table-column label="巡查人员" align="center" prop="nick_name" />
          <el-table-column label="上报时间" align="center" prop="create_time" />
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { inspectorDivision, patrolNum } from '@/api/inspectionWork/inspector';

const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<number | string>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const deptOptions = ref([]);
const deptTreeRef = ref(null);
const tableData = ref([]);
const props = defineProps<{ eventId: string }>();

const initFormData = reactive({
  area: '',
  task_status: '',
  yzy_organization: '',
  nick_name: '',
  create_time: ''
});

const data = reactive({
  form: { ...initFormData },
  queryParams: {
    area_code: '',
    deptId: ''
  }
});

const { queryParams, form } = toRefs(data);
const formatStatus = (status) => {
  return Number(status) === 1 ? '已完成' : '未完成';
};

const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

const getTreeSelect = async () => {
  const res = await inspectorDivision();
  if (res.code === 200) {
    deptOptions.value = res.data; // 将部门树数据赋值给deptOptions
  } else {
    console.error(res.msg);
  }
  loading.value = false; // 加载完成后关闭加载提示
};

const fetchUserData = async () => {
  loading.value = true; // 开始加载

  // 构造请求参数
  const params = {
    ...queryParams.value,
    // 只在area_code有值时添加到请求参数中
    ...(queryParams.value.area_code ? { area_code: queryParams.value.area_code } : {})
  };

  return patrolNum(props.eventId, params)
    .then((res) => {
      if (res.code === 200) {
        tableData.value = res.data; // 确保tableData是一个数组
        total.value = res.total;
      } else {
        console.error(res.msg);
      }
      loading.value = false; // 结束加载
    })
    .catch((error) => {
      console.error('Error fetching sub tasks:', error);
      loading.value = false; // 结束加载
    });
};

watch(queryParams, () => {
  fetchUserData();
});

const handleNodeClick = (data: any) => {
  queryParams.value.deptId = data.id;
  queryParams.value.area_code = data.code; // 设置area_code为点击节点的code值
  fetchUserData();
};

const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
};

onMounted(async () => {
  await getTreeSelect();
  fetchUserData();
});
</script>

<style scoped>
.mt-2 {
  max-width: 300px; /* 设置最大宽度 */
  max-height: 800px; /* 设置最大高度 */
  overflow-y: auto; /* 如果内容超出高度则显示滚动条 */
}
</style>