From b6ccd63b80fc7017bfabc446787732a98c7cbab7 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 06 一月 2021 19:10:28 +0800 Subject: [PATCH] 2021-01-06 --- src/templates/menuconfig/editfirstmenu/menuform/index.jsx | 20 src/utils/utils-datamanage.js | 2 src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 31 + src/menu/stylecombcontrolbutton/index.scss | 33 + src/menu/components/card/table-card/index.jsx | 9 src/menu/components/share/markcomponent/index.jsx | 14 src/tabviews/custom/components/chart/antv-bar-line/index.scss | 5 src/menu/datasource/verifycard/customscript/index.jsx | 2 src/menu/stylecombcontroller/index.scss | 216 +++++++ src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 4 src/menu/components/chart/antv-bar/index.jsx | 21 src/menu/stylecombcontroller/styleInput/index.jsx | 153 +++++ src/templates/menuconfig/editthdmenu/index.jsx | 2 src/menu/components/share/markcomponent/markform/index.scss | 0 src/menu/stylecombcontroller/index.jsx | 564 ++++++++++++++++++++ src/menu/stylecombcontroller/styleInput/index.scss | 11 src/menu/components/share/markcomponent/index.scss | 0 src/views/menudesign/index.jsx | 8 src/tabviews/custom/components/card/data-card/index.jsx | 29 + src/tabviews/custom/components/card/table-card/index.jsx | 31 + src/tabviews/custom/components/card/cardcellList/index.jsx | 66 ++ src/menu/components/card/cardcellcomponent/index.jsx | 2 src/menu/components/share/actioncomponent/formconfig.jsx | 74 + src/menu/datasource/verifycard/settingform/index.jsx | 4 src/tabviews/custom/components/table/normal-table/index.jsx | 13 src/templates/menuconfig/editfirstmenu/index.jsx | 2 src/templates/menuconfig/menuform/index.jsx | 16 src/menu/components/card/data-card/index.jsx | 11 src/menu/components/share/actioncomponent/index.jsx | 4 src/components/header/resetpwd/index.jsx | 28 src/menu/components/chart/antv-pie/index.jsx | 17 src/menu/components/search/main-search/index.jsx | 9 src/menu/components/share/actioncomponent/actionform/index.jsx | 16 src/templates/menuconfig/editsecmenu/index.jsx | 1 src/templates/menuconfig/editthdmenu/menuform/index.jsx | 18 src/views/menudesign/index.scss | 12 src/mob/colorsketch/index.scss | 3 src/menu/stylecombcontrolbutton/index.jsx | 130 ++++ src/menu/components/card/prop-card/index.jsx | 9 src/menu/components/table/normal-table/index.jsx | 11 src/menu/components/table/normal-table/columns/index.jsx | 2 src/menu/components/tabs/antv-tabs/index.jsx | 9 src/menu/components/group/normal-group/index.jsx | 9 src/menu/components/share/markcomponent/markform/index.jsx | 8 44 files changed, 1,523 insertions(+), 106 deletions(-) diff --git a/src/components/header/resetpwd/index.jsx b/src/components/header/resetpwd/index.jsx index ac9eaed..2f3b63a 100644 --- a/src/components/header/resetpwd/index.jsx +++ b/src/components/header/resetpwd/index.jsx @@ -15,7 +15,29 @@ onEnterSubmit = (e) => { // 琛ㄥ崟鍥炶溅鎻愪氦 if (e.key !== 'Enter') return - this.props.resetPwdSubmit() + + if (!this.props.form.getFieldValue('originpwd')) { + this.focusInput('originpwd') + } else if (!this.props.form.getFieldValue('password')) { + this.focusInput('password') + } else if (!this.props.form.getFieldValue('confirm')) { + this.focusInput('confirm') + } else { + this.props.resetPwdSubmit() + } + } + + focusInput = (selectId) => { + let _form = document.getElementById('reset-password-form') + let _inputs = _form.getElementsByTagName('input') + _inputs = [..._inputs] + _inputs.forEach(input => { + if (!input || input.id !== selectId) return + + if (input.focus) { + input.focus() + } + }) } handleConfirm = () => { @@ -68,7 +90,7 @@ } return ( - <Form {...formItemLayout} onKeyDown={this.onEnterSubmit}> + <Form {...formItemLayout} onKeyDown={this.onEnterSubmit} id="reset-password-form"> <Form.Item label={this.props.dict['main.password.origin']}> {getFieldDecorator('originpwd', { rules: [ @@ -77,7 +99,7 @@ message: this.props.dict['main.password.origin.required'] } ] - })(<Input.Password />)} + })(<Input.Password autoFocus/>)} </Form.Item> <Form.Item label={this.props.dict['main.password.new']} hasFeedback> {getFieldDecorator('password', { diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index dc42ad7..403c4df 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -16,7 +16,7 @@ const BarCode = asyncComponent(() => import('@/components/barcode')) const QrCode = asyncComponent(() => import('@/components/qrcode')) const Video = asyncComponent(() => import('@/components/video')) -const MarkColumn = asyncIconComponent(() => import('@/menu/components/table/normal-table/columns/markcolumn')) +const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) const Card = ({ id, fields, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, updateMarks }) => { const originalIndex = findCard(id).index @@ -138,7 +138,7 @@ <Icon className="copy" title="澶嶅埗" type="copy" onClick={() => copyCard(id)} /> <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} type="font-colors" /> - {['text', 'number'].includes(card.eleType) ? <MarkColumn columns={fields} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } + {['text', 'number', 'slider'].includes(card.eleType) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } </div> } trigger="hover"> <div ref={node => drag(drop(node))} className={'ant-col card-cell ant-col-' + card.width}> diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx index 7388b7d..1a02e52 100644 --- a/src/menu/components/card/cardcellcomponent/index.jsx +++ b/src/menu/components/card/cardcellcomponent/index.jsx @@ -476,7 +476,7 @@ 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: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, tables: [], groups: [], fields: [] diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx index ff1bd6f..ec94814 100644 --- a/src/menu/components/card/data-card/index.jsx +++ b/src/menu/components/card/data-card/index.jsx @@ -284,7 +284,7 @@ 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: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, tables: [], groups: [], fields: [] @@ -360,6 +360,13 @@ } } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state @@ -376,7 +383,7 @@ } return ( - <div className="menu-data-card-edit-box" style={{...card.style}}> + <div className="menu-data-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> diff --git a/src/menu/components/card/prop-card/index.jsx b/src/menu/components/card/prop-card/index.jsx index bcf9f79..0483f9f 100644 --- a/src/menu/components/card/prop-card/index.jsx +++ b/src/menu/components/card/prop-card/index.jsx @@ -326,6 +326,13 @@ this.props.updateConfig(card) } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state @@ -342,7 +349,7 @@ } return ( - <div className="menu-prop-card-edit-box" style={{...card.style}}> + <div className="menu-prop-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> diff --git a/src/menu/components/card/table-card/index.jsx b/src/menu/components/card/table-card/index.jsx index 7486c33..139165c 100644 --- a/src/menu/components/card/table-card/index.jsx +++ b/src/menu/components/card/table-card/index.jsx @@ -309,11 +309,18 @@ } } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state return ( - <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}}> + <div className="menu-table-card-edit-box" style={{...card.style, height: card.wrap.height}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx index 95f9131..9be6de7 100644 --- a/src/menu/components/chart/antv-bar/index.jsx +++ b/src/menu/components/chart/antv-bar/index.jsx @@ -126,7 +126,7 @@ const { card } = this.state if (parentId === card.parentId) { - let _element = document.getElementById(card.uuid) + let _element = document.getElementById(card.uuid + 'canvas') if (_element) { _element.innerHTML = '' } @@ -209,7 +209,7 @@ } const chart = new Chart({ - container: card.uuid, + container: card.uuid + 'canvas', autoFit: true, height: plot.height || 400 }) @@ -408,7 +408,7 @@ }) const chart = new Chart({ - container: card.uuid, + container: card.uuid + 'canvas', autoFit: true, height: plot.height || 400 }) @@ -571,7 +571,7 @@ } const chart = new Chart({ - container: card.uuid, + container: card.uuid + 'canvas', autoFit: true, height: plot.height || 400 }) @@ -734,7 +734,7 @@ const card = fromJS(this.state.card).toJS() let refresh = false if (!is(fromJS(component.plot), fromJS(card.plot))) { - let _element = document.getElementById(card.uuid) + let _element = document.getElementById(card.uuid + 'canvas') if (_element) { _element.innerHTML = '' } @@ -852,11 +852,18 @@ } } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state return ( - <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}> + <div className="menu-line-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -878,7 +885,7 @@ config={card} updateaction={this.updateComponent} /> - <div className="canvas" id={card.uuid}></div> + <div className="canvas" id={card.uuid + 'canvas'}></div> </div> ) } diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx index b5d947d..819344e 100644 --- a/src/menu/components/chart/antv-pie/index.jsx +++ b/src/menu/components/chart/antv-pie/index.jsx @@ -113,7 +113,7 @@ const { card } = this.state if (parentId === card.parentId) { - let _element = document.getElementById(card.uuid) + let _element = document.getElementById(card.uuid + 'canvas') if (_element) { _element.innerHTML = '' } @@ -162,7 +162,7 @@ const dv = ds.createView().source(data) const chart = new Chart({ - container: card.uuid, + container: card.uuid + 'canvas', autoFit: true, height: plot.height || 400 }) @@ -335,7 +335,7 @@ const card = fromJS(this.state.card).toJS() let refresh = false if (!is(fromJS(component.plot), fromJS(card.plot))) { - let _element = document.getElementById(card.uuid) + let _element = document.getElementById(card.uuid + 'canvas') if (_element) { _element.innerHTML = '' } @@ -424,11 +424,18 @@ } } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state return ( - <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}}> + <div className="menu-pie-chart-edit-box" style={{...card.style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -444,7 +451,7 @@ } trigger="hover"> <Icon type="tool" /> </Popover> - <div className="canvas" id={card.uuid}></div> + <div className="canvas" id={card.uuid + 'canvas'}></div> </div> ) } diff --git a/src/menu/components/group/normal-group/index.jsx b/src/menu/components/group/normal-group/index.jsx index a135ab4..06944e3 100644 --- a/src/menu/components/group/normal-group/index.jsx +++ b/src/menu/components/group/normal-group/index.jsx @@ -132,11 +132,18 @@ this.props.updateConfig(group) } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.group) + } + } + render() { const { group } = this.state return ( - <div className="menu-group-edit-box" style={group.style}> + <div className="menu-group-edit-box" style={group.style} onClick={this.clickComponent} id={group.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <SettingComponent config={group} updateConfig={this.updateComponent} /> diff --git a/src/menu/components/search/main-search/index.jsx b/src/menu/components/search/main-search/index.jsx index 43134bf..1970874 100644 --- a/src/menu/components/search/main-search/index.jsx +++ b/src/menu/components/search/main-search/index.jsx @@ -339,11 +339,18 @@ }) } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { dict, card, visible, sqlVerifing } = this.state return ( - <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show}`} style={card.style}> + <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show || ''}`} onClick={this.clickComponent} id={card.uuid} style={card.style}> <DragElement list={card.search} handleList={this.handleList} diff --git a/src/menu/components/share/actioncomponent/actionform/index.jsx b/src/menu/components/share/actioncomponent/actionform/index.jsx index 133767b..83d1aab 100644 --- a/src/menu/components/share/actioncomponent/actionform/index.jsx +++ b/src/menu/components/share/actioncomponent/actionform/index.jsx @@ -8,12 +8,12 @@ const { TextArea } = Input const actionTypeOptions = { - pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'], - prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'], - exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'width'], - excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'syncComponent', 'width'], - excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'pagination', 'search', 'width'], - popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'width'], + pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], + prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], + exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], + excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width'], + excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'pagination', 'search', 'width'], + popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'resetPageIndex', 'width'], tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'linkmenu', 'width'], innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'icon', 'class', 'width'], funcbutton: ['label', 'OpenType', 'funcType', 'show', 'icon', 'class', 'width'] @@ -137,7 +137,7 @@ } } else if (_opentype === 'funcbutton') { if (_funcType === 'print') { - _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError') + _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') if (_intertype === 'outer') { _options.push('innerFunc', 'sysInterface', 'interface', 'outerFunc', 'callbackFunc') } else if (_intertype === 'inner') { @@ -221,7 +221,7 @@ }, () => { if (value === 'excelIn') { _fieldval.label = this.props.dict['model.form.excelIn'] - _fieldval.class = 'border-dgreen' + _fieldval.class = 'dgreen' } else if (value === 'excelOut') { _fieldval.label = this.props.dict['model.form.excelOut'] _fieldval.class = 'dgreen' diff --git a/src/menu/components/share/actioncomponent/formconfig.jsx b/src/menu/components/share/actioncomponent/formconfig.jsx index 9899f8d..40b5761 100644 --- a/src/menu/components/share/actioncomponent/formconfig.jsx +++ b/src/menu/components/share/actioncomponent/formconfig.jsx @@ -44,15 +44,16 @@ ] if (type === 'chart') { - opentypes = [ - { - value: 'excelIn', - text: Formdict['model.form.excelIn'] - }, { - value: 'excelOut', - text: Formdict['model.form.excelOut'] - } - ] + opentypes = opentypes.filter(item => item.value === 'excelIn' || item.value === 'excelOut') + } + + let refresh = [] + if (sessionStorage.getItem('editMenuType') === 'popview') { // 寮圭獥鏍囩 + opentypes = opentypes.filter(item => item.value !== 'popview') + refresh.push({ + value: 'popclose', + text: '鏍囩鍏抽棴鍒锋柊' + }) } let forms = [ @@ -226,45 +227,72 @@ options: menulist }, { - type: 'radio', + type: 'select', key: 'execSuccess', label: Formdict['model.form.afterSuccess'], initVal: card.execSuccess || 'never', + tooltip: refresh.length ? '鎵ц鏍囩鍏抽棴鍒锋柊鏃讹紝浼氬悓姝ュ埛鏂板綋鍓嶇粍浠跺拰涓婄骇缁勪欢-琛屻��' : '鍒锋柊涓婄骇缁勪欢-琛屾椂锛屼細鍚屾鍒锋柊褰撳墠缁勪欢锛屾敞锛氫笂绾х粍浠跺湪鏁版嵁婧愪腑娣诲姞銆�', required: true, options: [{ - value: 'grid', - text: Formdict['header.form.refresh'] - }, { value: 'never', text: Formdict['header.form.refresh.never'] - }] + }, { + value: 'grid', + text: '鍒锋柊褰撳墠缁勪欢' + }, { + value: 'mainline', + text: '鍒锋柊涓婄骇缁勪欢 - 琛�' + }, + ...refresh] }, { - type: 'radio', + type: 'select', key: 'execError', label: Formdict['model.form.afterError'], initVal: card.execError || 'never', + tooltip: refresh.length ? '鎵ц鏍囩鍏抽棴鍒锋柊鏃讹紝浼氬悓姝ュ埛鏂板綋鍓嶇粍浠跺拰涓婄骇缁勪欢-琛屻��' : '鍒锋柊涓婄骇缁勪欢-琛屾椂锛屼細鍚屾鍒锋柊褰撳墠缁勪欢锛屾敞锛氫笂绾х粍浠跺湪鏁版嵁婧愪腑娣诲姞銆�', required: true, options: [{ - value: 'grid', - text: Formdict['header.form.refresh'] - }, { value: 'never', text: Formdict['header.form.refresh.never'] - }] + }, { + value: 'grid', + text: '鍒锋柊褰撳墠缁勪欢' + }, { + value: 'mainline', + text: '鍒锋柊涓婄骇缁勪欢 - 琛�' + }, + ...refresh] }, { - type: 'radio', + type: 'select', key: 'popClose', label: Formdict['header.form.popClose'], initVal: card.popClose || 'never', required: true, options: [{ - value: 'grid', - text: Formdict['header.form.refresh'] - }, { value: 'never', text: Formdict['header.form.refresh.never'] + }, { + value: 'grid', + text: '鍒锋柊褰撳墠缁勪欢' + }, { + value: 'mainline', + text: '鍒锋柊涓婄骇缁勪欢 - 琛�' + }] + }, + { + type: 'radio', + key: 'resetPageIndex', + label: '鍒锋柊鏃�', + initVal: card.resetPageIndex || 'true', + required: false, + options: [{ + value: 'true', + text: '閲嶇疆椤电爜' + }, { + value: 'false', + text: '涓嶉噸缃�' }] }, { diff --git a/src/menu/components/share/actioncomponent/index.jsx b/src/menu/components/share/actioncomponent/index.jsx index 5b45d27..aec9697 100644 --- a/src/menu/components/share/actioncomponent/index.jsx +++ b/src/menu/components/share/actioncomponent/index.jsx @@ -229,10 +229,10 @@ if (btn.class !== item.class || btn.show !== item.show || !btn.btnstyle.color) { if (btn.show === 'link' || btn.show === 'icon') { btn.btnstyle.color = color[btn.class] - btn.btnstyle.background = 'transparent' + btn.btnstyle.backgroundColor = 'transparent' } else { btn.btnstyle.color = '#ffffff' - btn.btnstyle.background = color[btn.class] + btn.btnstyle.backgroundColor = color[btn.class] } } return btn diff --git a/src/menu/components/table/normal-table/columns/markcolumn/index.jsx b/src/menu/components/share/markcomponent/index.jsx similarity index 92% rename from src/menu/components/table/normal-table/columns/markcolumn/index.jsx rename to src/menu/components/share/markcomponent/index.jsx index 0d4f09b..03dd41d 100644 --- a/src/menu/components/table/normal-table/columns/markcolumn/index.jsx +++ b/src/menu/components/share/markcomponent/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Icon, Modal, Col } from 'antd' import Utils from '@/utils/utils.js' import asyncComponent from '@/utils/asyncComponent' @@ -127,6 +127,7 @@ resetMark = () => { const { marks, columns, type } = this.props + let markColumns = fromJS(this.state.markColumns).toJS() let options = columns.map(col => { return { @@ -251,12 +252,18 @@ if (type === 'line') { signs.pop() + } else if (type === 'slider') { + markColumns = markColumns.filter(col => { + col.width = '20%' + return col.dataIndex !== 'signType' + }) + signs = [] } this.setState({ visible: true, marks: marks ? fromJS(marks).toJS() : [], - markColumns: this.state.markColumns.map(col => { + markColumns: markColumns.map(col => { if (col.dataIndex === 'field') { col.options = options } else if (col.dataIndex === 'signType') { @@ -276,7 +283,7 @@ }) let marks = this.state.marks.map(item => { - if (item.signType[0] === 'background') { + if (item.signType && item.signType[0] === 'background') { try { let colors = item.color.match(/\d+/g) if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) { @@ -313,6 +320,7 @@ destroyOnClose > <MarkForm dict={dict} signs={signs} columns={options} markChange={this.markChange}/> + <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>娉細浠庝笂鍒颁笅锛屽尮閰嶇涓�涓鍚堟潯浠剁殑鏍囪銆�</Col> <EditTable actions={['edit', 'move', 'del']} data={marks} columns={markColumns} onChange={(marks) => this.setState({marks})}/> </Modal> </div> diff --git a/src/menu/components/table/normal-table/columns/markcolumn/index.scss b/src/menu/components/share/markcomponent/index.scss similarity index 100% rename from src/menu/components/table/normal-table/columns/markcolumn/index.scss rename to src/menu/components/share/markcomponent/index.scss diff --git a/src/menu/components/table/normal-table/columns/markcolumn/markform/index.jsx b/src/menu/components/share/markcomponent/markform/index.jsx similarity index 94% rename from src/menu/components/table/normal-table/columns/markcolumn/markform/index.jsx rename to src/menu/components/share/markcomponent/markform/index.jsx index 613ea2b..c027d4b 100644 --- a/src/menu/components/table/normal-table/columns/markcolumn/markform/index.jsx +++ b/src/menu/components/share/markcomponent/markform/index.jsx @@ -68,7 +68,7 @@ <Select> <Select.Option value="="> = </Select.Option> <Select.Option value="!="> != </Select.Option> - <Select.Option value=">"> > </Select.Option> + <Select.Option value=">"> > </Select.Option> <Select.Option value="<"> < </Select.Option> <Select.Option value="like"> like </Select.Option> </Select> @@ -101,7 +101,7 @@ )} </Form.Item> </Col> - <Col span={6}> + {signs.length ? <Col span={6}> <Form.Item label="鏍囪鏂瑰紡"> {getFieldDecorator('signType', { initialValue: [], @@ -115,8 +115,8 @@ <Cascader options={signs} placeholder=""/> )} </Form.Item> - </Col> - <Col span={18} style={{textAlign: 'right', marginBottom: 10}}> + </Col> : null} + <Col span={signs.length ? 18 : 24} style={{textAlign: 'right'}}> <Button onClick={this.handleConfirm} type="primary" className="mk-green"> 娣诲姞 </Button> diff --git a/src/menu/components/table/normal-table/columns/markcolumn/markform/index.scss b/src/menu/components/share/markcomponent/markform/index.scss similarity index 100% rename from src/menu/components/table/normal-table/columns/markcolumn/markform/index.scss rename to src/menu/components/share/markcomponent/markform/index.scss diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx index e494875..87d7708 100644 --- a/src/menu/components/table/normal-table/columns/index.jsx +++ b/src/menu/components/table/normal-table/columns/index.jsx @@ -14,7 +14,7 @@ const { confirm } = Modal const EditColumn = asyncIconComponent(() => import('./editColumn')) -const MarkColumn = asyncIconComponent(() => import('./markcolumn')) +const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) class HeaderCol extends Component { diff --git a/src/menu/components/table/normal-table/index.jsx b/src/menu/components/table/normal-table/index.jsx index fbf625e..c42372d 100644 --- a/src/menu/components/table/normal-table/index.jsx +++ b/src/menu/components/table/normal-table/index.jsx @@ -245,7 +245,7 @@ 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: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, tables: [], groups: [], fields: [] @@ -318,11 +318,18 @@ } } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state return ( - <div className="menu-normal-table-edit-box" style={{...card.style, height: card.wrap.height}}> + <div className="menu-normal-table-edit-box" style={{...card.style, height: card.wrap.height}} onClick={this.clickComponent} id={card.uuid}> <NormalHeader defaultshow="hidden" hideSearch="true" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx index 7aaaeef..022d777 100644 --- a/src/menu/components/tabs/antv-tabs/index.jsx +++ b/src/menu/components/tabs/antv-tabs/index.jsx @@ -253,11 +253,18 @@ this.props.updateConfig(tabs) } + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.tabs) + } + } + render() { const { tabs, dict, labelvisible, editab } = this.state return ( - <div className="menu-tabs-edit-box" style={tabs.style}> + <div className="menu-tabs-edit-box" style={tabs.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={ diff --git a/src/menu/datasource/verifycard/customscript/index.jsx b/src/menu/datasource/verifycard/customscript/index.jsx index cc23a59..64d25c7 100644 --- a/src/menu/datasource/verifycard/customscript/index.jsx +++ b/src/menu/datasource/verifycard/customscript/index.jsx @@ -220,7 +220,7 @@ </Col> <Col span={24} className="sqlfield"> <Form.Item label={'鍙敤瀛楁'}> - id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id{usefulFields ? ', ' + usefulFields : ''} + id, bid, loginuid, sessionuid, userid, username, fullname, appkey, time_id, orderBy, pageSize, pageIndex{usefulFields ? ', ' + usefulFields : ''} </Form.Item> </Col> <Col span={10} style={{width: '43%'}}> diff --git a/src/menu/datasource/verifycard/settingform/index.jsx b/src/menu/datasource/verifycard/settingform/index.jsx index d165e93..da631aa 100644 --- a/src/menu/datasource/verifycard/settingform/index.jsx +++ b/src/menu/datasource/verifycard/settingform/index.jsx @@ -340,7 +340,7 @@ <Form.Item label={ <Tooltip placement="topLeft" title={'璇ョ粍浠跺鏋滃彈鍏朵粬缁勪欢鎺у埗锛岃閫夐」鐩稿簲鐨勭粍浠讹紝娌℃湁鏃堕�夆�滄棤鈥濄��'}> <Icon type="question-circle" /> - 涓婄骇妯″潡 + 涓婄骇缁勪欢 </Tooltip> }> {getFieldDecorator('supModule', { @@ -348,7 +348,7 @@ rules: [ { required: true, - message: this.props.dict['form.required.select'] + '涓婄骇妯″潡!' + message: this.props.dict['form.required.select'] + '涓婄骇缁勪欢!' } ] })( diff --git a/src/menu/stylecombcontrolbutton/index.jsx b/src/menu/stylecombcontrolbutton/index.jsx new file mode 100644 index 0000000..d8c6c16 --- /dev/null +++ b/src/menu/stylecombcontrolbutton/index.jsx @@ -0,0 +1,130 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { fromJS } from 'immutable' +import { Button } from 'antd' + +import MKEmitter from '@/utils/events.js' +import './index.scss' + +class StyleCombControlButton extends Component { + static propTpyes = { + menu: PropTypes.any + } + + state = { + label: '璋冩暣', + parent: null, + components: [] + } + + componentDidMount () { + MKEmitter.addListener('clickComponent', this.clickComponent) + MKEmitter.addListener('submitCombineStyle', this.submitCombineStyle) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('clickComponent', this.clickComponent) + MKEmitter.removeListener('submitCombineStyle', this.submitCombineStyle) + } + + submitCombineStyle = (style) => { + const { components } = this.state + + components.forEach((item, i) => { + setTimeout(() => { + MKEmitter.emit('submitStyle', [item.uuid], {...item.style, ...style}) + }, i * 5) + }) + } + + clickComponent = (card) => { + const { menu } = this.props + const { parent } = this.state + let components = fromJS(this.state.components).toJS() + + if (!parent) { + let _parent = null + let getParents = (box) => { + box.components.forEach(item => { + if (item.type === 'tabs') { + item.subtabs.forEach(tab => { + if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) { + _parent = tab + } else { + getParents(tab) + } + }) + } else if (item.type === 'group') { + if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) { + _parent = item + } + } + }) + } + + if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) { + _parent = menu + } else { + getParents(menu) + } + + document.getElementById(card.uuid).classList.add('selected-control-element') + MKEmitter.emit('changeCombineStyle', ['margin', 'padding', 'border', 'background']) + + this.setState({ + parent: _parent, + components: [card] + }) + } else { + if (components.findIndex(cell => cell.uuid === card.uuid) > -1) { + components = components.filter(cell => cell.uuid !== card.uuid) + document.getElementById(card.uuid).classList.remove('selected-control-element') + } else if (parent.components.findIndex(cell => cell.uuid === card.uuid) > -1) { + components.push(card) + document.getElementById(card.uuid).classList.add('selected-control-element') + } + + this.setState({ + components: components, + parent: components.length ? parent : null + }) + } + } + + triggerStyleChange = () => { + const { label } = this.state + + if (label === '璋冩暣') { + document.body.className = 'style-control' + sessionStorage.setItem('style-control', 'true') + this.setState({label: '閫�鍑�'}) + } else { + document.body.className = '' + sessionStorage.setItem('style-control', 'false') + + let eles = document.getElementsByClassName('selected-control-element') + for (let i = 0; i < eles.length; i++) { + eles[i].classList.remove('selected-control-element') + } + + MKEmitter.emit('closeCombineStyle') + + this.setState({label: '璋冩暣', parent: null, components: []}) + } + } + + render() { + const { label } = this.state + return ( + <Button className="style-control-button" type="link" icon="font-colors" title="璋冩暣鏍峰紡" onClick={this.triggerStyleChange}>{label}</Button> + ) + } +} + +export default StyleCombControlButton \ No newline at end of file diff --git a/src/menu/stylecombcontrolbutton/index.scss b/src/menu/stylecombcontrolbutton/index.scss new file mode 100644 index 0000000..af3aebe --- /dev/null +++ b/src/menu/stylecombcontrolbutton/index.scss @@ -0,0 +1,33 @@ + +.style-control-button.ant-btn-link, .style-control-button.ant-btn-link:hover, .style-control-button.ant-btn-link:focus { + color: orange; + position: relative; + z-index: 13; + background: #ffffff; +} +body.style-control { + .pc-menu-view::before { + content: ' '; + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 12; + background:rgba(0, 0, 0, 0.3); + } + .menu-body .menu-view >.ant-card >.ant-card-body { + position: relative; + z-index: 13; + .anticon-tool { + display: none; + } + } + .mk-popover-control-wrap { + display: none; + } + + .selected-control-element { + box-shadow: 0px 0px 4px orange; + } +} \ No newline at end of file diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx new file mode 100644 index 0000000..eaa7e89 --- /dev/null +++ b/src/menu/stylecombcontroller/index.jsx @@ -0,0 +1,564 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' + +import MKEmitter from '@/utils/events.js' +import zhCN from '@/locales/zh-CN/mob.js' +import enUS from '@/locales/en-US/mob.js' +import ColorSketch from '@/mob/colorsketch' +import StyleInput from './styleInput' +import './index.scss' + +const { Panel } = Collapse +const { Option } = Select + +class MobController extends Component { + static propTpyes = { + editElem: PropTypes.any, + updateStyle: PropTypes.func, + } + + state = { + dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + options: [], + style: {}, + borposition: 'outer' + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + componentDidMount () { + MKEmitter.addListener('changeCombineStyle', this.initStyle) + MKEmitter.addListener('closeCombineStyle', this.closeStyle) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('changeCombineStyle', this.initStyle) + MKEmitter.removeListener('closeCombineStyle', this.closeStyle) + } + + closeStyle = () => { + this.setState({ + visible: false + }) + } + + initStyle = (options) => { + this.setState({ + visible: true, + style: {}, + options: options, + borposition: 'outer' + }) + } + + onCloseDrawer = () => { + MKEmitter.emit('submitCombineStyle', this.state.style) + } + + updateStyle = (style) => { + this.setState({style: {...this.state.style, ...style}}) + } + + /** + * @description 瀛椾綋澶у皬鍒囨崲锛岃秴鍑鸿寖鍥村拷鐣� + */ + changeFontSize = (val) => { + let value = parseInt(val) + + if (isNaN(value) || value < 12 || value > 100) return + + this.updateStyle({fontSize: `${value}px`}) + } + + /** + * @description 淇敼琛岄棿璺濓紝瓒呭嚭鑼冨洿蹇界暐 + */ + changeLineHeight = (val) => { + let value = parseFloat(val) + + if (isNaN(value) || value < 1 || value > 10) return + + this.updateStyle({lineHeight: value}) + } + + /** + * @description 瀛椾綋闂磋窛淇敼锛岃秴鍑鸿寖鍥村拷鐣� + */ + changeLetterSpacing = (val) => { + let value = parseFloat(val) + + if (isNaN(value) || value < 0 || value > 100) return + + this.updateStyle({letterSpacing: `${value}px`}) + } + + /** + * @description 淇敼瀛椾綋绮楃粏 + */ + boldChange = (val) => { + this.updateStyle({fontWeight: val}) + } + + /** + * @description 淇敼瀛椾綋棰滆壊 锛岄鑹叉帶浠� + */ + changeFontColor = (val) => { + this.updateStyle({color: val}) + } + + /** + * @description 瀛椾綋瀵归綈 + */ + changeTextAlign = (e) => { + this.updateStyle({textAlign: e.target.value}) + } + + /** + * @description 瀛椾綋鏍峰紡锛屽�炬枩 + */ + changeFontStyle = (e) => { + this.updateStyle({fontStyle: e.target.value}) + } + + /** + * @description 瀛椾綋瑁呴グ锛屼笅鍒掔嚎銆佽疮绌跨嚎銆佷笂鍒掔嚎 + */ + changeTextDecoration = (e) => { + this.updateStyle({textDecoration: e.target.value}) + } + + /** + * @description 淇敼鑳屾櫙棰滆壊 锛岄鑹叉帶浠� + */ + changeBackgroundColor = (val) => { + this.updateStyle({backgroundColor: val}) + } + + /** + * @description 淇敼闃村奖棰滆壊 锛岄鑹叉帶浠� + */ + changeShadowColor = (val) => { + this.updateStyle({shadow: val}) + } + + changeBorderStyle = (val) => { + const { borposition } = this.state + let _style = {} + + if (borposition === 'outer') { + _style.borderStyle = val + } else if (borposition === 'left') { + _style.borderLeftStyle = val + } else if (borposition === 'right') { + _style.borderRightStyle = val + } else if (borposition === 'top') { + _style.borderTopStyle = val + } else if (borposition === 'bottom') { + _style.borderBottomStyle = val + } + + this.updateStyle(_style) + } + + changeBorderWidth = (val) => { + const { borposition } = this.state + let _style = {} + + if (borposition === 'outer') { + _style.borderWidth = val + } else if (borposition === 'left') { + _style.borderLeftWidth = val + } else if (borposition === 'right') { + _style.borderRightWidth = val + } else if (borposition === 'top') { + _style.borderTopWidth = val + } else if (borposition === 'bottom') { + _style.borderBottomWidth = val + } + + this.updateStyle(_style) + } + + changeBorderColor = (val) => { + const { borposition } = this.state + let _style = {} + + if (borposition === 'outer') { + _style.borderColor = val + } else if (borposition === 'left') { + _style.borderLeftColor = val + } else if (borposition === 'right') { + _style.borderRightColor = val + } else if (borposition === 'top') { + _style.borderTopColor = val + } else if (borposition === 'bottom') { + _style.borderBottomColor = val + } + + this.updateStyle(_style) + } + + changeHeight = (val) => { + let _val = val + if (_val === '0px') { + _val = 'auto' + } + + this.updateStyle({height: _val}) + } + + changeNormalStyle = (val, type) => { + this.updateStyle({[type]: val}) + } + + render () { + const { options, borposition } = this.state + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 8 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 } + } + } + + return ( + <Drawer + title={ + <div className="header-logo"> + <img src={window.GLOB.mainlogo} alt=""/> + </div> + } + placement="left" + width="300" + mask={false} + closable={false} + className="menu-style-drawer" + visible={this.state.visible} + > + <div className="menu-combine-style-controller"> + <Form {...formItemLayout}> + <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey={options[0]}> + {options.includes('height') ? <Panel header="楂樺害" key="height"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="楂樺害" type="column-height" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px']} onChange={this.changeHeight}/> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('font') ? <Panel header="瀛椾綋" key="font"> + <Col span={12}> + <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} /> + </Form.Item> + </Col> + <Col span={12}> + <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Select defaultValue={''} onChange={this.boldChange}> + <Option value="normal">normal</Option> + <Option value="bold">bold</Option> + <Option value="bolder">bolder</Option> + <Option value="lighter">lighter</Option> + <Option value="100">100</Option> + <Option value="200">200</Option> + <Option value="300">300</Option> + <Option value="400">400</Option> + <Option value="500">500</Option> + <Option value="600">600</Option> + <Option value="700">700</Option> + <Option value="800">800</Option> + <Option value="900">900</Option> + </Select> + </Form.Item> + </Col> + <Col span={12}> + <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <InputNumber defaultValue={''} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> + </Form.Item> + </Col> + <Col span={12}> + <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> + <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <ColorSketch value={''} onChange={this.changeFontColor} /> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group defaultValue={''} onChange={this.changeFontStyle}> + <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> + <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group className="text-align" defaultValue={''} onChange={this.changeTextAlign}> + <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> + <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> + <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={' '} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group className="text-decoration" defaultValue={''} onChange={this.changeTextDecoration}> + <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> + <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> + <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button> + </Radio.Group> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('background') ? <Panel header="鑳屾櫙" key="background"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <ColorSketch value={''} onChange={this.changeBackgroundColor} /> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('border') ? <Panel header="杈规" key="border"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="杈规浣嶇疆" type="border" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}> + <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio> + <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio> + <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio> + <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio> + <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio> + </Radio.Group> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="杈规鏍峰紡" type="border-outer" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + {borposition === 'outer' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> + <Option value="solid">瀹炵嚎</Option> + <Option value="dotted">鐐瑰垝绾�</Option> + <Option value="dashed">铏氱嚎</Option> + <Option value="double">鍙岀嚎</Option> + </Select> : null} + {borposition === 'left' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> + <Option value="solid">瀹炵嚎</Option> + <Option value="dotted">鐐瑰垝绾�</Option> + <Option value="dashed">铏氱嚎</Option> + <Option value="double">鍙岀嚎</Option> + </Select> : null} + {borposition === 'right' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> + <Option value="solid">瀹炵嚎</Option> + <Option value="dotted">鐐瑰垝绾�</Option> + <Option value="dashed">铏氱嚎</Option> + <Option value="double">鍙岀嚎</Option> + </Select> : null} + {borposition === 'top' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> + <Option value="solid">瀹炵嚎</Option> + <Option value="dotted">鐐瑰垝绾�</Option> + <Option value="dashed">铏氱嚎</Option> + <Option value="double">鍙岀嚎</Option> + </Select> : null} + {borposition === 'bottom' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> + <Option value="solid">瀹炵嚎</Option> + <Option value="dotted">鐐瑰垝绾�</Option> + <Option value="dashed">铏氱嚎</Option> + <Option value="double">鍙岀嚎</Option> + </Select> : null} + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="杈规瀹藉害" type="column-width" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + {borposition === 'outer' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} + {borposition === 'left' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} + {borposition === 'right' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} + {borposition === 'top' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} + {borposition === 'bottom' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="杈规棰滆壊" type="bg-colors" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + {borposition === 'outer' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null} + {borposition === 'left' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null} + {borposition === 'right' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null} + {borposition === 'top' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null} + {borposition === 'bottom' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null} + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鍦嗚" type="radius-setting" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('shadow') ? <Panel header="闃村奖" key="shadow"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <ColorSketch value={'transparent'} onChange={this.changeShadowColor} /> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('margin') ? <Panel header="澶栬竟璺�" key="margin"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('padding') ? <Panel header="鍐呰竟璺�" key="padding"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> + </Form.Item> + </Col> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> + </Form.Item> + </Col> + </Panel> : null} + {options.includes('float') ? <Panel header="娴姩" key="float"> + <Col span={24}> + <Form.Item + colon={false} + label={<Icon title="娴姩" type="swap" />} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <Radio.Group defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> + <Radio value="left">宸︽诞鍔�</Radio> + <Radio value="right">鍙虫诞鍔�</Radio> + <Radio value="none">涓嶆诞鍔�</Radio> + </Radio.Group> + </Form.Item> + </Col> + </Panel> : null} + </Collapse> + </Form> + <div style={{textAlign: 'right'}}> + <Button style={{margin: '30px 10px 30px 0px'}} onClick={this.onCloseDrawer}>纭畾</Button> + </div> + </div> + </Drawer> + ) + } +} + +export default MobController \ No newline at end of file diff --git a/src/menu/stylecombcontroller/index.scss b/src/menu/stylecombcontroller/index.scss new file mode 100644 index 0000000..c05ed9e --- /dev/null +++ b/src/menu/stylecombcontroller/index.scss @@ -0,0 +1,216 @@ +.menu-combine-style-controller { + width: 100%; + overflow: hidden; + + >.ant-form >.ant-collapse { + border: 0; + background: #262E3F; + + > .ant-collapse-item { + border-color: #202735; + > .ant-collapse-header { + padding: 7px 40px 7px 16px; + background: #262E3F; + color: rgba(255, 255, 255, 0.85); + } + >.ant-collapse-content { + color: rgba(255, 255, 255, 0.85); + background-color: #202735; + border-top: 1px solid #202735; + .ant-collapse-content-box { + padding: 5px 10px; + } + .ant-collapse-content-box::after { + content: ' '; + display: block; + clear: both; + } + .ant-input-number { + width: 100%; + } + .ant-form-item { + margin-bottom: 2px; + + .ant-form-item-label > label { + color: rgba(255, 255, 255, 0.85); + .anticon { + vertical-align: middle; + font-size: 18px; + } + } + .ant-form-item-control-wrapper { + .ant-form-item-control { + .border-position { + .ant-radio-wrapper { + margin-right: 0px; + + span.ant-radio + * { + padding-left: 4px; + } + } + } + input { + background: transparent; + color: rgba(255, 255, 255, 0.65); + } + .ant-input { + height: 28px; + } + .ant-input-number { + height: 28px; + background: transparent; + .ant-input-number-input { + height: 28px; + } + } + .ant-input-group-addon { + background: transparent; + } + .ant-select-selection { + background: transparent; + color: rgba(255, 255, 255, 0.65); + } + .color-sketch-block { + position: relative; + top: 10px; + } + .color-sketch-block + .ant-input { + float: right; + width: 70%; + margin-top: 9px; + padding-right: 5px; + padding-left: 5px; + } + .ant-select-arrow { + color: inherit; + } + .ant-input-number-handler-wrap { + background: transparent; + .ant-input-number-handler { + color: rgba(255, 255, 255, 0.65); + .ant-input-number-handler-up-inner, .ant-input-number-handler-down-inner { + color: rgba(255, 255, 255, 0.65); + } + } + .ant-input-number-handler:active { + background: transparent; + } + } + .ant-radio-group { + span { + color: rgba(255, 255, 255, 0.65); + } + .ant-radio-button-wrapper { + background: transparent; + color: rgba(255, 255, 255, 0.65); + height: 27px; + line-height: 25px; + span { + font-style: inherit; + } + } + } + .fileupload-form-container { + .ant-btn { + height: 28px; + } + .ant-upload-list-item { + .ant-upload-list-item-info { + background: transparent; + color: rgba(255, 255, 255, 0.85); + i { + color: rgba(255, 255, 255, 0.85); + } + } + .anticon-close { + color: rgba(255, 255, 255, 0.85); + } + .anticon-close:hover { + color: rgba(255, 255, 255, 0.85); + } + } + .ant-upload-list-item:hover .ant-upload-list-item-info { + background: transparent; + } + } + } + } + } + } + } + } +} + +.margin-popover { + padding-top: 0px; + .ant-popover-inner-content { + width: 90px; + padding: 0px 5px; + .ant-menu-root.ant-menu-vertical { + border: 0; + .ant-menu-item { + height: 30px; + cursor: pointer; + line-height: 30px; + } + .ant-menu-item:not(:last-child) { + margin-bottom: 0px; + } + .ant-menu-item:first-child { + margin-top: 10px; + } + .ant-menu-item:last-child { + margin-bottom: 10px; + } + } + } + .ant-popover-arrow { + display: none; + } +} + +.menu-style-drawer { + .ant-drawer-body { + height: calc(100vh - 50px); + overflow-y: auto; + } + .ant-drawer-body::-webkit-scrollbar { + display: none; + } + .ant-drawer-wrapper-body { + background: #262E3F; + .ant-drawer-header { + background: #001529; + padding: 0px; + height: 48px; + border-radius: 0; + border: 0; + .header-logo { + width: 180px; + line-height: 48px; + height: 48px; + img { + max-width: 100%; + max-height: 100%; + } + } + .ant-drawer-close { + height: 48px; + width: 48px; + line-height: 48px; + color: #ffffff; + } + } + } + .ant-drawer-body { + padding: 0; + .color-sketch-block { + .color-sketch-block-inner { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); + } + .color-sketch-value { + color: rgba(255, 255, 255, 0.65); + } + } + } +} \ No newline at end of file diff --git a/src/menu/stylecombcontroller/styleInput/index.jsx b/src/menu/stylecombcontroller/styleInput/index.jsx new file mode 100644 index 0000000..7426b2d --- /dev/null +++ b/src/menu/stylecombcontroller/styleInput/index.jsx @@ -0,0 +1,153 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Select, Input } from 'antd' + +import './index.scss' + +const { Option } = Select + +class StyleInput extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + options: PropTypes.any, + value: PropTypes.any, + onChange: PropTypes.func, + } + + state = { + value: '', + unit: '', + options: null + } + + UNSAFE_componentWillMount () { + const { defaultValue, value, options } = this.props + let val = '' + let unit = '' + let _options = ['px'] + + if (value !== undefined) { + val = value + } else if (defaultValue !== undefined) { + val = defaultValue + } + + if (options && options.length > 0) { + _options = options + } + + unit = _options[0] + + if (val) { + if (val.indexOf('px') > -1) { + unit = 'px' + } else if (val.indexOf('%') > -1) { + unit = '%' + } else if (val.indexOf('vw') > -1) { + unit = 'vw' + } else if (val.indexOf('vh') > -1) { + unit = 'vh' + } + } + + let _val = parseInt(val) + + if (isNaN(_val)) { + _val = '' + } + + this.setState({value: _val, options: _options, unit}) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.value !== undefined && nextProps.value !== this.state.value) { + let val = nextProps.value + let unit = this.state.unit + + if (val) { + if (val.indexOf('px') > -1) { + unit = 'px' + } else if (val.indexOf('%') > -1) { + unit = '%' + } else if (val.indexOf('vw') > -1) { + unit = 'vw' + } else if (val.indexOf('vh') > -1) { + unit = 'vh' + } + } + + let _val = parseInt(val) + + if (isNaN(_val)) { + _val = '' + } + + this.setState({value: _val, unit}) + } + } + + componentDidMount () {} + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + } + + changeValue = (e) => { + const { unit } = this.state + let val = e.target.value + let _val = parseInt(val) + + if (isNaN(_val)) { + _val = '' + } + + this.setState({ + value: _val, + }) + + if (this.props.onChange) { + if (!_val) { + this.props.onChange('0px') + } else { + this.props.onChange(`${_val}${unit}`) + } + } + } + + changeUnit = (val) => { + const { value } = this.state + + this.setState({unit: val}) + if (value && this.props.onChange) { + this.props.onChange(`${value}${val}`) + } + } + + render () { + const { value, options, unit } = this.state + + return ( + <div className="style-input-box"> + <Input value={value} addonAfter={ + options.length > 1 ? + <Select value={unit} onChange={this.changeUnit}> + {options.map(item => <Option key={item} value={item}>{item}</Option>)} + </Select> : + <div className="single-unit">{unit}</div> + } onChange={this.changeValue}/> + </div> + ) + } +} + +export default StyleInput \ No newline at end of file diff --git a/src/menu/stylecombcontroller/styleInput/index.scss b/src/menu/stylecombcontroller/styleInput/index.scss new file mode 100644 index 0000000..6e9d563 --- /dev/null +++ b/src/menu/stylecombcontroller/styleInput/index.scss @@ -0,0 +1,11 @@ +.style-input-box { + line-height: 32px; + .ant-select { + width: 60px!important; + } + .single-unit { + width: 38px; + text-align: left; + color: rgba(255, 255, 255, 0.65); + } +} diff --git a/src/mob/colorsketch/index.scss b/src/mob/colorsketch/index.scss index 0cb58e9..b6aec44 100644 --- a/src/mob/colorsketch/index.scss +++ b/src/mob/colorsketch/index.scss @@ -3,11 +3,10 @@ width: 100%; .color-sketch-block-box { - // border-radius: 4px; display: inline-block; width: calc(100% - 160px); height: 100%; - border-radius: 2px; + border-radius: 4px; background: #ffffff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==') left center; } .color-sketch-block-inner { diff --git a/src/tabviews/custom/components/card/cardcellList/index.jsx b/src/tabviews/custom/components/card/cardcellList/index.jsx index a65a2cf..ed89792 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.jsx +++ b/src/tabviews/custom/components/card/cardcellList/index.jsx @@ -180,7 +180,7 @@ } } - if (result) { + if (result && mark.signType) { if (mark.signType[0] === 'font') { style.color = mark.color } else if (mark.signType[0] === 'background') { @@ -207,6 +207,60 @@ }) return content + } + + getColor = (marks) => { + const { data } = this.props + let color = '' + + marks.some(mark => { + let originVal = data[mark.field[0]] + '' + let contrastVal = '' + let result = false + + if (mark.field[1] === 'static') { + contrastVal = mark.contrastValue + '' + } else { + contrastVal = data[mark.field[2]] + '' + } + + if (mark.match === '=') { + result = originVal === contrastVal + } else if (mark.match === '!=') { + result = originVal !== contrastVal + } else if (mark.match === 'like') { + result = originVal.indexOf(contrastVal) > -1 + } else if (mark.match === '>') { + try { + originVal = parseFloat(originVal) + contrastVal = parseFloat(contrastVal) + } catch { + originVal = NaN + } + + if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { + result = true + } + } else if (mark.match === '<') { + try { + originVal = parseFloat(originVal) + contrastVal = parseFloat(contrastVal) + } catch { + originVal = NaN + } + + if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { + result = true + } + } + + if (result) { + color = mark.color + } + return result + }) + + return color } getContent = (card) => { @@ -327,6 +381,7 @@ ) } else if (card.eleType === 'slider') { let val = 0 + let color = card.color if (card.datatype === 'static') { val = card.value @@ -347,14 +402,19 @@ _val = `${val}%` } + if (card.marks) { + let _color = this.getColor(card.marks) + color = _color ? _color : color + } + return ( <Col key={card.uuid} span={card.width}> <div style={card.style}> <div className="ant-mk-slider"> <div className="ant-mk-slider-rail"></div> - <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: card.color}}></div> + <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: color}}></div> <Tooltip title={`${val}%`}> - <div className="ant-mk-slider-handle" style={{left: _val, borderColor: card.color}}></div> + <div className="ant-mk-slider-handle" style={{left: _val, borderColor: color}}></div> </Tooltip> </div> </div> diff --git a/src/tabviews/custom/components/card/data-card/index.jsx b/src/tabviews/custom/components/card/data-card/index.jsx index 06056cc..92dc59b 100644 --- a/src/tabviews/custom/components/card/data-card/index.jsx +++ b/src/tabviews/custom/components/card/data-card/index.jsx @@ -102,6 +102,7 @@ componentDidMount () { MKEmitter.addListener('syncRefreshComponentId', this.reload) MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.addListener('getexceloutparam', this.getexceloutparam) } shouldComponentUpdate (nextProps, nextState) { @@ -140,6 +141,7 @@ } MKEmitter.removeListener('syncRefreshComponentId', this.reload) MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) } reload = (syncId) => { @@ -165,6 +167,33 @@ } } + /** + * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� + */ + getexceloutparam = (menuId, btnId) => { + const { mainSearch } = this.props + const { arr_field, config, search } = this.state + + if (config.uuid !== menuId) return + + let searches = search ? fromJS(search).toJS() : [] + if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key.toLowerCase()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + + MKEmitter.emit('execExcelout', config.uuid, btnId, { + arr_field: arr_field, + orderBy: config.setting.order || '', + search: searches, + menuName: config.name + }) + } + async loadData () { const { mainSearch, menuType } = this.props const { config, arr_field, pageIndex, search, BID } = this.state diff --git a/src/tabviews/custom/components/card/table-card/index.jsx b/src/tabviews/custom/components/card/table-card/index.jsx index 4fb7168..5552c95 100644 --- a/src/tabviews/custom/components/card/table-card/index.jsx +++ b/src/tabviews/custom/components/card/table-card/index.jsx @@ -104,6 +104,7 @@ componentDidMount () { MKEmitter.addListener('syncRefreshComponentId', this.reload) MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.addListener('getexceloutparam', this.getexceloutparam) } shouldComponentUpdate (nextProps, nextState) { @@ -116,6 +117,7 @@ } MKEmitter.removeListener('syncRefreshComponentId', this.reload) MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) } /** @@ -170,6 +172,33 @@ }) } + /** + * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� + */ + getexceloutparam = (menuId, btnId) => { + const { mainSearch } = this.props + const { arr_field, config, search } = this.state + + if (config.uuid !== menuId) return + + let searches = search ? fromJS(search).toJS() : [] + if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key.toLowerCase()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + + MKEmitter.emit('execExcelout', config.uuid, btnId, { + arr_field: arr_field, + orderBy: config.setting.order || '', + search: searches, + menuName: config.name + }) + } + async loadData () { const { mainSearch, menuType } = this.props const { config, arr_field, pageIndex, search, BID } = this.state @@ -183,7 +212,7 @@ return } - let searches = fromJS(search).toJS() + let searches = search ? fromJS(search).toJS() : [] if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key) mainSearch.forEach(item => { diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx index b200838..7c07cc0 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx @@ -233,6 +233,7 @@ componentDidMount () { MKEmitter.addListener('resetSelectLine', this.resetParentParam) + MKEmitter.addListener('getexceloutparam', this.getexceloutparam) } /** @@ -243,6 +244,7 @@ return } MKEmitter.removeListener('resetSelectLine', this.resetParentParam) + MKEmitter.removeListener('getexceloutparam', this.getexceloutparam) } resetParentParam = (MenuID, id) => { @@ -254,6 +256,33 @@ this.loadData() }) } + } + + /** + * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� + */ + getexceloutparam = (menuId, btnId) => { + const { mainSearch } = this.props + const { arr_field, config, search } = this.state + + if (config.uuid !== menuId) return + + let searches = search ? fromJS(search).toJS() : [] + if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key.toLowerCase()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + + MKEmitter.emit('execExcelout', config.uuid, btnId, { + arr_field: arr_field, + orderBy: config.setting.order || '', + search: searches, + menuName: config.name + }) } /** @@ -272,7 +301,7 @@ return } - let searches = fromJS(search).toJS() + let searches = search ? fromJS(search).toJS() : [] if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 let keys = searches.map(item => item.key) mainSearch.forEach(item => { diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.scss b/src/tabviews/custom/components/chart/antv-bar-line/index.scss index 24f4113..cd9f4ce 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.scss +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.scss @@ -11,9 +11,12 @@ position: relative; .chart-action { position: absolute; - top: 2px; + top: 0px; right: 5px; z-index: 1; + .ant-btn { + float: right; + } } } diff --git a/src/tabviews/custom/components/table/normal-table/index.jsx b/src/tabviews/custom/components/table/normal-table/index.jsx index 714259b..24367ee 100644 --- a/src/tabviews/custom/components/table/normal-table/index.jsx +++ b/src/tabviews/custom/components/table/normal-table/index.jsx @@ -411,14 +411,25 @@ * @description 瀵煎嚭Excel鏃讹紝鑾峰彇椤甸潰鎼滅储鎺掑簭绛夊弬鏁� */ getexceloutparam = (menuId, btnId) => { + const { mainSearch } = this.props const { arr_field, config, orderBy, search, setting} = this.state if (config.uuid !== menuId) return + let searches = search ? fromJS(search).toJS() : [] + if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢 + let keys = searches.map(item => item.key.toLowerCase()) + mainSearch.forEach(item => { + if (!keys.includes(item.key.toLowerCase())) { + searches.push(item) + } + }) + } + MKEmitter.emit('execExcelout', config.uuid, btnId, { arr_field: arr_field, orderBy: orderBy || setting.order, - search: search, + search: searches, menuName: config.name }) } diff --git a/src/templates/menuconfig/editfirstmenu/index.jsx b/src/templates/menuconfig/editfirstmenu/index.jsx index 1c5c46d..f1f6290 100644 --- a/src/templates/menuconfig/editfirstmenu/index.jsx +++ b/src/templates/menuconfig/editfirstmenu/index.jsx @@ -363,6 +363,7 @@ dict={dict} type="add" menu={null} + inputSubmit={this.addMemuSubmit} wrappedComponentRef={(inst) => this.addMenuFormRef = inst} /> </Modal> @@ -392,6 +393,7 @@ dict={dict} type="edit" menu={this.state.editMenu} + inputSubmit={this.editMemuSubmit} wrappedComponentRef={(inst) => this.editMenuFormRef = inst} /> </Modal> diff --git a/src/templates/menuconfig/editfirstmenu/menuform/index.jsx b/src/templates/menuconfig/editfirstmenu/menuform/index.jsx index 23993be..e263eba 100644 --- a/src/templates/menuconfig/editfirstmenu/menuform/index.jsx +++ b/src/templates/menuconfig/editfirstmenu/menuform/index.jsx @@ -6,9 +6,10 @@ class MainSearch extends Component { static propTpyes = { - menu: PropTypes.any, // 鎼滅储鏉′欢鍒楄〃 - dict: PropTypes.object, // 瀛楀吀椤� - type: PropTypes.string // 瀛楀吀椤� + menu: PropTypes.any, // 鑿滃崟淇℃伅锛屾柊寤烘椂涓簄ull + dict: PropTypes.object, // 瀛楀吀椤� + type: PropTypes.string, // 鎿嶄綔绫诲瀷 + inputSubmit: PropTypes.func } state = { @@ -115,7 +116,7 @@ message: this.props.dict['form.required.input'] + item.label + '!' } ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)} + })(<Input placeholder="" autoFocus={item.key.toLowerCase() === 'menuname'} autoComplete="off" disabled={item.readonly} />)} </Form.Item> </Col> ) @@ -136,7 +137,7 @@ showSearch filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} onChange={(value) => {this.openTypeChange(item.key, value)}} - getPopupContainer={() => document.getElementById('form-box')} + getPopupContainer={() => document.getElementById('first-menu-form-box')} > {item.options.map(option => <Select.Option key={option.id} value={option.id}>{option.text}</Select.Option> @@ -209,6 +210,13 @@ }) } + onEnterSubmit = (e) => { + // 琛ㄥ崟鍥炶溅鎻愪氦 + if (e.key !== 'Enter') return + + this.props.inputSubmit && this.props.inputSubmit() + } + render() { const formItemLayout = { labelCol: { @@ -221,7 +229,7 @@ } } return ( - <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box"> + <Form {...formItemLayout} className="ant-advanced-search-form" id="first-menu-form-box" onKeyDown={this.onEnterSubmit}> <Row gutter={24}>{this.getFields()}</Row> </Form> ) diff --git a/src/templates/menuconfig/editsecmenu/index.jsx b/src/templates/menuconfig/editsecmenu/index.jsx index fcafd48..d520e69 100644 --- a/src/templates/menuconfig/editsecmenu/index.jsx +++ b/src/templates/menuconfig/editsecmenu/index.jsx @@ -444,6 +444,7 @@ {this.state.formlist ? <MenuForm dict={dict} + inputSubmit={this.memuHandleSubmit} formlist={this.state.formlist} wrappedComponentRef={(inst) => this.menuFormRef = inst} /> : null} diff --git a/src/templates/menuconfig/editthdmenu/index.jsx b/src/templates/menuconfig/editthdmenu/index.jsx index 11d4b2b..9c74867 100644 --- a/src/templates/menuconfig/editthdmenu/index.jsx +++ b/src/templates/menuconfig/editthdmenu/index.jsx @@ -685,7 +685,6 @@ }) } - UNSAFE_componentWillMount () { this.getUsedTemplate() @@ -883,6 +882,7 @@ <MenuForm menu={this.state.sysMenu} dict={dict} + inputSubmit={this.memuSubmit} wrappedComponentRef={(inst) => this.menuFormRef = inst} /> </Modal> diff --git a/src/templates/menuconfig/editthdmenu/menuform/index.jsx b/src/templates/menuconfig/editthdmenu/menuform/index.jsx index e7b5f02..4448a11 100644 --- a/src/templates/menuconfig/editthdmenu/menuform/index.jsx +++ b/src/templates/menuconfig/editthdmenu/menuform/index.jsx @@ -6,9 +6,10 @@ class MainSearch extends Component { static propTpyes = { - menu: PropTypes.object, // 鑿滃崟淇℃伅 - dict: PropTypes.object, // 瀛楀吀椤� - supMenuList: PropTypes.any // 琛ㄦ牸鏁版嵁 + menu: PropTypes.object, // 鑿滃崟淇℃伅 + dict: PropTypes.object, // 瀛楀吀椤� + supMenuList: PropTypes.any, // 琛ㄦ牸鏁版嵁 + inputSubmit: PropTypes.func // 鍥炶溅鎻愪氦 } state = { @@ -48,6 +49,13 @@ }) } + onEnterSubmit = (e) => { + // 琛ㄥ崟鍥炶溅鎻愪氦 + if (e.key !== 'Enter') return + + this.props.inputSubmit && this.props.inputSubmit() + } + render() { const { getFieldDecorator } = this.props.form const { menu } = this.state @@ -63,7 +71,7 @@ } return ( - <Form {...formItemLayout} style={{paddingRight: '20px'}}> + <Form {...formItemLayout} style={{paddingRight: '20px'}} onKeyDown={this.onEnterSubmit}> <Row gutter={24}> <Col span={24}> <Form.Item label={'涓�绾ц彍鍗�'}> @@ -120,7 +128,7 @@ message: this.props.dict['form.required.input'] + '鑿滃崟鍚嶇О!' } ] - })(<Input placeholder="" autoComplete="off" />)} + })(<Input placeholder="" autoFocus autoComplete="off" />)} </Form.Item> </Col> <Col span={24}> diff --git a/src/templates/menuconfig/menuform/index.jsx b/src/templates/menuconfig/menuform/index.jsx index 5c6727a..c2de7f5 100644 --- a/src/templates/menuconfig/menuform/index.jsx +++ b/src/templates/menuconfig/menuform/index.jsx @@ -5,8 +5,9 @@ class MainSearch extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� - formlist: PropTypes.array + dict: PropTypes.object, // 瀛楀吀椤� + formlist: PropTypes.array, + inputSubmit: PropTypes.func } openTypeChange = (key, value) => { @@ -46,7 +47,7 @@ message: this.props.dict['form.required.input'] + item.label + '!' } ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} />)} + })(<Input placeholder="" autoFocus={item.key.toLowerCase() === 'menuname'} autoComplete="off" disabled={item.readonly} />)} </Form.Item> </Col> ) @@ -97,6 +98,13 @@ }) } + onEnterSubmit = (e) => { + // 琛ㄥ崟鍥炶溅鎻愪氦 + if (e.key !== 'Enter') return + + this.props.inputSubmit && this.props.inputSubmit() + } + render() { const formItemLayout = { labelCol: { @@ -109,7 +117,7 @@ } } return ( - <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box"> + <Form {...formItemLayout} className="ant-advanced-search-form" id="form-box" onKeyDown={this.onEnterSubmit}> <Row gutter={24}>{this.getFields()}</Row> </Form> ) diff --git a/src/utils/utils-datamanage.js b/src/utils/utils-datamanage.js index d2f75c6..a30cbeb 100644 --- a/src/utils/utils-datamanage.js +++ b/src/utils/utils-datamanage.js @@ -135,7 +135,7 @@ value: orderBy }, { reg: new RegExp('@pageSize@', 'ig'), - value: pageSize + value: setting.laypage ? pageSize : '9999' }, { reg: new RegExp('@pageIndex@', 'ig'), value: pageIndex diff --git a/src/views/menudesign/index.jsx b/src/views/menudesign/index.jsx index 908789a..fb9e3ae 100644 --- a/src/views/menudesign/index.jsx +++ b/src/views/menudesign/index.jsx @@ -33,11 +33,14 @@ const PasteController = asyncComponent(() => import('@/menu/pastecontroller')) const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) +const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller')) +const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton')) const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller')) const PopviewController = asyncComponent(() => import('@/menu/popview')) const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) sessionStorage.setItem('isEditState', 'true') +sessionStorage.setItem('editMenuType', 'menu') // 缂栬緫鑿滃崟绫诲瀷 document.body.className = '' class MenuDesign extends Component { @@ -129,11 +132,14 @@ btn.config = _config btn.component = card + sessionStorage.setItem('editMenuType', 'popview') // 缂栬緫寮圭獥鏍囩 + this.setState({popBtn: btn, visible: true}) } handleBack = () => { this.setState({popBtn: null, delButtons: []}, () => { + sessionStorage.setItem('editMenuType', 'menu') this.setState({visible: false}) }) } @@ -698,6 +704,7 @@ <div> {config && config.MenuName} </div> } bordered={false} extra={ <div> + <StyleCombControlButton menu={config} /> <PasteController type="menu" Tab={null} insert={this.insert} /> {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> @@ -711,6 +718,7 @@ </DndProvider> : null} {popBtn && visible ? <PopviewController btn={popBtn} handleBack={this.handleBack}/> : null} <StyleController /> + <StyleCombController /> <ModalController /> </div> </ConfigProvider> diff --git a/src/views/menudesign/index.scss b/src/views/menudesign/index.scss index c7cd961..21de614 100644 --- a/src/views/menudesign/index.scss +++ b/src/views/menudesign/index.scss @@ -8,15 +8,7 @@ position: relative; background: #ffffff; padding: 50px 0px 0px 0px; - - // .menu-setting::before { - // content: ' '; - // position: absolute; - // width: 300px; - // height: 100%; - // left: 0; - // top: 0; - // } + .menu-setting { position: fixed; left: 0; @@ -27,6 +19,7 @@ background: #ffffff; box-shadow: 0px 2px 5px #bcbcbc; overflow-y: auto; + overflow-x: hidden; > .ant-collapse { background-color: #ffffff; @@ -116,6 +109,7 @@ > .ant-card { >.ant-card-head { margin-bottom: 0px; + position: relative; .ant-card-head-title { color: #1890ff; padding: 5px 0; -- Gitblit v1.8.0