Skip to content

X
xiaomai-cloud-class-web
Commit 246ca3f7 by yuananting
Options

feat:新增协同者和指派对象弹窗

parent 1db69ba7
Showing with 210 additions and 157 deletions
src/modules/task-center/train-task/components/BasicInfo.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-29 14:32:24 * @Date: 2021-07-29 14:32:24
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-08-05 17:53:15 * @LastEditTime: 2021-08-06 13:59:25
* @Description: 任务中心-培训任务-新建-基本信息 * @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
...@@ -17,6 +17,7 @@ import moment from 'moment'; ...@@ -17,6 +17,7 @@ import moment from 'moment';
import './BasicInfo.less'; import './BasicInfo.less';
import ChooseAssignorModal from '../modal/ChooseAssignorModal'; import ChooseAssignorModal from '../modal/ChooseAssignorModal';
import ChooseCollaboratorModal from '../modal/ChooseCollaboratorModal'; import ChooseCollaboratorModal from '../modal/ChooseCollaboratorModal';
import WWOpenDataCom from '@/components/WWOpenDataCom';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
...@@ -102,6 +103,17 @@ function BasicInfo(props) { ...@@ -102,6 +103,17 @@ function BasicInfo(props) {
}; };
} }
function confirmAddCollaborator(data) {
props.onChange('helpStoreUserIds', data);
}
function removeSelectedCollaborator(tag, index) {
console.log('vaaaaa', tag, index);
const _helpStoreUserIds = helpStoreUserIds.filter((item) => item !== tag);
console.log(_helpStoreUserIds);
props.onChange('helpStoreUserIds', _helpStoreUserIds);
}
return ( return (
<div className='basic-info__form'> <div className='basic-info__form'>
<Form> <Form>
...@@ -281,8 +293,12 @@ function BasicInfo(props) { ...@@ -281,8 +293,12 @@ function BasicInfo(props) {
</Button> </Button>
{helpStoreUserIds.length > 0 && ( {helpStoreUserIds.length > 0 && (
<div className='select-obj'> <div className='select-obj'>
{_.map(helpStoreUserIds, (item) => { {_.map(helpStoreUserIds, (tag, index) => {
return <Tag closable>{item.name}</Tag>; return (
<Tag key={tag.id} onClose={() => removeSelectedCollaborator(tag, index)} closable>
<WWOpenDataCom type='userName' openid={tag.nickName} />
</Tag>
);
})} })}
</div> </div>
)} )}
...@@ -342,12 +358,13 @@ function BasicInfo(props) { ...@@ -342,12 +358,13 @@ function BasicInfo(props) {
)} )}
{collaboratorModalVisible && ( {collaboratorModalVisible && (
<ChooseCollaboratorModal <ChooseCollaboratorModal
currentCollaboratorList={helpStoreUserIds}
visible={collaboratorModalVisible} visible={collaboratorModalVisible}
close={() => { onClose={() => {
// closeChooseMembersModal(); setCollaboratorModalVisible(false);
}} }}
onConfirm={() => { onConfirm={(data) => {
// confirmAddCustomer(); confirmAddCollaborator(data);
}} }}
/> />
)} )}
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.less 0 → 100644
.choose-assignor-modal {
.assignor-container {
display: flex;
height: 417px;
.left-list {
width: 50%;
margin-right: 24px;
padding: 12px 16px;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.data-body {
.ant-tabs-nav .ant-tabs-tab {
padding: 16px 0 10px 0 !important;
font-size: 14px !important;
}
.tree-con {
.ant-tree .ant-tree-treenode {
padding: 12px 0 !important;
}
.node-title-div {
display: flex;
justify-content: space-between;
white-space: nowrap;
color: #666666;
.item-icon {
img {
width: 16px;
height: 16px;
color: #999999;
}
}
.item-title {
position: absolute;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 55%;
left: 28px;
}
}
}
.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;
}
}
}
}
.right-list {
width: 50%;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.header-line {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e8e8e8;
padding: 12px 16px;
.tip-text {
font-weight: 500;
color: #333333;
}
.clear-btn {
color: #2966ff;
cursor: pointer;
}
}
.data-body {
.selected-item {
padding: 12px 12px 12px 16px;
display: flex;
justify-content: space-between;
.user-name {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
color: #0081f0;
margin-right: 6px;
}
}
.clear-icon {
font-size: 16px;
color: #999999;
vertical-align: middle;
cursor: pointer;
}
}
}
}
}
}
src/modules/task-center/train-task/modal/ChooseCollaboratorModal.less
.choose-collaborator-modal { .choose-collaborator-modal {
.choose-container { .collaborator-container {
display: flex; display: flex;
height: 417px;
.left-list { .left-list {
width: 50%; width: 50%;
margin-right: 24px; margin-right: 24px;
padding: 12px 16px; padding: 12px 16px;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.data-body {
.ant-list {
.ant-list-item:hover {
background-color: #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;
}
}
}
} }
.right-list { .right-list {
width: 50%; width: 50%;
border: 1px solid #e8e8e8;
overflow-y: scroll;
overflow-x: hidden;
.header-line {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e8e8e8;
padding: 12px 16px;
.tip-text {
font-weight: 500;
color: #333333;
}
.clear-btn {
color: #2966ff;
cursor: pointer;
}
}
.data-body {
.selected-item {
padding: 12px 12px 12px 16px;
display: flex;
justify-content: space-between;
.user-name {
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.icon {
color: #0081f0;
margin-right: 6px;
}
}
.clear-icon {
font-size: 16px;
color: #999999;
vertical-align: middle;
cursor: pointer;
}
}
}
} }
} }
} }
// .container-left-header {
// margin-bottom: 12px;
// }
// .container-left-body {
// border: 1px solid #e9e9e9;
// .ant-table-thead > tr > th {
// font-weight: 400 !important;
// }
// .search {
// width: 305px;
// padding: 7px 7px;
// }
// .container-left-body-table {
// width: 300px;
// height: 330px;
// .ant-table {
// border: none;
// min-height: 250px !important;
// .ant-table-header {
// margin-bottom: -7px !important;
// > table > .ant-table-thead > tr > th {
// background-color: #fff !important;
// }
// }
// .ant-table-tbody {
// > tr > td {
// border-bottom: none;
// background-color: #fff !important;
// padding: 8px 8px !important;
// }
// }
// }
// .ant-empty-normal {
// margin: 100px 0 !important;
// }
// .ant-empty {
// margin-top: 60px;
// }
// .ant-empty-description {
// color: #999;
// }
// .avatar {
// display: flex;
// align-items: center;
// .avatar-img {
// height: 23px;
// width: 23px;
// border-radius: 50%;
// margin-right: 8px;
// }
// }
// }
// }
// }
// .container-right {
// width: 50%;
// .span-left {
// margin-left: 10px;
// .span-left-l {
// color: #2966ff;
// cursor: pointer;
// }
// }
// .span-right {
// float: right;
// margin-right: 10px;
// color: #999;
// .span-right-l {
// color: #2966ff;
// cursor: pointer;
// }
// }
// .container-right-body {
// border: 1px solid #e9e9e9;
// margin: 10px;
// margin-top: 12px;
// min-height: 376px;
// .edit {
// .edit-icon {
// color: #999;
// }
// }
// .edit-img {
// width: 16px;
// height: 16px;
// }
// .ant-table .ant-table-body {
// overflow: auto;
// max-height: 376px !important;
// }
// .ant-table tbody {
// tr {
// &:nth-child(even) {
// background: transparent !important;
// td {
// background: #fff;
// }
// }
// &:nth-child(odd) {
// background: #fafafa !important;
// td {
// background: #fafafa;
// }
// }
// }
// }
// .ant-empty-normal {
// margin: 144px 0 !important;
// }
// .ant-empty {
// margin-top: 60px;
// }
// .ant-empty-description {
// color: #999;
// }
// .avatar {
// display: flex;
// align-items: center;
// .avatar-img {
// height: 23px;
// width: 23px;
// border-radius: 50%;
// margin-right: 15px;
// }
// }
// .ant-table-tbody {
// > tr > td {
// border-bottom: none;
// }
// > tr .ant-table-selection-column {
// width: 30px !important;
// }
// }
// }
// }
// }
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