田强 / qx-common · Commits

Commit 35420573a27575737c392c2952d8e86bdf2079c2

Authored by 邱嘉伟
1 parent 3b2cc12a

fix：高级设计器 交互逻辑修改 按ui稿进行修复

Inline Side-by-side
Showing 4 changed files with 228 additions and 547 deletions
@@ -340,7 +340,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({ @@ -340,7 +340,7 @@ const CodeEditor: React.FC<CodeHighLightProps> = ({
340 <CodeMirror 340 <CodeMirror
341 value={(valueLocal || '').toString()} 341 value={(valueLocal || '').toString()}
342 editorDidMount={(editor) => setCodeEditor(editor)} 342 editorDidMount={(editor) => setCodeEditor(editor)}
343 - onCursorActivity={(e) => console.log('e', e)} 343 + // onCursorActivity={(e) => console.log('e', e)}
344 // onCursorActivity={(e) => e?.showHint()} //没有会报错 344 // onCursorActivity={(e) => e?.showHint()} //没有会报错
345 options={{ 345 options={{
346 // mode: 'text/html', 346 // mode: 'text/html',
@@ -15,14 +15,13 @@ import { @@ -15,14 +15,13 @@ import {
15 Select, 15 Select,
16 Space, 16 Space,
17 Table, 17 Table,
  18 + Divider,
18 message, 19 message,
19 } from 'antd'; 20 } from 'antd';
20 import type { FormInstance } from 'antd/es/form'; 21 import type { FormInstance } from 'antd/es/form';
21 import React, { 22 import React, {
22 useCallback, 23 useCallback,
23 - useContext,  
24 useEffect, 24 useEffect,
25 - useRef,  
26 useState, 25 useState,
27 } from 'react'; 26 } from 'react';
28 import JSONEditor from './codeMirror'; 27 import JSONEditor from './codeMirror';
@@ -33,10 +32,10 @@ import { @@ -33,10 +32,10 @@ import {
33 typeTranslateFieIdtype, 32 typeTranslateFieIdtype,
34 typeTranslateWidget, 33 typeTranslateWidget,
35 typeTranslateGrouptype, 34 typeTranslateGrouptype,
36 - typeTranslateItemtype, 35 + // typeTranslateItemtype,
37 } from './constant'; 36 } from './constant';
38 // import { Controlled as CodeMirror } from 'react-codemirror2' 37 // import { Controlled as CodeMirror } from 'react-codemirror2'
39 -import { cloneDeep, debounce, isEmpty } from 'lodash-es'; 38 +import { cloneDeep } from 'lodash-es';
40 import moment from 'dayjs'; 39 import moment from 'dayjs';
41 import { QxBaseIcon } from '@qx/common'; 40 import { QxBaseIcon } from '@qx/common';
42 import Icon from '@ant-design/icons'; 41 import Icon from '@ant-design/icons';
@@ -113,6 +112,8 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { @@ -113,6 +112,8 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
113 // setAutoExpandParent(true); 112 // setAutoExpandParent(true);
114 }; 113 };
115 114
  115 +
  116 +
116 const ParameterModal: React.FC<ParameterSettingProps> = (props) => { 117 const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
117 const { 118 const {
118 visible, 119 visible,
@@ -143,6 +144,22 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -143,6 +144,22 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
143 return true; 144 return true;
144 }; 145 };
145 146
  147 + const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
  148 + const widget = typeTranslateWidget(item.type);
  149 + if (widget === 'userSelector') {
  150 + return [];
  151 + // return [{key: 'MYSELF', value: "当前用户"}]
  152 + }
  153 + if (widget === 'orgSelector') {
  154 + // return [{key: 'MY_ORG', value: "当前人所在部门"}]
  155 + return [];
  156 + }
  157 + if (widget === 'qxDatetime') {
  158 + return [{ key: 'NOW', value: '当前时间' }];
  159 + }
  160 + return undefined;
  161 + };
  162 +
146 const checkShowTree = (_data: any) => { 163 const checkShowTree = (_data: any) => {
147 if (_data.type == 'ARRAY') { 164 if (_data.type == 'ARRAY') {
148 if (_data.child && _data.child.length > 0) { 165 if (_data.child && _data.child.length > 0) {
@@ -162,24 +179,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -162,24 +179,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
162 ), 179 ),
163 dataIndex: 'code', 180 dataIndex: 'code',
164 width: '12%', 181 width: '12%',
165 - editable: true,  
166 key: 'code', 182 key: 'code',
167 - // render: (text, record) => (  
168 - // < Form.Item  
169 - // name={'code' + record.id}  
170 - // rules={  
171 - // [{  
172 - // required: true,  
173 - // message: '不能为空!',  
174 - // },  
175 - // ]}  
176 - // // initialValue={record.code}  
177 - // >  
178 - // <Input  
179 - // defaultValue={record.code}  
180 - // disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'code')} />  
181 - // </Form.Item >  
182 - // ), 183 + render: (text, record) => (
  184 + < Form.Item
  185 + name={'code' + record.id}
  186 + style={{ margin: 0 }}
  187 + // initialValue={record.code}
  188 + >
  189 + <Input
  190 + defaultValue={record.code}
  191 + bordered={false}
  192 + disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'code')} />
  193 + </Form.Item >
  194 + ),
183 }, 195 },
184 { 196 {
185 title: ( 197 title: (
@@ -190,24 +202,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -190,24 +202,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
190 ), 202 ),
191 dataIndex: 'title', 203 dataIndex: 'title',
192 width: '12%', 204 width: '12%',
193 - editable: true,  
194 key: 'title', 205 key: 'title',
195 - // render: (text, record) => (  
196 - // <Form.Item  
197 - // name={'title' + record.id}  
198 - // rules={[  
199 - // {  
200 - // required: true,  
201 - // message: '不能为空!',  
202 - // },  
203 - // ]}  
204 - // // initialValue={record.title}  
205 - // >  
206 - // <Input  
207 - // defaultValue={record.title}  
208 - // disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'title')} />  
209 - // </Form.Item>  
210 - // ), 206 + render: (text, record) => (
  207 + <Form.Item
  208 + name={'title' + record.id}
  209 + style={{ margin: 0 }}
  210 + // initialValue={record.title}
  211 + >
  212 + <Input
  213 + defaultValue={record.title}
  214 + bordered={false}
  215 + disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'title')} />
  216 + </Form.Item>
  217 + ),
211 }, 218 },
212 { 219 {
213 title: ( 220 title: (
@@ -217,55 +224,73 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -217,55 +224,73 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
217 </div> 224 </div>
218 ), 225 ),
219 dataIndex: 'type', 226 dataIndex: 'type',
220 - editable: true,  
221 width: '8%', 227 width: '8%',
222 key: 'type', 228 key: 'type',
223 - render: (text) =>  
224 - // <Form.Item  
225 - // name={'type' + record.id}  
226 - // rules={[  
227 - // {  
228 - // required: true,  
229 - // message: '不能为空!',  
230 - // },  
231 - // ]}  
232 - // initialValue={record.type}  
233 - // >  
234 - // <Select  
235 - // disabled={record.disabled}  
236 - // onSelect={(e) => handleChange(e, record, 'type')} >  
237 - valueOptions.map((item) => {  
238 - if (text == item.key) {  
239 - return <span key={item.key}>{item.title}</span>;  
240 - }  
241 - }),  
242 - // </Select>  
243 - // </Form.Item> 229 + render: (text, record) =>
  230 + <Form.Item
  231 + style={{ margin: 0 }}
  232 + name={'type' + record.id}
  233 + // initialValue={record.type}
  234 + >
  235 + <Select
  236 + bordered={false}
  237 + disabled={record.disabled}
  238 + defaultValue={record.type}
  239 + onSelect={(e) => handleChange(e, record, 'type')} >
  240 + {
  241 + valueOptions.map((item) => {
  242 + return <Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>;
  243 + })
  244 + }
  245 + </Select>
  246 + </Form.Item>
244 }, 247 },
245 { 248 {
246 title: '默认值', 249 title: '默认值',
247 dataIndex: 'valueMapping', 250 dataIndex: 'valueMapping',
248 - width: '15%',  
249 - editable: true, 251 + width: '13%',
250 key: 'valueMapping', 252 key: 'valueMapping',
251 - render: (text) =>  
252 - text?.mappingValues || [].map((item) => {  
253 - return <span key={item}>{item.indexOf('-') > -1 ? item : ''}</span>;  
254 - }), 253 + render: (text, record) =>
  254 + <div className="editable-cell ">
  255 + <QxFieldSetter
  256 + value={record.valuesObj || []}
  257 + params={{ appCode: 'appCode', useId: true }}
  258 + valueOptions={getValueOptions(record)}
  259 + field={record.type}
  260 + widget={typeTranslateWidget(record.type)}
  261 + fieldType={typeTranslateFieIdtype(record.type)}
  262 + fieldGroupType={typeTranslateGrouptype(record.type)}
  263 + isMixValue={typeTranslateFieIdtype(record.type) === 'STRING'}
  264 + isMultiple={false}
  265 + colsTree={props.nodeItem}
  266 + showFieldOpt={!(nodeType === 'START')}
  267 + // onChange={debounce((val) => handleField(val), 700)}
  268 + onChange={(val) => handleChangeField(val, record)}
  269 + />
  270 + </div>
255 }, 271 },
256 { 272 {
257 title: '参数说明', 273 title: '参数说明',
258 dataIndex: 'description', 274 dataIndex: 'description',
259 - editable: true,  
260 key: 'description', 275 key: 'description',
261 render: (text, record) => ( 276 render: (text, record) => (
262 - <span key={record.id}>{text}</span> 277 + <Form.Item
  278 + name={'description' + record.id}
  279 + style={{ margin: 0 }}
  280 + // initialValue={text}
  281 + >
  282 + <Input
  283 + key={inputKey}
  284 + defaultValue={text}
  285 + bordered={false}
  286 + disabled={record.disabled} onBlur={(e) => handleChange(e, record, 'description')} />
  287 + </Form.Item>
263 ), 288 ),
264 }, 289 },
265 { 290 {
266 title: '操作', 291 title: '操作',
267 key: 'action', 292 key: 'action',
268 - width: '10%', 293 + width: '8%',
269 render: (text, record) => { 294 render: (text, record) => {
270 const isShowAdd = (record && checkShowAdd(record)); 295 const isShowAdd = (record && checkShowAdd(record));
271 const isShowTree = (record && checkShowTree(record)); 296 const isShowTree = (record && checkShowTree(record));
@@ -309,209 +334,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -309,209 +334,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
309 dataIndex: 'qxProps', 334 dataIndex: 'qxProps',
310 editable: true, 335 editable: true,
311 key: 'qxProps', 336 key: 'qxProps',
312 - render: (text: any, record: any) => {  
313 - switch (record.type) {  
314 - case 'FORM':  
315 - case 'USER':  
316 - case 'ORG':  
317 - return (  
318 - <div  
319 - key={record.id}  
320 - >  
321 - <QxFormSelect  
322 - value={record?.qxProps || {}}  
323 - appId={props?.appId}  
324 - placeholder={'选择表单'}  
325 - popupOnBody={true}  
326 - onChange={(val: any) => {  
327 - props.handleChange(val, record, 'qxProps');  
328 - }}  
329 - request={props?.request}  
330 - preview  
331 - />  
332 - </div>  
333 - );  
334 - default:  
335 - return (  
336 - <>  
337 - <div key={record.id}>  
338 - <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format(  
339 - formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min}  
340 - </span>  
341 - {!!text?.min || text?.min >= 0 && (  
342 - <Space style={{marginLeft: 5, marginRight: 5}}>-</Space>  
343 - )}  
344 - <span>{record.type == 'TIME' ? text?.max ? moment(text.max).format(  
345 - formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.max}  
346 - </span>  
347 - </div>  
348 - </>  
349 - )  
350 - }  
351 - },  
352 - };  
353 -  
354 - const require = {  
355 - title: '必填',  
356 - dataIndex: 'required',  
357 - editable: true,  
358 - key: 'required',  
359 - width: '5%',  
360 - render: (text, record) => (  
361 - <span key={record.id}>{text ? '是' : '否'}</span>  
362 - // <Form.Item  
363 - // name={'required' + record.id}  
364 - // initialValue={record.required}  
365 - // >  
366 - // <Select  
367 - // disabled={record.disabled}  
368 - // onSelect={(e) => props.handleChange(e, record, 'required')}  
369 - // >  
370 - // <Select.Option value={true}>是</Select.Option>  
371 - // <Select.Option value={false}>否</Select.Option>  
372 - // </Select>  
373 - // </Form.Item>  
374 - ),  
375 - };  
376 -  
377 - if (nodeType !== 'END') {  
378 - columns.splice(3, 0, range, require)  
379 - }  
380 -  
381 - interface EditableRowProps {  
382 - index: number;  
383 - }  
384 -  
385 - const EditableRow: React.FC<EditableRowProps> = ({ ..._props }) => {  
386 - const [form] = Form.useForm();  
387 - return (  
388 - <Form form={form} component={false}>  
389 - <EditableContext.Provider value={form}>  
390 - <tr {..._props} />  
391 - </EditableContext.Provider>  
392 - </Form>  
393 - );  
394 - };  
395 -  
396 - interface EditableCellProps {  
397 - title: React.ReactNode;  
398 - editable: boolean;  
399 - children: React.ReactNode;  
400 - dataIndex: keyof any;  
401 - record: any;  
402 - index: number;  
403 - // handleSave: (record: Item) => void;  
404 - }  
405 -  
406 - const EditableCell: React.FC<EditableCellProps> = ({  
407 - title,  
408 - editable,  
409 - children,  
410 - dataIndex,  
411 - record,  
412 - index,  
413 - ...restProps  
414 - }) => {  
415 - const [editing, setEditing] = useState(false);  
416 - const inputRef = useRef<any>(null);  
417 - const form = useContext(EditableContext)!;  
418 - const qxProps = record?.qxProps || {};  
419 - const [currentNode, setCurrentNode] = useState<any>('');  
420 -  
421 - useEffect(() => {  
422 - if (editing) {  
423 - if (inputRef.current) {  
424 - inputRef.current!.focus();  
425 - }  
426 - }  
427 - }, [editing]);  
428 -  
429 - const toggleEdit = () => {  
430 - // if (_index != currentNode) {  
431 - // setEditing(!editing);  
432 - // }  
433 - // setCurrentNode(_index)  
434 - setEditing(!editing);  
435 - // if (dataIndex !== 'qxProps') {  
436 - form.setFieldsValue({ [dataIndex]: record[dataIndex] });  
437 - // }  
438 - };  
439 -  
440 - const toggleEdit1 = (e: any) => {  
441 - const values = form.getFieldsValue();  
442 - e.persist();  
443 - if (e.target.tagName == 'DIV') {  
444 - setCurrentNode(e.target)  
445 - setEditing(!editing);  
446 - if (currentNode) {  
447 - props.handleChange(values?.newQxProps, record, 'qxProps')  
448 - }  
449 - }  
450 - };  
451 -  
452 - const save = async (code: string) => {  
453 - const isProps = code.indexOf('qxProps');  
454 - const _newCode = isProps > -1 ? code.slice(8) : '';  
455 - // e.persist()  
456 - try {  
457 - const values = await form.validateFields();  
458 - const newValue = _newCode  
459 - ? values[dataIndex][_newCode]  
460 - : values[dataIndex];  
461 - props.handleChange(newValue, record, code);  
462 - // toggleEdit();  
463 - } catch (errInfo) {  
464 - console.warn('Save failed:', errInfo);  
465 - }  
466 - };  
467 -  
468 - let childNode = children;  
469 -  
470 - // const rules = dataIndex == 'id' || 'title' || 'code' ?  
471 - // [{  
472 - // required: true,  
473 - // message: `不能为空!`,  
474 - // },] : []  
475 -  
476 - // 高级设置 取值范围  
477 - const qxPropsRange = useCallback(() => { 337 + render: (qxProps: any, record: any) => {
478 switch (record.type) { 338 switch (record.type) {
479 case 'STRING': 339 case 'STRING':
480 return ( 340 return (
481 <div 341 <div
482 key={record.id} 342 key={record.id}
483 - ref={inputRef}  
484 - className="editable-center-cell"  
485 - onBlur={(e) => toggleEdit1(e)} tabIndex={  
486 - 0  
487 - } 343 + className="editable-cell"
488 > 344 >
489 <Form.Item 345 <Form.Item
490 - name={['newQxProps', 'min']} 346 + name={'qxProps-min'}
491 style={{ margin: 0 }} 347 style={{ margin: 0 }}
492 - initialValue={qxProps.min}  
493 > 348 >
494 <InputNumber 349 <InputNumber
  350 + bordered={false}
495 min={0} 351 min={0}
496 precision={0} 352 precision={0}
497 - // defaultValue={qxProps.min}  
498 - // onChange={onQxpropsChangen}  
499 - // onBlur={() => save('qxProps-min')} 353 + onBlur={(e) => handleChange(e, record, 'qxProps-min')}
  354 + defaultValue={qxProps.min}
500 placeholder="最小长度" 355 placeholder="最小长度"
501 /> 356 />
502 </Form.Item> 357 </Form.Item>
503 - &nbsp; - &nbsp; 358 + <div className='range-cell'>-</div>
504 <Form.Item 359 <Form.Item
505 - name={['newQxProps', 'max']} 360 + name={'qxProps-max'}
506 style={{ margin: 0 }} 361 style={{ margin: 0 }}
507 - initialValue={qxProps.max}  
508 > 362 >
509 <InputNumber 363 <InputNumber
510 min={0} 364 min={0}
  365 + bordered={false}
511 precision={0} 366 precision={0}
512 - // dataIndex={["qxProps", "max"]}  
513 - // defaultValue={qxProps.max}  
514 - // onBlur={() => save('qxProps-max')} 367 + defaultValue={qxProps.max}
  368 + onBlur={(e) => handleChange(e, record, 'qxProps-max')}
515 placeholder="最大长度" 369 placeholder="最大长度"
516 /> 370 />
517 </Form.Item> 371 </Form.Item>
@@ -521,75 +375,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -521,75 +375,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
521 return ( 375 return (
522 <div 376 <div
523 key={record.id} 377 key={record.id}
524 - ref={inputRef}  
525 - className="editable-around-cell"  
526 - onBlur={(e) => toggleEdit1(e)} tabIndex={  
527 - 0  
528 - } 378 + className="editable-cell"
529 > 379 >
530 - <div style={{ display: 'flex' }}> 380 + <div className='range-cell'>
531 <Form.Item 381 <Form.Item
532 - initialValue={qxProps.min}  
533 - name={['newQxProps', 'min']} 382 + name={'qxProps-min'}
534 style={{ margin: 0 }} 383 style={{ margin: 0 }}
535 > 384 >
536 <InputNumber 385 <InputNumber
537 precision={qxProps.precision || 0} 386 precision={qxProps.precision || 0}
  387 + bordered={false}
538 size='small' 388 size='small'
539 - // defaultValue={qxProps.min}  
540 - // onBlur={() => save('qxProps-min')} 389 + defaultValue={qxProps.min}
  390 + onBlur={(e) => handleChange(e, record, 'qxProps-min')}
541 style={{ width: '110px' }} 391 style={{ width: '110px' }}
542 placeholder="最小值" 392 placeholder="最小值"
543 /> 393 />
544 </Form.Item> 394 </Form.Item>
545 -  
546 - &nbsp; - &nbsp; 395 + -
547 <Form.Item 396 <Form.Item
548 - initialValue={qxProps.max}  
549 style={{ margin: 0 }} 397 style={{ margin: 0 }}
550 - name={['newQxProps', 'max']} 398 + name={'qxProps-max'}
551 > 399 >
552 <InputNumber 400 <InputNumber
  401 + bordered={false}
553 size='small' 402 size='small'
554 precision={qxProps.precision || 0} 403 precision={qxProps.precision || 0}
555 - // defaultValue={qxProps.max}  
556 - // onBlur={() => save('qxProps-max')} 404 + defaultValue={qxProps.max}
  405 + onBlur={(e) => handleChange(e, record, 'qxProps-max')}
557 style={{ width: '110px' }} 406 style={{ width: '110px' }}
558 placeholder="最大值" 407 placeholder="最大值"
559 /> 408 />
560 </Form.Item> 409 </Form.Item>
561 - 410 + <Divider type="vertical" style={{ height: '16px' }} />
  411 + </div>
  412 + <div className='range-cell'>
  413 + <Form.Item
  414 + style={{ margin: 0 }}
  415 + name={'qxProps-precision'}
  416 + >
  417 + <InputNumber
  418 + bordered={false}
  419 + size='small'
  420 + precision={0}
  421 + min={0}
  422 + max={8}
  423 + defaultValue={qxProps.precision}
  424 + onBlur={(e) => handleChange(e, record, 'qxProps-precision')}
  425 + placeholder="小数位数"
  426 + />
  427 + </Form.Item>
562 </div> 428 </div>
563 - <Form.Item  
564 - initialValue={qxProps.precision}  
565 - style={{ margin: 0 }}  
566 - name={['newQxProps', 'precision']}  
567 - >  
568 - <InputNumber  
569 - size='small'  
570 - // formatter={decimalCheck}  
571 - precision={0}  
572 - min={0}  
573 - max={8}  
574 - // defaultValue={qxProps.precision}  
575 - // onBlur={() => save('qxProps-precision')}  
576 - placeholder="小数位数"  
577 - />  
578 - </Form.Item>  
579 </div> 429 </div>
580 ); 430 );
581 case 'TIME': 431 case 'TIME':
582 return ( 432 return (
583 <div 433 <div
584 key={record.id} 434 key={record.id}
585 - ref={inputRef}  
586 - className="editable-around-cell"  
587 - onBlur={(e) => toggleEdit1(e)} tabIndex={  
588 - 0  
589 - } 435 + className="editable-cell"
590 > 436 >
591 - <div> 437 + <div className='range-cell'>
592 <DatePicker 438 <DatePicker
  439 + bordered={false}
593 size='small' 440 size='small'
594 defaultValue={ 441 defaultValue={
595 qxProps?.min 442 qxProps?.min
@@ -597,17 +444,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -597,17 +444,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
597 : undefined 444 : undefined
598 } 445 }
599 format={formatEnum[qxProps?.format]} 446 format={formatEnum[qxProps?.format]}
600 - // onChange={dateChange}  
601 style={{ width: '110px' }} 447 style={{ width: '110px' }}
602 - // onBlur={() => save('qxProps-min')}  
603 showTime 448 showTime
604 - onSelect={(e) => props.handleChange(e, record, 'qxProps-min')} 449 + onChange={(e) => handleChange(e, record, 'qxProps-min')}
605 placeholder="开始日期" 450 placeholder="开始日期"
606 /> 451 />
607 - {/* <DatePicker defaultValue={moment(qxProps.min)} onBlur={() => save('qxProps-min')} placeholder='开始日期' /> */}  
608 - &nbsp; ~ &nbsp; 452 + -
609 <DatePicker 453 <DatePicker
610 size='small' 454 size='small'
  455 + bordered={false}
611 defaultValue={ 456 defaultValue={
612 qxProps?.min 457 qxProps?.min
613 ? moment(qxProps.max) 458 ? moment(qxProps.max)
@@ -615,36 +460,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -615,36 +460,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
615 } 460 }
616 format={formatEnum[qxProps?.format]} 461 format={formatEnum[qxProps?.format]}
617 style={{ width: '110px' }} 462 style={{ width: '110px' }}
618 - // onChange={dateChange}  
619 showTime 463 showTime
620 - // onBlur={toggleEdit}  
621 - onSelect={(e) => props.handleChange(e, record, 'qxProps-max')} 464 + onChange={(e) => handleChange(e, record, 'qxProps-max')}
622 placeholder="结束日期" 465 placeholder="结束日期"
623 /> 466 />
624 - {/* <DatePicker defaultValue={moment(qxProps.max)} onBlur={() => save('qxProps-max')} placeholder='结束日期' /> */} 467 + <Divider type="vertical" style={{ height: '16px' }} />
  468 + </div>
  469 + <div className='range-cell'>
  470 + <Select
  471 + size='small'
  472 + style={{ width: '90px' }}
  473 + bordered={false}
  474 + placeholder="格式"
  475 + popupMatchSelectWidth={false}
  476 + defaultValue={qxProps.format}
  477 + onSelect={(e) =>
  478 + handleChange(e, record, 'qxProps-format')
  479 + }
  480 + >
  481 + {timeFormat.map((item) => {
  482 + return (
  483 + <Select.Option
  484 + style={{ width: '200px' }}
  485 + key={item.value}
  486 + value={item.value}
  487 + >
  488 + {item.label}
  489 + </Select.Option>
  490 + );
  491 + })}
  492 + </Select>
625 </div> 493 </div>
626 - <Select  
627 - size='small'  
628 - style={{ width: '90px' }}  
629 - placeholder="格式"  
630 - popupMatchSelectWidth={false}  
631 - defaultValue={qxProps.format}  
632 - onSelect={(e) =>  
633 - props.handleChange(e, record, 'qxProps-format')  
634 - }  
635 - >  
636 - {timeFormat.map((item) => {  
637 - return (  
638 - <Select.Option  
639 - style={{ width: '200px' }}  
640 - key={item.value}  
641 - value={item.value}  
642 - >  
643 - {item.label}  
644 - </Select.Option>  
645 - );  
646 - })}  
647 - </Select>  
648 </div> 494 </div>
649 ); 495 );
650 case 'FORM': 496 case 'FORM':
@@ -652,13 +498,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -652,13 +498,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
652 case 'ORG': 498 case 'ORG':
653 return ( 499 return (
654 <div 500 <div
  501 + className='editable-cell'
655 key={record.id} 502 key={record.id}
656 - ref={inputRef}  
657 - className="editable-around-cell"  
658 - // onBlur={(e) => toggleEdit1(e)}  
659 - tabIndex={  
660 - 0  
661 - }  
662 > 503 >
663 <QxFormSelect 504 <QxFormSelect
664 value={qxProps} 505 value={qxProps}
@@ -666,7 +507,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -666,7 +507,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
666 placeholder={'选择表单'} 507 placeholder={'选择表单'}
667 popupOnBody={true} 508 popupOnBody={true}
668 onChange={(val: any) => { 509 onChange={(val: any) => {
669 - props.handleChange(val, record, 'qxProps'); 510 + handleChange(val, record, 'qxProps');
670 }} 511 }}
671 disabled={['USER', 'ORG'].includes(record.type)} 512 disabled={['USER', 'ORG'].includes(record.type)}
672 request={props?.request} 513 request={props?.request}
@@ -674,192 +515,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -674,192 +515,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
674 </div> 515 </div>
675 ); 516 );
676 default: 517 default:
677 - return (  
678 - <div  
679 - ref={inputRef}  
680 - /* onBlur={(e) => toggleEdit1(e)} */ tabIndex={0}  
681 - >  
682 - <Input placeholder="无" disabled />  
683 - </div>  
684 - );  
685 - }  
686 - }, [currentNode]  
687 - )  
688 -  
689 - const getValueOptions = (item: any): ValueOptionProps[] | undefined => {  
690 - const widget = typeTranslateWidget(item.type);  
691 - if (widget === 'userSelector') {  
692 - return [];  
693 - // return [{key: 'MYSELF', value: "当前用户"}]  
694 - }  
695 - if (widget === 'orgSelector') {  
696 - // return [{key: 'MY_ORG', value: "当前人所在部门"}]  
697 - return [];  
698 - }  
699 - if (widget === 'qxDatetime') {  
700 - return [{ key: 'NOW', value: '当前时间' }];  
701 - }  
702 - return undefined;  
703 - };  
704 -  
705 - const handleField = (val) => {  
706 - if (!val || isEmpty(val)) {  
707 - return;  
708 - }  
709 - if (val[0].extVal) {  
710 - handleChangeField(val, record)  
711 - }  
712 - if (val[0].value === 'NOW' || val[0].value.indexOf('action_date') > -1) {  
713 - } else {  
714 - handleChangeField(val, record)  
715 } 518 }
716 - }  
717 -  
718 - const qxPropsDefault = () => {  
719 - // const valuesObj = [{  
720 - // type: typeTranslateItemtype(record.type),  
721 - // value: record.mappingValues || [],  
722 - // }]  
723 - // record.valuesObj = !record.valuesObj ? valuesObj : record.valuesObj  
724 - return (  
725 - <div>  
726 - <QxFieldSetter  
727 - value={record.valuesObj || []}  
728 - params={{ appCode: 'appCode', useId: true }}  
729 - valueOptions={getValueOptions(record)}  
730 - field={record.type}  
731 - widget={typeTranslateWidget(record.type)}  
732 - fieldType={typeTranslateFieIdtype(record.type)}  
733 - fieldGroupType={typeTranslateGrouptype(record.type)}  
734 - isMixValue={typeTranslateFieIdtype(record.type) === 'STRING'}  
735 - isMultiple={false}  
736 - colsTree={props.nodeItem}  
737 - showFieldOpt={!(nodeType === 'START')}  
738 - onChange={debounce((val) => handleField(val), 700)}  
739 - />  
740 - </div>  
741 - );  
742 - };  
743 -  
744 - const qxPropsRemark = () => {  
745 - return (  
746 - <Input  
747 - defaultValue={record?.description}  
748 - ref={inputRef}  
749 - onBlur={() => save('description')}  
750 - />  
751 - );  
752 - }; 519 + },
  520 + };
753 521
754 - if (editable) {  
755 - childNode = editing ? (  
756 - <Form.Item  
757 - style={{ margin: 0 }}  
758 - // @ts-ignore  
759 - name={dataIndex}  
760 - // rules={rules}  
761 - >  
762 - {dataIndex == 'type' ? (  
763 - <Select  
764 - ref={inputRef}  
765 - onBlur={() => toggleEdit(index)}  
766 - onSelect={(e) => handleChange(e, record, dataIndex)}  
767 - >  
768 - {valueOptions.map((item) => {  
769 - return (  
770 - <Select.Option key={item.key} value={item.key}>  
771 - {item.title}  
772 - </Select.Option>  
773 - );  
774 - })}  
775 - </Select>  
776 - ) : dataIndex == 'required' ? (  
777 - <Select  
778 - ref={inputRef}  
779 - onBlur={() => toggleEdit(index)}  
780 - onSelect={(e) => props.handleChange(e, record, dataIndex)}  
781 - >  
782 - <Select.Option value={true}>是</Select.Option>  
783 - <Select.Option value={false}>否</Select.Option>  
784 - </Select>  
785 - ) : dataIndex == 'qxProps' ? (  
786 - title == '取值范围' ? (  
787 - qxPropsRange()  
788 - ) : (  
789 - qxPropsRemark()  
790 - )  
791 - ) : dataIndex == 'valueMapping' ?  
792 - qxPropsDefault() :  
793 - (  
794 - // @ts-ignore  
795 - <Input  
796 - ref={inputRef}  
797 - onPressEnter={save}  
798 - onBlur={() => save(dataIndex)}  
799 - />  
800 - )}  
801 - </Form.Item>  
802 - ) : (  
803 - <div  
804 - className="editable-cell-value-wrap"  
805 - onClick={() => toggleEdit(index)} 522 + const require = {
  523 + title: '必填',
  524 + dataIndex: 'required',
  525 + editable: true,
  526 + key: 'required',
  527 + width: '5%',
  528 + render: (text, record) => (
  529 + <Form.Item
  530 + name={'required' + record.id}
  531 + style={{ margin: 0 }}
  532 + >
  533 + <Select
  534 + defaultValue={text || false}
  535 + bordered={false}
  536 + disabled={record.disabled}
  537 + onSelect={(e) => props.handleChange(e, record, 'required')}
806 > 538 >
807 - {children}  
808 - </div>  
809 - );  
810 - } else {  
811 - childNode = (  
812 - <div className="editable-cell-value-wrap-none">{children}</div>  
813 - );  
814 - }  
815 - return <td {...restProps}>{childNode}</td>; 539 + <Select.Option value={true}>是</Select.Option>
  540 + <Select.Option value={false}>否</Select.Option>
  541 + </Select>
  542 + </Form.Item >
  543 + ),
816 }; 544 };
817 545
818 - // type EditableTableProps = Parameters<typeof Table>[0];  
819 -  
820 - // interface DataType {  
821 - // key: React.Key;  
822 - // name: string;  
823 - // age: string;  
824 - // address: string;  
825 - // }  
826 -  
827 - // type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;  
828 -  
829 - // const handleSave = (row: DataType) => {  
830 - // const newData = [...dataSource];  
831 - // const index = newData.findIndex(item => row.key === item.key);  
832 - // const item = newData[index];  
833 - // newData.splice(index, 1, {  
834 - // ...item,  
835 - // ...row,  
836 - // });  
837 - // setDataSource(newData);  
838 - // };  
839 -  
840 - const components = {  
841 - body: {  
842 - row: EditableRow,  
843 - cell: EditableCell,  
844 - },  
845 - }; 546 + if (nodeType !== 'END') {
  547 + columns.splice(3, 0, range, require)
  548 + }
846 549
847 - const columns1 = columns.map((col) => {  
848 - if (!col.editable) {  
849 - return col;  
850 - }  
851 - return {  
852 - ...col,  
853 - onCell: (record: any, index: any) => ({  
854 - index,  
855 - record,  
856 - editable: !record.disabled,  
857 - dataIndex: col.dataIndex,  
858 - title: col.title,  
859 - // handleSave,  
860 - }),  
861 - };  
862 - });  
863 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1'; 550 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
864 const [isShowJson, setIsShowJson] = useState<any>(false); 551 const [isShowJson, setIsShowJson] = useState<any>(false);
865 const [midData, setMidData] = useState<any>([]); 552 const [midData, setMidData] = useState<any>([]);
@@ -869,15 +556,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -869,15 +556,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
869 handleAdd(''); 556 handleAdd('');
870 } 557 }
871 } 558 }
872 - // easyTableRef.current.refresh()  
873 - // setTimeout(() => {  
874 - // setNewData(data)  
875 - // }, 0)  
876 - // form.setFieldsValue(data) 559 +
877 }, [visible]); 560 }, [visible]);
878 561
879 - // useEffect(() => {  
880 - // }, []);  
881 //展开 所有子节点 562 //展开 所有子节点
882 const generateTreeData = useCallback( 563 const generateTreeData = useCallback(
883 (_data: any[], _keywords?: string): any[] => { 564 (_data: any[], _keywords?: string): any[] => {
@@ -922,7 +603,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -922,7 +603,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
922 nodes = []; 603 nodes = [];
923 } 604 }
924 nodes?.forEach( 605 nodes?.forEach(
925 - (item: any) => (item.style.borderTop = '2px dashed #1890ff'), 606 + (item: any) => (item.style.borderTop = '2px solid #1764FF'),
926 ); 607 );
927 }, 608 },
928 onDragLeave: (ev: any) => { 609 onDragLeave: (ev: any) => {
@@ -1106,26 +787,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -1106,26 +787,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
1106 </Col> 787 </Col>
1107 </> 788 </>
1108 ) : ( 789 ) : (
1109 - // <Form form={form}>  
1110 <Table 790 <Table
1111 - components={components} 791 + // components={components}
1112 expandable={{ 792 expandable={{
1113 defaultExpandAllRows: true, 793 defaultExpandAllRows: true,
1114 childrenColumnName: 'child' 794 childrenColumnName: 'child'
1115 }} 795 }}
1116 onRow={() => onRow()} 796 onRow={() => onRow()}
1117 scroll={{ x: 960 }} 797 scroll={{ x: 960 }}
1118 - rowClassName={() => 'editable-row'} 798 + // rowClassName={() => 'editable-row'}
1119 bordered 799 bordered
1120 pagination={false} 800 pagination={false}
1121 size={'small'} 801 size={'small'}
1122 // @ts-ignore 802 // @ts-ignore
1123 - columns={columns1} 803 + columns={columns}
1124 dataSource={data} 804 dataSource={data}
1125 rowKey={'id'} 805 rowKey={'id'}
1126 /> 806 />
1127 ) 807 )
1128 - // </Form >  
1129 } 808 }
1130 </Modal> 809 </Modal>
1131 </> 810 </>
@@ -20,7 +20,7 @@ import { @@ -20,7 +20,7 @@ import {
20 typeTranslateFieIdtype, 20 typeTranslateFieIdtype,
21 typeTranslateWidget, 21 typeTranslateWidget,
22 typeTranslateGrouptype, 22 typeTranslateGrouptype,
23 - typeTranslateItemtype, 23 + // typeTranslateItemtype,
24 } from './constant'; 24 } from './constant';
25 25
26 import { cloneDeep, isEmpty } from 'lodash-es'; 26 import { cloneDeep, isEmpty } from 'lodash-es';
@@ -276,11 +276,18 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -276,11 +276,18 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
276 ..._qxProps 276 ..._qxProps
277 }; 277 };
278 } else { 278 } else {
279 - if (code == 'type') {  
280 - treeList[i].qxProps = getDefaultQxProps(value);  
281 - }  
282 treeList[i][code] = value; 279 treeList[i][code] = value;
283 } 280 }
  281 + if (code == 'type') {
  282 + treeList[i].qxProps = getDefaultQxProps(value);
  283 + treeList[i].description = '';
  284 + treeList[i].valueMapping = {
  285 + ...data.valueMapping,
  286 + mappingValues: [],
  287 + };
  288 + treeList[i].valuesObj = [];
  289 + setInputKey(inputKey + 1);
  290 + }
284 return; 291 return;
285 } else if (treeList[i].child) { 292 } else if (treeList[i].child) {
286 loopChangeTree(treeList[i].child); 293 loopChangeTree(treeList[i].child);
@@ -564,8 +571,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -564,8 +571,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
564 return; 571 return;
565 } 572 }
566 const _newData = cloneDeep(treeData); 573 const _newData = cloneDeep(treeData);
567 - // const _qxProps = {};  
568 -  
569 const loopChangeTree = (treeList: ParamDesignModel[]) => { 574 const loopChangeTree = (treeList: ParamDesignModel[]) => {
570 let newMappingValues = []; 575 let newMappingValues = [];
571 for (let i = 0; i < treeList.length; i++) { 576 for (let i = 0; i < treeList.length; i++) {
@@ -578,14 +583,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -578,14 +583,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
578 mappingValues: newMappingValues 583 mappingValues: newMappingValues
579 } 584 }
580 treeList[i].valuesObj = val; 585 treeList[i].valuesObj = val;
581 - // if (!treeList[i].qxProps) {  
582 - // treeList[i].qxProps = _qxProps;  
583 - // }  
584 - // if (data.type == 'TIME') {  
585 - // treeList[i].qxProps.default = val[0]?.extVal || undefined;  
586 - // } else {  
587 - // treeList[i].qxProps.default = val[0].value || undefined;  
588 - // }  
589 return; 586 return;
590 } else if (!!treeList[i]?.child?.length) { 587 } else if (!!treeList[i]?.child?.length) {
591 loopChangeTree(treeList[i].child || []); 588 loopChangeTree(treeList[i].child || []);
@@ -148,20 +148,25 @@ @@ -148,20 +148,25 @@
148 } 148 }
149 149
150 .editable-cell { 150 .editable-cell {
151 - position: relative;  
152 -}  
153 -  
154 -.editable-center-cell {  
155 display: flex; 151 display: flex;
156 flex-direction: row; 152 flex-direction: row;
157 - align-items: center;  
158 - justify-content: center;  
159 -} 153 + justify-content: flex-start;
  154 + flex-wrap: nowrap;
160 155
161 -.editable-around-cell {  
162 - display: flex;  
163 - flex-direction: row;  
164 - justify-content: space-around; 156 + .range-cell{
  157 + display: flex;
  158 + align-content: center;
  159 + flex-wrap: nowrap;
  160 + flex-direction: row;
  161 + align-items: center;
  162 + }
  163 +
  164 + .ant-input-affix-wrapper,
  165 + .qx-field-setter {
  166 + border-width: 0;
  167 + }
  168 +
  169 +
165 } 170 }
166 171
167 .editable-cell-value-wrap { 172 .editable-cell-value-wrap {