Skip to content

B
bkunyun
Commit c5af43f5 authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

feat: 样式调整

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