| | |
| | | |
| | | handleSubConfig = (item) => { |
| | | const { cards } = this.props |
| | | let btn = fromJS(item).toJS() |
| | | |
| | | if (item.eleType !== 'button') return |
| | | if (item.OpenType === 'pop') { |
| | | let btn = fromJS(item).toJS() |
| | | if (btn.eleType !== 'button') return |
| | | |
| | | if (btn.OpenType === 'pop') { |
| | | if (!btn.modal) { |
| | | btn.modal = { |
| | | setting: { |
| | | title: btn.label, |
| | | width: 60, |
| | | cols: '2', |
| | | container: 'tab', |
| | | focus: '', |
| | | finish: 'close', |
| | | clickouter: 'unclose', |
| | | display: 'modal' |
| | | }, |
| | | setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, |
| | | tables: [], |
| | | groups: [], |
| | | fields: [] |
| | |
| | | } |
| | | |
| | | MKEmitter.emit('changeModal', cards, btn) |
| | | } else if (btn.OpenType === 'popview') { |
| | | MKEmitter.emit('changePopview', cards, btn) |
| | | } |
| | | } |
| | | |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { connect } from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Icon, Popover, Modal, Pagination, notification } from 'antd' |
| | | |
| | |
| | | MKEmitter.emit('addButton', card.uuid, newcard) |
| | | } |
| | | |
| | | setSubConfig = (btn) => { |
| | | setSubConfig = (item) => { |
| | | const { card } = this.state |
| | | let btn = fromJS(item).toJS() |
| | | |
| | | if (btn.OpenType === 'pop') { |
| | | if (!btn.modal) { |
| | | btn.modal = { |
| | | setting: { |
| | | title: btn.label, |
| | | width: 60, |
| | | cols: '2', |
| | | container: 'tab', |
| | | focus: '', |
| | | finish: 'close', |
| | | clickouter: 'unclose', |
| | | display: 'modal' |
| | | }, |
| | | setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, |
| | | tables: [], |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeModal', card, btn) |
| | | } else if (btn.OpenType === 'popview') { |
| | | MKEmitter.emit('changePopview', card, btn) |
| | | } |
| | | } |
| | | |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | if (!done) { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | if (!done) { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | this.props.updateConfig(config) |
| | | } |
| | | |
| | | setSubConfig = (btn) => { |
| | | setSubConfig = (item) => { |
| | | const { card } = this.state |
| | | let btn = fromJS(item).toJS() |
| | | |
| | | if (btn.OpenType === 'pop') { |
| | | if (!btn.modal) { |
| | | btn.modal = { |
| | | setting: { |
| | | title: btn.label, |
| | | width: 60, |
| | | cols: '2', |
| | | container: 'tab', |
| | | focus: '', |
| | | finish: 'close', |
| | | clickouter: 'unclose', |
| | | display: 'modal' |
| | | }, |
| | | setting: { title: btn.label, width: 60, cols: '2', container: 'tab', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, |
| | | tables: [], |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeModal', card, btn) |
| | | } else if (btn.OpenType === 'popview') { |
| | | MKEmitter.emit('changePopview', card, btn) |
| | | } |
| | | } |
| | | |
| | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '恢复成功!', |
| | |
| | | } else { |
| | | card.btnlog = logs |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '清除成功!', |
| | |
| | | const { Panel } = Collapse |
| | | const { confirm } = Modal |
| | | |
| | | const Header = asyncComponent(() => import('@/menu/header')) |
| | | const MenuForm = asyncComponent(() => import('./menuform')) |
| | | const SourceWrap = asyncComponent(() => import('@/menu/modelsource')) |
| | | const MenuShell = asyncComponent(() => import('@/menu/menushell')) |
| | | const BgController = asyncComponent(() => import('@/menu/bgcontroller')) |
| | | const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) |
| | | const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) |
| | | const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) |
| | | const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) |
| | | |
| | | sessionStorage.setItem('isEditState', 'true') |
| | |
| | | class MenuDesign extends Component { |
| | | static propTpyes = { |
| | | btn: PropTypes.object, |
| | | handleSave: PropTypes.func, |
| | | handleBack: PropTypes.func |
| | | } |
| | | |
| | |
| | | const { oriConfig, config } = this.state |
| | | |
| | | if (!config) { |
| | | window.close() |
| | | this.props.handleBack() |
| | | return |
| | | } |
| | | |
| | | let _config = fromJS(config).toJS() |
| | | delete _config.tableFields |
| | | const _this = this |
| | | |
| | | if (!is(fromJS(oriConfig), fromJS(_config))) { |
| | | confirm({ |
| | | title: '配置已修改,放弃保存吗?', |
| | | content: '', |
| | | onOk() { |
| | | window.close() |
| | | _this.props.handleBack() |
| | | }, |
| | | onCancel() {} |
| | | }) |
| | | } else { |
| | | window.close() |
| | | this.props.handleBack() |
| | | } |
| | | } |
| | | |
| | |
| | | let config = null |
| | | |
| | | try { |
| | | config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) |
| | | config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = null |
| | |
| | | config: fromJS(config).toJS(), |
| | | openEdition: result.open_edition || '', |
| | | }) |
| | | |
| | | this.getRoleFields() |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | } |
| | | |
| | | submitConfig = () => { |
| | | const { openEdition } = this.state |
| | | // const { btn } = this.props |
| | | const { openEdition, delButtons } = this.state |
| | | let config = fromJS(this.state.config).toJS() |
| | | |
| | | if (config.cacheUseful === 'true' && !config.cacheTime) { |
| | |
| | | delete _config.tableFields |
| | | |
| | | let param = { |
| | | func: 'sPC_TrdMenu_AddUpt', |
| | | FstID: _config.fstMenuId || '', |
| | | SndID: _config.parentId, |
| | | ParentID: _config.parentId, |
| | | func: 'sPC_Tab_AddUpt', |
| | | MenuID: _config.uuid, |
| | | MenuNo: _config.MenuNo || '', |
| | | EasyCode: _config.easyCode || '', |
| | | MenuNo: _config.tabNo, |
| | | Template: 'CustomPage', |
| | | MenuName: _config.MenuName || '', |
| | | PageParam: JSON.stringify({Template: 'CustomPage', OpenType: 'newtab'}), |
| | | LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(_config))), |
| | | LText: '', |
| | | LTexttb: '' |
| | | MenuName: _config.tabName, |
| | | Remark: '', |
| | | Sort: 0, |
| | | PageParam: JSON.stringify({Template: 'CustomPage'}), |
| | | LongParam: window.btoa(window.encodeURIComponent(JSON.stringify(_config))) |
| | | } |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | if (openEdition) { // 版本管理 |
| | | param.open_edition = openEdition |
| | |
| | | menuloading: true |
| | | }, () => { |
| | | new Promise(resolve => { |
| | | resolve(true) |
| | | if (delButtons.length === 0) { |
| | | resolve({ |
| | | status: true |
| | | }) |
| | | } else { |
| | | let _param = { |
| | | func: 'sPC_MainMenu_Del', |
| | | MenuID: delButtons.join(',') |
| | | } |
| | | Api.getSystemConfig(_param).then(res => { |
| | | resolve(res) |
| | | }) |
| | | } |
| | | }).then(res => { |
| | | if (!res) return |
| | | |
| | | return Api.getSystemConfig(param) |
| | | if (res.status) { |
| | | this.setState({ |
| | | delButtons: [] |
| | | }) |
| | | return Api.getSystemConfig(param) |
| | | } else { |
| | | this.setState({ |
| | | menuloading: false |
| | | }) |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } |
| | | }).then(res => { |
| | | if (!res) return |
| | | |
| | |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | getRoleFields = () => { |
| | | Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => { |
| | | if (res.status) { |
| | | let _permFuncField = [] |
| | | let _sysRoles = [] |
| | | |
| | | if (res.Roles && res.Roles.length > 0) { |
| | | _sysRoles = res.Roles.map(role => { |
| | | return { |
| | | uuid: Utils.getuuid(), |
| | | value: role.RoleID, |
| | | text: role.RoleName |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (res.sModular && res.sModular.length > 0) { |
| | | res.sModular.forEach(field => { |
| | | if (field.ModularNo) { |
| | | _permFuncField.push(field.ModularNo) |
| | | } |
| | | }) |
| | | _permFuncField = _permFuncField.sort() |
| | | } |
| | | |
| | | sessionStorage.setItem('sysRoles', JSON.stringify(_sysRoles)) |
| | | sessionStorage.setItem('permFuncField', JSON.stringify(_permFuncField)) |
| | | } |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { btn } = this.props |
| | | const { activeKey, MenuType, dict, config, menuloading } = this.state |
| | | |
| | | return ( |
| | | <div className="pc-menu-view" id="view"> |
| | | <Header /> |
| | | <DndProvider backend={HTML5Backend}> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | | <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header={dict['mob.basemsg']} key="basedata"> |
| | | {/* 表名添加 */} |
| | | {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header={dict['mob.component']} key="component"> |
| | | <SourceWrap MenuType={MenuType} /> |
| | | </Panel> |
| | | <Panel header={'背景'} key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | <Panel header={'内边距'} key="padding"> |
| | | {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | <div className={'menu-view ' + (menuloading ? 'saving' : '')}> |
| | | <Card title={ |
| | | <div> {config && config.MenuName} </div> |
| | | } bordered={false} extra={ |
| | | <div> |
| | | {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} |
| | | <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> |
| | | <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> |
| | | </div> |
| | | } style={{ width: '100%' }}> |
| | | {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |
| | | </Card> |
| | | </div> |
| | | <DndProvider backend={HTML5Backend}> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | | <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | | {/* 基本信息 */} |
| | | <Panel header={dict['mob.basemsg']} key="basedata"> |
| | | {/* 菜单信息 */} |
| | | {config ? <MenuForm dict={dict} config={config} btn={btn} updateConfig={this.updateConfig}/> : null} |
| | | {/* 表名添加 */} |
| | | {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null} |
| | | </Panel> |
| | | {/* 组件添加 */} |
| | | <Panel header={dict['mob.component']} key="component"> |
| | | <SourceWrap MenuType={MenuType} /> |
| | | </Panel> |
| | | <Panel header={'背景'} key="background"> |
| | | {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | <Panel header={'内边距'} key="padding"> |
| | | {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null} |
| | | </Panel> |
| | | </Collapse> |
| | | </div> |
| | | </DndProvider> |
| | | <StyleController /> |
| | | <ModalController /> |
| | | </div> |
| | | <div className={'menu-view ' + (menuloading ? 'saving' : '')}> |
| | | <Card title={ |
| | | <div> {config && config.MenuName} </div> |
| | | } bordered={false} extra={ |
| | | <div> |
| | | {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} |
| | | <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> |
| | | <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> |
| | | </div> |
| | | } style={{ width: '100%' }}> |
| | | {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |
| | | </Card> |
| | | </div> |
| | | </div> |
| | | </DndProvider> |
| | | ) |
| | | } |
| | | } |
| | |
| | | .modal-form-board { |
| | | position: fixed; |
| | | z-index: 1070; |
| | | padding-top: 48px; |
| | | top: 0px; |
| | | left: 0px; |
| | | right: 0px; |
| | | bottom: 0px; |
| | | background: rgba(0, 0, 0, 0.35); |
| | | display: flex; |
| | | .tools { |
| | | flex: 1; |
| | | background: #ffffff; |
| | | border-right: 1px solid #d9d9d9; |
| | | height: 100%; |
| | | overflow-y: auto; |
| | | padding-bottom: 30px; |
| | | .ant-collapse-borderless { |
| | | background-color: #ffffff; |
| | | } |
| | | .ant-collapse-item { |
| | | border: 0; |
| | | } |
| | | .ant-input-search { |
| | | margin-top: 10px; |
| | | } |
| | | .ant-collapse-item.ant-collapse-item-active { |
| | | border-bottom: 1px solid #d9d9d9; |
| | | } |
| | | .ant-collapse .ant-collapse-header { |
| | | padding: 11px 16px 10px 40px; |
| | | border-bottom: 1px solid #d9d9d9; |
| | | background: #1890ff; |
| | | color: #ffffff; |
| | | } |
| | | .ant-collapse-content-box { |
| | | .ant-form-item { |
| | | margin-bottom: 10px; |
| | | .ant-form-item-label { |
| | | text-align: left; |
| | | height: 25px; |
| | | line-height: 25px; |
| | | } |
| | | } |
| | | .ant-btn { |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .search-element { |
| | | padding-top: 10px; |
| | | li { |
| | | padding: 0px 16px 10px; |
| | | div { |
| | | cursor: move; |
| | | } |
| | | } |
| | | } |
| | | .tables { |
| | | .ant-select-selection-selected-value { |
| | | opacity: 0.4!important; |
| | | } |
| | | } |
| | | .ant-list { |
| | | margin-top: 20px; |
| | | .ant-list-item { |
| | | display: -webkit-box; |
| | | padding-right: 20px; |
| | | position: relative; |
| | | padding-left: 5px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | -webkit-line-clamp: 2; |
| | | -webkit-box-orient: vertical; |
| | | width: 100%; |
| | | .anticon { |
| | | position: absolute; |
| | | top: 0px; |
| | | right: 0px; |
| | | padding: 3px 3px 10px 10px; |
| | | cursor: pointer; |
| | | } |
| | | .bottom-mask { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 8px; |
| | | bottom: 0; |
| | | left: 0; |
| | | background: #ffffff; |
| | | border-radius: 8px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .tools::-webkit-scrollbar { |
| | | width: 4px; |
| | | } |
| | | .tools::-webkit-scrollbar-thumb { |
| | | border-radius: 5px; |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); |
| | | background: rgba(0, 0, 0, 0.08); |
| | | } |
| | | .tools::-webkit-scrollbar-track { |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); |
| | | border-radius: 3px; |
| | | border: 1px solid rgba(0, 0, 0, 0.07); |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | .setting { |
| | | position: relative; |
| | | width: calc(100vw - 235px); |
| | | height: 100%; |
| | | overflow-y: hidden; |
| | | background: #ffffff; |
| | | .ant-card-head { |
| | | min-height: 44px; |
| | | } |
| | | .ant-card-head-title { |
| | | padding: 5px 0; |
| | | color: #1890ff; |
| | | } |
| | | .ant-card-extra { |
| | | padding: 5px 0; |
| | | button { |
| | | margin-left: 20px; |
| | | } |
| | | } |
| | | .ant-card-body { |
| | | position: relative; |
| | | padding: 0; |
| | | .ant-modal-content { |
| | | max-width: 95%; |
| | | margin: 0 auto; |
| | | margin-top: 30px; |
| | | .ant-modal-header { |
| | | position: relative; |
| | | z-index: 10; |
| | | background: transparent; |
| | | min-height: 50px; |
| | | } |
| | | .ant-modal-close { |
| | | opacity: 0.3; |
| | | } |
| | | .ant-modal-footer { |
| | | position: relative; |
| | | button { |
| | | opacity: 0.3; |
| | | } |
| | | } |
| | | .action-mask { |
| | | position: absolute; |
| | | top: 0px; |
| | | left: 0px; |
| | | right: 0px; |
| | | bottom: 0px; |
| | | } |
| | | } |
| | | .modal-form { |
| | | padding: 0px 24px; |
| | | min-height: 87px; |
| | | .group-title { |
| | | position: relative; |
| | | min-height: 22px; |
| | | margin-bottom: 10px; |
| | | padding-top: 10px; |
| | | border-bottom: 1px solid #e8e8e8; |
| | | |
| | | span { |
| | | padding: 0 5px 5px; |
| | | } |
| | | } |
| | | > .ant-row { |
| | | min-height: 120px; |
| | | } |
| | | .ant-row .ant-col-6 { |
| | | padding: 0 12px!important; |
| | | } |
| | | .ant-row.ant-form-item .ant-col { |
| | | padding: 0; |
| | | } |
| | | .textarea2, .textarea4 { |
| | | padding-left: 7px; |
| | | } |
| | | .page-card { |
| | | position: relative; |
| | | background: #ffffff; |
| | | border-radius: 2px; |
| | | margin-bottom: 15px; |
| | | .ant-form-item { |
| | | cursor: move; |
| | | display: flex; |
| | | margin-bottom: 0px; |
| | | .ant-form-item-label { |
| | | overflow: visible; |
| | | position: relative; |
| | | height: 40px; |
| | | label { |
| | | width: 100%; |
| | | cursor: move; |
| | | overflow: hidden; |
| | | display: inline-block; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | .ant-form-item-control-wrapper { |
| | | position: relative; |
| | | .ant-select { |
| | | width: 100%; |
| | | margin-top: 4px; |
| | | } |
| | | .ant-calendar-picker { |
| | | width: 100%; |
| | | margin-top: 4px; |
| | | } |
| | | .ant-input-number { |
| | | width: 100%; |
| | | margin-top: 4px; |
| | | } |
| | | } |
| | | .ant-form-item-control-wrapper::after { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | opacity: 0; |
| | | z-index: 1; |
| | | } |
| | | .ant-col-cuslabel { |
| | | width: 10.5%; |
| | | } |
| | | .ant-col-cuswrap { |
| | | width: 89.5%; |
| | | } |
| | | } |
| | | } |
| | | .ant-calendar-picker { |
| | | min-width: 100px!important; |
| | | } |
| | | } |
| | | > .anticon-setting { |
| | | position: absolute; |
| | | font-size: 16px; |
| | | right: 5px; |
| | | top: 5px; |
| | | padding: 10px; |
| | | cursor: pointer; |
| | | } |
| | | .paste-Icon { |
| | | position: absolute; |
| | | font-size: 16px; |
| | | right: 15px; |
| | | top: 65px; |
| | | } |
| | | } |
| | | } |
| | | .setting { |
| | | overflow-y: auto; |
| | | } |
| | | .setting::-webkit-scrollbar { |
| | | width: 7px; |
| | | } |
| | | .setting::-webkit-scrollbar-thumb { |
| | | border-radius: 5px; |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); |
| | | background: rgba(0, 0, 0, 0.13); |
| | | } |
| | | .setting::-webkit-scrollbar-track { |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); |
| | | border-radius: 3px; |
| | | border: 1px solid rgba(0, 0, 0, 0.07); |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | } |
| | | |
| | | .modal-fields { |
| | | .ant-modal { |
| | | top: 50px; |
| | | padding-bottom: 5px; |
| | | .ant-modal-body { |
| | | max-height: calc(100vh - 190px); |
| | | overflow-y: auto; |
| | | .ant-empty { |
| | | margin: 15vh 8px; |
| | | } |
| | | } |
| | | .ant-modal-body::-webkit-scrollbar { |
| | | width: 7px; |
| | | } |
| | | .ant-modal-body::-webkit-scrollbar-thumb { |
| | | border-radius: 5px; |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); |
| | | background: rgba(0, 0, 0, 0.13); |
| | | } |
| | | .ant-modal-body::-webkit-scrollbar-track { |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); |
| | | border-radius: 3px; |
| | | border: 1px solid rgba(0, 0, 0, 0.07); |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Radio, Icon, Tooltip, InputNumber } from 'antd' |
| | | |
| | | import './index.scss' |
| | | |
| | | class CustomMenuForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | btn: PropTypes.object, |
| | | config: PropTypes.object, |
| | | updateConfig: PropTypes.func |
| | | } |
| | | |
| | | changeCacheDay = (val) => { |
| | | if (typeof(val) !== 'number') { |
| | | val = '' |
| | | } |
| | | this.props.updateConfig({...this.props.config, cacheTime: val}) |
| | | } |
| | | |
| | | selectChange = (key, value) => { |
| | | const { config } = this.props |
| | | |
| | | if (key === 'cacheUseful') { |
| | | this.props.updateConfig({...config, cacheUseful: value}) |
| | | } else if (key === 'timeUnit') { |
| | | this.props.updateConfig({...config, timeUnit: value}) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { dict, config } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 8 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | } |
| | | } |
| | | |
| | | return ( |
| | | <Form {...formItemLayout} className="custom-menu-form"> |
| | | <Row> |
| | | <Col span={24}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="对于不经常性变动的信息,缓存数据有助于提高查询效率。"> |
| | | <Icon type="question-circle" /> |
| | | 缓存数据 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('cacheUseful', { |
| | | initialValue: config.cacheUseful || 'false' |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.selectChange('cacheUseful', e.target.value)}}> |
| | | <Radio value="true">使用</Radio> |
| | | <Radio value="false">不使用</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {config.cacheUseful === 'true' ? <Col span={24}> |
| | | <Form.Item label="单位"> |
| | | {getFieldDecorator('timeUnit', { |
| | | initialValue: config.timeUnit || 'day' |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.selectChange('timeUnit', e.target.value)}}> |
| | | <Radio value="day">天</Radio> |
| | | <Radio value="hour">小时</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.cacheUseful === 'true' ? <Col span={24}> |
| | | <Form.Item label="时长"> |
| | | {getFieldDecorator('cacheTime', { |
| | | initialValue: config.cacheTime, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['mob.required.input'] + '时长!' |
| | | } |
| | | ] |
| | | })( |
| | | <InputNumber min={1} max={config.timeUnit !== 'hour' ? 7 : 23} precision={0} onChange={this.changeCacheDay}/> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(CustomMenuForm) |
New file |
| | |
| | | .custom-menu-form { |
| | | .anticon-question-circle { |
| | | color: #c49f47; |
| | | position: relative; |
| | | left: -3px; |
| | | } |
| | | .ant-input-number { |
| | | width: 100%; |
| | | } |
| | | } |
| | |
| | | background: #ffffff; |
| | | border-radius: 2px; |
| | | padding-bottom: 15px; |
| | | height: 55px; |
| | | .ant-form-item { |
| | | margin-bottom: 0px; |
| | | .ant-form-item-control-wrapper { |
| | |
| | | const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) |
| | | const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) |
| | | const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) |
| | | const PopviewController = asyncComponent(() => import('@/menu/popview/controller')) |
| | | const PopviewController = asyncComponent(() => import('@/menu/popview')) |
| | | const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) |
| | | |
| | | sessionStorage.setItem('isEditState', 'true') |
| | |
| | | oriConfig: null, |
| | | openEdition: '', |
| | | config: null, |
| | | popBtn: null, // 弹窗标签页 |
| | | visible: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('delButtons', this.delButtons) |
| | | MKEmitter.addListener('changePopview', this.initPopview) |
| | | } |
| | | |
| | | /** |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('delButtons', this.delButtons) |
| | | MKEmitter.removeListener('changePopview', this.initPopview) |
| | | } |
| | | |
| | | delButtons = (items) => { |
| | | this.setState({delButtons: [...this.state.delButtons, ...items]}) |
| | | } |
| | | |
| | | initPopview = (card, btn) => { |
| | | const { oriConfig, config } = this.state |
| | | |
| | | let _config = fromJS(config).toJS() |
| | | delete _config.tableFields |
| | | |
| | | if (!is(fromJS(oriConfig), fromJS(_config))) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '配置已修改,请保存!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | btn.config = _config |
| | | btn.component = card |
| | | |
| | | this.setState({popBtn: btn, visible: true}) |
| | | } |
| | | |
| | | handleBack = () => { |
| | | this.setState({popBtn: null, delButtons: []}, () => { |
| | | this.setState({visible: false}) |
| | | }) |
| | | } |
| | | |
| | | closeView = () => { |
| | |
| | | let config = null |
| | | |
| | | try { |
| | | config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) |
| | | config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = null |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { activeKey, MenuType, dict, MenuId, config, ParentId, MenuName, MenuNo, menuloading } = this.state |
| | | const { activeKey, MenuType, popBtn, visible, dict, MenuId, config, ParentId, MenuName, MenuNo, menuloading } = this.state |
| | | |
| | | return ( |
| | | <ConfigProvider locale={_locale}> |
| | | <div className="pc-menu-view" id="view"> |
| | | <Header /> |
| | | <DndProvider backend={HTML5Backend}> |
| | | {!popBtn && !visible ? <DndProvider backend={HTML5Backend}> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | | <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> |
| | |
| | | </Card> |
| | | </div> |
| | | </div> |
| | | </DndProvider> |
| | | </DndProvider> : null} |
| | | {popBtn && visible ? <PopviewController btn={popBtn} handleBack={this.handleBack}/> : null} |
| | | <StyleController /> |
| | | <ModalController /> |
| | | <PopviewController /> |
| | | </div> |
| | | </ConfigProvider> |
| | | ) |