shihezi-admin/src/pages/Logs/Mobilelog/index.tsx

import React, { useState, useRef, useEffect, useMemo } from 'react';
import {
  addMobilelog,
  exportMobilelog,
  getMobileLogList,
  removeMobilelog,
  updateMobilelog
} from "@/services/logs/mobilelog";
import type { FormInstance } from 'antd';
import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { useIntl, FormattedMessage, useAccess } from '@umijs/max';
import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, message, Modal } from 'antd';
import DictTag from "@/components/DictTag";
import {getDictValueEnum} from "@/services/system/dict";
import UpdateForm from './detail';
import {addOperlog, exportOperlog, removeOperlog, updateOperlog} from "@/services/logs/operlog";
/**
 * 添加节点
 *
 * @param fields
 */
const handleAdd = async (fields: API.Logs.Operlog) => {
  const hide = message.loading('正在添加');
  try {
    const resp = await addMobilelog({ ...fields });
    hide();
    if (resp.code === 200) {
      message.success('添加成功');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};
/**
 * 更新节点
 *
 * @param fields
 */
const handleUpdate = async (fields: API.Logs.Operlog) => {
  const hide = message.loading('正在更新');
  try {
    const resp = await updateMobilelog(fields);
    hide();
    if (resp.code === 200) {
      message.success('更新成功');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('配置失败请重试！');
    return false;
  }
};

/**
 * 删除节点
 *
 * @param selectedRows
 */
const handleRemove = async (selectedRows: API.Logs.Operlog[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;
  try {
    const resp = await removeMobilelog(selectedRows.map((row) => row.operId).join(','));
    hide();
    if (resp.code === 200) {
      message.success('删除成功，即将刷新');
    } else {
      message.error(resp.msg);
    }
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};
/**
 * 导出数据
 *
 *
 */
const handleExport = async () => {
  const hide = message.loading('正在导出');
  try {
    await exportMobilelog();
    hide();
    message.success('导出成功');
    return true;
  } catch (error) {
    hide();
    message.error('导出失败，请重试');
    return false;
  }
};


const  MobileLog: React.FC = () => {
  // ref
  const formTableRef = useRef<FormInstance>();
  const access = useAccess();
  const actionRef = useRef<ActionType>();
  // status
  const [params, useParams] = useState({})
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.Logs.Mobilelog>();
  const [selectedRows, setSelectedRows] = useState<API.Logs.Mobilelog[]>([]);
  // 枚举
  const [businessTypeOptions, setBusinessTypeOptions] = useState<any>([]);
  const [operatorTypeOptions, setOperatorTypeOptions] = useState<any>([]);
  const [statusOptions, setStatusOptions] = useState<any>([]);

  // 初始化
  useEffect(() => {
    getDictValueEnum('sys_oper_type', true).then((data) => {
      setBusinessTypeOptions(data);
    });
    getDictValueEnum('sys_oper_type', true).then((data) => {
      setOperatorTypeOptions(data);
    });
    getDictValueEnum('sys_common_status', true).then((data) => {
      setStatusOptions(data);
    });
  }, []);


  const columns: ProColumns<API.Logs.Mobilelog>[] = useMemo(() => [
    {
      title: '日志主键',
      dataIndex: 'operId',
      valueType: 'text',
      hideInSearch: true,
    },
    {
      title: "操作模块",
      dataIndex: 'title',
      valueType: 'text',
    },
    {
      title: "业务类型",
      dataIndex: 'businessType',
      valueType: 'select',
      valueEnum: businessTypeOptions,
      render: (_, record) => {
        return (<DictTag enums={businessTypeOptions} value={record.businessType} />);
      },
    },
    {
      title: "请求方式",
      dataIndex: 'requestMethod',
      valueType: 'text',
    },
    {
      title: "操作类别",
      dataIndex: 'operatorType',
      valueType: 'select',
      valueEnum: operatorTypeOptions,
      render: (_, record) => {
        return (<DictTag enums={operatorTypeOptions} value={record.operatorType} />);
      },
    },
    {
      title: "操作人员",
      dataIndex: 'operName',
      valueType: 'text',
    },
    {
      title: "主机地址",
      dataIndex: 'operIp',
      valueType: 'text',
    },
    {
      title: "操作地点",
      dataIndex: 'operLocation',
      valueType: 'text',
    },
    {
      title: "操作状态",
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: statusOptions,
      render: (_, record) => {
        return (<DictTag key="status" enums={statusOptions} value={record.status} />);
      },
    },
    {
      title: "操作时间",
      dataIndex: 'operTime',
      valueType: 'dateTime',
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
      dataIndex: 'option',
      width: '120px',
      valueType: 'option',
      render: (_, record) => [
        <Button
          type="link"
          size="small"
          key="edit"
          hidden={!access.hasPerms('logs:mobilelog:edit.tsx')}
          onClick={() => {
            setModalVisible(true);
            setCurrentRow(record);
          }}
        >
          详细
        </Button>,
      ],
    },
  ], [businessTypeOptions, operatorTypeOptions, statusOptions])

  return <>
    <PageContainer>
      <div style={{ width: '100%', float: 'right' }}>
        <ProTable
          // params 是需要自带的参数
          // 这个参数优先级更高，会覆盖查询表单的参数
          actionRef={actionRef}
          formRef={formTableRef}
          rowKey="operId"
          columns={columns}
          search={{
            labelWidth: 120,
          }}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
          request={(params) =>
            getMobileLogList({ ...params } as API.Logs.MobilelogListParams).then((res) => {
              const result = {
                data: res.rows,
                total: res.total,
                success: true,
              };
              return result;
            })
          }
          toolBarRender={() => [
            // <Button
            //   type="primary"
            //   key="add"
            //   hidden={!access.hasPerms('logs:mobilelog:add')}
            //   onClick={async () => {
            //     setCurrentRow(undefined);
            //     setModalVisible(true);
            //   }}
            // >
            //   <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
            // </Button>,
            <Button
              type="primary"
              key="remove"
              danger
              hidden={selectedRows?.length === 0 || !access.hasPerms('logs:mobilelog:remove')}
              onClick={async () => {
                Modal.confirm({
                  title: '是否确认删除所选数据项?',
                  icon: <ExclamationCircleOutlined />,
                  content: '请谨慎操作',
                  async onOk() {
                    const success = await handleRemove(selectedRows);
                    if (success) {
                      setSelectedRows([]);
                      actionRef.current?.reloadAndRest?.();
                    }
                  },
                  onCancel() { },
                });
              }}
            >
              <DeleteOutlined />
              <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
            </Button>,
            <Button
              type="primary"
              key="export"
              hidden={!access.hasPerms('logs:mobilelog:export')}
              onClick={async () => {
                handleExport();
              }}
            >
              <PlusOutlined />
              <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
            </Button>,
          ]}
        />
      </div>
      <UpdateForm
        onSubmit={async (values) => {
          let success = false;
          if (values.operId) {
            success = await handleUpdate({ ...values } as API.Logs.Mobilelog);
          } else {
            success = await handleAdd({ ...values } as API.Logs.Mobilelog);
          }
          if (success) {
            setModalVisible(false);
            setCurrentRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          setModalVisible(false);
          setCurrentRow(undefined);
        }}
        open={modalVisible}
        values={currentRow || {}}
        businessTypeOptions={businessTypeOptions}
        operatorTypeOptions={operatorTypeOptions}
        statusOptions={statusOptions}
      />
    </PageContainer>

  </>
};

export default MobileLog