田强 / qx-common · Commits

Commit 430eebf89d73b44471e4de81fa928ed99e4dbb4e

Authored by 邱嘉伟
1 parent 54a6d60a

fix: 样式问题

Inline Side-by-side
Showing 3 changed files with 327 additions and 348 deletions
1 /* eslint-disable array-callback-return */ 1 /* eslint-disable array-callback-return */
2 /* eslint-disable eqeqeq */ 2 /* eslint-disable eqeqeq */
3 -import {  
4 - SnippetsOutlined,  
5 -} from '@ant-design/icons'; 3 +import { SnippetsOutlined } from '@ant-design/icons';
  4 +import { QxFieldSetter, QxFormSelect } from '@qx/common';
6 import { 5 import {
7 Button, 6 Button,
8 Col, 7 Col,
9 DatePicker, 8 DatePicker,
  9 + Divider,
10 Form, 10 Form,
11 Input, 11 Input,
12 InputNumber, 12 InputNumber,
@@ -15,31 +15,23 @@ import { @@ -15,31 +15,23 @@ import {
15 Select, 15 Select,
16 Space, 16 Space,
17 Table, 17 Table,
18 - Divider,  
19 message, 18 message,
20 } from 'antd'; 19 } from 'antd';
21 -import React, {  
22 - useCallback,  
23 - useEffect,  
24 - useState,  
25 -} from 'react'; 20 +import React, { useCallback, useEffect, useState } from 'react';
26 import JSONEditor from './codeMirror'; 21 import JSONEditor from './codeMirror';
27 -import './style.less';  
28 -import { QxFieldSetter, QxFormSelect } from '@qx/common';  
29 -import { formatEnum } from './constant';  
30 import { 22 import {
  23 + formatEnum,
31 typeTranslateFieIdtype, 24 typeTranslateFieIdtype,
32 - typeTranslateWidget,  
33 typeTranslateGrouptype, 25 typeTranslateGrouptype,
34 - // typeTranslateItemtype, 26 + typeTranslateWidget,
35 } from './constant'; 27 } from './constant';
  28 +import './style.less';
36 // import { Controlled as CodeMirror } from 'react-codemirror2' 29 // import { Controlled as CodeMirror } from 'react-codemirror2'
37 -import { cloneDeep } from 'lodash-es';  
38 -import moment from 'dayjs';  
39 -import { QxBaseIcon } from '@qx/common';  
40 import Icon from '@ant-design/icons'; 30 import Icon from '@ant-design/icons';
41 -import { SubNodeIcon } from './sub-node-icon';  
42 -import { SubDropIcon } from './sub-node-icon'; 31 +import { QxBaseIcon } from '@qx/common';
  32 +import moment from 'dayjs';
  33 +import { cloneDeep } from 'lodash-es';
  34 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
43 35
44 import '../style/reset.less'; 36 import '../style/reset.less';
45 37
@@ -90,9 +82,6 @@ interface ParameterSettingProps { @@ -90,9 +82,6 @@ interface ParameterSettingProps {
90 appId?: string; // 当前应用ID 82 appId?: string; // 当前应用ID
91 } 83 }
92 84
93 -  
94 -  
95 -  
96 const ParameterModal: React.FC<ParameterSettingProps> = (props) => { 85 const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
97 const { 86 const {
98 visible, 87 visible,
@@ -163,11 +152,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -163,11 +152,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
163 const columns = [ 152 const columns = [
164 { 153 {
165 title: ( 154 title: (
166 - <div style={{  
167 - display: 'flex', flexDirection: 'row'  
168 - , alignContent: 'center', flexWrap: 'wrap'  
169 - }}>  
170 - <span className='parameter-setting-table-title'>参数编码</span> 155 + <div
  156 + style={{
  157 + display: 'flex',
  158 + flexDirection: 'row',
  159 + alignContent: 'center',
  160 + flexWrap: 'wrap',
  161 + }}
  162 + >
  163 + <span className="parameter-setting-table-title">参数编码</span>
171 <span style={{ color: 'red' }}>*</span> 164 <span style={{ color: 'red' }}>*</span>
172 </div> 165 </div>
173 ), 166 ),
@@ -179,10 +172,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -179,10 +172,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
179 const strTitle = (text as string) || ''; 172 const strTitle = (text as string) || '';
180 const index = strTitle.indexOf(searchValue); 173 const index = strTitle.indexOf(searchValue);
181 return ( 174 return (
182 - < Form.Item 175 + <Form.Item
183 name={'code' + record.id} 176 name={'code' + record.id}
184 style={{ margin: 0 }} 177 style={{ margin: 0 }}
185 - // initialValue={record.code} 178 + // initialValue={record.code}
186 > 179 >
187 <Input 180 <Input
188 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }} 181 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
@@ -193,15 +186,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -193,15 +186,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
193 }} 186 }}
194 defaultValue={record.code} 187 defaultValue={record.code}
195 bordered={false} 188 bordered={false}
196 - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'code')} />  
197 - </Form.Item >  
198 - ) 189 + disabled={record.disabled || typeDis}
  190 + onBlur={(e) => handleChange(e, record, 'code')}
  191 + />
  192 + </Form.Item>
  193 + );
199 }, 194 },
200 }, 195 },
201 { 196 {
202 title: ( 197 title: (
203 <div style={{ display: 'flex', flexDirection: 'row' }}> 198 <div style={{ display: 'flex', flexDirection: 'row' }}>
204 - <span className='parameter-setting-table-title'>参数名</span> 199 + <span className="parameter-setting-table-title">参数名</span>
205 <span style={{ color: 'red' }}>*</span> 200 <span style={{ color: 'red' }}>*</span>
206 </div> 201 </div>
207 ), 202 ),
@@ -216,7 +211,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -216,7 +211,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
216 <Form.Item 211 <Form.Item
217 name={'title' + record.id} 212 name={'title' + record.id}
218 style={{ margin: 0 }} 213 style={{ margin: 0 }}
219 - // initialValue={record.title} 214 + // initialValue={record.title}
220 > 215 >
221 <Input 216 <Input
222 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }} 217 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
@@ -227,15 +222,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -227,15 +222,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
227 }} 222 }}
228 defaultValue={record.title} 223 defaultValue={record.title}
229 bordered={false} 224 bordered={false}
230 - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'title')} /> 225 + disabled={record.disabled || typeDis}
  226 + onBlur={(e) => handleChange(e, record, 'title')}
  227 + />
231 </Form.Item> 228 </Form.Item>
232 - ) 229 + );
233 }, 230 },
234 }, 231 },
235 { 232 {
236 title: ( 233 title: (
237 <div style={{ display: 'flex', flexDirection: 'row' }}> 234 <div style={{ display: 'flex', flexDirection: 'row' }}>
238 - <span className='parameter-setting-table-title'>参数类型</span> 235 + <span className="parameter-setting-table-title">参数类型</span>
239 <span style={{ color: 'red' }}>*</span> 236 <span style={{ color: 'red' }}>*</span>
240 </div> 237 </div>
241 ), 238 ),
@@ -243,36 +240,40 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -243,36 +240,40 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
243 className: 'ps-table-cell', 240 className: 'ps-table-cell',
244 width: '102px', 241 width: '102px',
245 key: 'type', 242 key: 'type',
246 - render: (text, record) => 243 + render: (text, record) => (
247 <Form.Item 244 <Form.Item
248 style={{ margin: 0 }} 245 style={{ margin: 0 }}
249 name={'type' + record.id} 246 name={'type' + record.id}
250 - // initialValue={record.type} 247 + // initialValue={record.type}
251 > 248 >
252 <Select 249 <Select
253 bordered={false} 250 bordered={false}
254 disabled={record.disabled || typeDis} 251 disabled={record.disabled || typeDis}
255 defaultValue={record.type} 252 defaultValue={record.type}
256 - onSelect={(e) => handleChange(e, record, 'type')} >  
257 - {  
258 - valueOptions.map((item) => {  
259 - return <Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>;  
260 - })  
261 - } 253 + onSelect={(e) => handleChange(e, record, 'type')}
  254 + >
  255 + {valueOptions.map((item) => {
  256 + return (
  257 + <Select.Option key={item.key} value={item.key}>
  258 + {item.title}
  259 + </Select.Option>
  260 + );
  261 + })}
262 </Select> 262 </Select>
263 </Form.Item> 263 </Form.Item>
  264 + ),
264 }, 265 },
265 { 266 {
266 title: ( 267 title: (
267 <div style={{ display: 'flex', flexDirection: 'row' }}> 268 <div style={{ display: 'flex', flexDirection: 'row' }}>
268 - <span className='parameter-setting-table-title'>默认值</span> 269 + <span className="parameter-setting-table-title">默认值</span>
269 </div> 270 </div>
270 ), 271 ),
271 dataIndex: 'valueMapping', 272 dataIndex: 'valueMapping',
272 className: 'ps-table-cell', 273 className: 'ps-table-cell',
273 width: '116px', 274 width: '116px',
274 key: 'valueMapping', 275 key: 'valueMapping',
275 - render: (text, record) => 276 + render: (text, record) => (
276 <div className="editable-cell "> 277 <div className="editable-cell ">
277 <QxFieldSetter 278 <QxFieldSetter
278 disabled={record.disabled || typeDis} 279 disabled={record.disabled || typeDis}
@@ -292,14 +293,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -292,14 +293,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
292 inputDis={true} 293 inputDis={true}
293 /> 294 />
294 </div> 295 </div>
  296 + ),
295 }, 297 },
296 { 298 {
297 - title:  
298 - (  
299 - <div style={{ display: 'flex', flexDirection: 'row' }}>  
300 - <span className='parameter-setting-table-title'>参数说明</span>  
301 - </div>  
302 - ), 299 + title: (
  300 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  301 + <span className="parameter-setting-table-title">参数说明</span>
  302 + </div>
  303 + ),
303 dataIndex: 'description', 304 dataIndex: 'description',
304 className: 'ps-table-cell', 305 className: 'ps-table-cell',
305 key: 'description', 306 key: 'description',
@@ -308,7 +309,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -308,7 +309,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
308 <Form.Item 309 <Form.Item
309 name={'description' + record.id} 310 name={'description' + record.id}
310 style={{ margin: 0 }} 311 style={{ margin: 0 }}
311 - // initialValue={text} 312 + // initialValue={text}
312 > 313 >
313 <Input 314 <Input
314 draggable={true} 315 draggable={true}
@@ -319,23 +320,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -319,23 +320,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
319 key={inputKey} 320 key={inputKey}
320 defaultValue={text} 321 defaultValue={text}
321 bordered={false} 322 bordered={false}
322 - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'description')} /> 323 + disabled={record.disabled || typeDis}
  324 + onBlur={(e) => handleChange(e, record, 'description')}
  325 + />
323 </Form.Item> 326 </Form.Item>
324 ), 327 ),
325 }, 328 },
326 { 329 {
327 - title:  
328 - (  
329 - <div style={{ display: 'flex', flexDirection: 'row' }}>  
330 - <span className='parameter-setting-table-title'>操作</span>  
331 - </div>  
332 - ), 330 + title: (
  331 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  332 + <span className="parameter-setting-table-title">操作</span>
  333 + </div>
  334 + ),
333 key: 'action', 335 key: 'action',
334 className: 'ps-table-cell', 336 className: 'ps-table-cell',
335 width: '96px', 337 width: '96px',
336 render: (text, record) => { 338 render: (text, record) => {
337 - const isShowAdd = (record && checkShowAdd(record));  
338 - const isShowTree = (record && checkShowTree(record)); 339 + const isShowAdd = record && checkShowAdd(record);
  340 + const isShowTree = record && checkShowTree(record);
339 return ( 341 return (
340 <Space size="small"> 342 <Space size="small">
341 {isShowAdd && ( 343 {isShowAdd && (
@@ -343,7 +345,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -343,7 +345,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
343 size={'small'} 345 size={'small'}
344 type="link" 346 type="link"
345 disabled={record.disabled || typeDis} 347 disabled={record.disabled || typeDis}
346 - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />} 348 + icon={
  349 + <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
  350 + }
347 onClick={() => handleAdd(record.pid)} 351 onClick={() => handleAdd(record.pid)}
348 /> 352 />
349 )} 353 )}
@@ -353,7 +357,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -353,7 +357,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
353 size={'small'} 357 size={'small'}
354 type="link" 358 type="link"
355 disabled={record.disabled || typeDis} 359 disabled={record.disabled || typeDis}
356 - icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />} 360 + icon={
  361 + <Icon style={{ fontSize: 16 }} component={SubNodeIcon} />
  362 + }
357 onClick={() => handleAddTree(record.id)} 363 onClick={() => handleAddTree(record.id)}
358 /> 364 />
359 )} 365 )}
@@ -362,7 +368,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -362,7 +368,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
362 type="link" 368 type="link"
363 className="btn-high-del" 369 className="btn-high-del"
364 disabled={record.disabled || typeDis} 370 disabled={record.disabled || typeDis}
365 - icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />} 371 + icon={
  372 + <QxBaseIcon
  373 + style={{ fontSize: 16 }}
  374 + className={'title-btn-del-btn'}
  375 + type={'qx-icon-delete'}
  376 + />
  377 + }
366 onClick={() => handleDelete(record)} 378 onClick={() => handleDelete(record)}
367 /> 379 />
368 </Space> 380 </Space>
@@ -372,12 +384,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -372,12 +384,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
372 ]; 384 ];
373 385
374 const range = { 386 const range = {
375 - title:  
376 - (  
377 - <div style={{ display: 'flex', flexDirection: 'row' }}>  
378 - <span className='parameter-setting-table-title'>取值范围</span>  
379 - </div>  
380 - ), 387 + title: (
  388 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  389 + <span className="parameter-setting-table-title">取值范围</span>
  390 + </div>
  391 + ),
381 dataIndex: 'qxProps', 392 dataIndex: 'qxProps',
382 className: 'ps-table-cell', 393 className: 'ps-table-cell',
383 width: '314px', 394 width: '314px',
@@ -386,10 +397,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -386,10 +397,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
386 switch (record.type) { 397 switch (record.type) {
387 case 'STRING': 398 case 'STRING':
388 return ( 399 return (
389 - <div  
390 - key={record.id}  
391 - className="editable-cell"  
392 - > 400 + <div key={record.id} className="editable-cell">
393 <InputNumber 401 <InputNumber
394 draggable={true} 402 draggable={true}
395 disabled={record.disabled || typeDis} 403 disabled={record.disabled || typeDis}
@@ -404,7 +412,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -404,7 +412,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
404 defaultValue={qxProps?.min || undefined} 412 defaultValue={qxProps?.min || undefined}
405 placeholder="最小长度" 413 placeholder="最小长度"
406 /> 414 />
407 - <div className='range-cell'>-</div> 415 + <div className="range-cell">-</div>
408 <InputNumber 416 <InputNumber
409 draggable={true} 417 draggable={true}
410 disabled={record.disabled || typeDis} 418 disabled={record.disabled || typeDis}
@@ -423,11 +431,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -423,11 +431,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
423 ); 431 );
424 case 'NUMBER': 432 case 'NUMBER':
425 return ( 433 return (
426 - <div  
427 - key={record.id}  
428 - className="editable-cell"  
429 - >  
430 - <div className='range-cell'> 434 + <div key={record.id} className="editable-cell">
  435 + <div className="range-cell">
431 <InputNumber 436 <InputNumber
432 disabled={record.disabled || typeDis} 437 disabled={record.disabled || typeDis}
433 draggable={true} 438 draggable={true}
@@ -437,7 +442,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -437,7 +442,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
437 }} 442 }}
438 precision={qxProps.precision || 0} 443 precision={qxProps.precision || 0}
439 bordered={false} 444 bordered={false}
440 - size='small' 445 + size="small"
441 defaultValue={qxProps?.min || undefined} 446 defaultValue={qxProps?.min || undefined}
442 onBlur={(e) => handleChange(e, record, 'qxProps-min')} 447 onBlur={(e) => handleChange(e, record, 'qxProps-min')}
443 // style={{ width: '110px' }} 448 // style={{ width: '110px' }}
@@ -452,7 +457,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -452,7 +457,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
452 event.preventDefault(); 457 event.preventDefault();
453 }} 458 }}
454 bordered={false} 459 bordered={false}
455 - size='small' 460 + size="small"
456 precision={qxProps.precision || 0} 461 precision={qxProps.precision || 0}
457 defaultValue={qxProps.max || undefined} 462 defaultValue={qxProps.max || undefined}
458 onBlur={(e) => handleChange(e, record, 'qxProps-max')} 463 onBlur={(e) => handleChange(e, record, 'qxProps-max')}
@@ -461,8 +466,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -461,8 +466,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
461 /> 466 />
462 <Divider type="vertical" style={{ height: '16px' }} /> 467 <Divider type="vertical" style={{ height: '16px' }} />
463 </div> 468 </div>
464 - <div className='range-cell'>  
465 - 469 + <div className="range-cell">
466 <InputNumber 470 <InputNumber
467 disabled={record.disabled || typeDis} 471 disabled={record.disabled || typeDis}
468 draggable={true} 472 draggable={true}
@@ -471,7 +475,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -471,7 +475,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
471 event.preventDefault(); 475 event.preventDefault();
472 }} 476 }}
473 bordered={false} 477 bordered={false}
474 - size='small' 478 + size="small"
475 precision={0} 479 precision={0}
476 min={0} 480 min={0}
477 max={8} 481 max={8}
@@ -484,20 +488,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -484,20 +488,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
484 ); 488 );
485 case 'TIME': 489 case 'TIME':
486 return ( 490 return (
487 - <div  
488 - key={record.id}  
489 - className="editable-cell"  
490 - >  
491 - <div className='range-cell'> 491 + <div key={record.id} className="editable-cell">
  492 + <div className="range-cell">
492 <DatePicker 493 <DatePicker
493 bordered={false} 494 bordered={false}
494 disabled={record.disabled || typeDis} 495 disabled={record.disabled || typeDis}
495 - size='small'  
496 - defaultValue={  
497 - qxProps?.min  
498 - ? moment(qxProps.min)  
499 - : undefined  
500 - } 496 + size="small"
  497 + defaultValue={qxProps?.min ? moment(qxProps.min) : undefined}
501 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'} 498 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
502 // style={{ width: '110px' }} 499 // style={{ width: '110px' }}
503 showTime 500 showTime
@@ -507,13 +504,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -507,13 +504,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
507 - 504 -
508 <DatePicker 505 <DatePicker
509 disabled={record.disabled || typeDis} 506 disabled={record.disabled || typeDis}
510 - size='small' 507 + size="small"
511 bordered={false} 508 bordered={false}
512 - defaultValue={  
513 - qxProps?.max  
514 - ? moment(qxProps.max)  
515 - : undefined  
516 - } 509 + defaultValue={qxProps?.max ? moment(qxProps.max) : undefined}
517 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'} 510 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
518 // style={{ width: '110px' }} 511 // style={{ width: '110px' }}
519 showTime 512 showTime
@@ -522,18 +515,16 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -522,18 +515,16 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
522 /> 515 />
523 <Divider type="vertical" style={{ height: '16px' }} /> 516 <Divider type="vertical" style={{ height: '16px' }} />
524 </div> 517 </div>
525 - <div className='range-cell'> 518 + <div className="range-cell">
526 <Select 519 <Select
527 disabled={record.disabled || typeDis} 520 disabled={record.disabled || typeDis}
528 - size='small' 521 + size="small"
529 // style={{ width: '90px' }} 522 // style={{ width: '90px' }}
530 bordered={false} 523 bordered={false}
531 placeholder="格式" 524 placeholder="格式"
532 popupMatchSelectWidth={false} 525 popupMatchSelectWidth={false}
533 defaultValue={qxProps?.format || 'YEAR_DATE'} 526 defaultValue={qxProps?.format || 'YEAR_DATE'}
534 - onSelect={(e) =>  
535 - handleChange(e, record, 'qxProps-format')  
536 - } 527 + onSelect={(e) => handleChange(e, record, 'qxProps-format')}
537 > 528 >
538 {timeFormat.map((item) => { 529 {timeFormat.map((item) => {
539 return ( 530 return (
@@ -554,10 +545,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -554,10 +545,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
554 case 'USER': 545 case 'USER':
555 case 'ORG': 546 case 'ORG':
556 return ( 547 return (
557 - <div  
558 - className='editable-cell'  
559 - key={record.id}  
560 - > 548 + <div className="editable-cell" key={record.id}>
561 <QxFormSelect 549 <QxFormSelect
562 value={qxProps} 550 value={qxProps}
563 appId={props?.appId} 551 appId={props?.appId}
@@ -566,7 +554,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -566,7 +554,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
566 onChange={(val: any) => { 554 onChange={(val: any) => {
567 handleChange(val, record, 'qxProps'); 555 handleChange(val, record, 'qxProps');
568 }} 556 }}
569 - disabled={['USER', 'ORG'].includes(record.type) || record.disabled || typeDis} 557 + disabled={
  558 + ['USER', 'ORG'].includes(record.type) ||
  559 + record.disabled ||
  560 + typeDis
  561 + }
570 request={props?.request} 562 request={props?.request}
571 /> 563 />
572 </div> 564 </div>
@@ -577,21 +569,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -577,21 +569,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
577 }; 569 };
578 570
579 const require = { 571 const require = {
580 - title:  
581 - (  
582 - <div style={{ display: 'flex', flexDirection: 'row' }}>  
583 - <span className='parameter-setting-table-title'>必填</span>  
584 - </div>  
585 - ), 572 + title: (
  573 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  574 + <span className="parameter-setting-table-title">必填</span>
  575 + </div>
  576 + ),
586 dataIndex: 'required', 577 dataIndex: 'required',
587 className: 'ps-table-cell', 578 className: 'ps-table-cell',
588 key: 'required', 579 key: 'required',
589 width: '86px', 580 width: '86px',
590 render: (text, record) => ( 581 render: (text, record) => (
591 - <Form.Item  
592 - name={'required' + record.id}  
593 - style={{ margin: 0 }}  
594 - > 582 + <Form.Item name={'required' + record.id} style={{ margin: 0 }}>
595 <Select 583 <Select
596 defaultValue={text || false} 584 defaultValue={text || false}
597 bordered={false} 585 bordered={false}
@@ -601,12 +589,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -601,12 +589,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
601 <Select.Option value={true}>是</Select.Option> 589 <Select.Option value={true}>是</Select.Option>
602 <Select.Option value={false}>否</Select.Option> 590 <Select.Option value={false}>否</Select.Option>
603 </Select> 591 </Select>
604 - </Form.Item > 592 + </Form.Item>
605 ), 593 ),
606 }; 594 };
607 595
608 if (nodeType !== 'END') { 596 if (nodeType !== 'END') {
609 - columns.splice(3, 0, range, require) 597 + columns.splice(3, 0, range, require);
610 } 598 }
611 599
612 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1'; 600 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
@@ -618,7 +606,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -618,7 +606,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
618 handleAdd(''); 606 handleAdd('');
619 } 607 }
620 } 608 }
621 -  
622 }, [visible]); 609 }, [visible]);
623 610
624 //展开 所有子节点 611 //展开 所有子节点
@@ -648,7 +635,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -648,7 +635,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
648 style: { cursor: 'move' }, 635 style: { cursor: 'move' },
649 onDragStart: (ev: any) => { 636 onDragStart: (ev: any) => {
650 ev.persist(); 637 ev.persist();
651 - console.log('onDragStart', ev.target) 638 + console.log('onDragStart', ev.target);
652 ev.dataTransfer.effectAllowed = 'move'; 639 ev.dataTransfer.effectAllowed = 'move';
653 ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key')); 640 ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key'));
654 }, 641 },
@@ -797,8 +784,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -797,8 +784,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
797 /> 784 />
798 } 785 }
799 > 786 >
800 - {!type && (  
801 - isShowJson ? ( 787 + {!type &&
  788 + (isShowJson ? (
802 <Row> 789 <Row>
803 <Col span={12}> 790 <Col span={12}>
804 <Button 791 <Button
@@ -816,7 +803,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -816,7 +803,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
816 <Button 803 <Button
817 size={'small'} 804 size={'small'}
818 type="link" 805 type="link"
819 - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />} 806 + icon={
  807 + <QxBaseIcon
  808 + style={{ fontSize: 16 }}
  809 + type={'qx-icon-flow-code'}
  810 + />
  811 + }
820 style={{ 812 style={{
821 padding: 0, 813 padding: 0,
822 height: '32px', 814 height: '32px',
@@ -846,69 +838,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -846,69 +838,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
846 /> 838 />
847 </Col> 839 </Col>
848 </Row> 840 </Row>
849 - )  
850 - )  
851 - }  
852 - {  
853 - isShowJson ? (  
854 - <>  
855 - <JSONEditor value={midData} onChange={onJsonChange} />  
856 - <Col  
857 - className="border-none"  
858 - span={24}  
859 - style={{  
860 - display: 'flex',  
861 - flexDirection: 'row-reverse',  
862 - marginBottom: '10px',  
863 - textAlign: 'center',  
864 - }}  
865 - >  
866 - <Space>  
867 - <Button onClick={() => onCancel()}>{'取消'}</Button>  
868 - <Button type="primary" onClick={() => submit()}>  
869 - {'确定'}  
870 - </Button>  
871 - </Space>  
872 - </Col>  
873 - </>  
874 - ) : (  
875 - <Table  
876 - expandable={{  
877 - defaultExpandAllRows: true,  
878 - childrenColumnName: 'child',  
879 - expandIcon: ({ expanded, onExpand, record }) =>  
880 - record.child && record.child.length > 0 && expanded ? (  
881 - <>  
882 - <Icon component={SubDropIcon}  
883 - className='drop-icon' />  
884 - <QxBaseIcon className={'table-expanded'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />  
885 - </>  
886 -  
887 - ) : record.child && record.child.length > 0 && !expanded ?  
888 - (  
889 - <>  
890 - <Icon component={SubDropIcon}  
891 - className='drop-icon' />  
892 - <QxBaseIcon className={'table-expanded-change'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />  
893 - </>  
894 - )  
895 - :  
896 - <Icon component={SubDropIcon}  
897 - className='drop-icon' /> 841 + ))}
  842 + {isShowJson ? (
  843 + <>
  844 + <JSONEditor value={midData} onChange={onJsonChange} />
  845 + <Col
  846 + className="border-none"
  847 + span={24}
  848 + style={{
  849 + display: 'flex',
  850 + flexDirection: 'row-reverse',
  851 + marginBottom: '10px',
  852 + textAlign: 'center',
898 }} 853 }}
899 - className='parameter-setting-table'  
900 - onRow={() => onRow()}  
901 - scroll={{ x: 1000, y: 432 }}  
902 - bordered  
903 - pagination={false}  
904 - size={'small'}  
905 - // @ts-ignore  
906 - columns={columns}  
907 - dataSource={data}  
908 - rowKey={'id'}  
909 - />  
910 - )  
911 - } 854 + >
  855 + <Space>
  856 + <Button onClick={() => onCancel()}>{'取消'}</Button>
  857 + <Button type="primary" onClick={() => submit()}>
  858 + {'确定'}
  859 + </Button>
  860 + </Space>
  861 + </Col>
  862 + </>
  863 + ) : (
  864 + <Table
  865 + expandable={{
  866 + defaultExpandAllRows: true,
  867 + childrenColumnName: 'child',
  868 + expandIcon: ({ expanded, onExpand, record }) =>
  869 + record.child && record.child.length > 0 && expanded ? (
  870 + <>
  871 + <Icon component={SubDropIcon} className="drop-icon" />
  872 + <QxBaseIcon
  873 + className={'table-expanded'}
  874 + type={'qx-caret-down'}
  875 + onClick={(e) => onExpand(record, e)}
  876 + />
  877 + </>
  878 + ) : record.child && record.child.length > 0 && !expanded ? (
  879 + <>
  880 + <Icon component={SubDropIcon} className="drop-icon" />
  881 + <QxBaseIcon
  882 + className={'table-expanded-change'}
  883 + type={'qx-caret-down'}
  884 + onClick={(e) => onExpand(record, e)}
  885 + />
  886 + </>
  887 + ) : (
  888 + <Icon component={SubDropIcon} className="drop-icon" />
  889 + ),
  890 + }}
  891 + className="parameter-setting-table"
  892 + onRow={onRow}
  893 + scroll={{ x: 1000, y: 432 }}
  894 + bordered
  895 + pagination={false}
  896 + size={'small'}
  897 + // @ts-ignore
  898 + columns={columns}
  899 + dataSource={data}
  900 + rowKey={'id'}
  901 + />
  902 + )}
912 </Modal> 903 </Modal>
913 </> 904 </>
914 ); 905 );
1 /* eslint-disable eqeqeq */ 1 /* eslint-disable eqeqeq */
2 /* eslint-disable array-callback-return */ 2 /* eslint-disable array-callback-return */
3 -import React, { useCallback, useEffect, useState } from 'react'; 3 +import Icon from '@ant-design/icons';
4 import { 4 import {
5 Button, 5 Button,
6 Dropdown, 6 Dropdown,
@@ -11,23 +11,22 @@ import { @@ -11,23 +11,22 @@ import {
11 Tree, 11 Tree,
12 message, 12 message,
13 } from 'antd'; 13 } from 'antd';
14 -import Icon from '@ant-design/icons';  
15 import type { TreeProps } from 'antd/lib/tree'; 14 import type { TreeProps } from 'antd/lib/tree';
  15 +import React, { useCallback, useEffect, useState } from 'react';
16 import ParameterModal from './ParameterModal'; 16 import ParameterModal from './ParameterModal';
17 import { formatEnum } from './constant'; 17 import { formatEnum } from './constant';
18 // import type { InputRef } from 'antd'; 18 // import type { InputRef } from 'antd';
19 import { 19 import {
20 typeTranslateFieIdtype, 20 typeTranslateFieIdtype,
21 - typeTranslateWidget,  
22 typeTranslateGrouptype, 21 typeTranslateGrouptype,
23 - // typeTranslateItemtype, 22 + typeTranslateWidget,
24 } from './constant'; 23 } from './constant';
25 24
26 -import { cloneDeep, isEmpty } from 'lodash-es'; 25 +import { QxBaseIcon, QxFieldSetter } from '@qx/common';
27 import moment from 'dayjs'; 26 import moment from 'dayjs';
  27 +import { cloneDeep, isEmpty } from 'lodash-es';
28 import type { ParamDesignModel } from './constant'; 28 import type { ParamDesignModel } from './constant';
29 import { uidGen } from './stringUtil'; 29 import { uidGen } from './stringUtil';
30 -import { QxFieldSetter, QxBaseIcon } from '@qx/common';  
31 30
32 import './style.less'; 31 import './style.less';
33 32
@@ -36,8 +35,7 @@ type ValueOptionProps = { @@ -36,8 +35,7 @@ type ValueOptionProps = {
36 value: string; 35 value: string;
37 }; 36 };
38 37
39 -import { SubNodeIcon } from './sub-node-icon';  
40 -import { SubDropIcon } from './sub-node-icon'; 38 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
41 39
42 const valueOptions = [ 40 const valueOptions = [
43 { key: 'STRING', label: '文本' }, 41 { key: 'STRING', label: '文本' },
@@ -75,7 +73,7 @@ const getDefaultQxProps = (type: string) => { @@ -75,7 +73,7 @@ const getDefaultQxProps = (type: string) => {
75 break; 73 break;
76 } 74 }
77 return _qxProps; 75 return _qxProps;
78 -} 76 +};
79 77
80 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => { 78 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
81 let parentKey: React.Key; 79 let parentKey: React.Key;
@@ -103,8 +101,8 @@ interface ParameterSettingProps { @@ -103,8 +101,8 @@ interface ParameterSettingProps {
103 // componentItem?: any; 101 // componentItem?: any;
104 // comHandleChange?: (val: any) => void; 102 // comHandleChange?: (val: any) => void;
105 appId?: string; // 当前应用ID 103 appId?: string; // 当前应用ID
106 - request?: any,  
107 - type?: string, 104 + request?: any;
  105 + type?: string;
108 nodeType?: string | 'START' | 'END'; 106 nodeType?: string | 'START' | 'END';
109 } 107 }
110 108
@@ -236,15 +234,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -236,15 +234,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
236 ) { 234 ) {
237 const { qxProps } = data; 235 const { qxProps } = data;
238 value = moment(value).format(formatEnum[qxProps?.format] || 'YYYY-MM-DD'); 236 value = moment(value).format(formatEnum[qxProps?.format] || 'YYYY-MM-DD');
239 - }  
240 - else if (code == 'qxProps-min' || code == 'qxProps-max') { 237 + } else if (code == 'qxProps-min' || code == 'qxProps-max') {
241 if (value) { 238 if (value) {
242 - value = Number(value) 239 + value = Number(value);
243 if (isNaN(value)) { 240 if (isNaN(value)) {
244 - value = null 241 + value = null;
245 } 242 }
246 } else { 243 } else {
247 - value = null 244 + value = null;
248 } 245 }
249 console.log('value', value); 246 console.log('value', value);
250 } 247 }
@@ -285,7 +282,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -285,7 +282,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
285 _qxProps[_newCode] = value; 282 _qxProps[_newCode] = value;
286 } 283 }
287 treeList[i].qxProps = { 284 treeList[i].qxProps = {
288 - ..._qxProps 285 + ..._qxProps,
289 }; 286 };
290 } else { 287 } else {
291 treeList[i][code] = value; 288 treeList[i][code] = value;
@@ -484,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -484,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
484 type: _type, 481 type: _type,
485 pid: _pid, 482 pid: _pid,
486 title: code, 483 title: code,
487 - qxProps: getDefaultQxProps(_type) 484 + qxProps: getDefaultQxProps(_type),
488 }); 485 });
489 return; 486 return;
490 } else if (treeList[i].child) { 487 } else if (treeList[i].child) {
@@ -494,7 +491,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -494,7 +491,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
494 }; 491 };
495 492
496 if (!_pid) { 493 if (!_pid) {
497 - _treeData.push({ id, code, type: _type, title: code, qxProps: getDefaultQxProps(_type), pid: '' }); 494 + _treeData.push({
  495 + id,
  496 + code,
  497 + type: _type,
  498 + title: code,
  499 + qxProps: getDefaultQxProps(_type),
  500 + pid: '',
  501 + });
498 } else { 502 } else {
499 loopAddTree(_treeData); 503 loopAddTree(_treeData);
500 } 504 }
@@ -546,7 +550,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -546,7 +550,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
546 e.persist(); 550 e.persist();
547 const parentNode = e.currentTarget.parentNode.parentNode.parentNode; 551 const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
548 if (!!parentNode) { 552 if (!!parentNode) {
549 - parentNode.style.backgroundColor = '#bae7ff'; 553 + // parentNode.style.backgroundColor = '#bae7ff';
550 } 554 }
551 }; 555 };
552 556
@@ -592,8 +596,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -592,8 +596,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
592 ); 596 );
593 treeList[i].valueMapping = { 597 treeList[i].valueMapping = {
594 ...data.valueMapping, 598 ...data.valueMapping,
595 - mappingValues: newMappingValues  
596 - } 599 + mappingValues: newMappingValues,
  600 + };
597 treeList[i].valuesObj = val; 601 treeList[i].valuesObj = val;
598 return; 602 return;
599 } else if (!!treeList[i]?.child?.length) { 603 } else if (!!treeList[i]?.child?.length) {
@@ -606,24 +610,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -606,24 +610,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
606 props?.onChange(_newData); 610 props?.onChange(_newData);
607 }; 611 };
608 612
609 - // const callback = (val: any, index: number) => {  
610 -  
611 - // const newValue = [...value];  
612 - // newValue[index].mappingValues = val.map((item: any) =>  
613 - // item?.extVal ? item?.extVal : item?.value,  
614 - // );  
615 - // newValue[index].valuesObj = val;  
616 -  
617 - // // if (newValue[index].fieldType == 'REL') {  
618 - // // relIdList.map((_value) => {  
619 - // // if (_value.key == newValue[index].mappingValues[0]) {  
620 - // // newValue[index].relId = _value?.extract?.relId;  
621 - // // }  
622 - // // });  
623 - // // }  
624 -  
625 - // };  
626 -  
627 // 渲染节点 613 // 渲染节点
628 const renderTitle = (nodeData: any) => { 614 const renderTitle = (nodeData: any) => {
629 const strTitle = (nodeData.title as string) || ''; 615 const strTitle = (nodeData.title as string) || '';
@@ -632,10 +618,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -632,10 +618,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
632 const disabled = !!props.type ? true : nodeData.disabled; 618 const disabled = !!props.type ? true : nodeData.disabled;
633 return ( 619 return (
634 <div> 620 <div>
635 - <Icon component={SubDropIcon}  
636 - className='drop-icon'/>  
637 - <div  
638 - onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}> 621 + <Icon component={SubDropIcon} className="drop-icon" />
  622 + <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
639 <div 623 <div
640 style={{ 624 style={{
641 // padding: '2px', 625 // padding: '2px',
@@ -676,7 +660,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -676,7 +660,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
676 )} 660 )}
677 <Button 661 <Button
678 className="title-btn-del" 662 className="title-btn-del"
679 - icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />} 663 + icon={
  664 + <QxBaseIcon
  665 + className={'title-btn-del-btn'}
  666 + type={'qx-icon-delete'}
  667 + />
  668 + }
680 disabled={disabled} 669 disabled={disabled}
681 type="link" 670 type="link"
682 onClick={() => deleteParameter(nodeData)} 671 onClick={() => deleteParameter(nodeData)}
@@ -713,7 +702,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -713,7 +702,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
713 widget={typeTranslateWidget(nodeData.type)} 702 widget={typeTranslateWidget(nodeData.type)}
714 fieldType={typeTranslateFieIdtype(nodeData.type)} 703 fieldType={typeTranslateFieIdtype(nodeData.type)}
715 fieldGroupType={typeTranslateGrouptype(nodeData.type)} 704 fieldGroupType={typeTranslateGrouptype(nodeData.type)}
716 - isMixValue={typeTranslateFieIdtype(nodeData.type) == 'STRING' ? true : false} 705 + isMixValue={
  706 + typeTranslateFieIdtype(nodeData.type) == 'STRING'
  707 + ? true
  708 + : false
  709 + }
717 colsTree={props.nodeItem} 710 colsTree={props.nodeItem}
718 isMultiple={false} 711 isMultiple={false}
719 onChange={(val) => changeField(val, nodeData)} 712 onChange={(val) => changeField(val, nodeData)}
@@ -735,8 +728,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -735,8 +728,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
735 <div> 728 <div>
736 <div className={'qx-parameter-setting-content'}> 729 <div className={'qx-parameter-setting-content'}>
737 <div style={{ display: 'flex', flexDirection: 'row' }}> 730 <div style={{ display: 'flex', flexDirection: 'row' }}>
738 - {  
739 - !props.type && 731 + {!props.type && (
740 <Dropdown 732 <Dropdown
741 trigger={['click']} 733 trigger={['click']}
742 className={'hidden-select'} 734 className={'hidden-select'}
@@ -755,11 +747,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -755,11 +747,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
755 padding: '0 0 0 8px', 747 padding: '0 0 0 8px',
756 }} 748 }}
757 > 749 >
758 - <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} /> 750 + <QxBaseIcon
  751 + style={{ fontSize: '16px' }}
  752 + type={'qx-icon-plus'}
  753 + />
759 添加参数 754 添加参数
760 </Button> 755 </Button>
761 </Dropdown> 756 </Dropdown>
762 - } 757 + )}
763 <Button 758 <Button
764 size={'small'} 759 size={'small'}
765 type={'link'} 760 type={'link'}
@@ -770,7 +765,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -770,7 +765,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
770 openModal(); 765 openModal();
771 }} 766 }}
772 > 767 >
773 - <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} /> 768 + <QxBaseIcon
  769 + style={{ fontSize: '16px' }}
  770 + type={'icon-app-terminal-box-line'}
  771 + />
774 高级设置 772 高级设置
775 </Button> 773 </Button>
776 </div> 774 </div>
@@ -783,34 +781,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -783,34 +781,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
783 /> 781 />
784 )} 782 )}
785 {props.isHideSearch && !!props.title && ( 783 {props.isHideSearch && !!props.title && (
786 - <div className={'header-title'}>  
787 - {props.title}  
788 - </div> 784 + <div className={'header-title'}>{props.title}</div>
789 )} 785 )}
790 </div> 786 </div>
791 <div className="tree-wrapper"> 787 <div className="tree-wrapper">
792 {props?.value?.length > 0 788 {props?.value?.length > 0
793 ? treeData?.length > 0 && 789 ? treeData?.length > 0 &&
794 - defaultExpandedKeys && (  
795 - <Tree  
796 - rootClassName={'qx-parameter-tree-list'}  
797 - treeData={treeData || []}  
798 - fieldNames={{  
799 - title: 'label',  
800 - key: 'id',  
801 - children: 'child',  
802 - }}  
803 - titleRender={(nodeData) => renderTitle(nodeData)}  
804 - style={{ height: '100%' }}  
805 - onDrop={onDrop}  
806 - draggable={{ icon: false }}  
807 - // draggable={!props.type}  
808 - blockNode  
809 - expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}  
810 - autoExpandParent={autoExpandParent}  
811 - onExpand={onExpand}  
812 - />  
813 - ) 790 + defaultExpandedKeys && (
  791 + <Tree
  792 + rootClassName={'qx-parameter-tree-list'}
  793 + treeData={treeData || []}
  794 + fieldNames={{
  795 + title: 'label',
  796 + key: 'id',
  797 + children: 'child',
  798 + }}
  799 + titleRender={(nodeData) => renderTitle(nodeData)}
  800 + style={{ height: '100%' }}
  801 + onDrop={onDrop}
  802 + draggable={{ icon: false }}
  803 + // draggable={!props.type}
  804 + blockNode
  805 + expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
  806 + autoExpandParent={autoExpandParent}
  807 + onExpand={onExpand}
  808 + />
  809 + )
814 : null} 810 : null}
815 </div> 811 </div>
816 <ParameterModal 812 <ParameterModal
  1 +/* stylelint-disable no-duplicate-selectors */
1 /* stylelint-disable selector-class-pattern */ 2 /* stylelint-disable selector-class-pattern */
2 @import '~@qx/ui/src/style/variable.less'; 3 @import '~@qx/ui/src/style/variable.less';
3 4
@@ -19,7 +20,7 @@ @@ -19,7 +20,7 @@
19 overflow: hidden; 20 overflow: hidden;
20 white-space: nowrap; 21 white-space: nowrap;
21 text-overflow: ellipsis; 22 text-overflow: ellipsis;
22 - -o-text-overflow: ellipsis; 23 + text-overflow: ellipsis;
23 } 24 }
24 } 25 }
25 26
@@ -32,20 +33,20 @@ @@ -32,20 +33,20 @@
32 margin-top: 20px; 33 margin-top: 20px;
33 34
34 .ant-tree .ant-tree-switcher { 35 .ant-tree .ant-tree-switcher {
35 - // margin-top: 6.5px;  
36 - width:44px;  
37 - margin-top: 11.5px;  
38 - margin-right: 7px;  
39 - display: flex;  
40 - justify-content: flex-end; 36 + // margin-top: 6.5px;
  37 + width: 34px;
  38 + margin-top: 11.5px;
  39 + margin-right: 10px;
  40 + display: flex;
  41 + justify-content: flex-end;
41 } 42 }
42 } 43 }
43 44
44 .border-none 45 .border-none
45 -.ant-select-focused:not(.ant-select-disabled).ant-select:not( 46 + .ant-select-focused:not(.ant-select-disabled).ant-select:not(
46 .ant-select-customize-input 47 .ant-select-customize-input
47 ) 48 )
48 -.ant-select-selector { 49 + .ant-select-selector {
49 border: none; 50 border: none;
50 box-shadow: none; 51 box-shadow: none;
51 } 52 }
@@ -67,7 +68,6 @@ @@ -67,7 +68,6 @@
67 align-items: center; 68 align-items: center;
68 margin-left: 10px; 69 margin-left: 10px;
69 70
70 - .ant-btn.ant-btn-icon-only,  
71 .ant-btn.ant-btn-icon-only { 71 .ant-btn.ant-btn-icon-only {
72 font-size: 16px; 72 font-size: 16px;
73 color: @N7; 73 color: @N7;
@@ -104,11 +104,11 @@ @@ -104,11 +104,11 @@
104 } 104 }
105 105
106 .title-btn-del { 106 .title-btn-del {
107 - display: none; 107 + opacity: 0.01;
108 } 108 }
109 109
110 .title-btn { 110 .title-btn {
111 - display: none; 111 + opacity: 0.01;
112 } 112 }
113 113
114 .select-tree { 114 .select-tree {
@@ -126,7 +126,7 @@ @@ -126,7 +126,7 @@
126 margin-bottom: 2px; 126 margin-bottom: 2px;
127 overflow: hidden; 127 overflow: hidden;
128 text-overflow: ellipsis; 128 text-overflow: ellipsis;
129 - transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s; 129 + transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
130 130
131 .ant-input-affix-wrapper { 131 .ant-input-affix-wrapper {
132 border-color: @N4; 132 border-color: @N4;
@@ -143,6 +143,18 @@ @@ -143,6 +143,18 @@
143 text-overflow: ellipsis; 143 text-overflow: ellipsis;
144 background-color: #fff; 144 background-color: #fff;
145 border-radius: 4px; 145 border-radius: 4px;
  146 +
  147 + .qx-field-setter {
  148 + border-width: 1px;
  149 + border-style: solid;
  150 + border-color: #d9d9d9;
  151 + border-radius: 6px;
  152 + // height: 32px;
  153 +
  154 + .qx-formula-cm {
  155 + padding-left: 10px !important;
  156 + }
  157 + }
146 } 158 }
147 159
148 .btn-high-del { 160 .btn-high-del {
@@ -163,7 +175,7 @@ @@ -163,7 +175,7 @@
163 justify-content: flex-start; 175 justify-content: flex-start;
164 flex-wrap: nowrap; 176 flex-wrap: nowrap;
165 177
166 - .range-cell{ 178 + .range-cell {
167 display: flex; 179 display: flex;
168 align-content: center; 180 align-content: center;
169 flex-wrap: nowrap; 181 flex-wrap: nowrap;
@@ -172,14 +184,12 @@ @@ -172,14 +184,12 @@
172 } 184 }
173 185
174 .ant-input-affix-wrapper, 186 .ant-input-affix-wrapper,
175 - .qx-field-setter { 187 + .qx-field-setter {
176 border-width: 0; 188 border-width: 0;
177 } 189 }
178 -  
179 -  
180 } 190 }
181 191
182 -.search-selected{ 192 +.search-selected {
183 .ant-input { 193 .ant-input {
184 color: #1890ff; 194 color: #1890ff;
185 } 195 }
@@ -227,7 +237,6 @@ @@ -227,7 +237,6 @@
227 text-align: center !important; 237 text-align: center !important;
228 } 238 }
229 239
230 -  
231 .json-editor { 240 .json-editor {
232 width: 90%; 241 width: 90%;
233 margin-bottom: 20px; 242 margin-bottom: 20px;
@@ -265,15 +274,15 @@ @@ -265,15 +274,15 @@
265 padding-top: 4px !important; 274 padding-top: 4px !important;
266 border-radius: 4px; 275 border-radius: 4px;
267 transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), 276 transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
268 - background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),  
269 - padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);  
270 -  
271 - .drop-icon{  
272 - // opacity: 0.1;  
273 - display: none;  
274 - // position: absolute;  
275 - // top: 10px;  
276 - // left: -49px; 277 + background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  278 + padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  279 +
  280 + .drop-icon {
  281 + position: absolute;
  282 + top: 10px;
  283 + left: -46px;
  284 + opacity: 1;
  285 + display: block;
277 } 286 }
278 287
279 &:hover { 288 &:hover {
@@ -281,24 +290,7 @@ @@ -281,24 +290,7 @@
281 290
282 .title-btn-del, 291 .title-btn-del,
283 .title-btn { 292 .title-btn {
284 - display: block;  
285 - }  
286 -  
287 - .drop-icon{  
288 - position: absolute;  
289 - top: 10px;  
290 - left: -39px;  
291 opacity: 1; 293 opacity: 1;
292 - display: block;  
293 - }  
294 -  
295 - .opt-left {  
296 - width: 65%;  
297 - }  
298 -  
299 - .ant-tree-treenode-draggable .ant-tree-draggable-icon {  
300 - padding-top: 6px;  
301 - opacity: 1 !important;  
302 } 294 }
303 } 295 }
304 } 296 }
@@ -312,46 +304,46 @@ @@ -312,46 +304,46 @@
312 } 304 }
313 } 305 }
314 306
315 - .parameter-setting-table-title{  
316 - font-weight: 500;  
317 - font-size: 14px;  
318 - line-height: 22px;  
319 - color: #7C7E86;  
320 - padding-left: 10px;  
321 - } 307 +.parameter-setting-table-title {
  308 + font-weight: 500;
  309 + font-size: 14px;
  310 + line-height: 22px;
  311 + color: #7c7e86;
  312 + padding-left: 10px;
  313 +}
322 314
323 - .parameter-setting-table{  
324 - .code-header{  
325 - display: flex;  
326 - } 315 +.parameter-setting-table {
  316 + .code-header {
  317 + display: flex;
  318 + }
327 319
328 - .ant-table-tbody .ant-table-row{  
329 - .drop-icon{  
330 - opacity: 0.01;  
331 - } 320 + .ant-table-tbody .ant-table-row {
  321 + // .drop-icon{
  322 + // opacity: 0.01;
  323 + // }
332 324
333 - &:hover {  
334 - .drop-icon{  
335 - opacity: 1;  
336 - }  
337 - }  
338 - }  
339 -  
340 - .table-expanded{  
341 - color: #7C7E86;  
342 - margin-left: 8px;  
343 - transition: transform 0.3s;  
344 - } 325 + // &:hover {
  326 + // .drop-icon{
  327 + // opacity: 1;
  328 + // }
  329 + // }
  330 + }
345 331
346 - .table-expanded-change{  
347 - transform: rotate(-90deg);  
348 - color: #7C7E86;  
349 - margin-left: 8px;  
350 - transition: transform 0.3s;  
351 - } 332 + .table-expanded {
  333 + color: #7c7e86;
  334 + margin-left: 8px;
  335 + transition: transform 0.3s;
352 } 336 }
353 337
354 - .parameter-setting-table .ant-table-cell{  
355 - height: 40px;  
356 - padding: 4px 16px 0 4px !important; 338 + .table-expanded-change {
  339 + transform: rotate(-90deg);
  340 + color: #7c7e86;
  341 + margin-left: 8px;
  342 + transition: transform 0.3s;
357 } 343 }
  344 +}
  345 +
  346 +.parameter-setting-table .ant-table-cell {
  347 + height: 40px;
  348 + padding: 4px 16px 0 4px !important;
  349 +}