Skip to content

C
cs_vsofpm
Commit 8c144095 authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent 76866941
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2498 additions and 390 deletions
src/App.less
View file @ 8c144095
...@@ -28,12 +28,21 @@ ...@@ -28,12 +28,21 @@
} }
.anticon { .anticon {
font-size: 16px !important; font-size: 14px !important;
color: #637381 !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; border-radius: 12px !important;
} }
.ant-pro-card-body { .ant-pro-card-body {
padding-inline: 0 !important; padding-inline: 0 !important;
} }
......
src/components/DraggableDialog/index.jsx 0 → 100644
View file @ 8c144095
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 0 → 100644
View file @ 8c144095
/* 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 0 → 100644
View file @ 8c144095
/* 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/FormItems.jsx 0 → 100644
View file @ 8c144095
This diff is collapsed.
src/components/InitForm/index.jsx
View file @ 8c144095
This diff is collapsed.
src/components/InitForm/index.less 0 → 100644
View file @ 8c144095
.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
View file @ 8c144095
import React, { useState, useEffect } from "react"; import React from 'react';
function Home() { class Home extends React.Component {
return <span> home </span>; 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; export default Home;
src/pages/organization/index.jsx
View file @ 8c144095
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import AutoTable from "@/components/AutoTable"; import AutoTable from "@/components/AutoTable";
import InitForm from "@/components/InitForm";
import { Container, Box, Typography } from "@mui/material"; import { Container, Box, Typography } from "@mui/material";
import DraggableDialog from "@/components/DraggableDialog";
function Organization() { function Organization() {
return ( return (
<Container maxWidth="xxl"> <Container maxWidth="xxl">
<Box sx={{ mb: 3 }} mt={0}> <Box sx={{ mb: 3 }} mt={0}>
<Typography variant="h5"> <Typography variant="h5">组织管理</Typography>
组织管理
</Typography>
</Box> </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}> <Box boxShadow={"0 0 18px #f0f0f0"} borderRadius={2}>
<AutoTable <AutoTable
columns={[ columns={[
......
vite.config.js
View file @ 8c144095
...@@ -48,4 +48,10 @@ export default defineConfig({ ...@@ -48,4 +48,10 @@ export default defineConfig({
], ],
}, },
}, },
define: {
global: {
},
getSelection:{}
},
}); });
yarn.lock
View file @ 8c144095
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment