| | |
| | | |
| | | const cardTypeOptions = { |
| | | sequence: ['eleType', 'width'], |
| | | text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue'], |
| | | number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'], |
| | | text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue', 'bgImage', 'fixStyle'], |
| | | number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle'], |
| | | picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'], |
| | | video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'], |
| | | icon: ['eleType', 'icon', 'datatype', 'width'], |
| | |
| | | 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'], |
| | | } |
| | | |
| | | class MainSearch extends Component { |
| | |
| | | datatype: '', |
| | | showType: '', |
| | | showInfo: 'false', |
| | | fixStyle: '', |
| | | link: '' |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { card, config } = this.props |
| | | let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo) |
| | | let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo, card.fixStyle || '') |
| | | |
| | | this.setState({ |
| | | link: card.link, |
| | |
| | | datatype: card.datatype, |
| | | showType: card.showType || 'line', |
| | | showInfo: card.showInfo || 'false', |
| | | fixStyle: card.fixStyle || '', |
| | | formlist: this.props.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.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: col.label |
| | | text: label |
| | | }) |
| | | } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') { |
| | | item.options.push({ |
| | | value: col.field, |
| | | text: col.label |
| | | text: label |
| | | }) |
| | | } |
| | | }) |
| | |
| | | }) |
| | | } |
| | | |
| | | getOptions = (eleType, datatype, link, showType, showInfo) => { |
| | | getOptions = (eleType, datatype, link, showType, showInfo, fixStyle) => { |
| | | let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表 |
| | | |
| | | if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) { |
| | | if (datatype === 'dynamic') { |
| | | _options.push('field') |
| | | if (eleType === 'number') { |
| | | _options.push('decimal') |
| | | } |
| | | } else if (eleType === 'picture' || eleType === 'video') { |
| | | _options.push('url') |
| | | } else { |
| | |
| | | _options.push('tooltip') |
| | | } |
| | | } |
| | | if (_options.includes('fixStyle') && fixStyle === 'alone') { |
| | | _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight') |
| | | } |
| | | |
| | | return _options |
| | | } |
| | |
| | | */ |
| | | selectChange = (key, value, option) => { |
| | | const { card, config } = this.props |
| | | const { datatype, eleType, showType, showInfo } = this.state |
| | | const { datatype, eleType, showType, showInfo, fixStyle } = this.state |
| | | |
| | | if (key === 'eleType') { |
| | | let _options = this.getOptions(value, datatype, '', showType, showInfo) |
| | | let _options = this.getOptions(value, datatype, '', showType, showInfo, fixStyle) |
| | | |
| | | let _formlist = this.state.formlist.map(item => { |
| | | 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: col.label |
| | | text: label |
| | | }) |
| | | } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') { |
| | | item.options.push({ |
| | | value: col.field, |
| | | text: col.label |
| | | text: label |
| | | }) |
| | | } |
| | | }) |
| | |
| | | item.required = value !== 'qrcode' |
| | | } else if (item.key === 'showInfo') { |
| | | item.initVal = showInfo |
| | | } else if (item.key === 'fixStyle') { |
| | | item.initVal = fixStyle |
| | | } |
| | | |
| | | return item |
| | |
| | | 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(eleType, datatype, value, showType, showInfo, fixStyle) |
| | | this.setState({ |
| | | link: value, |
| | | formlist: this.state.formlist.map(item => { |
| | |
| | | } |
| | | |
| | | onChange = (e, key) => { |
| | | const { eleType, datatype, link, showType, showInfo } = this.state |
| | | const { eleType, datatype, link, showType, showInfo, fixStyle } = this.state |
| | | let value = e.target.value |
| | | |
| | | if (key === 'datatype') { |
| | | let _options = this.getOptions(eleType, value, link, showType, showInfo) |
| | | let _options = this.getOptions(eleType, value, link, showType, showInfo, fixStyle) |
| | | |
| | | this.setState({ |
| | | datatype: value, |
| | |
| | | }) |
| | | }) |
| | | } else if (key === 'link') { |
| | | let _options = this.getOptions(eleType, datatype, value, showType, showInfo) |
| | | let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle) |
| | | this.setState({ |
| | | link: value, |
| | | formlist: this.state.formlist.map(item => { |
| | |
| | | }) |
| | | }) |
| | | } else if (key === 'showInfo') { |
| | | let _options = this.getOptions(eleType, datatype, link, showType, value) |
| | | let _options = this.getOptions(eleType, datatype, link, showType, value, fixStyle) |
| | | this.setState({ |
| | | showInfo: value, |
| | | formlist: this.state.formlist.map(item => { |
| | |
| | | this.setState({ |
| | | showType: value |
| | | }, () => { |
| | | let _options = this.getOptions(eleType, datatype, link, value, showInfo) |
| | | let _options = this.getOptions(eleType, datatype, link, value, showInfo, fixStyle) |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | item.hidden = !_options.includes(item.key) |
| | | return item |
| | | }) |
| | | }) |
| | | }) |
| | | } else if (key === 'fixStyle') { |
| | | this.setState({ |
| | | fixStyle: value |
| | | }, () => { |
| | | let _options = this.getOptions(eleType, datatype, link, showType, showInfo, value) |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | item.hidden = !_options.includes(item.key) |
| | |
| | | this.state.formlist.forEach((item, index) => { |
| | | if (item.hidden || item.forbid) return |
| | | |
| | | if (item.type === 'text') { // 文本搜索 |
| | | if (item.type === 'text') { |
| | | fields.push( |
| | | <Col span={12} key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'textarea') { // 文本搜索 |
| | | } else if (item.type === 'textarea') { |
| | | fields.push( |
| | | <Col span={24} className="textarea" key={index}> |
| | | <Form.Item label={item.tooltip ? |
| | |
| | | })( |
| | | <Select |
| | | showSearch |
| | | filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} |
| | | 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')} |
| | | > |