Skip to content

X
xiaomai-cloud-class-web
Commit 9a4ac923 by zhangleyuan
Options

feat:调整UI样式

parent 77755b8c
Showing with 80 additions and 23 deletions
src/bu-components/ChooseMembersModal.less
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
} }
.container-left-body-table{ .container-left-body-table{
width: 300px; width: 300px;
height: 330px; height: 360px;
overflow: scroll; overflow: scroll;
.ant-table { .ant-table {
border: none; border: none;
......
src/modules/college-manage/components/MemberTree.jsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Tree} from "antd"; import { Tree,Tooltip} from "antd";
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import User from '@/common/js/user'; import User from '@/common/js/user';
import WWOpenDataCom from '@/components/WWOpenDataCom'; import WWOpenDataCom from '@/components/WWOpenDataCom';
...@@ -82,15 +82,20 @@ function MemberTree(props) { ...@@ -82,15 +82,20 @@ function MemberTree(props) {
className="node-title-con" className="node-title-con"
> >
{nodeData.userId ? {nodeData.userId ?
<div> <>
<span className="icon iconfont title-icon">&#xe603;</span> <span className="icon iconfont title-icon">&#xe603;</span>
<span><WWOpenDataCom type="userName" openid={nodeData.userName}/></span> <Tooltip title={<WWOpenDataCom type="userName" openid={nodeData.userName}/>}>
</div> <span className="name"><WWOpenDataCom type="userName" openid={nodeData.userName}/></span>
</Tooltip>
</>
: :
<div> <>
<span className="icon iconfont title-icon">&#xe604;</span> <span className="icon iconfont title-icon">&#xe604;</span>
<span><WWOpenDataCom type="departmentName" openid={nodeData.name}/></span> <Tooltip title={<WWOpenDataCom type="departmentName" openid={nodeData.name}/>}>
</div> <span className="name"><WWOpenDataCom type="departmentName" openid={nodeData.name}/></span>
</Tooltip>
<span>({nodeData.departmentCount || 0})</span>
</>
} }
</div> </div>
); );
......
src/modules/college-manage/components/MemberTree.less
...@@ -2,16 +2,29 @@ ...@@ -2,16 +2,29 @@
.node-title-con{ .node-title-con{
color:#666; color:#666;
font-size:14px; font-size:14px;
display: flex;
.name{
display: inline-block;
vertical-align: middle;
max-width:190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title-icon{ .title-icon{
font-size:14px; font-size:14px;
color:#999; color:#999;
margin-right:8px; margin-right:8px;
} }
} }
.ant-tree .ant-tree-treenode {
padding: 8px 0 14px 0;
}
.ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before, .ant-tree.ant-tree-directory .ant-tree-treenode-selected::before{ .ant-tree.ant-tree-directory .ant-tree-treenode-selected:hover::before, .ant-tree.ant-tree-directory .ant-tree-treenode-selected::before{
background:transparent; background:transparent;
} }
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher{ .ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher{
color:#000; color:#000;
} }
} }
\ No newline at end of file
src/modules/college-manage/components/SearchUser.jsx
...@@ -18,6 +18,7 @@ function SearchUser(props) { ...@@ -18,6 +18,7 @@ function SearchUser(props) {
} }
function onChange(e){ function onChange(e){
setDropDownVisible(true);
props.onChange(e.target.value) props.onChange(e.target.value)
} }
function selectuser(e,item){ function selectuser(e,item){
...@@ -36,9 +37,34 @@ function SearchUser(props) { ...@@ -36,9 +37,34 @@ function SearchUser(props) {
} }
} }
function selectDep(e,item){ function selectDep(e,item){
console.log('item',item);
if(e.target.checked){ if(e.target.checked){
console.log('item',item); let _record = props.selectList;
props.onSelect(item,'department'); let _userList = [];
_record.push(item); // 将当前选中的部门塞进来
if(item.departmentUserVOList){
_userList = item.departmentUserVOList; //获取当前选中的人
}
_record = [..._record,..._userList];
props.onSelect(_record,'department');
}else{
let _record = [];
let _userList = [];
props.selectList.map((_item,index)=>{
if(_item.id !== item.id){ //取消选择后将当前的部门移除也要将父部门也移除
_record.push(_item);
}
})
if(item.departmentUserVOList){
_userList = item.departmentUserVOList; //获取当前选中的人
}
const new_arr = _record.filter((x) => {return !_userList.some((item) => x.id === item.id)});
// _userList.map((_item,index)=>{
// if(_item.id === item.id){
// _record.splice(_item,index);
// }
// })
props.onSelect(new_arr,'department');
} }
} }
function documentClick(){ function documentClick(){
...@@ -108,10 +134,14 @@ function SearchUser(props) { ...@@ -108,10 +134,14 @@ function SearchUser(props) {
<div className="drop-down__item__con"> <div className="drop-down__item__con">
<div> <div>
{props.data.departmentVOList.map((item,index)=>{ {props.data.departmentVOList.map((item,index)=>{
return <div><Checkbox onChange={(e)=>{selectDep(e,item)}}> return <div><Checkbox onChange={(e)=>{selectDep(e,item)}} checked={_.pluck(props.selectList, 'id').indexOf(item.id)=== -1?false:true}>
<div className="drop-down__item__con__item"> <div className="drop-down__item__con__item">
<div className="drop-down__item__con__item__left"> <div className="drop-down__item__con__item__left">
<WWOpenDataCom type="departmentName" openid={item.name}/> <Tooltip title={ <WWOpenDataCom type="departmentName" openid={item.name}/>}>
<span className="departmentName">
<WWOpenDataCom type="departmentName" openid={item.name}/>
</span>
</Tooltip>
</div> </div>
</div> </div>
</Checkbox> </Checkbox>
......
src/modules/college-manage/components/SearchUser.less
...@@ -34,6 +34,13 @@ ...@@ -34,6 +34,13 @@
color:#999; color:#999;
margin-right:3px; margin-right:3px;
} }
.departmentName{
display: inline-block;
max-width:190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
.drop-down__item__con__item__right{ .drop-down__item__con__item__right{
width:84px; width:84px;
......
src/modules/college-manage/modal/NewChooseMembersModal.jsx
...@@ -109,7 +109,7 @@ class NewChooseMembersModal extends React.Component { ...@@ -109,7 +109,7 @@ class NewChooseMembersModal extends React.Component {
if(item.userId !== record.userId && item.id !==record.departmentId){ if(item.userId !== record.userId && item.id !==record.departmentId){
_selectList.push(item); _selectList.push(item);
} }
}); }); //字部门移除时将其对应的父部门也移除
console.log('_selectList',_selectList); console.log('_selectList',_selectList);
this.setState({ this.setState({
selectList:_selectList, selectList:_selectList,
...@@ -271,15 +271,16 @@ class NewChooseMembersModal extends React.Component { ...@@ -271,15 +271,16 @@ class NewChooseMembersModal extends React.Component {
confirmSearchSelect=(record,type)=>{ confirmSearchSelect=(record,type)=>{
const { selectUserList,selectList} = this.state; const { selectUserList,selectList} = this.state;
if(type==='user'){ this.setState({selectList:record,selectUserList:this.handleSelectUserList(record)});
this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)}); // if(type==='user'){
}else{ // this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)});
let _list = []; // }else{
if(record.departmentUserVOList){ // let _userList = [];
_list = record.departmentUserVOList; // if(record.departmentUserVOList){
} // _userList = record.departmentUserVOList;
this.setState({selectList:[...selectList,..._list],selectUserList:[...selectUserList,..._list]}); // }
} // this.setState({selectList:[...selectList,..._userList],selectUserList:[...selectUserList,..._userList]});
// }
} }
render() { render() {
......
src/modules/college-manage/modal/NewChooseMembersModal.less
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
} }
.container-left-body-table{ .container-left-body-table{
width: 300px; width: 300px;
max-height: 380px; max-height: 360px;
overflow: scroll; overflow: scroll;
.ant-table { .ant-table {
border: none; border: none;
......
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