From 6257816acce548a113081578140058cd99e83160 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 05 十月 2020 10:01:16 +0800
Subject: [PATCH] 2020-10-05
---
src/menu/components/card/cardcomponent/settingform/index.jsx | 438 ++++++++----------------------------------------------
1 files changed, 69 insertions(+), 369 deletions(-)
diff --git a/src/menu/components/card/cardcomponent/settingform/index.jsx b/src/menu/components/card/cardcomponent/settingform/index.jsx
index ea5a9c6..8907f5d 100644
--- a/src/menu/components/card/cardcomponent/settingform/index.jsx
+++ b/src/menu/components/card/cardcomponent/settingform/index.jsx
@@ -1,346 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { fromJS } from 'immutable'
-import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber, notification } from 'antd'
+import { Form, Row, Col, Radio, Tooltip, Icon, InputNumber } from 'antd'
-import { formRule } from '@/utils/option.js'
-import FileUpload from '@/tabviews/zshare/fileupload'
-import ColorSketch from '@/mob/colorsketch'
import './index.scss'
-const cardTypeOptions = {
- text: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
- number: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
- picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'radius', 'padding', 'url'],
- icon: ['eleType', 'icon', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'tooltip'],
- link: ['eleType', 'datatype', 'value', 'labelfield', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'prefix'],
- slider: ['eleType', 'field', 'width', 'color', 'padding', 'maxValue'],
- splitline: ['eleType', 'color', 'width', 'padding'],
-}
-
-class MainSearch extends Component {
+class SettingForm extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
- config: PropTypes.object, // 缁勪欢淇℃伅
- formlist: PropTypes.any, // 琛ㄥ崟淇℃伅
- card: PropTypes.any, // 鎸夐挳淇℃伅
- inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢
- }
-
- state = {
- formlist: null, // 琛ㄥ崟淇℃伅
- eleType: '',
- datatype: ''
- }
-
-
- UNSAFE_componentWillMount () {
- const { card, config } = this.props
-
- let _options = this.getOptions(card.eleType, card.datatype)
-
- this.setState({
- eleType: card.eleType,
- datatype: card.datatype,
- formlist: this.props.formlist.map(item => {
- item.hidden = !_options.includes(item.key)
-
- if (item.key === 'field') {
- item.options = []
- config.columns.forEach(col => {
- if (!/^Nvarchar/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) {
- item.options.push({
- value: col.field,
- text: col.label
- })
- } else if (/^Nvarchar/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') {
- item.options.push({
- value: col.field,
- text: col.label
- })
- }
- })
- } else if (item.key === 'labelfield') {
- item.options = []
- config.columns.forEach(col => {
- if (/^Nvarchar/ig.test(col.datatype)) {
- item.options.push({
- value: col.field,
- text: col.label
- })
- }
- })
- }
-
- return item
- })
- })
- }
-
- getOptions = (eleType, datatype) => {
- let _options = fromJS(cardTypeOptions[eleType]).toJS() // 閫夐」鍒楄〃
-
- if (['text', 'number', 'picture', 'link'].includes(eleType)) {
- if (datatype === 'dynamic') {
- _options.push('field')
- }
- }
-
- return _options
- }
-
- /**
- * @description 涓嬫媺鍒囨崲
- * 1銆佹墦寮�鏂瑰紡鍒囨崲锛岄噸缃彲瑙佽〃鍗曞拰琛ㄥ崟鍊�
- * 2銆佹樉绀轰綅缃垏鎹紝閲嶇疆閫夋嫨琛�
- * 3銆佸垏鎹㈡爣绛剧被鍨嬶紝閲嶇疆鍙�夋爣绛�
- */
- selectChange = (key, value, option) => {
- const { config } = this.props
- const { datatype } = this.state
-
- if (key === 'eleType') {
- let _options = this.getOptions(value, datatype)
-
- let _formlist = this.state.formlist.map(item => {
- item.hidden = !_options.includes(item.key)
-
- if (item.key === 'field') {
- item.options = []
- config.columns.forEach(col => {
- if (!/^Nvarchar/ig.test(col.datatype) && (value === 'number' || value === 'slider')) {
- item.options.push({
- value: col.field,
- text: col.label
- })
- } else if (/^Nvarchar/ig.test(col.datatype) && value !== 'number' && value !== 'slider') {
- item.options.push({
- value: col.field,
- text: col.label
- })
- }
- })
- }
-
- return item
- })
-
- this.setState({
- eleType: value,
- formlist: _formlist
- }, () => {
- 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 (key === 'field') {
- if (this.props.form.getFieldValue('value') !== undefined) {
- this.props.form.setFieldsValue({value: option.props.title})
- }
- }
- }
-
- onChange = (e, key) => {
- const { eleType } = this.state
- let value = e.target.value
-
- if (key === 'datatype') {
- let _options = this.getOptions(eleType, value)
-
- this.setState({
- datatype: value,
- formlist: this.state.formlist.map(item => {
- item.hidden = !_options.includes(item.key)
-
- return item
- })
- })
- }
- }
-
- handleSubmit = (e) => {
- e.preventDefault()
-
- if (this.props.inputSubmit) {
- this.props.inputSubmit()
- }
- }
-
- getFields() {
- const { getFieldDecorator } = this.props.form
- const fields = []
-
- this.state.formlist.forEach((item, index) => {
- if (item.hidden) return
-
- if (item.type === 'text') { // 鏂囨湰鎼滅储
- let rules = []
-
- if (item.key === 'padding') {
- rules = [{
- pattern: /^\d+px$|^\d+px\s\d+px$|^\d+px\s\d+px\s\d+px$|^\d+px\s\d+px\s\d+px\s\d+px$/ig,
- message: '璇锋纭緭鍏ュ唴杈硅窛锛�'
- }]
- }
-
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || '',
- rules: [
- {
- required: item.readonly ? false : !!item.required,
- message: this.props.dict['form.required.input'] + 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 === 'number') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.readonly ? false : !!item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} />)}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'select') { // 涓嬫媺鎼滅储
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || '',
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- filterOption={(input, option) => option.props.children[2].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}>
- {item.key === 'icon' && option.value && <Icon type={option.value} />} {option.text}
- </Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'radio') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Radio.Group onChange={(e) => {this.onChange(e, item.key)}} disabled={item.readonly}>
- {
- item.options.map(option => {
- return (
- <Radio key={option.value} value={option.value}>{option.text}</Radio>
- )
- })
- }
- </Radio.Group>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'color') {
- fields.push(
- <Col span={12} key={index} className="color-form">
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <ColorSketch />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'file') {
- let filelist = []
- if (item.initVal) {
- filelist = [{
- uid: `1`,
- name: item.initVal.slice(item.initVal.lastIndexOf('/') + 1),
- status: 'done',
- url: item.initVal,
- origin: true
- }]
- }
-
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: filelist,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <FileUpload maxFile={item.maxfile} fileType={'text'} />
- )}
- </Form.Item>
- </Col>
- )
- }
- })
- return fields
+ dict: PropTypes.object, // 瀛楀吀椤�
+ setting: PropTypes.object, // 鏁版嵁婧愰厤缃�
}
handleConfirm = () => {
@@ -348,32 +15,6 @@
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
-
- if (values.url) {
- if (values.url.length > 0) {
- if (values.url[0].origin && values.url[0].url) {
- values.url = values.url[0].url
- } else if (!values.url[0].origin && values.url[0].status === 'done' && values.url[0].response) {
- values.url = values.url[0].response
- } else {
- values.url = ''
- }
- } else {
- values.url = ''
- }
- }
-
- if (values.eleType === 'picture' && values.datatype === 'static' && !values.url) {
- notification.warning({
- top: 92,
- message: '灏氭湭娣诲姞鍥剧墖鎴栧浘鐗囦笂浼犲け璐ワ紝璇烽噸鏂版坊鍔狅紒',
- duration: 5
- })
- return
- }
-
resolve(values)
} else {
reject(err)
@@ -383,22 +24,81 @@
}
render() {
+ const { setting } = this.props
+ const { getFieldDecorator } = this.props.form
+
const formItemLayout = {
labelCol: {
xs: { span: 24 },
- sm: { span: 7 }
+ sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
- sm: { span: 17 }
+ sm: { span: 16 }
}
}
+
return (
- <Form {...formItemLayout} className="menu-card-detail-form" id="card-winter">
- <Row gutter={24}>{this.getFields()}</Row>
- </Form>
+ <div className="model-menu-setting-form">
+ <Form {...formItemLayout}>
+ <Row gutter={24}>
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鏍呮牸甯冨眬锛屾瘡琛岀瓑鍒�24浠姐��">
+ <Icon type="question-circle" />
+ 鍗＄墖瀹藉害
+ </Tooltip>
+ }>
+ {getFieldDecorator('width', {
+ initialValue: setting.width || 24,
+ rules: [
+ {
+ required: true,
+ message: this.props.dict['form.required.input'] + '瀹藉害!'
+ }
+ ]
+ })(<InputNumber min={1} max={24} precision={0} />)}
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="閫夋嫨澶嶅紡鍗℃椂锛屽彲閰嶇疆榧犳爣鎮诞鏃剁殑鏄剧ず淇℃伅銆�">
+ <Icon type="question-circle" />
+ 鍗＄墖绫诲瀷
+ </Tooltip>
+ }>
+ {getFieldDecorator('type', {
+ initialValue: setting.type || 'simple'
+ })(
+ <Radio.Group>
+ <Radio value="simple">鍗曞崱</Radio>
+ <Radio value="multi">澶嶅紡鍗�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="澶嶅紡鍗＄墖榧犳爣鎮诞淇℃伅鐨勫姩鐢绘晥鏋溿��">
+ <Icon type="question-circle" />
+ 杩囨浮鏁堟灉
+ </Tooltip>
+ }>
+ {getFieldDecorator('transform', {
+ initialValue: setting.transform || 'up'
+ })(
+ <Radio.Group>
+ <Radio value="up">鍚戜笂婊戝姩</Radio>
+ <Radio value="down">鍚戜笅婊戝姩</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ </Row>
+ </Form>
+ </div>
)
}
}
-export default Form.create()(MainSearch)
\ No newline at end of file
+export default Form.create()(SettingForm)
\ No newline at end of file
--
Gitblit v1.8.0