sl-sfy-safety/src/views/production-safety/safety-culture/safetyCultureActivityManagement/safetyCultureActivityManagement.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" :icon="Plus" class="search-table-container--button" @click="handleCreate">
              新增
            </el-button>
            <el-button plain class="search-table-container--button" @click="handleImport"> 导入 </el-button>
          </div>

          <div class="act-search">
            <section class="select-box">
              <div class="select-box--item">
                <span>行动项内容/计划名称：</span>
                <el-input
                  v-model="queryParams.keyword"
                  placeholder="搜索行动项内容/计划名称"
                  class="act-search-input"
                />
              </div>
              <div class="select-box--item">
                <span>状态：</span>
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                  <el-option label="未下发" :value="1" />
                  <el-option label="待反馈" :value="2" />
                  <el-option label="已完成" :value="3" />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>分类名称：</span>
                <el-select v-model="queryParams.classifyName" placeholder="请选择分类" clearable>
                  <el-option label="安全综合工作" value="安全综合工作" />
                  <el-option label="生产安全工作" value="生产安全工作" />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>计划日期范围：</span>
                <el-date-picker
                  v-model="uploadDateRange"
                  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>
              <el-button plain @click="handleDownload"> 导出 </el-button>
            </section>
          </div>
        </header>

        <div class="batch-table">
          <BasicTable
            ref="basicTableRef"
            :tableData="tableData"
            :tableConfig="tableConfig"
            @update:pageSize="handleSizeChange"
            @update:pageNumber="handleCurrentChange"
          >
            <!-- <template #actionContent="scope">
              <span class="action-content" @click="activityRegistration(scope.row.id)">
                {{ scope.row.actionContent || '-'}}
              </span>
            </template> -->
            <template #action="scope">
              <div class="action-container--div" style="justify-content: left">
                <ActionButton text="编辑" v-if="scope.row.status === 1" @click="handleEdit(scope.row.id)" />
                <ActionButton
                  text="删除"
                  v-if="scope.row.status === 1"
                  :popconfirm="{
                    title: '确定要删除?',
                  }"
                  @confirm="handleDelete(scope.row.id)"
                />
                <ActionButton text="查看" @click="handleView(scope.row.id)" />
                <ActionButton text="下发" @click="handleDispatch(scope.row.id)" v-if="scope.row.status === 1" />
                <ActionButton
                  text="活动报名"
                  @click="activityRegistration(scope.row.id)"
                  v-if="scope.row.status !== 1"
                />
              </div>
            </template>
          </BasicTable>
        </div>
      </div>

      <el-dialog
        v-model="showIssueDialog"
        title="安全文化活动下发"
        width="500px"
        destroy-on-close
        @open="onIssueDialogOpen"
      >
        <el-form ref="issueFormRef" :model="issueForm" :rules="issueRules" label-width="140px">
          <el-form-item label="具体负责人部门" prop="rectificationDepartmentId">
            <el-cascader
              v-model="issueForm.rectificationDepartmentId"
              :options="issueDeptTree"
              :props="cascaderDeptProp"
              :show-all-levels="false"
              placeholder="请选择具体负责人部门"
              filterable
              clearable
              style="width: 100%"
              @change="onIssueDeptChange"
            />
          </el-form-item>
          <el-form-item label="具体负责人" prop="rectificationResponsibleUserId">
            <el-select
              v-model="issueForm.rectificationResponsibleUserId"
              placeholder="选择具体负责人"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="user in issueUserList"
                :key="user.id"
                :label="user.realname ?? user.username"
                :value="user.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="计划开始日期：" prop="startDate">
            <el-date-picker
              v-model="issueForm.startDate"
              type="date"
              placeholder="请选择计划开始日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              style="width: 100%"
              :disabled-date="(date: Date) => {
                if (issueForm.endDate) {
                  return date > new Date(issueForm.endDate);
                }
                return false;
              }"
            />
          </el-form-item>
          <el-form-item label="计划结束日期：" prop="endDate">
            <el-date-picker
              v-model="issueForm.endDate"
              type="date"
              placeholder="请选择计划结束日期"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              style="width: 100%"
              :disabled-date="(date: Date) => {
                if (issueForm.startDate) {
                  return date < new Date(issueForm.startDate);
                }
                return false;
              }"
            />
          </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>
    </main>
    <BatchImport
      v-if="batchImportVisible"
      :visible="batchImportVisible"
      :import-api-url="importApiUrl"
      :template-url="templateUrl"
      template-name="安全文化活动管理导入模版"
      :show-template="true"
      @close="batchImportVisible = false"
      @update="handleUpdate"
    />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Plus } from '@element-plus/icons-vue';
  import BasicTable from '@/components/BasicTable.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import ActionButton from '@/components/ActionButton.vue';
  import { TABLE_OPTIONS, INVENTORY_TABLE_COLUMNS } from './configs/tables';
  import { useRouter } from 'vue-router';
  import {
    safetyCultureActivityManagementFilePage,
    deleteSafetyCultureActivityManagement,
    getAllDepartments,
    activityDistribution,
    safetyCultureActivityExport,
    type safetyCultureFileQuery,
    type safetyCultureFilePageQuery,
  } from '@/api/safety-culture';
  import type { DeptTree } from '@/types/dept/type';
  import { downloadByData } from '@/utils/file/download';
  import BatchImport from '@/components/batch-import/BatchImport.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';
  import { queryAvailableUserList } from '@/api/production-safety/responsibility-implementation';

  const router = useRouter();

  /** 下发弹窗：点击下发打开弹窗，弹窗内部门用 queryAllDeptTree、负责人用 queryAvailableUserList，点击保存才触发下发接口 */
  const showIssueDialog = ref(false);
  const distributionId = ref<number>(0);
  const issueFormRef = ref();
  const issueForm = ref({
    rectificationDepartmentId: undefined as number | undefined,
    rectificationResponsibleUserId: undefined as number | undefined,
    rectificationResponsiblePersonName: '' as string,
    startDate: '' as string,
    endDate: '' as string,
  });
  const issueRules = {
    rectificationDepartmentId: [{ required: true, message: '请选择整改责任部门', trigger: 'change' }],
    rectificationResponsibleUserId: [{ required: true, message: '请选择整改负责人', trigger: 'change' }],
    startDate: [{ required: true, message: '请选择计划开始日期', trigger: 'change' }],
    endDate: [{ required: true, message: '请选择计划结束日期', trigger: 'change' }],
  };
  /** 下发弹窗部门树，与新增隐患台账复查人员所属部门一致（getAllDepartments 取第一级 children） */
  const cascaderDeptProp = {
    checkStrictly: true,
    expandTrigger: 'hover' as const,
    value: 'id',
    label: 'deptName',
    emitPath: false,
  };
  const issueDeptTree = ref<DeptTree[]>([]);
  const issueUserList = ref<Array<{ id: number; realname?: string; username?: string }>>([]);
  const rectificationResponsibleDeptName = ref('');

  // 表格
  const basicTableRef = ref<InstanceType<typeof BasicTable>>();

  const { tableConfig, pagination } = useTableConfig(INVENTORY_TABLE_COLUMNS, TABLE_OPTIONS);

  const tableData = ref<any[]>([]);
  const deptNameMap = ref<Record<string, string>>({});

  const CATEGORY_NAME_MAP: Record<string, string> = {
    '0': '外部院级文件',
    '1': '内部院级文件',
    '2': '内部院级文件',
  };

  const normalizeCategoryName = (row: any): string => {
    const raw = row?.categoryName ?? row?.classifyName ?? row?.category;
    if (raw == null || raw === '') {
      return '-';
    }
    const stringValue = String(raw);
    if (stringValue.includes('外部') || stringValue.includes('内部')) {
      return stringValue;
    }
    return CATEGORY_NAME_MAP[stringValue] || stringValue;
  };

  const normalizeListText = (value: unknown): string => {
    if (Array.isArray(value)) {
      const list = value.map((item) => String(item).trim()).filter((item) => item);
      return list.length ? list.join('、') : '-';
    }
    if (value == null || value === '') {
      return '-';
    }
    const text = String(value).trim();
    if (!text) {
      return '-';
    }
    return text.includes(',')
      ? text
          .split(',')
          .map((item) => item.trim())
          .filter((item) => item)
          .join('、') || '-'
      : text;
  };

  const parseIdList = (value: unknown): string[] => {
    if (Array.isArray(value)) {
      return value.map((item) => String(item).trim()).filter((item) => item);
    }
    if (value == null || value === '') {
      return [];
    }
    const text = String(value).trim();
    if (!text) {
      return [];
    }
    return text
      .split(',')
      .map((item) => item.trim())
      .filter((item) => item);
  };

  const flattenDeptTree = (tree: DeptTree[]): DeptTree[] => {
    const result: DeptTree[] = [];
    const walk = (nodes: DeptTree[]) => {
      nodes.forEach((node) => {
        result.push(node);
        if (node.children?.length) {
          walk(node.children);
        }
      });
    };
    walk(tree || []);
    return result;
  };

  const loadDeptNameMap = async () => {
    try {
      const deptTree = await getAllDepartments();
      const flatList = flattenDeptTree(deptTree || []);
      const map: Record<string, string> = {};
      flatList.forEach((dept) => {
        if (dept.id != null) {
          map[String(dept.id)] = dept.deptName;
        }
      });
      deptNameMap.value = map;
    } catch (error) {
      console.error('加载部门字典失败:', error);
      deptNameMap.value = {};
    }
  };

  const normalizeCooperateDeptName = (row: any): string => {
    const rawName = row?.cooperateDeptNames;
    if (rawName) {
      return normalizeListText(rawName);
    }

    const ids = parseIdList(row?.cooperateDeptIds);
    if (!ids.length) {
      return '-';
    }

    const names = ids.map((id) => deptNameMap.value[id] || id).filter((item) => item);
    return names.length ? names.join('、') : '-';
  };

  const normalizeResponsibleDeptName = (row: any): string => {
    const rawName = row?.responsibleDeptName;
    if (rawName) {
      return normalizeListText(rawName);
    }

    const ids = parseIdList(row?.responsibleDeptId);
    if (!ids.length) {
      return '-';
    }

    const names = ids.map((id) => deptNameMap.value[id] || id).filter((item) => item);
    return names.length ? names.join('、') : '-';
  };

  const queryParams = reactive<safetyCultureFileQuery>({
    keyword: '', // 文件名称/编号（模糊查询）
    status: undefined, // 状态：1-启用，0-禁用
    classifyName: '', // 分类名称：外部院级文件/内部院级文件
    startDate: '', // 上传日期范围-开始日期
    endDate: '', // 上传日期范围-结束日期
  });

  // 上传日期范围（用于日期选择器）
  const uploadDateRange = ref<[string, string] | null>(null);

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

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

  async function getTableData() {
    tableConfig.loading = true;
    try {
      const pageQuery: safetyCultureFilePageQuery = {
        pageNumber: pagination.pageNumber,
        pageSize: pagination.pageSize,
        queryParam: {
          keyword: queryParams.keyword || undefined,
          status: queryParams.status,
          classifyName: queryParams.classifyName || undefined,
          startDate: queryParams.startDate || undefined,
          endDate: queryParams.endDate || undefined,
        },
      };
      const res = await safetyCultureActivityManagementFilePage(pageQuery);
      if (res) {
        tableData.value = (res.records || []).map((item: any) => ({
          ...item,
          categoryNameDisplay: normalizeCategoryName(item),
          responsibleDeptNameDisplay: normalizeResponsibleDeptName(item),
          responsiblePersonNameDisplay: normalizeListText(
            item.responsiblePersonName || item.specificPersonName || item.responsiblePersonId,
          ),
          cooperateDeptNameDisplay: normalizeCooperateDeptName(item),
        }));
        pagination.total = res.totalRow || 0;
      }
    } catch (e) {
      console.error('获取院级文件列表失败:', e);
      tableData.value = [];
      pagination.total = 0;
    } finally {
      tableConfig.loading = false;
    }
  }

  const handleSearch = () => {
    // 处理日期范围
    if (uploadDateRange.value && uploadDateRange.value.length === 2) {
      queryParams.startDate = uploadDateRange.value[0];
      queryParams.endDate = uploadDateRange.value[1];
    } else {
      queryParams.startDate = '';
      queryParams.endDate = '';
    }

    pagination.pageNumber = 1;
    getTableData();
  };

  const handleReset = () => {
    queryParams.keyword = '';
    queryParams.status = undefined;
    queryParams.classifyName = '';
    queryParams.startDate = '';
    queryParams.endDate = '';
    uploadDateRange.value = null;
    handleSearch();
  };

  // 批量导入
  const batchImportVisible = ref(false);
  const { urlPrefix } = useGlobSetting();
  const importApiUrl = ref(urlJoin(urlPrefix, '/safetyCulture/activity/import'));
  const templateUrl = ref('./skyeye-file-upload/sfysecurity/TEMPLATE/安全文化活动导入模版.xlsx');

  const handleImport = () => {
    batchImportVisible.value = true;
  };

  const handleUpdate = () => {
    batchImportVisible.value = false;
    getTableData();
  };

  const handleDownload = async () => {
    try {
      const exportParams: safetyCultureFileQuery = {
        keyword: queryParams.keyword || undefined,
        status: queryParams.status,
        classifyName: queryParams.classifyName || undefined,
        startDate: queryParams.startDate || undefined,
        endDate: queryParams.endDate || undefined,
      };
      const response = await safetyCultureActivityExport(exportParams);
      if (response) {
        const fileName = `安全文化活动管理_${new Date().toISOString().split('T')[0]}.xlsx`;
        downloadByData(response, fileName);
        ElMessage.success('导出成功');
      }
    } catch (e) {
      console.error('导出安全文化活动文件失败:', e);
      ElMessage.error('导出失败，请重试');
    }
  };

  const handleCreate = () => {
    router.push({
      name: 'safetyCultureActivityManagementItem',
      query: {
        operate: 'safety-culture-material-create',
      },
    });
  };

  const handleEdit = (id: number) => {
    router.push({
      name: 'safetyCultureActivityManagementItem',
      query: {
        id,
        operate: 'safety-culture-material-edit',
      },
    });
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteSafetyCultureActivityManagement(id);
      ElMessage.success('删除成功');
      getTableData();
    } catch (e) {
      console.error('删除安全文化活动失败:', e);
      ElMessage.error('删除失败，请重试');
    }
  };

  const handleView = (id: number) => {
    router.push({
      name: 'safetyCultureActivityManagementItem',
      query: {
        id,
        operate: 'safety-culture-material-view',
      },
    });
  };

  const activityRegistration = async (id: number) => {
    router.push({
      name: 'safetyCultureActivityManagementActivityRegistration',
      query: {
        id,
        operate: 'safety-culture-material-view',
      },
    });
  };

  const onIssueDialogOpen = async () => {
    try {
      const [deptRes, userRes] = await Promise.all([
        getAllDepartments(),
        queryAvailableUserList({ pageNumber: 1, pageSize: 9999, queryParam: {
          deptName: rectificationResponsibleDeptName.value,
        } }),
      ]);
      const fullTree = (deptRes as DeptTree[]) ?? [];
      issueDeptTree.value = Array.isArray(fullTree) && fullTree[0]?.children ? fullTree[0].children : [];
      issueUserList.value = (userRes as any)?.records ?? [];
    } catch (e) {
      console.error('获取部门/用户列表失败:', e);
      ElMessage.error(e?.message || e?.data || '加载部门或负责人列表失败');
      issueDeptTree.value = [];
      issueUserList.value = [];
    }
  };

  const onIssueDeptChange = (val: number | undefined) => {
    if (val) {
      issueForm.value.rectificationResponsibleUserId = undefined;
      const findDeptName = (tree: any[], id: number): string => {
        for (const node of tree) {
          if (node.id === id) {
            return node.deptName || node.label || '';
          }
          if (node.children) {
            const found = findDeptName(node.children, id);
            if (found) return found;
          }
        }
        return '';
      };
      const deptName = findDeptName(issueDeptTree.value, val);
      rectificationResponsibleDeptName.value = deptName;
      onIssueDialogOpen();
    }
  };

  const handleDispatch = (id: number) => {
    distributionId.value = id;
    showIssueDialog.value = true;
  };

  /** 从部门树中根据 id 查找部门名称 */
  function findDeptNameById(nodes: DeptTree[] | undefined, id: number): string {
    if (!nodes?.length) return '';
    for (const n of nodes) {
      if (n.id === id) return n.deptName ?? '';
      if (n.children?.length) {
        const found = findDeptNameById(n.children, id);
        if (found) return found;
      }
    }
    return '';
  }

  const handleIssueSave = async () => {
    await issueFormRef.value?.validate?.().catch(() => {});
    const { rectificationDepartmentId, rectificationResponsibleUserId } = issueForm.value;
    if (rectificationDepartmentId == null || rectificationResponsibleUserId == null) {
      ElMessage.warning('请选择整改责任部门和整改负责人');
      return;
    }
    if (!issueForm.value.startDate || !issueForm.value.endDate) {
      ElMessage.warning('请选择计划开始日期和计划结束日期');
      return;
    }
    const selectedUser = issueUserList.value.find((u) => u.id === rectificationResponsibleUserId);
    const personName = selectedUser?.realname ?? selectedUser?.username ?? '';
    const deptName = findDeptNameById(issueDeptTree.value, rectificationDepartmentId);
    try {
      await activityDistribution({
        id: distributionId.value,
        specificDeptId: String(rectificationDepartmentId),
        specificPersonId: String(rectificationResponsibleUserId),
        startTime: issueForm.value.startDate,
        endTime: issueForm.value.endDate,
      });
      ElMessage.success('下发成功');
      showIssueDialog.value = false;
      getTableData();
    } catch (e) {
      console.error('下发失败:', e);
      ElMessage.error(e?.message || e?.data || '下发失败，请重试');
    }
  };

  onMounted(() => {
    loadDeptNameMap().finally(() => {
      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 *;

  .action-content {
    color: #409eff;
    cursor: pointer;
  }
</style>