| | |
| | | formItem = <DateGroup card={card} /> |
| | | } |
| | | |
| | | let labelwidth = card.labelwidth || 33.3 |
| | | if (card.labelShow === 'false') { |
| | | labelwidth = 0 |
| | | } |
| | | |
| | | return ( |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | |
| | | <div className={'page-card ' + (card.labelShow || '')} style={{ opacity: opacity}}> |
| | | <div ref={node => drag(drop(node))}> |
| | | <Form.Item |
| | | labelCol={{xs: { span: 24 }, sm: { span: 8 }}} |
| | | wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} |
| | | labelCol={{style: {width: labelwidth + '%'}}} |
| | | wrapperCol={{style: {width: (100 - labelwidth) + '%'}}} |
| | | // labelCol={{xs: { span: 24 }, sm: { span: 8 }}} |
| | | // wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} |
| | | label={card.labelShow !== 'false' ? card.label : ''} |
| | | required={card.required === 'true'} |
| | | > |
| | |
| | | .model-custom-header-search-list { |
| | | padding: 0px; |
| | | |
| | | .ant-row .ant-col { |
| | | .ant-row >.ant-col { |
| | | float: right; |
| | | padding: 0 6px; |
| | | } |
| | |
| | | opacity: 0; |
| | | z-index: 2; |
| | | } |
| | | .ant-form-item-label { |
| | | float: left; |
| | | } |
| | | .ant-form-item-control-wrapper { |
| | | float: left; |
| | | } |
| | | } |
| | | .page-card.false { |
| | | .ant-form-item-label { |
| | |
| | | } trigger="hover"> |
| | | <ToolOutlined /> |
| | | </Popover> |
| | | {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} offset={!index ? offset : 0} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} |
| | | <div className={(card.wrap.layout || 'grid') + '-layout'}> |
| | | {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} offset={!index ? offset : 0} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |
| | |
| | | padding: 5px; |
| | | background: rgba(255, 255, 255, 0.55); |
| | | } |
| | | .menu-right { |
| | | display: none; |
| | | } |
| | | .vertical-layout { |
| | | >.ant-col { |
| | | width: 100%; |
| | | .menu-item { |
| | | display: flex; |
| | | align-items: center; |
| | | .menu-sign { |
| | | margin-right: 10px; |
| | | } |
| | | .menu-name { |
| | | text-align: inherit; |
| | | flex: 10; |
| | | } |
| | | .menu-right { |
| | | margin-left: 5px; |
| | | display: inline-block; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .menu-item { |
| | | overflow: hidden; |
| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Popover, Col } from 'antd' |
| | | import { SwapOutlined, ArrowLeftOutlined, ArrowRightOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' |
| | | import { SwapOutlined, ArrowLeftOutlined, ArrowRightOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, RightOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | const { card } = this.state |
| | | |
| | | let _style = card.style ? fromJS(card.style).toJS() : {} |
| | | let options = ['font', 'border', 'padding'] |
| | | let options = ['font', 'border', 'padding', 'margin', 'background'] |
| | | |
| | | MKEmitter.emit('changeStyle', [cards.uuid, card.uuid], options, _style) |
| | | } |
| | |
| | | {card.setting.tip ? <sup className="am-badge-text"></sup> : null} |
| | | </div>} |
| | | <div className="menu-name">{card.setting.name}</div> |
| | | <RightOutlined className="menu-right" /> |
| | | </div> |
| | | </Popover> |
| | | </Col> |
| | |
| | | {value: 'dynamic', label: '动态'}, |
| | | {value: 'static', label: '静态'}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'layout', |
| | | label: '菜单布局', |
| | | initval: wrap.layout || 'grid', |
| | | required: false, |
| | | options: [ |
| | | {value: 'grid', label: '栅格布局'}, |
| | | {value: 'vertical', label: '上下布局'}, |
| | | ] |
| | | } |
| | | ] |
| | | |
| | |
| | | <div className="normal-topbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="导航栏设置" width={750} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <NormalForm title="导航栏设置" width={850} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="topbar" card={card}/> |
| | |
| | | editable: true, |
| | | required: true, |
| | | render: (text, record) => <MkIcon type={text}/>, |
| | | width: '35%' |
| | | width: '23%' |
| | | }, |
| | | { |
| | | title: '自定义名称', |
| | | dataIndex: 'name', |
| | | inputType: 'text', |
| | | editable: true, |
| | | required: false, |
| | | width: '23%' |
| | | }, |
| | | { |
| | | title: '菜单', |
| | |
| | | editable: true, |
| | | required: true, |
| | | extends: [{key: 'label', value: 'label'}], |
| | | width: '35%', |
| | | width: '23%', |
| | | render: (text, record) => record.label, |
| | | options: menulist |
| | | } |
| | |
| | | }, () => { |
| | | this.props.onChange(item.$value, other) |
| | | }) |
| | | } else { |
| | | let other = {} |
| | | config.linkFields && config.linkFields.forEach((m, i) => { |
| | | setTimeout(() => { |
| | | MKEmitter.emit('mkFP', m.uuid, '', 0) |
| | | }, (i + 1) * 100) |
| | | }) |
| | | |
| | | this.setState({ |
| | | selectKeys: '' |
| | | }, () => { |
| | | this.props.onChange('', other) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | if (content) { |
| | | fields.push( |
| | | <Col span={item.ratio || 6} key={index}> |
| | | <Form.Item label={item.labelShow !== 'false' ? item.label : ''}> |
| | | <Form.Item |
| | | labelCol={item.labelCol} |
| | | wrapperCol={item.wrapperCol} |
| | | label={item.labelShow !== 'false' ? item.label : ''} |
| | | > |
| | | {getFieldDecorator(item.field, { |
| | | initialValue: item.initval, |
| | | rules: _rules |
| | |
| | | linkFields[item.linkField].push({field: item.field, uuid: item.uuid}) |
| | | } |
| | | |
| | | let labelwidth = item.labelwidth || 33.3 |
| | | if (item.labelShow === 'false') { |
| | | labelwidth = 0 |
| | | } |
| | | item.labelCol = {style: {width: labelwidth + '%'}} |
| | | item.wrapperCol = {style: {width: (100 - labelwidth) + '%'}} |
| | | |
| | | if (fieldMap.has(item.field)) { |
| | | item.field = item.field + '@tail@' |
| | | } |
| | |
| | | if (content) { |
| | | fields.push( |
| | | <Col span={item.ratio || 6} key={index}> |
| | | <Form.Item className={className} label={item.labelShow !== 'false' ? item.label : ''}> |
| | | <Form.Item |
| | | className={className} |
| | | label={item.labelShow !== 'false' ? item.label : ''} |
| | | labelCol={item.labelCol} |
| | | wrapperCol={item.wrapperCol} |
| | | > |
| | | {getFieldDecorator(field, { |
| | | initialValue: item.initval, |
| | | rules: _rules |
| | |
| | | formItem = <CheckCard config={card} /> |
| | | } |
| | | |
| | | let labelwidth = card.labelwidth || 33.3 |
| | | if (card.labelShow === 'false') { |
| | | labelwidth = 0 |
| | | } |
| | | |
| | | return ( |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | |
| | | <div className={'page-card ' + (card.labelShow || '') + ' ' + type} style={{ opacity: opacity}}> |
| | | <div ref={node => drag(drop(node))} onDoubleClick={() => editCard(id)}> |
| | | <Form.Item |
| | | labelCol={{xs: { span: 24 }, sm: { span: 8 }}} |
| | | wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} |
| | | labelCol={{style: {width: labelwidth + '%'}}} |
| | | wrapperCol={{style: {width: (100 - labelwidth) + '%'}}} |
| | | // labelCol={{xs: { span: 24 }, sm: { span: 8 }}} |
| | | // wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} |
| | | label={card.labelShow !== 'false' ? card.label : ''} |
| | | required={card.required === 'true'} |
| | | help={showField ? card.field + (card.datefield ? ', ' + card.datefield : '') : ''} |
| | |
| | | } |
| | | > .ant-row { |
| | | min-height: 65px; |
| | | >.ant-col { |
| | | padding: 0 12px!important; |
| | | } |
| | | } |
| | | .ant-row .ant-col-6 { |
| | | padding: 0 12px!important; |
| | | } |
| | | |
| | | .ant-row.ant-form-item .ant-col { |
| | | padding: 0; |
| | | } |
| | |
| | | height: 55px; |
| | | .ant-form-item { |
| | | margin-bottom: 0px; |
| | | .ant-form-item-label { |
| | | float: left; |
| | | } |
| | | .ant-form-item-control-wrapper { |
| | | float: left; |
| | | .ant-select { |
| | | width: 100%; |
| | | margin-top: 4px; |
| | |
| | | ] |
| | | |
| | | const searchTypeOptions = { |
| | | text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced', 'query'], |
| | | select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query'], |
| | | multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'], |
| | | link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query'], |
| | | date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision'], |
| | | checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'borderColor', 'required', 'Hide', 'labelShow', 'advanced', 'query'], |
| | | dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'], |
| | | datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'], |
| | | daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision'], |
| | | group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow', 'query'], |
| | | range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow', 'query'] |
| | | text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced', 'query', 'labelwidth'], |
| | | select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'], |
| | | multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'], |
| | | link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'], |
| | | date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'], |
| | | checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'borderColor', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'], |
| | | dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'], |
| | | datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'], |
| | | daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'], |
| | | group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow', 'query', 'labelwidth'], |
| | | range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow', 'query', 'labelwidth'] |
| | | } |
| | | |
| | | class MainSearch extends Component { |
| | |
| | | } |
| | | |
| | | optionChange = (key, value) => { |
| | | let oriType = this.record.type |
| | | this.record[key] = value |
| | | let _fieldval = {} |
| | | |
| | |
| | | if (value === 'checkcard') { |
| | | this.record.multiple = 'false' |
| | | _fieldval.multiple = 'false' |
| | | _fieldval.ratio = 24 |
| | | } else if (oriType === 'checkcard') { |
| | | _fieldval.ratio = 6 |
| | | } |
| | | |
| | | if (this.record.options.length > 0) { |
| | |
| | | initVal = item.initVal |
| | | |
| | | if (item.max) { |
| | | content = <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/> |
| | | content = <InputNumber min={item.min} max={item.max} precision={item.precision || 0} onPressEnter={this.handleSubmit}/> |
| | | } else { |
| | | content = <InputNumber onPressEnter={this.handleSubmit}/> |
| | | } |
| | |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'number', |
| | | key: 'labelwidth', |
| | | min: 1, |
| | | max: 100, |
| | | precision: 1, |
| | | label: '名称宽度', |
| | | initVal: card.labelwidth || 33.3, |
| | | tooltip: '名称占据搜索条件宽度的百分比。注:存在多列搜索时,当前搜索如果想要占据整行可参照以下比例,两列(16.5)、三列(10.8)、四列(8)', |
| | | required: true, |
| | | forbid: appType === 'mob' |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'precision', |
| | | label: '精确度', |
| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { DndProvider, DragSource, DropTarget } from 'react-dnd' |
| | | import { Table, Input, Popconfirm, Form, notification } from 'antd' |
| | | import { Table, Input, Popconfirm, Form, notification, message } from 'antd' |
| | | import { PlusOutlined, EditOutlined, DeleteOutlined, SwapOutlined } from '@ant-design/icons' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | {editing ? ( |
| | | <Form.Item style={{ margin: '0 -5px 0 -5px' }}> |
| | | {getFieldDecorator(dataIndex, { |
| | | rules: [ |
| | | { |
| | | required: dataIndex === '$value', |
| | | message: `Please Input ${title}!`, |
| | | }, |
| | | ], |
| | | // rules: [ |
| | | // { |
| | | // required: dataIndex === '$value', |
| | | // message: `Please Input ${title}!`, |
| | | // }, |
| | | // ], |
| | | initialValue: _val, |
| | | })(this.getInput(form))} |
| | | </Form.Item> |
| | |
| | | } |
| | | |
| | | onSave = (record) => { |
| | | const { type } = this.props |
| | | const newData = [...this.state.data] |
| | | const index = newData.findIndex(item => record.key === item.key) |
| | | |
| | | if (type === 'link') { |
| | | if (newData.filter(m => record.key !== m.key && record.$value === m.$value && record.ParentID === m.ParentID).length > 0) { |
| | | message.warning('相同ParentID下,此Value值已存在!') |
| | | } |
| | | } else { |
| | | if (newData.filter(m => record.key !== m.key && record.$value === m.$value).length > 0) { |
| | | message.warning('此Value值已存在!') |
| | | } |
| | | } |
| | | |
| | | if (index > -1) { |
| | | newData.splice(index, 1, record) |
| | | this.setState({ data: newData, editingKey: '' }, () => { |
| | |
| | | } |
| | | |
| | | save(form, key) { |
| | | const { type } = this.props |
| | | |
| | | form.validateFields((error, row) => { |
| | | if (error) { |
| | | return; |
| | |
| | | |
| | | const newData = [...this.state.data] |
| | | const index = newData.findIndex(item => key === item.key) |
| | | |
| | | if (type === 'link') { |
| | | if (newData.filter(m => key !== m.key && row.$value === m.$value && row.ParentID === m.ParentID).length > 0) { |
| | | message.warning('相同ParentID下,此Value值已存在!') |
| | | } |
| | | } else { |
| | | if (newData.filter(m => key !== m.key && row.$value === m.$value).length > 0) { |
| | | message.warning('此Value值已存在!') |
| | | } |
| | | } |
| | | |
| | | if (index > -1) { |
| | | const item = newData[index] |
| | | newData.splice(index, 1, { |