| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, Select } from 'antd' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Select } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import './index.scss' |
| | | |
| | |
| | | |
| | | state = { |
| | | property: this.props.menu.property || 'menu', |
| | | linkIntId: this.props.menu.linkIntId || '', |
| | | copyMenu: this.props.menu.copyMenuId || '', |
| | | appMenus: [], |
| | | } |
| | | |
| | |
| | | if (appMenus) { |
| | | try { |
| | | appMenus = JSON.parse(appMenus) |
| | | } catch { |
| | | } catch (e) { |
| | | appMenus = [] |
| | | } |
| | | } else { |
| | |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | if (values.linkmenuid) { |
| | | values.linkIntId = this.state.linkIntId || '' |
| | | } |
| | | resolve(values) |
| | | } else { |
| | | reject(err) |
| | |
| | | this.setState({property: val}) |
| | | } |
| | | |
| | | changeLinkMenu = (val, { props }) => { |
| | | this.setState({linkIntId: props.intid}) |
| | | } |
| | | |
| | | render() { |
| | | const { menu } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { property, appMenus } = this.state |
| | | const { property, appMenus, copyMenu } = this.state |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | {/* <Col span={22}> |
| | | <Form.Item label="菜单参数"> |
| | | {getFieldDecorator('MenuNo', { |
| | | initialValue: menu.MenuNo || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入菜单参数!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | <Col span={22}> |
| | | <Form.Item label="菜单属性"> |
| | | {getFieldDecorator('property', { |
| | |
| | | })( |
| | | <Radio.Group onChange={this.changeProperty}> |
| | | <Radio value="menu">菜单</Radio> |
| | | <Radio value="link">链接</Radio> |
| | | <Radio value="linkmenu">关联菜单</Radio> |
| | | <Radio value="link">链接</Radio> |
| | | {menu.level === 1 || menu.level === 2 ? <Radio value="classify">分类</Radio> : null} |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {property === 'linkmenu' ? <Col span={22}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="关联当前app中已有的菜单。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 关联菜单 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('linkMenuId', { |
| | | initialValue: menu.linkMenuId || '', |
| | | rules: [{ |
| | | required: true, |
| | | message: '请选择关联菜单!' |
| | | }] |
| | | })( |
| | | <Select> |
| | | {appMenus.map(item => (<Select.Option key={item.MenuID} value={item.MenuID}>{item.MenuName}</Select.Option>))} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {property === 'menu' ? <Col span={22}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="复制菜单仅在当前菜单不存在时有效。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 复制菜单 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('copyMenuId', { |
| | | initialValue: menu.copyMenuId || '' |
| | | })( |
| | | <Select allowClear dropdownMatchSelectWidth={false} onChange={(val) => this.setState({copyMenu: val})}> |
| | | {appMenus.map(item => (<Select.Option key={item.MenuID} value={item.MenuID}>{item.MenuName}</Select.Option>))} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {property === 'menu' && copyMenu ? <Col span={22}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="复制菜单时,是否清空原页面中的关联菜单。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 清空关联菜单 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('clearMenu', { |
| | | initialValue: menu.clearMenu || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={22}> |
| | | <Form.Item label="隐藏"> |
| | | {getFieldDecorator('hidden', { |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {property === 'link' ? <Col span={22}> |
| | | <Form.Item label="链接地址"> |
| | | {getFieldDecorator('link', { |
| | | initialValue: menu.link || '', |
| | | rules: [{ |
| | | required: true, |
| | | message: '请输入链接地址!' |
| | | }] |
| | | })(<TextArea rows={2} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {property !== 'classify' ? <Col span={22}> |
| | | <Form.Item label="打开方式"> |
| | | {getFieldDecorator('open', { |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {property === 'linkmenu' ? <Col span={22}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="关联当前app中已有的菜单。"> |
| | | <Icon type="question-circle" style={{color: '#c49f47', marginRight: '3px'}}/> |
| | | 关联菜单 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('linkMenuId', { |
| | | initialValue: menu.linkMenuId || '', |
| | | {property === 'link' ? <Col span={22}> |
| | | <Form.Item label="链接地址"> |
| | | {getFieldDecorator('link', { |
| | | initialValue: menu.link || '', |
| | | rules: [{ |
| | | required: true, |
| | | message: '请选择关联菜单!' |
| | | message: '请输入链接地址!' |
| | | }] |
| | | })( |
| | | <Select onChange={this.changeLinkMenu}> |
| | | {appMenus.map(item => (<Select.Option key={item.MenuID} intid={item.menuid_int} value={item.MenuID}>{item.MenuName}</Select.Option>))} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {property === 'menu' ? <Col span={22}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="复制菜单仅在当前菜单不存在时有效。"> |
| | | <Icon type="question-circle" style={{color: '#c49f47', marginRight: '3px'}}/> |
| | | 复制菜单 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('copyMenuId', { |
| | | initialValue: menu.copyMenuId || '' |
| | | })( |
| | | <Select> |
| | | {appMenus.map(item => (<Select.Option key={item.MenuID} value={item.MenuID}>{item.MenuName}</Select.Option>))} |
| | | </Select> |
| | | )} |
| | | })(<TextArea rows={2} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |