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 @@ ...@@ -28,7 +28,7 @@
"babel-preset-react-app": "^9.1.2", "babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1", "camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"cropper": "^4.1.0", "cropper": "^3.1.4",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"css-loader": "3.4.2", "css-loader": "3.4.2",
"dom-to-image": "^2.6.0", "dom-to-image": "^2.6.0",
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
"jest-environment-jsdom-fourteen": "1.0.1", "jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0", "jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2", "jest-watch-typeahead": "0.4.2",
"jquery": "^3.5.1", "jquery": "^3.4.1",
"less-loader": "^6.2.0", "less-loader": "^6.2.0",
"microevent": "^1.0.0", "microevent": "^1.0.0",
"mini-css-extract-plugin": "0.9.0", "mini-css-extract-plugin": "0.9.0",
...@@ -124,6 +124,6 @@ ...@@ -124,6 +124,6 @@
} }
}, },
"devDependencies": { "devDependencies": {
"cropper": "^4.1.0" "@types/jquery": "^3.5.4"
} }
} }
src/common/js/service.ts
...@@ -30,6 +30,12 @@ class Service { ...@@ -30,6 +30,12 @@ class Service {
static MFS(url: string, params: any, option: any) { static MFS(url: string, params: any, option: any) {
return Axios.post('POST', `mfs/${url}`, params, option); 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; 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 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 _ from 'underscore';
import './EmployeeAddOrEditModal.less'; import './EmployeeAddOrEditModal.less';
const RadioGroup = Radio.Group;
declare let window: any; declare let window: any;
interface AddEmployeeModalProps { interface AddEmployeeModalProps {
isOpen: boolean, isOpen: boolean,
choosedItem:{ choosedItem: {
name?: string, name?: string,
phone?: string, phone?: string,
role?: string, role?: string,
avatar?: string avatar?: string
} },
onClose:(e:any) => void
} }
function AddEmployeeModal(props: AddEmployeeModalProps) { function AddEmployeeModal(props: AddEmployeeModalProps) {
...@@ -22,7 +24,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) { ...@@ -22,7 +24,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
const [avatar, setavatar] = useState(""); const [avatar, setavatar] = useState("");
useEffect(() => { useEffect(() => {
if(props.choosedItem.name){ if (props.choosedItem.name) {
setName(name); setName(name);
setPhone(phone); setPhone(phone);
setRole(role); setRole(role);
...@@ -31,8 +33,8 @@ function AddEmployeeModal(props: AddEmployeeModalProps) { ...@@ -31,8 +33,8 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
}, [props.choosedItem]) }, [props.choosedItem])
const layout = { const layout = {
labelCol: { span: 8 }, labelCol: { span: 5 },
wrapperCol: { span: 16 }, wrapperCol: { span: 12 },
}; };
const onFinish = (values: any) => { const onFinish = (values: any) => {
...@@ -43,43 +45,87 @@ function AddEmployeeModal(props: AddEmployeeModalProps) { ...@@ -43,43 +45,87 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
console.log('Failed:', errorInfo); console.log('Failed:', errorInfo);
}; };
function handleChangeRole(value: string) {
setRole(value);
}
return ( return (
<Modal <Modal
visible={props.isOpen} visible={props.isOpen}
footer={null} title={`${props.choosedItem.name ? '编辑员工' : "添加员工"}`}
className="employee-add-modal" className="employee-add-modal"
width={680}
onCancel={props.onClose}
> >
<Form <Row>
{...layout} <Col span={16}>
name="basic" <Form
initialValues={{ remember: true }} {...layout}
onFinish={onFinish} name="basic"
onFinishFailed={onFinishFailed} initialValues={{ remember: true }}
> onFinish={onFinish}
<Form.Item onFinishFailed={onFinishFailed}
label="员工姓名" >
name="name" <Form.Item
rules={[{ required: true, message: '' }]} label="员工姓名"
> name="name"
<Input rules={[{ required: true, message: '' }]}
value={name} >
placeholder="请输入员工名称" <Input
maxLength={15} style={{ width: 200 }}
/> value={name}
</Form.Item> 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 <Col span={8}>
label="手机号码" <div className="avatar-box">
name="name" <div className="avatar-text">头像</div>
rules={[{ required: true, message: '' }]} <div className="avatart-img"></div>
> <div className="upload-avatar">上传头像</div>
<Input </div>
value={phone} </Col>
placeholder="请输入手机号" </Row>
maxLength={11}
/>
</Form.Item>
</Form>
</Modal> </Modal>
) )
} }
......
src/modules/store-manege/EmployeesManagePage.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-07-09 14:03:09 * @Date: 2020-07-09 14:03:09
* @Last Modified by: mikey.zhaopeng * @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"; import React, { useEffect, useState } from "react";
...@@ -245,7 +245,7 @@ function EmployeesManagePage() { ...@@ -245,7 +245,7 @@ function EmployeesManagePage() {
</div> </div>
</div> </div>
{ {
isModalOpen && <EmployeeAddOrEditModal isOpen={isModalOpen} choosedItem={choosedItem}/> isModalOpen && <EmployeeAddOrEditModal isOpen={isModalOpen} choosedItem={choosedItem} onClose={()=>{setIsModalOpen(false)}}/>
} }
{model} {model}
</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