From f66e19dd13af07ee466306632ad43c72f1f16ae7 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 26 五月 2021 14:49:55 +0800
Subject: [PATCH] 2021-05-26
---
src/menu/components/card/cardcomponent/settingform/index.jsx | 575 +++++++++++++++++++++------------------------------------
1 files changed, 214 insertions(+), 361 deletions(-)
diff --git a/src/menu/components/card/cardcomponent/settingform/index.jsx b/src/menu/components/card/cardcomponent/settingform/index.jsx
index ea5a9c6..6424977 100644
--- a/src/menu/components/card/cardcomponent/settingform/index.jsx
+++ b/src/menu/components/card/cardcomponent/settingform/index.jsx
@@ -1,163 +1,59 @@
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, Input, InputNumber, Select, Cascader } 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'],
-}
+const { TextArea } = Input
-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 // 鍥炶溅鎻愪氦浜嬩欢
+ cards: PropTypes.object, // 鍗＄墖闆�
+ setting: PropTypes.object, // 鏁版嵁婧愰厤缃�
+ inputSubmit: PropTypes.func // 鍥炶溅浜嬩欢
}
state = {
- formlist: null, // 琛ㄥ崟淇℃伅
- eleType: '',
- datatype: ''
+ type: this.props.setting.type || 'simple',
+ click: this.props.setting.click || '',
+ appType: sessionStorage.getItem('appType'),
+ menulist: []
}
-
- UNSAFE_componentWillMount () {
- const { card, config } = this.props
+ UNSAFE_componentWillMount() {
+ const { appType } = this.state
+ let menulist = null
- let _options = this.getOptions(card.eleType, card.datatype)
+ if (appType) {
+ menulist = sessionStorage.getItem('appMenus')
+ } else {
+ menulist = sessionStorage.getItem('fstMenuList')
+ }
- this.setState({
- eleType: card.eleType,
- datatype: card.datatype,
- formlist: this.props.formlist.map(item => {
- item.hidden = !_options.includes(item.key)
+ if (menulist) {
+ try {
+ menulist = JSON.parse(menulist)
+ } catch {
+ menulist = []
+ }
+ } else {
+ menulist = []
+ }
+ this.setState({menulist})
+ }
- 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
- })
- }
- })
+ handleConfirm = () => {
+ // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
+ return new Promise((resolve, reject) => {
+ this.props.form.validateFieldsAndScroll((err, values) => {
+ if (!err) {
+ resolve(values)
+ } else {
+ reject(err)
}
-
- 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) => {
@@ -168,237 +64,194 @@
}
}
- 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
- }
-
- handleConfirm = () => {
- // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭�
- 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)
- }
- })
- })
- }
-
render() {
+ const { setting, cards } = this.props
+ const { getFieldDecorator } = this.props.form
+ const { menulist, click, appType } = this.state
+
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-card-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} onPressEnter={this.handleSubmit}/>)}
+ </Form.Item>
+ </Col>
+ {appType !== 'mob' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="閫夋嫨澶嶅紡鍗℃椂锛屽彲閰嶇疆榧犳爣鎮诞鏃剁殑鏄剧ず淇℃伅銆�">
+ <Icon type="question-circle" />
+ 鍗＄墖绫诲瀷
+ </Tooltip>
+ }>
+ {getFieldDecorator('type', {
+ initialValue: setting.type || 'simple'
+ })(
+ <Radio.Group onChange={(e) => this.setState({ type: e.target.value })}>
+ <Radio value="simple">鍗曞崱</Radio>
+ <Radio value="multi">澶嶅紡鍗�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {this.state.type === 'multi' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="澶嶅紡鍗＄墖榧犳爣鎮诞淇℃伅鐨勫姩鐢绘晥鏋溿��">
+ <Icon type="question-circle" />
+ 杩囨浮鏁堟灉
+ </Tooltip>
+ }>
+ {getFieldDecorator('transform', {
+ initialValue: setting.transform || 'up'
+ })(
+ <Select>
+ <Select.Option value="up">鍚戜笂婊戝姩</Select.Option>
+ <Select.Option value="down">鍚戜笅婊戝姩</Select.Option>
+ <Select.Option value="left">鍚戝乏婊戝姩</Select.Option>
+ <Select.Option value="right">鍚戝彸婊戝姩</Select.Option>
+ <Select.Option value="scale">缂╂斁</Select.Option>
+ <Select.Option value="opacity">閫忔槑搴�</Select.Option>
+ <Select.Option value="rotateX">绾靛悜灞曞紑</Select.Option>
+ <Select.Option value="rotateY">妯悜灞曞紑</Select.Option>
+ </Select>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {cards.subtype === 'propcard' ? <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="鍗＄墖鐐瑰嚮鏃讹紝鍚戝叾浠栫粍浠朵紶閫掔殑BID鍊笺��">
+ <Icon type="question-circle" />
+ 涓婚敭鍊�
+ </Tooltip>
+ }>
+ {getFieldDecorator('primaryId', {
+ initialValue: setting.primaryId || ''
+ })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)}
+ </Form.Item>
+ </Col> : null}
+ <Col span={12}>
+ <Form.Item label={
+ <Tooltip placement="topLeft" title="褰撻�夋嫨瑙﹀彂鎸夐挳鏃讹紝鍙湁褰撳崱鐗囦腑鍙瓨鍦ㄤ竴涓寜閽椂鏈夋晥銆�">
+ <Icon type="question-circle" />
+ 鐐瑰嚮浜嬩欢
+ </Tooltip>
+ }>
+ {getFieldDecorator('click', {
+ initialValue: click
+ })(
+ <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({click: e.target.value})}>
+ <Radio value="">鏃�</Radio>
+ <Radio value="menu">鑿滃崟</Radio>
+ <Radio value="link">閾炬帴</Radio>
+ <Radio value="button">鎸夐挳</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col>
+ {!appType && click === 'menu' ? <Col span={12}>
+ <Form.Item label="鑿滃崟">
+ {getFieldDecorator('menu', {
+ initialValue: setting.menu || [],
+ rules: [
+ {
+ required: true,
+ message: this.props.dict['form.required.select'] + '鑿滃崟!'
+ }
+ ]
+ })(
+ <Cascader options={menulist} placeholder=""/>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {appType && click === 'menu' ? <Col span={12}>
+ <Form.Item label="鍏宠仈鑿滃崟">
+ {getFieldDecorator('menu', {
+ initialValue: setting.menu || '',
+ rules: [
+ {
+ required: true,
+ message: this.props.dict['form.required.select'] + '鍏宠仈鑿滃崟!'
+ }
+ ]
+ })(
+ <Select
+ showSearch
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ >
+ {menulist.map(option =>
+ <Select.Option key={option.MenuID} value={option.MenuID}>{option.MenuName}</Select.Option>
+ )}
+ </Select>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {click === 'link' ? <Col span={24} className="textarea">
+ <Form.Item label="閾炬帴">
+ {getFieldDecorator('linkurl', {
+ initialValue: setting.linkurl || '',
+ rules: [
+ {
+ required: true,
+ message: this.props.dict['form.required.input'] + '閾炬帴!'
+ }
+ ]
+ })( <TextArea rows={2}/> )}
+ </Form.Item>
+ </Col> : null}
+ {appType === 'pc' && click !== '' && click !== 'button' ? <Col span={12}>
+ <Form.Item label="鎵撳紑鏂瑰紡">
+ {getFieldDecorator('open', {
+ initialValue: setting.open || 'blank'
+ })(
+ <Radio.Group>
+ <Radio value="blank">鏂扮獥鍙�</Radio>
+ <Radio value="self">褰撳墠绐楀彛</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
+ {click !== '' && click !== 'button' ? <Col span={12}>
+ <Form.Item label="鍙傛暟鎷兼帴">
+ {getFieldDecorator('joint', {
+ initialValue: setting.joint || 'true'
+ })(
+ <Radio.Group>
+ <Radio value="true">鏄�</Radio>
+ <Radio value="false">鍚�</Radio>
+ </Radio.Group>
+ )}
+ </Form.Item>
+ </Col> : null}
+ </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