Skip to content

X
xiaomai-cloud-class-web
Commit 0186c213 by yuananting
Options

style:指派对象和协作人员弹窗样式调整

parent a57782eb
Showing with 63 additions and 57 deletions
src/modules/task-center/train-task/AddTrainTask.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-07-29 13:57:03
* @LastEditors: yuananting
* @LastEditTime: 2021-08-12 11:58:16
* @LastEditTime: 2021-08-12 13:37:23
* @Description: 任务中心-培训任务-新建页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -179,7 +179,7 @@ function AddTrainTask() {
});
const _helpStoreUserIds = helpStoreUserIds.map((item) => {
return item.userId;
return item.checkedId;
});
const _assignList = assignList.map((item) => {
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-08-05 17:09:36
* @LastEditors: yuananting
* @LastEditTime: 2021-08-12 11:53:59
* @LastEditTime: 2021-08-12 14:32:20
* @Description: 新建培训任务-选择指派对象
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -304,14 +304,14 @@ function ChooseAssignorModal(props) {
<div className='node-title-div'>
{[0, 1].includes(nodeData.depLevel) ? (
<div>
<span className='icon iconfont title-icon'>&#xe604;</span>
<span>
<span className='icon iconfont item-icon'>&#xe604;</span>
<span className='item-name'>
<WWOpenDataCom type='departmentName' openid={nodeData.name} />
</span>
</div>
) : (
<div>
<span className='icon iconfont title-icon'>&#xe603;</span>
<span className='icon iconfont item-icon'>&#xe603;</span>
<span>
<WWOpenDataCom type='userName' openid={nodeData.userName} />
</span>
......@@ -335,19 +335,23 @@ function ChooseAssignorModal(props) {
{checkedAssignorList.map((item, index) => {
return (
<div className='selected-item'>
<span className='item-name'>
<span className='item-title'>
{[0, 1].indexOf(item.depLevel) === -1 ? (
<div>
<span className='icon iconfont title-icon'>&#xe603;</span>
<Tooltip title={<WWOpenDataCom type='userName' openid={item.userName} />}>
<span className='title-name'>
<WWOpenDataCom type='userName' openid={item.userName} />
</span>
</Tooltip>
</div>
) : (
<div>
<span className='icon iconfont title-icon'>&#xe604;</span>
<Tooltip title={<WWOpenDataCom type='departmentName' openid={item.userName} />}>
<span className='title-name'>
<WWOpenDataCom type='departmentName' openid={item.name} />
</span>
</Tooltip>
</div>
)}
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.less
......@@ -5,16 +5,21 @@
.left-list {
width: 50%;
margin-right: 24px;
padding: 12px 16px;
padding: 0 0 12px 16px;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.data-body {
.ant-tabs-nav .ant-tabs-tab {
.ant-tabs-nav {
margin: 0 !important;
.ant-tabs-tab {
padding: 16px 0 10px 0 !important;
font-size: 14px !important;
}
}
.tree-con {
overflow-y: scroll;
overflow-x: hidden;
max-height: 367px;
padding-right: 16px;
.ant-tree .ant-tree-treenode {
padding: 12px 0 !important;
}
......@@ -22,45 +27,28 @@
display: flex;
justify-content: space-between;
white-space: nowrap;
color: #666666;
.item-icon {
img {
width: 16px;
height: 16px;
margin-right: 6px;
color: #999999;
}
}
.item-title {
.item-name {
position: absolute;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 55%;
left: 28px;
color: #666666;
}
}
.ant-tree.ant-tree-directory {
.ant-tree-treenode-selected:hover::before,
.ant-tree-treenode-selected::before {
background: #f3f6fa;
}
.employee-item {
display: flex;
justify-content: space-between;
.user-name {
width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
color: #0081f0;
margin-right: 6px;
}
}
.dep-info {
width: 128px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 12px;
text-align: right;
.ant-tree-switcher {
color: #999999 !important;
}
}
}
......@@ -68,8 +56,6 @@
.right-list {
width: 50%;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.header-line {
display: flex;
justify-content: space-between;
......@@ -85,19 +71,25 @@
}
}
.data-body {
overflow-y: scroll;
overflow-x: hidden;
max-height: 370px;
.selected-item {
padding: 12px 12px 12px 16px;
display: flex;
justify-content: space-between;
.item-name {
.item-title {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
color: #0081f0;
.title-icon {
color: #999999;
margin-right: 6px;
}
.title-name {
color: #333333;
}
}
.clear-icon {
font-size: 16px;
......
src/modules/task-center/train-task/modal/ChooseCollaboratorModal.jsx
......@@ -174,6 +174,7 @@ function ChooseCollaboratorModal(props) {
<Search
placeholder='搜索员工'
value={searchKey}
style={{ paddingRight: 16 }}
onChange={(e) => setSearchKey(e.target.value.trim())}
onSearch={getEmployeeList}
className='search search-input'
......@@ -191,10 +192,10 @@ function ChooseCollaboratorModal(props) {
<List.Item>
<Checkbox checked={item.checked} value={item} key={item.checkedId} onChange={handleCheckedCollaborator}>
<div className='employee-item'>
<span className='user-name'>
<span className='icon iconfont avatar-icon'>&#xe84a;</span>
<span className='item-title'>
<span className='icon iconfont title-icon'>&#xe84a;</span>
<Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
<span className='user-name'>
<span className='title-name'>
<WWOpenDataCom type='userName' openid={item.checkedName} />
</span>
</Tooltip>
......@@ -218,10 +219,10 @@ function ChooseCollaboratorModal(props) {
{checkedCollaboratorList.map((item, index) => {
return (
<div className='selected-item'>
<span className='item-name'>
<span className='icon iconfont avatar-icon'>&#xe84a;</span>
<span className='item-title'>
<span className='icon iconfont title-icon'>&#xe84a;</span>
<Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
<span className='name-text'>
<span className='title-name'>
<WWOpenDataCom type='userName' openid={item.checkedName} />
</span>
</Tooltip>
......
src/modules/task-center/train-task/modal/ChooseCollaboratorModal.less
......@@ -5,29 +5,33 @@
.left-list {
width: 50%;
margin-right: 24px;
padding: 12px 16px;
padding: 12px 0 12px 16px;
border: 1px solid #e8e8e8;
.data-body {
overflow-y: scroll;
overflow-x: hidden;
.data-body {
max-height: 370px;
padding-right: 16px;
.ant-list {
.ant-list-item:hover {
background-color: #f3f6fa;
}
}
.employee-item {
display: flex;
justify-content: space-between;
.user-name {
.item-title {
width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
.title-icon {
color: #0081f0;
margin-right: 6px;
}
.title-name {
color: #333333;
}
}
.dep-info {
width: 128px;
......@@ -43,8 +47,7 @@
.right-list {
width: 50%;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.header-line {
display: flex;
justify-content: space-between;
......@@ -60,19 +63,25 @@
}
}
.data-body {
overflow-y: scroll;
overflow-x: hidden;
max-height: 370px;
.selected-item {
padding: 12px 12px 12px 16px;
display: flex;
justify-content: space-between;
.item-name {
.item-title {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
.title-icon {
color: #0081f0;
margin-right: 6px;
}
.title-name {
color: #333333;
}
}
.clear-icon {
font-size: 16px;
......
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