pc-admin/src/pages/Student/School/List/index.jsx

import React, { useEffect, useRef, useCallback, useState } from 'react';
import { connect, history } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined, MenuOutlined } from '@ant-design/icons';
import { Button, Popconfirm, Image, Space, notification } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import request, { queryTable } from '@/utils/request';
import arrayMove from 'array-move';

const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);

const typeList = { post: '科普' };
// const stateList = { post: '科普' };

const SchoolList = (props) => {
  const [loading, setLoading] = useState(false);

  const ref = useRef();
  const handleSchoolClick = useCallback((id) => {
    history.push(id ? `/student/school/edit?id=${id}` : '/student/school/edit');
  }, []);

  const actions = [
    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => handleSchoolClick()}>
      新建
    </Button>,
  ];

  const deleteSchoolClick = (id) => {
    setLoading(true);
    console.log(ref, 'ref');

    request(`/school/${id}`, { method: 'delete' })
      .then((res) => {
        notification.success({ message: '删除成功' });
        ref.current.submit();
      })
      .catch((e) => {
        setLoading(false);
        notification.error({ message: e.message });
      });
  };

  const columns = [
    {
      title: 'logo',
      dataIndex: 'logo',
      hideInSearch: true,

      align: 'center',
      render: (text) => <Image width={64} height={64} src={text} />,
    },
    {
      title: '学校名称',
      dataIndex: 'name',
      align: 'center',
    },

    {
      title: '简介',
      dataIndex: 'desc',
      align: 'center',
      hideInSearch: true,
      width: '25%',
      ellipsis: true,
      // render: (text) => <Image src={text} />,
    },
    {
      title: '上架状态',
      dataIndex: 'status',
      align: 'center',
      // hideInTable: true,
      valueType: 'select',
      valueEnum: {
        0: { text: '未上架' },
        1: { text: '已上架' },
      },
    },
    {
      title: '上传时间',
      dataIndex: 'createDate',
      align: 'center',
      hideInSearch: true,
      valueType: 'date',
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      hideInSearch: true,
      render: (text, record) => (
        <Space size="middle">
          <a onClick={() => handleSchoolClick(record.schoolId)}>编辑</a>
          <Popconfirm
            key="popconfirm"
            title={`确认删除吗?`}
            onConfirm={() => deleteSchoolClick(record.schoolId)}
            okText="是"
            cancelText="否"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={queryTable('/school')}
        formRef={ref}
        rowKey="schoolId"
        headerTitle="学校列表"
        search={{
          labelWidth: '4em',
        }}
        toolBarRender={() => actions}
      />
    </PageContainer>
  );
};

export default connect((s) => ({
  typeList: s.post.typeList,
}))(SchoolList);