| | |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | tabs: null, |
| | | editab: null, |
| | | labelvisible: false |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | MKEmitter.addListener('submitSearch', this.getSearch) |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitStyle', this.getStyle) |
| | | MKEmitter.removeListener('submitSearch', this.getSearch) |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | |
| | | this.tabLabelRef.handleConfirm().then(res => { |
| | | editab.label = res.label |
| | | editab.icon = res.icon |
| | | editab.hasSearch = res.hasSearch || '' |
| | | editab.blacklist = res.blacklist |
| | | |
| | | if (editab.uuid) { |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getSearch = (config) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.uuid !== config.uuid) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | |
| | | _tabs.subtabs = _tabs.subtabs.map(t => { |
| | | if (t.uuid === config.tabId) { |
| | | t.search = config.search |
| | | } |
| | | return t |
| | | }) |
| | | |
| | | this.setState({ |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } |
| | | |
| | | setSearch = (tab) => { |
| | | const { tabs } = this.state |
| | | let card = { |
| | | uuid: tabs.uuid, |
| | | tabId: tab.uuid, |
| | | search: tab.search |
| | | } |
| | | |
| | | if (!card.search) { |
| | | card.search = { |
| | | floor: 1, |
| | | setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeSearch', card) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, dict, labelvisible, editab } = this.state |
| | | const { tabs, dict, labelvisible, editab, appType } = this.state |
| | | let _style = resetStyle(tabs.style) |
| | | |
| | | return ( |
| | | <div className="menu-tabs-edit-box" style={_style} onClick={this.clickComponent} id={tabs.uuid}> |
| | | <div className={'menu-tabs-edit-box ' + tabs.setting.display} style={_style} onClick={this.clickComponent} id={tabs.uuid}> |
| | | <DraggableTabs tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch}> |
| | | {tabs.subtabs.map(tab => ( |
| | | <TabPane tab={ |
| | |
| | | <span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid}> |
| | | {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? |
| | | <Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : null} |
| | | <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> |
| | | </TabPane> |
| | | ))} |
| | |
| | | <TabLabelComponent |
| | | dict={dict} |
| | | tab={editab} |
| | | setting={tabs.setting} |
| | | inputSubmit={this.tabLabelSubmit} |
| | | wrappedComponentRef={(inst) => this.tabLabelRef = inst} |
| | | /> |
| | |
| | | } |
| | | } |
| | | } |
| | | .search-icon { |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 40px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | padding: 3px; |
| | | } |
| | | } |
| | | .menu-tabs-edit-box:hover { |
| | | z-index: 1; |
| | | box-shadow: 0px 0px 4px #1890ff; |
| | | } |
| | | |
| | | .mob-shell { |
| | | .menu-tabs-edit-box.flex { |
| | | >.ant-tabs.ant-tabs-top, >.ant-tabs.ant-tabs-bottom { |
| | | >.ant-tabs-bar { |
| | | >.ant-tabs-nav-container { |
| | | >.ant-tabs-nav-wrap { |
| | | >.ant-tabs-nav-scroll { |
| | | >.ant-tabs-nav { |
| | | display: block; |
| | | >div { |
| | | display: flex; |
| | | >.ant-tabs-tab { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Icon, Select } from 'antd' |
| | | import { Form, Row, Col, Input, Icon, Select, Radio } from 'antd' |
| | | |
| | | // import { formRule } from '@/utils/option.js' |
| | | import './index.scss' |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | tab: PropTypes.object, // 数据源配置 |
| | | inputSubmit: PropTypes.func // 回车事件 |
| | | dict: PropTypes.object, |
| | | setting: PropTypes.object, |
| | | tab: PropTypes.object, |
| | | inputSubmit: PropTypes.func |
| | | } |
| | | |
| | | state = {roleList: []} |
| | | state = {roleList: [], appType: sessionStorage.getItem('appType')} |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { tab } = this.props |
| | | const { tab, setting } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { roleList } = this.state |
| | | const { roleList, appType } = this.state |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {appType === 'mob' && setting.position === 'top' && setting.display === 'inline-block' ? <Col span={24}> |
| | | <Form.Item label="搜索"> |
| | | {getFieldDecorator('hasSearch', { |
| | | initialValue: tab.hasSearch || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="false">无</Radio> |
| | | <Radio value="icon">有</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}> |
| | | <Form.Item label="黑名单"> |
| | | {getFieldDecorator('blacklist', { |
| | |
| | | |
| | | state = { |
| | | appType: sessionStorage.getItem('appType'), |
| | | position: this.props.setting.position, |
| | | roleList: [] |
| | | } |
| | | |
| | |
| | | render() { |
| | | const { setting } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { roleList, appType } = this.state |
| | | const { roleList, appType, position } = this.state |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | {getFieldDecorator('position', { |
| | | initialValue: setting.position || 'top' |
| | | })( |
| | | <Select> |
| | | <Select onChange={(val) => this.setState({position: val})}> |
| | | <Select.Option key="top" value="top"> top </Select.Option> |
| | | <Select.Option key="bottom" value="bottom"> bottom </Select.Option> |
| | | <Select.Option key="left" value="left"> left </Select.Option> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {appType === 'mob' && (position === 'top' || position === 'bottom') ? <Col span={12}> |
| | | <Form.Item label="标签显示"> |
| | | {getFieldDecorator('display', { |
| | | initialValue: setting.display || 'flex' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="flex">弹性布局</Radio> |
| | | <Radio value="inline-block">定宽</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={12}> |
| | | <Form.Item label="黑名单"> |
| | | {getFieldDecorator('blacklist', { |
| | |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | floor: card.floor, |
| | | width: card.width || 24, |
| | | width: 24, |
| | | subtype: card.subtype, |
| | | wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', search: 'false', logout: 'false' }, |
| | | style: {borderBottomColor: '#bcbcbc', borderBottomWidth: '1px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, |
| | |
| | | this.setState({ |
| | | card: component |
| | | }) |
| | | |
| | | component.width = component.wrap.width |
| | | component.name = component.wrap.name |
| | | |
| | | this.props.updateConfig(component) |
| | | } |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {type === 'navbar' ? <Col span={12}> |
| | | <Form.Item label="标题"> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="使用搜索栏时,标题用于搜索条件隐藏时显示。"> |
| | | <Icon type="question-circle" /> |
| | | 标题 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('title', { |
| | | initialValue: wrap.title || '' |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* <Col span={12}> |
| | | <Form.Item label="高度"> |
| | | {getFieldDecorator('height', { |
| | | initialValue: wrap.height || 50, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '高度!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={30} max={200} precision={0} onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="返回"> |
| | | {getFieldDecorator('back', { |
| | |
| | | .am-input-control { |
| | | height: 25px; |
| | | padding-top: 10px; |
| | | padding-left: 12px; |
| | | } |
| | | } |
| | | } |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Select } from 'antd' |
| | | import { Form, Row, Col, Input, Radio, Select, Tooltip, Icon } from 'antd' |
| | | import { formRule } from '@/utils/option.js' |
| | | import './index.scss' |
| | | |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {type === 'title' ? <Col span={12}> |
| | | <Form.Item label="标题"> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="使用搜索栏时,标题用于搜索条件隐藏时显示。"> |
| | | <Icon type="question-circle" /> |
| | | 标题 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('title', { |
| | | initialValue: config.setting.title, |
| | | rules: [ |
| | |
| | | ] |
| | | })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Col> |
| | | {type === 'search' ? <Col span={12}> |
| | | <Form.Item label="搜索字段"> |
| | | {getFieldDecorator('field', { |
| | |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {type === 'search' ? <Col span={12}> |
| | | <Form.Item label="匹配方式"> |
| | | {getFieldDecorator('match', { |
| | | initialValue: config.setting.match || 'like' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="like">like</Radio> |
| | | <Radio value="not like">not like</Radio> |
| | | <Radio value="=">=</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {type === 'search' ? <Col span={12}> |
| | | <Form.Item label="必填"> |
| | | {getFieldDecorator('required', { |
| | | initialValue: config.setting.required || 'false' |
| | |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {type === 'search' ? <Col span={12}> |
| | | <Form.Item label="隐藏"> |
| | | {getFieldDecorator('Hide', { |
| | | initialValue: config.setting.Hide || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {type === 'search' ? <Col span={12}> |
| | | <Form.Item label="自动聚焦"> |
| | | {getFieldDecorator('focus', { |
| | | initialValue: config.setting.focus || 'true' |
| | |
| | | import PropTypes from 'prop-types' |
| | | import { Col, Row } from 'antd' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import './index.scss' |
| | | |
| | | class CheckCard extends Component { |
| | |
| | | } |
| | | |
| | | changeCard = (item) => { |
| | | const { multiple, readonly } = this.props.card |
| | | const { card } = this.props |
| | | const { selectKeys } = this.state |
| | | |
| | | if (readonly) return |
| | | if (card.readonly) return |
| | | |
| | | if (multiple === 'true') { |
| | | if (card.multiple === 'true') { |
| | | let keys = [] |
| | | if (selectKeys.includes(item.$value)) { |
| | | keys = selectKeys.filter(key => key !== item.$value) |
| | |
| | | }, () => { |
| | | this.props.onChange && this.props.onChange(keys.join(',')) |
| | | }) |
| | | } else if (multiple !== 'true' && selectKeys !== item.$value) { |
| | | } else if (selectKeys !== item.$value) { |
| | | card.linkFields && card.linkFields.forEach((m, i) => { |
| | | setTimeout(() => { |
| | | MKEmitter.emit('mkSP', m.uuid, item.$value, 0) |
| | | }, (i + 1) * 10) |
| | | }) |
| | | |
| | | this.setState({ |
| | | selectKeys: item.$value |
| | | }, () => { |
| | |
| | | let _list = _searchlist.map(item => { |
| | | if (item.hidden) return item |
| | | |
| | | if (linkFields[item.field] && (item.type === 'select' || item.type === 'link')) { |
| | | if (linkFields[item.field]) { |
| | | item.linkFields = linkFields[item.field] |
| | | } |
| | | |
| | |
| | | selectChange = (val) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.linkFields) { |
| | | config.linkFields.forEach((m, i) => { |
| | | if (config.type === 'multiselect') { |
| | | this.props.onChange(val.join(',')) |
| | | } else { |
| | | config.linkFields && config.linkFields.forEach((m, i) => { |
| | | setTimeout(() => { |
| | | MKEmitter.emit('mkSP', m.uuid, val, 0) |
| | | }, (i + 1) * 10) |
| | | }) |
| | | } |
| | | |
| | | if (config.type === 'multiselect') { |
| | | this.props.onChange(val.join(',')) |
| | | } else { |
| | | this.props.onChange(val) |
| | | } |
| | | |
| | |
| | | let linkableFields = [] |
| | | |
| | | searchlist.forEach(item => { |
| | | if (item.uuid !== card.uuid && (item.type === 'select' || item.type === 'link')) { |
| | | if (item.uuid === card.uuid) return |
| | | if (!['select', 'link', 'checkcard'].includes(item.type)) return |
| | | if (item.type === 'checkcard' && item.multiple === 'true') return |
| | | |
| | | linkableFields.push({ |
| | | value: item.field, |
| | | text: item.label |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | this.setState({ |
| | |
| | | return |
| | | } |
| | | |
| | | if (['checkcard', 'select', 'multiselect', 'link'].includes() && res.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | if (['checkcard', 'select', 'multiselect', 'link'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) { |
| | | this.setState({ |
| | | sqlVerifing: true |
| | | }) |
| | |
| | | datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'], |
| | | daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'], |
| | | group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow'], |
| | | range: ['label', 'type', 'field', 'initval', 'blacklist', 'maxValue', 'minValue', 'step', 'labelShow'] |
| | | range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow'] |
| | | } |
| | | |
| | | class MainSearch extends Component { |
| | |
| | | type: 'text', |
| | | key: 'supvalue', |
| | | label: '显示值', |
| | | tooltip: '请填写显示值,只有上级表单值与显示值相同时,该表单才会显示,注:多个值用逗号分隔。', |
| | | tooltip: '请填写显示值,只有上级表单值与显示值相同时,该表单才会显示,注:1、多个值用逗号分隔;2、上级表单初始值为$first时暂未处理。', |
| | | initVal: card.supvalue || '', |
| | | required: true, |
| | | readonly: false |
| | |
| | | |
| | | return searches.map(item => { |
| | | item.hidden = item.Hide === 'true' |
| | | item.required = item.required === 'true' |
| | | item.required = !item.hidden && item.required === 'true' |
| | | item.advanced = item.advanced === 'true' |
| | | |
| | | if (item.type === 'date') { // 时间搜索 |
| | |
| | | if (item.blacklist && item.blacklist.length > 0 && !item.hidden) { |
| | | if (item.blacklist.filter(v => roleId.indexOf(v) > -1).length > 0) { |
| | | item.hidden = true |
| | | item.required = false |
| | | } |
| | | } |
| | | |