| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Button, notification, Modal, Menu, Icon, Radio, Dropdown } from 'antd' |
| | | import { Form, Row, Col, Input, Button, notification, Modal, Select, Radio } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | class CustomForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | tableName: PropTypes.string, // 表名 |
| | | setting: PropTypes.object, // 设置 |
| | | searches: PropTypes.array, // 搜索条件 |
| | | systemScripts: PropTypes.array, // 系统脚本 |
| | | customScripts: PropTypes.array, // 自定义脚本 |
| | | scriptsChange: PropTypes.func // 表单 |
| | |
| | | |
| | | state = { |
| | | editItem: null, |
| | | loading: false |
| | | loading: false, |
| | | usefulFields: '' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | const { searches } = this.props |
| | | let _usefulFields = searches.map(item => { |
| | | if (item.type === 'group') { |
| | | if (item.transfer === 'true') { |
| | | return item.field + ', ' + item.datefield |
| | | } else { |
| | | return item.datefield |
| | | } |
| | | } else { |
| | | return item.field |
| | | } |
| | | }) |
| | | |
| | | this.setState({ |
| | | usefulFields: _usefulFields.join(', ') |
| | | }) |
| | | } |
| | | |
| | | edit = (record) => { |
| | |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | const { searches, setting } = this.props |
| | | |
| | | // 表单提交时检查输入值是否正确 |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | |
| | | LText: _initsql + values.sql + tail |
| | | } |
| | | |
| | | let allSearch = Utils.initMainSearch(searches) |
| | | allSearch = Utils.getAllSearchOptions(allSearch) |
| | | |
| | | let regoptions = allSearch.map(item => { |
| | | return { |
| | | reg: new RegExp('@' + item.key + '@', 'ig'), |
| | | value: `'${item.value}'` |
| | | } |
| | | }) |
| | | |
| | | regoptions.push({ |
| | | reg: new RegExp('@orderBy@', 'ig'), |
| | | value: setting.order |
| | | }) |
| | | if (setting.laypage !== 'false') { |
| | | regoptions.push({ |
| | | reg: new RegExp('@pageSize@', 'ig'), |
| | | value: 10 |
| | | }, { |
| | | reg: new RegExp('@pageIndex@', 'ig'), |
| | | value: 1 |
| | | }) |
| | | } |
| | | |
| | | regoptions.forEach(item => { |
| | | param.LText = param.LText.replace(item.reg, item.value) |
| | | }) |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | |
| | | }) |
| | | } |
| | | |
| | | selectScript = (e) => { |
| | | const { systemScripts } = this.props |
| | | |
| | | let option = systemScripts[+e.key] |
| | | |
| | | selectScript = (value, option) => { |
| | | let _sql = this.props.form.getFieldValue('sql') |
| | | if (_sql) { |
| | | _sql = _sql + ` |
| | |
| | | } |
| | | |
| | | _sql = _sql.replace(/\s{6}$/, '') |
| | | _sql = _sql + `/*${option.name}*/ |
| | | _sql = _sql + `/*${option.props.children}*/ |
| | | ` |
| | | _sql = _sql.replace(/\s{4}$/, '') |
| | | _sql = _sql + option.value |
| | | _sql = _sql + value |
| | | |
| | | this.props.form.setFieldsValue({ |
| | | sql: _sql |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { systemScripts, tableName } = this.props |
| | | const { systemScripts, setting } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { usefulFields } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | return ( |
| | | <Form {...formItemLayout} className="modal-menu-setting-script"> |
| | | <Row gutter={24}> |
| | | {setting.tableName ? <Col span={8}> |
| | | <Form.Item label={'表名'} style={{whiteSpace: 'nowrap', margin: 0}}> |
| | | {setting.tableName} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={16}> |
| | | <Form.Item label={'报错字段'} style={{margin: 0}}> |
| | | errorCode, errmsg |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24} className="sqlfield"> |
| | | <Form.Item label={'可用字段'}> |
| | | id, bid, loginuid, sessionuid, userid, appkey |
| | | id, bid, loginuid, sessionuid, userid, appkey{usefulFields ? ', ' + usefulFields : ''} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8} style={{whiteSpace: 'nowrap'}}> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={4} style={{lineHeight: '40px', textAlign: 'center'}}> |
| | | <Dropdown trigger={['click']} overlayClassName="mk-normal-dropdown" overlay={ |
| | | <Menu onClick={this.selectScript}> |
| | | <Col span={10}> |
| | | <Form.Item label={'快捷添加'} style={{marginBottom: 0}}> |
| | | <Select |
| | | showSearch |
| | | filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | onChange={this.selectScript} |
| | | > |
| | | {systemScripts.map((option, i) => |
| | | <Menu.Item key={i}>{option.name}</Menu.Item> |
| | | <Select.Option style={{whiteSpace: 'normal'}} key={i} value={option.value}>{option.name}</Select.Option> |
| | | )} |
| | | </Menu> |
| | | }> |
| | | <span style={{color: '#1890ff', display: 'inline-block', cursor: 'pointer'}}> |
| | | 快捷添加 <Icon type="down" style={{marginRight: '5px'}} /> |
| | | </span> |
| | | </Dropdown> |
| | | </Select> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={4} className="add"> |
| | | <Button onClick={this.handleConfirm} loading={this.state.loading} className="mk-green" style={{marginBottom: 15, marginLeft: 40}}> |
| | | 保存 |
| | | </Button> |
| | | </Col> |
| | | <Col span={8} style={{textAlign: 'right'}}> |
| | | {tableName ? <span style={{maxWidth: '100%', display: 'inline-block', position: 'relative', top: '20px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden'}}> |
| | | 表名: {tableName} |
| | | </span> : null} |
| | | </Col> |
| | | <Col span={24} className="sql"> |
| | | <Form.Item label={'sql'}> |