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 @@
}
.container-left-body-table{
width: 300px;
height: 330px;
height: 360px;
overflow: scroll;
.ant-table {
border: none;
......
src/modules/college-manage/components/MemberTree.jsx
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import { Tree} from "antd";
import { Tree,Tooltip} from "antd";
import StoreService from "@/domains/store-domain/storeService";
import User from '@/common/js/user';
import WWOpenDataCom from '@/components/WWOpenDataCom';
......@@ -82,15 +82,20 @@ function MemberTree(props) {
className="node-title-con"
>
{nodeData.userId ?
<div>
<>
<span className="icon iconfont title-icon">&#xe603;</span>
<span><WWOpenDataCom type="userName" openid={nodeData.userName}/></span>
</div>
<Tooltip title={<WWOpenDataCom type="userName" openid={nodeData.userName}/>}>
<span className="name"><WWOpenDataCom type="userName" openid={nodeData.userName}/></span>
</Tooltip>
</>
:
<div>
<>
<span className="icon iconfont title-icon">&#xe604;</span>
<span><WWOpenDataCom type="departmentName" openid={nodeData.name}/></span>
</div>
<Tooltip title={<WWOpenDataCom type="departmentName" openid={nodeData.name}/>}>
<span className="name"><WWOpenDataCom type="departmentName" openid={nodeData.name}/></span>
</Tooltip>
<span>({nodeData.departmentCount || 0})</span>
</>
}
</div>
);
......
src/modules/college-manage/components/MemberTree.less
......@@ -2,16 +2,29 @@
.node-title-con{
color:#666;
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{
font-size:14px;
color:#999;
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{
background:transparent;
}
.ant-tree.ant-tree-directory .ant-tree-treenode-selected .ant-tree-switcher{
color:#000;
}
}
\ No newline at end of file
src/modules/college-manage/components/SearchUser.jsx
......@@ -18,6 +18,7 @@ function SearchUser(props) {
}
function onChange(e){
setDropDownVisible(true);
props.onChange(e.target.value)
}
function selectuser(e,item){
......@@ -36,9 +37,34 @@ function SearchUser(props) {
}
}
function selectDep(e,item){
console.log('item',item);
if(e.target.checked){
console.log('item',item);
props.onSelect(item,'department');
let _record = props.selectList;
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(){
......@@ -108,10 +134,14 @@ function SearchUser(props) {
<div className="drop-down__item__con">
<div>
{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__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>
</Checkbox>
......
src/modules/college-manage/components/SearchUser.less
......@@ -34,6 +34,13 @@
color:#999;
margin-right:3px;
}
.departmentName{
display: inline-block;
max-width:190px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.drop-down__item__con__item__right{
width:84px;
......
src/modules/college-manage/modal/NewChooseMembersModal.jsx
......@@ -109,7 +109,7 @@ class NewChooseMembersModal extends React.Component {
if(item.userId !== record.userId && item.id !==record.departmentId){
_selectList.push(item);
}
});
}); //字部门移除时将其对应的父部门也移除
console.log('_selectList',_selectList);
this.setState({
selectList:_selectList,
......@@ -271,15 +271,16 @@ class NewChooseMembersModal extends React.Component {
confirmSearchSelect=(record,type)=>{
const { selectUserList,selectList} = this.state;
if(type==='user'){
this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)});
}else{
let _list = [];
if(record.departmentUserVOList){
_list = record.departmentUserVOList;
}
this.setState({selectList:[...selectList,..._list],selectUserList:[...selectUserList,..._list]});
}
this.setState({selectList:record,selectUserList:this.handleSelectUserList(record)});
// if(type==='user'){
// this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)});
// }else{
// let _userList = [];
// if(record.departmentUserVOList){
// _userList = record.departmentUserVOList;
// }
// this.setState({selectList:[...selectList,..._userList],selectUserList:[...selectUserList,..._userList]});
// }
}
render() {
......
src/modules/college-manage/modal/NewChooseMembersModal.less
......@@ -23,7 +23,7 @@
}
.container-left-body-table{
width: 300px;
max-height: 380px;
max-height: 360px;
overflow: scroll;
.ant-table {
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