Skip to content

X
xiaomai-cloud-class-web
Commit c548b34d by zhangleyuan
Options

feat:增加个人设置页的上传图片

parent ef734580
Showing with 698 additions and 15 deletions
package.json
...@@ -28,6 +28,7 @@ ...@@ -28,6 +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",
"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",
...@@ -51,6 +52,7 @@ ...@@ -51,6 +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",
"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",
...@@ -61,8 +63,8 @@ ...@@ -61,8 +63,8 @@
"postcss-normalize": "8.0.1", "postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0", "postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"qs": "^6.9.4",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^16.13.1", "react": "^16.13.1",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-async-component": "^2.0.0", "react-async-component": "^2.0.0",
...@@ -120,5 +122,8 @@ ...@@ -120,5 +122,8 @@
"commit-msg": "node hooks/commit-msg.js", "commit-msg": "node hooks/commit-msg.js",
"pre-push": "node hooks/pre-commit.js" "pre-push": "node hooks/pre-commit.js"
} }
},
"devDependencies": {
"cropper": "^4.1.0"
} }
} }
src/components/CropperModal.less 0 → 100644
@import "../core/variables.less";
.cropper-image-modal {
.container {
width: 300px;
overflow: hidden;
.img-placeholder {
width: 300px;
height: 300px;
border: 1px solid @xm-color-border;
margin-bottom: 10px;
}
.img-source {
max-width: 100%;
}
}
.preview-wrap {
text-align: center;
.preview {
margin: 10px auto 5px;
overflow: hidden;
img {
width: 100%;
display: inline-block;
}
&.preview-1 {
width: 90px !important;
height: 90px !important;
border-radius: 50px;
}
&.preview-2 {
width: 50px !important;
height: 50px !important;
border-radius: 50px;
}
&.preview-3 {
width: 30px !important;
height: 30px !important;
border-radius: 50px;
}
}
}
&.new-cropper-address-modal {
.preview-wrap {
.preview {
&.preview-1,&.preview-2, &.preview-3 {
border-radius: 0 !important;
}
}
}
}
}
src/components/CropperModal.tsx 0 → 100644
/*
* @Author: sunbingqing
* @Date: 2019-07-26 14:04:00
* @Last Modified by: zhujian
* @Last Modified time: 2020-05-07 23:44:30
*/
import React, { useState, useEffect } from 'react';
import { Modal, Row, Col, Button } from 'antd';
import _ from 'underscore';
import $ from 'jquery';
import '@/libs/cropper/cropper.min.css';
import 'cropper';
import Upload from '../core/upload';
import baseImg from '@/common/images/xiaomai-IMG.png';
import './CropperModal.less';
interface CropperModalProps {
title?: string;
imgUrl?: any;
close?: () => void;
save?: (value: any) => void;
type?: string;
visible?:boolean
}
const CropperModal = (props: CropperModalProps) => {
const { title, close, save } = props;
const [imgUrl, setImgUrl] = useState(props.imgUrl ? `${props.imgUrl}` : baseImg);
useEffect(() => {
imgUrl && initCropper();
}, [imgUrl]);
function initCropper(): any {
$(() => {
const $image = $('#image');
const $previews = $('.preview-wrap .preview');
$image.cropper({
aspectRatio: 1,
viewMode: 1,
ready: () => {
const $clone = $image.clone().removeClass('cropper-hidden');
$previews.html($clone);
},
crop: _.throttle(function (e: any) {
const imageData = $(this).cropper('getImageData');
$previews.each(function () {
const $preview = $(this);
const previewWidth = $preview.width();
const imageScaledRatio = e.width / previewWidth;
$preview.find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.y / imageScaledRatio,
});
});
}, 200),
});
});
}
function _handleSave(): any {
const $image = $('#image');
$image.cropper('getCroppedCanvas').toBlob((blob: any) => {
Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((imgAddress) => {
save(imgAddress);
close();
});
});
}
function _handleUpdateAvatar(e: any): any {
const avatar = e.target.files[0];
const newUrl = URL.createObjectURL(avatar);
const $image = $('#image');
setImgUrl(newUrl);
$image.cropper('destroy').attr('src', newUrl);
initCropper();
}
function _onUpload(): any {
$('#CrpperAvatarPic').trigger('click');
}
return (
<Modal
className={`cropper-image-modal new-cropper-${props.type}`}
width={600}
title={title || '设置头像'}
visible={true}
footer={[
<Button
id='cancel_avatar_btn'
key="back" onClick={close}>取消</Button>,
<Button
id='save_avatar_btn'
key="submit" type="primary" onClick={_handleSave}>
确定
</Button>,
]}
onCancel={close}>
<Row>
<Col span={14}>
<div className="container">
<div className="img-placeholder">
{
imgUrl &&
<img id="image"
className="img-source"
src={imgUrl}
alt="Picture" />
}
</div>
{/* <Button id="click_upload_btn" onClick={_onUpload}>点击上传</Button>
<input
type="file"
accept="image/*"
id="CrpperAvatarPic"
style={{ display: 'none' }}
onChange={_handleUpdateAvatar} /> */}
</div>
</Col>
{
imgUrl &&
<Col span={10} className="preview-wrap">
<h2>预览</h2>
<div className="preview preview-1"></div>
</Col>
}
</Row>
</Modal>
);
};
export default CropperModal;
src/components/index.js
...@@ -8,10 +8,11 @@ ...@@ -8,10 +8,11 @@
import SearchBar from './SearchBar.tsx'; import SearchBar from './SearchBar.tsx';
import PageControl from './PageControl.tsx'; import PageControl from './PageControl.tsx';
import CheckBox from './CheckBox.tsx'; import CheckBox from './CheckBox.tsx';
import CropperModal from './CropperModal.tsx';
export { export {
SearchBar, SearchBar,
PageControl, PageControl,
CheckBox, CheckBox,
} CropperModal
\ No newline at end of file }
\ No newline at end of file
src/core/upload.js 0 → 100644
import { func } from "prop-types";
import Service from '@/common/js/service';
/*
* @Author: 吴文洁
* @Date: 2020-08-11 11:47:14
* @LastEditors: wangyixi
* @LastEditTime: 2020-10-19 16:30:24
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
class Upload {
static uploadBlobToOSS(Blob, name, dir, dataType = 'url') {
// 上传图片和视频
return Service.MFS('anon/mfs/webTokenWithAccessUrl', { resourceName: name, instId: (!!window.currentUserInstInfo && window.currentUserInstInfo.instId) || LS.get('instId') || '1000000000000000000' }).then((res) => {
console.log(0)
const signInfo = res.result;
const { url } = res.result
console.log('signInfo', signInfo);
return this.uploadBlobToNewOSS(Blob, name, dir, signInfo.signatureVO || signInfo).then(() => {
return dataType === 'url' ? url : signInfo
});
})
};
static asyncUploadVideoToOSS(Blob, name, complete, dir, needSize) {
name = window.encodeURI(name.toLowerCase());
let ossSignServerAddress = UPLOAD + 'xm/oss/web/token?bucket=v';
const xhr = new XMLHttpRequest();
xhr.open('GET', ossSignServerAddress, true);
xhr.onload = () => {
const signInfo = JSON.parse(xhr.responseText);
const fd = new FormData();
fd.append('Filename', name);
fd.append('callback', signInfo.callback);
fd.append('expire', signInfo.expire);
fd.append('policy', signInfo.policy);
fd.append('signature', signInfo.signature);
fd.append('OSSAccessKeyId', signInfo.accessid);
fd.append('success_action_status', 200);
if (!dir) {
dir = Blob.type == 'text/html' ? 'html/' : '';
}
fd.append('key', signInfo.dir + dir + name);
fd.append('file', Blob);
xhr.open('POST', signInfo.host, true);
xhr.onload = () => {
const result = JSON.parse(xhr.responseText);
if (needSize) {
complete(result);
} else {
complete((result.url || false).replace(/http:/, "https:"));
}
};
xhr.send(fd);
};
xhr.onerror = () => {
complete(false);
}
xhr.send(null);
return xhr;
}
static getVideoParseRoute(videoUrl) {
return Service.MFS('anon/video/parse', { videoUrl }).then((res) => {
return res.result.sdUrl || videoUrl;
})
}
// mfs上传文件
static uploadBlobToMFSOSS(signInfoUrl, signInfoParams, Blob, name, dir) {
return Service.post(signInfoUrl, signInfoParams).then(res => {
var signInfo = res.result;
return this.uploadBlobToNewOSS(Blob, name, dir, signInfo.signatureVO || signInfo).then((res) => {
return signInfo;
});
})
}
static uploadBlobToNewOSS(Blob, name, dir, signInfo) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append('OSSAccessKeyId', signInfo.accessId);
fd.append('policy', signInfo.policy);
fd.append('callback', signInfo.callback);
fd.append('Filename', name);
fd.append('expire', signInfo.expire);
fd.append('signature', signInfo.signature);
// if (!dir) {
// dir = Blob.type == 'text/html' ? 'html/' : '';
// }
fd.append('key', signInfo.key);
fd.append('file', Blob);
fd.append('success_action_status', 200);
xhr.open('POST', signInfo.host.replace(/http:/, "https:"), true);
xhr.onload = () => {
const result = JSON.parse(xhr.responseText);
resolve(result.url);
}
xhr.send(fd);
});
};
// 监听多媒体上传进度
static uploadToOSSEvent(Blob, name, onInit=()=>{}, onProgress=()=>{}, onLoad=()=>{}, onError=()=>{}) {
Service.MFS('anon/mfs/webTokenWithAccessUrl', { resourceName: name, instId: (!!window.currentUserInstInfo && window.currentUserInstInfo.instId) || LS.get('instId') || '' }).then((res) => {
const signInfo = res.result;
const { url } = res.result;
const xhr = new XMLHttpRequest();
const fd = new FormData();
fd.append('OSSAccessKeyId', signInfo.accessId);
fd.append('policy', signInfo.policy);
fd.append('callback', signInfo.callback);
fd.append('Filename', name);
fd.append('expire', signInfo.expire);
fd.append('signature', signInfo.signature);
fd.append('key', signInfo.key);
fd.append('file', Blob);
fd.append('success_action_status', 200);
onInit(url,xhr,signInfo)
xhr.open('POST', signInfo.host);
xhr.upload.addEventListener("progress", onProgress, false);
xhr.onload = onLoad;
xhr.onerror = onError;
xhr.send(fd);
})
}
}
export default Upload;
\ No newline at end of file
src/libs/cropper/cropper.min.css 0 → 100644
/*!
* Cropper v3.1.3
* https://github.com/fengyuanchen/cropper
*
* Copyright (c) 2014-2017 Chen Fengyuan
* Released under the MIT license
*
* Date: 2017-10-21T10:03:37.133Z
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:e-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:n-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:w-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:s-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:e-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:n-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:w-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:ne-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nw-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:sw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:se-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/*# sourceMappingURL=cropper.min.css.map */
\ No newline at end of file
src/modules/common/UpLoad.jsx 0 → 100644
/*
* @Author: zhujian
* @Date: 2017-09-07 14:04:50
* @Last Modified by: mikey.zhaopeng
* @Last Modified time: 2020-03-23 17:11:29
*/
import React from "react";
import PropTypes from 'prop-types';
import { Button, Icon, Upload, Avatar } from 'antd';
import './Upload.less';
import {CropperModal} from '@/components/';
const baseImg = require('@/common/images/xiaomai-IMG.png');
class UpLoad extends React.Component {
constructor(props) {
super(props);
this.state = {
img: this.props.img || '',
}
}
componentWillReceiveProps(nextProps) {
const img = nextProps.img;
this.setState({ img })
}
//上传头像
handleUpdateAvatar = () => {
const self = this
this.cropperModal = <CropperModal
imgUrl={self.state.img}
save={self.changeAvatar}
close={self.closeCropperModal}
type={self.props.tag}
/>
this.setState({});
}
changeAvatar = (img) => {
this.setState({ img });
this.props.onChange(img);
}
closeCropperModal = () => {
this.cropperModal = null
this.setState({})
}
render() {
let className = "up-load-content " + this.props.className;
return (
<div className={className}>
{
// this.props.close && <Icon type="close-circle"
// className='close'
// onClick={() => {
// var img = this.props.basicImg || baseImg;
// this.setState({ img });
// this.props.onChange(img);
// }}
// />
<span
className="iconfont icon"
className='close'
onClick={() => {
var img = this.props.basicImg || baseImg;
this.setState({ img });
this.props.onChange(img);
}}
>&#xe836;</span>
}
<div className="upload"
onClick={this.handleUpdateAvatar}
style={{
width: this.props.width + 'px',
height: this.props.height + 'px',
borderRadius: this.props.radius || '0px'
}}>
{this.state.img || this.props.basicImg ?<img
style={!this.props.onlyCenter ?
{
width: this.props.width + 'px',
height: this.props.height + 'px',
borderRadius: '50%'
}
: { objectFit: 'cover', width: '100%', height: '100%' }
}
src={this.state.img || this.props.basicImg || baseImg}
alt="" className="avatar" />
:
<Avatar
style={{
width: this.props.width + 'px',
height: this.props.height + 'px',
borderRadius: this.props.radius || '0px'
}}
size="large" icon="user" src={baseImg} />}
<div className='edit' style={{
width: this.props.width + 'px',
height: this.props.height + 'px',
borderRadius: this.props.radius || '0px'
}}>
{this.props.addIcon}
</div>
</div>
{this.cropperModal}
</div>
)
}
}
UpLoad.propTypes = {
};
UpLoad.defaultProps = {
className: "",
basicImg: '',
onChange: function () { },
width: 40,
height: 40,
radius: '0px',
onlyCenter: false,
}
export default UpLoad;
\ No newline at end of file
src/modules/common/Upload.less 0 → 100644
.up-load-content {
position: relative;
.upload{
overflow:hidden;
margin: 0 auto;
position:relative;
}
.edit{
position: absolute;
display: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 14px;
top: 0;
left: 0;
overflow: hidden;
color: #ffffff;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-ms-flex-pack: center;
justify-content: center;
-webkit-justify-content: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: center;
.icon{
font-size: 14px;
display: none;
}
}
.close{
position: absolute;
top: -5px;
right: -5px;
display: none;
}
&:hover{
.close{
display: block;
}
.edit{
background: rgba(0,0,0,0.5);
.icon{
display: block;
}
}
}
}
\ No newline at end of file
src/modules/personalInfo/index.less
.personal-info-page{
.page-content{
.box{
padding:60px !important;
}
.avatar{
width:60px;
height:60px;
}
.label{
width:56px;
text-align:right;
font-size: 14px;
color: #666666;
line-height: 20px;
display:inline-block;
margin-right:8px;
}
.avatat-item{
margin-bottom:12px;
}
.name-item{
margin-bottom:16px;
}
.phone-item{
margin-bottom:28px;
.changePhoneBtn{
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 22px;
padding:0 12px !important;
margin-left:20px;
}
}
}
}
\ No newline at end of file
src/modules/personalInfo/index.tsx
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Button } from "antd"; import {Form,Button,Input} from "antd";
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import UpLoad from "../common/UpLoad";
import _ from 'underscore';
import $ from 'jquery';
import baseImg from '@/common/images/xiaomai-IMG.png';
import {CropperModal} from '@/components/';
import './index.less'; import './index.less';
const FormItem = Form.Item;
function PersonalInfoPage() {
const [avatar,setAvatar] = useState(baseImg);
const [imgUrl, setImgUrl] = useState(avatar);
const [cropperModalVisible, setCropperModalVisible] = useState(false);
function _handleUpdateAvatar(e: any): any {
const avatar = e.target.files[0];
const newUrl = URL.createObjectURL(avatar);
const $image = $('#image');
setImgUrl(newUrl);
setCropperModalVisible(true);
}
function _onUpload(): any {
$('#CrpperAvatarPic').trigger('click');
}
function changeAvatar(img:string):any{
setAvatar(img);
setImgUrl(img);
}
function personalInfoPage() { function closeCropperModal():any{
setCropperModalVisible(false);
}
return ( return (
<div className="page"> <div className="page personal-info-page">
<div className="page-content"> <div className="page-content">
<div className="content-header"> <div className="content-header">
<Breadcrumbs <Breadcrumbs
...@@ -18,11 +47,89 @@ function personalInfoPage() { ...@@ -18,11 +47,89 @@ function personalInfoPage() {
/> />
</div> </div>
<div className="box"> <div className="box">
<Form>
<div className="avatat-item">
<span className="label">头像：</span>
<Button id="click_upload_btn" onClick={_onUpload}>点击上传</Button>
<input
type="file"
accept="image/*"
id="CrpperAvatarPic"
style={{ display: 'none' }}
onChange={_handleUpdateAvatar} />
<img className="avatar" src={avatar}></img>
{ cropperModalVisible &&
<CropperModal
imgUrl={imgUrl}
save={changeAvatar}
close={closeCropperModal}
/>
}
</div>
<div className="name-item">
<span className="label">姓名：</span>
<Input placeholder="请输入姓名" style={{ width:300,height:32}} />
</div>
<div className="phone-item">
<span className="label">手机号：</span>
<span>1822692727</span>
<Button className="changePhoneBtn">更换手机号</Button>
</div>
<div>
<Button type="primary">保存</Button>
</div>
</Form>
{/* <Form>
<FormItem
label="个人头像"
labelCol={{ span: 2 }}
>
<div id="avatar_edit" className="img-box" style={{ width: 54, height: 54, display: 'inline-block' }}>
<UpLoad
/>
</div>
</FormItem>
<FormItem
label="姓名"
labelCol={{ span: 2 }}
>
<span>{window.currentUserInstInfo.adminName}</span>
</FormItem>
<FormItem
label="昵称"
labelCol={{ span: 2 }}
>
<Input
id="nick_name_input"
value={this.state.nickName}
placeholder="昵称不能超过10个字符"
style={{ width: 200 }}
onChange={(event) => {
let nickName = event.target.value;
this.setState({ nickName });
}} />
<Row>
<Col span={2}></Col>
<Col>
<span className="icon iconfont" style={{ color: '#20A1FF', marginRight: 10 }}>&#xe64d;</span>“昵称”将用于家长端中的家校互动展示
</Col>
</Row>
</FormItem>
<FormItem>
<Col span={2}></Col>
<Button
id="update_user_info_btn"
onClick={this.handleEditNickName}
type="primary" >
更新信息
</Button>
</FormItem>
</Form> */}
</div> </div>
</div> </div>
</div> </div>
); );
} }
export default withRouter(personalInfoPage); export default withRouter(PersonalInfoPage);
src/modules/store-manege/EmployeesManagePage.tsx
...@@ -156,7 +156,7 @@ function EmployeesManagePage() { ...@@ -156,7 +156,7 @@ function EmployeesManagePage() {
> >
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
搜索员工： 搜索员工：
<Search {/* <Search
style={{ style={{
width: 300, width: 300,
marginRight: 40, marginRight: 40,
...@@ -169,7 +169,8 @@ function EmployeesManagePage() { ...@@ -169,7 +169,8 @@ function EmployeesManagePage() {
setQuery(_query); setQuery(_query);
}} }}
onSearch={() => getEmployeeList()} onSearch={() => getEmployeeList()}
/> /> */}
<Search placeholder="input search text" style={{ width: 200 }} />
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
......
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