| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, InputNumber, Select, Radio } from 'antd' |
| | | import { Form, Row, Col, Input, InputNumber, Select, Radio, Tooltip } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import { formRule } from '@/utils/option.js' |
| | | import TransferForm from '@/templates/zshare/transferform' |
| | | import './index.scss' |
| | | // import './index.scss' |
| | | |
| | | class MainSearch extends Component { |
| | | static propTpyes = { |
| | |
| | | if (_form && _form.select) { |
| | | _form.select() |
| | | } |
| | | } catch { |
| | | } catch (e) { |
| | | console.warn('表单focus失败!') |
| | | } |
| | | } |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { card } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | } |
| | | } |
| | | return ( |
| | | <Form {...formItemLayout} className="commontable-cospan-column-form" id="columncolspan"> |
| | | <Form {...formItemLayout} style={{minHeight: '190px'}} id="columncolspan"> |
| | | <Row gutter={24}> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.name']}> |
| | | <Form.Item label={this.props.dict['model.name']}> |
| | | {getFieldDecorator('label', { |
| | | initialValue: this.props.card.label, |
| | | initialValue: card.label, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + this.props.dict['header.form.name'] + '!' |
| | | message: this.props.dict['form.required.input'] + this.props.dict['model.name'] + '!' |
| | | }, |
| | | { |
| | | max: formRule.input.max, |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.type']}> |
| | | <Form.Item label={this.props.dict['model.form.type']}> |
| | | {getFieldDecorator('type', { |
| | | initialValue: this.props.dict['model.form.colspan'], |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + this.props.dict['header.form.type'] + '!' |
| | | message: this.props.dict['form.required.input'] + this.props.dict['model.form.type'] + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" disabled={true}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.align']}> |
| | | <Form.Item label={this.props.dict['model.form.align']}> |
| | | {getFieldDecorator('Align', { |
| | | initialValue: this.props.card.Align, |
| | | initialValue: card.Align, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.select'] + this.props.dict['header.form.align'] + '!' |
| | | message: this.props.dict['form.required.select'] + this.props.dict['model.form.align'] + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Select |
| | | getPopupContainer={() => document.getElementById('columncolspan')} |
| | | > |
| | | <Select.Option value="left">{this.props.dict['header.form.alignLeft']}</Select.Option> |
| | | <Select.Option value="right">{this.props.dict['header.form.alignRight']}</Select.Option> |
| | | <Select.Option value="center">{this.props.dict['header.form.alignCenter']}</Select.Option> |
| | | <Select.Option value="left">{this.props.dict['model.form.alignLeft']}</Select.Option> |
| | | <Select.Option value="right">{this.props.dict['model.form.alignRight']}</Select.Option> |
| | | <Select.Option value="center">{this.props.dict['model.form.alignCenter']}</Select.Option> |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.columnWidth']}> |
| | | <Form.Item label={this.props.dict['model.form.columnWidth']}> |
| | | {getFieldDecorator('Width', { |
| | | initialValue: this.props.card.Width, |
| | | initialValue: card.Width, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + this.props.dict['header.form.columnWidth'] + '!' |
| | | message: this.props.dict['form.required.input'] + this.props.dict['model.form.columnWidth'] + '!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={1000} precision={0} />)} |
| | | })(<InputNumber min={1} max={1000} precision={0} onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.Hide']}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="选择显示分组,表格会展开添加分组的子列,此时排列方式会失效。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 显示分组 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('unfold', { |
| | | initialValue: card.unfold || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">{this.props.dict['model.true']}</Radio> |
| | | <Radio value="false">{this.props.dict['model.false']}</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['model.hidden']}> |
| | | {getFieldDecorator('Hide', { |
| | | initialValue: this.props.card.Hide, |
| | | initialValue: card.Hide || 'false', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.select'] + this.props.dict['header.form.Hide'] + '!' |
| | | message: this.props.dict['form.required.select'] + this.props.dict['model.hidden'] + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">{this.props.dict['header.form.true']}</Radio> |
| | | <Radio value="false">{this.props.dict['header.form.false']}</Radio> |
| | | <Radio value="true">{this.props.dict['model.true']}</Radio> |
| | | <Radio value="false">{this.props.dict['model.false']}</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | |
| | | <Col span={12}> |
| | | <Form.Item label={this.props.dict['header.form.order']}> |
| | | {getFieldDecorator('order', { |
| | | initialValue: this.props.card.order, |
| | | initialValue: card.order, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | |
| | | } |
| | | ] |
| | | })( |
| | | <Select |
| | | getPopupContainer={() => document.getElementById('columncolspan')} |
| | | > |
| | | <Select getPopupContainer={() => document.getElementById('columncolspan')} > |
| | | <Select.Option value="vertical">{this.props.dict['header.form.vertical']}</Select.Option> |
| | | <Select.Option value="horizontal">{this.props.dict['header.form.horizontal']}</Select.Option> |
| | | <Select.Option value="vertical2">{this.props.dict['header.form.vertical2']}</Select.Option> |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24}> |
| | | <TransferForm dict={this.props.dict} columns={this.props.columns} ref="column-transfer" selected={this.props.card.sublist}/> |
| | | <TransferForm columns={this.props.columns} ref="column-transfer" selected={card.sublist}/> |
| | | </Col> |
| | | </Row> |
| | | </Form> |