Skip to content

X
xiaomai-cloud-class-web
Commit c80863f2 by wufan
Options

fix:修复角色管理样式问题

parent 963e3708
Showing with 200 additions and 234 deletions
src/modules/college-manage/EmployeeManage.tsx
......@@ -5,21 +5,21 @@
* @Last Modified time: 2021-04-10 14:36:43
* 学院管理-员工管理
*/
import React, { useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import _ from 'underscore';
import { CheckBox, PageControl } from '@/components';
import { Button, Table, Modal, message, Input, Tooltip } from 'antd';
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import { CheckBox, PageControl } from "@/components";
import { Button, Table, Modal, message, Input,Tooltip} from "antd";
import { XMTable } from '@/components';
import college from '@/common/lottie/college.json';
import StoreService from '@/domains/store-domain/storeService';
import EmployeeAddOrEditModal from '../store-manage/EmployeeAddOrEditModal';
import User from '@/common/js/user';
import LimitTip from './LimitTip';
import StoreService from "@/domains/store-domain/storeService";
import EmployeeAddOrEditModal from "../store-manage/EmployeeAddOrEditModal";
import User from "@/common/js/user";
import LimitTip from "./LimitTip";
import WWOpenDataCom from '@/components/WWOpenDataCom';
import './EmployeeManage.less';
import NewChooseMembersModal from './modal/NewChooseMembersModal';
import "./EmployeeManage.less";
import NewChooseMembersModal from "./modal/NewChooseMembersModal";
const { confirm } = Modal;
const { Search } = Input;
......@@ -33,7 +33,7 @@ interface RecordTypes {
phone: string;
avatar?: string;
weChatAccount?: string;
depNameList: any;
depNameList:any
}
interface RoleItemType {
......@@ -58,7 +58,7 @@ interface ChoosedItemType {
avatar?: string;
storeUserId?: string;
weChatAccount?: string;
depNameList?: any;
depNameList?:any;
}
function EmployeeManage() {
......@@ -66,25 +66,25 @@ function EmployeeManage() {
const [query, setQuery] = useState<QueryType>({
current: 0,
size: 10,
nickName: '',
phone: '',
nickName: "",
phone: "",
roleCodes: [],
});
const [total, setTotal] = useState(0);
const [realTotal, setRealTotal] = useState(0);
const [realTotal, setRealTotal] = useState(0)
const [model, setModel] = useState<React.ReactNode>(null);
const [employeeModal, setEmployeeModal] = useState(false);
const [choosedItem, setChooseItem] = useState<ChoosedItemType>({
nickName: '',
phone: '',
nickName: "",
phone: "",
role: [],
avatar: '',
avatar: "",
});
const [roleIds, setRoleIds] = useState<Array<RoleItemType>>([]);
const storeId = User.getStoreId();
const StoreType = User.getStoreType();
const isWorkWechat = !!(StoreType === 'WE_CHAT_STORE');
const isWorkWechat = !!(StoreType === "WE_CHAT_STORE");
useEffect(() => {
if (!User.getEnterpriseId()) {
......@@ -94,14 +94,14 @@ function EmployeeManage() {
const _query = {
current: 0,
size: 10,
nickName: '',
phone: '',
nickName: "",
phone: "",
roleCodes: [],
};
}
StoreService.getEmployeeList(_query).then((res: any) => {
setRealTotal(res.result.total);
});
}, []);
}, [])
useEffect(() => {
getEmployeeList();
......@@ -130,7 +130,7 @@ function EmployeeManage() {
const _query = { ...query };
let _data = _.filter(data, (_item) => {
return _item.roleCode !== 'StoreManager';
return _item.roleCode !== "StoreManager";
});
setRoleIds(_data);
......@@ -145,21 +145,29 @@ function EmployeeManage() {
fixed:'left',
render: (val: string, record: RecordTypes) => {
return (
<div className='employee-info'>
{isWorkWechat && <img src={record.avatar || 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'} alt='' />}
<div className="employee-info">
{isWorkWechat && (
<img
src={
record.avatar ||
"https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
}
alt=""
/>
)}
{/* <span className="title">{val}</span> */}
<span className='title'>
<WWOpenDataCom type='userName' openid={val} />
<span className="title">
<WWOpenDataCom type="userName" openid={val}/>
</span>
</div>
);
},
},
{
title: '手机号',
dataIndex: 'phone',
key: 'phone',
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val || '-'}</div>;
},
......@@ -172,8 +180,8 @@ function EmployeeManage() {
if(!record.depNameList){
return <span>-</span>
}
if (record.depNameList.length === 0) {
return <span>-</span>;
if(record.depNameList.length === 0){
return <span>-</span>
}
return <Tooltip title={<div>{handleDepName(record.depNameList)}</div>} placement='top' arrowPointAtCenter><div className="post-name"> {record.depNameList.map((item:any, index:any) => {
return <span><WWOpenDataCom type="departmentName" openid={item}/>{index<(record.depNameList.length -1)?'；':''}</span>
......@@ -187,7 +195,7 @@ function EmployeeManage() {
dataIndex: "role",
key: "role",
render: (val: string) => {
return <div>{val.split('，').join('、')}</div>;
return <div>{val.split("，").join("、")}</div>;
},
},
{
......@@ -195,19 +203,34 @@ function EmployeeManage() {
dataIndex: "operation",
fixed:'right',
render: (val: string, record: RecordTypes) => {
return record.role === '学院管理员' || record.userId === User.getUserId() ? (
<div className='no-operate'>-</div>
return record.role === "学院管理员" ||
record.userId === User.getUserId() ? (
<div className="no-operate">-</div>
) : (
<div className='operation'>
<span className='edit' onClick={() => handleEditEmployee(record)}>
编辑
</span>
<span className='divider-line'>{' | '}</span>
<div className="operation">
{!record.depNameList &&
<span className="edit edit-disable">
编辑
</span>
}
{record.depNameList &&
(record.depNameList.length > 0 ?
<span className="edit" onClick={() => handleEditEmployee(record)}>
编辑
</span>
:
<span className="edit edit-disable">
编辑
</span>
)
}
<span className="divider-line">{" | "}</span>
<span
className='delete'
onClick={() => {
handleDeleteWorkWechatEmployeeConfirm(record);
}}>
className="delete"
onClick={() =>{
handleDeleteWorkWechatEmployeeConfirm(record)
}}
>
删除
</span>
</div>
......@@ -218,9 +241,9 @@ function EmployeeManage() {
if (isWorkWechat && columns) {
const item = {
title: '企业微信账号',
dataIndex: 'weChatAccount',
key: 'weChatAccount',
title: "企业微信账号",
dataIndex: "weChatAccount",
key: "weChatAccount",
render: (val: string) => {
return <div>{val}</div>;
},
......@@ -230,19 +253,15 @@ function EmployeeManage() {
return columns;
}
function handleDepName(depArray: any): any {
const depArrayDom = depArray.map((item: any, index: any) => {
return (
<span>
<WWOpenDataCom type='departmentName' openid={item} />；
</span>
);
function handleDepName(depArray:any):any{
const depArrayDom = depArray.map((item:any, index:any) => {
return <span><WWOpenDataCom type="departmentName" openid={item}/>；</span>
});
return depArrayDom;
}
};
function handleEditEmployee(record: RecordTypes) {
const { nickName, phone, roleCodes, avatar, id, weChatAccount, depNameList } = record;
const { nickName, phone, roleCodes, avatar, id, weChatAccount,depNameList} = record;
const _choosesItem = {
nickName: nickName,
phone: phone,
......@@ -250,7 +269,7 @@ function EmployeeManage() {
avatar: avatar,
storeUserId: id,
weChatAccount,
depNameList: depNameList,
depNameList:depNameList
};
setChooseItem(_choosesItem);
const model: React.ReactNode = (
......@@ -260,13 +279,13 @@ function EmployeeManage() {
setModel(null);
getEmployeeList();
setChooseItem({
nickName: '',
phone: '',
nickName: "",
phone: "",
role: [],
avatar: '',
storeUserId: '',
weChatAccount: '',
depNameList: [],
avatar: "",
storeUserId: "",
weChatAccount:"",
depNameList:[]
});
}}
isWorkWechat={isWorkWechat}
......@@ -277,12 +296,14 @@ function EmployeeManage() {
function handleDeleteWorkWechatEmployeeConfirm(record: RecordTypes) {
return confirm({
title: '你确定要删除此员工吗？',
content: '删除后数据无法恢复',
icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: '删除',
okType: 'danger',
cancelText: '取消',
title: "你确定要删除此员工吗？",
content: "删除后数据无法恢复",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
handleDeleteEmployee(record.id);
},
......@@ -295,21 +316,21 @@ function EmployeeManage() {
function handleDeleteEmployee(storeUserId: string) {
StoreService.deleteEmployee({ storeUserId }).then((res: any) => {
const msg = isWorkWechat ? '员工已删除' : '讲师已删除';
const msg = isWorkWechat ? "员工已删除":"讲师已删除";
message.success(msg);
getEmployeeList();
});
}
function updateListData() {
let num: any;
function updateListData(){
let num:any;
const params = {
enterpriseId: User.getEnterpriseId(),
storeId: User.getStoreId(),
userType: 'USER',
};
enterpriseId:User.getEnterpriseId(),
storeId:User.getStoreId(),
userType:'USER'
}
StoreService.getSyncCount(params).then((res) => {
num = res.result;
if (num < 3) {
if(num<3){
return confirm({
title: "确定更新列表数据吗？",
content: <span>员工数据来源企微通讯录，一天只能更新3次，今日还能更新<span style={{color:'#2966FF'}}>{3-num}</span>次。</span>,
......@@ -319,10 +340,10 @@ function EmployeeManage() {
okText: "确定",
cancelText: "取消",
onOk: () => {
confirmUpdateListData();
confirmUpdateListData()
},
});
} else {
}else{
Modal.warning({
title: '提示',
okText: '我知道了',
......@@ -335,104 +356,112 @@ function EmployeeManage() {
});
}
});
}
function confirmUpdateListData() {
function confirmUpdateListData(){
const params = {
enterpriseId: User.getEnterpriseId(),
storeId: User.getStoreId(),
userType: 'USER',
};
enterpriseId:User.getEnterpriseId(),
storeId:User.getStoreId(),
userType:'USER'
}
StoreService.syncWorkWeChatDepartment(params).then((res) => {
getEmployeeList();
message.success('已更新');
});
}
return (
<div className='page employee-manage-page'>
<div className='content-header'>角色管理</div>
<div className='box'>
<div className='box-header'>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
padding: '0px 0 4px',
}}>
<div>
<div className="page employee-manage-page">
<div className="content-header">角色管理</div>
<div className="box">
<div className="box-header">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
padding: "0px 0 4px",
}}
>
<div>
搜索员工：
<Search
style={{
width: 300,
marginRight: 40,
}}
placeholder={isWorkWechat ? '请输入员工昵称' : '搜索员工昵称/手机号'}
onSearch={(value) => {
const _query = { ...query };
// 企业微信用户只能搜索员工昵称
if (isWorkWechat) {
_query.nickName = value;
_query.current = 0;
setQuery(_query);
return;
}
if (value) {
const isPhone = (value || '').match(/^\d+$/);
const name = isPhone ? 'phone' : 'nickName';
const otherName = isPhone ? 'nickName' : 'phone';
_query[name] = value;
_query[otherName] = '';
_query.current = 0;
} else {
_query.nickName = '';
_query.phone = '';
_query.current = 0;
<Search
style={{
width: 300,
marginRight: 40,
}}
placeholder={
isWorkWechat ? "请输入员工昵称" : "搜索员工昵称/手机号"
}
setQuery(_query);
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div>
onSearch={(value) => {
const _query = { ...query };
// 企业微信用户只能搜索员工昵称
if (isWorkWechat) {
_query.nickName = value;
_query.current = 0;
setQuery(_query);
return;
}
<div>
角色：
{_.map(roleIds, (item: any) => {
return (
<CheckBox
key={item.roleCode}
text={item.name}
name={item.roleCode}
onChange={(e: any) => {
const { checked, name } = e.target;
const _query = { ...query };
_query.roleCodes = [];
if (value) {
const isPhone = (value || "").match(/^\d+$/);
const name = isPhone ? "phone" : "nickName";
const otherName = isPhone ? "nickName" : "phone";
_query[name] = value;
_query[otherName] = "";
_query.current = 0;
const _roleIds: Array<RoleItemType> = roleIds.map((_item: RoleItemType) => {
if (name === _item.roleCode) {
if (checked) {
_item.isChecked = true;
} else {
_item.isChecked = false;
} else {
_query.nickName = "";
_query.phone = "";
_query.current = 0;
}
setQuery(_query);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div>
角色：
{_.map(roleIds, (item: any) => {
return (
<CheckBox
key={item.roleCode}
text={item.name}
name={item.roleCode}
onChange={(e: any) => {
const { checked, name } = e.target;
const _query = { ...query };
_query.roleCodes = [];
_query.current = 0;
const _roleIds: Array<RoleItemType> = roleIds.map(
(_item: RoleItemType) => {
if (name === _item.roleCode) {
if (checked) {
_item.isChecked = true;
} else {
_item.isChecked = false;
}
}
if (_item.isChecked) {
_query.roleCodes.push(_item.roleCode);
}
return _item;
}
}
if (_item.isChecked) {
_query.roleCodes.push(_item.roleCode);
}
return _item;
});
);
setRoleIds(_roleIds);
setQuery(_query);
}}
defaultChecked={item.isChecked}
/>
);
})}
setRoleIds(_roleIds);
setQuery(_query);
}}
defaultChecked={item.isChecked}
/>
);
})}
</div>
</div>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') &&
<div>
<>
<Button
onClick={() => {
handleToAddEmployee();
......@@ -450,7 +479,7 @@ function EmployeeManage() {
>
<span className="view-text">查看说明</span>
</a>
</div>
</>
}
</div>
<LimitTip type="员工" total={realTotal} tip={()=>{return (<div>数据为当前学院的员工数，若员工存在多个学院，企业人数只统计为1人</div>)}}/>
......@@ -481,84 +510,21 @@ function EmployeeManage() {
}}
/>
</div>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<>
<Button
onClick={() => {
handleToAddEmployee();
}}
type='primary'
className='add-show-btn'>
添加员工
</Button>
<Button
className='update-user-btn'
onClick={() => {
updateListData();
}}>
更新列表数据
</Button>
<span className='origin-text'>数据来源企业微信通讯录</span>
<a href='https://www.yuque.com/wangzhong-zkqw0/qixue' target='_blank'>
<span className='view-text'>查看数据更新说明</span>
</a>
</>
)}
</div>
<LimitTip
type='员工'
total={realTotal}
tip={() => {
return <div>数据为当前学院的员工数，若员工存在多个学院，企业人数只统计为1人</div>;
}}
/>
<div className='box-body'>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
size={'middle'}
pagination={false}
dataSource={employeeList}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
{model}
{employeeModal && (
<NewChooseMembersModal
treeDepType='DEP_CHAT'
visible={employeeModal}
type='USER'
close={() => {
setEmployeeModal(false);
}}
onConfirm={() => {
setEmployeeModal(false);
message.success('添加成功');
getEmployeeList();
}}
/>
)}
{model}
{employeeModal && (
{ employeeModal &&
<NewChooseMembersModal
treeDepType='DEP_CHAT'
treeDepType="DEP_CHAT"
visible={employeeModal}
type='USER'
close={() => {
setEmployeeModal(false);
}}
type="USER"
close={()=>{setEmployeeModal(false)}}
onConfirm={() => {
setEmployeeModal(false);
message.success('添加成功');
setEmployeeModal(false)
message.success('添加成功')
getEmployeeList();
}}
}}
/>
)}
</div>
}
</div>
);
}
......
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