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 @@
* @Author: yuananting
* @Date: 2021-07-29 14:32:24
* @LastEditors: yuananting
* @LastEditTime: 2021-08-05 17:53:15
* @LastEditTime: 2021-08-06 13:59:25
* @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -17,6 +17,7 @@ import moment from 'moment';
import './BasicInfo.less';
import ChooseAssignorModal from '../modal/ChooseAssignorModal';
import ChooseCollaboratorModal from '../modal/ChooseCollaboratorModal';
import WWOpenDataCom from '@/components/WWOpenDataCom';
const { RangePicker } = DatePicker;
......@@ -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 (
<div className='basic-info__form'>
<Form>
......@@ -281,8 +293,12 @@ function BasicInfo(props) {
</Button>
{helpStoreUserIds.length > 0 && (
<div className='select-obj'>
{_.map(helpStoreUserIds, (item) => {
return <Tag closable>{item.name}</Tag>;
{_.map(helpStoreUserIds, (tag, index) => {
return (
<Tag key={tag.id} onClose={() => removeSelectedCollaborator(tag, index)} closable>
<WWOpenDataCom type='userName' openid={tag.nickName} />
</Tag>
);
})}
</div>
)}
......@@ -342,12 +358,13 @@ function BasicInfo(props) {
)}
{collaboratorModalVisible && (
<ChooseCollaboratorModal
currentCollaboratorList={helpStoreUserIds}
visible={collaboratorModalVisible}
close={() => {
// closeChooseMembersModal();
onClose={() => {
setCollaboratorModalVisible(false);
}}
onConfirm={() => {
// confirmAddCustomer();
onConfirm={(data) => {
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-container {
.collaborator-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-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 {
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