Skip to content

X
xiaomai-cloud-class-web
Commit 82905161 by yuananting
Options

zancun

parent 0d3ce089
Showing with 493 additions and 3 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-04 17:25:40
* @LastEditTime: 2021-08-05 17:53:15
* @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -15,6 +15,8 @@ import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
import ImgClipModal from '@/components/ImgClipModal';
import moment from 'moment';
import './BasicInfo.less';
import ChooseAssignorModal from '../modal/ChooseAssignorModal';
import ChooseCollaboratorModal from '../modal/ChooseCollaboratorModal';
const { RangePicker } = DatePicker;
......@@ -32,6 +34,9 @@ function BasicInfo(props) {
const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
const isDefaultCover = coverUrl === defaultCover;
const [assignorModalVisible, setAssignorModalVisible] = useState(false); // 指派对象弹窗显隐
const [collaboratorModalVisible, setCollaboratorModalVisible] = useState(false); // 协同者弹窗显隐
useEffect(() => {
updateCover();
}, [coverId]);
......@@ -216,7 +221,13 @@ function BasicInfo(props) {
</span>
}
required>
<Button style={{ display: 'block' }}>添加指派对象</Button>
<Button
style={{ display: 'block' }}
onClick={() => {
setAssignorModalVisible(true);
}}>
添加指派对象
</Button>
{assignList > 0 && (
<Space size={'12'} direction={'vertical'} className='select-obj'>
{assignList.length > 0 && (
......@@ -261,7 +272,13 @@ function BasicInfo(props) {
</Tooltip>
</span>
}>
<Button style={{ display: 'block' }}>添加协同者</Button>
<Button
style={{ display: 'block' }}
onClick={() => {
setCollaboratorModalVisible(true);
}}>
添加协同者
</Button>
{helpStoreUserIds.length > 0 && (
<div className='select-obj'>
{_.map(helpStoreUserIds, (item) => {
......@@ -310,6 +327,30 @@ function BasicInfo(props) {
}}
/>
)}
{assignorModalVisible && (
<ChooseAssignorModal
visible={assignorModalVisible}
type='CUSTOMER'
treeDepType={'DEP_CHAT'}
close={() => {
// closeChooseMembersModal();
}}
onConfirm={() => {
// confirmAddCustomer();
}}
/>
)}
{collaboratorModalVisible && (
<ChooseCollaboratorModal
visible={collaboratorModalVisible}
close={() => {
// closeChooseMembersModal();
}}
onConfirm={() => {
// confirmAddCustomer();
}}
/>
)}
</div>
);
}
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-08-05 17:09:36
* @LastEditors: yuananting
* @LastEditTime: 2021-08-05 19:43:57
* @Description: 新建培训任务-选择指派对象
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Modal, Input, message, 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 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 SearchUser from '../components/SearchUser';
// import WWOpenDataCom from '@/components/WWOpenDataCom';
// import './ChooseMembersModal.less';
// import _ from 'underscore';
const { Search } = Input;
const { TabPane } = Tabs;
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;
};
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,
});
}
});
};
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 = {
distinct: true,
queryType: this.props.type,
depType: this.props.treeDepType,
queryName: value,
enterpriseId: User.getEnterpriseId(),
source: 0, //0代表来自企培
storeId: User.getStoreId(),
userId: User.getUserId(),
whetherCount: false,
};
StoreService.getDepartmentUser(params).then((res) => {
const { result = {} } = res;
this.setState({
searchUserResultList: 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;
}
console.log('_list', _list);
this.setState({ selectUserList: [...selectUserList, ..._list] }, () => {
console.log('selectUserList', this.state.selectUserList);
});
}
};
render() {
const { type, treeDepType, selectDep = {}, addDepType = '' } = this.props;
const { id = '' } = selectDep;
const { selectUserList, selectObject, visible, openSetModal, searchUserResultList } = this.state;
const title = type === 'USER' ? '添加员工' : '添加学员';
return (
<Modal title='添加指派对象' visible={true}>
<div className='choose-container'>
<div className='container-left'>
<Tabs>
<TabPane label='部门'></TabPane>
<TabPane label='岗位'></TabPane>
<TabPane label='自定义分组'></TabPane>
</Tabs>
</div>
<div className='container-right'></div>
<div></div>
</div>
</Modal>
);
}
}
export default ChooseAssignorModal;
src/modules/task-center/train-task/modal/ChooseCollaboratorModal.less 0 → 100644
.choose-collaborator-modal {
.choose-container {
display: flex;
.left-list {
width: 50%;
margin-right: 24px;
padding: 12px 16px;
border: 1px solid #e8e8e8;
}
.right-list {
width: 50%;
}
}
}
// .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