Commit c5af43f5 authored by 吴永生#A02208's avatar 吴永生#A02208

feat: 样式调整

parent 2bc2fd76
...@@ -123,15 +123,14 @@ export class Http { ...@@ -123,15 +123,14 @@ export class Http {
?.access_token || ""; ?.access_token || "";
const newConfig = { const newConfig = {
headers:{'Content-Type': "application/x-www-form-urlencoded",Authorization, ...config?.headers, },...config headers:{Authorization, ...config?.headers, },...config
} }
console.log(config,2222)
if ( if (
newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded" newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded"
) { ) {
console.log(222)
newConfig.data = qs.stringify(data); newConfig.data = qs.stringify(data);
} }
console.log(newConfig,1113)
return newConfig return newConfig
} }
......
...@@ -125,11 +125,7 @@ export default function EnhancedTable(props) { ...@@ -125,11 +125,7 @@ export default function EnhancedTable(props) {
return ( return (
<TableRow <TableRow
hover={ rowHover ? false : (row[disabledparam || "enabled"] ? true : false)} hover={ rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
onClick={(event) => {
if (!row[disabledparam]) return;
onRowClick && onRowClickDefault(row[param || "id"])
headCells.filter(k => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
}}
onDoubleClick={() => { onDoubleClick={() => {
onDoubleClick && onDoubleClick(row) onDoubleClick && onDoubleClick(row)
}} }}
...@@ -146,7 +142,13 @@ export default function EnhancedTable(props) { ...@@ -146,7 +142,13 @@ export default function EnhancedTable(props) {
selected={isItemSelected} selected={isItemSelected}
> >
{ {
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox"> headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell
onClick={(event) => {
// if (!row[disabledparam]) return;
onRowClick && onRowClickDefault(row[param || "id"])
headCells.filter(k => k.id === "checkbox").length > 0 && handleClick(event, row[param || "id"])
}}
padding="checkbox">
<Checkbox color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} /> <Checkbox color={"primary"} checked={isItemSelected} inputProps={{ "aria-labelledby": labelId }} />
</TableCell> </TableCell>
} }
...@@ -162,7 +164,7 @@ export default function EnhancedTable(props) { ...@@ -162,7 +164,7 @@ export default function EnhancedTable(props) {
body: props.bodyTableCell || classes.bodyTableCell body: props.bodyTableCell || classes.bodyTableCell
}} }}
> { > {
item.render ? <>{item.render(row,index)}</> : item.render ? <>{item.render(row[item.id],row,index)}</> :
row[item.id] row[item.id]
} }
</TableCell> </TableCell>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-01 16:53:15 * @Date: 2022-06-01 16:53:15
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-02 10:19:08 * @LastEditTime: 2022-06-07 18:21:51
* @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx * @FilePath: /bkunyun/src/components/Material.Ui/Table/EnhancedTableHead.jsx
* @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
*/ */
...@@ -23,7 +23,11 @@ const EnhancedTableHead = (props) => { ...@@ -23,7 +23,11 @@ const EnhancedTableHead = (props) => {
onRequestSort(event, property); onRequestSort(event, property);
}; };
return ( return (
<TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }}> <TableHead classes={{ root: TableHeadClasses || classes.TableHeadClasses }} sx={{
th:{
backgroundColor: '#F7F8FA',
}
}}>
<TableRow style={{...RowStyle}}> <TableRow style={{...RowStyle}}>
{ {
headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox"> headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell padding="checkbox">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2021-12-04 15:46:25 * @Date: 2021-12-04 15:46:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-06 20:34:00 * @LastEditTime: 2022-06-07 21:13:38
* @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.tsx * @FilePath: /lionet-slb-pc/src/components/SearchView/components/Collapse.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
*/ */
...@@ -11,23 +11,24 @@ import Box from "@mui/material/Box"; ...@@ -11,23 +11,24 @@ import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel"; import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl"; import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select"; import Select, { SelectProps } from "@mui/material/Select";
export interface IOption { export interface IOption {
label: string; label: string;
value: string; value: string;
disabled?: boolean; disabled?: boolean;
} }
interface IProps { interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: IOption; value?: IOption;
options: IOption[]; options: IOption[];
onChange?: (val: IOption) => void; onChange?: (val: IOption) => void;
title?: string; title?: string;
} }
export default function BasicSelect(props: IProps) { export default function BasicSelect(props: IProps) {
const { value, options, onChange, title } = props; const { value, options, onChange, title, input } = props;
const handleChange = (event: SelectChangeEvent) => { const handleChange = (event: any) => {
const newValue = options?.filter((item) => { const newValue = options?.filter((item) => {
return item.value === event.target.value; return item.value === event.target.value;
}); });
...@@ -39,14 +40,18 @@ export default function BasicSelect(props: IProps) { ...@@ -39,14 +40,18 @@ export default function BasicSelect(props: IProps) {
return ( return (
<Box sx={{ minWidth: 120 }}> <Box sx={{ minWidth: 120 }}>
<FormControl fullWidth> <FormControl fullWidth>
<InputLabel className="aa33" id="demo-simple-select-label"> {input ? null : (
{title || "请选择"} <InputLabel id="demo-simple-select-label">
</InputLabel> {title || "请选择"}
</InputLabel>
)}
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={value?.value}
label={title || "请选择"} label={title || "请选择"}
size="small"
{...props}
value={value?.value}
onChange={handleChange} onChange={handleChange}
> >
{options.length {options.length
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-02 18:48:15 * @LastEditTime: 2022-06-07 20:31:40
* @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
*/ */
...@@ -45,7 +45,11 @@ const Tabs = (props: IProps) => { ...@@ -45,7 +45,11 @@ const Tabs = (props: IProps) => {
</Box> </Box>
{tabList?.map((item) => { {tabList?.map((item) => {
return ( return (
<TabPanel value={item.value} key={item.value}> <TabPanel
sx={{ padding: "20px 0 0 0" }}
value={item.value}
key={item.value}
>
{item.component} {item.component}
</TabPanel> </TabPanel>
); );
......
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-07 18:37:53
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 19:59:25
* @FilePath: /bkunyun/src/utils/util.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export const isProjectOwner = (name: string)=>{
let localName =''
try{
localName = JSON.parse(
localStorage.getItem("userInfo") || "{}"
)?.name
} catch {
console.error('获取localStorage出错')
}
return localName === name
}
\ No newline at end of file
...@@ -2,24 +2,23 @@ ...@@ -2,24 +2,23 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 10:47:31 * @LastEditTime: 2022-06-07 21:50:55
* @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 { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import _ from "lodash";
import SelectComponent from "@/components/Material.Ui/Select";
import Table from "@/components/Material.Ui/Table"; import Table from "@/components/Material.Ui/Table";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
import { memo, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box } from "@mui/material"; import { Box, OutlinedInput } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import Input from "@/components/Material.Ui/Input";
import { IResponse, useHttp } from "@/api/http"; import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
// import Select from "@/components/Material.Ui/Select"; import Select, { IOption } from "@/components/mui/Select";
interface IProps { interface IProps {
setAddMemberDialog: (val: boolean) => void; setAddMemberDialog: (val: boolean) => void;
addMemberDialog: boolean; addMemberDialog: boolean;
...@@ -35,16 +34,28 @@ const AddMember = observer((props: IProps) => { ...@@ -35,16 +34,28 @@ const AddMember = observer((props: IProps) => {
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
const [projectMember, setProjectMember] = useState(""); const [projectMember, setProjectMember] = useState("");
const [filterTableData, setFilterTableData] = useState([]); const [filterTableData, setFilterTableData] = useState([]);
const [checkData, setCheckData] = useState<string[]>([]);
const Message = useMessage(); const Message = useMessage();
const selectOption = useMemo(() => { const selectOptions = useMemo(() => {
return [ return [
{ key: "DEVELOPER", label: "研发者" }, { value: "VIEWER", label: "查看者" },
{ key: "MANAGER", label: "管理者" }, { value: "DEVELOPER", label: "研发者" },
{ key: "VIEWER", label: "查看者" }, { value: "MANAGER", label: "管理者" },
]; ];
}, []); }, []);
const changePermission = useCallback(
(val: IOption, index: number) => {
const tableDataIndex = tableData[index] as any;
const newVal = { ...tableDataIndex, projectRole: val.value };
const newTableData = _.cloneDeep(tableData);
newTableData.splice(index, 1, newVal);
setTableData(newTableData);
},
[tableData]
);
const columns = [ const columns = [
{ id: "checkbox", width: 50 }, { id: "checkbox", width: 50 },
{ id: "username", label: "项目成员", width: 160 }, { id: "username", label: "项目成员", width: 160 },
...@@ -52,28 +63,21 @@ const AddMember = observer((props: IProps) => { ...@@ -52,28 +63,21 @@ const AddMember = observer((props: IProps) => {
id: "projectRole", id: "projectRole",
label: "项目权限", label: "项目权限",
width: 160, width: 160,
render: () => { render: (item: string, row: any, index: number) => {
const defaultValue = selectOptions.filter(
(every) => every.value === item
);
return ( return (
<SelectComponent <Select
option={selectOption} input={<OutlinedInput />}
size={"xsmall"} value={
callback={(value: any) => console.log(value)} defaultValue?.length
rootStyle={{ ? defaultValue[0]
paddingRight: "0", : { value: "VIEWER", label: "查看者" }
width: "180px", }
border: "1px solid #136EFA", onChange={(val) => changePermission(val, index)}
}} options={selectOptions}
textStyle={{ fontSize: "13px" }} size="small"
sz={"sm"}
customSvg={{
width: "32px",
height: "32px",
backgroundColor: "rgba(19, 110, 250, 0.1)",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
/> />
); );
}, },
...@@ -88,7 +92,6 @@ const AddMember = observer((props: IProps) => { ...@@ -88,7 +92,6 @@ const AddMember = observer((props: IProps) => {
}) || []; }) || [];
setFilterTableData(newVal || []); setFilterTableData(newVal || []);
} else { } else {
console.log(2222);
setFilterTableData(tableData); setFilterTableData(tableData);
} }
}, [projectMember, tableData]); }, [projectMember, tableData]);
...@@ -113,18 +116,27 @@ const AddMember = observer((props: IProps) => { ...@@ -113,18 +116,27 @@ const AddMember = observer((props: IProps) => {
const onConfirm = () => { const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http console.log(tableData, 1111);
.put<IResponse<any>>("/cpp/project/updatemember", { const params = tableData.filter((item: any) => {
id: projectInfo?.id || "", return checkData.includes(item?.username);
}) });
.then((res) => { if (params.length) {
const { errorCode } = res; http
if (errorCode === 0) { .put<IResponse<any>>(
Message.success("新增成功!"); `/cpp/project/updatemember?id=${projectInfo?.id || ""}`,
getTableList(); params
setAddMemberDialog(false); )
} .then((res) => {
}); const { errorCode } = res;
if (errorCode === 0) {
Message.success("新增成功!");
getTableList();
setAddMemberDialog(false);
}
});
} else {
Message.warning("请先选择项目成员!");
}
}; };
return ( return (
...@@ -136,27 +148,35 @@ const AddMember = observer((props: IProps) => { ...@@ -136,27 +148,35 @@ const AddMember = observer((props: IProps) => {
title="添加成员" title="添加成员"
> >
<Box> <Box>
<Input <Box sx={{ mb: 2 }}>
onChange={(e: any) => { <OutlinedInput
setProjectMember(e.target.value); onChange={(e: any) => {
console.log(e); _.debounce(() => {
}} setProjectMember(e.target.value);
fullWidth={true} }, 200)();
size="xsmall" }}
placeholder="搜索项目成员" placeholder="搜索项目成员"
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} size="small"
/> sx={{ width: "100%", height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
</Box>
<div style={{ overflowY: "scroll", maxHeight: 400 }}>
<Table
checkboxData={(val: string[]) => setCheckData(val)}
param="username"
disabledparam={"enabled"}
rowHover={true}
stickyheader={true}
rows={filterTableData}
rowsPerPage="99"
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom="none"
/>
</div>
</Box> </Box>
<Table
rowHover={true}
stickyheader={true}
rows={filterTableData}
rowsPerPage="99"
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom="none"
/>
</Dialog> </Dialog>
</> </>
); );
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 10:45:42 * @LastEditTime: 2022-06-07 21:45:49
* @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 Dialog from "@/components/Material.Ui/Dialog"; // import Dialog from "@/components/Material.Ui/Dialog";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useMemo, useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
...@@ -59,11 +59,11 @@ const ChangePermission = observer((props: IProps) => { ...@@ -59,11 +59,11 @@ const ChangePermission = observer((props: IProps) => {
const onConfirm = () => { const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http http
.put<IResponse<any>>("/cpp/project/updateuserrole", { .put<IResponse<any>>(
id: projectInfo?.id || "", `/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
username: permissionDialog.username, permissionDialog.username
role: selectValue?.value || "", }&role=${selectValue?.value}`
}) )
.then((res) => { .then((res) => {
const { errorCode } = res; const { errorCode } = res;
if (errorCode === 0) { if (errorCode === 0) {
...@@ -73,6 +73,17 @@ const ChangePermission = observer((props: IProps) => { ...@@ -73,6 +73,17 @@ const ChangePermission = observer((props: IProps) => {
} }
}); });
}; };
useEffect(() => {
const defaultValue = selectOptions.filter(
(every) => every.value === permissionDialog?.projectRole
);
if (defaultValue?.length) {
setSelectValue(defaultValue[0]);
} else {
setSelectValue({ value: "VIEWER", label: "查看者" });
}
}, [permissionDialog, selectOptions]);
return ( return (
<> <>
<Dialog <Dialog
...@@ -84,8 +95,10 @@ const ChangePermission = observer((props: IProps) => { ...@@ -84,8 +95,10 @@ const ChangePermission = observer((props: IProps) => {
<div style={{ marginTop: 12 }}> <div style={{ marginTop: 12 }}>
<Select <Select
title="项目权限" title="项目权限"
value={selectValue}
onChange={changePermission} onChange={changePermission}
options={selectOptions} options={selectOptions}
size="small"
/> />
</div> </div>
</Dialog> </Dialog>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 10:45:47 * @LastEditTime: 2022-06-07 15:55:26
* @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
*/ */
...@@ -47,7 +47,7 @@ const RemoveItem = observer((props: IProps) => { ...@@ -47,7 +47,7 @@ const RemoveItem = observer((props: IProps) => {
.then((res) => { .then((res) => {
const { errorCode } = res; const { errorCode } = res;
if (errorCode === 0) { if (errorCode === 0) {
Message.success("删除成功!"); Message.success("移出成功!");
getTableList(); getTableList();
setRemoveDialog({ isShow: false, username: "" }); setRemoveDialog({ isShow: false, username: "" });
} }
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px;
} }
.removeItemBox { .removeItemBox {
......
...@@ -2,12 +2,14 @@ ...@@ -2,12 +2,14 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-07 11:13:26 * @LastEditTime: 2022-06-07 21:39:30
* @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, useCallback, useEffect, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash"; import _ from "lodash";
import OutlinedInput from "@mui/material/OutlinedInput";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
...@@ -23,45 +25,13 @@ import styles from "./index.module.css"; ...@@ -23,45 +25,13 @@ import styles from "./index.module.css";
import { IDialogInfo } from "./interface"; import { IDialogInfo } from "./interface";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { isProjectOwner } from "@/utils/util";
const ProjectMembers = () => { const ProjectMembers = () => {
const http = useHttp(); const http = useHttp();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const columns = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" },
{
id: "operation",
label: "操作",
width: 160,
render: (item: any) => {
return (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(item.username);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(item.username);
}}
>
移出项目
</span>
</>
);
},
},
];
/** 删除成员 */ /** 删除成员 */
const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({ const [removeDialog, setRemoveDialog] = useState<IDialogInfo>({
isShow: false, isShow: false,
...@@ -74,10 +44,52 @@ const ProjectMembers = () => { ...@@ -74,10 +44,52 @@ const ProjectMembers = () => {
}); });
/** 添加成员 */ /** 添加成员 */
const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false); const [addMemberDialog, setAddMemberDialog] = useState<boolean>(false);
/** 表格数据 */
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
/** 项目名称 */
const [projectName, setProjectMember] = useState(""); const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]); const [filterTableData, setFilterTableData] = useState([]);
/** 项目所有者 */
const [projectOwner, setProjectOwner] = useState("");
const columns = useMemo(() => {
const val: any = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" },
];
if (isProjectOwner(projectOwner)) {
val.push({
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return projectOwner === row?.username ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
}}
>
移出项目
</span>
</>
);
},
});
}
return val;
}, [projectOwner]);
/** 获取表格数据 */ /** 获取表格数据 */
const getTableList = useCallback(() => { const getTableList = useCallback(() => {
...@@ -88,7 +100,9 @@ const ProjectMembers = () => { ...@@ -88,7 +100,9 @@ const ProjectMembers = () => {
params: { id: projectInfo?.id || "" }, params: { id: projectInfo?.id || "" },
}) })
.then((res) => { .then((res) => {
setTableData(res?.data?.members || []); const { data = {} } = res;
setProjectOwner(data.owner);
setTableData(data?.members || []);
}); });
}, [currentProjectStore?.currentProjectInfo, http]); }, [currentProjectStore?.currentProjectInfo, http]);
...@@ -104,7 +118,6 @@ const ProjectMembers = () => { ...@@ -104,7 +118,6 @@ const ProjectMembers = () => {
}) || []; }) || [];
setFilterTableData(newVal || []); setFilterTableData(newVal || []);
} else { } else {
console.log(2222);
setFilterTableData(tableData); setFilterTableData(tableData);
} }
}, [projectName, tableData]); }, [projectName, tableData]);
...@@ -120,32 +133,39 @@ const ProjectMembers = () => { ...@@ -120,32 +133,39 @@ const ProjectMembers = () => {
}; };
/** 点击更改权限 */ /** 点击更改权限 */
const onPermissionBtn = (userName: string) => { const onPermissionBtn = (row: any) => {
setPermissionDialog({ isShow: true, username: userName }); setPermissionDialog({
isShow: true,
username: row?.username || "",
projectRole: row?.projectRole || "",
});
}; };
return ( return (
<> <>
<Box className={styles.headerBox}> <Box className={styles.headerBox}>
<Input <OutlinedInput
onChange={(e: any) => { onChange={(e: any) => {
_.debounce(() => { _.debounce(() => {
setProjectMember(e.target.value); setProjectMember(e.target.value);
}, 200)(); }, 200)();
}} }}
placeholder="搜索项目成员" placeholder="搜索项目成员"
size="xsmall" size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/> />
<Button {isProjectOwner(projectOwner) ? (
style={{ backgroundColor: "#1370FF " }} <Button
variant="contained" style={{ backgroundColor: "#1370FF " }}
onClick={onAddMember} variant="contained"
startIcon={<Add />} onClick={onAddMember}
size="small" startIcon={<Add />}
> size="small"
添加成员 >
</Button> 添加成员
</Button>
) : null}
</Box> </Box>
<Table <Table
rowHover={true} rowHover={true}
......
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-06 15:07:36 * @Date: 2022-06-06 15:07:36
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-06 15:07:55 * @LastEditTime: 2022-06-07 21:38:37
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/ProjectMembers/interface.ts * @FilePath: /bkunyun/src/views/Project/ProjectSetting/ProjectMembers/interface.ts
* @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
*/ */
export interface IDialogInfo { export interface IDialogInfo {
isShow: boolean; isShow: boolean;
username?: string; username?: string;
projectRole?: string
} }
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-05-31 10:18:13 * @Date: 2022-05-31 10:18:13
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-06 20:14:27 * @LastEditTime: 2022-06-07 20:23:02
* @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
*/ */
......
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