syzx/admin/src/pages/examination/certificate/index.tsx

import React, { useState, useRef } from 'react';
import { useRequest, history } from 'umi';
import { PlusOutlined, TagsOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Modal, Col, Row, Space, Upload, Select } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { BetaSchemaForm, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import { saveCertificate, removeCertificate, queryCertificateList } from '../service';
import type { TableListItem, TableListPagination } from '../data';
import type { DataItem } from '@antv/data-set/lib/transform/tag-cloud';

/**
 * 添加证书
 *
 * @param fields
 */

const handleAdd = async (fields: TableListItem) => {
  const hide = message.loading('正在添加');

  try {
    await saveCourse({ ...fields });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};

/**
 * 更新证书
 *
 * @param fields
 */
const handleUpdate = async (fields: FormValueType, currentRow?: TableListItem) => {
  const hide = message.loading('正在更新');

  try {
    await saveCourse({
      ...currentRow,
      ...fields,
    });
    hide();
    message.success('操作成功');
    return true;
  } catch (error) {
    hide();
    message.error('操作失败请重试！');
    return false;
  }
};

/**
 * 删除证书
 *
 * @param selectedRows
 */
const handleRemove = async (selectedRows: TableListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeCourse({
      key: selectedRows.map((row) => row.key),
    });
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const CourseList: React.FC = () => {
  /** 更新窗口的弹窗 */
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);


  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<TableListItem>();
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);

  /** 列表项定义 */
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '序号',
      key: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '考试名称',
      dataIndex: 'examination_name',
      valueType: 'text',
      hideInTable: false,
      hideInForm: false,
      hideInSearch: false,
    },
    {
      title: '创建日期',
      dataIndex: 'create_time',
      valueType: 'text',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '报名日期',
      dataIndex: 'apply_start_time',
      valueType: 'text',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: true,
      render: (dom, entity) => {
        return entity.apply_start_time + " - " + entity.apply_end_time
      },
    },
    {
      title: '考试时间',
      valueType: 'dateTimeRange',
      dataIndex: 'examination_start_time',
      sorter: false,
      hideInTable: false,
      hideInForm: false,
      hideInSearch: false,
      colSize: 2,
      render: (dom, entity) => {
        return entity.examination_start_time + " - " + entity.examination_end_time
      },
    },
    {
      title: '试卷数量',
      dataIndex: 'paper_count',
      sorter: false,
      valueType: 'text',
      hideInForm: false,
      hideInSearch: true,
      renderText: (val: string) => `${val}`,
    },
    {
      title: '报考人数',
      dataIndex: 'apply_person_count',
      sorter: false,
      valueType: 'text',
      hideInForm: false,
      hideInSearch: true,

      renderText: (val: string) => `${val}`,
    },
    {
      title: '通过人数',
      dataIndex: 'pass_count',
      sorter: false,
      valueType: 'text',
      hideInForm: false,
      hideInSearch: true,

    },

    {
      title: '制证状态',
      dataIndex: 'accreditation_status',
      sorter: false,
      valueType: 'text',
      hideInForm: false,
      hideInSearch: false,
      fieldProps: {
        allowClear: false
      },
      renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        const status = form.getFieldValue('state');
        if (status !== 'open') {
          return (
            // value 和 onchange 会通过 form 自动注入。
            <Select defaultValue="" allowClear={true} >
              <Option value="">全部</Option>
              <Option value="0">未制证</Option>
              <Option value="1">已制证</Option>
            </Select>
          );
        }
        return defaultRender(_);
      },
      valueEnum: {
        0: { text: '未制证' },
        1: { text: '已制证' },
      },
    },


    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_dom: any, record: React.SetStateAction<TableListItem | undefined>) => [

        <Button
          key="detail"
          type="text"
          onClick={() => {
            history.push('/examination/certificate/person/' + record.examination_id + "/" + record.accreditation_status + "/" + encodeURIComponent(record.examination_name))

          }}
        // disabled={record.status_type === 4 ? false : true}
        >
          查看名单
        </Button>,
        <Button key="subscribeAlert"
          type="text"
          disabled={record.status_type === 4 ? false : true}
          onClick={() => {
            console.log(window.location.host);
            window.location.href = `http://${window.location.host}/dsideal_yy/zygh/training/person/exportPersonApplyDataModifyStatus?examination_id=${record.examination_id}`

            setTimeout(pushurl, 300);

            function pushurl() {
              actionRef.current?.reloadAndRest?.();

            }
            // history.push(`/dsideal_yy/zygh/training/person/exportPersonApplyDataModifyStatus?examination_id=${record.examination_id}`)

          }}
        >
          导出名单
        </Button>,
      ],
    },
  ];


  return (
    <PageContainer>
      <ProTable<TableListItem, TableListPagination>
        headerTitle={false}
        actionRef={actionRef}
        rowKey="course_id"
        options={false}
        search={{
          labelWidth: 120,
          defaultCollapsed: false
        }}
        // toolBarRender={() => [
        //   <Button
        //     type="primary"
        //     key="primary"
        //     onClick={() => {
        //       handleCreateModalVisible(true);
        //     }}
        //   >
        //     <PlusOutlined /> 新建课程
        //   </Button>,
        // ]}
        request={async (value) => {
          console.log(value, 'form value')
          const { create_time } = value;
          if (create_time) {
            value.start_time = create_time[0]
            value.end_time = create_time[1]
          }
          const _data = await queryCertificateList({
            ...value,
            page_number: value.current,
            page_size: value.pageSize
          });

          return {
            current: _data?.pageNumber,
            data: _data?.table_List,
            pageSize: _data?.pageSize,
            total: _data?.totalRow || 0,
          };
        }}
        // dataSource={list}
        columns={columns}
        rowSelection={false}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsState.length}
              </a>{' '}
              项 &nbsp;&nbsp;
            </div>
          }
        >
          <Button
            onClick={async () => {
              await handleRemove(selectedRowsState);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>
          <Button type="primary">批量审批</Button>
        </FooterToolbar>
      )}
      <Modal
        title={currentRow?.course_name || '课程详细'}
        width="60%"
        visible={detailModalVisible}
        onCancel={() => {
          setCurrentRow(undefined); // 设置当前行
          handleDetailModalVisible(false);
        }}
        footer={null}
        centered
      >{console.log('currentRow', currentRow)}
        {currentRow?.name && (
          <ProDescriptions<TableListItem>
            column={2}
            /* title={currentRow?.name} */
            dataSource={currentRow}
            /*
              request={async () => ({
                data: currentRow || {},
              })}*/
            params={{
              id: currentRow?.course_id,
            }}
            columns={
              columns
              //columns.slice(0, columns.length - 1) as ProDescriptionsItemProps<TableListItem>[]
            }
          />
        )}
      </Modal>

      <Modal
        title="新建课程"
        //
        width="60%"
        visible={createModalVisible}
        destroyOnClose
        onCancel={() => {
          handleCreateModalVisible(false);
        }}
        footer={null}
      >
        <BetaSchemaForm<DataItem>
          layout="horizontal"
          layoutType="Form"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 12 }}
          onFinish={async (values: any) => {
            // 表单处理
            console.log('columns:', columns);
            console.log('values:', values);

          }}
          submitter={{
            render: (props, doms) => (
              <Row>
                <Col span={12} offset={8}>
                  <Space>{doms}</Space>
                </Col>
              </Row>
            ),
          }}
          // action = ''
          title="新建"
          columns={columns}
        />
      </Modal>

      <Modal
        title="编辑"
        width="60%"
        visible={updateModalVisible}
        destroyOnClose
        onCancel={() => {
          handleUpdateModalVisible(false);
        }}
        footer={null}
      >
        {currentRow?.name && (
          <BetaSchemaForm<DataItem>
            layout="horizontal"
            layoutType="Form"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 12 }}
            onFinish={async (values) => {
              console.log(values);
            }}
            submitter={{
              render: (props, doms) => (
                <Row>
                  <Col span={12} offset={8}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              ),
            }}
            // action = ''
            title="编辑"
            columns={getInitialValues(columns, currentRow)}
          />
        )}
      </Modal>
    </PageContainer>
  );
};

export default CourseList;