sl-sfy-safety/src/views/production-safety/safety-culture/safetyCultureMaterialManagement/safetyCultureMaterialManagement.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="0" />
                </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 #status="scope">
              <span>
                {{ scope.row.status === 1 ? '启用' : scope.row.status === 0 ? '禁用' : '-' }}
              </span>
            </template>
            <template #action="scope">
              <div class="action-container--div" style="justify-content: left">
                <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="handleDownloadFile(scope.row)" />
              </div>
            </template>
          </BasicTable>
        </div>
      </div>
    </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 {
    querySafetyCultureMaterialsPage,
    deleteSafetyCultureMaterials,
    exportSafetyCultureMaterials,
    type safetyCultureFileQuery,
    type safetyCultureFilePageQuery,
  } from '@/api/safety-culture';
  import { downloadByData } from '@/utils/file/download';
  import BatchImport from '@/components/batch-import/BatchImport.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';

  const router = useRouter();

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

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

  const tableData = ref<any[]>([]);

  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 querySafetyCultureMaterialsPage(pageQuery, queryParams.classifyName || undefined);
      if (res) {
        // 映射返回数据字段到表格字段
        tableData.value = res.records.map((item) => ({
          id: item.id,
          fileName: item.fileName, // 文件名称
          fileCode: item.fileCode, // 文件编号
          classifyName: item.classifyName, // 分类名称
          fileVersion: item.fileVersion, // 文件版本号
          fileFormat: item.fileFormat === 1 ? 'PDF' : 'WORD', // 文件格式
          releaseDate: item.releaseDate, // 发布日期
          status: item.status, // 状态：1-启用，0-禁用
          publishDate: item.publishDate, // 发布日期
          fileUrl: item.fileUrl, // 文件地址
          uploadTime: item.uploadTime || item.createdAt, // 上传时间
          categoryName: item.categoryName, // 分类名称
        }));
        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, '/safety-culture/importSafetyCultureMaterials'));
  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,
        startTime: queryParams.startDate || undefined,
        endTime: queryParams.endDate || undefined,
        startDate: queryParams.startDate || undefined,
        endDate: queryParams.endDate || undefined,
      };
      const response = await exportSafetyCultureMaterials(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 handleDownloadFile = (row: any) => {
    const url = row?.fileUrl;
    if (!url) {
      ElMessage.warning('暂无文件可下载');
      return;
    }
    window.open(url, '_blank');
  };

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

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

  const handleDelete = async (id: number) => {
    try {
      await deleteSafetyCultureMaterials(id);
      ElMessage.success('删除成功');
      getTableData();
    } catch (e) {
      console.error('删除院级文件失败:', e);
      ElMessage.error('删除失败，请重试');
    }
  };

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

  onMounted(() => {
    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>