pc-admin/src/pages/checkAnswer/loc/index.jsx

import React from 'react';
import { Button, notification } from "antd";
import { ProTable } from "@ant-design/pro-components";
import { useNavigate } from 'react-router-dom';
import { queryTable, queryDict } from "@/utils/request";
import Page from '@/components/Page';
import { getTaCheck } from '@/service/tacheck';
import { getTdLocType } from '@/service/tdloctype';
import { getTaCheckAnswer, exportTaCheckAnswer } from '@/service/tacheckanswer';
import { getTaIssue } from '@/service/taissue';
import useBool from '@/utils/hooks/useBool';

const getCheck = queryDict(getTaCheck, { labelKey: 'title', valueKey: 'checkId' });
const getLocType = queryDict(getTdLocType, { labelKey: 'name', valueKey: 'typeId' });
const getAnswer = queryTable(getTaCheckAnswer);
const getIssue = queryDict(getTaIssue, { labelKey: 'userName', valueKey: 'issueId' });

export default (props) => {

  const [loading, startLoading, stopLoading] = useBool();
  const paramsRef = React.useRef();
  const [notificationApi, contextHolder] = notification.useNotification();

  const columns = [
    {
      title: "模拟测评",
      dataIndex: "checkId",
      valueType: 'select',
      request: getCheck,
      hideInTable: true,
      formItemProps: {
        rules: [
          { required: true, message: '请选择模拟测评' }
        ]
      }
    },
    {
      title: "点位名称",
      valueType: 'select',
      request: getLocType,
      dataIndex: "typeId",
    },
    {
      title: "问题",
      dataIndex: "quTitle",
      hideInSearch: true,
    },
    {
      title: "答案",
      dataIndex: "answer",
      hideInSearch: true,
    },
    {
      title: "答题时间",
      dataIndex: "createDate",
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: "答题人",
      dataIndex: "userName",
      valueType: 'select',
      request: getIssue,
      formItemProps: {
        rules: [
          { required: true, message: '请选择答题人' }
        ]
      }
    },
  ]

  const beforeSearchSubmit = (params) => {
    paramsRef.current = params;
    return params;
  }

  const onExport = () => {
    if (!paramsRef.current) {
      notificationApi.warning({ message: '请先进行条件查询' });
      return
    }

    startLoading();
    exportTaCheckAnswer(paramsRef.current).then(() => {
      stopLoading();
    }).catch(() => {
      stopLoading();
    });
  }

  return (
    <Page>
      {contextHolder}
      <ProTable
        rowKey="answerItemId"
        manualRequest
        columns={columns}
        request={getAnswer}
        beforeSearchSubmit={beforeSearchSubmit}
        form={{ ignoreRules: false }}
        toolBarRender={() => [
          <Button
            key="1"
            type="primary"
            loading={loading}
            onClick={onExport}
          >
            导出
          </Button>,
        ]}
      />
    </Page>
  )
}