shihezi-admin/src/pages/Management/List/index.tsx

import React, { Fragment, useEffect, useRef, useState } from 'react';
import { FormattedMessage, history, useAccess } from '@umijs/max';

import {
  addCmsJobList,
  delCmsJobIds,
  exportCmsJob,
  getCmsJobList,
  updateCmsJobList,
} from '@/services/Management/list';
import { Button, FormInstance, message, Modal, Switch } from 'antd';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import {
  AlignLeftOutlined,
  BarChartOutlined,
  DeleteOutlined,
  FormOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import EditManageRow from './edit';
import { getDictValueEnum } from '@/services/system/dict';
import DictTag from '@/components/DictTag';

const handleExport = async (values: API.ManagementList.ListParams) => {
  const hide = message.loading('正在导出');
  try {
    await exportCmsJob(values);
    hide();
    message.success('导出成功');
    return true;
  } catch (error) {
    hide();
    message.error('导出失败，请重试');
    return false;
  }
};
const handleRemoveOne = async (jobId: string) => {
  const hide = message.loading('正在删除');
  if (!jobId) return true;
  try {
    const resp = await delCmsJobIds(jobId);
    hide();
    if (resp.code === 200) {
      message.success('删除成功，即将刷新');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

function ManagementList() {
  const access = useAccess();

  const formTableRef = useRef<FormInstance>();
  const actionRef = useRef<ActionType>();

  const [educationEnum, setEducationEnum] = useState<any>([]);
  const [experienceEnum, setExperienceEnum] = useState<any>([]);
  const [areaEnum, setAreaEnum] = useState<any>([]);
  const [isPublishEnum, setIsPublishEnum] = useState<any>([]);
  const [hotEnum, setHotEnum] = useState<any>([]);
  const [currentRow, setCurrentRow] = useState<API.ManagementList.Manage>();
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [mode, setMode] = useState<'view' | 'edit' | 'create'>('create');
  useEffect(() => {
    getDictValueEnum('education', true, true).then((data) => {
      setEducationEnum(data);
    });
    getDictValueEnum('experience', true, true).then((data) => {
      setExperienceEnum(data);
    });
    getDictValueEnum('area', true, true).then((data) => {
      setAreaEnum(data);
    });
    getDictValueEnum('is_publish', true).then((data) => {
      setIsPublishEnum(data);
    });
    // getDictValueEnum('job_hot',true).then((data) => {
    //   setHotEnum(data)
    // })
  }, []);

  async function changeRelease(record: API.ManagementList.Manage) {
    let resData = await updateCmsJobList({
      jobId: record.jobId,
      isPublish: record.isPublish === 1 ? 0 : 1,
    });
    if (resData.code === 200) {
      message.success('修改成功');
      if (actionRef.current) {
        actionRef.current.reload();
      }
    }
  }

  const columns: ProColumns<API.ManagementList.Manage>[] = [
    {
      title: '岗位名称',
      dataIndex: 'jobTitle',
      valueType: 'text',
      align: 'center',
    },
    {
      title: '最小薪资(元/月)',
      dataIndex: 'minSalary',
      valueType: 'text',
      align: 'center',
    },
    {
      title: '最大薪资(元/月)',
      dataIndex: 'maxSalary',
      valueType: 'text',
      align: 'center',
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
      valueType: 'text',
      align: 'center',
    },
    {
      title: '学历要求',
      dataIndex: 'education',
      valueType: 'select',
      align: 'center',
      valueEnum: educationEnum,
      render: (_, record) => {
        return <DictTag enums={educationEnum} value={record.education} />;
      },
    },
    {
      title: '经验要求',
      dataIndex: 'experience',
      valueType: 'select',
      align: 'center',
      valueEnum: experienceEnum,
      render: (_, record) => {
        return <DictTag enums={experienceEnum} value={record.experience} />;
      },
    },
    // {
    //   title: '是否热门',
    //   dataIndex: 'isHot',
    //   valueType: 'select',
    //   align: 'center',
    //   valueEnum: hotEnum,
    //   render: (_, record) => {
    //     return (<DictTag enums={hotEnum} value={record.isHot} />);
    //   },
    // },
    {
      title: '是否发布',
      dataIndex: 'isPublish',
      valueType: 'select',
      align: 'center',
      valueEnum: isPublishEnum,
      render: (text, record) => (
        <Switch checked={record.isPublish === 1} onChange={changeRelease.bind(null, record)} />
      ),
    },
    {
      title: '招聘人数',
      dataIndex: 'vacancies',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '浏览量',
      dataIndex: 'view',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      dataIndex: 'jobId',
      width: 300,
      render: (jobId, record) => [
        <div key="first-row" style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>
          <Button
            type="link"
            size="small"
            key="view"
            icon={<AlignLeftOutlined />}
            hidden={!access.hasPerms('area:business:List.view')}
            onClick={() => {
              setCurrentRow(record);
              setModalVisible(true);
              setMode('view'); // 新增状态控制模式
            }}
          >
            查看详情
          </Button>
          <Button
            type="link"
            size="small"
            key="edit"
            icon={<BarChartOutlined />}
            hidden={!access.hasPerms('area:business:List.update')}
            onClick={() => history.push(`/management/see-matching/index/${record.jobId}`)}
          >
            查看申请人
          </Button>
        </div>,
        <div key="second-row" style={{ display: 'flex', justifyContent: 'space-evenly' }}>
          <Button
            type="link"
            size="small"
            key="edit"
            icon={<FormOutlined />}
            hidden={!access.hasPerms('area:business:List.update')}
            onClick={() => {
              setModalVisible(true);
              setCurrentRow(record);
            }}
          >
            编辑
          </Button>
          <Button
            type="link"
            size="small"
            danger
            key="batchRemove"
            icon={<DeleteOutlined />}
            hidden={!access.hasPerms('area:subway:List')}
            onClick={async () => {
              Modal.confirm({
                title: '删除',
                content: '确定删除该项吗？',
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                  const success = await handleRemoveOne(jobId as string);
                  if (success) {
                    if (actionRef.current) {
                      actionRef.current.reload();
                    }
                  }
                },
              });
            }}
          >
            删除
          </Button>
        </div>,
      ],
    },
  ];
  return (
    <Fragment>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable<API.ManagementList.Manage>
          // params 是需要自带的参数
          // 这个参数优先级更高，会覆盖查询表单的参数
          actionRef={actionRef}
          formRef={formTableRef}
          rowKey="jobId"
          key="index"
          columns={columns}
          request={(params) =>
            getCmsJobList({ ...params } as API.ManagementList.ListParams).then((res) => {
              console.log(params);
              const result = {
                data: res.rows,
                total: res.total,
                success: true,
              };
              return result;
            })
          }
          toolBarRender={() => [
            <Button
              type="primary"
              key="add"
              hidden={!access.hasPerms('manage:List:add')}
              onClick={async () => {
                setCurrentRow(undefined);
                setModalVisible(true);
                setMode('create');
              }}
            >
              <PlusOutlined /> 新建
            </Button>,
            <Button
              type="primary"
              key="export"
              hidden={!access.hasPerms('system:user:export')}
              onClick={async () => {
                const searchVal = formTableRef.current && formTableRef.current.getFieldsValue();
                handleExport(searchVal as API.ManagementList.ListParams);
              }}
            >
              <PlusOutlined />
              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
            </Button>,
          ]}
        />
      </div>
      <EditManageRow
        open={modalVisible}
        mode={mode}
        onSubmit={async (values) => {
          let resData;
          if (values.jobId) {
            resData = await updateCmsJobList(values);
          } else {
            resData = await addCmsJobList(values);
          }
          if (resData.code === 200) {
            setModalVisible(false);
            setCurrentRow(undefined);
            if (values.jobId) {
              message.success('修改成功');
            } else {
              message.success('新增成功');
            }
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        values={currentRow}
        onCancel={() => {
          setModalVisible(false);
          setCurrentRow(undefined);
        }}
        educationEnum={educationEnum}
        experienceEnum={experienceEnum}
        areaEnum={areaEnum}
      ></EditManageRow>
    </Fragment>
  );
}

export default ManagementList;