2020-08-06

king

2020-08-06 5ff2ee3b46a584368a6d2cebbe180abb1947f927

2020-08-06

 src/templates/sharecomponent/actioncomponent/verifyexcelin/customscript/index.jsx

@@ -1,14 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Input, Button, notification, Modal, Icon, Tooltip, Radio, Select } from 'antd'
import { Form, Row, Col, Button, notification, Modal, Icon, Tooltip, Radio, Select } from 'antd'
import moment from 'moment'

import Utils from '@/utils/utils.js'
import Api from '@/api'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

class CustomForm extends Component {
  static propTpyes = {
@@ -314,7 +313,7 @@
                    message: this.props.dict['form.required.input'] + 'sql!'
                  }
                ]
              })(<TextArea rows={15} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        </Row>

 src/templates/sharecomponent/actioncomponent/verifyexcelin/index.scss

@@ -21,6 +21,9 @@
        width: 89.5%;
        padding-top: 4px;
      }
      .CodeMirror {
        height: 350px;
      }
    }
    .sqlfield {
      .ant-form-item {

 src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx

@@ -1,17 +1,17 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Tabs, Row, Col, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber, Radio, Input } from 'antd'
import { Form, Tabs, Row, Col, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber, Radio } from 'antd'
import moment from 'moment'

import Api from '@/api'
import Utils from '@/utils/utils.js'

import ColumnForm from './columnform'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TabPane } = Tabs
const { TextArea } = Input
const { confirm } = Modal

class VerifyCard extends Component {
@@ -480,7 +480,7 @@
                          message: this.props.dict['form.required.input'] + 'sql!'
                        }
                      ]
                    })(<TextArea rows={15} />)}
                    })(<CodeMirror />)}
                  </Form.Item>
                </Col>
              </Row>

 src/templates/sharecomponent/actioncomponent/verifyexcelout/index.scss

@@ -21,6 +21,9 @@
        width: 89.5%;
        padding-top: 4px;
      }
      .CodeMirror {
        height: 350px;
      }
    }
    .sqlfield {
      .ant-form-item {

 src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx

@@ -2,21 +2,15 @@
import PropTypes from 'prop-types'
import { Form, Tabs, Row, Col, Button, notification, Modal, message, InputNumber, Input, Select, Radio } from 'antd'
import moment from 'moment'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import CodeMirror from '@/templates/zshare/codemirror'
import EditTable from './editable'

import 'codemirror/lib/codemirror.css'
// import 'codemirror/theme/solarized.css'
import 'codemirror/theme/cobalt.css'

import './index.scss'

const { TabPane } = Tabs
let _printFunc = null // antd 无法获取 codemirror 内容，手动控制

class VerifyCard extends Component {
  static propTpyes = {
@@ -49,8 +43,6 @@
      printMode: _verify.printMode,
      printFunc: _verify.printFunc || '// Function(data, form, printer, notification) data-打印数据列表，form-表单信息（不存在时为{}），printer-打印设置，notification-信息提示控件'
    })

    _printFunc = _verify.printFunc || ''
  }

  componentDidMount() {
@@ -170,7 +162,7 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let _verify = {...verify, ...values, printFunc: _printFunc}
          let _verify = {...verify, ...values}

          if (this.refs.editTable && this.refs.editTable.state) {
            let printTypes = this.refs.editTable.state.dataSource
@@ -309,19 +301,7 @@
                        }
                      ]
                    })(
                      <CodeMirror
                        className="code-mirror-area"
                        options={{
                          mode: 'text/javascript',
                          theme: 'cobalt',
                          lineNumbers: true,
                          lineWrapping: true
                        }}
                        onBeforeChange={() => {}}
                        onBlur={(editor) => {
                          _printFunc = editor.getValue()
                        }}
                      />
                      <CodeMirror mode="text/javascript"/>
                    )} 
                  </Form.Item>
                </Col> : null}
@@ -336,7 +316,7 @@
                        }
                      ]
                    })(
                      <Select onChange={this.changeTemplate}>
                      <Select dropdownClassName="print-template-setting" onChange={this.changeTemplate}>
                        {this.state.templates.map((option, key) =>
                          <Select.Option id={key} key={key} value={option.value}>
                            {option.text}

 src/templates/sharecomponent/actioncomponent/verifyprint/index.scss

@@ -37,9 +37,6 @@
    }
  }
  .code-mirror-area {
    font-size : 14px;
    line-height : 25px;

    .CodeMirror {
      height: calc(100vh - 360px);
    }
@@ -57,4 +54,9 @@
      }
    }
  }
}
.print-template-setting {
  .ant-select-dropdown-menu-item {
    white-space: normal;
  }
}

 src/templates/sharecomponent/searchcomponent/searchform/index.jsx

@@ -4,9 +4,8 @@
import { dateOptions, matchReg, formRule } from '@/utils/option.js'
import EditTable from '../searcheditable'
import Utils from '@/utils/utils.js'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

const groupOptions = [
  {
@@ -478,7 +477,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        )

 src/templates/sharecomponent/searchcomponent/searchform/index.scss

@@ -9,6 +9,9 @@
    .ant-form-item-control-wrapper {
      width: 100%;
    }
    .CodeMirror {
      height: 150px;
    }
  }
  .anticon-question-circle {
    color: #c49f47;

 src/templates/sharecomponent/settingcomponent/settingform/customscript/index.jsx

@@ -1,14 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Button, notification, Modal, Select } from 'antd'
import { Form, Row, Col, Button, notification, Modal, Select } from 'antd'
import moment from 'moment'

import Utils from '@/utils/utils.js'
import SettingUtils from '../utils.jsx'
import Api from '@/api'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

class CustomForm extends Component {
  static propTpyes = {
@@ -267,7 +266,7 @@
                    message: this.props.dict['form.required.input'] + 'sql!'
                  }
                ]
              })(<TextArea rows={15} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        </Row>

 src/templates/sharecomponent/settingcomponent/settingform/customscript/index.scss

@@ -27,5 +27,8 @@
      width: 89.5%;
      padding-top: 4px;
    }
    .CodeMirror {
      height: 350px;
    }
  }
}

 src/templates/sharecomponent/settingcomponent/settingform/index.jsx

@@ -8,6 +8,7 @@
import Utils from '@/utils/utils.js'
import SettingUtils from './utils.jsx'
import CustomScript from './customscript'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input
@@ -705,7 +706,7 @@
      } else if (item.type === 'datasource') {
        fields.push(
          <Col span={24} key={index} style={{paddingLeft: '7px'}}>
            <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } help={item.help} label={
            <Form.Item className="text-area" labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } help={item.help} label={
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
@@ -713,7 +714,7 @@
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<TextArea rows={4} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        )

 src/templates/sharecomponent/settingcomponent/settingform/index.scss

@@ -13,6 +13,11 @@
      color: #c49f47;
      margin-right: 3px;
    }
    .text-area {
      .CodeMirror {
        height: 150px;
      }
    }
  }
  .operation-btn {
    display: inline-block;

 src/templates/zshare/codemirror/index.jsx

New file
@@ -0,0 +1,137 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Icon, Dropdown, Menu } from 'antd'

import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
import 'codemirror/addon/display/fullscreen.js'

import 'codemirror/addon/display/fullscreen.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/cobalt.css'

import './index.scss'

class CodeMirrorComponent extends Component {
  static propTpyes = {
    value: PropTypes.string, // 内容
    mode: PropTypes.any,     // 可选，语言模式，默认为sql
    theme: PropTypes.any,    // 可选，主题样式
    onChange: PropTypes.func // 内容变化时回调
  }

  state = {
    editor: null,   // code对象
    defaultVal: '', // 初始值
    value: '',      // 实时内容
    options: null,  // mode : text/javascript、text/x-mysql ; theme : cobalt - 黑底
    fullScreen: false,
    style: null
  }

  UNSAFE_componentWillMount () {
    let options = {
      lineNumbers: true,
      lineWrapping: true,
      fullScreen: false
    }

    options.mode = this.props.mode || 'text/x-mysql'
    if (this.props.theme) {
      options.theme = this.props.theme
    }

    this.setState({
      value: this.props.value || '',
      defaultVal: this.props.value || '',
      options
    })
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { value, editor } = this.state

    if (value !== nextProps.value) {
      this.setState({
        value: nextProps.value || ''
      })

      if (editor && editor.setValue) {
        editor.setValue(nextProps.value || '')
      } else {
        this.setState({
          defaultVal: nextProps.value || ''
        })
      }
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS({...this.state, value: '', editor: ''}), fromJS({...nextState, value: '', editor: ''}))
  }

  fullScreenChange = () => {
    const { options, fullScreen } = this.state

    this.setState({options: {...options, fullScreen: !fullScreen}, fullScreen: !fullScreen})
  }

  changeSize = () => {

  }

  render() {
    const { defaultVal, options, fullScreen, style } = this.state
    const menu = (
      <Menu>
        <Menu.Item
          style={!style || style.fontSize === '14px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '14px', lineHeight: '25px'}})}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>14px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '16px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '16px', lineHeight: '28px'}})}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>16px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '18px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '18px', lineHeight: '32px'}})}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>18px</span>
        </Menu.Item>
        <Menu.Item
          style={style && style.fontSize === '20px' ? {backgroundColor: '#bae7ff'} : ''}
          onClick={() => {this.setState({style: {fontSize: '20px', lineHeight: '34px'}})}}
        >
          <span style={{padding: '0 10px 0px 5px'}}>20px</span>
        </Menu.Item>
      </Menu>
    )

    return (
      <div className="code-mirror-wrap" style={fullScreen ? style : null}>
        {!fullScreen ? <Icon type="fullscreen" onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Icon type="fullscreen-exit" onClick={this.fullScreenChange}/> : null}
        {fullScreen ? <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="font-size" />
        </Dropdown> : null}
        <CodeMirror
          className="code-mirror-area"
          value={defaultVal}
          options={options}
          onChange={(editor, data, value) => {
            this.setState({editor, value})
            this.props.onChange(value)
          }}
        />
      </div>
    )
  }
}

export default CodeMirrorComponent

 src/templates/zshare/codemirror/index.scss

New file
@@ -0,0 +1,76 @@
.code-mirror-wrap {
  font-size : 14px;
  line-height : 25px;
  position: relative;
  .anticon-fullscreen {
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 5px;
    font-size: 18px;
    opacity: 0.7;
    color: #1890ff;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .anticon-fullscreen:hover {
    opacity: 1;
  }
  .anticon-fullscreen-exit {
    position: fixed;
    z-index: 11;
    right: 10px;
    top: 5px;
    font-size: 20px;
    opacity: 0.7;
    color: #1890ff;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .anticon-fullscreen-exit:hover {
    opacity: 1;
  }
  .anticon-font-size {
    position: fixed;
    z-index: 11;
    right: 10px;
    top: 40px;
    font-size: 20px;
    opacity: 0.7;
    color: #1890ff;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .anticon-font-size:hover {
    opacity: 1;
  }
  .code-mirror-area {
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    .CodeMirror {
      border-radius: 4px;
      min-height: 100px;
    }
    .CodeMirror-fullscreen.CodeMirror {
      border-radius: 0;
      position: fixed;
      z-index: 10;
    }
  
    // 重置模态框滚动条
    .CodeMirror-vscrollbar::-webkit-scrollbar {
      width: 7px;
    }
    .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
      border-radius: 4px;
      box-shadow: inset 0 0 5px #bfbfbf;
      background: #bfbfbf;
    }
    .CodeMirror-vscrollbar::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px #f5f5f5;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.93);
      background: #f5f5f5;
    }
  }
}

 src/templates/zshare/modalform/index.jsx

@@ -5,9 +5,8 @@
import { dateOptions } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import EditTable from './modaleditable'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

const modalTypeOptions = {
  text: ['label', 'field', 'initval', 'type', 'readonly', 'required', 'hidden', 'readin', 'blacklist', 'fieldlength', 'regular', 'interception'],
@@ -486,7 +485,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        )

 src/templates/zshare/modalform/index.scss

@@ -9,6 +9,9 @@
    .ant-form-item-control-wrapper {
      width: 100%;
    }
    .CodeMirror {
      height: 150px;
    }
  }
  .ant-form-item-label .anticon-question-circle {
    color: #c49f47;

 src/templates/zshare/verifycard/customform/index.jsx

@@ -5,9 +5,8 @@

import Utils from '@/utils/utils.js'
import Api from '@/api'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

class CustomForm extends Component {
  static propTpyes = {
@@ -154,7 +153,7 @@
                    message: this.props.dict['form.required.input'] + 'sql!'
                  }
                ]
              })(<TextArea rows={15} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
          <Col span={3} className="add">

 src/templates/zshare/verifycard/customscript/index.jsx

@@ -1,13 +1,12 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Button, notification, Modal, Tooltip, Icon, Radio, Select } from 'antd'
import { Form, Row, Col, Button, notification, Modal, Tooltip, Icon, Radio, Select } from 'antd'
import moment from 'moment'

import Utils from '@/utils/utils.js'
import Api from '@/api'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

class CustomForm extends Component {
  static propTpyes = {
@@ -245,7 +244,7 @@
                    message: this.props.dict['form.required.input'] + 'sql!'
                  }
                ]
              })(<TextArea rows={15} />)}
              })(<CodeMirror />)}
            </Form.Item>
          </Col>
        </Row>

 src/templates/zshare/verifycard/index.scss

@@ -21,6 +21,9 @@
        width: 89.5%;
        padding-top: 4px;
      }
      .CodeMirror {
        height: 350px;
      }
    }
    .sqlfield {
      .ant-form-item {

 src/utils/utils.js

@@ -967,7 +967,7 @@
        Select  @ErrorCode='', @retmsg='', @UserName='${userName}', @FullName='${fullName}'
        `
    }
    

    return {
      sql: _sql,
      lines: result.map((list, index) => {
@@ -987,13 +987,18 @@
   * @param {Number} number 时间值 
   */
  static formatExcelDate(number) {
    const time = new Date((number - 1) * 24 * 3600000 + 1)
    time.setYear(time.getFullYear() - 70)
    const year = time.getFullYear()
    const month = time.getMonth() + 1
    const date = time.getDate() - 1
    if (number < 60) { // 1900-2-29，excel中存在，实际不存在
      number++
    }

    return `${year}-${(month < 10 ? '0' + month : month)}-${(date < 10 ? '0' + date : date)}`
    return moment('19000101', 'YYYYMMDD').add(number - 2, 'days').format('YYYY-MM-DD')
    // const time = new Date((number - 25569) * 24 * 3600000)
    // time.setYear(time.getFullYear() - 70)
    // const year = time.getFullYear()
    // const month = time.getMonth() + 1
    // const date = time.getDate() - 1

    // return `${year}-${(month < 10 ? '0' + month : month)}-${(date < 10 ? '0' + date : date)}`
  }

  /**