index.jsx

import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import InitForm from "@/components/InitForm";
import PremButton from "@/components/PremButton";
import ThreeViewer from "@/components/ThreeViewer";
import { doFetch } from "@/utils/doFetch";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import * as Antd from "antd";
import { useMemo, useRef, useState } from "react";
import "./index.less";

const { message } = Antd;
const { Paragraph } = Antd.Typography;

function Probe() {
  const actionRef = useRef(),
    actionRefs = useRef();
  const [dialogprops, setdialogprops] = useState({
    open: false,
  });
  const [active, setactive] = useState("1");

  const handleClose = () => {
    setdialogprops((s) => ({
      ...s,
      open: false,
    }));
  };

  const { runAsync, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res, parames) => {
      if (res?.code == "0000") {
        handleClose();
        message.success("操作成功");
        if (active === "1") {
          actionRef?.current?.reload();
        } else {
          actionRefs?.current?.reload();
        }
      }
    },
  });

  const edit = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: "small",
          variant: "text",
          onClick: () => {
            setdialogprops({
              open: true,
              defaultFormValue: { ...row },
              title: "编辑",
            });
          },
        }}
      >
        编辑
      </PremButton>
    );
  };

  const remove = (text, row, _, action) => {
    return (
      <PremButton
        pop={{
          title: "是否删除该探针?",
          okText: "确认",
          cancelText: "取消",
          onConfirm: async () => {
            await runAsync({
              url: "/probe/delete",
              params: { id: row.id },
            });
          },
        }}
        btn={{
          size: "small",
          color: "error",
        }}
      >
        删除
      </PremButton>
    );
  };

  const columns = useMemo(
    () => [
      { title: "探针名称", dataIndex: "probeName", key: "probeName" },
      {
        title: "探针",
        dataIndex: "probeFile",
        key: "probeFile",
        valueType: "uploadDragger",
        search: false,
        colProps: {
          span: 24,
        },
        render: (text, row) => {
          console.log(row);
          return (
            <a
              target="_blank"
              onClick={() => {
                setdialogprops({
                  open: true,
                  footer: false,
                  url: row?.url,
                  title: "预览",
                  maxWidth:"lg"
                });
              }}
            >
              预览
            </a>
          );
        },
      },
    ],
    []
  );

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        loading={loading}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "sm"}
      >
        {dialogprops.title === "预览" ? (
          <ThreeViewer url={dialogprops?.url}></ThreeViewer>
        ) : (
          <InitForm
            fields={columns}
            defaultFormValue={dialogprops?.defaultFormValue}
            onFinish={(val, extra) => {
              let postdata = { ...val };
              switch (dialogprops?.title) {
                case "编辑":
                  postdata = {
                    ...val,
                    id: dialogprops?.defaultFormValue?.id,
                  };
                  break;
                default:
                  break;
              }
              runAsync({
                url: "/probe/saveOrUpdate",
                params: postdata,
              });
            }}
          ></InitForm>
        )}
      </DraggableDialog>

      <Box
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        sx={{ mb: 2.5 }}
        mt={0}
      >
        <Typography variant="h5">探针管理</Typography>
        <Stack spacing={2} direction="row">
          <PremButton
            btn={{
              variant: "contained",
              onClick: (e) => {
                e.stopPropagation();
                setdialogprops({
                  open: true,
                  defaultFormValue: {},
                  title: "新增探针",
                });
              },
            }}
          >
            新增探针
          </PremButton>
        </Stack>
      </Box>

      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          actionRef={actionRef}
          scroll={{ x: 1366 }}
          columns={[
            ...columns,
            {
              title: "操作",
              valueType: "option",
              width: 200,
              render: (text, row, _, action) => [
                edit(text, row, _, action),
                remove(text, row, _, action),
              ],
            },
          ]}
          path="/probe/page"
          rerendered={false}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Probe;