权限增加

src/hooks/usePass.ts

@@ -2,33 +2,74 @@ import { operation, route } from "@/router";
 import { useStores } from "@/store";
 import { useCallback } from "react";
 
+const roleList: any[] = [
+  { VIEWER: 1 },
+  { USER: 2 },
+  { MANAGER: 3 },
+  { OWNER: 4 }
+]
+
 const usePass = () => {
   const { permissionStore } = useStores();
+  const { currentProjectStore } = useStores();
 
   const isPass = useCallback(
-    (key: string, routes?: Array<route | operation>): boolean => {
-      if (routes) {
-        for (let item of routes) {
-          if (item.id === key) {
-            return true;
-          } else if (
-            item.type === "page" &&
-            item.children?.length &&
-            isPass(key, item.children)
-          ) {
-            return true;
+    (key: string, role?: "VIEWER" | "USER" | "MANAGER" | "OWNER", routes?: Array<route | operation>): boolean => {
+      let code = currentProjectStore && currentProjectStore.currentProjectInfo.projectRole
+      if (role) {
+        if (code && roleList.filter(e => e[role])[0][role] <= roleList.filter(e => e[code as string])[0][code]) {
+          if (routes) {
+            for (let item of routes) {
+              if (item.id === key) {
+                return true;
+              } else if (
+                item.type === "page" &&
+                item.children?.length &&
+                isPass(key, role, item.children)
+              ) {
+                return true;
+              }
+            }
+          } else {
+            for (let item of permissionStore.allRoutes) {
+              if (item.type !== "navigate" && item.id === key) {
+                return true;
+              } else if (
+                item.type === "page" &&
+                item.children?.length &&
+                isPass(key, role, item.children)
+              ) {
+                return true;
+              }
+            }
           }
+        } else {
+          return false
         }
       } else {
-        for (let item of permissionStore.allRoutes) {
-          if (item.type !== "navigate" && item.id === key) {
-            return true;
-          } else if (
-            item.type === "page" &&
-            item.children?.length &&
-            isPass(key, item.children)
-          ) {
-            return true;
+        if (routes) {
+          for (let item of routes) {
+            if (item.id === key) {
+              return true;
+            } else if (
+              item.type === "page" &&
+              item.children?.length &&
+              isPass(key, role, item.children)
+            ) {
+              return true;
+            }
+          }
+        } else {
+          for (let item of permissionStore.allRoutes) {
+            if (item.type !== "navigate" && item.id === key) {
+              return true;
+            } else if (
+              item.type === "page" &&
+              item.children?.length &&
+              isPass(key, role, item.children)
+            ) {
+              return true;
+            }
           }
         }
       }

src/index.tsx

@@ -8,19 +8,33 @@ import { stores } from "@/store/index";
 import { MySnackbarProvider } from "@/components/MySnackbar";
 import "@/mocks/index";
 import './assets/style/public.css'
+import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
+const theme = createTheme({
+  typography: {
+    fontFamily: ['Roboto', 'Helvetica', 'Tahoma', 'Arial', '"PingFang SC"', '"Hiragino Sans GB"', '"Heiti SC"', '"WenQuanYi Micro Hei"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+  },
+  palette: {
+    primary: { main: '#136EFA' },
+    secondary: { main: '#4EB9FB' }
+  }
+});
+
 root.render(
   <React.StrictMode>
-    <Provider {...stores}>
-      <MySnackbarProvider
-        alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
-      >
-        <MyRouter></MyRouter>
-      </MySnackbarProvider>
-    </Provider>
+    <ThemeProvider theme={theme}>
+      <Provider {...stores}>
+        <MySnackbarProvider
+          alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
+        >
+          <MyRouter></MyRouter>
+        </MySnackbarProvider>
+      </Provider>
+    </ThemeProvider>
   </React.StrictMode>
 );
 

src/store/modules/currentProject.ts

@@ -3,6 +3,7 @@ type projectInfo = {
   id?: string;
   name?: string;
   desc?: string;
+  projectRole?: string;
 };
 
 type productInfo = {

src/views/Project/ProjectWorkbench/index.tsx

@@ -23,9 +23,9 @@ const ProjectWorkbench = observer(() => {
     const isPass = usePass();
     const [value, setValue] = useState("workbenchTemplate");
 
-
+    
     useEffect(() => {
-        console.log(isPass("PROJECT_WORKBENCH_FLOES"), "11111111111");
+        console.log(isPass("PROJECT_WORKBENCH_FLOES_USE",'USER'), "11111111111");
     }, [])
 
     const tabList = useMemo(() => {

src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx

 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-
-
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@mui/material/Button";
@@ -9,39 +7,22 @@ import Dialog from "@/components/mui/Dialog";
 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 _ from "lodash";
 
-
 const AddTemplate = (props: any) => {
     const { openAddTemplate, closeAddTemplateBlock, addTemplateList, templateSelectCallback, selectTemplateData, addTemplateCallback, searchTemplateNameCallback } = props;
 
-
-    useEffect(() => {
-
-    }, []);
-
-    // if (!openAddTemplate) return ""
     return (
-
         <Box className={styles.addTemplateMask} sx={{ display: openAddTemplate ? 'flex' : 'none' }}  >
-
             <Box sx={{ height: '50px', display: 'flex', alignItems: 'center' }} >
                 <CloseOutlinedIcon sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }} onClick={() => {
                     closeAddTemplateBlock()
                 }} />
             </Box>
-
-
-
-
-
             <Box className={styles.addTemplateBlock}>
-
                 <Box sx={{ padding: "24px 32px" }}>
                     <Typography sx={{ fontSize: '18px', fontWeight: '600', color: "#1E2633" }}>添加工作流模版</Typography>
-
                     <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: "20px" }}>
                         <OutlinedInput
                             onChange={(e: any) => {
@@ -73,53 +54,22 @@ const AddTemplate = (props: any) => {
                                     }}
                                         sx={{ border: selectTemplateData.includes(item.id) ? '1px solid #1370FF' : "1px solid #EBEDF0;" }}
                                     >
-
                                         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
-
-                                            <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px" }}>{item.title}</Typography>
-
+                                            <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px", overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</Typography>
                                             <Checkbox size="small" sx={{ padding: "0px" }} checked={selectTemplateData.includes(item.id)} />
-
-
                                         </Box>
-
-
                                         <Box sx={{ display: 'flex', marginBottom: "8px" }}>
-
                                             <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF', marginRight: "24px" }}>版本：{item.version}</Typography>
-
                                             <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF' }}>更新时间：{item.updateTime}</Typography>
-
                                         </Box>
-
-
-                                        <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>{item.description}</Typography>
-
-
+                                        <Typography className={styles.templateDescText} >{item.description}</Typography>
                                     </Box>
                                 )
                             })
                         }
                     </Box>
-
-
-
-
-
-
-
-
                 </Box>
-
-
-
-                {/*  */}
-
-
             </Box>
-
-
-
         </Box>
     );
 };

src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx

 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-
-
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@mui/material/Button";
 import Dialog from "@/components/mui/Dialog";
 
-
-
-
 const SimpleDialog = (props: any) => {
     const { openDialog, closeDialog, onConfirm, text, title } = props;
 
-
-    useEffect(() => {
-
-    }, []);
-
-
     return (
-
         < >
-
             <Dialog
                 open={openDialog}
                 onClose={closeDialog}
@@ -33,10 +20,6 @@ const SimpleDialog = (props: any) => {
                     <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
                 </Box>
             </Dialog>
-
-
-
-
         </>
     );
 };

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

 
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-
-
 import styles from "../index.module.css";
 import { Box, Typography } from "@mui/material";
 import Button from "@mui/material/Button";
-
-
-
+import usePass from "@/hooks/usePass";
 
 const TemplateBox = (props: any) => {
-
-    // const     deleteTemplate            props
-
     const info = props.data
-
-
-    useEffect(() => {
-
-    }, []);
-
+    const isPass = usePass();
 
     return (
-
         <Box className={styles.templateBlock} >
-
-
             <Box>
-                <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px" }}>{info.title}</Typography>
-
+                <Typography sx={{ fontSize: '14px', fontWeight: '600', color: '#1E2633', marginBottom: "4px", overflow: 'hidden', textOverflow: 'ellipsis' }}>{info.title}</Typography>
                 <Box sx={{ display: 'flex', marginBottom: "8px" }}  >
-
                     <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF', marginRight: "24px" }}>版本：{info.version}</Typography>
-
                     <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#1370FF' }}>更新时间：{info.updateTime}</Typography>
-
                 </Box>
-
-
-                <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>{info.description}</Typography>
+                <Typography className={styles.templateDescText} >{info.description}</Typography>
             </Box>
-
-
-
             <Box sx={{
                 display: 'flex', justifyContent: 'end'
             }} >
-                <Button
-                    style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
-                    variant="contained"
-                    onClick={() => { props.startDialog(info.id) }}
-                    size="small"
-                >
-                    删除模版
-                </Button>
-
-                <Button
-                    style={{ backgroundColor: "#1370FF", marginLeft: "12px" }}
-                    variant="contained"
-                    // onClick={addTemplateBlock}
-                    size="small"
-                >
-                    使用模版
-                </Button>
+                {
+                    isPass("PROJECT_WORKBENCH_FLOES_USE", 'MANAGER') && <Button
+                        style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
+                        variant="contained"
+                        onClick={() => { props.startDialog(info.id) }}
+                        size="small"
+                    >
+                        删除模版
+                    </Button>
+                }
+                {
+                    isPass("PROJECT_WORKBENCH_FLOES_USE", 'USER') && <Button
+                        style={{ backgroundColor: "#1370FF", marginLeft: "12px" }}
+                        variant="contained"
+                        // onClick={addTemplateBlock}
+                        size="small"
+                    >
+                        使用模版
+                    </Button>
+                }
             </Box>
-
-
-
-
         </Box>
     );
 };

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -66,4 +66,29 @@
 
 .addTemplateBox:hover {
   box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
+}
+
+.templateDescText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  height: 54px;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  color: #8A9099 !important;
+}
+
+.addNewTemplate {
+  width: 380px;
+  height: 194px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  border: 1px solid #EBEDF0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
 }
\ No newline at end of file

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -13,34 +13,26 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
 // import Button from "@/components/mui/Button";
 import Button from "@mui/material/Button";
-
 import Add from "@mui/icons-material/Add";
 import useMyRequest from "@/hooks/useMyRequest";
-
 import TemplateBox from "./components/templateBox"
 import SimpleDialog from "./components/simpleDialog"
 import AddTemplate from "./components/addTemplate"
-
-
-
 import noData from '../../../../assets/project/noTemplate.svg'
-
 import {
     getWorkbenchTemplate,
     deleteWorkbenchTemplate,
     getAddWorkbenchTemplate,
     addWorkbenchTemplate
 } from "@/api/workbench_api";
-
 import _ from "lodash";
 import { IResponse, useHttp } from "@/api/http";
 import { useStores } from "@/store";
+import usePass from "@/hooks/usePass";
 
 const ProjectMembers = () => {
-
     const { currentProjectStore } = useStores();
-
-
+    const isPass = usePass();
 
     /** 搜索模板名称 */
     const [templateName, setTemplateName] = useState("");
@@ -57,8 +49,6 @@ const ProjectMembers = () => {
     /** 已选择增加的模板列表 */
     const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
 
-
-
     // 获取模板列表
     const { run: getTemplateInfo } = useMyRequest(getWorkbenchTemplate, {
         onSuccess: (result: any) => {
@@ -96,18 +86,12 @@ const ProjectMembers = () => {
         },
     });
 
-
-
     useEffect(() => {
         getTemplateInfo({
             projectId: currentProjectStore.currentProjectInfo.id as string,
         });
     }, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
 
-
-
-
-
     /** 点击添加工作流模版 */
     const onAddMember = () => {
         // setAddMemberDialog(true);
@@ -175,7 +159,6 @@ const ProjectMembers = () => {
 
     }
 
-
     useEffect(() => {
         getTemplateInfo({
             projectId: currentProjectStore.currentProjectInfo.id as string,
@@ -183,7 +166,6 @@ const ProjectMembers = () => {
         });
     }, [templateName]);
 
-
     return (
         <Box className={styles.headerBox}>
 
@@ -200,20 +182,22 @@ const ProjectMembers = () => {
                     endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
                 />
 
-                <Button
-                    style={{ backgroundColor: "#1370FF " }}
-                    variant="contained"
-                    onClick={addTemplateBlock}
-                    startIcon={<Add />}
-                    size="small"
-                >
-                    添加工作流模版
-                </Button>
+                {
+                    templateList.length > 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Button
+                        style={{ backgroundColor: "#1370FF " }}
+                        variant="contained"
+                        onClick={addTemplateBlock}
+                        startIcon={<Add />}
+                        size="small"
+                    >
+                        添加工作流模版
+                    </Button>
+                }
 
             </Box>
 
             {
-                templateList.length === 0 &&
+                templateList.length === 0 && !isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') &&
                 <Box sx={{
                     display: 'flex', alignItems: 'center', flexDirection: 'column', minHeight: 'calc(100vh - 376px)',
                     justifyContent: 'center'
@@ -222,15 +206,23 @@ const ProjectMembers = () => {
                     <Typography sx={{ fontSize: '12px', fontWeight: '400', color: '#8A9099' }}>暂未开启模版</Typography>
                 </Box>
             }
-
-            <Box sx={{ display: "flex", flexWrap: 'wrap', marginLeft: "-8px" }} >
-                {
-                    templateList && templateList.length > 0 && templateList.map((item, key) => {
-                        return <TemplateBox data={item} startDialog={startDialog} />
-                    })
-                }
-            </Box>
-
+            {
+                templateList.length > 0 && <Box sx={{ display: "flex", flexWrap: 'wrap', marginLeft: "-8px" }} >
+                    {
+                        templateList && templateList.length > 0 && templateList.map((item, key) => {
+                            return <TemplateBox data={item} startDialog={startDialog} />
+                        })
+                    }
+                </Box>
+            }
+            {
+                templateList.length === 0 && isPass("PROJECT_WORKBENCH_FLOES_ADD", 'MANAGER') && <Box className={styles.addNewTemplate}
+                    onClick={addTemplateBlock}
+                >
+                    <Add sx={{ color: "#565C66", fontSize: "20px", width: "30px", height: '30px' }} />
+                    <Typography sx={{ fontSize: '14px', fontWeight: '400', color: '#8A9099', marginTop: "15px" }}>添加工作流模版</Typography>
+                </Box>
+            }
 
             <AddTemplate
                 openAddTemplate={openAddTemplate}
@@ -242,7 +234,6 @@ const ProjectMembers = () => {
                 searchTemplateNameCallback={searchTemplateNameCallback}
             />
 
-
             <SimpleDialog
                 text={'确认移除该模板吗？'}
                 title={'删除模板'}