Skip to content

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

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

parent 1db69ba7
Showing with 462 additions and 795 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.jsx
......@@ -2,285 +2,137 @@
* @Author: yuananting
* @Date: 2021-08-05 17:09:36
* @LastEditors: yuananting
* @LastEditTime: 2021-08-05 19:43:57
* @LastEditTime: 2021-08-06 17:23:31
* @Description: 新建培训任务-选择指派对象
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Modal, Input, message, Tooltip, AutoComplete, Tabs } from 'antd';
import React, { useState, useEffect } from 'react';
import { Modal, Input, Tree, Dropdown, Tooltip, AutoComplete, Tabs } from 'antd';
import { XMTable } from '@/components';
// import college from '@/common/lottie/college.json';
// import Service from '@/common/js/service';
// import User from '@/common/js/user';
import User from '@/common/js/user';
// import SetEmployeeModal from './SetEmployeeModal';
// import search from '../../lottie/search/data.json';
// import MemberTree from '../components/MemberTree';
// import { DepType } from '@/domains/store-domain/constants';
// import StoreService from '@/domains/store-domain/storeService';
import { DepType } from '@/domains/store-domain/constants';
import StoreService from '@/domains/store-domain/storeService';
// import SearchUser from '../components/SearchUser';
// import WWOpenDataCom from '@/components/WWOpenDataCom';
// import './ChooseMembersModal.less';
import WWOpenDataCom from '@/components/WWOpenDataCom';
import './ChooseAssignorModal.less';
// import _ from 'underscore';
const { Search } = Input;
const { TabPane } = Tabs;
const { DirectoryTree } = Tree;
class ChooseAssignorModal extends React.Component {
constructor(props) {
super(props);
this.state = {
selectUserList: [],
selectObject: {},
openSetModal: false,
visible: this.props.visible,
completeOptions: [],
queryName: '',
open: false,
searchUserResultList: {},
};
}
componentDidMount() {}
handleClose = () => {
this.props.close();
};
// 信息列表——右边
selectedColumnsRight = () => {
const selectColumns = [
{
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;
};
function ChooseAssignorModal(props) {
const [structureData, setStructureData] = useState([]);
const [activeKey, setActiveKey] = useState('departMentTab');
treeSelect = (record) => {
// 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,
});
}
});
};
useEffect(() => {
getStructureData();
}, [activeKey]);
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,
});
function getStructureData() {
const params = {
distinct: true,
queryType: this.props.type,
depType: this.props.treeDepType,
queryName: value,
departmentTypeEnum: DepType[activeKey],
enterpriseId: User.getEnterpriseId(),
source: 0, //0代表来自企培
source: 0, // 0代表来自企培
storeId: User.getStoreId(),
userId: User.getUserId(),
whetherCount: false,
};
StoreService.getDepartmentUser(params).then((res) => {
const { result = {} } = res;
this.setState({
searchUserResultList: result,
StoreService.queryDepartmentTree(params).then((res) => {
const { result = [] } = res;
setStructureData(handleStructureData(result));
});
});
};
}
confirmSearchSelect = (record, type) => {
const { selectUserList } = this.state;
if (type === 'user') {
this.setState({ selectUserList: [...selectUserList, ...record] });
} else {
let _list = [];
if (record.departmentUserVOList) {
_list = record.departmentUserVOList;
function handleStructureData(dataArray) {
const _dataArray = dataArray.map((item, index) => {
item.key = item.id;
if (item.sonDepartmentVOList) {
item.children = item.sonDepartmentVOList;
handleStructureData(item.sonDepartmentVOList);
}
console.log('_list', _list);
this.setState({ selectUserList: [...selectUserList, ..._list] }, () => {
console.log('selectUserList', this.state.selectUserList);
return item;
});
return _dataArray;
}
};
render() {
const { type, treeDepType, selectDep = {}, addDepType = '' } = this.props;
const { id = '' } = selectDep;
const { selectUserList, selectObject, visible, openSetModal, searchUserResultList } = this.state;
const title = type === 'USER' ? '添加员工' : '添加学员';
function onSelectAssignor(value) {}
return (
<Modal title='添加指派对象' visible={true}>
<div className='choose-container'>
<div className='container-left'>
<Tabs>
<TabPane label='部门'></TabPane>
<TabPane label='岗位'></TabPane>
<TabPane label='自定义分组'></TabPane>
<Modal
className='choose-assignor-modal'
title='添加指派对象'
visible={true}
// onCancel={props.onClose}
onOk={() => {
// props.onConfirm(seletedAssignorList);
// props.onClose();
}}
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>
<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='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 className='container-right'></div>
<div></div>
</div>
</Modal>
);
}
}
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 @@
*/
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 college from '@/common/lottie/college.json';
import Service from '@/common/js/service';
......@@ -19,9 +19,11 @@ import _ from 'underscore';
const { Search } = Input;
function ChooseCollaboratorModal() {
const [searchKey, setSearchKey] = useState(null); // 搜索内容
function ChooseCollaboratorModal(props) {
const [searchKey, setSearchKey] = useState(''); // 搜索内容
const [employeeList, setEmployeeList] = useState([]); // 员工列表
const [seletedCollaboratorList, setSeletedCollaboratorList] = useState(props.currentCollaboratorList || []); // 勾选的协同人员
const [allChecked, setAllChecked] = useState(false);
useEffect(() => {
getEmployeeList();
......@@ -31,37 +33,30 @@ function ChooseCollaboratorModal() {
const params = {
current: 1,
size: 999,
nickName: '',
nickName: searchKey,
phone: '',
roleCodes: [],
};
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 leftParseColumns() {
const selectColumns = [
{
title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'nickName',
dataIndex: 'nickName',
render: (val) => {
return (
<div className='avatar'>
<span className='icon iconfont avatar-icon'>&#xe84a;</span>
<Tooltip title={val}>
<span className='userImg'>{val}</span>
</Tooltip>
</div>
);
},
},
{
dataIndex: 'depNameList',
key: 'depNameList',
render: (val, record) => {
function renderDepItem(record) {
if (!record.depNameList) {
return <span>-</span>;
}
......@@ -73,10 +68,82 @@ function ChooseCollaboratorModal() {
</span>
);
});
},
},
];
return selectColumns;
}
function handleSeletedCollaborator(e) {
const { value, checked } = e.target;
let _seletedCollaboratorList = [...seletedCollaboratorList];
let _employeeList = [];
if (checked) {
_employeeList = employeeList.map((item) => {
if (item.id === value.id) {
item.checked = true;
}
return item;
});
_seletedCollaboratorList.push({ ...value, checked: true });
} else {
_employeeList = employeeList.map((item) => {
if (item.id === value.id) {
item.checked = false;
}
return item;
});
_seletedCollaboratorList = seletedCollaboratorList.filter((item) => item.id !== value.id);
}
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 (
......@@ -84,386 +151,81 @@ function ChooseCollaboratorModal() {
className='choose-collaborator-modal'
title='选择协同者'
visible={true}
// onCancel={() => this.handleClose()}
onOk={() => {}}
onCancel={props.onClose}
onOk={() => {
props.onConfirm(seletedCollaboratorList);
props.onClose();
}}
width={680}
maskClosable={false}>
<div className='choose-container'>
<div className='collaborator-container'>
<div className='left-list'>
<Search
placeholder='搜索员工'
value={searchKey}
onChange={(value) => setSearchKey(value)}
onChange={(e) => setSearchKey(e.target.value.trim())}
onSearch={getEmployeeList}
className='search search-input'
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
<div className='container-left-body-table'>
<XMTable
rowKey={(record) => record.enterpriseVisibleUserId}
<div className='data-body'>
<List
header={
<Checkbox checked={allChecked} onChange={handleSeletedAll}>
全部
</Checkbox>
}
dataSource={employeeList}
columns={leftParseColumns()}
pagination={false}
scroll={{ y: 370 }}
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);
// },
// }}
renderItem={(item, index) => (
<List.Item>
<Checkbox checked={item.checked} value={item} key={item.id} onChange={handleSeletedCollaborator}>
<div className='employee-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='dep-info'>{renderDepItem(item)}</span>
</div>
</Checkbox>
</List.Item>
)}
/>
</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>
</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;
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