Skip to content

X
xiaomai-cloud-class-web
Commit 242f9add by wufan
Options

feat:增加添加人员弹框

parent c548b34d
Showing with 128 additions and 42 deletions
package.json
......@@ -28,7 +28,7 @@
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"cropper": "^4.1.0",
"cropper": "^3.1.4",
"cross-env": "^7.0.2",
"css-loader": "3.4.2",
"dom-to-image": "^2.6.0",
......@@ -52,7 +52,7 @@
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"jquery": "^3.5.1",
"jquery": "^3.4.1",
"less-loader": "^6.2.0",
"microevent": "^1.0.0",
"mini-css-extract-plugin": "0.9.0",
......@@ -124,6 +124,6 @@
}
},
"devDependencies": {
"cropper": "^4.1.0"
"@types/jquery": "^3.5.4"
}
}
src/common/js/service.ts
......@@ -30,6 +30,12 @@ class Service {
static MFS(url: string, params: any, option: any) {
return Axios.post('POST', `mfs/${url}`, params, option);
}
static postJSON(url: string, params: any, option: any) {
option = option || {};
option.contentType = 'application/json; charset=UTF-8';
return Axios.post('post', url, JSON.stringify(params), option);
}
}
export default Service;
\ No newline at end of file
src/index.d.ts 0 → 100644
declare module 'jquery'
src/modules/store-manege/EmployeeAddOrEditModal.less
.employee-add-modal {
.radio-tip {
padding-left: 24px;
font-size: 14px;
font-weight: 400;
color: #999;
line-height: 20px;
}
.avatar-box {
text-align: center;
// display: flex;
// justify-content: center;
// align-items: center;
.avatar-text {
width: 28px;
font-size: 14px;
color: #666;
line-height: 20px;
margin:0 auto;
margin-bottom: 8px;
}
.avatart-img {
width: 60px;
height: 60px;
background: #E8E8E8;
margin:0 auto;
margin-bottom: 8px;
border-radius: 50%;
}
}
}
src/modules/store-manege/EmployeeAddOrEditModal.tsx
import React, { useState, useEffect } from 'react';
import { Modal, Form, Button, Input } from 'antd';
import { Modal, Form, Button, Input, Radio, Row, Col } from 'antd';
import _ from 'underscore';
import './EmployeeAddOrEditModal.less';
const RadioGroup = Radio.Group;
declare let window: any;
interface AddEmployeeModalProps {
isOpen: boolean,
choosedItem:{
choosedItem: {
name?: string,
phone?: string,
role?: string,
avatar?: string
}
},
onClose:(e:any) => void
}
function AddEmployeeModal(props: AddEmployeeModalProps) {
......@@ -22,7 +24,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
const [avatar, setavatar] = useState("");
useEffect(() => {
if(props.choosedItem.name){
if (props.choosedItem.name) {
setName(name);
setPhone(phone);
setRole(role);
......@@ -31,8 +33,8 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
}, [props.choosedItem])
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
labelCol: { span: 5 },
wrapperCol: { span: 12 },
};
const onFinish = (values: any) => {
......@@ -43,43 +45,87 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
console.log('Failed:', errorInfo);
};
function handleChangeRole(value: string) {
setRole(value);
}
return (
<Modal
visible={props.isOpen}
footer={null}
title={`${props.choosedItem.name ? '编辑员工' : "添加员工"}`}
className="employee-add-modal"
width={680}
onCancel={props.onClose}
>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="员工姓名"
name="name"
rules={[{ required: true, message: '' }]}
>
<Input
value={name}
placeholder="请输入员工名称"
maxLength={15}
/>
</Form.Item>
<Row>
<Col span={16}>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="员工姓名"
name="name"
rules={[{ required: true, message: '' }]}
>
<Input
style={{ width: 200 }}
value={name}
placeholder="请输入员工名称"
maxLength={15}
/>
</Form.Item>
<Form.Item
label="手机号码"
name="phone"
rules={[{ required: true, message: '' }]}
>
<Input
style={{ width: 200 }}
value={phone}
placeholder="请输入手机号"
maxLength={11}
/>
</Form.Item>
<Form.Item
label="员工身份"
name="role"
rules={[{ required: false }]}
>
<RadioGroup
value={!!(role === "NORMAL")}
onChange={(e) => {
handleChangeRole(e.target.value);
}}
>
<Radio value={true}>
<span style={{ color: '#333' }}>普通讲师</span>
<p className="radio-tip">仅可查看/使用与自己相关的文件和课表，并进行上课</p>
</Radio>
<Radio value={false}>
<span style={{ color: '#333' }}>管理员</span>
<p className="radio-tip">可执行店铺中所有的操作</p>
</Radio>
</RadioGroup>
</Form.Item>
</Form>
</Col>
<Form.Item
label="手机号码"
name="name"
rules={[{ required: true, message: '' }]}
>
<Input
value={phone}
placeholder="请输入手机号"
maxLength={11}
/>
</Form.Item>
</Form>
<Col span={8}>
<div className="avatar-box">
<div className="avatar-text">头像</div>
<div className="avatart-img"></div>
<div className="upload-avatar">上传头像</div>
</div>
</Col>
</Row>
</Modal>
)
}
......
src/modules/store-manege/EmployeesManagePage.tsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-07-09 14:03:09
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-11-27 14:46:10
* @Last Modified time: 2020-11-27 16:19:03
* 店铺管理-员工管理
*/
import React, { useEffect, useState } from "react";
......@@ -245,7 +245,7 @@ function EmployeesManagePage() {
</div>
</div>
{
isModalOpen && <EmployeeAddOrEditModal isOpen={isModalOpen} choosedItem={choosedItem}/>
isModalOpen && <EmployeeAddOrEditModal isOpen={isModalOpen} choosedItem={choosedItem} onClose={()=>{setIsModalOpen(false)}}/>
}
{model}
</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