| | |
| | | |
| | | // import { formRule } from '@/utils/option.js' |
| | | import StyleInput from '@/menu/stylecontroller/styleInput' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) |
| | | const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | |
| | | fields: null, |
| | | display: this.props.config.setting.display || 'modal', |
| | | placement: this.props.config.setting.placement || 'right', |
| | | icon: this.props.config.setting.icon || '', |
| | | appType: sessionStorage.getItem('appType'), |
| | | viewType: sessionStorage.getItem('editMenuType') || '', |
| | | dialogInput: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config } = this.props |
| | | const { appType, display } = this.state |
| | | let fields = [] |
| | | let dialogInput = null |
| | | |
| | | config.fields.forEach(f => { |
| | | if (f.field && ['select', 'link', 'text', 'number', 'textarea'].includes(f.type) && f.hidden !== 'true' && f.readonly !== 'true') { |
| | | fields.push(f) |
| | | } |
| | | if (f.field && f.hidden !== 'true' && f.readonly !== 'true') { |
| | | if (dialogInput === null) { |
| | | dialogInput = ['text', 'number'].includes(f.type) |
| | | } else { |
| | | dialogInput = false |
| | | } |
| | | } |
| | | }) |
| | | |
| | |
| | | |
| | | this.setState({ |
| | | fields: fields, |
| | | display: _display, |
| | | dialogInput |
| | | display: _display |
| | | }) |
| | | } |
| | | |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { fields, appType, display, placement } = this.state |
| | | const { fields, appType, display, placement, icon } = this.state |
| | | const { getFieldDecorator } = this.props.form |
| | | |
| | | const formItemLayout = { |
| | |
| | | })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {display === 'dialog' && appType === 'mob' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="小于100时为百分率,大于100时为绝对值。空值时宽度自适应。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 宽度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('width', { |
| | | initialValue: config.setting.width || '' |
| | | })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {['dialog', 'drawer', 'modal'].includes(display) ? <Col span={12}> |
| | | <Form.Item label="初始焦点"> |
| | | {getFieldDecorator('focus', { |
| | |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {appType !== 'mob' && display === 'modal' ? <Col span={12}> |
| | | <Form.Item label="图标"> |
| | | {getFieldDecorator('icon', { |
| | | initialValue: icon |
| | | })(<MkEditIcon onChange={(value) => this.setState({icon: value})} allowClear={true}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {appType !== 'mob' && display === 'modal' && icon ? <Col span={12}> |
| | | <Form.Item label="图标样式"> |
| | | {getFieldDecorator('iconType', { |
| | | initialValue: config.setting.iconType || 'def' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="def">默认</Radio> |
| | | <Radio value="circle">圆形</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {appType !== 'mob' && display === 'modal' && icon ? <Col span={12}> |
| | | <Form.Item label="图标颜色"> |
| | | {getFieldDecorator('iconColor', { |
| | | initialValue: config.setting.iconColor || '' |
| | | })(<ColorSketch allowClear={true}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {appType === 'mob' && display === 'drawer' ? <Col span={12}> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {display === 'drawer' && appType !== 'mob' ? <Col span={12}> |
| | | <Form.Item label="表单类型"> |
| | | {appType !== 'mob' && (display === 'drawer' || display === 'modal') ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="选择查看时表单均为只读,仅用于数据展示。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 表单类型 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('formType', { |
| | | initialValue: config.setting.formType || 'edit' |
| | | })( |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {display === 'prompt' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="提示框的确认提示信息。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 确认提示 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('tipTitle', { |
| | | initialValue: config.setting.tipTitle || '' |
| | | })( |
| | | <Input autoComplete="off" onPressEnter={this.handleSubmit} /> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {!this.props.isSubTab && !appType && this.state.viewType !== 'popview' && display === 'modal' ? <Col span={12}> |
| | | <Form.Item label="挂载对象"> |
| | | {getFieldDecorator('container', { |