| | |
| | | color: purple; |
| | | } |
| | | } |
| | | .mk-popover-control::after { |
| | | position: absolute; |
| | | content: ' '; |
| | | width: 100%; |
| | | height: 10px; |
| | | bottom: -10px; |
| | | left: 0px; |
| | | } |
| | | .ant-popover-inner-content { |
| | | padding: 5px 20px; |
| | | } |
| | |
| | | static propTpyes = { |
| | | config: PropTypes.object, |
| | | card: PropTypes.object, |
| | | editId: PropTypes.any, |
| | | triggerEdit: PropTypes.func, |
| | | updateConfig: PropTypes.func, |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | card: null, |
| | | visible: true |
| | | card: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | floor: card.floor, |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | .menu-line-chart-edit-box { |
| | | position: relative; |
| | | // margin-bottom: 0px; |
| | | border: 1px solid #e8e8e8; |
| | | box-sizing: border-box; |
| | | |
| | | .canvas { |
| | | margin: 0px; |
| | |
| | | } |
| | | |
| | | .chart-header { |
| | | height: 50px; |
| | | height: 45px; |
| | | border-bottom: 1px solid #e8e8e8; |
| | | overflow: hidden; |
| | | |
| | | .chart-title { |
| | | font-size: 16px; |
| | | float: left; |
| | | line-height: 50px; |
| | | line-height: 45px; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | .menu-line-chart-edit-box:hover { |
| | | box-shadow: 0px 0px 2px #e8e8e8; |
| | | } |
New file |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Tabs, Icon, Popover, Modal } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import './index.scss' |
| | | |
| | | const SettingComponent = asyncComponent(() => import('../tabsetting')) |
| | | const TabLabelComponent = asyncComponent(() => import('../tablabelform')) |
| | | |
| | | const { TabPane } = Tabs |
| | | const { confirm } = Modal |
| | | |
| | | class antvBarLineChart extends Component { |
| | | static propTpyes = { |
| | | config: PropTypes.object, |
| | | tabs: PropTypes.object, |
| | | updateConfig: PropTypes.func, |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | tabs: null, |
| | | editab: null, |
| | | labelvisible: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { tabs, config } = this.props |
| | | |
| | | if (tabs.isNew) { |
| | | let name = '' |
| | | let i = 1 |
| | | |
| | | while (!name) { |
| | | let _name = '标签页' + i |
| | | if (config.components.filter(com => com.setting && com.setting.name === _name).length === 0) { |
| | | name = _name |
| | | } |
| | | i++ |
| | | } |
| | | |
| | | let _tabs = { |
| | | uuid: tabs.uuid, |
| | | type: tabs.type, |
| | | floor: tabs.floor, |
| | | subtype: tabs.subtype, |
| | | setting: {span: 12, position: 'top', tabStyle: 'line', name}, |
| | | subtabs: [{ |
| | | uuid: Utils.getuuid(), |
| | | label: 'Tab 1', |
| | | icon: '', |
| | | subcomponents: [], |
| | | }, { |
| | | uuid: Utils.getuuid(), |
| | | label: 'Tab 2', |
| | | icon: '', |
| | | subcomponents: [], |
| | | }, { |
| | | uuid: Utils.getuuid(), |
| | | label: 'Tab 3', |
| | | icon: '', |
| | | subcomponents: [], |
| | | }] |
| | | } |
| | | this.setState({ |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } else { |
| | | this.setState({ |
| | | tabs: fromJS(tabs).toJS() |
| | | }) |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | if (!is(fromJS(this.props.plot), fromJS(nextProps.plot))) { |
| | | |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | |
| | | this.setState({ |
| | | tabs: component |
| | | }) |
| | | this.props.updateConfig(component) |
| | | } |
| | | |
| | | tabAdd = (e) => { |
| | | e.stopPropagation() |
| | | this.setState({ |
| | | editab: { |
| | | uuid: '', |
| | | label: '', |
| | | icon: '', |
| | | subcomponents: [] |
| | | }, |
| | | labelvisible: true |
| | | }) |
| | | } |
| | | |
| | | editTab = (tab) => { |
| | | this.setState({ |
| | | editab: tab, |
| | | labelvisible: true |
| | | }) |
| | | } |
| | | |
| | | tabLabelSubmit = () => { |
| | | let tabs = fromJS(this.state.tabs).toJS() |
| | | let editab = fromJS(this.state.editab).toJS() |
| | | |
| | | this.tabLabelRef.handleConfirm().then(res => { |
| | | editab.label = res.label |
| | | editab.icon = res.icon |
| | | |
| | | if (editab.uuid) { |
| | | tabs.subtabs = tabs.subtabs.map(t => { |
| | | if (t.uuid === editab.uuid) { |
| | | return editab |
| | | } else { |
| | | return t |
| | | } |
| | | }) |
| | | } else { |
| | | editab.uuid = Utils.getuuid() |
| | | tabs.subtabs.push(editab) |
| | | } |
| | | |
| | | this.setState({ |
| | | editab: null, |
| | | labelvisible: false, |
| | | tabs |
| | | }) |
| | | this.props.updateConfig(tabs) |
| | | }) |
| | | } |
| | | |
| | | delTab = (tab) => { |
| | | let tabs = fromJS(this.state.tabs).toJS() |
| | | const _this = this |
| | | |
| | | tabs.subtabs = tabs.subtabs.filter(t => t.uuid !== tab.uuid) |
| | | |
| | | confirm({ |
| | | title: '确定删除标签?', |
| | | content: '', |
| | | onOk() { |
| | | _this.setState({tabs}) |
| | | _this.props.updateConfig(tabs) |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } |
| | | |
| | | moveSwitch = (index, index1) => { |
| | | let tabs = fromJS(this.state.tabs).toJS() |
| | | tabs.subtabs[index] = tabs.subtabs.splice(index1, 1, tabs.subtabs[index])[0] |
| | | |
| | | this.setState({tabs}) |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, dict, labelvisible, editab } = this.state |
| | | |
| | | return ( |
| | | <div className="menu-tabs-edit-box"> |
| | | <SettingComponent config={tabs} updateConfig={this.updateComponent} /> |
| | | <Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}> |
| | | {tabs.subtabs.map((tab, index) => ( |
| | | <TabPane tab={ |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <Icon className="edit" title="edit" type="edit" onClick={() => this.editTab(tab)} /> |
| | | {index !== 0 ? <Icon className="edit" type="arrow-left" onClick={() => this.moveSwitch(index, index - 1)} /> : null} |
| | | {(index + 1) !== tabs.subtabs.length ? <Icon className="edit" type="arrow-right" onClick={() => this.moveSwitch(index, index + 1)} /> : null} |
| | | <Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid}> |
| | | Content of Tab Pane {tab.label} |
| | | </TabPane> |
| | | ))} |
| | | <TabPane className="tab-add" disabled tab={<Icon onClick={this.tabAdd} type="plus" />} key="add"></TabPane> |
| | | </Tabs> |
| | | <Modal |
| | | wrapClassName="popview-modal" |
| | | title={'标签编辑'} |
| | | visible={labelvisible} |
| | | width={600} |
| | | maskClosable={false} |
| | | okText={dict['model.submit']} |
| | | onOk={this.tabLabelSubmit} |
| | | onCancel={() => { this.setState({ labelvisible: false }) }} |
| | | destroyOnClose |
| | | > |
| | | <TabLabelComponent |
| | | dict={dict} |
| | | tab={editab} |
| | | wrappedComponentRef={(inst) => this.tabLabelRef = inst} |
| | | /> |
| | | </Modal> |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default antvBarLineChart |
New file |
| | |
| | | .menu-tabs-edit-box { |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | |
| | | .ant-tabs-tabpane-active { |
| | | min-height: 200px; |
| | | } |
| | | .ant-tabs .ant-tabs-left-bar .ant-tabs-tab { |
| | | padding: 0px; |
| | | text-align: right; |
| | | > span { |
| | | display: inline-block; |
| | | padding: 8px 24px; |
| | | } |
| | | .anticon-plus { |
| | | padding: 8px 24px; |
| | | } |
| | | } |
| | | .ant-tabs .ant-tabs-right-bar .ant-tabs-tab { |
| | | padding: 0px; |
| | | text-align: left; |
| | | > span { |
| | | display: inline-block; |
| | | padding: 8px 24px; |
| | | } |
| | | .anticon-plus { |
| | | padding: 8px 24px; |
| | | } |
| | | } |
| | | .ant-tabs-tab { |
| | | padding: 0px; |
| | | text-align: center; |
| | | > span { |
| | | display: inline-block; |
| | | padding: 12px 16px; |
| | | } |
| | | .anticon-plus { |
| | | color: #26C281; |
| | | padding: 12px 16px; |
| | | margin-right: 0px; |
| | | min-width: 100%; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .ant-tabs-bottom .ant-tabs-bottom-bar .ant-tabs-ink-bar { |
| | | top: 0px; |
| | | } |
| | | .ant-tabs-card { |
| | | .ant-tabs-card-bar .ant-tabs-tab:last-child { |
| | | padding: 0px; |
| | | border: 0px; |
| | | background: transparent; |
| | | .anticon-plus { |
| | | padding: 12px 16px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .menu-tabs-edit-box:hover { |
| | | box-shadow: 0px 0px 2px #e8e8e8; |
| | | } |
New file |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Icon, Select } from 'antd' |
| | | |
| | | // import { formRule } from '@/utils/option.js' |
| | | import './index.scss' |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | tab: PropTypes.object, // 数据源配置 |
| | | } |
| | | |
| | | state = {} |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | // 表单提交时检查输入值是否正确 |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | resolve(values) |
| | | } else { |
| | | reject(err) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | |
| | | render() { |
| | | const { tab } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 8 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 12 } |
| | | } |
| | | } |
| | | |
| | | return ( |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={24}> |
| | | <Col span={24}> |
| | | <Form.Item label="名称"> |
| | | {getFieldDecorator('label', { |
| | | initialValue: tab.label, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '名称!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={24}> |
| | | <Form.Item label="图标"> |
| | | {getFieldDecorator('icon', { |
| | | initialValue: tab.icon || '' |
| | | })( |
| | | <Select> |
| | | <Select.Option key="empty" value=""> 无 </Select.Option> |
| | | <Select.Option key="android" value="android"> <Icon type="android" /> </Select.Option> |
| | | <Select.Option key="apple" value="apple"> <Icon type="apple" /> </Select.Option> |
| | | <Select.Option key="windows" value="windows"> <Icon type="windows" /> </Select.Option> |
| | | <Select.Option key="alipay" value="alipay"> <Icon type="alipay" /> </Select.Option> |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(SettingForm) |
New file |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Modal } from 'antd' |
| | | |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import SettingForm from './settingform' |
| | | import './index.scss' |
| | | |
| | | class DataSource extends Component { |
| | | static propTpyes = { |
| | | config: PropTypes.any, |
| | | updateConfig: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | visible: false, |
| | | setting: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config } = this.props |
| | | |
| | | this.setState({setting: fromJS(config.setting).toJS()}) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | editDataSource = () => { |
| | | this.setState({ |
| | | visible: true |
| | | }) |
| | | } |
| | | |
| | | verifySubmit = () => { |
| | | const { config } = this.props |
| | | |
| | | this.verifyRef.handleConfirm().then(res => { |
| | | |
| | | this.setState({ |
| | | setting: res, |
| | | visible: false |
| | | }) |
| | | this.props.updateConfig({...config, setting: res}) |
| | | }) |
| | | } |
| | | |
| | | render () { |
| | | const { visible, dict, setting } = this.state |
| | | |
| | | return ( |
| | | <div className="model-menu-tabs-setting"> |
| | | <Icon type="setting" onClick={() => this.editDataSource()} /> |
| | | <Modal |
| | | wrapClassName="model-datasource-verify-modal popview-modal" |
| | | title={'标签页配置'} |
| | | visible={visible} |
| | | width={700} |
| | | maskClosable={false} |
| | | okText={dict['model.submit']} |
| | | onOk={this.verifySubmit} |
| | | onCancel={() => { this.setState({ visible: false }) }} |
| | | destroyOnClose |
| | | > |
| | | <SettingForm |
| | | dict={dict} |
| | | setting={setting} |
| | | wrappedComponentRef={(inst) => this.verifyRef = inst} |
| | | /> |
| | | </Modal> |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default DataSource |
New file |
| | |
| | | .model-menu-tabs-setting { |
| | | position: absolute; |
| | | right: 7px; |
| | | top: 5px; |
| | | z-index: 1; |
| | | |
| | | >.anticon-setting { |
| | | font-size: 18px; |
| | | padding: 10px; |
| | | } |
| | | |
| | | .model-input-group-wrapper { |
| | | padding: 0 20px; |
| | | display: inline-block; |
| | | width: 100%; |
| | | text-align: start; |
| | | vertical-align: top; |
| | | margin-bottom: 15px; |
| | | |
| | | .model-input-wrapper { |
| | | position: relative; |
| | | display: table; |
| | | width: 100%; |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | |
| | | .model-input-value { |
| | | display: table-cell; |
| | | width: 100%; |
| | | border: 1px solid #d9d9d9; |
| | | border-radius: 4px 0px 0px 4px; |
| | | overflow: hidden; |
| | | text-overflow:ellipsis; |
| | | white-space: nowrap; |
| | | padding: 2px 10px; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .model-input-group-addon { |
| | | display: table-cell; |
| | | width: 1px; |
| | | position: relative; |
| | | padding: 0 11px; |
| | | color: rgba(0, 0, 0, 0.65); |
| | | font-weight: normal; |
| | | font-size: 14px; |
| | | line-height: 1; |
| | | text-align: center; |
| | | background-color: #fafafa; |
| | | border: 1px solid #d9d9d9; |
| | | border-radius: 0px 4px 4px 0px; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .model-input-insert { |
| | | display: table-cell; |
| | | width: 100%; |
| | | border: 1px dotted #d9d9d9; |
| | | border-radius: 4px; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | |
| | | .anticon-plus { |
| | | padding: 6px; |
| | | font-size: 16px; |
| | | color: rgb(38, 194, 129); |
| | | } |
| | | } |
| | | } |
| | | .anticon-setting { |
| | | margin-right: 5px; |
| | | padding: 6px; |
| | | cursor: pointer; |
| | | } |
| | | .anticon-setting:hover { |
| | | color: #1890ff; |
| | | } |
| | | .anticon-close { |
| | | padding: 6px; |
| | | cursor: pointer; |
| | | } |
| | | .anticon-close:hover { |
| | | color: #ff4d4f; |
| | | } |
| | | } |
| | | } |
| | | .model-datasource-verify-modal { |
| | | .ant-modal { |
| | | top: 50px; |
| | | .ant-modal-body { |
| | | max-height: calc(100vh - 190px); |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, InputNumber, Select } from 'antd' |
| | | |
| | | // import { formRule } from '@/utils/option.js' |
| | | import './index.scss' |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | setting: PropTypes.object, // 数据源配置 |
| | | } |
| | | |
| | | state = {} |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | // 表单提交时检查输入值是否正确 |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | resolve(values) |
| | | } else { |
| | | reject(err) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | |
| | | render() { |
| | | const { setting } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 8 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | } |
| | | } |
| | | |
| | | return ( |
| | | <div className="model-datasource-setting-form-box"> |
| | | <Form {...formItemLayout} className="model-setting-form"> |
| | | <Row gutter={24}> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="用于组件间的区分。"> |
| | | <Icon type="question-circle" /> |
| | | 组件名称 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('name', { |
| | | initialValue: setting.name, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '组件名称!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="栅格布局,每行等分24份。"> |
| | | <Icon type="question-circle" /> |
| | | 宽度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('span', { |
| | | initialValue: setting.span || 12, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '宽度!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={24} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="标签位置"> |
| | | {getFieldDecorator('position', { |
| | | initialValue: setting.position || 'top' |
| | | })( |
| | | <Select> |
| | | <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> |
| | | <Select.Option key="right" value="right"> right </Select.Option> |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="标签位置为top时有效,默认值为line。"> |
| | | <Icon type="question-circle" /> |
| | | 页签样式 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('tabStyle', { |
| | | initialValue: setting.tabStyle || 'line' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="line">line</Radio> |
| | | <Radio value="card">card</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(SettingForm) |
New file |
| | |
| | | .model-datasource-setting-form-box { |
| | | position: relative; |
| | | |
| | | .model-setting-form { |
| | | .data-source { |
| | | .ant-form-item-label { |
| | | width: 11%; |
| | | } |
| | | .ant-form-item-control-wrapper { |
| | | width: 89%; |
| | | } |
| | | .CodeMirror { |
| | | height: 150px; |
| | | } |
| | | } |
| | | .anticon-question-circle { |
| | | color: #c49f47; |
| | | margin-right: 3px; |
| | | } |
| | | } |
| | | .ant-input-number { |
| | | width: 100%; |
| | | } |
| | | } |
| | |
| | | import './index.scss' |
| | | |
| | | const AntvBar = asyncComponent(() => import('@/menu/components/chart/antv-bar')) |
| | | const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/antv-tabs')) |
| | | |
| | | const Card = ({ id, config, card, moveCard, findCard, editId, editCard, delCard, hasDrop, doubleClickCard, updateConfig }) => { |
| | | const Card = ({ id, config, card, moveCard, findCard, delCard, hasDrop, doubleClickCard, updateConfig }) => { |
| | | const originalIndex = findCard(id).index |
| | | const [{ isDragging }, drag] = useDrag({ |
| | | item: { type: 'menu', id, originalIndex }, |
| | |
| | | |
| | | const getCardComponent = () => { |
| | | if (card.type === 'bar' || card.type === 'line') { |
| | | return (<AntvBar config={config} card={card} triggerEdit={editCard} editId={editId} updateConfig={updateConfig} />) |
| | | return (<AntvBar config={config} card={card} updateConfig={updateConfig} />) |
| | | } else if (card.type === 'tabs') { |
| | | return (<AntvTabs config={config} tabs={card} updateConfig={updateConfig} />) |
| | | } |
| | | } |
| | | |
| | |
| | | import Card from './card' |
| | | import './index.scss' |
| | | |
| | | const Container = ({config, editId, handleList, editCard, deleteCard, doubleClickCard }) => { |
| | | const Container = ({config, handleList, deleteCard, doubleClickCard }) => { |
| | | let target = null |
| | | |
| | | const [cards, setCards] = useState(config.components) |
| | |
| | | uuid: Utils.getuuid(), |
| | | type: item.component, |
| | | subtype: item.subtype, |
| | | isNew: true |
| | | floor: 1, // 组件的层级 |
| | | isNew: true // 新添加标志,用于初始化 |
| | | } |
| | | |
| | | let targetId = cards.length > 0 ? cards[cards.length - 1].uuid : 0 |
| | |
| | | key={card.uuid} |
| | | config={config} |
| | | card={card} |
| | | editId={editId} |
| | | moveCard={moveCard} |
| | | editCard={editCard} |
| | | delCard={deleteCard} |
| | | findCard={findCard} |
| | | hasDrop={hasDrop} |
| | |
| | | .remove-component { |
| | | opacity: 1; |
| | | } |
| | | .model-datasource > .anticon-setting { |
| | | .model-datasource > .anticon-setting, .model-menu-tabs-setting > .anticon-setting { |
| | | opacity: 1; |
| | | } |
| | | } |
| | |
| | | padding-top: 150px; |
| | | } |
| | | |
| | | .model-datasource > .anticon-setting { |
| | | .model-datasource > .anticon-setting, .model-menu-tabs-setting > .anticon-setting { |
| | | font-size: 16px; |
| | | padding: 5px; |
| | | position: absolute; |
| | |
| | | import bar1 from '@/assets/mobimg/bar1.png' |
| | | import line from '@/assets/mobimg/line.png' |
| | | import line1 from '@/assets/mobimg/line1.png' |
| | | import tabs from '@/assets/mobimg/tabs.png' |
| | | |
| | | // const _dict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | |
| | | // 组件配置信息 |
| | | export const menuOptions = [ |
| | | { type: 'menu', url: tabs, component: 'tabs', subtype: 'tabs' }, |
| | | { type: 'menu', url: line, component: 'line', subtype: 'line' }, |
| | | { type: 'menu', url: line1, component: 'line', subtype: 'line1' }, |
| | | { type: 'menu', url: bar, component: 'bar', subtype: 'bar' }, |
| | |
| | | .model-custom-search-list { |
| | | padding: 5px 0px 0px; |
| | | padding: 0px; |
| | | |
| | | .anticon-question-circle { |
| | | color: #c49f47; |
| | |
| | | console.warn('Parse Failure') |
| | | config = '' |
| | | } |
| | | |
| | | |
| | | // HS不使用自定义设置 |
| | | if (result.LongParamUser && this.props.menuType !== 'HS') { |
| | | try { // 配置信息解析 |
| | |
| | | }) |
| | | return |
| | | } |
| | | |
| | | |
| | | // 页面未启用时,显示未启用页面 |
| | | if (!config.enabled) { |
| | | this.setState({ |
| | |
| | | item.initval = param.data[item.field] |
| | | } |
| | | } |
| | | |
| | | |
| | | if (!item.blacklist || item.blacklist.length === 0) return item |
| | | |
| | | |
| | | let _black = item.blacklist.filter(v => { |
| | | return this.props.permRoles.indexOf(v) !== -1 |
| | | }) |
| | | |
| | | |
| | | if (_black.length > 0) { |
| | | item.Hide = 'true' |
| | | } |
| | | |
| | | |
| | | return item |
| | | }) |
| | | |
| | |
| | | |
| | | let params = [] |
| | | config.components.forEach(component => { |
| | | if (!component.format) return // 没有动态数据 |
| | | |
| | | let _customScript = '' |
| | | component.scripts && component.scripts.forEach(script => { |
| | | if (script.status !== 'false') { |