sl-sfy-safety/src/views/production-safety/hiddenTroubleInvestigationAndGovernance/areaCheckPlanManagement/areaCheckPlanManagement.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">区域检查计划管理(管理员)</div>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-table-container">
        <header>
          <div style="position: relative">
            <el-button type="primary" class="search-table-container--button" @click="handleCreate">
              添加
            </el-button>
          </div>

          <div class="act-search">
            <section class="select-box">
              <div class="select-box--item">
                <span>检查场所/计划名称：</span>
                <el-input
                  v-model="tableQuery.queryParam.keyword"
                  placeholder="搜索检查场所或计划名称"
                  class="act-search-input"
                  clearable
                />
              </div>
              <div class="select-box--item">
                <span>状态：</span>
                <el-select
                  v-model="tableQuery.queryParam.status"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option
                    v-for="item in AREA_CHECK_PLAN_STATUS_OPTIONS"
                    :key="String(item.value)"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>场所所属类别：</span>
                <el-select
                  v-model="tableQuery.queryParam.venueCategory"
                  placeholder="请选择场所所属类别"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in venueCategoryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>日期范围：</span>
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                />
              </div>
            </section>
            <section class="search-btn">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </section>
          </div>
        </header>

        <div class="batch-table">
          <BasicTable
            ref="basicTableRef"
            :tableData="tableData"
            :tableConfig="tableConfig"
            @update:pageSize="handleSizeChange"
            @update:pageNumber="handleCurrentChange"
          >
            <template #status="scope">
              <span>{{ AREA_CHECK_PLAN_STATUS_LABEL[String(scope.row.status)] ?? '-' }}</span>
            </template>
            <template #needOverallDesc="scope">
              <span>{{ scope.row.needOverallDesc === true ? '是' : scope.row.needOverallDesc === false ? '否' : '-' }}</span>
            </template>
            <template #needSigneeSign="scope">
              <span>{{ scope.row.needSigneeSign === true ? '是' : scope.row.needSigneeSign === false ? '否' : '-' }}</span>
            </template>
            <template #action="scope">
              <div class="action-container--div" style="justify-content: left">
                <!-- 未下发(0)：编辑、删除、查看、下发 -->
                <template v-if="Number(scope.row.status) === 0">
                  <ActionButton text="编辑" @click="handleEdit(scope.row.id)" />
                  <ActionButton
                    text="删除"
                    :popconfirm="{ title: '确定要删除?' }"
                    @confirm="handleDelete(scope.row.id)"
                  />
                  <ActionButton text="查看" @click="handleView(scope.row.id)" />
                  <ActionButton text="下发" @click="handleIssue(scope.row.id)" />
                </template>
                <!-- 进行中(1)：查看、作废 -->
                <template v-else-if="Number(scope.row.status) === 1">
                  <ActionButton text="查看" @click="handleView(scope.row.id)" />
                  <ActionButton
                    text="作废"
                    :popconfirm="{ title: '确定要作废该计划?' }"
                    @confirm="handleCancel(scope.row.id)"
                  />
                </template>
                <!-- 已完成(2)：查看 -->
                <template v-else-if="Number(scope.row.status) === 2">
                  <ActionButton text="查看" @click="handleView(scope.row.id)" />
                </template>
                <!-- 已作废(3)：删除、查看 -->
                <template v-else-if="Number(scope.row.status) === 3">
                  <ActionButton
                    text="删除"
                    :popconfirm="{ title: '确定要删除?' }"
                    @confirm="handleDelete(scope.row.id)"
                  />
                  <ActionButton text="查看" @click="handleView(scope.row.id)" />
                </template>
              </div>
            </template>
          </BasicTable>
        </div>
      </div>
    </main>

    <!-- 下发区域检查计划任务弹窗 -->
    <el-dialog
      v-model="showIssueDialog"
      title="下发区域检查计划任务"
      width="560px"
      destroy-on-close
      @open="onIssueDialogOpen"
      @close="currentIssuePlanId = null"
    >
      <el-form ref="issueFormRef" :model="issueForm" :rules="issueRules" label-width="160px">
        <el-form-item label="责任部门：" prop="responsibleDeptIds">
          <el-cascader
            ref="issueResponsibleDeptCascaderRef"
            v-model="issueForm.responsibleDeptIds"
            :options="issueDeptTree"
            :props="cascaderDeptPropMultiple"
            :show-all-levels="false"
            placeholder="请选择责任部门名称,支持多选"
            filterable
            clearable
            collapse-tags
            collapse-tags-tooltip
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="责任部门人员分组：" prop="responsibleDeptPersonnelGroupCode">
          <el-select
            v-model="issueForm.responsibleDeptPersonnelGroupCode"
            placeholder="请选择责任部门执行人所在分组名称,单选"
            filterable
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in userGroupOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id != null ? String(item.id) : ''"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="安全应急部门：" prop="safetyEmergencyDeptId">
          <el-cascader
            v-model="issueForm.safetyEmergencyDeptId"
            :options="issueDeptTree"
            :props="cascaderDeptProp"
            :show-all-levels="false"
            placeholder="请选择安全应急部门"
            filterable
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="安全应急部人员分组：" prop="safetyEmergencyGroupId">
          <el-select
            v-model="issueForm.safetyEmergencyGroupId"
            placeholder="请选择安全应急部执行人所在分组名称,单选"
            filterable
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in userGroupOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="院领导部门：" prop="hospitalLeaderDeptId">
          <el-cascader
            v-model="issueForm.hospitalLeaderDeptId"
            :options="issueDeptTree"
            :props="cascaderDeptProp"
            :show-all-levels="false"
            placeholder="请选择院领导部门"
            filterable
            clearable
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="院领导人员分组：" prop="hospitalLeaderGroupId">
          <el-select
            v-model="issueForm.hospitalLeaderGroupId"
            placeholder="请选择院领导部门执行人所在分组名称,单选"
            filterable
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in userGroupOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划开始日期：" prop="planStartTime">
          <el-date-picker
            v-model="issueForm.planStartTime"
            type="date"
            placeholder="选择计划开始日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="(date: Date) => (issueForm.planEndTime ? date > new Date(issueForm.planEndTime) : false)"
          />
        </el-form-item>
        <el-form-item label="计划结束时间：" prop="planEndTime">
          <el-date-picker
            v-model="issueForm.planEndTime"
            type="date"
            placeholder="选择计划结束日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="(date: Date) => (issueForm.planStartTime ? date < new Date(issueForm.planStartTime) : false)"
          />
        </el-form-item>
        <el-form-item label="是否需要整体检查情况描述：" prop="needOverallDesc">
          <el-radio-group v-model="issueForm.needOverallDesc">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否需要被检查人签字：" prop="needSigneeSign">
          <el-radio-group v-model="issueForm.needSigneeSign">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showIssueDialog = false">取消</el-button>
        <el-button type="primary" @click="handleIssueSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import BasicTable from '@/components/BasicTable.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import ActionButton from '@/components/ActionButton.vue';
  import { TABLE_OPTIONS, AREA_CHECK_PLAN_TABLE_COLUMNS, AREA_CHECK_PLAN_STATUS_OPTIONS, AREA_CHECK_PLAN_STATUS_LABEL } from './configs/tables';
  import { useRouter } from 'vue-router';
  import type { QueryPageRequest } from '@/types/basic-query';
  import type { AreaCheckPlanQuery, AreaCheckPlanRecord } from './configs/types';
  import {
    queryAreaCheckPlanManagePage,
    deleteAreaCheckPlanManage,
    sendAreaCheckPlanToDep,
    cancelAreaCheckPlanManage,
    queryAreaCheckPlanManageDetail,
    mapAreaCheckPlanApiRecordToUi,
  } from '@/api/production-safety-system';
  import { getAllDepartments } from '@/api/auth/dept';
  import type { DeptTree } from '@/types/dept/type';
  import { queryUserGroupPage } from '@/api/system/person-group';
  import type { PersonGroupListItem } from '@/types/person-group/type';

  const router = useRouter();

  const basicTableRef = ref<InstanceType<typeof BasicTable>>();
  const { tableConfig, pagination } = useTableConfig(AREA_CHECK_PLAN_TABLE_COLUMNS, TABLE_OPTIONS);
  const tableData = ref<AreaCheckPlanRecord[]>([]);
  const dateRange = ref<[string, string] | null>(null);

  // 场所所属类别选项（示例数据，本页面不调用接口）
  const venueCategoryOptions = ref<Array<{ label: string; value: string }>>([]);

  // 下发弹窗
  const showIssueDialog = ref(false);
  const currentIssuePlanId = ref<number | null>(null);
  const issueFormRef = ref();
  const issueResponsibleDeptCascaderRef = ref();
  const issueForm = reactive({
    responsibleDeptIds: [] as number[],
    responsibleDeptPersonnelGroupCode: undefined as string | undefined,
    safetyEmergencyDeptId: undefined as number | undefined,
    safetyEmergencyGroupId: undefined as number | undefined,
    hospitalLeaderDeptId: undefined as number | undefined,
    hospitalLeaderGroupId: undefined as number | undefined,
    planStartTime: '',
    planEndTime: '',
    needOverallDesc: false,
    needSigneeSign: false,
  });
  const issueRules = {
    responsibleDeptIds: [{ required: true, message: '请选择责任部门', trigger: 'change', type: 'array', min: 1 }],
    responsibleDeptPersonnelGroupCode: [{ required: true, message: '请选择责任部门人员分组', trigger: 'change' }],
    safetyEmergencyDeptId: [{ required: true, message: '请选择安全应急部门', trigger: 'change' }],
    safetyEmergencyGroupId: [{ required: true, message: '请选择安全应急部人员分组', trigger: 'change' }],
    hospitalLeaderDeptId: [{ required: true, message: '请选择院领导部门', trigger: 'change' }],
    hospitalLeaderGroupId: [{ required: true, message: '请选择院领导人员分组', trigger: 'change' }],
    planStartTime: [{ required: true, message: '请选择计划开始日期', trigger: 'change' }],
    planEndTime: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }],
    needOverallDesc: [{ required: true, message: '请选择是否需要整体检查情况描述', trigger: 'change' }],
    needSigneeSign: [{ required: true, message: '请选择是否需要被检查人签字', trigger: 'change' }],
  };
  // 下发弹窗：责任部门/安全应急部门/院领导部门复用新增区域检查计划的主责部门下拉（getAllDepartments）
  const issueDeptTree = ref<DeptTree[]>([]);
  const cascaderDeptProp = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value: 'id',
    label: 'deptName',
    emitPath: false,
  };
  const cascaderDeptPropMultiple = {
    ...cascaderDeptProp,
    multiple: true,
  };
  // 责任部门人员分组/安全应急部人员分组/院领导人员分组复用 queryUserGroupPage 查询用户分组接口
  const userGroupOptions = ref<PersonGroupListItem[]>([]);

  /** 下发弹窗打开时加载部门树（与新增区域检查计划主责部门一致） */
  const loadIssueDeptTree = async () => {
    try {
      const res = await getAllDepartments();
      issueDeptTree.value = res?.[0]?.children ?? [];
    } catch (e) {
      console.error('获取部门树失败:', e);
      issueDeptTree.value = [];
    }
  };

  /** 下发弹窗打开时加载用户分组列表 */
  const loadUserGroupOptions = async () => {
    try {
      const res = await queryUserGroupPage({
        pageNumber: 1,
        pageSize: 9999,
        queryParam: '',
      });
      userGroupOptions.value = res?.records ?? [];
    } catch (e) {
      console.error('获取用户分组列表失败:', e);
      userGroupOptions.value = [];
    }
  };

  const onIssueDialogOpen = () => {
    loadIssueDeptTree();
    loadUserGroupOptions();
  };

  const findDeptNameById = (nodes: DeptTree[] | undefined, id: number | undefined): string | undefined => {
    if (!nodes?.length || id == null) return undefined;
    for (const n of nodes) {
      if (n.id === id) return n.deptName;
      const found = findDeptNameById(n.children, id);
      if (found) return found;
    }
    return undefined;
  };

  const findDeptNamesByIds = (nodes: DeptTree[] | undefined, ids: number[] | undefined): string[] => {
    const list = (ids ?? []).filter((v) => v != null);
    if (!list.length) return [];
    return list
      .map((id) => findDeptNameById(nodes, id))
      .filter((name): name is string => !!name && String(name).trim().length > 0);
  };

  const findGroupNameById = (id: number | undefined): string | undefined => {
    if (id == null) return undefined;
    return userGroupOptions.value.find((g) => g.id === id)?.name;
  };

  const resetIssueForm = () => {
    issueForm.responsibleDeptIds = [];
    issueForm.responsibleDeptPersonnelGroupCode = undefined;
    issueForm.safetyEmergencyDeptId = undefined;
    issueForm.safetyEmergencyGroupId = undefined;
    issueForm.hospitalLeaderDeptId = undefined;
    issueForm.hospitalLeaderGroupId = undefined;
    issueForm.planStartTime = '';
    issueForm.planEndTime = '';
    issueForm.needOverallDesc = false;
    issueForm.needSigneeSign = false;
    issueFormRef.value?.resetFields?.();
  };

  const tableQuery = reactive<QueryPageRequest<AreaCheckPlanQuery>>({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {
      keyword: '',
      status: '' as AreaCheckPlanQuery['status'],
      venueCategory: '',
      planStartTime: '',
      planEndTime: '',
    },
  });

  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableQuery.pageSize = value;
    getTableData();
  };

  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableQuery.pageNumber = value;
    getTableData();
  };

  async function getTableData() {
    tableConfig.loading = true;
    try {
      const res = await queryAreaCheckPlanManagePage({
        pageNumber: tableQuery.pageNumber,
        pageSize: tableQuery.pageSize,
        queryParam: tableQuery.queryParam,
      });
      const raw = (res as { data?: { records?: unknown[]; totalRow?: number } })?.data ?? res;
      const list = raw?.records ?? [];
      tableData.value = list.map((r: unknown) => mapAreaCheckPlanApiRecordToUi(r));
      pagination.total = raw?.totalRow ?? 0;
    } catch (e) {
      console.error('查询区域检查计划列表失败:', e);
      tableData.value = [];
      pagination.total = 0;
    } finally {
      tableConfig.loading = false;
    }
  }

  const handleSearch = () => {
    if (dateRange.value && dateRange.value.length === 2) {
      tableQuery.queryParam.planStartTime = dateRange.value[0];
      tableQuery.queryParam.planEndTime = dateRange.value[1];
    } else {
      tableQuery.queryParam.planStartTime = '';
      tableQuery.queryParam.planEndTime = '';
    }
    pagination.pageNumber = 1;
    tableQuery.pageNumber = 1;
    getTableData();
  };

  const handleReset = () => {
    tableQuery.queryParam.keyword = '';
    tableQuery.queryParam.status = '';
    tableQuery.queryParam.venueCategory = '';
    tableQuery.queryParam.planStartTime = '';
    tableQuery.queryParam.planEndTime = '';
    dateRange.value = null;
    handleSearch();
  };

  const handleCreate = () => {
    router.push({
      name: 'areaCheckPlanManagementItem',
      query: { operate: 'area-check-plan-create' },
    });
  };

  const handleEdit = (id: number) => {
    router.push({
      name: 'areaCheckPlanManagementItem',
      query: { id, operate: 'area-check-plan-edit' },
    });
  };

  const handleView = (id: number) => {
    router.push({
      name: 'areaCheckPlanManagementItem',
      query: { id, operate: 'area-check-plan-view' },
    });
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteAreaCheckPlanManage(id);
      ElMessage.success('删除成功');
      getTableData();
    } catch (e) {
      console.error('删除失败:', e);
    }
  };

  const handleIssue = (id: number) => {
    currentIssuePlanId.value = id;
    resetIssueForm();
    showIssueDialog.value = true;
  };

  const handleIssueSave = async () => {
    if (!issueFormRef.value || !currentIssuePlanId.value) return;
    const valid = await issueFormRef.value.validate().catch(() => false);
    if (!valid) return;
    if (issueForm.planStartTime && issueForm.planEndTime && new Date(issueForm.planStartTime) > new Date(issueForm.planEndTime)) {
      ElMessage.error('计划开始日期不能大于计划结束日期');
      return;
    }
    try {
      // 仅提交：弹窗页面字段 + id（下拉同时提交 name + value）
      const responsibleDeptIds = (issueForm.responsibleDeptIds ?? []).filter((v) => v != null);
      const responsibleDeptNames = findDeptNamesByIds(issueDeptTree.value, responsibleDeptIds);
      const responsibleDeptName = responsibleDeptNames.length ? responsibleDeptNames.join(',') : undefined;
      const responsibleDeptCode = responsibleDeptIds.length ? responsibleDeptIds.join(',') : undefined;

      const responsibleDeptPersonnelGroupName = (() => {
        const code = issueForm.responsibleDeptPersonnelGroupCode;
        if (code == null || code === '') return undefined;
        const byId = userGroupOptions.value.find((g) => String(g.id) === code);
        return byId?.name ?? undefined;
      })();

      const safetyEmergencyDeptName = findDeptNameById(issueDeptTree.value, issueForm.safetyEmergencyDeptId);
      const hospitalLeaderDeptName = findDeptNameById(issueDeptTree.value, issueForm.hospitalLeaderDeptId);

      const payload = {
        id: currentIssuePlanId.value,
        responsibleDeptName,
        responsibleDeptCode,
        responsibleDeptPersonnelGroupName,
        responsibleDeptPersonnelGroupCode: issueForm.responsibleDeptPersonnelGroupCode,

        // 安全应急部门
        safetyEmergencyDeptName,
        safetyEmergencyDeptId: issueForm.safetyEmergencyDeptId,
        safetyEmergencyExecutorGroupName: findGroupNameById(issueForm.safetyEmergencyGroupId),
        safetyEmergencyExecGroupCode: issueForm.safetyEmergencyGroupId != null ? String(issueForm.safetyEmergencyGroupId) : undefined,

        // 院领导部门
        hospitalLeaderDeptName,
        hospitalLeaderDeptId: issueForm.hospitalLeaderDeptId,
        hospitalLeaderExecutorGroupName: findGroupNameById(issueForm.hospitalLeaderGroupId),
        hospitalLeaderExecGroupCode: issueForm.hospitalLeaderGroupId != null ? String(issueForm.hospitalLeaderGroupId) : undefined,

        // 计划时间与开关项
        planStartTime: issueForm.planStartTime,
        planEndTime: issueForm.planEndTime,
        needOverallDesc: issueForm.needOverallDesc,
        needSigneeSign: issueForm.needSigneeSign,
      } as AreaCheckPlanRecord & { id: number } & Record<string, unknown>;

      await sendAreaCheckPlanToDep(payload);
      ElMessage.success('下发成功');
      showIssueDialog.value = false;
      getTableData();
    } catch (e) {
      console.error('下发失败:', e);
    }
  };

  const handleCancel = async (id: number) => {
    try {
      await cancelAreaCheckPlanManage(id);
      ElMessage.success('作废成功');
      getTableData();
    } catch (e) {
      console.error('作废失败:', e);
    }
  };

  onMounted(() => {
    venueCategoryOptions.value = [
      { label: '各级风险点', value: '各级风险点' },
      { label: '关键业务活动', value: '关键业务活动' },
      { label: '日常安全', value: '日常安全' },
    ];
    getTableData();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  @use '@/views/traffic/violation/style/act-search-table.scss' as *;
</style>