| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Button, notification, Select } from 'antd' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Form, Row, Col, Button, notification, Select, Tooltip, Modal } from 'antd' |
| | | import Toast from 'antd-mobile/es/components/toast' |
| | | import Dialog from 'antd-mobile/es/components/dialog' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | class CustomForm extends Component { |
| | | static propTpyes = { |
| | | type: PropTypes.string, // 菜单类型 |
| | | dict: PropTypes.object, // 字典项 |
| | | defaultsql: PropTypes.string, // 默认sql |
| | | setting: PropTypes.object, // 设置 |
| | | searches: PropTypes.array, // 搜索条件 |
| | | swhere: PropTypes.string, // where条件 |
| | | arr_field: PropTypes.string, // 列字段 |
| | | regoptions: PropTypes.array, // 正则替换 |
| | | systemScripts: PropTypes.array, // 系统脚本 |
| | | scriptSubmit: PropTypes.func, // 脚本验证后提交 |
| | | scriptsChange: PropTypes.func // 脚本验证 |
| | |
| | | if (!item.field) return |
| | | |
| | | if (item.type === 'group') { |
| | | if (item.transfer === 'true') { |
| | | _usefulFields.push(item.field) |
| | | } |
| | | _usefulFields.push(item.field) |
| | | _usefulFields.push(item.datefield) |
| | | _usefulFields.push(item.datefield + '1') |
| | | } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) { |
| | | _usefulFields.push(item.field) |
| | | _usefulFields.push(item.field + '1') |
| | | } else if (_usefulFields.includes(item.field)) { |
| | | } else if (item.type === 'date' && _usefulFields.includes(item.field)) { |
| | | _usefulFields.push(item.field + '1') |
| | | } else { |
| | | _usefulFields.push(item.field) |
| | |
| | | this.setState({ |
| | | usefulFields: _usefulFields.join(', ') |
| | | }) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | if (!is(fromJS(this.props.searches), fromJS(nextProps.searches))) { |
| | | |
| | | let _usefulFields = [] |
| | | nextProps.searches.forEach(item => { |
| | | if (!item.field) return |
| | | |
| | | if (item.type === 'group') { |
| | | _usefulFields.push(item.field) |
| | | _usefulFields.push(item.datefield) |
| | | _usefulFields.push(item.datefield + '1') |
| | | } else if (['dateweek', 'datemonth', 'daterange'].includes(item.type)) { |
| | | _usefulFields.push(item.field) |
| | | _usefulFields.push(item.field + '1') |
| | | } else if (item.type === 'date' && _usefulFields.includes(item.field)) { |
| | | _usefulFields.push(item.field + '1') |
| | | } else { |
| | | _usefulFields.push(item.field) |
| | | } |
| | | }) |
| | | |
| | | this.setState({ |
| | | usefulFields: _usefulFields.join(', ') |
| | | }) |
| | | } |
| | | } |
| | | |
| | | edit = (record) => { |
| | |
| | | editItem: null |
| | | }) |
| | | this.props.form.setFieldsValue({ |
| | | sql: '' |
| | | sql: ' ' |
| | | }) |
| | | } |
| | | |
| | |
| | | // 表单提交时检查输入值是否正确 |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | if (/^[\s\n]+$/.test(values.sql)) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请输入sql!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | values.uuid = this.state.editItem ? this.state.editItem.uuid : '' |
| | | |
| | | let _quot = values.sql.match(/'{1}/g) |
| | |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else if (/,,/ig.test(values.sql)) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '自定义sql语句中,不可出现连续的英文逗号(,,)', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let error = Utils.verifySql(values.sql, 'customscript') |
| | |
| | | editItem: null, |
| | | loading: false |
| | | }) |
| | | |
| | | if (values.uuid) { |
| | | MKEmitter.emit('editLineId', values.uuid) |
| | | } |
| | | |
| | | this.props.form.setFieldsValue({ |
| | | sql: '' |
| | | sql: ' ' |
| | | }) |
| | | this.props.scriptSubmit(values) |
| | | }, () => { |
| | | this.setState({ |
| | | loading: false |
| | | }) |
| | | }) |
| | | } |
| | | }) |
| | |
| | | |
| | | selectScript = (value, option) => { |
| | | let _sql = this.props.form.getFieldValue('sql') |
| | | if (_sql) { |
| | | if (_sql === ' ') { |
| | | _sql = '' |
| | | } else if (_sql) { |
| | | _sql = _sql + ` |
| | | |
| | | ` |
| | | } |
| | | |
| | | if (value === 'defaultsql') { |
| | | value = this.props.defaultsql |
| | | } |
| | | |
| | | _sql = _sql.replace(/\s{6}$/, '') |
| | |
| | | }) |
| | | } |
| | | |
| | | showError = (type) => { |
| | | let appType = sessionStorage.getItem('appType') |
| | | |
| | | if (type === 'S') { |
| | | if (appType === 'mob') { |
| | | Toast.show({ icon: 'success', content: '执行成功!', duration: 3000 }) |
| | | } else { |
| | | notification.success({ |
| | | top: 92, |
| | | message: '执行成功!', |
| | | duration: 2 |
| | | }) |
| | | } |
| | | |
| | | } else if (type === 'Y') { |
| | | if (appType === 'mob') { |
| | | Dialog.alert({content: '执行成功!', confirmText: '知道了'}) |
| | | } else { |
| | | Modal.success({ |
| | | title: '执行成功!' |
| | | }) |
| | | } |
| | | } else if (type === 'N') { |
| | | if (appType === 'mob') { |
| | | Dialog.alert({content: '执行失败!', confirmText: '知道了'}) |
| | | } else { |
| | | Modal.error({ |
| | | title: '执行失败!' |
| | | }) |
| | | } |
| | | } else { |
| | | if (appType === 'mob') { |
| | | Toast.show({ icon: 'fail', content: '执行失败!', duration: 3000 }) |
| | | } else { |
| | | notification.error({ |
| | | top: 92, |
| | | message: '执行失败!', |
| | | duration: 10 |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { systemScripts, setting } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { usefulFields } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 8 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | } |
| | | } |
| | | |
| | | let urlFields = window.GLOB.urlFields ? window.GLOB.urlFields.join(', ') : '' |
| | | |
| | | return ( |
| | | <Form {...formItemLayout} className="modal-menu-setting-script"> |
| | | <Form className="modal-source-setting-script"> |
| | | <Row gutter={24}> |
| | | {setting.tableName ? <Col span={8}> |
| | | <Form.Item label={'表名'} style={{whiteSpace: 'nowrap', margin: 0}}> |
| | | {setting.tableName ? <Col span={5}> |
| | | <Form.Item label="表名" style={{whiteSpace: 'nowrap', margin: 0}}> |
| | | {setting.tableName} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={16}> |
| | | <Form.Item label={'报错字段'} style={{margin: 0}}> |
| | | <Col span={19}> |
| | | <Form.Item label="报错字段" style={{margin: 0}}> |
| | | ErrorCode, retmsg |
| | | <span style={{marginLeft: 25}}> |
| | | 成功: |
| | | <span className="error-val" onClick={() => {this.showError('S')}}> S </span>、 |
| | | <span className="error-val" onClick={() => {this.showError('Y')}}> Y </span>、 |
| | | -1(不提示) |
| | | </span> |
| | | <span style={{marginLeft: 20}}> |
| | | 失败: |
| | | <span className="error-val" onClick={() => {this.showError('N')}}> N </span>、 |
| | | -2(不提示)、 |
| | | <span className="error-val" onClick={() => {this.showError('')}}> 其他 </span> |
| | | </span> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24} className="sqlfield"> |
| | | <Form.Item label={'可用字段'}> |
| | | id, bid, loginuid, sessionuid, userid, appkey, time_id, calendarDate, calendarDate1{usefulFields ? ', ' + usefulFields : ''} |
| | | <Col span={24}> |
| | | <Form.Item label="可用字段" className="field-able"> |
| | | <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'公共值,请按照@xxx@格式使用。'}><span style={{color: '#1890ff'}}>BID, LoginUID, SessionUid, UserID, Appkey, time_id, typename</span></Tooltip>, |
| | | <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'系统变量,系统会定义变量并赋值。'}><span style={{color: '#fa8c16'}}>UserName, FullName, RoleID, mk_departmentcode, mk_organization, mk_user_type, mk_nation, mk_province, mk_city, mk_district, mk_address</span></Tooltip>, |
| | | <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'排序、分页以及搜索条件变量,请按照@xxx@格式使用。'}>orderBy, pageSize, pageIndex{usefulFields ? ', ' + usefulFields : ''}</Tooltip> |
| | | <Tooltip mouseLeaveDelay={0.3} mouseEnterDelay={0.3} placement="top" title={'url变量,请按照@xxx@格式使用。'}>{urlFields ? ', ' : ''}<span style={{color: '#13c2c2'}}>{urlFields}</span></Tooltip> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={10}> |
| | | <Form.Item label={'快捷添加'} style={{marginBottom: 0}}> |
| | | <Col span={10} style={{width: '43%'}}> |
| | | <Form.Item label="快捷添加" labelCol={{xs: { span: 24 }, sm: { span: 6 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 18 }} } style={{marginBottom: 0}}> |
| | | <Select |
| | | showSearch |
| | | filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | onChange={this.selectScript} |
| | | onSelect={this.selectScript} |
| | | > |
| | | <Select.Option style={{whiteSpace: 'normal'}} key="default" value="defaultsql">默认sql</Select.Option> |
| | | <Select.Option key="debugger" value={`z_debug: select @ErrorCode='E',@retmsg='测试断点' goto aaa`}> |
| | | 测试断点 |
| | | </Select.Option> |
| | | {systemScripts.map((option, i) => |
| | | <Select.Option style={{whiteSpace: 'normal'}} key={i} value={option.value}>{option.name}</Select.Option> |
| | | )} |
| | |
| | | </Button> |
| | | </Col> |
| | | <Col span={24} className="sql"> |
| | | <Form.Item label={'sql'}> |
| | | <Form.Item label="sql"> |
| | | {getFieldDecorator('sql', { |
| | | initialValue: '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + 'sql!' |
| | | message: '请输入sql!' |
| | | } |
| | | ] |
| | | })(<CodeMirror />)} |
| | | })(<CodeMirror/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |