Browse Source

用户管理面包屑

release_0.0.1
‘lijianhao’ 2 years ago
parent
commit
b1e5447b6d
  1. 32
      web/client/assets/color.less
  2. 3
      web/client/src/sections/organization/components/depModal.js
  3. 48
      web/client/src/sections/organization/containers/user.js
  4. 2
      web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
  5. 11
      web/client/src/sections/quanju/nav-item.js

32
web/client/assets/color.less

@ -1128,10 +1128,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.ant-mentions-dropdown-menu-item-active {background-color: @item-hover-bg;} .ant-mentions-dropdown-menu-item-active {background-color: @item-hover-bg;}
.ant-menu-item-danger.ant-menu-item {color: #ff4d4f;} .ant-menu-item-danger.ant-menu-item {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item:hover, .ant-menu-item-danger.ant-menu-item-active {color: #ff4d4f;} .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-item-danger.ant-menu-item-active {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item:active {background: color(~`colorPalette("@{menu-popup-bg}", 2)`);} .ant-menu-item-danger.ant-menu-item:active {background: #fff1f0;}
.ant-menu-item-danger.ant-menu-item-selected {color: #ff4d4f;} .ant-menu-item-danger.ant-menu-item-selected {color: #ff4d4f;}
.ant-menu-item-danger.ant-menu-item-selected > a, .ant-menu-item-danger.ant-menu-item-selected > a:hover {color: #ff4d4f;} .ant-menu-item-danger.ant-menu-item-selected > a, .ant-menu-item-danger.ant-menu-item-selected > a:hover {color: #ff4d4f;}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: color(~`colorPalette("@{menu-popup-bg}", 2)`);} .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: #fff1f0;}
.ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {border-right-color: #ff4d4f;} .ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {border-right-color: #ff4d4f;}
.ant-menu-dark .ant-menu-item-danger.ant-menu-item, .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {color: #ff4d4f;} .ant-menu-dark .ant-menu-item-danger.ant-menu-item, .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {color: #ff4d4f;}
.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {color: #fff;background-color: #ff4d4f;} .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {color: #fff;background-color: #ff4d4f;}
@ -1702,17 +1702,11 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
.ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;} .ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;}
.ant-tag-checkable-checked {background-color: @primary-color;} .ant-tag-checkable-checked {background-color: @primary-color;}
.ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);} .ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);}
<<<<<<< HEAD .ant-tag-pink {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{modal-footer-border-color-split}", 1)`);border-color: #ffadd2;}
.ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;} .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{modal-footer-border-color-split}", 1)`);border-color: #ffadd2;} .ant-tag-magenta {color: #c41d7f;background: #fff0f6;border-color: #ffadd2;}
=======
.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{timeline-color}", 4)`);border-color: #ffadd2;}
.ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{timeline-color}", 4)`);border-color: #ffadd2;}
>>>>>>> 65cf2722eec21e1d07ce958f4298eec7ae620c85
.ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;} .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
.ant-tag-red {color: #cf1322;background: color(~`colorPalette("@{menu-popup-bg}", 2)`);border-color: #ffa39e;} .ant-tag-red {color: #cf1322;background: #fff1f0;border-color: #ffa39e;}
.ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;} .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
.ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;} .ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;}
.ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;} .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
@ -1720,7 +1714,7 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
.ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;} .ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;}
.ant-tag-yellow {color: #d4b106;background: #feffe6;border-color: #fffb8f;} .ant-tag-yellow {color: #d4b106;background: #feffe6;border-color: #fffb8f;}
.ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;} .ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
.ant-tag-gold {color: #d48806;background: color(~`colorPalette("@{skeleton-color}", 1)`);border-color: #ffe58f;} .ant-tag-gold {color: #d48806;background: #fffbe6;border-color: #ffe58f;}
.ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;} .ant-tag-gold-inverse {color: #fff;background: #faad14;border-color: #faad14;}
.ant-tag-cyan {color: #08979c;background: #e6fffb;border-color: #87e8de;} .ant-tag-cyan {color: #08979c;background: #e6fffb;border-color: #87e8de;}
.ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;} .ant-tag-cyan-inverse {color: #fff;background: #13c2c2;border-color: #13c2c2;}
@ -1728,17 +1722,11 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
.ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;} .ant-tag-lime-inverse {color: #fff;background: #a0d911;border-color: #a0d911;}
.ant-tag-green {color: #389e0d;background: #f6ffed;border-color: #b7eb8f;} .ant-tag-green {color: #389e0d;background: #f6ffed;border-color: #b7eb8f;}
.ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;} .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
.ant-tag-blue {color: #096dd9;background: color(~`colorPalette("@{progress-steps-item-bg}", 1)`);border-color: #91d5ff;} .ant-tag-blue {color: #096dd9;background: color(~`colorPalette("@{pagination-item-input-bg}", 1)`);border-color: #91d5ff;}
.ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;} .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
<<<<<<< HEAD .ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{avatar-bg}", 4)`);border-color: #adc6ff;}
.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{success-color-deprecated-border}", 1)`);border-color: #adc6ff;}
.ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
.ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{progress-steps-item-bg}", 3)`);border-color: #d3adf7;}
=======
.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{popover-background}", 3)`);border-color: #adc6ff;}
.ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;} .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
.ant-tag-purple {color: #531dab;background: #f9f0ff;border-color: #d3adf7;} .ant-tag-purple {color: #531dab;background: color(~`colorPalette("@{calendar-bg}", 1)`);border-color: #d3adf7;}
>>>>>>> 65cf2722eec21e1d07ce958f4298eec7ae620c85
.ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;} .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}
.ant-tag-success {color: #52c41a;background: @success-color-deprecated-bg;border-color: @success-color-deprecated-border;} .ant-tag-success {color: #52c41a;background: @success-color-deprecated-bg;border-color: @success-color-deprecated-border;}
.ant-tag-processing {color: @primary-color;background: @info-color-deprecated-bg;border-color: @info-color-deprecated-border;} .ant-tag-processing {color: @primary-color;background: @info-color-deprecated-bg;border-color: @info-color-deprecated-border;}
@ -1975,7 +1963,7 @@ a.ant-typography.ant-typography-disabled:hover, .ant-typography a.ant-typography
.ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error {border-color: #ff4d4f;} .ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error {border-color: #ff4d4f;}
.ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info, .ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {background: transparent;} .ant-upload-list-picture .ant-upload-list-item:hover .ant-upload-list-item-info, .ant-upload-list-picture-card .ant-upload-list-item:hover .ant-upload-list-item-info {background: transparent;}
.ant-upload-list-picture .ant-upload-list-item-uploading, .ant-upload-list-picture-card .ant-upload-list-item-uploading {border-style: dashed;} .ant-upload-list-picture .ant-upload-list-item-uploading, .ant-upload-list-picture-card .ant-upload-list-item-uploading {border-style: dashed;}
.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{progress-steps-item-bg}", 1)`)'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{progress-steps-item-bg}", 1)`)'] {fill: @error-color-deprecated-bg;} .ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{pagination-item-input-bg}", 1)`)'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='color(~`colorPalette("@{pagination-item-input-bg}", 1)`)'] {fill: @error-color-deprecated-bg;}
.ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'] {fill: #ff4d4f;} .ant-upload-list-picture .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'], .ant-upload-list-picture-card .ant-upload-list-item-error .ant-upload-list-item-thumbnail .anticon svg path[fill='#1890ff'] {fill: #ff4d4f;}
.ant-upload-list-picture-card .ant-upload-list-item-info::before {background-color: rgba(0, 0, 0, 0.5);} .ant-upload-list-picture-card .ant-upload-list-item-info::before {background-color: rgba(0, 0, 0, 0.5);}
.ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {color: rgba(255, 255, 255, 0.85);} .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-eye, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-download, .ant-upload-list-picture-card .ant-upload-list-item-actions .anticon-delete {color: rgba(255, 255, 255, 0.85);}

3
web/client/src/sections/organization/components/depModal.js

@ -68,7 +68,7 @@ const DepModal = (props) => {
function mapStateToProps(state) { function mapStateToProps(state) {
const { depMessage } = state; const { depMessage } = state;
console.log('depMessage:',depMessage);
const pakData = (dep) => { const pakData = (dep) => {
return dep.map((d) => { return dep.map((d) => {
return { return {
@ -80,7 +80,6 @@ function mapStateToProps(state) {
}) })
} }
let depData = pakData(depMessage.data || []) let depData = pakData(depMessage.data || [])
console.log('depData:',depData);
return { return {
loading: depMessage.isRequesting, loading: depMessage.isRequesting,
depData, depData,

48
web/client/src/sections/organization/containers/user.js

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { DeleteOutlined, EllipsisOutlined, FormOutlined } from '@ant-design/icons'; import { DeleteOutlined, EllipsisOutlined, FormOutlined } from '@ant-design/icons';
import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch, Tooltip } from 'antd'; import { Spin, Space, Button, Popconfirm, Row, Col, Tree, Table, Card, Switch, Tooltip, Breadcrumb } from 'antd';
import ProTable from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table';
import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user'; import { getDepMessage, getDepUser, createUser, updateUser, delUser, resetPwd, createDep, delDep, updateDep } from '../actions/user';
import UserModal from '../components/userModal'; import UserModal from '../components/userModal';
@ -22,6 +22,7 @@ const UserManage = (props) => {
const [depModalType, setDepModalType] = useState(); const [depModalType, setDepModalType] = useState();
const [depModalRecord, setDepModalRecord] = useState(); const [depModalRecord, setDepModalRecord] = useState();
const [selectedTree, setSelectedTree] = useState(); const [selectedTree, setSelectedTree] = useState();
const [depCrumbs, setDepCrumbs] = useState([]);
useEffect(() => { useEffect(() => {
@ -34,6 +35,12 @@ const UserManage = (props) => {
dispatch(getDepUser(depMessage[0].id)) dispatch(getDepUser(depMessage[0].id))
} }
}, [depMessage]) }, [depMessage])
useEffect(() => {
const list = handleCrumbs(depSelectedKeys)
setDepCrumbs(list)
}, [depSelectedKeys])
const columns = const columns =
[ [
{ {
@ -181,7 +188,7 @@ const UserManage = (props) => {
// 删除部门 // 删除部门
const delDepartment = (id) => { const delDepartment = (id) => {
dispatch(delDep(id)).then(res => { dispatch(delDep(id)).then(res => {
if(res.success){ if (res.success) {
dispatch(getDepMessage()) dispatch(getDepMessage())
} }
}); });
@ -208,6 +215,32 @@ const UserManage = (props) => {
</div> </div>
} }
const handleCrumbs = (id) => {
let crumbsList = []
depMessage?.forEach(d => {
if (id == d.id) {
crumbsList.push(d.name)
}
d.subordinate?.forEach(s => {
if (id == s.id) {
crumbsList.push(d.name)
crumbsList.push(s.name)
}
s.subordinate?.forEach(a => {
if (id == a.id) {
crumbsList.push(d.name)
crumbsList.push(s.name)
crumbsList.push(a.name)
}
})
})
})
return crumbsList
}
return (<div > return (<div >
<Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */> <Spin spinning={loading} /* style={{ height: "calc(100vh - 70px)" }} */>
<Row gutter={16} /* style={{ overflow: "scroll" }} */> <Row gutter={16} /* style={{ overflow: "scroll" }} */>
@ -220,6 +253,7 @@ const UserManage = (props) => {
style={{ marginLeft: 10 }} style={{ marginLeft: 10 }}
onClick={() => openDepModal('create')} onClick={() => openDepModal('create')}
>新建部门</Button> >新建部门</Button>
{ {
depMessage.length ? depMessage.length ?
<Tree <Tree
@ -227,7 +261,10 @@ const UserManage = (props) => {
defaultExpandedKeys={[depMessage[0].id]} defaultExpandedKeys={[depMessage[0].id]}
selectedKeys={depSelectedKeys} selectedKeys={depSelectedKeys}
onSelect={(selectedKeys, e) => { onSelect={(selectedKeys, e) => {
// console.log('selectedKeys:',selectedKeys);
if (e.selected) { if (e.selected) {
handleCrumbs(selectedKeys)
setSelectedTree(selectedKeys) setSelectedTree(selectedKeys)
setDepSelectedKeys(selectedKeys) setDepSelectedKeys(selectedKeys)
dispatch(getDepUser(selectedKeys[0])) dispatch(getDepUser(selectedKeys[0]))
@ -260,7 +297,11 @@ const UserManage = (props) => {
<Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}> <Col /* flex="auto" */ style={{ width: "calc(100% - 260px)", height: '100%', display: "black" }}>
<Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}> <Card bordered={false} height={clientHeight} bodyStyle={{ padding: 8, paddingTop: 24, overflow: "hidden", width: "100%" }}>
<Breadcrumb separator=">" style={{ marginLeft: 24 }}>
{
depCrumbs?.map((c, index) => { return (<Breadcrumb.Item key={index}>{c}</Breadcrumb.Item>) })
}
</Breadcrumb>
<ProTable <ProTable
columns={columns} columns={columns}
dataSource={depUser} dataSource={depUser}
@ -330,6 +371,7 @@ const UserManage = (props) => {
function mapStateToProps(state) { function mapStateToProps(state) {
const { depMessage, depUser, global } = state; const { depMessage, depUser, global } = state;
console.log('depMessage:', depMessage);
// console.log(state); // console.log(state);
return { return {
clientHeight: global.clientHeight, clientHeight: global.clientHeight,

2
web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@ -194,7 +194,7 @@ const LeftTop = () => {
const style = { height: "31%", marginTop: "3%" } const style = { height: "31%", marginTop: "3%" }
return ( return (
<> <>
<Module style={style} title={"路养护周期统计"}> <Module style={style} title={"路养护周期统计"}>
<div style={{ position: 'relative', width: '100%', height: '100%' }}> <div style={{ position: 'relative', width: '100%', height: '100%' }}>
<div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}> <div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}>
<div ref={seasonChartRef} style={{ width: "50%" }}> <div ref={seasonChartRef} style={{ width: "50%" }}>

11
web/client/src/sections/quanju/nav-item.js

@ -7,10 +7,11 @@ const SubMenu = Menu.SubMenu;
export function getNavItem(user, dispatch) { export function getNavItem(user, dispatch) {
return ( return (
<SubMenu key="example2" icon={<SettingOutlined />} title={'举个栗子'}> // <SubMenu key="example2" icon={<SettingOutlined />} title={'举个栗子'}>
<Menu.Item key="e1"> // <Menu.Item key="e1">
<Link to="/example2/e1">举个棒子2</Link> // <Link to="/example2/e1">举个棒子2</Link>
</Menu.Item> // </Menu.Item>
</SubMenu> // </SubMenu>
<></>
); );
} }
Loading…
Cancel
Save