Browse Source

角色多选
图片上传做文件类型与大小限制

mentoswzq 4 years ago
parent
commit
c6b1dc5cb2

+ 27 - 64
js/component/common/imgList/index.js

@@ -1,5 +1,5 @@
 import React,{Component} from 'react';
-import {Icon, message, Spin, Upload,Progress} from 'antd';
+import {Icon, Spin, Upload,message} from 'antd';
 import './index.less';
 import Viewer from 'viewerjs';
 import 'viewerjs/dist/viewer.css';
@@ -24,9 +24,8 @@ class ImgList extends Component{
             loading: true,
             imgLoadNum: 0,
 
-            uploadLoading: false,
-            uploadsuccessNum: 0,
-            percent: 0,
+            // fileListSize: 0,
+            // doneFileSize: 0,
         }
         this.imgLoading = this.imgLoading.bind(this);
         this.setTimeOutObj = null;
@@ -66,22 +65,24 @@ class ImgList extends Component{
         }
     }
 
+    componentWillUnmount() {
+        this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
+    }
+
     beforeUpload(file) {
         const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
         if (!isJPG) {
             message.error('只能上传图片文件!');
+            return isJPG;
         }
         const isLt2M = file.size / 1024 / 1024 < 10;
         if (!isLt2M) {
             message.error('图片大小不能超过 10MB!');
+            return isLt2M;
         }
         return isJPG && isLt2M;
     }
 
-    componentWillUnmount() {
-        this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
-    }
-
     render() {
         const {fileList} = this.props;
         if(!fileList || !Array.isArray(fileList)){
@@ -117,6 +118,7 @@ class ImgList extends Component{
                                             }).slice(0,10)
                                     )
                             }
+                            beforeUpload={this.beforeUpload}
                             onPreview={(file) => {
                                 if(Object.keys(this.props.uploadConfig).length !== 0){
                                     //TODO 上传组件,查看图片临时解决方法,无法查看下一张
@@ -133,50 +135,27 @@ class ImgList extends Component{
                                     this.state.gallery.view(file.index).show();
                                 }
                             }}
-                            beforeUpload={this.beforeUpload}
                             onChange={(infor)=>{
                                 if(infor.file.status){
                                     this.state.gallery && this.state.gallery.destroy();
-                                    this.props.onChange(infor);
-                                    //-----------------------------
-                                    if(infor.file && infor.file.status !== 'removed'){
-                                        let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))});
-                                        if(infor.event && infor.event.percent === 100){
-                                            this.setState({
-                                                uploadsuccessNum: this.state.uploadsuccessNum + 1,
-                                                percent: (this.state.uploadsuccessNum + 1) / arr.length
-                                            })
-                                        }else{
-                                            this.setState({
-                                                uploadLoading: true,
-                                            })
-                                        }
-                                        if(this.state.uploadsuccessNum === arr.length){
-                                            this.setState({
-                                                percent: 1,
-                                            },()=>{
-                                                setTimeout(()=>{
-                                                    this.setState({
-                                                        uploadLoading: false,
-                                                    },()=>{
-                                                        this.setState({
-                                                            percent: 0,
-                                                        })
-                                                    })
-                                                },1500)
-                                            })
-                                        }
-                                    }else{
-                                        let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))});
-                                        this.setState({
-                                            uploadsuccessNum: arr.length,
-                                        })
-                                    }
-                                    //-----------------------------------
-                                    if(infor.file && infor.file.status === 'error'){
-                                        message.error('图片上传失败,请重新上传!');
-                                    }
+                                    this.props.onChange(infor)
+                                }
+                                if(infor.file && infor.file.status === 'error'){
+                                    message.error('图片上传失败,请重新上传!');
                                 }
+                                // this.setState({
+                                //     fileListSize: infor.fileList.length
+                                // })
+                                // if(infor.file && infor.file.status === 'done'){
+                                //     let num = this.state.doneFileSize + 1;
+                                //     if(num >= infor.fileList.length){
+                                //         console.log('所有都上传成功')
+                                //     }
+                                //     this.setState({
+                                //         doneFileSize: num
+                                //     })
+                                // }
+                                // console.log(infor.event)
                             }}
                         >
                             {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
@@ -197,22 +176,6 @@ class ImgList extends Component{
                         ))
                     }
                 </ul>
-                {this.state.uploadLoading ? <div style={{
-                    position:"fixed",
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    zIndex: 9999999999,
-                    background: 'rgba(0,0,0,.8)',
-                    display:"flex",
-                    flexFlow:'column',
-                    alignItems:'center',
-                    justifyContent:'center',
-                }}>
-                    <Progress style={{color:'#FFF'}} type="circle" status="active" percent={parseFloat(this.state.percent * 100).toFixed(0)} />
-                    <div style={{color:'#FFF',paddingTop:'15px'}}>图片上传中...</div>
-                </div> : <div/>}
             </div>
         )
     }

+ 11 - 9
js/component/manageCenter/set/userManagementS/newUser.jsx

@@ -84,7 +84,7 @@ const Newuser = Form.create()(React.createClass({
     },
     handleSubmit(e) {
         e.preventDefault();
-        if(!this.state.role){
+        if(!this.state.role || this.state.role.length === 0){
         	message.warning('请选择角色');
         	return false;
         };
@@ -125,15 +125,13 @@ const Newuser = Form.create()(React.createClass({
         this.setState({
             loading: true
         });
-        let roleArrT=[];
-		roleArrT.push((this.state.role).toString())
         $.ajax({
             method: "POST",
             dataType: "json",
             crossDomain: false,
             url: globalConfig.context + api,
             data: {
-            	roles:roleArrT,
+            	roles:this.state.role,
             	data:JSON.stringify({
             		id:this.state.id?this.state.id:this.props.addId,
 	                mobile:this.state.mobile,
@@ -238,9 +236,7 @@ const Newuser = Form.create()(React.createClass({
                         message.warning(data.error[0].message);
                     };
                     thisdata = {};
-                }; 
-                let roleArr=[]
-                roleArr.push(this.props.role[0])
+                };
                 this.setState({
                     id: thisdata.id,
                     mobile: thisdata.mobile,
@@ -257,7 +253,7 @@ const Newuser = Form.create()(React.createClass({
                     departmentId:thisdata.departmentId?thisdata.departmentId:undefined,//部门id
                     userNo:thisdata.userNo,
                 	orgCodeUrl: thisdata.headPortraitUrl? splitUrl(thisdata.headPortraitUrl, ',', globalConfig.avatarHost + '/upload') : [],
-                	role:roleArr,
+                	role:this.props.role,
                 	theTypes:'',
 	                entryTime:thisdata.entryTime?moment(thisdata.entryTime,'YYYY-MM-DD'):undefined,
 	                selTime:thisdata.entryTime
@@ -400,10 +396,16 @@ const Newuser = Form.create()(React.createClass({
 					                           label="用户角色"
 					                         > 
 					                                <Select
+                                                        mode="tags"
+                                                        tokenSeparators={[',']}
 											            placeholder="选择用户角色"
 											            value={this.state.role}
 											            style={{width:'200px'}}
-											            onChange={(e)=>{this.setState({role:e})}} >
+											            onChange={(e)=>{
+											                this.setState({
+                                                                role:e
+											                })
+											            }} >
 											            {
 							                                roleArrS.map(function (item) {
 							                                    return <Select.Option key={item.id} >{item.roleName}</Select.Option>