index.jsx

import AutoTable from "@/components/AutoTable";
import DraggableDialog from "@/components/DraggableDialog";
import PointViewer from "@/components/PointViewer";
import PremButton from "@/components/PremButton";
import { doFetch } from "@/utils/doFetch";
import { ProDescriptions } from "@ant-design/pro-components";
import { Box, Container, Stack, Typography } from "@mui/material";
import { useRequest } from "ahooks";
import { Divider, Drawer, message, Table, Tag, Tooltip } from "antd";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { useMemo, useRef, useState } from "react";

import "./index.less";

dayjs.extend(duration);

function Record() {
  const actionRef = useRef();
  const [dialogprops, setdialogprops] = useState({
    open: false,
  });
  const handleClose = () => {
    setdialogprops((s) => ({
      ...s,
      open: false,
    }));
  };

  const detailcolumns = [
    {
      title: "分数",
      dataIndex: "score",
      key: "score",
      hideInSearch: true,
      span: 2,
    },
    {
      title: "评语",
      dataIndex: "comment",
      key: "comment",
      span: 2,
    },
    { title: "学生姓名", dataIndex: "studentName", key: "studentName" },
    { title: "学生账号", dataIndex: "studentAccount", key: "studentAccount" },
    { title: "课程名称", dataIndex: "courseName", key: "courseName" },
    { title: "实训名称", dataIndex: "trainName", key: "trainName" },
    { title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
    {
      title: "实验时长（分钟）",
      dataIndex: "testTime",
      key: "testTime",
    },
    { title: "权重", dataIndex: "weight", key: "weight", hideInSearch: true },
    { title: "分数", dataIndex: "scoreWeight", key: "scoreWeight" },
    {
      title: "提交时间",
      dataIndex: "finishTime",
      key: "finishTimeRange",
    },
    {
      title: "批阅人",
      dataIndex: "reviewUserName",
      key: "reviewUserName",
    },
    {
      title: "批阅时间",
      dataIndex: "reviewTime",
      key: "reviewTime",
    },
  ];

  const { runAsync, loading } = useRequest(doFetch, {
    manual: true,
    onSuccess: (res) => {
      if (res?.code == "0000") {
        message.success("操作成功");
      }
    },
  });

  const detail = (text, row, _, action) => {
    return (
      <PremButton
        btn={{
          size: "small",
          variant: "text",
          color: "inherit",
          onClick: async () => {
            let res = await doFetch({
              url: "/studentExperiment/detail",
              params: { id: row?.id },
            });

            let result = await doFetch({
              url: "/studentExperiment/queryResultForPc",
              params: {
                id: row.id,
              },
            });

            setdialogprops({
              open: true,
              defaultFormValue: { ...res?.data?.data },
              title: "详情",
              maxWidth: "md",
              footer: false,
              tabdata: result?.data?.data,
            });
          },
        }}
      >
        详情
      </PremButton>
    );
  };

  const rollback = (text, row, action) => {
    return (
      <PremButton
        pop={{
          disabled: row?.reviewType !== 1,
          title: "是否退回该实训?",
          okText: "确认",
          cancelText: "取消",
          onConfirm: async () => {
            await runAsync({
              url: "/studentExperiment/remake",
              params: { id: row?.id },
            });
          },
        }}
        btn={{
          disabled: row?.reviewType !== 1,
          size: "small",
          color: "error",
        }}
      >
        撤回
      </PremButton>
    );
  };

  const columns = useMemo(() => {
    let res = [
      { title: "课程名称", dataIndex: "courseName", key: "courseName" },
      { title: "实训名称", dataIndex: "trainName", key: "trainName" },
      { title: "实验名称", dataIndex: "experimentName", key: "experimentName" },
      {
        title: "分数",
        dataIndex: "scoreWeight",
        key: "scoreWeight",
        hideInSearch: true,
      },
      {
        title: "提交时间",
        dataIndex: "finishTime",
        key: "finishTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "批阅时间",
        dataIndex: "reviewTime",
        key: "reviewTimeRange",
        valueType: "dateTimeRange",
      },
      {
        title: "批阅状态",
        dataIndex: "reviewTypeName",
        key: "reviewType",
        valueType: "select",
        options: [
          { label: "待批阅", value: "1" },
          { label: "已批阅", value: "2" },
        ],
      },
      {
        title: "操作",
        valueType: "option",
        width: 128,
        render: (text, row, _, action) => [
          detail(text, row, _, action),
          rollback(text, row, _, action),
        ],
      },
    ];
    return res;
  }, []);

  const [drawer, setDrawer] = useState({
    open: false,
    onClose: () => {
      setDrawer((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  return (
    <Container maxWidth={false}>
      <DraggableDialog
        handleClose={handleClose}
        dialogprops={dialogprops}
        maxWidth={dialogprops?.maxWidth ?? "sm"}
        footer={false}
      >
        <div>
          <ProDescriptions
            columns={detailcolumns}
            column={2}
            style={{ marginBottom: 12 }}
            dataSource={dialogprops?.defaultFormValue}
          ></ProDescriptions>
          <Divider></Divider>
          <b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
            实验素养
          </b>
          <Table
            size="small"
            pagination={{
              pageSize: 6,
            }}
            columns={[
              {
                title: "操作名称",
                dataIndex: "config",
                key: "config",
                render: (text, row) => {
                  return row?.config?.name;
                },
              },
              {
                title: "是否操作",
                dataIndex: "isComplete",
                key: "isComplete",
                width: 200,
                render: (text, row) => {
                  return row?.isComplete ? (
                    "完成"
                  ) : (
                    <span style={{ color: "red" }}>未完成</span>
                  );
                },
              },
            ]}
            dataSource={
              dialogprops?.tabdata?.recordDataDic
                ? Object.values(dialogprops?.tabdata?.recordDataDic)
                : []
            }
          ></Table>
          <Divider></Divider>
          <div style={{ position: "relative", minHeight: 360 }}>
            <Drawer
              {...drawer}
              getContainer={false}
              title={false}
              closable={false}
              destroyOnClose
            >
              <PointViewer
                position={drawer?.position}
                CoordinatePoint={dialogprops?.tabdata?.CoordinatePoint}
                CurGongjianPoint={dialogprops?.tabdata?.CurGongjianPoint}
              ></PointViewer>
            </Drawer>
            <b style={{ fontSize: 14, paddingBottom: 10, display: "block" }}>
              实验报告
            </b>
            <Table
              size="small"
              pagination={{
                pageSize: 6,
              }}
              columns={[
                {
                  title: "名称",
                  dataIndex: "Name",
                  key: "Name",
                },
                {
                  title: "测量值",
                  dataIndex: "actualValue",
                  key: "actualValue",
                  render: (text, row) => {
                    return row?.actualValue?.toFixed(4) ?? "";
                  },
                },
                {
                  title: "名义值",
                  dataIndex: "normal",
                  key: "normal",
                  render: (text, row) => {
                    return row?.normal?.toFixed(4) ?? "";
                  },
                },
                {
                  title: "上公差",
                  dataIndex: "Upper",
                  key: "Upper",
                },
                {
                  title: "下公差",
                  dataIndex: "Down",
                  key: "Down",
                },
              ]}
              rowKey={"id"}
              dataSource={
                dialogprops?.tabdata?.PeculiarityInfosDict
                  ? Object.values(
                      dialogprops?.tabdata?.PeculiarityInfosDict
                    )?.map((it, i) =>
                      it?.[0]
                        ? {
                            ...it?.[0],
                            id: i + 1,
                          }
                        : {}
                    )
                  : []
              }
              expandable={{
                expandedRowRender: ({ ElementInfoList }) => {
                  return (
                    <div style={{ display: "flex", gap: 6 }}>
                      {ElementInfoList?.map((it) => {
                        function removeFirstAndLastChar(str) {
                          return str.substring(1, str.length - 1);
                        }
                        return (
                          <div
                            style={{
                              padding: 12,
                              backgroundColor: "#f0f0f0",
                              display: "inline-block",
                              borderRadius: 4,
                              marginBottom: 6,
                            }}
                          >
                            <span style={{ paddingRight: 12 }}>{it?.Name}</span>
                            {it?.PointList?.map((its) => (
                              <Tooltip
                                key={its?.id}
                                title={
                                  <div
                                    dangerouslySetInnerHTML={{
                                      __html: removeFirstAndLastChar(
                                        JSON.stringify(its.Position)
                                      ).replace(/,/g, "<br/>"),
                                    }}
                                  ></div>
                                }
                              >
                                <Tag
                                  onClick={() => {
                                    setDrawer((s) => ({
                                      ...s,
                                      position: its.Position,
                                      open: true,
                                    }));
                                  }}
                                  style={{ cursor: "pointer" }}
                                >
                                  {its.Name}
                                </Tag>
                              </Tooltip>
                            ))}
                          </div>
                        );
                      })}
                    </div>
                  );
                },
              }}
            ></Table>
          </div>
        </div>
      </DraggableDialog>

      <Stack direction={"row"} mb={2}>
        <Typography variant="h5">我的成绩</Typography>
      </Stack>

      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
        <AutoTable
          actionRef={actionRef}
          scroll={{ x: 1366 }}
          columns={[...columns]}
          path={"/studentExperiment/queryPageByLoginStudent"}
        ></AutoTable>
      </Box>
    </Container>
  );
}

export default Record;