Skip to content

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

feat:员工管理联调

parent 268f5fd7
Showing with 342 additions and 134 deletions
src/common/images/xiaomai-IMG.png
src/common/images/xiaomai-IMG.png

6.55 KB | W: | H:

src/common/images/xiaomai-IMG.png

6.53 KB | W: | H:

src/common/images/xiaomai-IMG.png
src/common/images/xiaomai-IMG.png
src/common/images/xiaomai-IMG.png
src/common/images/xiaomai-IMG.png
  • 2-up
  • Swipe
  • Onion skin
src/common/js/axios.ts
/*
* @Author: 吴文洁
* @Date: 2020-08-31 09:34:31
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-03 10:19:49
* @LastEditors: wufan
* @LastEditTime: 2020-12-04 15:07:46
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -32,7 +32,7 @@ class Axios {
params: any,
options: FetchOptions = { requestType: 'json' }
): Promise<any> {
const _url = `${url}?storeId=${USER_TYPE}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`;
const _url = `${url}?storeId=${User.getStoreId()}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`;
return new Promise((resolve, reject) => {
const instance: AxiosInstance = axios.create({
......
src/core/antd.less
......@@ -83,10 +83,10 @@
}
.ant-radio {
.ant-radio-inner {
width: 14px !important;
height: 14px !important;
}
// .ant-radio-inner {
// width: 14px !important;
// height: 14px !important;
// }
.ant-radio-inner:after {
height: 8px !important;
......
src/data-source/store/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-12-01 20:45:54
* @LastEditTime: 2020-12-04 10:52:49
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -21,5 +21,17 @@ export function getUserList(params: object) {
}
export function getStoreDecorationList(params: object) {
return Service.Apollo("public/store/getStoreBannerList", params);
return Service.Hades("public/store/getStoreBannerList", params);
}
export function addEmployee(params: object) {
return Service.Hades("public/store/addStoreUser", params);
}
export function editEmployee(params: object) {
return Service.Hades("public/store/editStoreUser", params);
}
export function deleteEmployee(params: object) {
return Service.Hades("public/store/delStoreUser", params);
}
src/domains/store-domain/storeService.ts
......@@ -2,11 +2,11 @@
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-12-01 18:13:50
* @LastEditTime: 2020-12-04 10:52:26
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole } from '@/data-source/store/request-apis';
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee } from '@/data-source/store/request-apis';
export default class StoreService {
// 获取员工列表
......@@ -21,7 +21,17 @@ export default class StoreService {
// 删除员工
static deleteEmployee(params: any) {
return getUserList(params);
return deleteEmployee(params);
}
// 添加员工
static addEmployee(params: any) {
return addEmployee(params);
}
// 编辑员工
static editEmployee(params: any) {
return editEmployee(params);
}
// 获取用户列表
......
src/modules/root/App.tsx
/*
* @Author: 吴文洁
* @Date: 2019-07-10 10:30:49
<<<<<<< Updated upstream
* @LastEditors: wufan
* @LastEditTime: 2020-12-02 18:02:14
=======
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-02 19:47:15
>>>>>>> Stashed changes
* @Description:
*/
import React, { useContext, useEffect } from 'react';
import { withRouter} from 'react-router-dom';
import {ConfigProvider } from 'antd';
......@@ -43,7 +32,7 @@ const App: React.FC = (props: any) => {
function getStoreGroupAndStoreList() {
BaseService.getUserStore({ userId }).then((res) => {
const { storeGroupVOS = [], storeVOS } = res.result;
const { storeGroupVOS = [], storeVOS = [] } = res.result;
const { id, storeUserId} = storeVOS[0];
User.setStoreId(id);
......
src/modules/store-manege/EmployeeAddOrEditModal.tsx
......@@ -2,53 +2,81 @@
* @Author: wufan
* @Date: 2020-11-27 16:21:49
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 15:46:10
* @LastEditTime: 2020-12-04 15:02:22
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useEffect } from "react";
import { Modal, Form, Button, Input, Radio, Row, Col, message } from "antd";
import _ from "underscore";
import {
Modal,
Form,
Button,
Input,
InputNumber,
Radio,
Row,
Col,
message,
} from "antd";
import _, { values } from "underscore";
import "./EmployeeAddOrEditModal.less";
import baseImg from "@/common/images/xiaomai-IMG.png";
import { CropperModal } from "@/components/";
import StoreService from "@/domains/store-domain/storeService";
import UpLoad from "../common/UpLoad";
import $ from 'jquery';
import $ from "jquery";
import User from "@/common/js/user";
const RadioGroup = Radio.Group;
declare let window: any;
interface AddEmployeeModalProps {
isOpen: boolean;
choosedItem: {
name?: string;
nickName?: string;
phone?: string;
role?: string;
role: Array<string>;
avatar?: string;
storeUserId?: string;
};
onClose: (e: any) => void;
onClose: () => void;
}
function AddEmployeeModal(props: AddEmployeeModalProps) {
const [name, setName] = useState("");
const [nickName, setName] = useState("");
const [phone, setPhone] = useState("");
const [role, setRole] = useState('1');
const [role, setRole] = useState("CloudLecturer");
const [avatar, setAvatar] = useState(baseImg);
const storeUserId = props.choosedItem.storeUserId;
const [imgUrl, setImgUrl] = useState(avatar);
const [nameErrorMsg, setNameErrorMsg] = useState("");
const [nameStatus, setNameStatus] = useState("");
const [nameStatus, setNameStatus] = useState<
"" | "error" | "success" | "warning" | "validating" | undefined
>();
const [phoneErrorMessage, setPhoneErrorMessage] = useState("");
const [phoneStatus, setPhoneStatus] = useState("");
const [phoneStatus, setPhoneStatus] = useState<
"" | "error" | "success" | "warning" | "validating" | undefined
>();
const [cropperModalVisible, setCropperModalVisible] = useState(false);
const [form] = Form.useForm();
useEffect(() => {
if (props.choosedItem.name) {
console.log("props.choosedItem",props.choosedItem);
setName(props.choosedItem.name);
if (props.choosedItem.nickName) {
console.log("props.choosedItem", props.choosedItem);
setName(props.choosedItem.nickName);
props.choosedItem.phone && setPhone(props.choosedItem.phone);
props.choosedItem.role && setRole(props.choosedItem.role);
props.choosedItem.role && setRole(props.choosedItem.role[0]);
props.choosedItem.avatar && setAvatar(avatar || baseImg);
const _role = props.choosedItem.role[0] === "讲师" ? "CloudLecturer" : "CloudManager";
form.setFieldsValue({
nickName: props.choosedItem.nickName,
role: _role,
phone: props.choosedItem.phone,
avatar: props.choosedItem.avatar
});
}
}, [props.choosedItem]);
}, [props.choosedItem.nickName]);
const layout = {
labelCol: { span: 5 },
......@@ -89,30 +117,95 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
}
function handleOk(): void {
if(!name.trim()){
setNameErrorMsg("请输入讲师姓名");
const values = form.getFieldsValue();
console.log("values", values);
if (!values.nickName.trim()) {
setNameErrorMsg("请输入员工姓名");
setNameStatus("error");
return;
}
if(!phone.trim()){
setNameErrorMsg("");
setNameStatus("");
if (!String(values.phone)) {
setPhoneErrorMessage("请输入手机号码");
setNameStatus("error");
setPhoneStatus("error");
return;
}
if(phone.trim().length !== 11){
setPhoneErrorMessage("");
setPhoneStatus("");
if (String(values.phone).length !== 11) {
setPhoneErrorMessage("请输入11位手机号");
setNameStatus("error");
setPhoneStatus("error");
return;
}
setPhoneErrorMessage("");
setPhoneStatus("");
props.choosedItem.nickName ? handleEditEmployee() : handleAddEmployee();
}
console.log("role",name,phone,role);
const [form] = Form.useForm();
function handleChangeValues(name: string, value: any) {
switch (name) {
case "nickName":
form.setFieldsValue({ nickName: value });
setName(value);
return;
case "phone":
form.setFieldsValue({ phone: value });
setPhone(value);
return;
case "role":
form.setFieldsValue({ role: value });
setRole(value);
return;
default:
break;
}
}
function handleAddEmployee() {
const params = {
nickName,
phone: String(phone),
roleCodes:[role],
// avatar,
storeId:User.getStoreId()
};
console.log("params",params);
StoreService.addEmployee(params).then((res) => {
message.success("保存成功");
props.onClose();
});
}
function handleEditEmployee() {
const params = {
nickName,
phone: String(phone),
roleCodes:[role],
// avatar,
storeUserId:storeUserId
};
console.log("params",params);
StoreService.editEmployee(params).then((res) => {
message.success("编辑成功");
props.onClose();
});
}
console.log("values",form,form.getFieldsValue())
return (
<Modal
visible={props.isOpen}
title={`${props.choosedItem.name ? "编辑员工" : "添加员工"}`}
title={`${props.choosedItem.nickName ? "编辑员工" : "添加员工"}`}
className="employee-add-modal"
width={680}
onCancel={props.onClose}
......@@ -124,22 +217,23 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
{...layout}
form={form}
name="basic"
initialValues={{ name:"是电放费", phone: phone, role: role }}
initialValues={{ nickName: nickName, phone: phone, role: role }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="员工姓名"
name="name"
rules={[{ required: true}]}
// validateStatus={nameStatus}
name="nickName"
rules={[{ required: true }]}
validateStatus={nameStatus}
help={nameErrorMsg}
>
<Input
style={{ width: 200 }}
// value={name}
// value={nickName}
placeholder="请输入员工名称"
maxLength={15}
onChange={(e) => handleChangeValues("nickName", e.target.value)}
/>
</Form.Item>
......@@ -147,15 +241,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
label="手机号码"
name="phone"
rules={[{ required: true }]}
// validateStatus={phoneStatus}
validateStatus={phoneStatus}
help={phoneErrorMessage}
>
<Input
<InputNumber
style={{ width: 200 }}
// value={phone}
placeholder="请输入手机号"
maxLength={11}
disabled={!!props.choosedItem.name}
disabled={!!props.choosedItem.nickName}
onChange={(value) => handleChangeValues("phone", value)}
/>
</Form.Item>
......@@ -167,16 +262,16 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
<RadioGroup
// value={role}
onChange={(e) => {
handleChangeRole(e.target.value);
handleChangeValues("role", e.target.value);
}}
>
<Radio value={"1"}>
<Radio value={"CloudLecturer"}>
<span style={{ color: "#333" }}>普通讲师</span>
<p className="radio-tip">
仅可查看/使用与自己相关的文件和课表，并进行上课
</p>
</Radio>
<Radio value={"0"}>
<Radio value={"CloudManager"}>
<span style={{ color: "#333" }}>管理员</span>
<p className="radio-tip">可执行店铺中所有的操作</p>
</Radio>
......
src/modules/store-manege/EmployeesManagePage.tsx
......@@ -9,61 +9,97 @@ import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import { CheckBox } from "@/components";
import { CheckBox, SearchBar } from "@/components";
import { Button, Table, Tooltip, Modal, message, Row, Col, Input } from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';
import { QuestionCircleOutlined } from "@ant-design/icons";
import { storeRoleEnum } from "@/domains/store-domain/constants";
import StoreService from "@/domains/store-domain/storeService";
import EmployeeAddOrEditModal from './EmployeeAddOrEditModal';
import User from '@/common/js/user';
import EmployeeAddOrEditModal from "./EmployeeAddOrEditModal";
import User from "@/common/js/user";
import "./EmployeesManagePage.less";
import { string } from "prop-types";
const { confirm } = Modal;
const { Search } = Input;
declare var window: any;
interface RecordTypes {
storeUserId: string,
role: string
id: string;
role: string;
roleCodes: Array<string>;
userId: string;
nickName: string;
phone: string;
avatar?: string;
}
interface RoleItemType {
isChecked: boolean;
roleCode: string;
name: string;
id: string;
}
interface QueryType {
current: number;
size: number;
nickName?: string;
phone?: string;
roleCodes: Array<string>;
storeId: string | undefined | null;
}
interface ChoosedItemType {
nickName?: string;
phone?: string;
role: Array<string>;
avatar?: string;
storeUserId?: string;
}
function EmployeesManagePage() {
const [employeeList, setEmployeeList] = useState([
{
nickName: "赵云",
phone: "18767118672",
role: "0",
storeUserId: "0"
},
{
nickName: "吕布",
phone: "18767118672",
role: "0",
storeUserId: "2"
}
]);
const [query, setQuery] = useState({
const [employeeList, setEmployeeList] = useState([]);
const [query, setQuery] = useState<QueryType>({
current: 0,
size: 10,
nickName: "",
phone: "",
roleId: [],
roleCodes: [],
storeId: User.getStoreId(),
});
const [valueLike, setValueLike] = useState();
const [total, setTotal] = useState(0);
const [model, setModel] = useState(null);
const [model, setModel] = useState<React.ReactNode>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState({});
const [roleIds, setRoleIds] = useState([]);
const [choosedItem, setChooseItem] = useState<ChoosedItemType>({
nickName: "",
phone: "",
role: [],
avatar: "",
});
const [roleIds, setRoleIds] = useState<Array<RoleItemType>>([]);
const roleMap = {
CloudManager: "管理员",
CloudLecturer: "讲师",
};
const storeId = User.getStoreId();
useEffect(() => {
getEmployeeList();
getStoreRole();
}, [query]);
useEffect(() => {
getListInfo();
}, [storeId]);
async function getListInfo() {
await getStoreRole();
await getEmployeeList();
}
function getEmployeeList() {
let _query = _.clone(query);
_query.current = query.current + 1;
......@@ -75,10 +111,17 @@ function EmployeesManagePage() {
}
function getStoreRole() {
const storeId = User.getStoreId();
StoreService.getStoreRole({ storeId }).then((res: any) => {
setRoleIds(res.result);
const data = [...res.result];
const _query = { ...query };
const _data = data.map((item: any) => {
item.isChecked = true;
_query.roleCodes.push(item.roleCode);
return item;
});
setQuery(_query);
setRoleIds(_data);
});
}
......@@ -107,22 +150,20 @@ function EmployeesManagePage() {
title: "身份",
dataIndex: "role",
key: "role",
render: (val: string, record: RecordTypes) => {
return <div>{/* {storeRoleEnum[val]} */}</div>;
render: (val: string) => {
return <div>{val.split("，").join("、")}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: RecordTypes) => {
return record.role === "" || record.role === "1" ? (
return record.role === "店铺管理员" ||
record.userId === User.getUserId() ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
<span
className="edit"
onClick={() => handleEditEmployee(record)}
>
<span className="edit" onClick={() => handleEditEmployee(record)}>
编辑
</span>
<span className="divider-line">{" | "}</span>
......@@ -139,33 +180,48 @@ function EmployeesManagePage() {
];
}
function handleEditEmployee(record: object) {
setChooseItem(record);
setIsModalOpen(true);
function handleEditEmployee(record: RecordTypes) {
const { nickName, phone, roleCodes, avatar } = record;
const _choosesItem = {
nickName: nickName,
phone: phone,
role: roleCodes,
avatar: avatar,
};
setChooseItem(_choosesItem);
const model:React.ReactNode= <EmployeeAddOrEditModal
isOpen={true}
choosedItem={_choosesItem}
onClose={() => {
setModel(null);
getEmployeeList();
}}
/>
setModel(model);
}
function handleDeleteEmployeeConfirm(record: RecordTypes) {
return confirm({
title: '你确定要删除此讲师吗？',
content: '删除后，讲师将不能登录系统，此操作不能被撤销',
title: "你确定要删除此讲师吗？",
content: "删除后，讲师将不能登录系统，此操作不能被撤销",
icon: <QuestionCircleOutlined />,
okText: '删除',
okType: 'danger',
cancelText: '取消',
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
handleDeleteEmployee(record.storeUserId);
}
})
handleDeleteEmployee(record.id);
},
});
}
function handleToAddEmployee() {
setIsModalOpen(true);
}
function handleDeleteEmployee(storeUserId: string) {
StoreService.deleteEmployee(storeUserId).then((res: any) =>{
StoreService.deleteEmployee({ storeUserId }).then((res: any) => {
message.success("讲师已删除");
getEmployeeList();
});
}
......@@ -190,7 +246,7 @@ function EmployeesManagePage() {
}}
>
<div style={{ flex: 1 }}>
搜索员工：
{/* 搜索员工：
<Search
style={{
width: 300,
......@@ -204,30 +260,68 @@ function EmployeesManagePage() {
setQuery(_query);
}}
onSearch={() => getEmployeeList()}
/> */}
<SearchBar
label="搜索用户"
placeholder="搜索用户姓名/手机号"
style={{
width: 300,
marginRight: 40,
}}
value={valueLike}
onSearch={(value: any) => {
const _query = { ...query };
if (value) {
console.log("value", value);
const isPhone = (value || "").match(/^\d+$/);
const nameLike = isPhone ? "phone" : "nickName";
setValueLike(value);
_query[nameLike] = value;
} else {
_query.nickName = "";
_query.phone = "";
}
setQuery(_query);
}}
/>
</div>
<div style={{ flex: 1 }}>
身份：
{_.map(roleIds,((item:any) => {
return <CheckBox
{_.map(roleIds, (item: any) => {
return (
<CheckBox
text={item.name}
name={item.roleCode}
onChange={(e: any) => {
// const { checked } = e.target;
// setIsNormal(checked);
// const _query = { ...query };
// if(checked){
// _query.roleId.push();
// } else {
// const index = _query.roleId.indexOf();
// _query.roleId.slice(index,1);
// }
// setQuery(_query);
const { checked, name } = e.target;
const _query = { ...query };
_query.roleCodes = [];
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;
}
);
setRoleIds(_roleIds);
setQuery(_query);
}}
defaultChecked={isNormal}
defaultChecked={item.isChecked}
/>
}))}
);
})}
</div>
</div>
<Button
......@@ -255,7 +349,7 @@ function EmployeesManagePage() {
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
toPage={(page: any) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
......@@ -263,9 +357,16 @@ function EmployeesManagePage() {
/>
</div>
</div>
{
isModalOpen && <EmployeeAddOrEditModal isOpen={isModalOpen} choosedItem={choosedItem} onClose={()=>{setIsModalOpen(false)}}/>
}
{isModalOpen && (
<EmployeeAddOrEditModal
isOpen={isModalOpen}
choosedItem={choosedItem}
onClose={() => {
setIsModalOpen(false);
getEmployeeList();
}}
/>
)}
{model}
</div>
</div>
......
src/modules/store-manege/UserManagePage.tsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-03 10:35:53
* @LastEditTime: 2020-12-03 11:37:42
* @Description: 用户管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,7 +10,7 @@
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import { PageControl } from "@/components";
import { Table, Modal, message, Row, Col, Input, DatePicker } from "antd";
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
......@@ -46,9 +46,9 @@ function UserManagePage() {
getUserList();
}, [query]);
function getUserList(current = 0) {
function getUserList() {
let _query = _.clone(query);
_query.current = current + 1;
_query.current = query.current + 1;
StoreService.getUserList(_query).then((res: any) => {
setUserList(res.result.records);
setTotal(res.result.total);
......@@ -133,6 +133,7 @@ function UserManagePage() {
setQuery(_query);
}}
/>
</div>
<div style={{ flex: 1 }}>
......@@ -180,7 +181,7 @@ function UserManagePage() {
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
toPage={(page: any) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
......
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