Skip to content

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

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

parent 1db69ba7
Showing with 478 additions and 811 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.jsx
...@@ -2,285 +2,137 @@ ...@@ -2,285 +2,137 @@
* @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-05 19:43:57 * @LastEditTime: 2021-08-06 17:23:31
* @Description: 新建培训任务-选择指派对象 * @Description: 新建培训任务-选择指派对象
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React, { useState, useEffect } from 'react';
import { Modal, Input, message, Tooltip, AutoComplete, Tabs } from 'antd'; import { Modal, Input, Tree, Dropdown, Tooltip, AutoComplete, Tabs } from 'antd';
import { XMTable } from '@/components'; import { XMTable } from '@/components';
// import college from '@/common/lottie/college.json'; // import college from '@/common/lottie/college.json';
// import Service from '@/common/js/service'; // import Service from '@/common/js/service';
// import User from '@/common/js/user'; import User from '@/common/js/user';
// import SetEmployeeModal from './SetEmployeeModal'; // import SetEmployeeModal from './SetEmployeeModal';
// import search from '../../lottie/search/data.json'; // import search from '../../lottie/search/data.json';
// import MemberTree from '../components/MemberTree'; // import MemberTree from '../components/MemberTree';
// import { DepType } from '@/domains/store-domain/constants'; import { DepType } from '@/domains/store-domain/constants';
// import StoreService from '@/domains/store-domain/storeService'; import StoreService from '@/domains/store-domain/storeService';
// import SearchUser from '../components/SearchUser'; // import SearchUser from '../components/SearchUser';
// import WWOpenDataCom from '@/components/WWOpenDataCom'; import WWOpenDataCom from '@/components/WWOpenDataCom';
// import './ChooseMembersModal.less'; import './ChooseAssignorModal.less';
// import _ from 'underscore'; // import _ from 'underscore';
const { Search } = Input; const { Search } = Input;
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { DirectoryTree } = Tree;
class ChooseAssignorModal extends React.Component { function ChooseAssignorModal(props) {
constructor(props) { const [structureData, setStructureData] = useState([]);
super(props); const [activeKey, setActiveKey] = useState('departMentTab');
this.state = {
selectUserList: [],
selectObject: {},
openSetModal: false,
visible: this.props.visible,
completeOptions: [],
queryName: '',
open: false,
searchUserResultList: {},
};
}
componentDidMount() {}
handleClose = () => {
this.props.close();
};
// 信息列表——右边 useEffect(() => {
selectedColumnsRight = () => { getStructureData();
const selectColumns = [ }, [activeKey]);
{
title: '学员名',
key: 'nameRight',
dataIndex: 'userName',
width: '70%',
render: (value, record) => {
const { userName = '', avatar } = record;
return (
<div className='avatar'>
<span className='icon iconfont avatar-icon'>&#xe84a;</span>
<Tooltip title={userName}>
<span className='userImg'>
{/* <WWOpenDataCom type='userName' openid={userName} /> */}
{/* {userName} */}
</span>
</Tooltip>
</div>
);
},
},
{
title: '操作',
key: 'edit',
dataIndex: 'edit',
width: '30%',
align: 'right',
render: (value, record) => {
return (
<div className='edit' onClick={() => this.clearOneUser(record)}>
<span className='icon iconfont edit-icon'>&#xe717;</span>
</div>
);
},
},
];
return selectColumns;
};
treeSelect = (record) => { function getStructureData() {
// console.log('record',record)
this.setState({
selectUserList: record,
});
};
clearOneUser = (record) => {
console.log('record', record);
const { selectUserList } = this.state;
const _selectUserList = selectUserList.filter((item, index) => {
return item.userId !== record.userId;
});
console.log('selectUserList', selectUserList);
this.setState({
selectUserList: _selectUserList,
});
};
// 清空所有成员
clearAllUser = () => {
this.setState({
selectUserList: [],
});
};
addCustomer = () => {
const { selectUserList } = this.state;
const { addDepType } = this.props;
let enterpriseUserList = []; // 保存新加进去的成员
enterpriseUserList = selectUserList.map((item) => {
const _item = {};
if (addDepType === 'DEP_ORG') {
_item.depUserType = 'VISIBLE_USER';
_item.departmentId = item.departmentId;
_item.enterpriseVisibleUserId = item.userId;
} else {
_item.depUserType = 'STORE_USER';
_item.departmentId = this.props.selectDep.id;
_item.enterpriseVisibleUserId = item.enterpriseUserId;
}
return _item;
});
const _params = {
storeId: User.getStoreId(),
depType: addDepType,
userAndDepartmentList: enterpriseUserList,
};
Service.Hades('public/hades/addBatchUserAndDepartmentStoreCustomer', _params).then((res) => {
this.handleClose();
this.props.onConfirm();
});
};
// 批量添加成员(点击确定)
addUser = (selectUserList) => {
let enterpriseUserList = []; // 保存新加进去的成员
selectUserList.map((item) => {
enterpriseUserList.push({
roleCode: item.roleCode,
enterpriseVisibleUserId: item.userId,
});
return enterpriseUserList;
});
const _params = {
storeId: User.getStoreId(),
enterpriseUserList,
};
Service.Hades('public/hades/addBatchEnterpriseStoreUser', _params).then((res) => {
if (res.code === '200') {
this.props.onConfirm();
this.setState({
openSetModal: false,
});
}
});
};
renderTitle = (title) => {
return <span>{title}</span>;
};
renderItem = (record, type) => ({
value: record.userName || record.name,
label: (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}>
{type === 'user' ? <div>{record.userName}</div> : <div>{record.name}</div>}
{type === 'user' &&
record.postDepNamesList.map((item, index) => {
return <span>{item}</span>;
})}
{type === 'post' && <span>{item.parentName}</span>}
</div>
),
});
notFoundContentNode = () => {
return <span>暂无数据</span>;
};
Complete = () => {
const { open, completeOptions, queryName } = this.state;
return (
<AutoComplete
dropdownClassName='certain-category-search-dropdown'
dropdownMatchSelectWidth={250}
allowClear
onChange={(value) => {
this.getCompleteOptionData(value);
}}
notFoundContent={() => {
this.notFoundContentNode();
}}
value={queryName}
open={open}
onFocus={() => {
this.setState({ open: true });
}}
onBlur={() => {
this.setState({ open: false });
}}
style={{
width: 250,
}}
options={completeOptions}
onSelect={() => this.confirmSearchSelect()}
placeholder='搜索员工、部门'></AutoComplete>
);
};
getCompleteOptionData = (value) => {
if (!value) {
this.setState({
searchUserResultList: {},
});
return;
}
this.setState({
queryName: value,
});
const params = { const params = {
distinct: true, departmentTypeEnum: DepType[activeKey],
queryType: this.props.type,
depType: this.props.treeDepType,
queryName: value,
enterpriseId: User.getEnterpriseId(), enterpriseId: User.getEnterpriseId(),
source: 0, //0代表来自企培 source: 0, // 0代表来自企培
storeId: User.getStoreId(), storeId: User.getStoreId(),
userId: User.getUserId(), userId: User.getUserId(),
whetherCount: false, whetherCount: false,
}; };
StoreService.getDepartmentUser(params).then((res) => { StoreService.queryDepartmentTree(params).then((res) => {
const { result = {} } = res; const { result = [] } = res;
this.setState({ setStructureData(handleStructureData(result));
searchUserResultList: result,
});
}); });
}; }
confirmSearchSelect = (record, type) => { function handleStructureData(dataArray) {
const { selectUserList } = this.state; const _dataArray = dataArray.map((item, index) => {
if (type === 'user') { item.key = item.id;
this.setState({ selectUserList: [...selectUserList, ...record] }); if (item.sonDepartmentVOList) {
} else { item.children = item.sonDepartmentVOList;
let _list = []; handleStructureData(item.sonDepartmentVOList);
if (record.departmentUserVOList) {
_list = record.departmentUserVOList;
} }
console.log('_list', _list); return item;
this.setState({ selectUserList: [...selectUserList, ..._list] }, () => { });
console.log('selectUserList', this.state.selectUserList); return _dataArray;
}); }
}
};
render() { function onSelectAssignor(value) {}
const { type, treeDepType, selectDep = {}, addDepType = '' } = this.props;
const { id = '' } = selectDep; return (
const { selectUserList, selectObject, visible, openSetModal, searchUserResultList } = this.state; <Modal
const title = type === 'USER' ? '添加员工' : '添加学员'; className='choose-assignor-modal'
return ( title='添加指派对象'
<Modal title='添加指派对象' visible={true}> visible={true}
<div className='choose-container'> // onCancel={props.onClose}
<div className='container-left'> onOk={() => {
<Tabs> // props.onConfirm(seletedAssignorList);
<TabPane label='部门'></TabPane> // props.onClose();
<TabPane label='岗位'></TabPane> }}
<TabPane label='自定义分组'></TabPane> width={680}
maskClosable={false}>
<div className='assignor-container'>
<div className='left-list'>
<Search
placeholder='搜索学员、部门'
// value={searchKey}
// onChange={(e) => setSearchKey(e.target.value.trim())}
className='search search-input'
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
<div className='data-body'>
<Tabs size={'small'} onChange={(key) => setActiveKey(key)}>
<TabPane key='departMentTab' tab='部门'></TabPane>
<TabPane key='postGrouptab' tab='岗位组'></TabPane>
<TabPane key='customGroupTab' tab='自定义分组'></TabPane>
</Tabs> </Tabs>
<div className='tree-con'>
<DirectoryTree
defaultExpandAll
checkable
showIcon={false}
treeData={structureData}
// selectedKeys={selectedKeys}
onSelect={onSelectAssignor}
titleRender={(nodeData) => {
return (
<div className='node-title-div'>
<div className='item-icon'>
<span className='icon iconfont title-icon'>&#xe604;</span>
</div>
<div className='item-title'>
{activeKey === 'departMentTab' ? (
<span>
<WWOpenDataCom type='departmentName' openid={nodeData.name} />
</span>
) : (
<span>{nodeData.name}</span>
)}
</div>
</div>
);
}}
/>
</div>
</div> </div>
<div className='container-right'></div>
<div></div>
</div> </div>
</Modal> <div className='right-list'>
); <div className='header-line'>
} <span className='tip-text'>已选择</span>
<span className='clear-btn' onClick={() => {}}>
清空
</span>
</div>
<div className='data-body'></div>
</div>
</div>
</Modal>
);
} }
export default ChooseAssignorModal; export default ChooseAssignorModal;
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.jsx
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
*/ */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Modal, Input, message, Tooltip } from 'antd'; import { Modal, Input, Tooltip, List, Checkbox } from 'antd';
import { XMTable } from '@/components'; import { XMTable } from '@/components';
import college from '@/common/lottie/college.json'; import college from '@/common/lottie/college.json';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
...@@ -19,9 +19,11 @@ import _ from 'underscore'; ...@@ -19,9 +19,11 @@ import _ from 'underscore';
const { Search } = Input; const { Search } = Input;
function ChooseCollaboratorModal() { function ChooseCollaboratorModal(props) {
const [searchKey, setSearchKey] = useState(null); // 搜索内容 const [searchKey, setSearchKey] = useState(''); // 搜索内容
const [employeeList, setEmployeeList] = useState([]); // 员工列表 const [employeeList, setEmployeeList] = useState([]); // 员工列表
const [seletedCollaboratorList, setSeletedCollaboratorList] = useState(props.currentCollaboratorList || []); // 勾选的协同人员
const [allChecked, setAllChecked] = useState(false);
useEffect(() => { useEffect(() => {
getEmployeeList(); getEmployeeList();
...@@ -31,52 +33,117 @@ function ChooseCollaboratorModal() { ...@@ -31,52 +33,117 @@ function ChooseCollaboratorModal() {
const params = { const params = {
current: 1, current: 1,
size: 999, size: 999,
nickName: '', nickName: searchKey,
phone: '', phone: '',
roleCodes: [], roleCodes: [],
}; };
StoreService.getEmployeeList(params).then((res) => { StoreService.getEmployeeList(params).then((res) => {
setEmployeeList(res.result.records); const { records } = res.result;
records.map((item) => {
item.checked = false;
seletedCollaboratorList.map((childItem) => {
if (item.id === childItem.id) {
item.checked = true;
}
return childItem;
});
return item;
});
if (props.currentCollaboratorList.length === records.length) {
setAllChecked(true);
}
setEmployeeList(records);
}); });
} }
// 信息列表-—左边 function renderDepItem(record) {
function leftParseColumns() { if (!record.depNameList) {
const selectColumns = [ return <span>-</span>;
{ }
title: '全选', // 实际为头像，但在表格上这行要求显示为全选 return record.depNameList.map((item, index) => {
key: 'nickName', return (
dataIndex: 'nickName', <span>
render: (val) => { <WWOpenDataCom type='departmentName' openid={item} />
return ( {index < record.depNameList.length - 1 ? '、' : ''}
<div className='avatar'> </span>
<span className='icon iconfont avatar-icon'>&#xe84a;</span> );
<Tooltip title={val}> });
<span className='userImg'>{val}</span> }
</Tooltip>
</div> function handleSeletedCollaborator(e) {
); const { value, checked } = e.target;
}, let _seletedCollaboratorList = [...seletedCollaboratorList];
}, let _employeeList = [];
{ if (checked) {
dataIndex: 'depNameList', _employeeList = employeeList.map((item) => {
key: 'depNameList', if (item.id === value.id) {
render: (val, record) => { item.checked = true;
if (!record.depNameList) { }
return <span>-</span>; return item;
} });
return record.depNameList.map((item, index) => { _seletedCollaboratorList.push({ ...value, checked: true });
return ( } else {
<span> _employeeList = employeeList.map((item) => {
<WWOpenDataCom type='departmentName' openid={item} /> if (item.id === value.id) {
{index < record.depNameList.length - 1 ? '、' : ''} item.checked = false;
</span> }
); return item;
}); });
}, _seletedCollaboratorList = seletedCollaboratorList.filter((item) => item.id !== value.id);
}, }
];
return selectColumns; setEmployeeList(_employeeList);
setSeletedCollaboratorList(_seletedCollaboratorList);
}
function removeSelectedCollaborator(record) {
const _employeeList = employeeList.map((item) => {
if (item.id === record.id) {
item.checked = false;
}
return item;
});
const _seletedCollaboratorList = seletedCollaboratorList.filter((item) => item.id !== record.id);
setEmployeeList(_employeeList);
setSeletedCollaboratorList(_seletedCollaboratorList);
}
function clearSelectedCollaborator() {
const _employeeList = employeeList.map((item) => {
item.checked = false;
return item;
});
setEmployeeList(_employeeList);
setSeletedCollaboratorList([]);
setAllChecked(false);
props.onConfirm([]);
}
function handleSeletedAll(e) {
let _employeeList = [];
let _seletedCollaboratorList = [];
if (e.target.checked) {
_employeeList = employeeList.map((item) => {
item.checked = true;
return item;
});
_seletedCollaboratorList = seletedCollaboratorList.concat([..._employeeList]);
} else {
_employeeList = employeeList.map((item) => {
item.checked = false;
return item;
});
const removeIds = _employeeList.map((item) => item.id);
_seletedCollaboratorList = seletedCollaboratorList.filter((item) => {
return removeIds.indexOf(item.id) < 0;
});
}
setEmployeeList(_employeeList);
setSeletedCollaboratorList(_seletedCollaboratorList);
setAllChecked(e.target.checked);
} }
return ( return (
...@@ -84,386 +151,81 @@ function ChooseCollaboratorModal() { ...@@ -84,386 +151,81 @@ function ChooseCollaboratorModal() {
className='choose-collaborator-modal' className='choose-collaborator-modal'
title='选择协同者' title='选择协同者'
visible={true} visible={true}
// onCancel={() => this.handleClose()} onCancel={props.onClose}
onOk={() => {}} onOk={() => {
props.onConfirm(seletedCollaboratorList);
props.onClose();
}}
width={680} width={680}
maskClosable={false}> maskClosable={false}>
<div className='choose-container'> <div className='collaborator-container'>
<div className='left-list'> <div className='left-list'>
<Search <Search
placeholder='搜索员工' placeholder='搜索员工'
value={searchKey} value={searchKey}
onChange={(value) => setSearchKey(value)} onChange={(e) => setSearchKey(e.target.value.trim())}
onSearch={getEmployeeList}
className='search search-input' className='search search-input'
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
<div className='container-left-body-table'> <div className='data-body'>
<XMTable <List
rowKey={(record) => record.enterpriseVisibleUserId} header={
<Checkbox checked={allChecked} onChange={handleSeletedAll}>
全部
</Checkbox>
}
dataSource={employeeList} dataSource={employeeList}
columns={leftParseColumns()} renderItem={(item, index) => (
pagination={false} <List.Item>
scroll={{ y: 370 }} <Checkbox checked={item.checked} value={item} key={item.id} onChange={handleSeletedCollaborator}>
renderEmpty={{ <div className='employee-item'>
image: searchKey ? search : college, <span className='user-name'>
description: '暂无数据', <span className='icon iconfont avatar-icon'>&#xe84a;</span>
}} <Tooltip title={<WWOpenDataCom type='userName' openid={item.nickName} />}>
size={'small'} <span className='user-name'>
// rowSelection={{ <WWOpenDataCom type='userName' openid={item.nickName} />
// columnWidth: 63, </span>
// selectedRowKeys, </Tooltip>
// onChange: this.onChangeRow, </span>
// getCheckboxProps: this.getCheckboxProps, <span className='dep-info'>{renderDepItem(item)}</span>
// onSelectAll: (selected, selectedRows, changeRows) => { </div>
// this.onSelectAll(selected, selectedRows, changeRows); </Checkbox>
// }, </List.Item>
// }} )}
/> />
</div> </div>
</div> </div>
<div className='right-list'>right</div> <div className='right-list'>
<div className='header-line'>
<span className='tip-text'>已选择</span>
<span className='clear-btn' onClick={clearSelectedCollaborator}>
清空
</span>
</div>
<div className='data-body'>
{seletedCollaboratorList.map((item, index) => {
return (
<div className='selected-item'>
<span className='user-name'>
<span className='icon iconfont avatar-icon'>&#xe84a;</span>
<Tooltip title={<WWOpenDataCom type='userName' openid={item.nickName} />}>
<span className='user-name'>
<WWOpenDataCom type='userName' openid={item.nickName} />
</span>
</Tooltip>
</span>
<span className='icon iconfont clear-icon' onClick={() => removeSelectedCollaborator(item)}>
&#xe717;
</span>
</div>
);
})}
</div>
</div>
</div> </div>
</Modal> </Modal>
); );
} }
// class ChooseCollaboratorModal extends React.Component {
// constructor(props) {
// super(props);
// this.state = {
// isOpen: props.isOpen,
// allUserList: [], // 所有成员列表
// selectUserList: [], // 已选则成员
// temporaryList: [], // 临时学员成员列表（搜索时使用）
// instId: window.currentUserInstInfo.instId, // 机构Id
// searchKey: null, // 搜索内容
// selectedRowKeys: [], // 勾选的成员
// query: {
// current: 1,
// size: 300,
// enterpriseId: User.getEnterpriseId(),
// storeId: User.getStoreId(),
// visibleTypeEnum: props.type,
// },
// selectObject: {},
// };
// }
// componentDidMount() {
// this.getUserAuthority();
// }
// // 获取对应文件相关成员
// getUserAuthority = (searchKey = '') => {
// const { query } = this.state;
// query.name = searchKey;
// Service.Hades('public/hades/getEnterpriseVisibleUserPage', query).then((res) => {
// if (res.result) {
// this.setState({
// allUserList: res.result.records,
// });
// }
// });
// };
// // 勾选成员
// onChangeRow = (_selectedRowKeys, selectedRows) => {
// let { temporaryList, allUserList } = this.state;
// let _temporaryIdList = [],
// _temporaryList = [];
// // 解决搜索款2次搜索的问题
// if (temporaryList.length === 0) {
// _temporaryList = selectedRows;
// } else {
// temporaryList = temporaryList.concat(selectedRows);
// // 之前搜索并勾选的选项以及当前页被勾选的选项
// temporaryList = temporaryList.filter(
// (item) => (!allUserList.includes(item) || selectedRows.includes(item)) && _selectedRowKeys.includes(item.enterpriseVisibleUserId)
// );
// temporaryList.map((item) => {
// if (!_temporaryIdList.includes(item.enterpriseVisibleUserId)) {
// _temporaryIdList.push(item.enterpriseVisibleUserId);
// _temporaryList.push(item);
// }
// return _temporaryIdList, _temporaryList;
// });
// }
// this.setState({
// temporaryList: _temporaryList,
// selectUserList: _temporaryList,
// selectedRowKeys: _selectedRowKeys,
// });
// };
// // 勾选禁用
// getCheckboxProps = (record) => {
// if (record.whetherExist) {
// return {
// disabled: true,
// checked: true,
// };
// }
// };
// // 清空所有成员
// clearAllUser = () => {
// this.setState({
// selectedRowKeys: [],
// selectUserList: [],
// temporaryList: [],
// });
// };
// // 清除单个成员(点击“x”)
// clearOneUser = (user) => {
// let { selectUserList, selectedRowKeys } = this.state;
// // 清除成员不是之前选的
// selectedRowKeys = selectedRowKeys.filter((item) => item !== user.enterpriseVisibleUserId);
// selectUserList = selectUserList.filter((item) => item.enterpriseVisibleUserId !== user.enterpriseVisibleUserId);
// this.setState({
// selectedRowKeys,
// selectUserList,
// });
// };
// // 点击全选
// onSelectAll = (selected, selectedRows, changeRows) => {
// let { temporaryList, allUserList } = this.state;
// let newSelectUserList = [],
// allUserId = [];
// allUserList.map((item) => allUserId.push(item.enterpriseVisibleUserId));
// temporaryList = temporaryList.filter((item) => !allUserId.includes(item.enterpriseVisibleUserId));
// if (selectedRows.length === 0) {
// // 取消勾选，保留之前已经选择的成员
// newSelectUserList = temporaryList;
// } else {
// newSelectUserList = temporaryList.concat(allUserList);
// newSelectUserList = newSelectUserList.filter((item) => !item.whetherExist);
// }
// this.setState({
// selectUserList: newSelectUserList,
// temporaryList: newSelectUserList,
// });
// };
// // 批量添加成员(点击确定)
// addUser = (selectUserList) => {
// let enterpriseUserList = []; // 保存新加进去的成员
// selectUserList.map((item) => {
// enterpriseUserList.push({
// roleCode: item.roleCode,
// enterpriseVisibleUserId: item.enterpriseVisibleUserId,
// });
// return enterpriseUserList;
// });
// const _params = {
// storeId: User.getStoreId(),
// enterpriseUserList,
// };
// Service.Hades('public/hades/addBatchEnterpriseStoreUser', _params).then((res) => {
// if (res.code === '200') {
// this.handleClose(true);
// this.setState({
// temporaryList: [],
// });
// }
// });
// };
// addCustomer = () => {
// const { selectUserList } = this.state;
// let enterpriseVisibleUserIdList = []; // 保存新加进去的成员
// selectUserList.map((item) => {
// enterpriseVisibleUserIdList.push(item.enterpriseVisibleUserId);
// return enterpriseVisibleUserIdList;
// });
// const _params = {
// storeId: User.getStoreId(),
// enterpriseVisibleUserIdList,
// };
// Service.Hades('public/hades/addBatchEnterpriseStoreCustomer', _params).then((res) => {
// if (res.code === '200') {
// this.handleClose(true);
// this.setState({
// temporaryList: [],
// });
// }
// });
// };
// // 搜索成员
// handleSearch = () => {
// const { searchKey } = this.state;
// this.getUserAuthority(searchKey);
// };
// // 搜索框值更改
// handleChangeSearchKey = (e) => {
// const { value } = e.target;
// this.setState({
// searchKey: value,
// });
// };
// // 关闭弹窗
// handleClose = (bool) => {
// this.props.handleChooseModal(bool);
// };
// // 信息列表-—左边
// selectedColumnsLeft = () => {
// const selectColumns = [
// {
// title: '全选', // 实际为头像，但在表格上这行要求显示为全选
// key: 'avatar',
// dataIndex: 'avatar',
// render: (value, record) => {
// const { name } = record;
// return (
// <div className='avatar'>
// <span className='icon iconfont avatar-icon'>&#xe84a;</span>
// <Tooltip title={name}>
// <span className='userImg'>{name}</span>
// </Tooltip>
// </div>
// );
// },
// },
// ];
// return selectColumns;
// };
// // 信息列表——右边
// selectedColumnsRight = () => {
// const selectColumns = [
// {
// title: '学员名',
// key: 'nameRight',
// dataIndex: 'name',
// width: '70%',
// render: (value, record) => {
// const { name = '', avatar } = record;
// return (
// <div className='avatar'>
// <span className='icon iconfont avatar-icon'>&#xe84a;</span>
// <Tooltip title={name}>
// <span className='userImg'>{name}</span>
// </Tooltip>
// </div>
// );
// },
// },
// {
// title: '操作',
// key: 'edit',
// dataIndex: 'edit',
// width: '30%',
// align: 'right',
// render: (value, record) => {
// return (
// <div className='edit' onClick={() => this.clearOneUser(record)}>
// <span className='icon iconfont edit-icon'>&#xe717;</span>
// </div>
// );
// },
// },
// ];
// return selectColumns;
// };
// render() {
// const { type } = this.props;
// const { selectUserList, allUserList, searchKey, selectedRowKeys, openSetModal, isOpen, selectObject } = this.state;
// const title = type === 'USER' ? '添加员工' : '添加学员';
// return (
// <div>
// {/* 添加学员页面 */}
// <Modal
// className='choose-collaborator-modal'
// title={'选择协同者'}
// visible={true}
// onCancel={() => this.handleClose()}
// onOk={() => {}}
// width={680}
// maskClosable={false}
// okButtonProps={
// !_.isEmpty(selectUserList)
// ? {}
// : {
// disabled: true,
// }
// }
// closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
// <div className='member-container'>
// {/* 拥有文件夹权限的成员列表 */}
// <div className='container-left'>
// <div className='container-left-body'>
// <Search
// placeholder='搜索员工'
// value={searchKey}
// onSearch={this.handleSearch}
// onChange={this.handleChangeSearchKey}
// className='search search-input'
// enterButton={<span className='icon iconfont'>&#xe832;</span>}
// />
// <div className='container-left-body-table'>
// <XMTable
// rowKey={(record) => record.enterpriseVisibleUserId}
// dataSource={allUserList}
// columns={this.selectedColumnsLeft()}
// pagination={false}
// scroll={{ y: 290 }}
// renderEmpty={{
// image: searchKey ? search : college,
// description: '暂无数据',
// }}
// size={'small'}
// rowSelection={{
// columnWidth: 63,
// selectedRowKeys,
// onChange: this.onChangeRow,
// getCheckboxProps: this.getCheckboxProps,
// onSelectAll: (selected, selectedRows, changeRows) => {
// this.onSelectAll(selected, selectedRows, changeRows);
// },
// }}
// />
// </div>
// </div>
// </div>
// {/* 已选择的成员列表 */}
// <div className='container-right'>
// <span className='span-left'>已选择{type === 'USER' ? '员工' : '学员'}</span>
// <div className='span-right' onClick={() => this.clearAllUser()}>
// <span className={selectUserList.length > 0 ? 'span-right-l' : null}>清空</span>
// </div>
// <div className='container-right-body'>
// <XMTable
// renderEmpty={{
// image: college,
// description: '暂无数据',
// }}
// rowKey={(record) => record.enterpriseVisibleUserId}
// dataSource={selectUserList}
// columns={this.selectedColumnsRight()}
// showHeader={false}
// scroll={{ y: 375 }}
// pagination={false}
// size={'small'}
// />
// </div>
// </div>
// </div>
// </Modal>
// </div>
// );
// }
// }
export default ChooseCollaboratorModal; export default ChooseCollaboratorModal;
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