田强 / 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 340 <CodeMirror
341 341 value={(valueLocal || '').toString()}
342 342 editorDidMount={(editor) => setCodeEditor(editor)}
343   - onCursorActivity={(e) => console.log('e', e)}
  343 + // onCursorActivity={(e) => console.log('e', e)}
344 344 // onCursorActivity={(e) => e?.showHint()} //没有会报错
345 345 options={{
346 346 // mode: 'text/html',
... ...
... ... @@ -15,14 +15,13 @@ import {
15 15 Select,
16 16 Space,
17 17 Table,
  18 + Divider,
18 19 message,
19 20 } from 'antd';
20 21 import type { FormInstance } from 'antd/es/form';
21 22 import React, {
22 23 useCallback,
23   - useContext,
24 24 useEffect,
25   - useRef,
26 25 useState,
27 26 } from 'react';
28 27 import JSONEditor from './codeMirror';
... ... @@ -33,10 +32,10 @@ import {
33 32 typeTranslateFieIdtype,
34 33 typeTranslateWidget,
35 34 typeTranslateGrouptype,
36   - typeTranslateItemtype,
  35 + // typeTranslateItemtype,
37 36 } from './constant';
38 37 // import { Controlled as CodeMirror } from 'react-codemirror2'
39   -import { cloneDeep, debounce, isEmpty } from 'lodash-es';
  38 +import { cloneDeep } from 'lodash-es';
40 39 import moment from 'dayjs';
41 40 import { QxBaseIcon } from '@qx/common';
42 41 import Icon from '@ant-design/icons';
... ... @@ -113,6 +112,8 @@ const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
113 112 // setAutoExpandParent(true);
114 113 };
115 114
  115 +
  116 +
116 117 const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
117 118 const {
118 119 visible,
... ... @@ -143,6 +144,22 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
143 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 163 const checkShowTree = (_data: any) => {
147 164 if (_data.type == 'ARRAY') {
148 165 if (_data.child && _data.child.length > 0) {
... ... @@ -162,24 +179,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
162 179 ),
163 180 dataIndex: 'code',
164 181 width: '12%',
165   - editable: true,
166 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 197 title: (
... ... @@ -190,24 +202,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
190 202 ),
191 203 dataIndex: 'title',
192 204 width: '12%',
193   - editable: true,
194 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 220 title: (
... ... @@ -217,55 +224,73 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
217 224 </div>
218 225 ),
219 226 dataIndex: 'type',
220   - editable: true,
221 227 width: '8%',
222 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 249 title: '默认值',
247 250 dataIndex: 'valueMapping',
248   - width: '15%',
249   - editable: true,
  251 + width: '13%',
250 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 273 title: '参数说明',
258 274 dataIndex: 'description',
259   - editable: true,
260 275 key: 'description',
261 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 291 title: '操作',
267 292 key: 'action',
268   - width: '10%',
  293 + width: '8%',
269 294 render: (text, record) => {
270 295 const isShowAdd = (record && checkShowAdd(record));
271 296 const isShowTree = (record && checkShowTree(record));
... ... @@ -309,209 +334,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
309 334 dataIndex: 'qxProps',
310 335 editable: true,
311 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 338 switch (record.type) {
479 339 case 'STRING':
480 340 return (
481 341 <div
482 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 345 <Form.Item
490   - name={['newQxProps', 'min']}
  346 + name={'qxProps-min'}
491 347 style={{ margin: 0 }}
492   - initialValue={qxProps.min}
493 348 >
494 349 <InputNumber
  350 + bordered={false}
495 351 min={0}
496 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 355 placeholder="最小长度"
501 356 />
502 357 </Form.Item>
503   - &nbsp; - &nbsp;
  358 + <div className='range-cell'>-</div>
504 359 <Form.Item
505   - name={['newQxProps', 'max']}
  360 + name={'qxProps-max'}
506 361 style={{ margin: 0 }}
507   - initialValue={qxProps.max}
508 362 >
509 363 <InputNumber
510 364 min={0}
  365 + bordered={false}
511 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 369 placeholder="最大长度"
516 370 />
517 371 </Form.Item>
... ... @@ -521,75 +375,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
521 375 return (
522 376 <div
523 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 381 <Form.Item
532   - initialValue={qxProps.min}
533   - name={['newQxProps', 'min']}
  382 + name={'qxProps-min'}
534 383 style={{ margin: 0 }}
535 384 >
536 385 <InputNumber
537 386 precision={qxProps.precision || 0}
  387 + bordered={false}
538 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 391 style={{ width: '110px' }}
542 392 placeholder="最小值"
543 393 />
544 394 </Form.Item>
545   -
546   - &nbsp; - &nbsp;
  395 + -
547 396 <Form.Item
548   - initialValue={qxProps.max}
549 397 style={{ margin: 0 }}
550   - name={['newQxProps', 'max']}
  398 + name={'qxProps-max'}
551 399 >
552 400 <InputNumber
  401 + bordered={false}
553 402 size='small'
554 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 406 style={{ width: '110px' }}
558 407 placeholder="最大值"
559 408 />
560 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 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 429 </div>
580 430 );
581 431 case 'TIME':
582 432 return (
583 433 <div
584 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 438 <DatePicker
  439 + bordered={false}
593 440 size='small'
594 441 defaultValue={
595 442 qxProps?.min
... ... @@ -597,17 +444,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
597 444 : undefined
598 445 }
599 446 format={formatEnum[qxProps?.format]}
600   - // onChange={dateChange}
601 447 style={{ width: '110px' }}
602   - // onBlur={() => save('qxProps-min')}
603 448 showTime
604   - onSelect={(e) => props.handleChange(e, record, 'qxProps-min')}
  449 + onChange={(e) => handleChange(e, record, 'qxProps-min')}
605 450 placeholder="开始日期"
606 451 />
607   - {/* <DatePicker defaultValue={moment(qxProps.min)} onBlur={() => save('qxProps-min')} placeholder='开始日期' /> */}
608   - &nbsp; ~ &nbsp;
  452 + -
609 453 <DatePicker
610 454 size='small'
  455 + bordered={false}
611 456 defaultValue={
612 457 qxProps?.min
613 458 ? moment(qxProps.max)
... ... @@ -615,36 +460,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
615 460 }
616 461 format={formatEnum[qxProps?.format]}
617 462 style={{ width: '110px' }}
618   - // onChange={dateChange}
619 463 showTime
620   - // onBlur={toggleEdit}
621   - onSelect={(e) => props.handleChange(e, record, 'qxProps-max')}
  464 + onChange={(e) => handleChange(e, record, 'qxProps-max')}
622 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 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 494 </div>
649 495 );
650 496 case 'FORM':
... ... @@ -652,13 +498,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
652 498 case 'ORG':
653 499 return (
654 500 <div
  501 + className='editable-cell'
655 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 504 <QxFormSelect
664 505 value={qxProps}
... ... @@ -666,7 +507,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
666 507 placeholder={'选择表单'}
667 508 popupOnBody={true}
668 509 onChange={(val: any) => {
669   - props.handleChange(val, record, 'qxProps');
  510 + handleChange(val, record, 'qxProps');
670 511 }}
671 512 disabled={['USER', 'ORG'].includes(record.type)}
672 513 request={props?.request}
... ... @@ -674,192 +515,38 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
674 515 </div>
675 516 );
676 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 550 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
864 551 const [isShowJson, setIsShowJson] = useState<any>(false);
865 552 const [midData, setMidData] = useState<any>([]);
... ... @@ -869,15 +556,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
869 556 handleAdd('');
870 557 }
871 558 }
872   - // easyTableRef.current.refresh()
873   - // setTimeout(() => {
874   - // setNewData(data)
875   - // }, 0)
876   - // form.setFieldsValue(data)
  559 +
877 560 }, [visible]);
878 561
879   - // useEffect(() => {
880   - // }, []);
881 562 //展开 所有子节点
882 563 const generateTreeData = useCallback(
883 564 (_data: any[], _keywords?: string): any[] => {
... ... @@ -922,7 +603,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
922 603 nodes = [];
923 604 }
924 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 609 onDragLeave: (ev: any) => {
... ... @@ -1106,26 +787,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
1106 787 </Col>
1107 788 </>
1108 789 ) : (
1109   - // <Form form={form}>
1110 790 <Table
1111   - components={components}
  791 + // components={components}
1112 792 expandable={{
1113 793 defaultExpandAllRows: true,
1114 794 childrenColumnName: 'child'
1115 795 }}
1116 796 onRow={() => onRow()}
1117 797 scroll={{ x: 960 }}
1118   - rowClassName={() => 'editable-row'}
  798 + // rowClassName={() => 'editable-row'}
1119 799 bordered
1120 800 pagination={false}
1121 801 size={'small'}
1122 802 // @ts-ignore
1123   - columns={columns1}
  803 + columns={columns}
1124 804 dataSource={data}
1125 805 rowKey={'id'}
1126 806 />
1127 807 )
1128   - // </Form >
1129 808 }
1130 809 </Modal>
1131 810 </>
... ...
... ... @@ -20,7 +20,7 @@ import {
20 20 typeTranslateFieIdtype,
21 21 typeTranslateWidget,
22 22 typeTranslateGrouptype,
23   - typeTranslateItemtype,
  23 + // typeTranslateItemtype,
24 24 } from './constant';
25 25
26 26 import { cloneDeep, isEmpty } from 'lodash-es';
... ... @@ -276,11 +276,18 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
276 276 ..._qxProps
277 277 };
278 278 } else {
279   - if (code == 'type') {
280   - treeList[i].qxProps = getDefaultQxProps(value);
281   - }
282 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 291 return;
285 292 } else if (treeList[i].child) {
286 293 loopChangeTree(treeList[i].child);
... ... @@ -564,8 +571,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
564 571 return;
565 572 }
566 573 const _newData = cloneDeep(treeData);
567   - // const _qxProps = {};
568   -
569 574 const loopChangeTree = (treeList: ParamDesignModel[]) => {
570 575 let newMappingValues = [];
571 576 for (let i = 0; i < treeList.length; i++) {
... ... @@ -578,14 +583,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
578 583 mappingValues: newMappingValues
579 584 }
580 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 586 return;
590 587 } else if (!!treeList[i]?.child?.length) {
591 588 loopChangeTree(treeList[i].child || []);
... ...
... ... @@ -148,20 +148,25 @@
148 148 }
149 149
150 150 .editable-cell {
151   - position: relative;
152   -}
153   -
154   -.editable-center-cell {
155 151 display: flex;
156 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 172 .editable-cell-value-wrap {
... ...