From 8cec010d47fa9cb9c7684f4c84dd31cfe20e7527 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 18 四月 2025 16:41:43 +0800 Subject: [PATCH] 2025-04-18 --- src/menu/components/card/cardcellcomponent/elementform/index.jsx | 356 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 247 insertions(+), 109 deletions(-) diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx index dee9a31..7db2122 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, Cascader, Popover } from 'antd' +import { Form, Row, Col, Input, Select, Radio, Checkbox, Tooltip, InputNumber, Cascader, Popover, message, AutoComplete } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { formRule } from '@/utils/option.js' @@ -12,6 +12,7 @@ const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) +const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable')) const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const cardTypeOptions = { @@ -26,8 +27,9 @@ barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'], qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'], currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix', 'fixStyle'], - formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle', 'alignItems'], + formula: ['eleType', 'width', 'height', 'eval', 'formula', 'noValue'], color: ['eleType', 'datatype', 'width', 'lenWidRadio', 'noValue', 'copyable'], + tag: ['eleType', 'datatype', 'width', 'noValue', 'signs'], } class ElementEditForm extends Component { @@ -59,7 +61,7 @@ formlist: formlist.map(item => { item.hidden = !_options.includes(item.key) - if (item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') { + if ((item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') && item.type === 'select') { item.options = [] if (side === 'sub') { @@ -113,26 +115,59 @@ }) }) } - } else if (item.key === 'value' && card.eleType === 'slider') { - item.type = 'number' - item.label = '鍊�' + } else if (['tsField', 'noVField'].includes(item.key)) { + item.options = [] + + if (side === 'sub') { + config.subColumns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + item.options.push({ + value: col.field, + text: label + }) + }) + } else { + config.columns.forEach(col => { + let label = `${col.field}锛�${col.label}锛塦 + item.options.push({ + value: col.field, + text: label + }) + }) + } } else if (item.key === 'formula') { item.fields = [] - config.columns.forEach(col => { - item.fields.push(col.field) - }) - - if (config.subColumns) { - config.subColumns.forEach(col => { + if (side === 'sub') { + if (config.subColumns) { + config.subColumns.forEach(col => { + item.fields.push(col.field) + }) + } + } else { + config.columns.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 === 'value') { + item.tooltip = '' + if (card.eleType === 'slider') { + item.type = 'number' + item.label = '鍊�' + } else if (card.eleType === 'text') { + item.type = 'textarea' + item.label = '鍐呭' + item.tooltip = '鏂囨湰绫诲瀷锛屼細鏇挎崲鍐呭涓殑@username@銆丂fullName@銆丂mk_city@銆丂appname@銆丂bid@銆丂month@銆丂week@銆丂day@' + } else if (card.eleType === 'tag') { + item.type = 'textarea' + item.label = '鍐呭' + item.tooltip = '澶氫釜鍊艰浣跨敤閫楀彿锛堣嫳鏂囷級鍒嗛殧銆�' + } else { + item.type = 'text' + item.label = '鍐呭' + } } else if (item.key === 'format') { if (card.eleType === 'text') { item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value)) @@ -143,7 +178,7 @@ item.required = card.eleType !== 'qrcode' } if (item.key === 'linkurl') { - item.type = card.link === 'dynamic' ? 'select' : 'textarea' + item.type = card.link === 'dynamic' ? item.defType : 'textarea' } return item @@ -154,7 +189,7 @@ getOptions = () => { let _options = fromJS(cardTypeOptions[this.record.eleType]).toJS() // 閫夐」鍒楄〃 - if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color'].includes(this.record.eleType)) { + if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color', 'tag'].includes(this.record.eleType)) { if (this.record.datatype === 'dynamic') { _options.push('field') if (this.record.eleType === 'number') { @@ -164,6 +199,17 @@ _options.push('url') } else { _options.push('value') + } + + if (this.record.eleType === 'text' && this.record.noValue === 'hide') { + if (this.record.datatype === 'static') { + _options.push('noVField') + if (this.record.noVField) { + _options.push('noVExtra') + } + } else { + _options.push('noVExtra') + } } if (this.record.eleType === 'picture' && this.record.noValue === 'show') { @@ -179,14 +225,14 @@ if (['text', 'picture'].includes(this.record.eleType) && this.record.link) { _options.push('linkType') if (this.record.linkType === 'linkmenu') { - _options.push('open', 'joint') + _options.push('open', 'tsField') if (this.record.link === 'static') { _options.push('linkmenu') } else { _options.push('linkurl') } } else if (this.record.linkType === 'other') { - _options.push('linkurl', 'joint', 'open') + _options.push('linkurl', 'open') } else { _options.push('linkurl') } @@ -211,8 +257,28 @@ if (this.record.tipType === 'text') { _options.push('height') } - } else if (this.record.eleType === 'formula' && this.record.eval === 'true') { - _options.push('decimal') + } else if (this.record.eleType === 'formula') { + if (this.record.eval !== 'func') { + _options.push('link', 'prefix', 'postfix', 'fixStyle', 'alignItems', 'evalchars') + } + if (this.record.eval === 'true') { + _options.push('decimal') + } + if (this.record.link && this.record.eval !== 'func') { + _options.push('linkType') + if (this.record.linkType === 'linkmenu') { + _options.push('open', 'tsField') + if (this.record.link === 'static') { + _options.push('linkmenu') + } else { + _options.push('linkurl') + } + } else if (this.record.linkType === 'other') { + _options.push('linkurl', 'open') + } else { + _options.push('linkurl') + } + } } if (_options.includes('fixStyle') && this.record.fixStyle === 'alone') { _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight') @@ -246,7 +312,7 @@ item.initVal = this.record[item.key] item.hidden = !_options.includes(item.key) - if (item.key === 'field') { + if (item.key === 'field' && item.type === 'select') { item.options = [] if (side === 'sub') { @@ -282,12 +348,18 @@ }) } } else if (item.key === 'value') { + item.tooltip = '' if (value === 'slider') { item.type = 'number' item.label = '鍊�' } else if (value === 'text') { item.type = 'textarea' item.label = '鍐呭' + item.tooltip = '鏂囨湰绫诲瀷锛屼細鏇挎崲鍐呭涓殑@username@銆丂fullName@銆丂mk_city@銆丂appname@銆丂bid@銆丂month@銆丂week@銆丂day@' + } else if (value === 'tag') { + item.type = 'textarea' + item.label = '鍐呭' + item.tooltip = '澶氫釜鍊艰浣跨敤閫楀彿锛堣嫳鏂囷級鍒嗛殧銆�' } else { item.type = 'text' item.label = '鍐呭' @@ -340,12 +412,12 @@ item.hidden = !_options.includes(item.key) if (item.key === 'linkurl') { - item.type = value === 'dynamic' ? 'select' : 'textarea' + item.type = value === 'dynamic' ? item.defType : 'textarea' } return item }) }) - } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType', 'noValue'].includes(key)) { + } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType', 'noValue', 'noVField'].includes(key)) { let _options = this.getOptions() this.setState({ @@ -374,40 +446,76 @@ this.state.formlist.forEach((item, index) => { if (item.hidden || item.forbid) return + let label = item.label + if (item.tooltip) { + if (item.toolWidth) { + label = <Tooltip placement="topLeft" overlayStyle={{maxWidth: item.toolWidth}} title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> + } else { + label = <Tooltip placement="topLeft" title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> + } + } + if (item.type === 'text') { - fields.push( - <Col span={12} key={index}> - <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.readonly ? false : !!item.required, - message: '璇疯緭鍏�' + item.label + '!' - }, - { - max: formRule.input.max, - message: formRule.input.message - } - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) + let rules = item.rules || [] + if (item.options && item.options.length > 0) { + fields.push( + <Col span={12} key={index}> + <Form.Item label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + }, + { + pattern: formRule.field.pattern, + message: formRule.field.message + }, + { + max: formRule.input.max, + message: formRule.input.message + } + ] + })( + <AutoComplete + dataSource={item.options.map((cell, i) => <AutoComplete.Option value={cell.value} key={i}> + {cell.value} + </AutoComplete.Option>)} + filterOption={(input, option) => option.props.children.indexOf(input) > -1} + > + <Input autoComplete="off" onPressEnter={this.handleSubmit} /> + </AutoComplete> + )} + </Form.Item> + </Col> + ) + } else { + fields.push( + <Col span={12} key={index}> + <Form.Item label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: item.readonly ? false : !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + }, + { + max: formRule.input.max, + message: formRule.input.message + }, + ...rules + ] + })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} + </Form.Item> + </Col> + ) + } } else if (item.type === 'textarea') { fields.push( <Col span={24} className="textarea" key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [ @@ -421,33 +529,39 @@ </Col> ) } else if (item.type === 'number') { - fields.push( - <Col span={12} key={index}> - <Form.Item help={item.help || null} 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.readonly ? false : !!item.required, - message: '璇疯緭鍏�' + item.label + '!' - }] - })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) + if (item.help) { + fields.push( + <Col span={12} key={index}> + <Form.Item help={item.help} label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal, + rules: [{ + required: item.readonly ? false : !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + }] + })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)} + </Form.Item> + </Col> + ) + } else { + fields.push( + <Col span={12} key={index}> + <Form.Item label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal, + rules: [{ + required: item.readonly ? false : !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + }] + })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)} + </Form.Item> + </Col> + ) + } } else if (item.type === 'select') { // 涓嬫媺鎼滅储 fields.push( <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [{ @@ -475,12 +589,7 @@ } else if (item.type === 'icon') { fields.push( <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [{ @@ -496,12 +605,7 @@ } else if (item.type === 'radio') { fields.push( <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal, rules: [{ @@ -520,10 +624,28 @@ </Form.Item> </Col> ) + } else if (item.type === 'checkbox') { + fields.push( + <Col span={12} key={index}> + <Form.Item label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal, + rules: [{ + required: item.required, + message: '璇烽�夋嫨' + item.label + '!' + }] + })( + <Checkbox.Group style={{whiteSpace: 'nowrap'}}> + {item.options.map(option => <Checkbox key={option.value} value={option.value}>{option.text}</Checkbox>)} + </Checkbox.Group> + )} + </Form.Item> + </Col> + ) } else if (item.type === 'color') { fields.push( <Col span={12} key={index} className="color-form"> - <Form.Item label={item.label}> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal, rules: [ @@ -546,12 +668,7 @@ fields.push( <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal, rules: [ @@ -569,12 +686,7 @@ } 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 - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal || [], rules: [ @@ -589,15 +701,28 @@ </Form.Item> </Col> ) + } else if (item.type === 'table') { + fields.push( + <Col span={24} key={index} className="textarea"> + <Form.Item label={label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: '璇疯緭鍏�' + item.label + '!' + } + ] + })( + <MKTable columns={item.columns || []} actions={item.actions}/> + )} + </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> - }> + <Form.Item label={label}> {getFieldDecorator(item.key, { initialValue: item.initVal || '', rules: [ @@ -649,6 +774,19 @@ }) } + if (values.width === 0) { + let utype = {picture: '鍥剧墖', video: '瑙嗛', slider: '杩涘害鏉�', splitline: '鍒嗗壊绾�', barcode: '鏉″舰鐮�', qrcode: '浜岀淮鐮�'} + + if (utype[values.eleType]) { + message.warning(utype[values.eleType] + '鍏冪礌瀹藉害涓嶅彲涓�0锛�') + return + } + } + + if (values.eleType === 'tag' && values.signs && values.signs.length === 0) { + values.signs = null + } + resolve(values) } else { reject(err) -- Gitblit v1.8.0