asd

package.json

@@ -24,6 +24,7 @@
     "@mui/styled-engine-sc": "^5.11.11",
     "@reduxjs/toolkit": "^1.9.3",
     "ahooks": "^3.7.6",
+    "antd": "^5.4.2",
     "apexcharts": "^3.37.0",
     "change-case": "^4.1.2",
     "date-fns": "^2.29.3",

src/App.less

@@ -2,3 +2,72 @@
   margin: 0 auto;
   //color: rgba(209, 233, 252, 0.347);
 }
+
+.react-resizable {
+  position: relative;
+}
+
+.table-cell {
+  display: -webkit-box;
+  //width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 999;
+  width: 10px;
+  height: 100%;
+  background: transparent;
+  cursor: col-resize;
+}
+
+.anticon {
+  font-size: 16px !important;
+  color: #637381 !important;
+}
+.ant-pro-card{
+  border-radius: 12px !important;
+}
+.ant-pro-card-body {
+  padding-inline: 0 !important;
+}
+.ant-pro-table-list-toolbar-container {
+  padding-inline: 8px;
+}
+.ant-pro-table-list-toolbar-right {
+  flex: 1 !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+}
+.ant-pro-table-list-toolbar-left {
+  flex: 0;
+}
+.ant-table-pagination.ant-pagination {
+  padding-inline: 8px;
+}
+//清除圆角
+.ant-table-wrapper
+  .ant-table-container
+  table
+  > thead
+  > tr:first-child
+  > *:last-child,
+.ant-table-wrapper
+  .ant-table-container
+  table
+  > thead
+  > tr:first-child
+  > *:first-child {
+  border-radius: 0 !important;
+}
+//清楚arrow
+.ant-popover-arrow {
+  display: none !important;
+}

src/pages/organization/index.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
+import AutoTable from "@/components/AutoTable";
+import { Container, Box, Typography } from "@mui/material";
 
 function Organization() {
-    return ( 
-        <div>
-            organization
-        </div>
-     );
+  return (
+    <Container maxWidth="xxl">
+      <Box sx={{ mb: 3 }} mt={0}>
+        <Typography variant="h5">
+          组织管理
+        </Typography>
+      </Box>
+
+      <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
+        <AutoTable
+          columns={[
+            {
+              title: "姓名",
+              dataIndex: "userName",
+              key: "userId",
+              sorter: (a, b) => a.containers - b.containers,
+              hideInForm: {
+                accountName: { reverse: ["1", "2", "5"] },
+                remark: ["3"],
+              },
+              search: false,
+            },
+            {
+              title: "用户名123",
+              dataIndex: "accountName",
+              formItemProps: {
+                rules: [{ required: false, message: "此项为必填项" }],
+              },
+              hideInForm: false,
+              key: "accountName",
+              valueType: "select",
+              mode: "tags",
+              options: [{ label: "123", value: "123" }],
+            },
+            { title: "基础信息", valueType: "split", key: "基础信息" },
+            { title: "额外信息", valueType: "split", key: "额外信息" },
+            {
+              title: "联系电话",
+              dataIndex: "telephone",
+              formItemProps: {
+                rules: [{ required: false, message: "此项为必填项" }],
+              },
+              search: false,
+              key: "telephone",
+            },
+            {
+              title: "邮箱",
+              dataIndex: "mailNo",
+              formItemProps: {
+                rules: [{ required: false, message: "此项为必填项" }],
+              },
+              search: false,
+              key: "mailNo",
+            },
+            {
+              title: "备注",
+              dataIndex: "remark",
+              valueType: "editor",
+              search: false,
+              colProps: { span: 24 },
+              initialValue: "<p>Hello<b>World!</b></p>",
+              key: "remark",
+            },
+            {
+              title: "上传样式-图片",
+              dataIndex: "uploadImage",
+              key: "uploadImage",
+              valueType: "uploadImage",
+              fieldProps: { limit: 2 },
+              formItemProps: {
+                rules: [{ required: false, message: "此项为必填项" }],
+              },
+            },
+            { title: "操作", valueType: "option", width: 150, key: "操作" },
+          ]}
+          dataSource={[
+            {
+              userName: "123",
+            },
+          ]}
+        ></AutoTable>
+      </Box>
+    </Container>
+  );
 }
 
-export default Organization;
+export default Organization;
\ No newline at end of file