Skip to content

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

feat：tab component

parent e8146cce
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 20 deletions
src/assets/project/workbenchList.svg 0 → 100644
View file @ 37960029
<?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 @ 37960029
<?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 @ 37960029
<?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 @ 37960029
<?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/Tabs.tsx
View file @ 37960029
......@@ -8,25 +8,47 @@
*/
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;
// 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 +58,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/views/Project/ProjectSetting/index.tsx
View file @ 37960029
......@@ -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 @ 37960029
......@@ -18,14 +18,19 @@ 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"
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 +39,20 @@ 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
},
];
}, []);
const changeTabs = (val: string) => {
setValue(val);
};
return (
<div style={{ padding: 24 }}>
......@@ -56,7 +63,7 @@ const ProjectWorkbench = observer(() => {
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs value={value} onChange={changeTabs} tabList={tabList} />
<Tabs tabList={tabList} />
</Box>
</div>
);
......
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