asder

package.json

@@ -25,9 +25,12 @@
     "@reduxjs/toolkit": "^1.9.3",
     "ahooks": "^3.7.6",
     "antd": "^5.4.2",
+    "antd-img-crop": "^4.12.2",
     "apexcharts": "^3.37.0",
+    "braft-editor": "^2.3.9",
     "change-case": "^4.1.2",
     "date-fns": "^2.29.3",
+    "dayjs": "^1.11.7",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",

src/App.less

@@ -28,12 +28,21 @@
 }
 
 .anticon {
-  font-size: 16px !important;
+  font-size: 14px !important;
   color: #637381 !important;
 }
-.ant-pro-card{
+.ant-select {
+  .anticon-close-circle {
+    font-size: 14px !important;
+    margin-top: -2px;
+    margin-left: -2px;
+  }
+}
+
+.ant-pro-card {
   border-radius: 12px !important;
 }
+
 .ant-pro-card-body {
   padding-inline: 0 !important;
 }

src/components/DraggableDialog/index.jsx

+import * as React from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Paper from "@mui/material/Paper";
+import Draggable from "react-draggable";
+
+function PaperComponent(props) {
+  return (
+    <Draggable
+      handle="#draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+export default function DraggableDialog({ children }) {
+  const [open, setOpen] = React.useState(false);
+  const formRef = React.useRef();
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Open draggable dialog
+      </Button>
+      <Dialog
+        maxWidth="md"
+        open={open}
+        onClose={handleClose}
+        PaperComponent={PaperComponent}
+        aria-labelledby="draggable-dialog-title"
+      >
+        <DialogTitle style={{ cursor: "move" }} id="draggable-dialog-title">
+          Subscribe
+        </DialogTitle>
+        <DialogContent>
+          {React.cloneElement(children, { submitter: false, formRef })}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            type="reset"
+            key="rest"
+            onClick={() => {
+              formRef?.current?.resetFields();
+            }}
+          >
+            重置
+          </Button>
+          <Button
+            type="submit"
+            key="submit"
+            variant="contained"
+            onClick={() => () => {
+              formRef?.current?.submit();
+            }}
+          >
+            提交
+          </Button>
+
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}

src/components/InitForm/EditTable/index.jsx

+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useEffect, useRef, useState, memo, useMemo } from 'react';
+import { EditableProTable } from '@ant-design/pro-components';
+import { Tooltip } from '@mui/material';
+import { doFetch } from '@/utils/doFetch';
+
+const EditTable = (props) => {
+  const {
+    actionRef, //表格动作
+    formRef, //表单Ref
+    rowKey, // key
+    columns = [], //columns
+    style, //style
+    path, //接口地址
+    extraparams, //额外参数
+    pageSize, //修改默认pageSize
+    pagination, //分页设置
+    x, //横向滚动
+    refreshDep, //依赖刷新 （已废弃）
+  } = props;
+
+  const actionRefs = actionRef ?? useRef(),
+    formRefs = formRef ?? useRef(),
+    ifspagination = pagination == 'false' || pagination === false,
+    [size, setsize] = useState('small');
+
+  //调用接口
+  const request = async (params, sort, filter) => {
+    if (!path) return;
+    let newparams = {
+      ...params,
+      ...extraparams, //父组件传参
+      pageIndex: params.current,
+      pageSize: params.pageSize || pageSize,
+    };
+    delete newparams.current;
+    if (ifspagination) {
+      delete newparams.pageIndex;
+      delete newparams.pageSize;
+    }
+    const result = await doFetch({ url: path, params: newparams });
+    //分页结果
+    let data = result?.data?.page?.list,
+      success = true,
+      total = result?.data?.page?.total;
+    //不带分页获取结果
+    if (ifspagination || !data) {
+      data = result?.data?.dataList;
+      total = result?.data?.dataList?.length;
+    }
+    //存在默认选中向上返回选中值
+    return {
+      data,
+      success,
+      total,
+    };
+  };
+
+  let columncs = useMemo(() => {
+    return columns.map((item, index) => {
+      let it = { ...item };
+      let itemwidth = it.width ? it.width : 'auto';
+      let options = {};
+      if (it.valueType == 'select' || it.valueType == 'checkbox') {
+        if (Array.isArray(it.options)) {
+          options = {
+            fieldProps: {
+              options: [...it.options],
+            },
+          };
+        } else if (it.options) {
+          options = {
+            request: async (params) => {
+              let list = await doFetch({ url: it?.options?.path, params: it?.options?.params });
+              return list.data.dataList;
+            },
+          };
+        }
+      }
+      if (it.valueType == 'option') {
+        options = {
+          key: 'option',
+          dataIndex: 'option',
+          fixed: 'right',
+        };
+      }
+      if (!it.render) {
+        options = {
+          ...options,
+          render: (text, row) => {
+            return (
+              <Tooltip title={row[it.dataIndex]} placement="bottom-start">
+                <span className="table-cell">{row[it.dataIndex] ?? '-'}</span>
+              </Tooltip>
+            );
+          },
+        };
+      }
+
+      options = {
+        ...options,
+        width: itemwidth,
+      };
+
+      delete it.formItemProps;
+      return {
+        ...it,
+        ...options,
+      };
+    });
+  }, [columns]);
+
+  return (
+    <EditableProTable
+      {...props}
+      recordCreatorProps={false}
+      size={size}
+      onSubmit={(params) => {
+        console.log(params, 'onSubmit');
+      }}
+      onSizeChange={(size) => {
+        localStorage.setItem('size', size); //设置全局表格规格缓存
+        setsize(size);
+      }}
+      columns={columncs ?? []}
+      style={style || {}}
+      actionRef={actionRefs}
+      formRef={formRefs}
+      rowKey={rowKey ?? 'id'} //表格每行数据的key
+      dateFormatter="string"
+      request={request}
+      scroll={
+        x
+          ? {
+              x: x,
+            }
+          : {}
+      }
+      pagination={
+        ifspagination
+          ? false
+          : {
+              showTotal: (total, range) => <span>共{total}条</span>,
+              showQuickJumper: true,
+              showSizeChanger: true,
+              pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
+              defaultPageSize: pageSize || 15,
+            }
+      }
+      editable={{
+        type: 'multiple',
+        editableKeys: props?.rowSelection?.selectedRowKeys ?? [],
+        ...props?.editable,
+      }}
+      search={{
+        filterType: 'light', //轻量模式
+      }}
+    />
+  );
+};
+
+export default memo(EditTable);

src/components/InitForm/EditorItem/index.jsx

+/* eslint-disable react-hooks/exhaustive-deps */
+import 'braft-editor/dist/index.css';
+import BraftEditor from 'braft-editor';
+import React, { useState, useMemo, useEffect } from 'react';
+import dayjs from 'dayjs';
+
+const prefix = import.meta.env.VITE_APP_URL;
+
+export default function EditorItem({
+  value,
+  onChange,
+  height,
+  serverURL,
+  style,
+  bordered,
+  formRef,
+  curkey,
+}) {
+  let UploadFn = (param) => {
+    const xhr = new XMLHttpRequest();
+    const fd = new FormData();
+    const successFn = (response) => {
+      // 假设服务端直接返回文件上传后的地址
+      // 上传成功后调用param.success并传入上传后的文件地址
+      param.success({
+        url: xhr.responseText ? JSON.parse(xhr.responseText).data?.dataList[0].url : null,
+        meta: {
+          id: dayjs().valueOf(),
+          title: param.file.name,
+          alt: param.file.name,
+          loop: true, // 指定音视频是否循环播放
+          autoPlay: true, // 指定音视频是否自动播放
+          controls: true, // 指定音视频是否显示控制栏
+          poster: 'http://xxx/xx.png', // 指定视频播放器的封面
+        },
+      });
+    };
+    const progressFn = (event) => {
+      // 上传进度发生变化时调用param.progress
+      param.progress((event.loaded / event.total) * 100);
+    };
+    const errorFn = (response) => {
+      // 上传发生错误时调用param.error
+      param.error({
+        msg: '上传失败',
+      });
+    };
+    xhr.upload.addEventListener('progress', progressFn, false);
+    xhr.addEventListener('load', successFn, false);
+    xhr.addEventListener('error', errorFn, false);
+    xhr.addEventListener('abort', errorFn, false);
+    fd.append('file', param.file);
+    xhr.open(
+      'POST',
+      serverURL
+        ? serverURL
+        : prefix + '/file/upload',
+      true,
+    );
+    xhr.send(fd);
+  };
+
+  return (
+    <div
+      style={{
+        ...style,
+        border: bordered === false ? '#f9f9f9 solid 1px' : '#ddd solid 1px',
+        height: height ? height : 400,
+        overflow: 'hidden',
+        borderRadius:8,
+        backgroundColor:"#fff"
+      }}
+    >
+      <BraftEditor
+        media={{ uploadFn: UploadFn }}
+        value={BraftEditor.createEditorState(value)}
+        onChange={onChange}
+      />
+    </div>
+  );
+}

src/components/InitForm/index.less

+.title {
+  position: relative;
+  width: 100%;
+  margin-bottom: 8px;
+  padding-left: 16px;
+  color: #000000;
+  font-weight: bolder;
+  font-size: 16px;
+  &::before {
+    position: absolute;
+    top: 4px;
+    left: 7px;
+    width: 3px;
+    height: 16px;
+    background-color: #13c2c2;
+    border-radius: 4px;
+    content: '';
+  }
+  &::after {
+    position: absolute;
+    top: 14px;
+    right: 0px;
+    width: calc(100% - 160px);
+    height: 1px;
+    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    content: '';
+  }
+}

src/pages/home/index.jsx

-import React, { useState, useEffect } from "react";
+import React from 'react';
 
-function Home() {
-  return <span> home </span>;
+class Home extends React.Component {
+  handleClick = (e) => {
+    if (e.target.tagName === 'IMG') {
+      console.log('Image clicked!', e.target.src);
+    }
+  }
+
+  render() {
+    return (
+      <div onClick={this.handleClick}>
+        <img src="image1.jpg" alt="Image 1" />
+        <img src="image2.jpg" alt="Image 2" />
+        <img src="image3.jpg" alt="Image 3" />
+      </div>
+    );
+  }
 }
 
 export default Home;

src/pages/organization/index.jsx

 import React, { useState, useEffect } from "react";
 import AutoTable from "@/components/AutoTable";
+import InitForm from "@/components/InitForm";
 import { Container, Box, Typography } from "@mui/material";
+import DraggableDialog from "@/components/DraggableDialog";
 
 function Organization() {
   return (
     <Container maxWidth="xxl">
       <Box sx={{ mb: 3 }} mt={0}>
-        <Typography variant="h5">
-          组织管理
-        </Typography>
+        <Typography variant="h5">组织管理</Typography>
       </Box>
-
+      <DraggableDialog
+      >
+        <InitForm
+          fields={[
+            {
+              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: "操作" },
+          ]}
+        ></InitForm>
+      </DraggableDialog>
       <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
         <AutoTable
           columns={[

vite.config.js

@@ -48,4 +48,10 @@ export default defineConfig({
       ],
     },
   },
+  define: {
+    global: {
+    },
+    getSelection:{}
+
+  },
 });