Skip to content

B
bkunyun
Commit d2999545 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 模板卡片样式统一

parent dfc077f7
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 473 deletions
src/components/CommonComponents/CardTable/index.tsx
View file @ d2999545
...@@ -9,6 +9,7 @@ interface ICardTableProps { ...@@ -9,6 +9,7 @@ interface ICardTableProps {
numberOfColumns?: number; // 列数 每行渲染几个 numberOfColumns?: number; // 列数 每行渲染几个
horizontalSpacing?: number; // 水平方向的间隔 horizontalSpacing?: number; // 水平方向的间隔
verticalSpacing?: number; // 垂直方向的间隔 verticalSpacing?: number; // 垂直方向的间隔
renderBefore?: any;
} }
const CardTable = (props: ICardTableProps) => { const CardTable = (props: ICardTableProps) => {
...@@ -20,6 +21,7 @@ const CardTable = (props: ICardTableProps) => { ...@@ -20,6 +21,7 @@ const CardTable = (props: ICardTableProps) => {
horizontalSpacing = 20, horizontalSpacing = 20,
verticalSpacing = 20, verticalSpacing = 20,
itemMinWidth, itemMinWidth,
renderBefore,
} = props; } = props;
const [numberOfColumns, setNumberOfColumns] = useState(3); const [numberOfColumns, setNumberOfColumns] = useState(3);
...@@ -59,6 +61,20 @@ const CardTable = (props: ICardTableProps) => { ...@@ -59,6 +61,20 @@ const CardTable = (props: ICardTableProps) => {
}} }}
ref={tableBoxRef} ref={tableBoxRef}
> >
{renderBefore && (
<div
className={style.itemBox}
style={{
width: boxWidth,
paddingLeft: `${horizontalSpacing / 2}px`,
paddingRight: `${horizontalSpacing / 2}px`,
paddingBottom: `${verticalSpacing}px`,
boxSizing: "border-box",
}}
>
{renderBefore()}
</div>
)}
{data.map((item, index) => { {data.map((item, index) => {
return ( return (
<div <div
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ d2999545
...@@ -20,42 +20,26 @@ ...@@ -20,42 +20,26 @@
overflow: overlay; overflow: overlay;
} }
.templateList { .addTemplate {
/* height: 2000px; */ border: 2px solid #fff;
display: flex; box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);
justify-content: space-between; border-radius: 6px;
flex-wrap: wrap; background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
} height: 208px;
.templateLi {
height: 170px;
box-sizing: border-box; box-sizing: border-box;
padding: 16px 20px; padding: 16px 20px;
/* cursor: pointer; */ transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-width: 20%;
flex: 1;
margin-right: 16px;
margin-bottom: 16px;
transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
}
.templateLiCustom {
height: 170px;
}
.templateLiHidden {
visibility: hidden;
}
.addCustomTemplate {
height: 170px;
box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
height: 208px;
box-sizing: border-box;
cursor: pointer;
}
.addTemplate:hover {
box-shadow: 0px 6px 24px 0px rgb(3 47 105 / 14%);
} }
.addCustomTemplateText { .addCustomTemplateText {
...@@ -65,53 +49,7 @@ ...@@ -65,53 +49,7 @@
color: rgba(138, 144, 153, 1); color: rgba(138, 144, 153, 1);
} }
.templateLi:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
}
.templateLi:nth-child(4n) {
margin-right: 0;
}
.templateLiTop {
display: flex;
justify-content: space-between;
align-items: center;
}
.templateTitle {
font-size: 14px;
font-weight: 600;
color: #1e2633;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
}
.templateLiInfo {
margin-bottom: 8px;
}
.templateLiInfoText {
line-height: 20px;
font-size: 12px;
color: rgba(19, 112, 255, 1);
}
.templateLiDesc {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
height: 54px;
font-size: 12px;
color: rgba(138, 144, 153, 1);
}
.templateLiEditBox { .templateLiEditBox {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
/* margin-top: 16px; */ }
}
\ No newline at end of file
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ d2999545
...@@ -12,6 +12,8 @@ import AddIcon from "@mui/icons-material/Add"; ...@@ -12,6 +12,8 @@ import AddIcon from "@mui/icons-material/Add";
import WorkFlowEdit from "@/views/WorkFlowEdit"; import WorkFlowEdit from "@/views/WorkFlowEdit";
import noData from "../../../../../../assets/project/noTemplate.svg"; import noData from "../../../../../../assets/project/noTemplate.svg";
import { ICustomTemplate } from "../../interface"; import { ICustomTemplate } from "../../interface";
import TemplateItem from "@/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem";
import CardTable from "@/components/CommonComponents/CardTable";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import { import {
getAddWorkbenchTemplate, getAddWorkbenchTemplate,
...@@ -203,16 +205,6 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -203,16 +205,6 @@ const AddTemplate = (props: IAddTemplateProps) => {
} }
}; };
const hiddenBoxArr = useMemo(() => {
const length =
templateType === "public"
? addTemplateList.length
: addTemplateList.length + 1;
const hiddenBoxNumber = 4 - (length % 4);
const arr = new Array(hiddenBoxNumber).fill("");
return arr;
}, [addTemplateList, templateType]);
return ( return (
<FullScreenDrawer handleClose={setShowAddTemplate}> <FullScreenDrawer handleClose={setShowAddTemplate}>
<div className={style.content}> <div className={style.content}>
...@@ -259,19 +251,6 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -259,19 +251,6 @@ const AddTemplate = (props: IAddTemplateProps) => {
radioOptions={radioOptions} radioOptions={radioOptions}
handleRadio={handleRadio} handleRadio={handleRadio}
/> />
{/* <MyButton
onClick={handleAddTemplate}
size={"small"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/> */}
</Box> </Box>
</Box> </Box>
</div> </div>
...@@ -294,90 +273,45 @@ const AddTemplate = (props: IAddTemplateProps) => { ...@@ -294,90 +273,45 @@ const AddTemplate = (props: IAddTemplateProps) => {
</Typography> </Typography>
</Box> </Box>
)} )}
<div className={style.templateList}> <CardTable
{templateType !== "public" && ( data={addTemplateList}
<div renderBefore={() => {
className={classNames({ if (templateType !== "public") {
[style.templateLi]: true,
[style.addCustomTemplate]: true,
})}
onClick={handleAddCustomTemplate}
>
<AddIcon />
<span className={style.addCustomTemplateText}>
创建自定义模板
</span>
</div>
)}
{addTemplateList.map((item: any, index) => {
return (
<div
className={classNames({
[style.templateLi]: true,
[style.templateLiCustom]: templateType !== "public",
})}
key={index}
onClick={() => {
handleSelectTemplate(item.id);
}}
>
<div className={style.templateLiTop}>
<span className={style.templateTitle}>{item.title}</span>
{/* <Checkbox
size="small"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/> */}
</div>
<div className={style.templateLiInfo}>
<span
className={style.templateLiInfoText}
style={{ marginRight: "24px" }}
>
版本：{item.version}
</span>
<span className={style.templateLiInfoText}>
更新时间：{item.updatedTime}
</span>
</div>
<div className={style.templateLiDesc}>{item.description}</div>
<div className={style.templateLiEditBox}>
<MySwitch
defaultChecked={item.favorited}
onChange={(e: any) => templateSwitch(e, item.id)}
></MySwitch>
</div>
{/* {templateType !== "public" && (
<MyButton
onClick={() => handleEditTemplate(item)}
size={"small"}
style={{
height: "32px",
}}
color="inherit"
text="编辑模板"
/>
</div>
)} */}
</div>
);
})}
{hiddenBoxArr.length !== 4 &&
hiddenBoxArr.map((item, index) => {
return ( return (
<div <div
key={`-${index}`}
className={classNames({ className={classNames({
[style.templateLi]: true, [style.addTemplate]: true,
[style.templateLiHidden]: true,
})} })}
/> onClick={handleAddCustomTemplate}
>
<AddIcon />
<span className={style.addCustomTemplateText}>
创建自定义模板
</span>
</div>
); );
})} }
</div> return null;
}}
renderItem={(item: any) => {
return (
<TemplateItem
templateInfo={item}
footer={() => {
return (
<div className={style.templateLiEditBox}>
<MySwitch
defaultChecked={item.favorited}
onChange={(e: any) => templateSwitch(e, item.id)}
></MySwitch>
</div>
);
}}
></TemplateItem>
);
}}
itemMinWidth={377}
></CardTable>
</div> </div>
</div> </div>
{customTemplateInfo?.show ? ( {customTemplateInfo?.show ? (
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx deleted 100644 → 0
View file @ dfc077f7
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-17 14:48:57
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-27 14:02:54
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import MyButton from "@/components/mui/MyButton";
import usePass from "@/hooks/usePass";
import RemindBudgetDialog from "./RemindBudgetDialog";
import { useNavigate } from "react-router-dom";
import { toJS } from "mobx";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
const TemplateBox = observer((props: any) => {
const info = props.data;
const { isParentUser, isOwner, greaterThan100 } = props;
const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品ID
const isPass = usePass();
const navigate = useNavigate();
const [rbOpen, setRbOpen] = useState(false);
const [id, setId] = useState("");
const goToProjectSubmitWork = useCallback(
(id: string) => {
navigate(`/product/${productId || "cadd"}/projectSubmitWork`, {
state: { id },
});
},
[navigate, productId]
);
const handleJudgeBudget = useCallback(
(id: string) => {
setId(id);
if (greaterThan100) {
goToProjectSubmitWork(id);
} else {
setRbOpen(true);
}
},
[goToProjectSubmitWork, setRbOpen, setId, greaterThan100]
);
return (
<>
<Box className={styles.template}>
<Box className={styles.templateBlock}>
<Box>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{info.title}
</Typography>
{info.creator !== "root" && (
<Box
sx={{
backgroundColor: "rgba(227, 250, 236, 1)",
color: "rgba(2, 171, 131, 1)",
lineHeight: "20px",
padding: "1px 9px",
fontSize: "12px",
}}
>
自定义
</Box>
)}
</Box>
<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.updatedTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{info.description ? info.description : "此模板暂无描述。"}
</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "end",
}}
>
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<MyButton
size="medium"
text="移除模版"
onClick={() => {
props.startDialog(info.id);
}}
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
/>
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<MyButton
size="medium"
text="使用模版"
onClick={() => handleJudgeBudget(info.id)}
style={{ marginLeft: "12px" }}
/>
)}
</Box>
</Box>
</Box>
{rbOpen && (
<RemindBudgetDialog
rbOpen={rbOpen}
rbClose={() => setRbOpen(false)}
id={id}
goToProjectSubmitWork={goToProjectSubmitWork}
isParentUser={isParentUser}
isOwner={isOwner}
></RemindBudgetDialog>
)}
</>
);
});
export default memo(TemplateBox);
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ d2999545
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState, useCallback } from "react";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
...@@ -16,10 +16,13 @@ import { getLoaclStorageOfKey } from "@/api/fileserver/utils"; ...@@ -16,10 +16,13 @@ import { getLoaclStorageOfKey } from "@/api/fileserver/utils";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
import SearchInput from "@/components/BusinessComponents/SearchInput"; import SearchInput from "@/components/BusinessComponents/SearchInput";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox"; import { useNavigate } from "react-router-dom";
import TemplateItem from "@/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem";
import SimpleDialog from "./components/simpleDialog"; import SimpleDialog from "./components/simpleDialog";
import AddTemplate from "./components/AddTemplate/index"; import AddTemplate from "./components/AddTemplate/index";
import noData from "../../../../assets/project/noTemplate.svg"; import noData from "../../../../assets/project/noTemplate.svg";
import RemindBudgetDialog from "./components/RemindBudgetDialog";
import CardTable from "@/components/CommonComponents/CardTable";
import { import {
getWorkbenchTemplate, getWorkbenchTemplate,
deleteWorkbenchTemplate, deleteWorkbenchTemplate,
...@@ -37,7 +40,10 @@ const ProjectMembers = observer(() => { ...@@ -37,7 +40,10 @@ const ProjectMembers = observer(() => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectIdData = toJS(currentProjectStore.currentProjectInfo.id); const projectIdData = toJS(currentProjectStore.currentProjectInfo.id);
const productId = toJS(currentProjectStore.currentProductInfo.id); const productId = toJS(currentProjectStore.currentProductInfo.id);
const navigate = useNavigate();
const isPass = usePass(); const isPass = usePass();
const [selectId, setSelectId] = useState("");
const [rbOpen, setRbOpen] = useState(false);
/** 搜索模板名称 */ /** 搜索模板名称 */
const [templateName, setTemplateName] = useState(""); const [templateName, setTemplateName] = useState("");
...@@ -156,6 +162,27 @@ const ProjectMembers = observer(() => { ...@@ -156,6 +162,27 @@ const ProjectMembers = observer(() => {
}); });
}, [currentProjectStore.currentProjectInfo.id, getProjectFn]); }, [currentProjectStore.currentProjectInfo.id, getProjectFn]);
const goToProjectSubmitWork = useCallback(
(id: string) => {
navigate(`/product/${productId || "cadd"}/projectSubmitWork`, {
state: { id },
});
},
[navigate, productId]
);
const handleJudgeBudget = useCallback(
(id: string) => {
setSelectId(id);
if (greaterThan100) {
goToProjectSubmitWork(id);
} else {
setRbOpen(true);
}
},
[goToProjectSubmitWork, setRbOpen, setSelectId, greaterThan100]
);
return ( return (
<Box className={styles.headerBox}> <Box className={styles.headerBox}>
<Box className={styles.tabBox}> <Box className={styles.tabBox}>
...@@ -188,24 +215,49 @@ const ProjectMembers = observer(() => { ...@@ -188,24 +215,49 @@ const ProjectMembers = observer(() => {
</Typography> </Typography>
</Box> </Box>
)} )}
{templateList.length > 0 && ( <CardTable
<Box className={styles.templateBox}> data={templateList}
{templateList && renderItem={(item: any) => {
templateList.length > 0 && return (
templateList.map((item, key) => { <TemplateItem
return ( templateInfo={item}
<TemplateBox footer={() => {
key={key} return (
data={item} <Box
startDialog={startDialog} sx={{
isParentUser={isParentUser} display: "flex",
isOwner={isOwner} justifyContent: "end",
greaterThan100={greaterThan100} }}
/> >
); {isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
})} <MyButton
</Box> size="medium"
)} text="移除模版"
onClick={() => {
startDialog(item.id);
}}
style={{
backgroundColor: "#F0F2F5",
color: "#565C66",
}}
/>
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<MyButton
size="medium"
text="使用模版"
onClick={() => handleJudgeBudget(item.id)}
style={{ marginLeft: "12px" }}
/>
)}
</Box>
);
}}
></TemplateItem>
);
}}
itemMinWidth={377}
></CardTable>
{showAddTemplate && ( {showAddTemplate && (
<AddTemplate <AddTemplate
...@@ -222,6 +274,17 @@ const ProjectMembers = observer(() => { ...@@ -222,6 +274,17 @@ const ProjectMembers = observer(() => {
/> />
)} )}
{rbOpen && (
<RemindBudgetDialog
rbOpen={rbOpen}
rbClose={() => setRbOpen(false)}
id={selectId}
goToProjectSubmitWork={goToProjectSubmitWork}
isParentUser={isParentUser}
isOwner={isOwner}
></RemindBudgetDialog>
)}
<SimpleDialog <SimpleDialog
text={"确认移除该模板吗？"} text={"确认移除该模板吗？"}
title="移除模板" title="移除模板"
......
src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.module.scss 0 → 100644
View file @ d2999545
.templateBox {
border: 2px solid #fff;
box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);
border-radius: 6px;
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
height: 208px;
box-sizing: border-box;
padding: 16px 20px;
transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
&:hover {
box-shadow: 0px 6px 24px 0px rgb(3 47 105 / 14%);
}
.templateTop {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
.templateTopItem {
font-size: 12px;
line-height: 20px;
color: rgba(138, 144, 153, 1);
}
.templateTopLine {
width: 1px;
height: 16px;
background-color: rgba(221, 225, 230, 1);
margin: 0 11px;
}
}
.templateTitleBox {
height: 24px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
.templateTitle {
font-size: 15px;
line-height: 22px;
color: rgba(30, 38, 51, 1);
margin-left: 8px;
font-weight: 550;
}
}
.templateDesc {
height: 60px;
font-size: 12px;
line-height: 20px;
color: rgba(86, 92, 102, 1);
margin-bottom: 16px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
}
}
src/views/ResourceCenter/UserResources/UserResourcesTemplate/TemplateItem/index.tsx 0 → 100644
View file @ d2999545
import { useStores } from "@/store";
import { toJS } from "mobx";
import templateIcon from "@/assets/resourceCenter/templateIcon.svg";
import style from "./index.module.scss";
interface ITemplateItemPorps {
templateInfo: any;
footer: any;
}
const TemplateItem = (props: ITemplateItemPorps) => {
const { templateInfo, footer } = props;
const { productListStore } = useStores();
const getProductName = (productId: string) => {
let res = "-";
toJS(productListStore.productList).forEach((item) => {
if (item.value === productId) {
res = item.label;
}
});
return res;
};
return (
<div className={style.templateBox}>
<div className={style.templateTop}>
<div className={style.templateTopItem}>
{getProductName(templateInfo.productId)}
</div>
{templateInfo.creator !== "root" && (
<>
<div className={style.templateTopLine}></div>
<div className={style.templateTopItem}>自定义</div>
</>
)}
<div className={style.templateTopLine}></div>
<div className={style.templateTopItem}>{templateInfo.version}</div>
<div className={style.templateTopLine}></div>
<div className={style.templateTopItem}>{templateInfo.updatedTime}</div>
</div>
<div className={style.templateTitleBox}>
<img src={templateIcon} alt="" />
<div className={style.templateTitle}>{templateInfo.title}</div>
</div>
<div className={style.templateDesc}>{templateInfo.description}</div>
{footer && footer()}
</div>
);
};
export default TemplateItem;
src/views/ResourceCenter/UserResources/UserResourcesTemplate/index.module.css
View file @ d2999545
...@@ -10,64 +10,7 @@ ...@@ -10,64 +10,7 @@
.tableBox { .tableBox {
height: calc(100vh - 177px); height: calc(100vh - 177px);
} }
.templateBox {
border: 2px solid #fff;
box-shadow: 0px 3px 12px 0px rgba(3, 47, 105, 0.09);
border-radius: 6px;
background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%);
height: 208px;
box-sizing: border-box;
padding: 16px 20px;
transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
}
.templateBox:hover {
box-shadow: 0px 6px 24px 0px rgb(3 47 105 / 14%);
}
.templateTop {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
}
.templateTopItem {
font-size: 12px;
line-height: 20px;
color: rgba(138, 144, 153, 1);
}
.templateTopLine {
width: 1px;
height: 16px;
background-color: rgba(221, 225, 230, 1);
margin: 0 11px;
}
.templateTitleBox {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 12px;
}
.templateTitleBox {
height: 24px;
}
.templateTitle {
font-size: 15px;
line-height: 22px;
color: rgba(30, 38, 51, 1);
margin-left: 8px;
font-weight: 550;
}
.templateDesc {
height: 60px;
font-size: 12px;
line-height: 20px;
color: rgba(86, 92, 102, 1);
margin-bottom: 16px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
}
.templateButtons { .templateButtons {
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/ResourceCenter/UserResources/UserResourcesTemplate/index.tsx
View file @ d2999545
...@@ -8,14 +8,13 @@ import CardTable from "@/components/CommonComponents/CardTable"; ...@@ -8,14 +8,13 @@ import CardTable from "@/components/CommonComponents/CardTable";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { getWorkflowspecList, deleteWorkflowspec } from "@/api/resourceCenter"; import { getWorkflowspecList, deleteWorkflowspec } from "@/api/resourceCenter";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import templateIcon from "@/assets/resourceCenter/templateIcon.svg";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx";
import ProductSelect from "@/components/BusinessComponents/ProductSelect"; import ProductSelect from "@/components/BusinessComponents/ProductSelect";
import WorkFlowEdit from "@/views/WorkFlowEdit"; import WorkFlowEdit from "@/views/WorkFlowEdit";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import TemplateDetail from "./TemplateDetail"; import TemplateDetail from "./TemplateDetail";
import style from "./index.module.css"; import style from "./index.module.css";
import TemplateItem from "./TemplateItem";
import NoData from "@/components/BusinessComponents/NoData"; import NoData from "@/components/BusinessComponents/NoData";
const UserResourcesTemplate = observer(() => { const UserResourcesTemplate = observer(() => {
...@@ -30,70 +29,52 @@ const UserResourcesTemplate = observer(() => { ...@@ -30,70 +29,52 @@ const UserResourcesTemplate = observer(() => {
const [productId, setProductId] = useState(""); // 新增模板用 const [productId, setProductId] = useState(""); // 新增模板用
const [list, setList] = useState([]); const [list, setList] = useState([]);
const { productListStore } = useStores(); const { productListStore } = useStores();
const getProductName = (productId: string) => {
let res = "-";
toJS(productListStore.productList).forEach((item) => {
if (item.value === productId) {
res = item.label;
}
});
return res;
};
const renderItem = (item: any) => { const renderItem = (item: any) => {
return ( return (
<div className={style.templateBox}> <TemplateItem
<div className={style.templateTop}> templateInfo={item}
<div className={style.templateTopItem}> footer={() => {
{getProductName(item.productId)} return (
</div> <div className={style.templateButtons}>
<div className={style.templateTopLine}></div> <div className={style.templateBL}>
<div className={style.templateTopItem}>{item.version}</div> <span
<div className={style.templateTopLine}></div> className={style.button}
<div className={style.templateTopItem}>{item.updatedTime}</div> onClick={() => {
</div> setTemplateId(item.id);
<div className={style.templateTitleBox}> setProductId(item.productId);
<img src={templateIcon} alt="" /> setShowAddTemplate(true);
<div className={style.templateTitle}>{item.title}</div> }}
</div> >
<div className={style.templateDesc}>{item.description}</div> 升级
<div className={style.templateButtons}> </span>
<div className={style.templateBL}> </div>
<span <div className={style.templateBR}>
className={style.button} <MyButton
onClick={() => { text="删除"
setTemplateId(item.id); variant="outlined"
setProductId(item.productId); style={{
setShowAddTemplate(true); border: "1px solid rgba(221, 225, 230, 1)",
}} color: "rgba(138, 144, 153, 1)",
> marginRight: "12px",
升级 }}
</span> onClick={() => {
</div> setShowDeleteDialog(true);
<div className={style.templateBR}> setTemplateId(item.id);
<MyButton }}
text="删除" ></MyButton>
variant="outlined" <MyButton
style={{ text="查看"
border: "1px solid rgba(221, 225, 230, 1)", variant="outlined"
color: "rgba(138, 144, 153, 1)", onClick={() => {
marginRight: "12px", setTemplateId(item.id);
}} setShowDetail(true);
onClick={() => { }}
setShowDeleteDialog(true); ></MyButton>
setTemplateId(item.id); </div>
}} </div>
></MyButton> );
<MyButton }}
text="查看" ></TemplateItem>
variant="outlined"
onClick={() => {
setTemplateId(item.id);
setShowDetail(true);
}}
></MyButton>
</div>
</div>
</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