dyh-evaluation-admin/src/pages/Management/Files/index.tsx

import classNames from "classnames";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Button, Form, Input, Select, Table } from "antd";
import { PageContainer } from "@/components";
import style from "./index.module.scss";
import { debounce } from "lodash";
import { changeArchiveApi, getManageFileListAPi } from "@/api";
import { ARCHIVE_TYPE_MAP } from "@/constants";
import { ARCHIVE_TYPE } from "@/types";
import { downloadFile } from "@/utils";
import { getBaseURL } from "@dage/service";

const DEFAULT_PARAMS = {
  pageNum: 1,
  pageSize: 20,
  searchKey: "",
  archive: "",
};

const ManagementReportPage = () => {
  const [form] = Form.useForm();
  const [params, setParams] = useState({
    ...DEFAULT_PARAMS,
  });
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [list, setList] = useState<[]>([]);
  const baseUrl = getBaseURL();

  const debounceSearch = useMemo(
    () =>
      debounce((changedVal: unknown, vals: any) => {
        setParams({ ...params, ...vals });
      }, 500),
    [params]
  );

  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setParams({ ...params, pageNum, pageSize });
    },
    [params]
  );

  const getList = useCallback(async () => {
    setLoading(true);
    try {
      const data = await getManageFileListAPi(params);
      setList(data.records);
      setTotal(data.total);
    } finally {
      setLoading(false);
    }
  }, [params]);

  const handleArchive = async (item: any) => {
    await changeArchiveApi(
      item.archive === ARCHIVE_TYPE.ARCHIVED
        ? ARCHIVE_TYPE.UNARCHIVED
        : ARCHIVE_TYPE.ARCHIVED,
      item.id
    );
    getList();
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <PageContainer title="附件管理">
      <div className={style.filter}>
        <Form
          form={form}
          layout="inline"
          className="inline-form"
          onValuesChange={debounceSearch}
        >
          <Form.Item label="搜索" name="searchKey">
            <Input
              placeholder="请输入资料名称/考核名称./指标名称/责任部门名称"
              className="w450"
              allowClear
            />
          </Form.Item>
          <Form.Item label="归档状态">
            <div className="w160">
              <Form.Item noStyle name="archive">
                <Select
                  allowClear
                  options={[
                    {
                      label: "未归档",
                      value: 0,
                    },
                    {
                      label: "已归档",
                      value: 1,
                    },
                  ]}
                  placeholder="请选择"
                />
              </Form.Item>
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={getList}>
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div className={style.table}>
        <Table
          loading={loading}
          className={classNames("cus-table large")}
          dataSource={list}
          rowKey="id"
          scroll={{ x: "max-content" }}
          columns={[
            {
              title: "资料名称",
              dataIndex: "name",
              align: "center",
              minWidth: 100,
            },
            {
              title: "关联考核",
              dataIndex: "assessName",
              align: "center",
              minWidth: 100,
            },
            {
              title: "考核周期",
              align: "center",
              minWidth: 100,
              render: (item) => {
                return `${item.dateStart}-${item.dateEnd}`;
              },
            },
            {
              title: "关联指标",
              dataIndex: "normName",
              align: "center",
              minWidth: 100,
            },
            {
              title: "附件名称",
              dataIndex: "fileName",
              align: "center",
              minWidth: 100,
            },
            {
              title: "责任部门",
              dataIndex: "deptName",
              align: "center",
              minWidth: 100,
            },
            {
              title: "上传用户",
              dataIndex: "creatorName",
              align: "center",
              minWidth: 100,
            },
            {
              title: "归档状态",
              align: "center",
              minWidth: 100,
              // @ts-ignore
              render: (item) => ARCHIVE_TYPE_MAP[item.archive],
            },
            {
              title: "操作",
              align: "center",
              fixed: "right",
              render: (item) => {
                const isArchived = item.archive === ARCHIVE_TYPE.ARCHIVED;

                return (
                  <>
                    <Button
                      type="link"
                      onClick={() =>
                        downloadFile(
                          baseUrl +
                            process.env.REACT_APP_IMG_PUBLIC +
                            item.filePath,
                          item.fileName
                        )
                      }
                    >
                      下载
                    </Button>
                    <Button
                      type="link"
                      danger={isArchived}
                      size="small"
                      onClick={handleArchive.bind(undefined, item)}
                    >
                      {!isArchived ? "归档" : "取消归档"}
                    </Button>
                  </>
                );
              },
            },
          ]}
          pagination={{
            showQuickJumper: true,
            position: ["bottomCenter"],
            showSizeChanger: true,
            current: params.pageNum,
            pageSize: params.pageSize,
            total,
            onChange: paginationChange(),
          }}
        />
      </div>
    </PageContainer>
  );
};

export default ManagementReportPage;