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