From 9e716f3bd30820a08757845b592db73363faa48c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 25 四月 2022 14:53:37 +0800 Subject: [PATCH] 2022-04-25 --- src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx | 208 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 192 insertions(+), 16 deletions(-) diff --git a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx index 3b19179..221db3c 100644 --- a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx @@ -1,14 +1,17 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, Select, InputNumber } from 'antd' +import { Form, Row, Col, Input, Radio, Tooltip, notification, Select, InputNumber } from 'antd' +import { QuestionCircleOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import { formRule } from '@/utils/option.js' import Utils from '@/utils/utils.js' -import CodeMirror from '@/templates/zshare/codemirror' +import asyncComponent from '@/utils/asyncComponent' import './index.scss' +const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) +const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor')) const { TextArea } = Input class SettingForm extends Component { @@ -26,6 +29,8 @@ interType: 'system', procMode: 'script', requestMode: 'system', + controlField: '', + tableType: '', funcTooltip: '', funcRules: [] } @@ -37,7 +42,7 @@ if (usefulFields) { try { usefulFields = JSON.parse(usefulFields) - } catch { + } catch (e) { usefulFields = [] } } else { @@ -62,6 +67,8 @@ interType: setting.interType || 'system', procMode: setting.procMode || 'script', requestMode: setting.requestMode || 'system', + controlField: setting.controlField || '', + tableType: setting.tableType, funcTooltip: tooltip, funcRules: rules }) @@ -190,7 +197,7 @@ render() { const { setting, dict, menu, config, columns } = this.props const { getFieldDecorator } = this.props.form - const { interType, funcRules, funcTooltip, procMode, requestMode } = this.state + const { interType, funcRules, funcTooltip, procMode, requestMode, tableType, controlField } = this.state const formItemLayout = { labelCol: { @@ -229,7 +236,7 @@ {getFieldDecorator('tableType', { initialValue: setting.tableType })( - <Radio.Group> + <Radio.Group onChange={(e) => this.setState({tableType: e.target.value})}> <Radio value="">涓嶅彲閫�</Radio> <Radio value="radio">鍗曢��</Radio> <Radio value="checkbox">澶氶��</Radio> @@ -293,7 +300,7 @@ {interType === 'custom' && procMode === 'inner' ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={funcTooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鍓嶇疆鍑芥暟 </Tooltip> }> @@ -329,7 +336,7 @@ {interType === 'outer' || interType === 'custom' ? <Col className="data-source" span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="姝e紡绯荤粺鎵�浣跨敤鐨勭殑鎺ュ彛鍦板潃銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 姝e紡鍦板潃 </Tooltip> }> @@ -375,7 +382,7 @@ {interType === 'inner' || (interType === 'custom' && requestMode === 'inner') ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={funcTooltip}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鍐呴儴鍑芥暟 </Tooltip> }> @@ -413,8 +420,8 @@ </Col> : null} {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}> <Form.Item help={'鏁版嵁ID锛�' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={ - <Tooltip placement="topLeft" title={'浣跨敤绯荤粺鍑芥暟鏃讹紝闇�濉啓鏁版嵁婧愩�傛敞锛氭暟鎹潈闄愭浛鎹㈢ $@ -> /* 鎴� \'\'銆� @$ -> */ 鎴� \'\''}> - <Icon type="question-circle" /> + <Tooltip placement="topLeft" title={`浣跨敤绯荤粺鍑芥暟鏃讹紝闇�濉啓鏁版嵁婧愩�傛敞锛氭暟鎹潈闄愭浛鎹㈢ $@ -> /* 鎴� ''銆� @$ -> */ 鎴� ''锛涙煡璇㈡浛鎹㈢ $select@ -> /* 鎴� ''銆� @select$ -> */ 鎴� ''锛涚粺璁℃浛鎹㈢ $sum@ -> /* 鎴� ''銆� @sum$ -> */ 鎴� ''銆俙}> + <QuestionCircleOutlined className="mk-form-tip" /> 鏁版嵁婧� </Tooltip> }> @@ -426,7 +433,7 @@ {interType === 'system' || (interType === 'custom' && requestMode === 'system') ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={'鏌ヨ鏃讹紝鎼滅储鏉′欢浠here鏉′欢鎷兼帴杩涘叆sql锛岀粺璁℃椂锛屽皢鏁版嵁婧愪腑浠モ�淍+鎼滅储瀛楁+@鈥濈殑鍐呭锛屼互鎼滅储鏉′欢涓殑鍊艰繘琛屾浛鎹㈠悗锛屾彁浜ゆ煡璇紝娉細鏌ヨ绫诲瀷浠呭湪浣跨敤绯荤粺鍑芥暟鏃舵湁鏁堛��'}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鏌ヨ绫诲瀷 </Tooltip> }> @@ -514,7 +521,7 @@ {interType === 'custom' ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={'鍚屾鎵ц锛氬閮ㄦ帴鍙h皟鐢ㄦ垚鍔熷悗鍐嶈姹傛暟鎹紱寮傛鎵ц锛氬閮ㄦ帴鍙h皟鐢ㄤ笌璇锋眰鏁版嵁鍚屾椂杩涜銆�'}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鎵ц鏂瑰紡 </Tooltip> }> @@ -530,7 +537,7 @@ {interType === 'custom' ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={'濡傛灉鑷畾涔夋帴鍙d笉鏀寔璺ㄥ煙璇锋眰锛屼細閫氳繃褰撳墠绯荤粺杞彂銆�'}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 璺ㄥ煙璇锋眰 </Tooltip> }> @@ -590,7 +597,7 @@ {config.Template === 'CommonTable' ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title={'鍚湁鍚堝苟鍒楁垨琛ㄦ牸鍑虹幇妯悜婊氬姩鏃朵細鏄剧ず寮傚父锛岃鎱庣敤锛�'}> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 琛ㄥご鍥哄畾 </Tooltip> }> @@ -616,8 +623,114 @@ </Col> <Col span={12}> <Form.Item label={ + <Tooltip placement="topLeft" title={'琛ㄦ牸鐨勫唴杈硅窛锛屼粠澶у埌灏忎緷娆¢�掑噺銆�'}> + <QuestionCircleOutlined className="mk-form-tip" /> + 琛ㄦ牸澶у皬 + </Tooltip> + }> + {getFieldDecorator('size', { + initialValue: setting.size || 'middle' + })( + <Radio.Group> + <Radio value="default">澶�</Radio> + <Radio value="middle">涓�</Radio> + <Radio value="small">灏�</Radio> + {/* <Radio value="mini">寰�</Radio> */} + </Radio.Group>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label="浜嬪姟"> + {getFieldDecorator('transaction', { + initialValue: setting.transaction || 'false' + })( + <Radio.Group> + <Radio value="true">浣跨敤</Radio> + <Radio value="false">涓嶄娇鐢�</Radio> + </Radio.Group>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="浣跨敤鎬ラ�熸ā寮忔椂锛岃〃鏍间腑鐨勬爣璁般�佸弻鍑讳簨浠躲�佹牸寮忓寲銆佽鍚堝苟銆佸墠缂�銆佸悗缂�銆佸瓧娈甸�忚绛夋晥鏋滃皢鏃犳晥锛屼笖鏁版嵁閮戒細浠ユ枃鏈牸寮忔樉绀恒��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 妯″紡 + </Tooltip> + }> + {getFieldDecorator('tableMode', { + initialValue: setting.tableMode || 'compatible' + })( + <Radio.Group> + <Radio value="compatible">鍏煎</Radio> + <Radio value="fast">鎬ラ��</Radio> + </Radio.Group>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鏁版嵁鍔犺浇鏃讹紝鏄惁鏄剧ず鍔犺浇涓殑閬僵銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 閬僵 + </Tooltip> + }> + {getFieldDecorator('mask', { + initialValue: setting.mask || 'show' + })( + <Radio.Group> + <Radio value="show">鏄剧ず</Radio> + <Radio value="hidden">闅愯棌</Radio> + </Radio.Group>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鍦ㄦ悳绱㈡潯浠跺瓨鍦ㄦ椂锛屾槸鍚︽樉绀烘悳绱㈠拰閲嶇疆鎸夐挳銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鎼滅储鎸夐挳 + </Tooltip> + }> + {getFieldDecorator('show', { + initialValue: setting.show || 'true' + })( + <Radio.Group> + <Radio value="true">鏄剧ず</Radio> + <Radio value="false">闅愯棌</Radio> + </Radio.Group>)} + </Form.Item> + </Col> + {tableType !== '' ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="褰撴寜閽墽琛屽畬鎴愬苟杩斿洖涓婚敭鍊兼椂锛岄粯璁ら�変腑涓婚敭鍊煎搴旇銆傛敞锛氬湪鍚敤鏃犱汉鍊煎畧鍔熻兘鏃舵棤鏁堛��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 棣栬閫変腑 + </Tooltip> + }> + {getFieldDecorator('selected', { + initialValue: setting.selected || 'false' + })( + <Radio.Group> + <Radio value="false">鏃�</Radio> + <Radio value="init">鍒濆鍖�</Radio> + <Radio value="always">鏁版嵁鍔犺浇</Radio> + </Radio.Group>)} + </Form.Item> + </Col> : null} + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="閫夋嫨鍒嗛〉鏃舵湁鏁堬紝榛樿涓�10鏉°��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 姣忛〉鏁伴噺 + </Tooltip> + }> + {getFieldDecorator('pageSize', { + initialValue: setting.pageSize || '', + })(<InputNumber min={1} max={500} precision={0} />)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ <Tooltip placement="topLeft" title="楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 楂樼骇鎼滅储 </Tooltip> }> @@ -629,7 +742,7 @@ <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鍙屽嚮琛ㄦ牸涓锛岃Е鍙戠殑鎸夐挳銆�"> - <Icon type="question-circle" /> + <QuestionCircleOutlined className="mk-form-tip" /> 鍙屽嚮浜嬩欢 </Tooltip> }> @@ -644,6 +757,69 @@ )} </Form.Item> </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="绌哄�兼椂楂樺害鑷�傚簲銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + table楂樺害 + </Tooltip> + }> + {getFieldDecorator('height', { + initialValue: setting.height + })(<InputNumber min={10} max={3000} precision={0}/>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="榛樿鍊紃gba(0, 0, 0, 0.65)"> + <QuestionCircleOutlined className="mk-form-tip" /> + 瀛椾綋棰滆壊 + </Tooltip> + }> + {getFieldDecorator('color', { + initialValue: setting.color + })(<MKColor config={{initval: setting.color || 'rgba(0, 0, 0, 0.65)'}} />)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label="瀛椾綋澶у皬"> + {getFieldDecorator('fontSize', { + initialValue: setting.fontSize || 14 + })(<InputNumber min={12} max={50} precision={0}/>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鐢ㄤ簬鎺у埗琛屾暟鎹槸鍚﹀彲閫夋嫨銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 绂佺敤瀛楁 + </Tooltip> + }> + {getFieldDecorator('controlField', { + initialValue: setting.controlField || '' + })( + <Select allowClear onChange={(val) => this.setState({controlField: val})}> + {columns.map((option, i) => + <Select.Option key={i} value={option.value}> + {option.text} + </Select.Option> + )} + </Select> + )} + </Form.Item> + </Col> + {controlField ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="褰撳瓧娈靛�间笌鎺у埗鍊肩浉绛夋椂锛岃鏁版嵁浼氱鐢紝澶氫釜鍊肩敤閫楀彿鍒嗛殧銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鎺у埗鍊� + </Tooltip> + }> + {getFieldDecorator('controlVal', { + initialValue: setting.controlVal || '' + })(<Input autoComplete="off" />)} + </Form.Item> + </Col> : null} </Row> </Form> </div> -- Gitblit v1.8.0