pc-admin/src/pages/issue/index.jsx

import React from 'react';
import { Button, Badge } from 'antd';
import { useNavigate } from 'react-router-dom';
import List from '@/components/Page/List';
import { getTaIssue } from '@/service/taissue';
import { getTdLocType } from '@/service/tdloctype';
import { getSysOrg } from '@/service/sysorg';
import { queryDict } from '@/utils/request';
import { processEnum, processStatus } from '@/utils/biz';
import { exportTaIssue } from '@/service/taissue';
import useBool from '@/utils/hooks/useBool';

const queryOrg = queryDict(getSysOrg, { labelKey: 'name', valueKey: 'orgId' });
const queryLocType = queryDict(getTdLocType, { labelKey: 'name', valueKey: 'typeId' });

const today = (new Date()).toJSON().substring(0, 10);

export default (props) => {

  const [loading, startLoading, stopLoading] = useBool();
  const navigate = useNavigate();
  const paramsRef = React.useRef();

  const columns = [
    {
      title: "上报日期",
      dataIndex: "createDate",
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: "点位",
      dataIndex: "locId",
      valueType: 'select',
      request: queryLocType,
    },
    {
      title: "位置",
      dataIndex: "addr",
      hideInSearch: true,
    },
    {
      title: "问题详情",
      dataIndex: "content",
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: "责任单位",
      dataIndex: "orgId",
      valueType: 'select',
      request: queryOrg,
    },
    {
      title: "流程状态",
      dataIndex: "bizStatus",
      valueType: 'select',
      valueEnum: processEnum,
      render: (_, row) => {
        if (row.processNode != '03' && today >= row.expireDate) {
          return <Badge status="error" text="已逾期" />;
        } else {
          const st = processStatus.filter(x => x.value == row.processNode)[0];
          return <Badge status={st?.badge} text={st?.label} />;
        }
      }
    },
    {
      title: "截止日期",
      dataIndex: "expireDate",
      hideInSearch: true,
    }
  ];

  const onExport = () => {
    startLoading();
    exportTaIssue(paramsRef.current).then(() => {
      stopLoading();
    }).catch(() => {
      stopLoading();
    });
  }

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

  return (
    <List
      rowKey="issueId"
      request={getTaIssue}
      columns={columns}
      beforeSearchSubmit={beforeSearchSubmit}
      optionRender={(_, row) => [
        <Button key="detail" type="link" onClick={() => navigate(`/issue/detail?id=${row.issueId}`)}>详情</Button>
      ]}
      toolBarRender={() => [
        (
          <Button
            key="1"
            type="primary"
            loading={loading}
            onClick={onExport}
          >
            导出
          </Button>
        )
      ]}
    />
  )
}