From 6ae85d25c2e5773a07fdaf3ad477fbdbb61c9165 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 02 六月 2022 16:14:43 +0800 Subject: [PATCH] 2022-06-02 --- src/mob/components/topbar/normal-navbar/options.jsx | 51 ++++---- src/menu/components/card/cardcellcomponent/formconfig.jsx | 2 src/tabviews/custom/components/card/cardcellList/index.jsx | 13 - src/menu/components/share/actioncomponent/actionform/index.jsx | 12 + src/components/normalform/modalform/mkCheckbox/index.jsx | 2 src/mob/components/topbar/normal-navbar/index.jsx | 2 src/mob/components/formdragelement/index.scss | 5 src/menu/components/card/cardcellcomponent/index.jsx | 74 ++++++----- src/menu/stylecontroller/index.jsx | 119 +++++++++++-------- src/tabviews/custom/components/card/cardcellList/index.scss | 3 src/menu/components/share/actioncomponent/formconfig.jsx | 15 ++ src/menu/components/card/cardcellcomponent/index.scss | 28 ++++ 12 files changed, 201 insertions(+), 125 deletions(-) diff --git a/src/components/normalform/modalform/mkCheckbox/index.jsx b/src/components/normalform/modalform/mkCheckbox/index.jsx index e8d95c8..17f37d5 100644 --- a/src/components/normalform/modalform/mkCheckbox/index.jsx +++ b/src/components/normalform/modalform/mkCheckbox/index.jsx @@ -34,7 +34,7 @@ const { value, options } = this.state return ( - <Checkbox.Group defaultValue={value} onChange={this.onChange}> + <Checkbox.Group style={{whiteSpace: 'nowrap'}} defaultValue={value} onChange={this.onChange}> {options.map(option => <Checkbox key={option.value} title={option.label} disabled={option.disabled} value={option.value}>{option.label}</Checkbox>)} </Checkbox.Group> ) diff --git a/src/menu/components/card/cardcellcomponent/formconfig.jsx b/src/menu/components/card/cardcellcomponent/formconfig.jsx index a97d103..afac3e0 100644 --- a/src/menu/components/card/cardcellcomponent/formconfig.jsx +++ b/src/menu/components/card/cardcellcomponent/formconfig.jsx @@ -594,7 +594,7 @@ key: 'copyable', label: '鍙鍒�', initVal: card.copyable || 'false', - tooltip: '鍏冪礌鏄惁鍙鍒讹紝澶嶅埗鍐呭鍖呮嫭鍓嶇紑涓庡悗缂�銆�', + tooltip: '鍏冪礌鏄惁鍙鍒讹紝澶嶅埗鍐呭涓嶅寘鎷墠缂�涓庡悗缂�銆�', required: false, options: [ { value: 'true', text: '鏄�' }, diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx index 675fb0b..f5275c9 100644 --- a/src/menu/components/card/cardcellcomponent/index.jsx +++ b/src/menu/components/card/cardcellcomponent/index.jsx @@ -157,6 +157,8 @@ } } else if (element.eleType === 'picture') { options = ['border', 'margin'] + } else if (element.eleType === 'text') { + options[0] = 'font2' } else if (element.eleType === 'slider') { options = ['padding', 'margin'] } else if (element.eleType === 'splitline') { @@ -633,6 +635,44 @@ }) } + getVerify = (card) => { + const { cards } = this.props + const { dict } = this.state + + if (!card) return null + + if (['pop', 'prompt', 'exec'].includes(card.OpenType)) { + return <VerifyCard + card={card} + dict={dict} + config={cards} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'excelIn') { + return <VerifyExcelIn + card={card} + dict={dict} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'excelOut') { + return <VerifyExcelOut + card={card} + dict={dict} + config={cards} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } else if (card.OpenType === 'funcbutton' && card.funcType === 'print') { + return <VerifyPrint + card={card} + dict={dict} + columns={cards.columns} + wrappedComponentRef={(inst) => this.verifyRef = inst} + /> + } + } + render() { const { cards, cardCell } = this.props const { elements, visible, actvisible, profVisible, card, dict, record } = this.state @@ -719,39 +759,7 @@ }} destroyOnClose > - {card && !card.execMode && card.OpenType !== 'excelIn' && card.OpenType !== 'excelOut' ? - <VerifyCard - card={card} - dict={dict} - config={cards} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.execMode ? - <VerifyPrint - card={card} - dict={dict} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.OpenType === 'excelIn' ? - <VerifyExcelIn - card={card} - dict={dict} - columns={cards.columns} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } - {card && card.OpenType === 'excelOut' ? - <VerifyExcelOut - card={card} - dict={dict} - config={cards} - wrappedComponentRef={(inst) => this.verifyRef = inst} - /> : null - } + {this.getVerify(card)} </Modal> </div> </div> diff --git a/src/menu/components/card/cardcellcomponent/index.scss b/src/menu/components/card/cardcellcomponent/index.scss index df43e0a..d7a9616 100644 --- a/src/menu/components/card/cardcellcomponent/index.scss +++ b/src/menu/components/card/cardcellcomponent/index.scss @@ -30,3 +30,31 @@ box-shadow: 0px 0px 2px #1890ff; } } +.model-table-action-verify-modal { + .ant-modal { + top: 50px; + padding-bottom: 5px; + .ant-modal-body { + max-height: calc(100vh - 190px); + min-height: calc(100vh - 300px); + overflow-y: auto; + .ant-empty { + margin: 5vh 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); + } + } +} \ No newline at end of file diff --git a/src/menu/components/share/actioncomponent/actionform/index.jsx b/src/menu/components/share/actioncomponent/actionform/index.jsx index 6f0cfbc..4d95048 100644 --- a/src/menu/components/share/actioncomponent/actionform/index.jsx +++ b/src/menu/components/share/actioncomponent/actionform/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader } from 'antd' +import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader, Checkbox } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { formRule } from '@/utils/option.js' @@ -352,6 +352,8 @@ shows.push('reload') } else if (_funcType === 'megvii') { shows.push('subFunc', 'progress') + } else if (_funcType === 'pay') { + shows.push('payType') } } @@ -701,6 +703,14 @@ content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> {item.options.map(option => <Radio key={option.value} value={option.value}>{option.text}</Radio>)} </Radio.Group> + } else if (item.type === 'checkbox') { + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Checkbox.Group> + {item.options.map(option => <Checkbox key={option.value} value={option.value}>{option.text}</Checkbox>)} + </Checkbox.Group> } else if (item.type === 'cascader') { initVal = item.initVal || [] rules = [ diff --git a/src/menu/components/share/actioncomponent/formconfig.jsx b/src/menu/components/share/actioncomponent/formconfig.jsx index e41738f..8bf6e90 100644 --- a/src/menu/components/share/actioncomponent/formconfig.jsx +++ b/src/menu/components/share/actioncomponent/formconfig.jsx @@ -107,6 +107,7 @@ opentypes = opentypes.filter(item => ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton'].includes(item.value)) funTypes = [ { value: 'scan', text: '鎵爜' }, + { value: 'pay', text: '鏀粯' }, { value: 'logout', text: '閫�鍑�' }, { value: 'mkBinding', text: '寮�閫氭壂鐮佺櫥褰�' }, { value: 'mkUnBinding', text: '鐢ㄦ埛瑙g粦' }, @@ -237,6 +238,20 @@ required: true, }, { + type: 'checkbox', + key: 'payType', + label: '鏀粯鏂瑰紡', + initVal: card.payType || [], + required: true, + options: [{ + value: 'wxpay', + text: '寰俊' + }, { + value: 'alipay', + text: '鏀粯瀹�' + }] + }, + { type: 'radio', key: 'procMode', label: '鍙傛暟澶勭悊', diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 7ae3ffc..1cd4572 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -29,6 +29,7 @@ ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, + EnterOutlined, } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' @@ -49,6 +50,7 @@ state = { card: null, + fonts: null, comIds: [], backgroundImage: '', options: [], @@ -78,9 +80,24 @@ if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) { backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '') } + let fonts = null + if (options.includes('font')) { + fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration'] + } else if (options.includes('font1')) { + fonts = ['fontSize', 'fontWeight', 'color'] + if (options[0] === 'font1') { + options[0] = 'font' + } + } else if (options.includes('font2')) { + fonts = ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'] + if (options[0] === 'font2') { + options[0] = 'font' + } + } this.setState({ visible: true, + fonts: fonts, comIds: comIds, card: fromJS(style).toJS(), options: options, @@ -185,10 +202,28 @@ } /** + * @description 棣栬缂╄繘 + */ + changeTextIndent = (val) => { + let value = parseFloat(val) + + if (isNaN(value) || value < 0 || value > 100) return + + this.updateStyle({textIndent: `${value}px`}) + } + + /** * @description 淇敼瀛椾綋绮楃粏 */ boldChange = (val) => { this.updateStyle({fontWeight: val}) + } + + /** + * @description 鑷姩鎹㈣ + */ + wordBreakChange = (val) => { + this.updateStyle({wordBreak: val}) } /** @@ -382,7 +417,7 @@ } render () { - const { card, options, backgroundImage, borposition } = this.state + const { card, options, backgroundImage, borposition, fonts } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -435,13 +470,13 @@ </Form.Item> </Col> </Panel> : null} - {options.includes('font') ? <Panel header="瀛椾綋" key="font"> - <Col span={12}> + {fonts ? <Panel header="瀛椾綋" key="font"> + {fonts.includes('fontSize') ? <Col span={12}> <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} /> </Form.Item> - </Col> - <Col span={12}> + </Col> : null} + {fonts.includes('fontWeight') ? <Col span={12}> <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}> <Option value="normal">normal</Option> @@ -459,18 +494,31 @@ <Option value="900">900</Option> </Select> </Form.Item> - </Col> - <Col span={12}> + </Col> : null} + {fonts.includes('lineHeight') ? <Col span={12}> <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮"/>}> <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> </Form.Item> - </Col> - <Col span={12}> + </Col> : null} + {fonts.includes('letterSpacing') ? <Col span={12}> <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}> <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> - </Col> - <Col span={24}> + </Col> : null} + {fonts.includes('textIndent') ? <Col span={12}> + <Form.Item colon={false} label={<AlignRightOutlined title="棣栬缂╄繘"/>}> + <InputNumber defaultValue={card.textIndent || 0} min={0} max={100} precision={0} onChange={this.changeTextIndent}/> + </Form.Item> + </Col> : null} + {fonts.includes('wordBreak') ? <Col span={12}> + <Form.Item colon={false} label={<EnterOutlined title="鑷姩鎹㈣"/>}> + <Select defaultValue={card.wordBreak || 'normal'} onChange={this.wordBreakChange}> + <Option value="normal">normal</Option> + <Option value="break-all">break-all</Option> + </Select> + </Form.Item> + </Col> : null} + {fonts.includes('color') ? <Col span={24}> <Form.Item colon={false} label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} @@ -478,8 +526,8 @@ > <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} /> </Form.Item> - </Col> - <Col span={24}> + </Col> : null} + {fonts.includes('fontStyle') ? <Col span={24}> <Form.Item colon={false} label={' '} @@ -491,8 +539,8 @@ <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> </Radio.Group> </Form.Item> - </Col> - <Col span={24}> + </Col> : null} + {fonts.includes('textAlign') ? <Col span={24}> <Form.Item colon={false} label={' '} @@ -504,8 +552,8 @@ <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button> </Radio.Group> </Form.Item> - </Col> - <Col span={24}> + </Col> : null} + {fonts.includes('textDecoration') ? <Col span={24}> <Form.Item colon={false} label={' '} @@ -518,42 +566,7 @@ <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button> </Radio.Group> </Form.Item> - </Col> - </Panel> : null} - {options.includes('font1') ? <Panel header="瀛椾綋" key="font1"> - <Col span={12}> - <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> - <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} /> - </Form.Item> - </Col> - <Col span={12}> - <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> - <Select defaultValue={card.fontWeight || 'normal'} 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={24}> - <Form.Item - colon={false} - label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} - labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } - > - <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} /> - </Form.Item> - </Col> + </Col> : null} </Panel> : null} {options.includes('background') || options.includes('backgroundColor') ? <Panel header="鑳屾櫙" key="background"> <Col span={24}> diff --git a/src/mob/components/formdragelement/index.scss b/src/mob/components/formdragelement/index.scss index 44ab7f8..920d95e 100644 --- a/src/mob/components/formdragelement/index.scss +++ b/src/mob/components/formdragelement/index.scss @@ -259,6 +259,11 @@ color: #000; font-weight: normal; font-size: 14px; + + * { + font-weight: inherit; + } + .ant-form-item-control-wrapper::after { content: ''; position: absolute; diff --git a/src/mob/components/topbar/normal-navbar/index.jsx b/src/mob/components/topbar/normal-navbar/index.jsx index 74d41ac..9579b7e 100644 --- a/src/mob/components/topbar/normal-navbar/index.jsx +++ b/src/mob/components/topbar/normal-navbar/index.jsx @@ -220,7 +220,7 @@ <div className="normal-topbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <NormalForm title="瀵艰埅鏍忚缃�" width={850} update={this.updateWrap} getForms={this.getWrapForms}> + <NormalForm title="瀵艰埅鏍忚缃�" width={900} update={this.updateWrap} getForms={this.getWrapForms}> <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="topbar" card={card}/> diff --git a/src/mob/components/topbar/normal-navbar/options.jsx b/src/mob/components/topbar/normal-navbar/options.jsx index 2565095..9ae983c 100644 --- a/src/mob/components/topbar/normal-navbar/options.jsx +++ b/src/mob/components/topbar/normal-navbar/options.jsx @@ -61,32 +61,6 @@ required: false }, { - type: 'radio', - field: 'menuPosition', - label: '鑿滃崟浣嶇疆', - initval: wrap.menuPosition || 'right', - tooltip: '鑷畾涔夎彍鍗曠殑浣嶇疆銆傛敞锛氳彍鍗曚綅浜庡乏渚ф椂浼氭樉绀哄ご鍍忥紝涓旇繑鍥炲姛鑳借绂佺敤銆�', - required: false, - options: [ - {value: 'left', label: '宸︿晶'}, - {value: 'right', label: '鍙充晶'}, - ], - controlFields: [ - {field: 'back', values: ['right']}, - ] - }, - { - type: 'radio', - field: 'mode', - label: '寮规鑳屾櫙', - initval: wrap.mode || 'dark', - required: false, - options: [ - {value: 'light', label: '鐧借壊'}, - {value: 'dark', label: '榛戣壊'}, - ] - }, - { type: 'checkbox', field: 'funs', label: '鎵╁睍鍔熻兘', @@ -103,7 +77,18 @@ {field: 'reload', values: ['back']}, {field: 'linkmenu', values: ['scan']}, ], - span: 24 + }, + { + type: 'radio', + field: 'mode', + label: '寮规鑳屾櫙', + initval: wrap.mode || 'dark', + tooltip: '褰撳瓨鍦ㄦ墿灞曞姛鑳芥垨鑷畾涔夎彍鍗曟椂锛屽睍绀哄搴斾俊鎭脊绐楃殑鑳屾櫙棰滆壊銆�', + required: false, + options: [ + {value: 'light', label: '鐧借壊'}, + {value: 'dark', label: '榛戣壊'}, + ] }, // { // type: 'radio', @@ -182,6 +167,18 @@ options: menulist }, { + type: 'radio', + field: 'menuPosition', + label: '鑷畾涔夎彍鍗曚綅缃�', + initval: wrap.menuPosition || 'right', + tooltip: '鑷畾涔夎彍鍗曠殑浣嶇疆銆傛敞锛氳彍鍗曚綅浜庡乏渚ф椂浼氭樉绀哄ご鍍忥紝涓旇繑鍥炲姛鑳借绂佺敤銆�', + required: false, + options: [ + {value: 'left', label: '宸︿晶'}, + {value: 'right', label: '鍙充晶'}, + ] + }, + { type: 'table', field: 'menus', label: '鑷畾涔夎彍鍗�', diff --git a/src/tabviews/custom/components/card/cardcellList/index.jsx b/src/tabviews/custom/components/card/cardcellList/index.jsx index f5545c3..1d12717 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.jsx +++ b/src/tabviews/custom/components/card/cardcellList/index.jsx @@ -336,19 +336,16 @@ } if (val !== '') { + let orival = val if (card.fixStyle === 'alone') { let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight} - if (card.copyable === 'true') { - val = <><span style={_s}>{card.prefix || ''}</span><Paragraph copyable={{ text: `${card.prefix || ''}${val}${card.postfix || ''}` }}>{val}</Paragraph><span style={_s}>{card.postfix || ''}</span></> - } else { - val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></> - } - } else if (card.copyable === 'true') { - val = `${card.prefix || ''}${val}${card.postfix || ''}` - val = <Paragraph copyable={{ text: val }}>{val}</Paragraph> + val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></> } else { val = `${card.prefix || ''}${val}${card.postfix || ''}` } + if (card.copyable === 'true') { + val = <Paragraph copyable={{ text: orival }}>{val}</Paragraph> + } } if (card.marks) { diff --git a/src/tabviews/custom/components/card/cardcellList/index.scss b/src/tabviews/custom/components/card/cardcellList/index.scss index caa1265..8aea31b 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.scss +++ b/src/tabviews/custom/components/card/cardcellList/index.scss @@ -28,6 +28,9 @@ border-radius: 50%; overflow: visible; } + span { + text-indent: 0px; + } } .ant-mk-text:not(.line1):not(.line) { word-break: break-word; -- Gitblit v1.8.0