把学生管理里面的 自定义统计抽成公共组件 让不同的学校不同的分支都能用

zyd_private/StatisticsInfo/Ability.css

+.sendBtn{
+    width: 120px;
+    height: 24px;
+    background: #FFB400;
+    border: none;
+    color: #fff;
+    padding: 0;
+    font-size: 14px;
+}
+
+.out{
+	text-align: center;
+	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
+    position: relative;
+    width: 186px;
+}
+
+.out:before {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 198px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-76deg);
+    transform-origin: top;
+    -ms-transform: rotate(-76deg);
+    -ms-transform-origin: top;
+}
+.out:after {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 220px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-61deg);
+    transform-origin: top;
+    -ms-transform: rotate(-61deg);
+    -ms-transform-origin: top;
+}
+.out2{
+	text-align: center;
+	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
+    position: relative;
+    width: 186px;
+}
+
+.out2:after {
+	content: "";
+    position: absolute;
+    width: 1px;
+    height: 220px;
+    top: 0;
+    left: 0;
+    background-color: gray;
+    display: block;
+    transform: rotate(-61deg);
+    transform-origin: top;
+    -ms-transform: rotate(-61deg);
+    -ms-transform-origin: top;
+}
+.title1{
+	position: absolute;
+	top: 0px;
+	right:14px;
+}
+.title2{
+	position: absolute;
+	top: 43px;
+    right:27px;
+
+    transform:rotate(30deg)
+}
+.title3{
+	position: absolute;
+	top: 30px;
+	left:0px;
+}
+
+.tableCantainer{
+    width: 100%;
+}
+.tableSty{
+    width: 1020px;
+}
+.tableBox{
+  width: 100%;
+  height:280px;
+  overflow-y: auto;
+}
+.tableStyl {
+    width: 1020px;
+    overflow-y: auto;
+    height: 240px;
+}
+.tableStyl tr{
+    width: 100%;
+    border-bottom: 1px solid #F0F0F0;
+}
+.tableStyl tr:hover{
+    width: 100%;
+    background: #FFE8B2;
+    border-bottom: 1px solid #F0F0F0;
+}
+.tableStyl tr td{
+   text-align: center;
+  padding: 10px 0;
+}
+.evaluation{
+    width: 400px;
+    height: 80px;
+    margin: 140px auto 20px;
+    background: #DFF3E2;
+padding: 0 25px;
+    display: flex;
+    align-items: center;
+}
+.evaluation p{
+
+   margin-bottom: 0;
+}
+.evaluation div{
+  width: 50%;
+ }
+ .imgs{
+     display: flex;
+justify-content: center;
+ }
+ .flow{
+     width:120px;
+     height: 620px;
+
+    background:url('../../../assets/img/QQ图片20180929095544.png') no-repeat left top;
+}
+.tree{
+    width: 600px;
+    height: 620px;
+    position: relative;
+    background:url('../../../assets/img/系统树.png') no-repeat left top;
+}
+.item{
+    display: flex;
+    align-items: center;
+    width: 200px;
+}
+
+.aboutTable{
+    width: 100%;
+}
+
+.aboutTable tr{
+    width: 100%;
+
+}
+.aboutTable tr td:nth-child(1){
+    padding: 11px 0;
+    text-align: center;
+    border-right:1px solid #D2D2D2;
+    width: 16%;
+    color: #617489;
+    font-size: 14px;
+}
+.aboutTable tr:nth-child(1){
+    border-bottom: none;
+    background: #E5EFF9;
+}
+.aboutTable tr:nth-child(2){
+    border-bottom: none;
+    background: #F2F7FC;
+}
+.aboutTable tr{
+    width: 100%;
+    border-bottom: 1px solid #D2D2D2;
+}
+.aboutTable tr td{
+    padding: 11px 0;
+    text-align: center;
+     width: 12%;
+     font-size: 14px;
+     color: #8393A4;
+
+ }
+.yjTable{
+    width: 100%;
+}
+.yjTable tr{
+    width: 100%;
+}
+.yjTable tr:nth-child(1){
+    width: 100%;
+
+    font-size: 14px;
+    color: #617489;
+}
+.yjTable tr td{
+ padding: 10px 0;
+ text-align: center;
+ font-size: 14px;
+ color: #666666;
+}
+.widthNum{
+    width: 100%
+}
+.tableStys{
+    width: 100%;
+    margin:24px 0 32px;
+}
+.tableStys tr{
+    width: 100%;
+
+
+}
+.tableStys tr:nth-child(1){
+    width: 100%;
+background:#E5EFF9;
+color: #617489;
+font-size: 14px;
+
+}
+.tableStys tr:nth-child(2){
+    width: 100%;
+    background: #F2F7FC;
+    color: #8393A4;
+    font-size: 14px;
+
+}
+.tableStys tr td{
+    width: 100%;
+  padding: 12px 0;
+  text-align: center;
+
+}

zyd_private/StatisticsInfo/QueryItem.js

+import React from 'react'
+import { Select,Input,InputNumber,Button,DatePicker } from 'antd';
+import { connect } from 'dva';
+import moment from 'moment';
+import ButtonDiy from '@/baseComponent/ButtonDiy';
+
+const Option = Select.Option;
+
+
+export default class QueryItem extends React.Component {
+    constructor(props) {
+        super(props);
+        const value = props.value || {};
+        this.state = {
+            stringX:value.stringX,
+            string:value.string,
+            disabled:value.disabled||false
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // Should be a controlled component.
+        if ('value' in nextProps) {
+            const value = nextProps.value;
+            this.setState(value);
+        }
+    }
+
+    triggerChange = (changedValue) => {
+        // Should provide an event to pass value to Form.
+        const onChange = this.props.onChange;
+        if (onChange) {
+            onChange(Object.assign({}, this.state, changedValue));
+        }
+    };
+
+    changeNumber=(e)=>{
+
+        if (!('value' in this.props)) {
+            this.setState({ string:e});
+        }
+        this.triggerChange({ string:e});
+    };
+    changeStringX=(e)=>{
+        var disabled = false
+
+        if(e=="IS NOT NULL"||e=="IS NULL"){
+            disabled=true;
+
+        }
+        if (!('value' in this.props)) {
+            this.setState({ stringX:e ,disabled});
+        }
+
+        this.triggerChange({ stringX:e ,disabled});
+    };
+    changeString=(e)=>{
+
+        if (!('value' in this.props)) {
+            this.setState({ string:e.target.value });
+        }
+        this.triggerChange({ string:e.target.value });
+    };
+    changeDate=(date)=>{
+        //console.log(date)
+        if (!('value' in this.props)) {
+            this.setState({ string:date.valueOf() });
+        }
+        this.triggerChange({ string:date.valueOf() });
+    };
+    render() {
+        const{obj} = this.props;
+        const {string,stringX,disabled} =this.state;
+        if(obj.options && obj.options.length>0){
+           return(<div> <Select onChange={this.changeStringX}
+                                value={stringX||"="}
+                                style={{width:100, paddingRight: 12}}>
+                                <Option value="=">等于</Option>
+                                <Option value="<>">不等于</Option>
+                                <Option value="IS NOT NULL">不为空</Option>
+                                <Option value="IS NULL">为空</Option>
+            </Select>
+           {disabled?"": <span style={{paddingRight: 12}}>
+            <Select onChange={this.changeNumber}
+                    value={string}
+                    style={{width:200}}>
+                {obj.options.map((r)=><Option key={r.v} value={r.v}>{r.l}</Option>)}
+
+                </Select>
+             </span>}
+             <ButtonDiy className='defaultRed'
+                        name="删除"
+                        handleClick={this.props.deleteQuery}/>
+            </div>)
+        }
+        if(obj.type === "java.lang.String"){
+        return (
+            <div>
+            <Select onChange={this.changeStringX}
+                    value={stringX||"="}
+                    style={{width:100, paddingRight: 12 }}>
+                <Option value="=">等于</Option>
+                <Option value="!=">不等于</Option>
+                <Option value="like">像</Option>
+                <Option value="IS NOT NULL">不为空</Option>
+                <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+                <Input onChange={this.changeString}
+                       placeholder="请输入"
+                       value={string}
+                       style={{width:200,}}
+            />
+              </span>}
+              <ButtonDiy className='defaultRed'
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+                 </div>)
+
+         }else if(obj.type === "java.lang.Integer"||
+                  obj.type === "java.lang.Double" ||
+                  obj.type === "java.lang.Long"){
+            return ( <div> <Select onChange={this.changeStringX}
+                                   value={stringX||"="}
+                                   style={{width:100, paddingRight: 12}}>
+            <Option value="=">等于</Option>
+            <Option value="<>">不等于</Option>
+            <Option value=">">大于</Option>
+            <Option value=">=">大于等于</Option>
+            <Option value="<">小于</Option>
+            <Option value="<=">小于等于</Option>
+            <Option value="IS NOT NULL">不为空</Option>
+            <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+            <InputNumber onChange={this.changeNumber}
+                         placeholder="请输入"
+                         value={string}
+                         style={{width:200}}
+            />
+              </span>}
+              <ButtonDiy className='defaultRed'
+                        style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+            </div>)
+         }else if(obj.type === "java.lang.Boolean"){
+            return ( <div>
+              <Select onChange={this.changeStringX}
+                     value={stringX||"="}
+                      style={{width:100, paddingRight: 12}}>
+                <Option value="=">
+                  等于
+                </Option>
+                </Select>
+                {disabled?"":  <span style={{paddingRight: 12}}>
+                <Select onChange={this.changeNumber}
+                        value={string}
+                        style={{width:200}}
+                >
+                <Option value={true}>
+                  是
+                </Option>
+                <Option value={false}>
+                  否
+                </Option>
+                </Select>
+              </span>}
+              <ButtonDiy className='defaultRed'
+              style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+            </div>)
+        }else if(obj.type === "java.util.Date"){
+            return(<div>
+              <Select onChange={this.changeStringX}
+                      value={stringX||"="}
+                      style={{width:100, paddingRight: 12}}>
+            <Option value="=">等于</Option>
+            <Option value="<>">不等于</Option>
+            <Option value=">">大于</Option>
+            <Option value=">=">大于等于</Option>
+            <Option value="<">小于</Option>
+            <Option value="<=">小于等于</Option>
+            <Option value="IS NOT NULL">不为空</Option>
+            <Option value="IS NULL">为空</Option>
+            </Select>
+            {disabled?"": <span style={{paddingRight: 12}}>
+              <DatePicker onChange={this.changeDate}
+                        showTime
+                        format="YYYY-MM-DD HH:mm:ss"
+                          allowClear={false}
+                          style={{width:200}}
+                          value={string?moment(string):null}
+              />
+              </span>}
+              <ButtonDiy className='defaultRed'
+              style={{marginLeft: 12}}
+                         name="删除"
+                         handleClick={this.props.deleteQuery}/>
+                </div>)
+
+        }else{
+            return (<span>暂无法处理</span>)
+         }
+
+
+    }
+}