IMAGE/FILE

src/main/java/cn/devezhao/rebuild/web/commons/FileUploader.java

@@ -66,7 +66,7 @@ public class FileUploader extends HttpServlet {
 				item.write(temp);
 				
 				String cloud = req.getParameter("cloud");
-				if ("true".equals(cloud)) {
+				if ("true".equals(cloud) || "auto".equals(cloud)) {
 					uploadName = QiniuCloud.upload(temp);
 					if (temp.exists()) {
 						temp.delete();

src/main/webapp/_include/Head.jsp

@@ -5,7 +5,12 @@
 <link rel="stylesheet" type="text/css" href="${baseUrl}/assets/lib/perfect-scrollbar.min.css">
 <link rel="stylesheet" type="text/css" href="${baseUrl}/assets/lib/rb-base.css">
 <link rel="stylesheet" type="text/css" href="${baseUrl}/assets/css/rb-page.css">
-<script>__baseUrl='${baseUrl}'</script>
+<script>
+__baseUrl='${baseUrl}'
+rb = rb = {};
+rb.baseUrl = '${baseUrl}';
+rb.storageUrl = 'http://rb-cdn.errorpage.cn/';
+</script>
 <!--[if IE]>
 <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
 <![endif]-->

src/main/webapp/assets/css/rb-page.css

@@ -2,6 +2,7 @@
 	height: 2.8rem;
 	min-width: 88px;
 }
+
 .btn-xl {
 	height: 3.4rem;
 }
@@ -37,6 +38,7 @@
 .modal-body.iframe {
 	padding: 0 !important;
 }
+
 .modal-body.iframe iframe {
 	width: 100%;
 	height: 100%;
@@ -51,13 +53,14 @@ body.dialog .main-content {
 }
 
 body.dialog .main-content .footer {
-	padding-bottom:0 !important;
+	padding-bottom: 0 !important;
 }
 
 textarea.row2x {
 	height: 52px !important;
 	resize: none;
 }
+
 textarea.row3x {
 	height: 72px !important;
 	resize: none;
@@ -80,28 +83,97 @@ a {
 	min-height: 200px;
 }
 
-.img-field>span{
+.rb-form .type-IMAGE {
-	display: inline-block;
+	padding-bottom: 1px !important;
-	margin-right: 9px;
-	margin-bottom: 9px;
 }
-a.img-upload {
+
+.rb-form .type-FILE {
+	padding-bottom: 4px !important;
+}
+
+.img-field>span {
+	margin-bottom: 6px;
+	margin-right: 8px;
+	display: inline-block;
+}
+
+.img-field .img-upload {
 	width: 72px;
 	height: 72px;
 	text-align: center;
 	display: table-cell;
-    vertical-align: middle;
+	vertical-align: middle;
-    padding: 2px;
+	padding: 1px;
+	position: relative;
 }
-a.img-upload:hover{
+
+.img-field .img-upload>img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.img-field label.img-upload{
+	padding-top: 5px;
+}
+.img-field label.img-upload:hover {
 	border: 1px solid #5f99f5;
 }
 
-.img-upload > span.zmdi {
+.img-field label.img-upload .zmdi {
 	font-size: 2rem;
 	color: #aaa;
 }
-.img-upload > img {
+
-	max-width: 100%;
+.img-field a.img-upload {
-	max-height: 100%;
+	cursor: default;
+}
+
+.img-field a.img-upload b, .file-field .img-thumbnail b {
+	display: none;
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+	right: 0;
+	font-size: 14px;
+	cursor: pointer;
+	background-color: rgba(0, 0, 0, 0.4);
+	color: #fff;
+	text-align: center;
+}
+
+.img-field a.img-upload:hover b, .file-field .img-thumbnail:hover b {
+	display: block;
+}
+
+.img-field a.img-upload:hover b:hover, .file-field .img-thumbnail:hover b:hover {
+	background-color: rgba(0, 0, 0, 0.6);
+}
+
+.file-field .file-select {
+	margin-top: 3px;
+}
+
+.file-field .img-thumbnail {
+	display: inline-block;
+	padding: 4px;
+	max-width: 240px;
+	min-height: 38px;
+	margin-bottom: 4px;
+	margin-right: 8px;
+	overflow: hidden;
+	position: relative;
+}
+
+.file-field .img-thumbnail>i.zmdi {
+	font-size: 36px;
+	float: left;
+	width: 42px;
+	text-align: center;
+}
+
+.file-field .img-thumbnail>span {
+	margin-left: 42px;
+	display: block;
+	word-break: break-all;
 }

src/main/webapp/assets/js/rb-components.jsx

@@ -49,7 +49,7 @@ class RbModal extends React.Component {
             if (height == 0 || height == that.__lastHeight) return;
             $(that.refs['rbmodal.body']).height(height);
             that.__lastHeight = height;
-        }, 400, 'RbModal-resize');
+        }, 100, 'RbModal-resize');
     }
 }
 

src/main/webapp/assets/js/rb-forms.jsx

@@ -11,7 +11,8 @@ class RbForm extends React.Component {
                 {this.props.children}
                 <div className="form-group row footer">
                     <div className="col-12 col-sm-8 col-lg-4 offset-sm-3">
-                        <button className="btn btn-primary btn-space" type="button">保存</button>
+                        <button className="btn btn-primary btn-space" type="button" onClick={()=>this.post()}>保存</button>
+                        <button className="btn btn-secondary btn-space" type="button" onClick={()=>location.reload()}>取消</button>
                     </div>
                 </div>
             </form>
@@ -19,7 +20,15 @@ class RbForm extends React.Component {
         )
     }
     componentDidMount() {
-        $('.rb-loading-active').removeClass('rb-loading-active');
+        if (parent && parent.rbModal) parent.rbModal.loaded()
+        $('.rb-loading-active').removeClass('rb-loading-active')
+    }
+    post() {
+        let vals = React.Children.map(this.props.children, function(child) {
+            console.log(child)
+            if (child) return child.getValue()
+        })
+        console.log(vals)
     }
 }
 
@@ -29,9 +38,8 @@ class RbFormElement extends React.Component {
         this.state = { ...props };
     }
     render() {
-        console.log('Fire : ' + JSON.stringify(this.props))
         return (
-            <div className="form-group row">
+            <div className={'form-group row type-' + this.props.type}>
                 <label className="col-12 col-sm-3 col-form-label text-sm-right">{this.props.label}</label>
                 <div className="col-12 col-sm-8 col-lg-4">
                     {this.renderElement()}
@@ -42,6 +50,18 @@ class RbFormElement extends React.Component {
     renderElement() {
         return ('请复写此方法');
     }
+    componentDidUpdate() {
+        console.log('fire componentDidUpdate');
+        if (parent && parent.rbModal) parent.rbModal.loaded()
+    }
+    getValue() {
+        let v = $val(this.refs['field.value'])
+        if (this.validate(v) == true) return v;
+        else throw new Error('无效值:' + this.props.field);
+    }
+    validate(v) {
+        return true;
+    }
 }
 
 class RbFormText extends RbFormElement {
@@ -50,7 +70,7 @@ class RbFormText extends RbFormElement {
     }
     renderElement() {
         return (
-            <input className="form-control form-control-sm" type="text" id={this.props.field} value={this.props.defaultValue} maxlength={this.props.maxLength || 200} />
+            <input ref="field.value" className="form-control form-control-sm" type="text" id={this.props.field} value={this.props.defaultValue} maxlength={this.props.maxLength || 200} />
         )
     }
 }
@@ -61,7 +81,7 @@ class RbFormTextarea extends RbFormElement {
     }
     renderElement() {
         return (
-            <textarea class="form-control form-control-sm row2" id={this.props.field} maxlength={this.props.maxLength || 200}>{this.props.defaultValue}</textarea>
+            <textarea ref="field.value" class="form-control form-control-sm row2" id={this.props.field} maxlength={this.props.maxLength || 200}>{this.props.defaultValue}</textarea>
         )
     }
 }
@@ -69,50 +89,96 @@ class RbFormTextarea extends RbFormElement {
 class RbFormImage extends RbFormElement {
     constructor(props) {
         super(props);
-        this.state.imgs = [];
+        this.state.imgsPath = [];
     }
     renderElement() {
         return (
             <div className="img-field">
-                {this.state.imgs.map((item, index) => {
+                {this.state.imgsPath.map((item, index) => {
-                    return (<span><a class="img-thumbnail img-upload" ref="upload.handle"><img src={'http://rb-cdn.errorpage.cn/' + item}/></a></span>)
+                    return (<span><a class="img-thumbnail img-upload"><img src={rb.storageUrl + item}/><b title="删除" onClick={()=>this.removeItem()}><span className="zmdi zmdi-delete"></span></b></a></span>)
                 })}
-                <span><a class="img-thumbnail img-upload" ref="upload.handle"><span className="zmdi zmdi-image-alt"></span></a></span>
+                <span>
-                <input type="file" className="hide" ref="upload.input" />
+                    <input type="file" className="inputfile" ref="upload.input" id={this.props.field + '-input'} />
+                    <label for={this.props.field + '-input'} className="img-thumbnail img-upload"><span className="zmdi zmdi-image-alt"></span></label>
+                </span>
             </div>
         )
     }
     componentDidMount() {
         let that = this;
-        $(this.refs['upload.handle']).click(function(){
-            $(that.refs['upload.input'])[0].click();
-        })
         $(that.refs['upload.input']).html5Uploader({
             name: that.props.field,
-            postUrl: __baseUrl + '/filex/upload?cloud=true',
+            postUrl: __baseUrl + '/filex/upload?cloud=auto',
             onClientLoad: function(e, file){
             },
             onSuccess:function(d){
                 d = JSON.parse(d.currentTarget.response);
                 if (d.error_code == 0){
-                    let imgs = that.state.imgs;
+                    let imgsPath = that.state.imgsPath;
-                    imgs.push(d.data);
+                    imgsPath.push(d.data);
-                    console.log(imgs)
+                    that.setState({ imgsPath:imgsPath })
-                    that.setState({ imgs:imgs })
                 }
                 else alert(d.error_msg || '上传失败');
             }
         });
     }
+    getValue() {
+        return this.state.imgsPath.join(',');
+    }
+    removeItem(e) {
+    }
+}
+
+class RbFormFile extends RbFormElement {
+    constructor(props) {
+        super(props);
+        this.state.filesPath = [];
+    }
+    renderElement() {
+        return (
+            <div className="file-field">
+                {this.state.filesPath.map((item, index) => {
+                    return (<div className="img-thumbnail"><i className="zmdi zmdi-file"></i><span>{item}</span><b title="删除" onClick={()=>this.removeItem()}><span className="zmdi zmdi-delete"></span></b></div>)
+                })}
+                <div className="file-select">
+                    <input type="file" className="inputfile" ref="upload.input" id={this.props.field + '-input'} />
+                    <label for={this.props.field + '-input'} className="btn-secondary"><i className="zmdi zmdi-upload"></i><span>选择文件</span></label>
+                </div>
+            </div>
+        )
+    }
+    componentDidMount() {
+        let that = this;
+        $(that.refs['upload.input']).html5Uploader({
+            name: that.props.field,
+            postUrl: __baseUrl + '/filex/upload?cloud=auto',
+            onClientLoad: function(e, file){
+            },
+            onSuccess:function(d){
+                d = JSON.parse(d.currentTarget.response);
+                if (d.error_code == 0){
+                    let filesPath = that.state.filesPath;
+                    filesPath.push(d.data);
+                    that.setState({ filesPath:filesPath })
+                }
+                else alert(d.error_msg || '上传失败');
+            }
+        });
+    }
+    getValue() {
+        return this.state.filesPath.join(',');
+    }
+    removeItem(e) {
+    }
 }
 
-const __h5upload = function(opt){
-};
 const __detectElement = function(item){
     if (item.type == 'TEXT'){
         return <RbFormText {...item} />
     } else if (item.type == 'IMAGE'){
         return <RbFormImage {...item} />
+    } else if (item.type == 'FILE'){
+        return <RbFormFile {...item} />
     } else {
         console.error('Unknow element : ' + JSON.stringify(item))
     }