From a9b02f6862522b54d0824152017bf2acfec2af7b Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 21 三月 2024 10:29:50 +0800 Subject: [PATCH] 2024-03-21 --- src/menu/components/card/cardcellcomponent/elementform/index.jsx | 453 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 301 insertions(+), 152 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx index 1aaec05..dee9a31 100644 --- a/src/menu/components/card/cardcellcomponent/elementform/index.jsx +++ b/src/menu/components/card/cardcellcomponent/elementform/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 } from 'antd' +import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader, Popover } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { formRule } from '@/utils/option.js' @@ -10,27 +10,28 @@ const { TextArea } = Input const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) +const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const cardTypeOptions = { - sequence: ['eleType', 'width'], - text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue'], - number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'noValue'], + sequence: ['eleType', 'width', 'prefix', 'postfix'], + text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'anchors', 'noValue', 'bgImage', 'fixStyle', 'copyable', 'alignItems', 'sortField'], + number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle', 'alignItems'], picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'], - video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'], - icon: ['eleType', 'icon', 'datatype', 'width'], + video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'startTime', 'noValue', 'posterType'], + icon: ['eleType', 'datatype', 'tipType', 'width', 'tooltip'], slider: ['eleType', 'datatype', 'width', 'color', 'maxValue', 'showInfo', 'showType', 'strokeWidth', 'strokeLinecap', 'trailColor'], splitline: ['eleType', 'color', 'width', 'borderWidth'], barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'], qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'], - currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix'], - formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula'], + currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix', 'fixStyle'], + formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle', 'alignItems'], + color: ['eleType', 'datatype', 'width', 'lenWidRadio', 'noValue', 'copyable'], } -class MainSearch extends Component { +class ElementEditForm extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� config: PropTypes.object, // 缁勪欢淇℃伅 formlist: PropTypes.any, // 琛ㄥ崟淇℃伅 card: PropTypes.any, // 鎸夐挳淇℃伅 @@ -38,49 +39,100 @@ } state = { - formlist: null, // 琛ㄥ崟淇℃伅 - eleType: '', - datatype: '', - showType: '', - showInfo: 'false', - link: '' + formlist: null // 琛ㄥ崟淇℃伅 } + record = null + UNSAFE_componentWillMount () { - const { card, config } = this.props - let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo) + const { card, config, side, formlist } = this.props + this.record = {} + + formlist.forEach(item => { + this.record[item.key] = item.initVal + }) + + let _options = this.getOptions() + this.setState({ - link: card.link, - eleType: card.eleType, - datatype: card.datatype, - showType: card.showType || 'line', - showInfo: card.showInfo || 'false', - formlist: this.props.formlist.map(item => { + formlist: formlist.map(item => { item.hidden = !_options.includes(item.key) - if (item.key === 'field' || item.key === 'linkurl') { + if (item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') { item.options = [] + + if (side === 'sub') { + config.subColumns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + if (/^(Int|Decimal)/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) { + item.options.push({ + value: col.field, + text: label + }) + } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') { + item.options.push({ + value: col.field, + text: label + }) + } + }) + } else { + config.columns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + if (/^(Int|Decimal)/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) { + item.options.push({ + value: col.field, + text: label + }) + } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') { + item.options.push({ + value: col.field, + text: label + }) + } + }) + } + } else if (item.key === 'sortField' && !item.forbid) { + item.options = [] + config.columns.forEach(col => { - let label = col.label - if (label !== col.field) { - label = col.field + ' ' + col.label - } - if (/^(Int|Decimal)/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) { - item.options.push({ - value: col.field, - text: label - }) - } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') { - item.options.push({ - value: col.field, - text: label - }) - } + let label = `${col.field}锛�${col.label}锛塦 + item.options.push({ + value: col.field, + text: label + }) }) + + if (config.subColumns) { + config.subColumns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + item.options.push({ + value: col.field, + text: label + }) + }) + } } else if (item.key === 'value' && card.eleType === 'slider') { item.type = 'number' item.label = '鍊�' + } else if (item.key === 'formula') { + item.fields = [] + + config.columns.forEach(col => { + item.fields.push(col.field) + }) + + if (config.subColumns) { + config.subColumns.forEach(col => { + item.fields.push(col.field) + }) + } + + item.fields = item.fields.join(', ') + } else if (item.key === 'value' && card.eleType === 'text') { + item.type = 'textarea' + item.label = '鍐呭' } else if (item.key === 'format') { if (card.eleType === 'text') { item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value)) @@ -99,41 +151,71 @@ }) } - getOptions = (eleType, datatype, link, showType, showInfo) => { - let _options = fromJS(cardTypeOptions[eleType]).toJS() // 閫夐」鍒楄〃 + getOptions = () => { + let _options = fromJS(cardTypeOptions[this.record.eleType]).toJS() // 閫夐」鍒楄〃 - if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) { - if (datatype === 'dynamic') { + if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color'].includes(this.record.eleType)) { + if (this.record.datatype === 'dynamic') { _options.push('field') - if (eleType === 'number') { - _options.push('decimal') + if (this.record.eleType === 'number') { + _options.push('decimal', 'format') } - } else if (eleType === 'picture' || eleType === 'video') { + } else if (this.record.eleType === 'picture' || this.record.eleType === 'video') { _options.push('url') } else { _options.push('value') } + + if (this.record.eleType === 'picture' && this.record.noValue === 'show') { + _options.push('lostTip') + } else if (this.record.eleType === 'video' && this.record.posterType) { + if (this.record.posterType === 'dynamic') { + _options.push('posterField') + } else { + _options.push('posterUrl') + } + } - if (['text', 'picture'].includes(eleType) && link) { - // if (link === 'dynamic' || link === 'static') { - _options.push('linkurl', 'joint', 'linkType') - // } - } else if (eleType === 'picture' && !link) { + if (['text', 'picture'].includes(this.record.eleType) && this.record.link) { + _options.push('linkType') + if (this.record.linkType === 'linkmenu') { + _options.push('open', 'joint') + if (this.record.link === 'static') { + _options.push('linkmenu') + } else { + _options.push('linkurl') + } + } else if (this.record.linkType === 'other') { + _options.push('linkurl', 'joint', 'open') + } else { + _options.push('linkurl') + } + } else if (this.record.eleType === 'picture' && !this.record.link) { _options.push('scale') - } else if (eleType === 'slider') { - if (showInfo === 'true') { + } else if (this.record.eleType === 'slider') { + if (this.record.showInfo === 'true') { _options.push('infoColor') } - if (showType !== 'line') { + if (this.record.showType !== 'line') { _options.push('outlineWidth', 'textAlign') } } - } else if (eleType === 'icon') { - if (datatype === 'dynamic') { - _options.push('field') + } else if (this.record.eleType === 'icon') { + if (this.record.datatype === 'dynamic') { + _options.push('field', 'noValue') + } else if (this.record.tipType === 'text') { + _options.push('value') } else { - _options.push('tooltip') + _options.push('icon') } + if (this.record.tipType === 'text') { + _options.push('height') + } + } else if (this.record.eleType === 'formula' && this.record.eval === 'true') { + _options.push('decimal') + } + if (_options.includes('fixStyle') && this.record.fixStyle === 'alone') { + _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight') } return _options @@ -146,39 +228,66 @@ * 3銆佸垏鎹㈡爣绛剧被鍨嬶紝閲嶇疆鍙�夋爣绛� */ selectChange = (key, value, option) => { - const { card, config } = this.props - const { datatype, eleType, showType, showInfo } = this.state + const { config, side } = this.props + + this.record[key] = value if (key === 'eleType') { - let _options = this.getOptions(value, datatype, '', showType, showInfo) + this.record.link = '' + let _options = this.getOptions() + + if (value === 'splitline') { + this.record.color = '#EBE9E9' + } else if (value === 'formula') { + this.record.decimal = '' + } let _formlist = this.state.formlist.map(item => { + item.initVal = this.record[item.key] item.hidden = !_options.includes(item.key) if (item.key === 'field') { item.options = [] - config.columns.forEach(col => { - let label = col.label - if (label !== col.field) { - label = col.field + ' ' + col.label - } - if (/^(Int|Decimal)/ig.test(col.datatype) && (value === 'number' || value === 'slider')) { - item.options.push({ - value: col.field, - text: label - }) - } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') { - item.options.push({ - value: col.field, - text: label - }) - } - }) + if (side === 'sub') { + config.subColumns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + if (/^(Int|Decimal)/ig.test(col.datatype) && (value === 'number' || value === 'slider')) { + item.options.push({ + value: col.field, + text: label + }) + } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') { + item.options.push({ + value: col.field, + text: label + }) + } + }) + } else { + config.columns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + + if (/^(Int|Decimal)/ig.test(col.datatype) && (value === 'number' || value === 'slider')) { + item.options.push({ + value: col.field, + text: label + }) + } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') { + item.options.push({ + value: col.field, + text: label + }) + } + }) + } } else if (item.key === 'value') { if (value === 'slider') { item.type = 'number' item.label = '鍊�' + } else if (value === 'text') { + item.type = 'textarea' + item.label = '鍐呭' } else { item.type = 'text' item.label = '鍐呭' @@ -191,27 +300,29 @@ } } else if (item.key === 'url') { item.required = value !== 'qrcode' - } else if (item.key === 'showInfo') { - item.initVal = showInfo } return item }) + let _field = '' + if (value === 'formula') { + _field = this.props.form.getFieldValue('field') || '' + } + this.setState({ - link: '', - eleType: value, - showType: card.showType || 'line', formlist: _formlist }, () => { - if (value === 'slider') { + if (value === 'splitline') { + this.props.form.setFieldsValue({width: 24, color: '#EBE9E9'}) + } else if (value === 'slider') { this.props.form.setFieldsValue({width: 24, color: '#1890ff'}) - } else if (value === 'splitline') { - this.props.form.setFieldsValue({width: 24, color: '#e8e8e8'}) } else if (value === 'qrcode') { this.props.form.setFieldsValue({color: '#000000'}) } else if (value === 'text' || value === 'number') { this.props.form.setFieldsValue({format: ''}) + } else if (value === 'formula' && _field) { + this.props.form.setFieldsValue({formula: '@' + _field + '@'}) } if (value === 'text' || value === 'picture') { this.props.form.setFieldsValue({link: ''}) @@ -222,66 +333,27 @@ this.props.form.setFieldsValue({value: option.props.title}) } } else if (key === 'link') { - let _options = this.getOptions(eleType, datatype, value, showType, showInfo) + let _options = this.getOptions() this.setState({ - link: value, formlist: this.state.formlist.map(item => { + item.initVal = this.record[item.key] item.hidden = !_options.includes(item.key) + if (item.key === 'linkurl') { item.type = value === 'dynamic' ? 'select' : 'textarea' } return item }) }) - } - } - - onChange = (e, key) => { - const { eleType, datatype, link, showType, showInfo } = this.state - let value = e.target.value - - if (key === 'datatype') { - let _options = this.getOptions(eleType, value, link, showType, showInfo) + } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType', 'noValue'].includes(key)) { + let _options = this.getOptions() this.setState({ - datatype: value, formlist: this.state.formlist.map(item => { + item.initVal = this.record[item.key] item.hidden = !_options.includes(item.key) return item - }) - }) - } else if (key === 'link') { - let _options = this.getOptions(eleType, datatype, value, showType, showInfo) - this.setState({ - link: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - if (item.key === 'linkurl') { - item.type = value === 'dynamic' ? 'select' : 'textarea' - } - return item - }) - }) - } else if (key === 'showInfo') { - let _options = this.getOptions(eleType, datatype, link, showType, value) - this.setState({ - showInfo: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) - }) - } else if (key === 'showType') { - this.setState({ - showType: value - }, () => { - let _options = this.getOptions(eleType, datatype, link, value, showInfo) - this.setState({ - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) }) }) } @@ -316,7 +388,7 @@ rules: [ { required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' + message: '璇疯緭鍏�' + item.label + '!' }, { max: formRule.input.max, @@ -341,21 +413,17 @@ rules: [ { required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - }, - { - max: formRule.input.max, - message: formRule.input.message + message: '璇疯緭鍏�' + item.label + '!' } ] - })(<TextArea rows={2} disabled={item.readonly} placeholder={item.placeholder || ''} />)} + })(<TextArea autoSize={{minRows: 2}} disabled={item.readonly} placeholder={item.placeholder || ''} />)} </Form.Item> </Col> ) } else if (item.type === 'number') { fields.push( <Col span={12} key={index}> - <Form.Item label={item.tooltip ? + <Form.Item help={item.help || null} label={item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}> <QuestionCircleOutlined className="mk-form-tip" /> {item.label} @@ -365,7 +433,7 @@ initialValue: item.initVal, rules: [{ required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' + message: '璇疯緭鍏�' + item.label + '!' }] })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)} </Form.Item> @@ -384,18 +452,19 @@ initialValue: item.initVal || '', rules: [{ required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' + message: '璇烽�夋嫨' + item.label + '!' }] })( <Select showSearch + allowClear={item.allowClear || false} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} onChange={(value, option) => {this.selectChange(item.key, value, option)}} getPopupContainer={() => document.getElementById('card-winter')} > {item.options.map((option, index) => - <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}> - {option.text} + <Select.Option id={`${index}`} title={option.text || option.label} key={`${index}`} value={option.value}> + {option.text || option.label} </Select.Option> )} </Select> @@ -416,7 +485,7 @@ initialValue: item.initVal || '', rules: [{ required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' + message: '璇烽�夋嫨' + item.label + '!' }] })( <MkEditIcon /> @@ -437,10 +506,10 @@ initialValue: item.initVal, rules: [{ required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' + message: '璇烽�夋嫨' + item.label + '!' }] })( - <Radio.Group onChange={(e) => {this.onChange(e, item.key)}} disabled={item.readonly}> + <Radio.Group onChange={(e) => {this.selectChange(item.key, e.target.value)}} disabled={item.readonly}> {item.options.map(option => { return ( <Radio key={option.value} value={option.value}>{option.text}</Radio> @@ -460,7 +529,7 @@ rules: [ { required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' + message: '璇烽�夋嫨' + item.label + '!' } ] })( @@ -470,21 +539,80 @@ </Col> ) } else if (item.type === 'file') { + let type = this.record.eleType + if (item.key === 'posterUrl') { + type = 'picture' + } + fields.push( <Col span={12} key={index}> - <Form.Item label={item.label}> + <Form.Item label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> {getFieldDecorator(item.key, { initialValue: item.initVal, rules: [ { required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' + message: '璇烽�夋嫨' + item.label + '!' } ] })( - <SourceComponent type={this.state.eleType} /> + <SourceComponent type={type} /> )} </Form.Item> + </Col> + ) + } else if (item.type === 'cascader') { + fields.push( + <Col span={12} key={index}> + <Form.Item label={item.tooltip ? + <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: item.initVal || [], + rules: [ + { + required: !!item.required, + message: '璇烽�夋嫨' + item.label + '!' + } + ] + })( + <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/> + )} + </Form.Item> + </Col> + ) + } else if (item.type === 'codemirror') { + fields.push( + <Col span={24} key={index} className="textarea"> + <Form.Item label={ + <Tooltip placement="topLeft" overlayStyle={{width: 500, maxWidth: 500}} title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> + }> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + } + ] + })( + <CodeMirror mode="text/javascript"/> + )} + </Form.Item> + <Popover overlayClassName="formula-fields" placement="topLeft" title="" content={<div>{item.fields}</div>} trigger="click"> + <span className="formula-icon">瀛楁闆�</span> + </Popover> </Col> ) } @@ -493,12 +621,33 @@ } handleConfirm = () => { + const { config } = this.props + // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� return new Promise((resolve, reject) => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { values.uuid = this.props.card.uuid values.marks = this.props.card.marks || null + + // eslint-disable-next-line + if (values.eleType === 'formula' && values.eval === 'true' && /^[\u4E00-\u9FA50-9a-zA-Z_\s@\+\-\*\/]*$/ig.test(values.formula) && /[\+\-\*\/]/ig.test(values.formula)) { + let cols = [] + config.subColumns && config.subColumns.forEach(col => { + if (/^(Int|Decimal)/ig.test(col.datatype)) { + cols.push({reg: new RegExp('@' + col.field + '@', 'ig'), value: `(@${col.field}@)`}) + } + }) + config.columns.forEach(col => { + if (/^(Int|Decimal)/ig.test(col.datatype)) { + cols.push({reg: new RegExp('@' + col.field + '@', 'ig'), value: `(@${col.field}@)`}) + } + }) + + cols.forEach(col => { + values.formula = values.formula.replace(col.reg, col.value) + }) + } resolve(values) } else { @@ -527,4 +676,4 @@ } } -export default Form.create()(MainSearch) \ No newline at end of file +export default Form.create()(ElementEditForm) \ No newline at end of file -- Gitblit v1.8.0