表单设计器移植

one_stop_public/App/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: 100px;
+}
+
+.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: 100px;
+}
+
+.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:-19px;
+}
+.title2{
+	position: absolute;
+	top: 43px;
+    right:-50px;
+    
+    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;
+ }
+
+.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;
+    
+}
\ No newline at end of file

one_stop_public/App/ButtonDiy/ButtonDiy.js

+/**
+ * 钟是志
+ * 2019年1月10日
+ * 一个Button
+ */
+
+import React, { Component, Fragment } from 'react';
+import { Button, Icon } from 'antd';
+import styles from './index.less';
+import PropTypes from 'prop-types';
+
+export default class ButtonDiy extends Component {
+  render() {
+    const {
+      handleClick,
+      icon,
+      name,
+      className,
+      type,
+      htmlType,
+      loading,
+      disabled,
+      size,
+      style,
+      boxStyle,
+    } = this.props;
+    return (
+      <span className={styles.ButtonDiy} style={{ ...boxStyle }}>
+        <Button
+          onClick={() => {
+            handleClick();
+          }}
+          loading={loading}
+          className={styles[className]}
+          style={{ ...style }}
+          type={type}
+          disabled={disabled}
+          htmlType={htmlType}
+        >
+          {icon ? <Icon type={icon} /> : null}
+          {name}
+        </Button>
+      </span>
+    );
+  }
+}
+ButtonDiy.propTypes = {
+  name: PropTypes.string,
+  icon: PropTypes.string, // icon
+  handleClick: PropTypes.func, // click函数
+  className: PropTypes.string, // classname
+  type: PropTypes.string, // Button type
+  htmlType: PropTypes.string,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool, //
+};
+ButtonDiy.defaultProps = {
+  icon: '', //'plus'
+  name: '新建子部门',
+  disabled: false,
+  type: 'primary',
+  htmlType: 'button',
+  loading: false,
+  className: '', // primaryBlue = {背景色,边框:蓝色 字体:白色} defaultBlue= {背景色:白色 字体,边框:蓝色} defaultRed = {背景色:白色 字体,边框:红色}
+
+  handleClick: () => {},
+};

one_stop_public/App/ButtonDiy/Shell.js

+/**
+ * 钟是志
+ * 2019年1月10日
+ * 一个方块就是一个Shell用于组件外层
+ */
+
+import React, { Component } from 'react';
+import { Row, Col } from 'antd';
+import styles from './index.less';
+
+export default class Index extends Component {
+  render() {
+    const { children, styleShell = {} } = this.props;
+    return (
+      <div className={styles.shell} style={styleShell}>
+        <Row className={styles.row}>{children}</Row>
+      </div>
+    );
+  }
+}

one_stop_public/App/DraftEditor.less

+.basic{
+    :global(.DraftEditor-root){
+        :global(.public-DraftEditorPlaceholder-root){
+            color:gray
+        }
+    }
+}
\ No newline at end of file

one_stop_public/App/DraftView.js

+import React, { Component, Fragment } from 'react';
+import {
+  Editor
+} from 'draft-js';
+import { changeToDraftState } from '../utils/myutils'
+import MyBlockRenderer from './MyBlockRender'
+import moment from 'moment'
+export default class DraftView extends Component {
+  constructor(props) {
+    super(props);
+
+    this.setEditor = (editor) => {
+      this.editor = editor;
+    };
+
+    this.focusEditor = () => {
+      if (this.editor) {
+        this.editor.focus();
+      }
+    }
+    
+    this.state = {
+      editorState: changeToDraftState(this.props.currentObj.blocks),
+    }
+
+
+  }
+
+  render() {
+    const { currentUserId, currentObj,style ,customHeader} = this.props
+
+    return (
+      <div style={style} >
+     
+     {customHeader? customHeader:<div><p style={{fontSize:20,textAlign:"center"}}>{currentObj.title}</p>
+              <p >发布时间:{currentObj.createTime ? moment(currentObj.createTime).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD")}</p></div> }
+        <Editor key={currentUserId}
+          readOnly={true}
+          blockRendererFn={MyBlockRenderer.bind(this, true, currentUserId,null,null)}
+          ref={this.setEditor}
+          editorState={this.state.editorState}
+
+        />
+      </div>
+
+    );
+  }
+}
\ No newline at end of file

one_stop_public/App/ExportCurrentInfo.js

+import fetch from 'dva/fetch';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Select, Button, Modal, Input, Transfer, Row, Col, Form, message, notification } from 'antd';
+import { connect } from 'dva';
+import { getToken } from '../utils/token'
+import config from '../config/config';
+
+import QueryItem from './QueryItem';
+import OrderItem from './OrderItem';
+
+import FormdataWrapper from '../utils/object-to-formdata-custom';
+import ButtonDiy from './ButtonDiy/ButtonDiy';
+const Option = Select.Option;
+var keyX = 1;
+
+function swapArray(arr, index1, index2) {
+  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+  return arr;
+}
+
+/**
+ *
+ * 2019/02/21  修改导出方式为fetch
+ * 增加 props.fileName 设置导出文件名称
+ * mustQuerys 设置搜索条件 demo :
+ *  mustQuerys={[{
+                hql: 'bean.adminStatus',
+                x: '=',
+                v: "pass",
+                c: 'com.zysoft.app.zydxl.entity.base.BaseImportantWatch$Status',
+                notes: 'com.zysoft.app.zydxl.entity.base.BaseImportantWatch$Status',
+              }]}
+ */
+
+const FormItem = Form.Item;
+@connect(({ DataObj, loading }) => ({
+  DataObj,
+  loading: loading.models.DataObj,
+}))
+@Form.create()
+export default class ExportCurrentInfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    
+      confirmLoading: false,
+    };
+  }
+
+  exportData = () => {
+ 
+      let divElement = document.getElementById('downloadDiv');
+      let downloadUrl = config.httpServer + '/DataObjApi/exportCurrent?';
+      const token = getToken() != null && getToken() != 'null' ? getToken() : '0000';
+      downloadUrl = `${downloadUrl}token=${token}`;
+      let param = {
+        dataObjId:this.props.objId,
+        query:this.props.query,
+        custom:this.props.custom,
+        sql:this.props.sql,
+
+      };
+    
+   
+      this.downloadFile(downloadUrl, param);
+    
+
+  };
+
+  downloadFile(url, params) {
+    this.setState({ confirmLoading: true });
+
+    fetch(url, {
+      method: 'POST',
+      body: FormdataWrapper(params),
+    }).then(res => {
+      if (res.status != '200') {
+        return res.json();
+      } else {
+        return res.blob();
+      }
+    }).then(data => {
+      if (data instanceof Blob) {
+        let a = document.createElement('a');
+        let url = window.URL.createObjectURL(data);
+        let filename = (this.props.fileName ? this.props.fileName : '导出文件') + '.xlsx';
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        a = null;
+      } else {
+        notification.error({
+          message: `文件导出错误`,
+          description: data.errMsg,
+        });
+      }
+
+    }).catch(err => {
+      notification.error({
+        message: `网络请求超时`,
+      });
+    }).finally(() => {
+        this.setState({ confirmLoading: false });
+      });
+  }
+
+ 
+
+  render() {
+
+    return (
+      <span>
+         <ButtonDiy name='导出'
+                   type='default'
+                   className='defaultBlue'
+                   loading={this.state.confirmLoading}
+                   handleClick={this.exportData}/>
+        <div id='downloadDiv' style={{ display: 'none' }}></div>
+       
+      </span>
+    );
+  }
+}

one_stop_public/App/ImportUtil.less

+.nomal{
+    background: #fff;
+    padding: 10px;
+}
+.title{
+    display: flex;  
+    margin-bottom: 20px;
+}
+.info{
+    text-align: center;
+    font-weight: bold;
+    font-size: 18px;
+}
+.detail{
+    text-align: center;
+    margin:30px auto;
+}
+.detail img{
+    margin: auto 10px;
+}
+.button{
+    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */  
+    display: -moz-box;      /* 老版本语法: Firefox (buggy) */  
+    display: -ms-flexbox;   /* 混合版本语法: IE 10 */     
+    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */  
+    display: -moz-flex;  
+    display: flex;       
+    -moz-box-pack: center; /*Firefox*/  
+    -webkit-box-pack: center; /*Safari,Opera,Chrome*/  
+    box-pack: center;  
+    -moz-justify-content: center;  
+    -webkit-justify-content: center;  
+    justify-content: center;  
+}
+.operation{
+    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */  
+    display: -moz-box;      /* 老版本语法: Firefox (buggy) */  
+    display: -ms-flexbox;   /* 混合版本语法: IE 10 */     
+    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */  
+    display: -moz-flex;  
+    display: flex;       
+    -moz-box-pack: center; /*Firefox*/  
+    -webkit-box-pack: center; /*Safari,Opera,Chrome*/  
+    box-pack: center;  
+    -moz-justify-content: center;  
+    -webkit-justify-content: center;  
+    justify-content: center;  
+}
+.button Button{
+    margin: auto 10px;
+    
+}
+.titleInfo p span{
+    font-weight: bold;
+}
+.import{
+    color: #6ca3c9;
+    font-size: 16px;
+}
+.button{
+    // background: #eff3f8;
+    text-align: center;
+    padding:20px;
+    margin-top: 20px;
+}
+.tip{
+    margin:20px auto;
+    padding:10px;
+    border-top: 1px solid #ccc;
+}
+.tip span{
+    display: block;
+    margin:10px;
+    font-size: 16px;
+}
+.tip::after{
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 57px;
+    background: #e5eaf1;
+    margin-top: -141px;
+    margin-left: -13px;
+}
+.select button{
+    color: #fff;
+    padding:10px;
+    background: #abbac3;
+    border: none;
+    margin: 10px;
+}
+.attentionItem{
+    background: #f4f5f4;
+    padding: 10px;
+    box-shadow: 1px 1px 1px #ccc;
+}
+.attentionItem p:nth-child(1){
+    font-size: 16px;
+    margin-left: 0;
+}
+.attentionItem p{
+    font-size: 14px;
+    margin-left: 45px;
+}
+.submitButtons{
+    margin-left: 34px;
+}
+.contentTable{
+    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */  
+    display: -moz-box;      /* 老版本语法: Firefox (buggy) */  
+    display: -ms-flexbox;   /* 混合版本语法: IE 10 */     
+    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */  
+    display: -moz-flex;  
+    display: flex;    
+    -moz-box-pack: justify; /*Firefox*/  
+    -webkit-box-pack:justify; /*Safari,Opera,Chrome*/  
+    box-pack: justify;  
+    -moz-justify-content: space-between;  
+    -webkit-justify-content: space-between;  
+    justify-content: space-between;  
+    margin-top: 20px;
+}
+.left{
+    width: 50%;
+}
+.right{
+    width: 50%;   
+    border-left: 1px solid #317ecc;
+}
+.error p{
+    color: #fff;
+    background: #317ecc;
+    // margin: 10px auto;
+    text-align: left;
+    font-size: 18px;
+}
+.download{
+    background: #f5f5f5;
+    padding: 5px;    
+    margin-top: -16px;
+}
+.download img{
+    margin-top: -2px;
+    margin-right: 5px;
+}
+.download button{
+    border: none;
+    background: #f5f5f5
+}
+.download button:nth-child(1){
+    border-right: 1px solid #ccc;
+}
+.download button:nth-child(2){
+    border-right: 1px solid #ccc;
+}
+.buttonDown{
+    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */  
+    display: -moz-box;      /* 老版本语法: Firefox (buggy) */  
+    display: -ms-flexbox;   /* 混合版本语法: IE 10 */     
+    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */  
+    display: -moz-flex;  
+    display: flex;   
+    -moz-box-pack: start; /*Firefox*/  
+    -webkit-box-pack: start; /*Safari,Opera,Chrome*/  
+    box-pack: start;  
+    -moz-justify-content: flex-start;  
+    -webkit-justify-content: flex-start;  
+    justify-content: flex-start;  
+    margin-bottom: 20px;
+}
+.buttonDown>button{
+    margin-left: 10px;
+    background: #abbac3;
+    border: none;
+    color: #fff;
+    padding: 5px 12px;
+    border-radius: 5px;
+}
\ No newline at end of file

one_stop_public/App/MyBlockRender.js

+import { Table,Popover  } from 'antd';
+import config from '../config/config';
+import table from '../assets/专家经验系统切图/智能报告/table.png'
+import chart from '../assets/专家经验系统切图/智能报告/chart.png'
+import React from 'react';
+import { connect } from 'dva';
+const ReactHighcharts = config.ReactHighcharts
+
+
+@connect(({ Report, loading }) => ({
+  Report,
+  loading: loading.models.Report,
+}))
+class ChartComponent extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      dataSource: [],
+      columns: [],
+      chartConfig: {},
+    }
+  }
+  componentDidMount() {
+    const { dispatch, data ,userId} = this.props;
+
+    dispatch({
+      type: 'Report/getStatistics',
+      payload: {...data,studentId:userId},
+      callback: (res) => {
+        const { chartType,chartTitle } = data
+        if (chartType == "0") {
+          this.setState({ ...res })
+        } else {
+          const cts = []
+          const series = []
+          const { columns, dataSource } = res
+          for (var i = 1; i < columns.length - 1; i++) {
+            cts.push(columns[i].title)
+          }
+
+          for (var j = 0; j < dataSource.length - 1; j++) {
+            const obj = dataSource[j]
+
+            const ob = { name: obj[columns[0].dataIndex] }
+            const dd = []
+            for (var i = 1; i < columns.length - 1; i++) {
+
+              dd.push(obj[columns[i].dataIndex])
+            }
+            ob.data = dd
+            series.push(ob)
+
+          }
+          const chartConfig = {
+            chart: {
+              type: chartType
+            },
+            title: {
+              text: chartTitle
+            },
+            xAxis: {
+              categories: cts
+            },
+            tooltip: {
+              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+
+            plotOptions: {
+              line: {
+                dataLabels: {
+                  // 开启数据标签
+                  enabled: true
+                },
+                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
+                enableMouseTracking: false
+              }
+            },
+            series: series
+          };
+
+          this.setState({ chartConfig })
+        }
+
+      }
+    });
+  }
+  edit=()=>{
+    const {data,editKey,editBlock} = this.props
+   
+    editBlock(true,editKey,data)
+  }
+  render() {
+    const content = (
+      <div>
+        <a onClick={this.edit} >编辑</a>  
+      </div>
+    );
+    const { isView, data} = this.props
+   
+    const { chartConfig,dataSource,columns } = this.state
+    const { chartType, chartTitle } = data
+    
+    if (isView) {
+      if (chartType == "0") {
+        if(columns .length>5){
+          columns[0].fixed="left"
+          columns[0].width=200
+          columns[0].title=chartTitle
+          for(var i=1;i<columns.length;i++){
+            columns[i].width = 50;
+          }
+        }
+        return (<div>
+          
+          <Table size="small" dataSource={dataSource} scroll={{ x: (columns.length-1)*50+200, }}  columns={columns} pagination={false} /></div>)
+      } else {
+        return (<ReactHighcharts config={chartConfig}></ReactHighcharts>)
+      }
+    } else {
+      return (<Popover content={content} >
+      <img src={chart} style={{ maxWidth: '100%' }} />
+      </Popover>)
+    }
+  }
+
+}
+
+@connect(({ Report, loading }) => ({
+  Report,
+  loading: loading.models.Report,
+}))
+class TableComponent extends React.Component {
+  constructor(props) {
+    super(props)
+   
+    this.state = {
+      dataSource: [],
+      columns: []
+
+    }
+  }
+  componentDidMount() {
+    const { dispatch, data,userId } = this.props;
+
+    dispatch({
+      type: 'Report/exportData',
+      payload: {...data,studentId:userId},
+      callback: (res) => {
+        this.setState({ ...res })
+      }
+    });
+  }
+  edit=()=>{
+    const {data,editKey,editBlock} = this.props
+   
+    editBlock(false,editKey,data)
+  }
+  delete=()=>{
+    const {deleteBlock,editKey} = this.props
+   
+    deleteBlock(editKey)
+  }
+  render() {
+    
+    const content = (
+      <div>
+        <a onClick={this.edit} >编辑</a>  
+      </div>
+    );
+    
+    const { dataSource, columns } = this.state
+    const { isView } = this.props
+   
+  
+    return (
+      isView ?
+        <Table size="small" dataSource={dataSource} columns={columns} pagination={false} /> : 
+        <Popover content={content} >
+      <img src={table} style={{ maxWidth: '100%' }} />
+      </Popover>
+
+    )
+  }
+
+
+}
+
+const AtomicComponent = (props) => {
+ 
+  const { contentState, block } = props;
+  const { isView,userId,editKey,editBlock,deleteBlock } = props.blockProps
+
+  const x = block.getEntityAt(0)
+  if (x == null) {
+    return (
+      <div>
+
+      </div>
+    )
+  }
+  const entity = contentState.getEntity(x);
+ 
+  const type = entity.getType();
+
+
+  if (type === 'image') {
+    const { src} = entity.getData();
+    return (
+      <div>
+        <img src={config.httpServer + src} style={{ maxWidth: '100%' }} />
+
+      </div>
+    )
+  }   if (type === 'attr') {
+    const { src,name} = entity.getData();
+    return (
+    
+        <a href={config.httpServer + src} target="_blank">{name}</a>
+
+    )
+  }else if (type === 'video') {
+    const { src} = entity.getData();
+    return (
+      <div><video src={config.httpServer + src} controls="controls">您的浏览器不支持 video 标签。
+      </video></div>
+    )
+  } else if (type === 'table') {
+
+
+    return <TableComponent data={entity.getData()} {...props.blockProps}/>
+
+
+  } else if (type === 'chart') {
+
+    return <ChartComponent  data={entity.getData()} {...props.blockProps}/>
+
+
+  }
+}
+export default function myBlockRenderer(isView, userId,editBlock,deleteBlock,contentBlock) {
+  
+  const type = contentBlock.getType()
+
+  
+
+  if (type == 'atomic') {
+    return {
+      component: AtomicComponent,  // 指定组件
+      editable: false,  // 这里设置自定义的组件
+      props: {
+        isView: isView,
+        userId:userId,
+        editBlock:editBlock,
+        deleteBlock:deleteBlock,
+        editKey:contentBlock.getKey(),
+      }
+    }
+
+  }
+
+}

one_stop_public/App/OrderItem.js

+import React from 'react'
+import { Select,Input,InputNumber,Button } from 'antd';
+const Option = Select.Option;
+
+
+export default class OrderItem extends React.Component {
+    constructor(props) {
+        super(props);
+        const value = props.value || {};
+        this.state = {
+            stringX:value.stringX,
+        };
+    }
+
+
+  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));
+        }
+    };
+   
+    
+    changeStringX=(e)=>{
+        
+        if (!('value' in this.props)) {
+            this.setState({ stringX:e });
+        }
+        this.triggerChange({ stringX:e });
+    };
+   
+    render() {
+    
+        const {stringX} =this.state;
+   
+        return (
+            <div>
+              <span style={{padding: '0px 10px'}}>
+                <Select onChange={this.changeStringX}
+                        value={stringX}
+                        style={{width:200}}>
+                <Option value="desc" key='desc'>降序</Option>
+                <Option value="asc" key='asc'>升序</Option>
+                </Select>
+              </span>
+              <span style={{paddingLeft:100}}>
+              <Button type="danger" onClick={this.props.deleteOrder}>删除</Button>
+                </span>
+              </div>)
+    }
+}

one_stop_public/App/Perm/PermTree.js

+import React from 'react'
+import { Tree } from 'antd';
+
+const TreeNode = Tree.TreeNode;
+
+
+export default class PermTree extends React.Component {
+    constructor(props){
+        super(props)
+        const value = props.value || {};
+   this. state = {
+        expandedKeys: [],
+        autoExpandParent: true,
+        ids: value.ids,
+      }
+    }
+ 
+    
+      onExpand = (expandedKeys) => {
+        console.log('onExpand', expandedKeys);
+        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
+        // or, you can remove all expanded children keys.
+        this.setState({
+          expandedKeys,
+          autoExpandParent: false,
+        });
+      }
+    
+      onCheck = (ids) => {
+ 
+       
+        if (!('value' in this.props)) {
+            this.setState({ids });
+        }
+        this.triggerChange({ids});
+      }
+    
+      triggerChange = (changedValue) => {
+        // Should provide an event to pass value to Form.
+        const onChange = this.props.onChange;
+        if (onChange) {
+            onChange(Object.assign({}, this.state, changedValue));
+        }
+    }
+    componentWillReceiveProps(nextProps) {
+        // Should be a controlled component.
+        if ('value' in nextProps) {
+            const value = nextProps.value;
+            this.setState(value);
+        }
+    }
+    
+      renderTreeNodes = (data) => {
+        return data.map((item) => {
+          if (item.children) {
+            return (
+              <TreeNode title={item.title} key={item.key} dataRef={item}>
+                {this.renderTreeNodes(item.children)}
+              </TreeNode>
+            );
+          }
+          return <TreeNode {...item} />;
+        });
+      }
+    
+   
+     
+    render() {
+        return (
+            <Tree
+            checkable
+            selectable={false}
+            onExpand={this.onExpand}
+            expandedKeys={this.state.expandedKeys}
+            autoExpandParent={this.state.autoExpandParent}
+            onCheck={this.onCheck}
+            checkedKeys={this.state.ids}
+          
+          >
+            {this.renderTreeNodes(this.props.all)}
+          </Tree>
+        
+          );
+        
+    }
+}
\ No newline at end of file

one_stop_public/App/QueryItem.js

+import React from 'react'
+import { Select,Input,InputNumber,Button,DatePicker } from 'antd';
+
+import moment from 'moment';
+
+
+const Option = Select.Option;
+const text = [
+    'BINARY',
+  
+    'CHAR',
+    'GEOMETRY',
+    'GEOMETRYCOLLECTION',
+    'JSON',
+    'LINESTRING',
+    'LONGBLOB',
+    'LONGTEXT',
+    'MEDIUMBLOB',
+    'MEDIUMINT',
+    'MEDIUMTEXT',
+    'MULTILINESTRING',
+    'MULTIPOINT',
+    'MULTIPOLYGON',
+    'POINT',
+    'POLYGON',
+    'REAL',
+    'DECIMAL',
+    'ENUM',
+    'SET',
+    'TEXT',
+    'TINYBLOB',
+    'TIBYTEXT',
+    'VARBINARY',
+    'VARCHAR',
+  ];
+  const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT'];
+  const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR'];
+
+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)=>{
+        
+        if (!('value' in this.props)) {
+            this.setState({ string:date.format("YYYY-MM-DD HH:mm:ss")});
+        }
+        this.triggerChange({ string:date.format("YYYY-MM-DD HH:mm:ss") });
+    };
+    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}}>
+                                <Option value="=">等于</Option>
+                                <Option value="<>">不等于</Option>
+                                <Option value="IS NOT NULL">不为空</Option>
+                                <Option value="IS NULL">为空</Option>
+            </Select>
+           {disabled?"": <span style={{padding: '0px 10px'}}>
+            <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>}
+             <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
+
+            </div>)
+        }
+        if(text.includes(obj.type)){
+        return (
+            <div>
+            <Select onChange={this.changeStringX}
+                    value={stringX||"="}
+                    style={{width:100}}>
+                <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={{padding: '0px 10px'}}>
+                <Input onChange={this.changeString}
+                       placeholder="请输入"
+                       value={string}
+                       style={{width:200,}}
+            />
+              </span>}
+              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
+            
+                 </div>)
+        
+         }else if(number.includes(obj.type)){
+            return ( <div> <Select onChange={this.changeStringX}
+                                   value={stringX||"="}
+                                   style={{width:100}}>
+            <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={{padding: '0px 10px'}}>
+            <InputNumber onChange={this.changeNumber}
+                         placeholder="请输入"
+                         value={string}
+                         style={{width:200}}
+            />
+              </span>}
+              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
+            </div>)
+         }else if(obj.type === "BIT"){
+            return ( <div>
+              <Select onChange={this.changeStringX}
+                     value={stringX||"="}
+                      style={{width:100}}>
+                <Option value="=">
+                  等于
+                </Option>
+                </Select>
+                {disabled?"":  <span style={{padding: '0px 10px'}}>
+                <Select onChange={this.changeNumber}
+                        value={string}
+                        style={{width:200}}
+                >
+                <Option value={true}>
+                  是
+                </Option>
+                <Option value={false}>
+                  否
+                </Option>
+                </Select>
+              </span>}
+              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
+            </div>)
+        }else if(data.includes(obj.type)){
+            return(<div>
+              <Select onChange={this.changeStringX}
+                      value={stringX||"="}
+                      style={{width:100}}>
+            <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={{padding: '0px 10px'}}>
+              <DatePicker onChange={this.changeDate}
+                        showTime
+                        format="YYYY-MM-DD HH:mm:ss"
+                          allowClear={false}
+                          style={{width:200}}
+                          value={string?moment(string):null}
+              />
+              </span>}
+              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
+                </div>)
+
+        }else{ 
+            return (<span>暂无法处理</span>)
+         }
+
+         
+    }
+}