Skip to content

B
bkunyun
Commit 9cec3b3e authored by rocosen's avatar rocosen
Browse files
Options

Merge branch 'feat-permissions' into 'release' 

Feat permissions

See merge request !52
parents 7221f132 73d75f33
Show whitespace changes
Inline Side-by-side
Showing with 749 additions and 72 deletions
package.json
View file @ 9cec3b3e
......@@ -6,7 +6,7 @@
"homepage": "/v3/",
"dependencies": {
"@babel/core": "^7.16.0",
"@emotion/react": "^11.9.0",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.84",
......@@ -77,14 +77,15 @@
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"tss-react": "^3.7.0",
"tus-js-client": "2.1.1",
"typescript": "^4.6.4",
"use-immer": "^0.7.0",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1",
"tus-js-client": "2.1.1"
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start:master": "set \"REACT_APP_ENV=master\" && npm start",
......
src/assets/project/workbenchList.svg 0 → 100644
View file @ 9cec3b3e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/任务列表</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="工作台（管理员）空" transform="translate(-370.000000, -245.000000)">
<g id="编组-5" transform="translate(370.000000, 242.000000)">
<g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g filter="url(#filter-1)" id="编组-4">
<g transform="translate(0.500000, 0.000000)">
<path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
<polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
<line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/workbenchList_select.svg 0 → 100644
View file @ 9cec3b3e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/任务列表</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="任务列表" transform="translate(-370.000000, -245.000000)">
<g id="编组-5" transform="translate(370.000000, 242.000000)">
<g id="1.Base基础/Icon图标/任务列表" transform="translate(0.000000, 3.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g filter="url(#filter-1)" id="编组-4">
<g transform="translate(0.500000, 0.000000)">
<path d="M7.38809691,0.889939751 C7.45764437,0.855744844 7.53911808,0.85573765 7.60867158,0.889920274 L7.60867158,0.889920274 L14.1102244,4.08516037 C14.1529938,4.10617975 14.187927,4.13844408 14.2121677,4.17736742 C14.2364085,4.21629077 14.2499569,4.26187312 14.2499569,4.30952854 L14.2499569,4.30952854 L14.2499569,11.9840447 C14.2499569,12.0332683 14.2355127,12.0802004 14.2098426,12.119868 C14.1841726,12.1595356 14.1472766,12.1919385 14.1023731,12.2121037 L14.1023731,12.2121037 L7.60081331,15.1318104 C7.53565621,15.161071 7.46109499,15.1610648 7.39594277,15.1317934 L7.39594277,15.1317934 L0.897545722,12.2122049 C0.852652465,12.1920353 0.815766035,12.1596329 0.790102919,12.1199688 C0.764439802,12.0803047 0.75,12.033379 0.75,11.984163 L0.75,11.984163 L0.75,4.30940599 C0.75,4.26175853 0.763543923,4.21618307 0.78777749,4.17726362 L0.78777749,4.17726362 Z" id="路径-15" stroke="#979797" stroke-width="1.5"></path>
<polyline id="路径-20" stroke="#979797" stroke-width="1.5" points="1.29720478 4.56847209 7.47016174 7.45 13.6431187 4.56847209"></polyline>
<line x1="7.47016174" y1="7.39513959" x2="7.47016174" y2="14.8580198" id="路径-21" stroke="#979797" stroke-width="1.5"></line>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/workbenchTemplate.svg 0 → 100644
View file @ 9cec3b3e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/工作流模版</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.760000 0 0 0 0 0.776000 0 0 0 0 0.800000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="任务列表" transform="translate(-245.000000, -246.000000)">
<g id="编组-4" transform="translate(244.000000, 242.000000)">
<g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
<g>
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
<rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份-3" x="8.5" y="8.5" width="4.75" height="4.75" rx="1"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/workbenchTemplate_select.svg 0 → 100644
View file @ 9cec3b3e
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/工作流模版</title>
<defs>
<filter color-interpolation-filters="auto" id="filter-1">
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0.076000 0 0 0 0 0.440000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
</filter>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="工作台（管理员）空" transform="translate(-245.000000, -246.000000)">
<g id="编组-4" transform="translate(244.000000, 242.000000)">
<g id="编组-5" transform="translate(0.000000, 3.000000)" filter="url(#filter-1)">
<g>
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)" stroke="#979797" stroke-width="1.5">
<rect id="矩形" x="0.75" y="0.75" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份-2" x="0.75" y="8.5" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份" x="8.5" y="0.75" width="4.75" height="4.75" rx="1"></rect>
<rect id="矩形备份-3" x="8.5" y="8.5" width="4.75" height="4.75" rx="1"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/mui/Button.tsx
View file @ 9cec3b3e
import React, { FC } from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
import { makeStyles } from "@mui/styles";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import cx from "classnames"
type ButtonTagProps = {
text: string;
variant?: "text" | 'contained' | 'outlined';
click: any;
click?: any;
select?: any[];
fontSize?: string;
dropValue?: boolean;
drop?: boolean;
color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined,
color?: "inherit" | "primary" | "secondary" | undefined,
btnStyle?: any,
size?: "large" | "medium" | "small",
disabled?: boolean,
style?: any,
img?: JSX.Element;
selectCallBack?: (item: any, key: number) => void
}
const useStyles = makeStyles({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#ffffff !important" } },
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
const ButtonComponent = (props: ButtonTagProps) => {
const classes = useStyles();
const { size, disabled, variant, color, img, btnStyle = {},select, selectCallBack } = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
const handleCloseOption = (item: any, key: number) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key)
}
const handleClose = () => setAnchorEl(null);
return (
<>
<Button
variant={props.variant || 'contained'}
color={props.color || "primary"}
size={size || "medium"}
variant={variant || 'contained'}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
root: classes.root,
}}
sx={{ color: "#565C66" }}//暂定
root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{ ...props.style }}
onClick={props.select ? handleClick : (props.click || defultClick)}
>
{img || ''}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
{
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
......@@ -58,38 +73,46 @@ const ButtonComponent = (props: ButtonTagProps) => {
}
</Button>
<Menu
id="product-menu"
keepMounted
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "product-button",
}}
>
{
props.select && props.select.length > 0 && props.select.map((item, key) => {
select && select.length > 0 && select.map((item, key) => {
return (
<MenuItem
key={item.path}
onClick={() => {
// navigate(item.path);
handleClose();
}}
>
{item.name}
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
{item.name || ""}
</MenuItem>
);
})}
)
})
}
</Menu>
</>
)
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
);
}
export default ButtonComponent;
\ No newline at end of file
src/components/mui/Input.tsx 0 → 100644
View file @ 9cec3b3e
import React, { FC } from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
import { TextField } from '@mui/material';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
type selectData = {
json: any[]
native?: boolean
}
type resizeBysData = 'outlinedLarge' | 'outlined' | 'outlinedSmall' | 'outlinedXsmall' | 'MuiOutlinedInputInputLarge' | 'MuiOutlinedInputInput' | 'MuiOutlinedInputInputSmall' | 'MuiOutlinedInputInputXsmall'
// type b = 'selectPropsLarge' | 'selectPropsSmall' | 'selectPropsXsmall'
type TextFieldProps = {
label?: string
autoFocus?: boolean
type?: string
defaultValue?: string
placeholder?: string
variant?: "outlined" | "standard" | "filled" | undefined
select?: selectData
disabled?: boolean
onChange?: () => void;
onBlur?: () => void;
error?: boolean
helperText?: string
fullWidth?: boolean
rows?: number
multiline?: boolean
required?: boolean
onkeydown?: () => void;
margin?: "none" | "dense" | undefined
size?: string
selectSize?: string
selectStyle?: any
startAdornment?: JSX.Element;
endAdornment?: JSX.Element;
disabledClass?: any
textAlign?: 'right' | 'center' | 'left'
customClass?: any
value?: any
onFocus?: () => void;
}
const InputComponent = (props: TextFieldProps) => {
const { label, autoFocus, type, defaultValue, placeholder, variant, select, disabled, onChange, onBlur, error, helperText,
fullWidth, rows, multiline, required, onkeydown, margin, size, selectSize, selectStyle, startAdornment, endAdornment,
disabledClass, textAlign, customClass, value, onFocus
} = props;
const { classes, cx } = useStyles({});
const onChangeDefault = () => { }
const resizeBys = (sty: string) => {
switch (size) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const reSelectSizeBys = (sty: string) => {
switch (selectSize) {
case "large":
return sty + "Large";
case "small":
return sty + "Small";
case "xsmall":
return sty + "Xsmall";
default:
return sty;
}
}
const onBlurDefault = () => {
}
const onFocusDefault = () => { }
if (![undefined, null].includes(value)) {
return (
<TextField
label={label || ""}
autoFocus={autoFocus || false}
type={type || "text"}
value={value || ""}
placeholder={placeholder || ""}
variant={variant || "outlined"}
select={select ? true : false}
disabled={disabled || false}
onChange={onChange || onChangeDefault}
onBlur={onBlur || onBlurDefault}
error={error || false}
helperText={helperText || ""}
fullWidth={fullWidth || false}
onFocus={onFocus || onFocusDefault}
rows={rows || 1}
multiline={multiline || false}
required={required || false}
InputProps={{
margin: margin || "none",
classes: {
root: classes.root,
input: cx({
[classes[resizeBys("MuiOutlinedInputInput") as resizeBysData]]: true,
...(textAlign ? { [classes[`SelectProps${textAlign}`]]: textAlign } : {}),
[customClass]: customClass
}),
// notchedOutline: classes.notchedOutline,
error: classes.error,
disabled: disabledClass || classes.disabled,
// adornedEnd: classes.adornedEnd
},
startAdornment: startAdornment || "",
endAdornment: endAdornment || ""
}}
InputLabelProps={{
classes: {
root: classes[resizeBys("outlined") as resizeBysData],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
error: classes.errorFormHelperTextProps
}
}}
SelectProps={{
native: (select && select.native) || false,
classes: {
outlined: textAlign ? classes[`SelectProps${textAlign}`] : classes['SelectPropsleft'],
// selectMenu: classes[reSelectSizeBys("selectProps") as b]
}
}}
>
{
select && select.json && select.json.length > 0 && select.json.map((option: any, key) => {
return (
<MenuItem key={key} disabled={option.disabled || false} value={option.value} className={selectStyle || classes.defaultSelectStyle}>
{option.label}
</MenuItem>
)
})
}
</TextField>
)
}
return (
<TextField
label={label || ""}
autoFocus={autoFocus || false}
type={type || "text"}
defaultValue={defaultValue || ""}
placeholder={placeholder || ""}
variant={variant || "outlined"}
select={select ? true : false}
disabled={disabled || false}
onChange={onChange || onChangeDefault}
onBlur={onBlur || onBlurDefault}
error={error || false}
helperText={helperText || ""}
fullWidth={fullWidth || false}
rows={rows || 1}
multiline={multiline || false}
required={required || false}
onKeyDown={onkeydown || (() => { })}
InputProps={{
margin: margin || "none",
classes: {
root: classes.root,
input: cx({
[classes[resizeBys("MuiOutlinedInputInput") as resizeBysData]]: true,
...(textAlign ? { [classes[`SelectProps${textAlign}`]]: textAlign } : {}),
[customClass]: customClass
}),
// notchedOutline: classes.notchedOutline,
error: classes.error,
disabled: disabledClass || classes.disabled,
// adornedEnd: classes.adornedEnd
},
startAdornment: startAdornment || "",
endAdornment: endAdornment || ""
}}
InputLabelProps={{
classes: {
root: classes[resizeBys("outlined") as resizeBysData],
error: classes.errorLabel
}
}}
FormHelperTextProps={{
classes: {
error: classes.errorFormHelperTextProps
}
}}
SelectProps={{
native: (select && select.native) || false,
classes: {
outlined: textAlign ? classes[`SelectProps${textAlign}`] : classes['SelectPropsleft'],
}
}}
>
{
select && select.json && select.json.length > 0 && select.json.map((option: any, key) => {
return (
<MenuItem key={key} disabled={option.disabled || false} value={option.value} className={selectStyle || classes.defaultSelectStyle}>
{option.label}
</MenuItem>
)
})
}
</TextField>
)
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
MuiOutlinedInputInputLarge: { padding: "13.5px 15px !important", MozAppearance: 'textfield' },
MuiOutlinedInputInput: { padding: "12px 15px !important", "&::placeholder": { fontSize: "14px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputSmall: { padding: "10px 15px !important", "&::placeholder": { fontSize: "13px" }, MozAppearance: 'textfield' },
MuiOutlinedInputInputXsmall: { padding: "8px 15px !important", "&::placeholder": { fontSize: "12px" }, MozAppearance: 'textfield' },
outlinedLarge: { transform: "translate(14px, 15.5px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlined: { transform: "translate(14px, 14px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlinedSmall: { transform: "translate(14px, 11px) scale(1) ", fontSize: '14px !important', fontWeight: '400 !important', color: '#707070 !important' },
outlinedXsmall: { transform: "translate(12px, 11px) scale(1) ", fontSize: '13px !important', fontWeight: '400 !important', color: '#707070 !important' },
notchedOutline: { borderColor: "rgba(216, 216, 216, 1)" },
root: {
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(19, 110, 250, 0.9)" }
},
},
error: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#D62C1F !important"
},
},
disabled: {
color: "#E3E3E3 !important",
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" },
"&:hover": {
"& .MuiOutlinedInput-notchedOutline": { borderColor: "#E3E3E3 !important" }
},
},
errorLabel: { color: "#D62C1F !important" },
errorFormHelperTextProps: { color: "#D62C1F !important", fontSize: "12px", lineHeight: '14px' },
SelectPropsright: { textAlign: "right" },
SelectPropscenter: { textAlign: "center" },
SelectPropsleft: { textAlign: "left" },
selectProp: { fontSize: "14px" },
selectPropsLarge: { fontSize: "14px" },
selectPropsSmall: { fontSize: "13px" },
selectPropsXsmall: { fontSize: "12px" },
adornedEnd: { paddingRight: "8px" },
defaultSelectStyle: { fontSize: "14px" }
})
);
export default InputComponent;
\ No newline at end of file
src/components/mui/Tabs.tsx
View file @ 9cec3b3e
......@@ -8,25 +8,45 @@
*/
import { memo } from "react";
import { isEqual } from "lodash";
import { useState, useMemo, useEffect } from "react";
import { Box } from "@mui/system";
import Tab from "@mui/material/Tab";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Typography } from '@mui/material';
interface ITabList {
label: string;
value: string;
component: JSX.Element;
icon?: string;
iconed?: string;
hide?: boolean
}
interface IProps {
value: string;
onChange: (val: string) => void;
tabList: ITabList[];
}
const Tabs = (props: IProps) => {
const { value, onChange, tabList } = props;
const { tabList } = props;
const [value, setValue] = useState(tabList.filter(e => !e.hide)[0].value);
const onChange = (val: string) => {
setValue(val);
};
const labelRender = (item: ITabList, key: number) => {
return (
<Box style={{ display: "flex", alignItems: "center" }}>
{
item.icon ? <img style={{ width: "14px", marginRight: "10px" }} src={value === item.value ? item.iconed : item.icon} alt="" />
: ""
}
<Typography sx={{ fontSize: "14px", fontWeight: '400' }} >{item.label}</Typography>
</Box>
)
}
return (
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
......@@ -36,9 +56,15 @@ const Tabs = (props: IProps) => {
}}
aria-label="lab API tabs example"
>
{tabList?.map((item) => {
{tabList?.map((item, key) => {
if (item.hide) return ""
return (
<Tab label={item.label} value={item.value} key={item.value} />
<Tab
key={key}
label={labelRender(item, key)}
value={item.value}
id={item.value}
/>
);
})}
</TabList>
......
src/index.tsx
View file @ 9cec3b3e
......@@ -20,7 +20,7 @@ const theme = createTheme({
},
palette: {
primary: { main: '#136EFA' },
secondary: { main: '#4EB9FB' }
secondary: { main: '#F44335' }
}
});
......
src/views/ConsoleLayout/index.tsx
View file @ 9cec3b3e
......@@ -45,6 +45,7 @@ const ConsoleLayout = observer(() => {
<Button
text={globalText.console}
variant={"text"}
style={{ color: "#565C66" }}
click={() => navigate("/home")}
/>
......@@ -52,6 +53,7 @@ const ConsoleLayout = observer(() => {
<Button
text={globalText.product}
variant={"text"}
style={{ color: "#565C66" }}
click={handleProductClick}
dropValue={productOpen}
drop={true}
......
src/views/Project/ProjectSetting/index.tsx
View file @ 9cec3b3e
......@@ -19,8 +19,6 @@ import Tabs from "@/components/mui/Tabs";
const ProjectSetting = observer(() => {
const { currentProjectStore } = useStores();
const [value, setValue] = useState("projectMember");
const tabList = useMemo(() => {
return [
{
......@@ -36,10 +34,6 @@ const ProjectSetting = observer(() => {
];
}, []);
const changeTabs = (val: string) => {
setValue(val);
};
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: 24 }}>
......@@ -50,7 +44,7 @@ const ProjectSetting = observer(() => {
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs value={value} onChange={changeTabs} tabList={tabList} />
<Tabs tabList={tabList} />
</Box>
</div>
);
......
src/views/Project/ProjectWorkbench/index.tsx
View file @ 9cec3b3e
......@@ -18,14 +18,24 @@ import WorkbenchList from "./workbenchList";
import Tabs from "@/components/mui/Tabs";
import usePass from "@/hooks/usePass";
import Template from "@/assets/project/workbenchTemplate.svg"
import Template_select from "@/assets/project/workbenchTemplate_select.svg"
import List from "@/assets/project/workbenchList.svg"
import List_select from "@/assets/project/workbenchList_select.svg"
//ui
import ButtonDemo from "@/views/mui_demo/button"
import InputDemo from "@/views/mui_demo/input"
const ProjectWorkbench = observer(() => {
const { currentProjectStore } = useStores();
const isPass = usePass();
const [value, setValue] = useState("workbenchTemplate");
useEffect(() => {
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE",'USER'), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER'), "11111111111");
console.log(isPass("PROJECT_WORKBENCH_FLOES"),'wwwwwwwwwww')
}, [])
const tabList = useMemo(() => {
......@@ -34,18 +44,34 @@ const ProjectWorkbench = observer(() => {
label: "工作流模版",
value: "workbenchTemplate",
component: <WorkbenchTemplate />,
hide: !isPass("PROJECT_WORKBENCH_FLOES"),
icon: Template,
iconed: Template_select
},
{
label: "任务列表",
value: "workbenchList",
component: <WorkbenchList />,
icon: List,
iconed: List_select
},
{
label: "按钮组件",
value: "MUI_BUTTON",
component: <ButtonDemo />,
icon: List,
iconed: List_select
},
{
label: "输入框组件",
value: "MUI_INPUT",
component: <InputDemo />,
icon: List,
iconed: List_select
},
];
}, []);
const changeTabs = (val: string) => {
setValue(val);
};
return (
<div style={{ padding: 24 }}>
......@@ -56,7 +82,7 @@ const ProjectWorkbench = observer(() => {
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs value={value} onChange={changeTabs} tabList={tabList} />
<Tabs tabList={tabList} />
</Box>
</div>
);
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx
View file @ 9cec3b3e
......@@ -8,6 +8,7 @@ import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import Checkbox from '@mui/material/Checkbox';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import noData from '../../../../../assets/project/noTemplate.svg'
import _ from "lodash";
const AddTemplate = (props: any) => {
......@@ -45,6 +46,16 @@ const AddTemplate = (props: any) => {
</Button>
</Box>
{
addTemplateList.length === 0 && <Box sx={{
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
justifyContent: 'center'
}}>
<img alt="" src={noData} />
<Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未相关模版</Typography>
</Box>
}
<Box sx={{ display: "flex", flexWrap: 'wrap', overflowX: 'hidden', overflowY: 'overlay', marginLeft: '-8px' }} >
{
addTemplateList.map((item: any, key: any) => {
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 9cec3b3e
......@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { memo, SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
import { Box, Typography } from "@mui/material";
import styles from "./index.module.css";
import OutlinedInput from "@mui/material/OutlinedInput";
......@@ -29,9 +29,13 @@ import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import usePass from "@/hooks/usePass";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
const ProjectMembers = () => {
const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores();
const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
const isPass = usePass();
/** 搜索模板名称 */
......@@ -92,6 +96,12 @@ const ProjectMembers = () => {
});
}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
useEffect(() => {
console.log('projectIdData: ', projectIdData);
}, [projectIdData])
/** 点击添加工作流模版 */
const onAddMember = () => {
// setAddMemberDialog(true);
......@@ -159,11 +169,17 @@ const ProjectMembers = () => {
}
const searchChange = (data: any) => {
setTemplateName(data.length > 30 ? data.slice(0, 30) : data);
}
useEffect(() => {
setTimeout(() => {
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
title: templateName
});
}, 300)
}, [templateName]);
return (
......@@ -172,10 +188,9 @@ const ProjectMembers = () => {
<Box className={styles.tabBox} >
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
setTemplateName(e.target.value);
}, 200)();
searchChange(e.target.value)
}}
value={templateName}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32 }}
......@@ -197,7 +212,7 @@ const ProjectMembers = () => {
</Box>
{
templateList.length === 0 && !isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') &&
templateList.length === 0 && templateName.length > 0 &&
<Box sx={{
display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
justifyContent: 'center'
......@@ -216,7 +231,7 @@ const ProjectMembers = () => {
</Box>
}
{
templateList.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
templateList.length === 0 && templateName.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
onClick={addTemplateBlock}
>
<Add sx={{ color: "#565C66", fontSize: "20px", width: "30px", height: '30px' }} />
......@@ -244,6 +259,6 @@ const ProjectMembers = () => {
</Box>
);
};
});
export default memo(ProjectMembers);
src/views/mui_demo/button.tsx 0 → 100644
View file @ 9cec3b3e
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import Button from "@/components/mui/Button";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<Button size={"large"} text={'确定'} />
&nbsp;&nbsp;
<Button text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} />
<br /><br />
<Button size={"large"} text={'确定'} disabled />
&nbsp;&nbsp;
<Button text={'确定'} disabled />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} disabled />
<br /><br />
<Button size={"large"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
outlined
<br />
<Button size={"large"} variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} disabled text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
text
<br />
<Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br /> <br />
img
<br />
<Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
<br /> <br />
select
<br />
<Button
text={'更多'}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
<Button
text={'更多'}
color={"secondary"} variant={"text"}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
</>
);
};
export default memo(ProjectMembers);
src/views/mui_demo/input.tsx 0 → 100644
View file @ 9cec3b3e
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { InputAdornment } from '@mui/material';
import InputComponent from "@/components/mui/Input";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<InputComponent
fullWidth={false}
label={"test"}
defaultValue={"sssssssss"}
size={'large'}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
error={true}
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
size={'small'}
disabled
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"xsmall"}
size={'xsmall'}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
placeholder={"测试机哦"}
endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} />
<br /> <br />
<InputComponent
fullWidth={true}
select={
{
json: [{value:'1',label:"2"},{value:'3',label:"4"}]
}
}
/>
<br /><br />
{/* <SelectComponent
option={json}
/>
<br /><br />
<SelectComponent
option={json}
size={"large"}
/>
<br /><br />
<SelectComponent
option={json}
size={"small"}
/> */}
<br /><br />
</>
);
};
export default memo(ProjectMembers);
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