| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, Select } from 'antd' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, Select, InputNumber } from 'antd' |
| | | import moment from 'moment' |
| | | |
| | | import Api from '@/api' |
| | | import { formRule } from '@/utils/option.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) |
| | | const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor')) |
| | | const { TextArea } = Input |
| | | |
| | | class SettingForm extends Component { |
| | |
| | | interType: 'system', |
| | | procMode: 'script', |
| | | requestMode: 'system', |
| | | tableType: '', |
| | | funcTooltip: '', |
| | | funcRules: [] |
| | | } |
| | |
| | | if (usefulFields) { |
| | | try { |
| | | usefulFields = JSON.parse(usefulFields) |
| | | } catch { |
| | | } catch (e) { |
| | | usefulFields = [] |
| | | } |
| | | } else { |
| | |
| | | interType: setting.interType || 'system', |
| | | procMode: setting.procMode || 'script', |
| | | requestMode: setting.requestMode || 'system', |
| | | tableType: setting.tableType, |
| | | funcTooltip: tooltip, |
| | | funcRules: rules |
| | | }) |
| | |
| | | render() { |
| | | const { setting, dict, menu, config, columns } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { interType, funcRules, funcTooltip, procMode, requestMode } = this.state |
| | | const { interType, funcRules, funcTooltip, procMode, requestMode, tableType } = this.state |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | required: true, |
| | | message: dict['form.required.input'] + '表名!' |
| | | }, |
| | | { |
| | | max: 50, |
| | | message: '表名最长为50个字符!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | |
| | | {getFieldDecorator('tableType', { |
| | | initialValue: setting.tableType |
| | | })( |
| | | <Radio.Group> |
| | | <Radio.Group onChange={(e) => this.setState({tableType: e.target.value})}> |
| | | <Radio value="">不可选</Radio> |
| | | <Radio value="radio">单选</Radio> |
| | | <Radio value="checkbox">多选</Radio> |
| | |
| | | </Col> : null} |
| | | {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}> |
| | | <Form.Item help={'数据ID:' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={ |
| | | <Tooltip placement="topLeft" title={'使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}> |
| | | <Tooltip placement="topLeft" title={`使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 '';查询替换符 $select@ -> /* 或 ''、 @select$ -> */ 或 '';统计替换符 $sum@ -> /* 或 ''、 @sum$ -> */ 或 ''。`}> |
| | | <Icon type="question-circle" /> |
| | | 数据源 |
| | | </Tooltip> |
| | |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'表格的内边距,从大到小依次递减。'}> |
| | | <Icon type="question-circle" /> |
| | | 表格大小 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('size', { |
| | | initialValue: setting.size || 'middle' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="default">大</Radio> |
| | | <Radio value="middle">中</Radio> |
| | | <Radio value="small">小</Radio> |
| | | {/* <Radio value="mini">微</Radio> */} |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="事务"> |
| | | {getFieldDecorator('transaction', { |
| | | initialValue: setting.transaction || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">使用</Radio> |
| | | <Radio value="false">不使用</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="使用急速模式时,表格中的标记、双击事件、格式化、行合并、前缀、后缀、字段透视等效果将无效,且数据都会以文本格式显示。"> |
| | | <Icon type="question-circle" /> |
| | | 模式 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('tableMode', { |
| | | initialValue: setting.tableMode || 'compatible' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="compatible">兼容</Radio> |
| | | <Radio value="fast">急速</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="数据加载时,是否显示加载中的遮罩。"> |
| | | <Icon type="question-circle" /> |
| | | 遮罩 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('mask', { |
| | | initialValue: setting.mask || 'show' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="show">显示</Radio> |
| | | <Radio value="hidden">隐藏</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="在搜索条件存在时,是否显示搜索和重置按钮。"> |
| | | <Icon type="question-circle" /> |
| | | 搜索按钮 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('show', { |
| | | initialValue: setting.show || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">显示</Radio> |
| | | <Radio value="false">隐藏</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {tableType !== '' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="在启用无人值守功能时无效。"> |
| | | <Icon type="question-circle" /> |
| | | 首行选中 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('selected', { |
| | | initialValue: setting.selected || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="false">无</Radio> |
| | | <Radio value="init">初始化</Radio> |
| | | <Radio value="always">数据加载</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="高级搜索弹窗的宽度,注:当宽度值小于100时表示占窗口的百分比,大于100时表示宽度的绝对值。"> |
| | | <Icon type="question-circle" /> |
| | | 高级搜索 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('advanceWidth', { |
| | | initialValue: setting.advanceWidth || 1000 |
| | | })(<InputNumber min={10} max={3000} precision={0}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="双击表格中行,触发的按钮。"> |
| | | <Icon type="question-circle" /> |
| | | 双击事件 |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="空值时高度自适应。"> |
| | | <Icon type="question-circle" /> |
| | | table高度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('height', { |
| | | initialValue: setting.height |
| | | })(<InputNumber min={10} max={3000} precision={0}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="默认值rgba(0, 0, 0, 0.65)"> |
| | | <Icon type="question-circle" /> |
| | | 字体颜色 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('color', { |
| | | initialValue: setting.color |
| | | })(<MKColor config={{initval: setting.color || 'rgba(0, 0, 0, 0.65)'}} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="字体大小"> |
| | | {getFieldDecorator('fontSize', { |
| | | initialValue: setting.fontSize || 14 |
| | | })(<InputNumber min={12} max={50} precision={0}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | </div> |