田强 / qx-common · Commits

Commit b17e05d7344167ad064ee88b12ee40cf93462026

Authored by qiang.tian
2 parents ab235053 9a6887df

Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common… 

… into feature/dataflow
Inline Side-by-side
Showing 11 changed files with 320 additions and 222 deletions
... ... @@ -5,3 +5,4 @@ node_modules
5 5 .dumi/tmp-production
6 6 .DS_Store
7 7 .idea
  8 +/package-lock.json
... ...
1 1 {
2 2 "name": "@qx/common",
3   - "version": "3.0.0-alpha.10",
  3 + "version": "3.0.0-alpha.14",
4 4 "description": "A react library developed with dumi",
5 5 "license": "MIT",
6 6 "module": "dist/index.js",
... ...
... ... @@ -10,9 +10,12 @@
10 10 justify-content: space-between;
11 11 font-size: 14px;
12 12 color: @N9;
  13 +<<<<<<< HEAD
13 14 height: 22px;
14 15 margin-bottom: 4px;
15 16 overflow: hidden;
  17 +=======
  18 +>>>>>>> 9a6887dfe15d01f555b9adbae7bca829b7d2e99d
16 19 }
17 20
18 21 &__header-icon {
... ... @@ -23,7 +26,7 @@
23 26
24 27 &__header-filter {
25 28 display: inline-block;
26   - min-width: 80px;
  29 + width: 100px;
27 30
28 31 &__select {
29 32 width: 100%;
... ...
1 1 ### 选择表单
2 2
  3 +### 外部传入options
3 4 ```tsx
4 5 import { request, QxFormSelect } from '@qx/common';
5 6 import React, { useState } from 'react';
... ... @@ -243,4 +244,26 @@ export default () => {
243 244 };
244 245 ```
245 246
  247 +### 使用外部appId获取options
  248 +
  249 +```tsx
  250 +import { request, QxFormSelect } from '@qx/common';
  251 +import React, { useState } from 'react';
  252 +
  253 +export default () => {
  254 + const [value, setValue] = useState({});
  255 + return (
  256 + <QxFormSelect
  257 + optionId={'0lZK2gxUlpFD002WWKJ'}
  258 + value={value}
  259 + onChange={(datasource) => {
  260 + console.log(datasource, 'lllllll');
  261 + setValue(datasource);
  262 + }}
  263 + request={request}
  264 + />
  265 + );
  266 +};
  267 +```
  268 +
246 269 <API></API>
... ...
... ... @@ -2,19 +2,17 @@ import { BlockOutlined } from '@ant-design/icons';
2 2 import { useSetState } from 'ahooks';
3 3 import { Button } from 'antd';
4 4 import cls from 'classnames';
5   -import React, { useCallback, useRef } from 'react';
  5 +import React, {useCallback, useEffect, useRef, useState} from 'react';
6 6 import { QxAppSelector } from '../qx-app-selector';
7 7 import type { InputSelectProps } from '../qx-input-select';
8 8 import { QxInputSelect } from '../qx-input-select';
9 9
10 10 import './styles.less';
  11 +import {getAppFromList} from "./service";
11 12
12 13 const prefix = 'qx-form-select';
13 14
14   -/**
15   - * 选择数据源
16   - */
17   -export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
  15 +const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
18 16 const {
19 17 className,
20 18 options = [],
... ... @@ -106,6 +104,33 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
106 104 ) : null}
107 105 </div>
108 106 );
  107 +}
  108 +
  109 +/**
  110 + * 选择数据源
  111 + */
  112 +export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
  113 + const { options= [] as any , optionId } = props;
  114 + const [selectOptions, setSelectOptions] = useState([])
  115 +
  116 + useEffect(() => {
  117 + console.log(optionId,'llllloptions')
  118 + if(optionId && !options?.length) {
  119 + getAppFromList(optionId).then((res: any)=> {
  120 + if(res?.length){
  121 + setSelectOptions(res)
  122 + } else {
  123 + setSelectOptions([])
  124 + }
  125 + }).catch(()=> {
  126 + setSelectOptions([])
  127 + })
  128 + } else {
  129 + setSelectOptions(options)
  130 + }
  131 + }, []);
  132 +
  133 + return <FormSelectMain {...props} options={selectOptions}/>
109 134 };
110 135
111 136 interface FormSelectProps extends InputSelectProps {
... ... @@ -115,6 +140,7 @@ interface FormSelectProps extends InputSelectProps {
115 140 request?: any;
116 141 disabled?: boolean;
117 142 popupOnBody?: boolean;
  143 + optionId?: string; // 获取options传入表单的appId
118 144 }
119 145 interface FormSelectState {
120 146 visible: boolean;
... ...
  1 +import { request } from '@qx/common';
  2 +
  3 +/**
  4 + * 获取所选项集数据常量
  5 + */
  6 +export function getAppFromList(appId: string) {
  7 + return request.get(`/qx-apaas-lowcode/app/${appId}/option`);
  8 +}
... ...
... ... @@ -52,6 +52,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
52 52 options?.map((opt) => ({
53 53 label: opt[fieldLabel],
54 54 key: opt[fieldValue],
  55 + ...(opt['extract']? {extract: opt['extract']}: {})
55 56 })),
56 57 [options],
57 58 );
... ...
... ... @@ -27,7 +27,7 @@ import React, {
27 27 } from 'react';
28 28 import JSONEditor from './codeMirror';
29 29 import './style.less';
30   -import { QxFieldSetter, QxFormSelect, ValueOptionProps } from '@qx/common';
  30 +import { QxFieldSetter, QxFormSelect } from '@qx/common';
31 31 import { formatEnum } from './constant';
32 32 import {
33 33 typeTranslateFieIdtype,
... ... @@ -40,7 +40,12 @@ import { cloneDeep, debounce, isEmpty } from 'lodash-es';
40 40 import moment from 'dayjs';
41 41 import { QxBaseIcon } from '@qx/common';
42 42 import Icon from '@ant-design/icons';
43   -import {SubNodeIcon} from './sub-node-icon';
  43 +import { SubNodeIcon } from './sub-node-icon';
  44 +
  45 +type ValueOptionProps = {
  46 + key: number | string;
  47 + value: string;
  48 +};
44 49
45 50 const valueOptions = [
46 51 { key: 'STRING', title: '文本' },
... ... @@ -49,20 +54,20 @@ const valueOptions = [
49 54 { key: 'BOOL', title: '布尔' },
50 55 { key: 'OBJECT', title: '对象' },
51 56 { key: 'ARRAY', title: '数组' },
52   - { key: 'ANNEX', title: '附件' },
53   - { key: 'PIC', title: '图片' },
  57 + /*{ key: 'ANNEX', title: '附件' },
  58 + { key: 'PIC', title: '图片' },*/
54 59 { key: 'FORM', title: '表单' },
55 60 { key: 'USER', title: '人员' },
56 61 { key: 'ORG', title: '部门' },
57 62 ];
58 63
59 64 const timeFormat = [
60   - { lable: '年', value: 'YEAR' },
61   - { lable: '年-月', value: 'YEAR_MONTH' },
62   - { lable: '年-月-日', value: 'YEAR_DATE' },
63   - { lable: '年-月-日 时', value: 'YEAR_HOUR' },
64   - { lable: '年-月-日 时:分', value: 'YEAR_MIN' },
65   - { lable: '年-月-日 时:分:秒', value: 'YEAR_SEC' },
  65 + { label: '年', value: 'YEAR' },
  66 + { label: '年-月', value: 'YEAR_MONTH' },
  67 + { label: '年-月-日', value: 'YEAR_DATE' },
  68 + { label: '年-月-日 时', value: 'YEAR_HOUR' },
  69 + { label: '年-月-日 时:分', value: 'YEAR_MIN' },
  70 + { label: '年-月-日 时:分:秒', value: 'YEAR_SEC' },
66 71 ];
67 72
68 73 interface ParameterSettingProps {
... ... @@ -79,7 +84,8 @@ interface ParameterSettingProps {
79 84 handleAdd: (val: any) => void;
80 85 handleDelete: (val: any) => void;
81 86 appFormList?: any[]; // 当前应用表单list
82   - request?: any,
  87 + request?: any;
  88 + nodeType?: string | 'START' | 'END';
83 89 }
84 90 const EditableContext = React.createContext<FormInstance<any> | null>(null);
85 91
... ... @@ -120,10 +126,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
120 126 handleChange,
121 127 handleChangeField,
122 128 inputKey,
  129 + nodeType,
123 130 } = props;
124   - console.log('data', data);
125 131 // const [form] = Form.useForm()
126   -
127 132 //判断数组是否只有一个子节点
128 133 const checkShowAdd = (_data: any) => {
129 134 const _newTreeData = cloneDeep(treeData);
... ... @@ -139,7 +144,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
139 144 };
140 145
141 146 const checkShowTree = (_data: any) => {
142   - // console.log('_data', _data)
143 147 if (_data.type == 'ARRAY') {
144 148 if (_data.child && _data.child.length > 0) {
145 149 return false;
... ... @@ -157,7 +161,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
157 161 </div>
158 162 ),
159 163 dataIndex: 'code',
160   - width: '15%',
  164 + width: '12%',
161 165 editable: true,
162 166 key: 'code',
163 167 // render: (text, record) => (
... ... @@ -185,7 +189,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
185 189 </div>
186 190 ),
187 191 dataIndex: 'title',
188   - width: '15%',
  192 + width: '12%',
189 193 editable: true,
190 194 key: 'title',
191 195 // render: (text, record) => (
... ... @@ -239,83 +243,44 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
239 243 // </Form.Item>
240 244 },
241 245 {
242   - title: '取值范围',
243   - dataIndex: 'qxProps',
244   - editable: true,
245   - key: 'qxProps',
246   - render: (text: any, record: any) => {
247   - console.log('record ====', record);
248   - console.log('text ====', text);
249   - return (
250   - <>
251   - {record.type === 'FORM' ? <>
252   - <div key={record.id}>
253   - <span>
254   - {text?.name}
255   - </span>
256   - </div>
257   - </> : <>
258   - <div key={record.id}>
259   - <span>{record.type == 'TIME' ? moment(text?.min).format(
260   - formatEnum[text?.format] || 'YYYY-MM-DD') : text?.min}
261   - </span>
262   - {text?.min && (
263   - <Space style={{ marginLeft: 5, marginRight: 5 }}>-</Space>
264   - )}
265   - <span>{record.type == 'TIME' ? moment(text?.max).format(
266   - formatEnum[text?.format] || 'YYYY-MM-DD') : text?.max}
267   - </span>
268   - </div>
269   - </>}
270   - </>
271   - )
272   - },
273   - },
274   - {
275   - title: '必填',
276   - dataIndex: 'required',
277   - editable: true,
278   - key: 'required',
279   - width: '5%',
280   - render: (text, record) => (
281   - <span key={record.id}>{text ? '是' : '否'}</span>
282   - // <Form.Item
283   - // name={'required' + record.id}
284   - // initialValue={record.required}
285   - // >
286   - // <Select
287   - // disabled={record.disabled}
288   - // onSelect={(e) => props.handleChange(e, record, 'required')}
289   - // >
290   - // <Select.Option value={true}>是</Select.Option>
291   - // <Select.Option value={false}>否</Select.Option>
292   - // </Select>
293   - // </Form.Item>
294   - ),
295   - },
296   - {
297 246 title: '默认值',
298   - dataIndex: 'qxProps',
299   - width: '10%',
  247 + dataIndex: 'mappingValues',
  248 + width: '15%',
300 249 editable: true,
301   - key: 'qxProps',
302   - render: (text, record) => (
303   - // console.log('text', text)
304   - <span key={record.id}>{text?.default}</span>
  250 + key: 'mappingValues',
  251 + render: (text) =>
  252 + text || [].map((item) => {
  253 + // if (item.indexOf('-') > -1) {
  254 + // if (text == item.key) {
  255 + return <span key={item}>{item.indexOf('-') > -1 ? item : ''}</span>;
  256 + // }
  257 + }),
  258 + // }
305 259
306   - // <Form.Item
307   - // name={'default' + record.id}
308   - // initialValue={text?.default}
309   - // >
310   - // <Input disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'qxProps-default')} />
311   - // </Form.Item>
312   - ),
  260 + // }
  261 + // )
  262 + // text || [].map((item ) => {
  263 + // return console.log('123', item.indexOf('-'))
  264 + // if (item.indexOf('-') > -1) {
  265 +
  266 + // <span key={item.type + record.id}>{item.value}</span>;
  267 + // }
  268 + // }),
  269 + // console.log('text', text)
  270 + // <span key={record.id}>{text?.default}</span>
  271 +
  272 + // <Form.Item
  273 + // name={'default' + record.id}
  274 + // initialValue={text?.default}
  275 + // >
  276 + // <Input disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'qxProps-default')} />
  277 + // </Form.Item>
  278 + // ),
313 279 },
314 280 {
315 281 title: '参数说明',
316 282 dataIndex: 'description',
317 283 editable: true,
318   - width: '10%',
319 284 key: 'description',
320 285 render: (text, record) => (
321 286 <span key={record.id}>{text}</span>
... ... @@ -371,6 +336,65 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
371 336 },
372 337 ];
373 338
  339 + const range = {
  340 + title: '取值范围',
  341 + dataIndex: 'qxProps',
  342 + editable: true,
  343 + key: 'qxProps',
  344 + render: (text: any, record: any) => {
  345 + return (
  346 + <>
  347 + {record.type === 'FORM' ? <>
  348 + <div key={record.id}>
  349 + <span>
  350 + {text?.name}
  351 + </span>
  352 + </div>
  353 + </> : <>
  354 + <div key={record.id}>
  355 + <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format(
  356 + formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min}
  357 + </span>
  358 + {!!text?.min || text?.min >= 0 && (
  359 + <Space style={{ marginLeft: 5, marginRight: 5 }}>-</Space>
  360 + )}
  361 + <span>{record.type == 'TIME' ? text?.max ? moment(text.max).format(
  362 + formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.max}
  363 + </span>
  364 + </div>
  365 + </>}
  366 + </>
  367 + )
  368 + },
  369 + };
  370 +
  371 + const require = {
  372 + title: '必填',
  373 + dataIndex: 'required',
  374 + editable: true,
  375 + key: 'required',
  376 + width: '5%',
  377 + render: (text, record) => (
  378 + <span key={record.id}>{text ? '是' : '否'}</span>
  379 + // <Form.Item
  380 + // name={'required' + record.id}
  381 + // initialValue={record.required}
  382 + // >
  383 + // <Select
  384 + // disabled={record.disabled}
  385 + // onSelect={(e) => props.handleChange(e, record, 'required')}
  386 + // >
  387 + // <Select.Option value={true}>是</Select.Option>
  388 + // <Select.Option value={false}>否</Select.Option>
  389 + // </Select>
  390 + // </Form.Item>
  391 + ),
  392 + };
  393 +
  394 + if (nodeType !== 'END') {
  395 + columns.splice(3, 0, range, require)
  396 + }
  397 +
374 398 interface EditableRowProps {
375 399 index: number;
376 400 }
... ... @@ -392,6 +416,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
392 416 children: React.ReactNode;
393 417 dataIndex: keyof any;
394 418 record: any;
  419 + index: number;
395 420 // handleSave: (record: Item) => void;
396 421 }
397 422
... ... @@ -409,12 +434,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
409 434 const form = useContext(EditableContext)!;
410 435 const qxProps = record?.qxProps || {};
411 436 const [currentNode, setCurrentNode] = useState<any>('');
412   - // console.log('dataIndex', dataIndex)
413 437
414 438 useEffect(() => {
415 439 if (editing) {
416 440 if (inputRef.current) {
417   - // console.log('setEditing', inputRef)
418 441 inputRef.current!.focus();
419 442 }
420 443 }
... ... @@ -434,7 +457,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
434 457 const toggleEdit1 = (e) => {
435 458 const values = form.getFieldsValue();
436 459 e.persist();
437   - // console.log('vae.target.tagNamelues', e.target.tagName)
438 460 if (e.target.tagName == 'DIV') {
439 461 setCurrentNode(e.target)
440 462 // console.log('values', values)
... ... @@ -443,31 +465,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
443 465 props.handleChange(values?.newQxProps, record, 'qxProps')
444 466 }
445 467 }
446   -
447   - // setCurrentNode(e.currentTarget)
448   - // console.log('e-onburl', e.currentTarget.key)
449   - //
450   - // if (e.currentTarget == e.target) {
451   - // // setEditing(!editing);
452   - // }
453   - // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
454 468 };
455 469
456   - // const test = (value) => {
457   - // console.log('value', value)
458   - // // form.setFieldsValue({
459   - // // ['qxProps']: { value: value }
460   - // // })
461   - // }
462   - // const toggleEdit2 = (e) => {
463   - // e.persist();
464   - // // console.log('e-onforce', e.currentTarget)
465   -
466   - // // e.dataTransfer.setData('text', e.target.getAttribute('data-row-key'));
467   - // // console.log('currentTarget-fource', currentNode)
468   - // // form.setFieldsValue({ [dataIndex]: record[dataIndex] });
469   - // };
470   -
471 470 const save = async (code: string) => {
472 471 const isProps = code.indexOf('qxProps');
473 472 const _newCode = isProps > -1 ? code.slice(8) : '';
... ... @@ -480,7 +479,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
480 479 props.handleChange(newValue, record, code);
481 480 // toggleEdit();
482 481 } catch (errInfo) {
483   - console.log('Save failed:', errInfo);
  482 + console.warn('Save failed:', errInfo);
484 483 }
485 484 };
486 485
... ... @@ -510,6 +509,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
510 509 initialValue={qxProps.min}
511 510 >
512 511 <InputNumber
  512 + min={0}
  513 + precision={0}
513 514 // defaultValue={qxProps.min}
514 515 // onChange={onQxpropsChangen}
515 516 // onBlur={() => save('qxProps-min')}
... ... @@ -523,6 +524,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
523 524 initialValue={qxProps.max}
524 525 >
525 526 <InputNumber
  527 + min={0}
  528 + precision={0}
526 529 // dataIndex={["qxProps", "max"]}
527 530 // defaultValue={qxProps.max}
528 531 // onBlur={() => save('qxProps-max')}
... ... @@ -548,6 +551,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
548 551 style={{ margin: 0 }}
549 552 >
550 553 <InputNumber
  554 + precision={qxProps.precision || 0}
  555 + size='small'
551 556 // defaultValue={qxProps.min}
552 557 // onBlur={() => save('qxProps-min')}
553 558 style={{ width: '110px' }}
... ... @@ -562,6 +567,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
562 567 name={['newQxProps', 'max']}
563 568 >
564 569 <InputNumber
  570 + size='small'
  571 + precision={qxProps.precision || 0}
565 572 // defaultValue={qxProps.max}
566 573 // onBlur={() => save('qxProps-max')}
567 574 style={{ width: '110px' }}
... ... @@ -576,6 +583,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
576 583 name={['newQxProps', 'precision']}
577 584 >
578 585 <InputNumber
  586 + size='small'
  587 + // formatter={decimalCheck}
  588 + precision={0}
  589 + min={0}
  590 + max={8}
579 591 // defaultValue={qxProps.precision}
580 592 // onBlur={() => save('qxProps-precision')}
581 593 placeholder="小数位数"
... ... @@ -595,6 +607,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
595 607 >
596 608 <div>
597 609 <DatePicker
  610 + size='small'
598 611 defaultValue={
599 612 qxProps?.min
600 613 ? moment(qxProps.min)
... ... @@ -602,7 +615,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
602 615 }
603 616 format={formatEnum[qxProps?.format]}
604 617 // onChange={dateChange}
605   - style={{ width: '130px' }}
  618 + style={{ width: '110px' }}
606 619 // onBlur={() => save('qxProps-min')}
607 620 showTime
608 621 onSelect={(e) => props.handleChange(e, record, 'qxProps-min')}
... ... @@ -611,13 +624,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
611 624 {/* <DatePicker defaultValue={moment(qxProps.min)} onBlur={() => save('qxProps-min')} placeholder='开始日期' /> */}
612 625 &nbsp; ~ &nbsp;
613 626 <DatePicker
  627 + size='small'
614 628 defaultValue={
615 629 qxProps?.min
616 630 ? moment(qxProps.max)
617 631 : undefined
618 632 }
619 633 format={formatEnum[qxProps?.format]}
620   - style={{ width: '130px' }}
  634 + style={{ width: '110px' }}
621 635 // onChange={dateChange}
622 636 showTime
623 637 // onBlur={toggleEdit}
... ... @@ -627,6 +641,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
627 641 {/* <DatePicker defaultValue={moment(qxProps.max)} onBlur={() => save('qxProps-max')} placeholder='结束日期' /> */}
628 642 </div>
629 643 <Select
  644 + size='small'
630 645 style={{ width: '90px' }}
631 646 placeholder="格式"
632 647 popupMatchSelectWidth={false}
... ... @@ -642,7 +657,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
642 657 key={item.value}
643 658 value={item.value}
644 659 >
645   - {item.lable}
  660 + {item.label}
646 661 </Select.Option>
647 662 );
648 663 })}
... ... @@ -650,6 +665,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
650 665 </div>
651 666 );
652 667 case 'FORM':
  668 + console.log('FORM ====', '数据变化');
653 669 return (
654 670 <div
655 671 key={record.id}
... ... @@ -715,32 +731,25 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
715 731 }
716 732
717 733 const qxPropsDefault = () => {
718   - const valuesObj = [{
719   - type: typeTranslateItemtype(record.type),
720   - value: record?.qxProps?.default || '',
721   - }]
722   - record.valuesObj = valuesObj
  734 + // const valuesObj = [{
  735 + // type: typeTranslateItemtype(record.type),
  736 + // value: record.mappingValues || [],
  737 + // }]
  738 + // record.valuesObj = !record.valuesObj ? valuesObj : record.valuesObj
723 739 return (
724 740 <div>
725   - {/* <Input
726   - defaultValue={record?.qxProps?.default}
727   - ref={inputRef}
728   - onBlur={() => save('qxProps-default')}
729   - /> */}
730 741 <QxFieldSetter
731 742 value={record.valuesObj || []}
732   - // value={[{
733   - // type: typeTranslateItemtype(record.type) || '',
734   - // value: record?.qxProps?.default
735   - // }]}
736 743 params={{ appCode: 'appCode', useId: true }}
737 744 valueOptions={getValueOptions(record)}
738 745 field={record.type}
739 746 widget={typeTranslateWidget(record.type)}
740 747 fieldType={typeTranslateFieIdtype(record.type)}
741 748 fieldGroupType={typeTranslateGrouptype(record.type)}
742   - isMixValue={typeTranslateFieIdtype(record.type) == 'STRING' ? true : false}
  749 + isMixValue={typeTranslateFieIdtype(record.type) === 'STRING'}
743 750 isMultiple={false}
  751 + colsTree={props.nodeItem}
  752 + showFieldOpt={!(nodeType === 'START')}
744 753 onChange={debounce((val) => handleField(val), 700)}
745 754 />
746 755 </div>
... ... @@ -791,19 +800,19 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
791 800 ) : dataIndex == 'qxProps' ? (
792 801 title == '取值范围' ? (
793 802 qxPropsRange()
794   - ) : title == '默认值' ? (
795   - qxPropsDefault()
796 803 ) : (
797 804 qxPropsRemark()
798 805 )
799   - ) : (
800   - // @ts-ignore
801   - <Input
802   - ref={inputRef}
803   - onPressEnter={save}
804   - onBlur={() => save(dataIndex)}
805   - />
806   - )}
  806 + ) : dataIndex == 'mappingValues' ?
  807 + qxPropsDefault() :
  808 + (
  809 + // @ts-ignore
  810 + <Input
  811 + ref={inputRef}
  812 + onPressEnter={save}
  813 + onBlur={() => save(dataIndex)}
  814 + />
  815 + )}
807 816 </Form.Item>
808 817 ) : (
809 818 <div
... ... @@ -859,7 +868,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
859 868 onCell: (record: any, index: any) => ({
860 869 index,
861 870 record,
862   - editable: record.disabled ? false : true,
  871 + editable: !record.disabled,
863 872 dataIndex: col.dataIndex,
864 873 title: col.title,
865 874 // handleSave,
... ... @@ -1120,7 +1129,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
1120 1129 childrenColumnName: 'child'
1121 1130 }}
1122 1131 onRow={() => onRow()}
1123   - scroll={{ x: 1600 }}
  1132 + scroll={{ x: 960 }}
1124 1133 rowClassName={() => 'editable-row'}
1125 1134 bordered
1126 1135 pagination={false}
... ...
... ... @@ -120,6 +120,7 @@ export default () => {
120 120 // component={QxTagsInput}
121 121 request={request}
122 122 appFormList={appFormList}
  123 + nodeType={'END'}
123 124 />
124 125 </div>
125 126 );
... ...
... ... @@ -23,7 +23,7 @@ import {
23 23 typeTranslateItemtype,
24 24 } from './constant';
25 25
26   -import { cloneDeep } from 'lodash-es';
  26 +import { cloneDeep, isEmpty } from 'lodash-es';
27 27 import moment from 'dayjs';
28 28 import type { ParamDesignModel } from './constant';
29 29 import { uidGen } from './stringUtil';
... ... @@ -31,7 +31,12 @@ import { QxFieldSetter, QxBaseIcon } from '@qx/common';
31 31
32 32 import './style.less';
33 33
34   -import {SubNodeIcon} from './sub-node-icon';
  34 +type ValueOptionProps = {
  35 + key: number | string;
  36 + value: string;
  37 +};
  38 +
  39 +import { SubNodeIcon } from './sub-node-icon';
35 40
36 41 const valueOptions = [
37 42 { key: 'STRING', label: '文本' },
... ... @@ -40,8 +45,8 @@ const valueOptions = [
40 45 { key: 'BOOL', label: '布尔' },
41 46 { key: 'OBJECT', label: '对象' },
42 47 { key: 'ARRAY', label: '数组' },
43   - { key: 'ANNEX', label: '附件' },
44   - { key: 'PIC', label: '图片' },
  48 +/* { key: 'ANNEX', label: '附件' },
  49 + { key: 'PIC', label: '图片' },*/
45 50 { key: 'FORM', label: '表单' },
46 51 { key: 'USER', label: '人员' },
47 52 { key: 'ORG', label: '部门' },
... ... @@ -74,6 +79,7 @@ interface ParameterSettingProps {
74 79 // comHandleChange?: (val: any) => void;
75 80 appFormList?: any[]; // 当前应用表单list
76 81 request?: any,
  82 + nodeType?: string | 'START' | 'END';
77 83 }
78 84
79 85 export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
... ... @@ -237,7 +243,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
237 243 if (treeList[i].id == data.id) {
238 244 if (isProps > -1) {
239 245 if (code == 'qxProps') {
240   - _qxProps = { ...data.qxProps, ...value }
  246 + _qxProps = value
241 247 } else {
242 248 _qxProps = { ...data.qxProps };
243 249 _qxProps[_newCode] = value;
... ... @@ -499,13 +505,13 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
499 505 const onBlur = (e) => {
500 506 e.persist();
501 507 const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
502   - const currentNode = e.target.parentNode;
  508 + // const currentNode = e.target.parentNode;
503 509 if (!!parentNode) {
504 510 parentNode.style.backgroundColor = '';
505 511 }
506   - if (!!currentNode) {
507   - currentNode.style.width = '';
508   - }
  512 + // if (!!currentNode) {
  513 + // currentNode.style.width = '';
  514 + // }
509 515 };
510 516
511 517 const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
... ... @@ -525,11 +531,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
525 531 };
526 532
527 533 const changeField = (val: any, data: any) => {
528   - if (!val || _.isEmpty(val)) {
  534 + console.log('changeField', val)
  535 + if (!val || isEmpty(val)) {
529 536 return;
530 537 }
531 538 const _newData = cloneDeep(treeData);
532   - const _qxProps = {};
  539 + // const _qxProps = {};
533 540
534 541 const loopChangeTree = (treeList: ParamDesignModel[]) => {
535 542 for (let i = 0; i < treeList.length; i++) {
... ... @@ -539,14 +546,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
539 546 item?.extVal ? item?.extVal : item?.value,
540 547 );
541 548 treeList[i].valuesObj = val;
542   - if (!treeList[i].qxProps) {
543   - treeList[i].qxProps = _qxProps;
544   - }
545   - if (data.type == 'TIME') {
546   - treeList[i].qxProps.default = val[0]?.extVal || undefined;
547   - } else {
548   - treeList[i].qxProps.default = val[0].value || undefined;
549   - }
  549 + // if (!treeList[i].qxProps) {
  550 + // treeList[i].qxProps = _qxProps;
  551 + // }
  552 + // if (data.type == 'TIME') {
  553 + // treeList[i].qxProps.default = val[0]?.extVal || undefined;
  554 + // } else {
  555 + // treeList[i].qxProps.default = val[0].value || undefined;
  556 + // }
550 557 return;
551 558 } else if (!!treeList[i]?.child?.length) {
552 559 loopChangeTree(treeList[i].child || []);
... ... @@ -580,11 +587,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
580 587 const renderTitle = (nodeData: any) => {
581 588 // const strTitle = (nodeData.title as string) || '';
582 589 // const strCode = nodeData.code as string;
583   - const valuesObj = [{
584   - type: typeTranslateItemtype(nodeData.type),
585   - value: nodeData?.qxProps?.default || '',
586   - }]
587   - nodeData.valuesObj = valuesObj
  590 + // const valuesObj = [{
  591 + // type: typeTranslateItemtype(nodeData.type),
  592 + // value: nodeData.mappingValues || [],
  593 + // }]
  594 + // nodeData.valuesObj = !nodeData.valuesObj ? valuesObj : nodeData.valuesObj
588 595 // const index = strTitle.indexOf(searchValue);
589 596 const isShowTree = checkShowTree(nodeData);
590 597 const disabled = nodeData.disabled;
... ... @@ -638,6 +645,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
638 645 </div>
639 646 <div className="opt-left">
640 647 <Input
  648 + draggable={true}
  649 + onDragStart={(event) => {
  650 + event.stopPropagation();
  651 + event.preventDefault();
  652 + }}
641 653 // ref={inputRef}
642 654 key={inputKey}
643 655 style={{ width: '100%' }}
... ... @@ -657,12 +669,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
657 669 <QxFieldSetter
658 670 disabled={disabled}
659 671 value={nodeData.valuesObj || []}
660   - // value={[
661   - // {
662   - // type: typeTranslateItemtype(nodeData.type),
663   - // value: nodeData?.qxProps?.default || '',
664   - // },
665   - // ]}
666 672 params={{ appCode: 'appCode', useId: true }}
667 673 valueOptions={getValueOptions(nodeData)}
668 674 field={nodeData.code}
... ... @@ -674,6 +680,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
674 680 isMultiple={false}
675 681 onChange={(val) => changeField(val, nodeData)}
676 682 popupOnBody={true}
  683 + inputDis={true}
677 684 />
678 685 </div>
679 686 )}
... ... @@ -707,7 +714,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
707 714 padding: '0 0 0 8px',
708 715 }}
709 716 >
710   - <QxBaseIcon style={{fontSize: '16px'}} type={'qx-icon-plus'} />
  717 + <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
711 718 添加参数
712 719 </Button>
713 720 </Dropdown>
... ... @@ -721,7 +728,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
721 728 openModal();
722 729 }}
723 730 >
724   - <QxBaseIcon style={{fontSize: '16px'}} type={'icon-app-terminal-box-line'} />
  731 + <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} />
725 732 高级设置
726 733 </Button>
727 734 </div>
... ... @@ -779,6 +786,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
779 786 visible={visible}
780 787 request={props?.request}
781 788 appFormList={props?.appFormList}
  789 + nodeType={props?.nodeType}
782 790 />
783 791 </div>
784 792 );
... ...
... ... @@ -12,7 +12,7 @@
12 12 flex-direction: row-reverse;
13 13 flex-wrap: nowrap;
14 14 justify-content: space-between;
15   - align-items: flex-end;
  15 + align-items: center;
16 16
17 17 .header-title {
18 18 overflow:hidden;
... ... @@ -22,6 +22,18 @@
22 22 }
23 23 }
24 24
  25 +// .tree-list {
  26 +// // padding-top: 6px;
  27 +// // display: inline-block;
  28 +// opacity: 0.5 ;
  29 +// }
  30 +
  31 +.ant-tree-treenode-draggable .ant-tree-draggable-icon {
  32 + padding-top: 6px;
  33 + // display: none;
  34 + opacity: 1 !important;
  35 +}
  36 +
25 37 .tree-wrapper {
26 38 margin-top: 20px;
27 39
... ... @@ -31,6 +43,12 @@
31 43
32 44 &:hover {
33 45 background-color: @N3;
  46 +
  47 + .ant-tree-treenode-draggable .ant-tree-draggable-icon {
  48 + padding-top: 6px;
  49 + // display: none;
  50 + opacity: 1 !important;
  51 + }
34 52 }
35 53 }
36 54
... ... @@ -183,62 +201,62 @@
183 201 // width: 85%;
184 202 // }
185 203
186   -@keyframes title-btn-del {
187   - 0% {
188   - opacity: 0;
189   - }
  204 +// @keyframes title-btn-del {
  205 +// 0% {
  206 +// opacity: 0;
  207 +// }
190 208
191   - 20% {
192   - opacity: 0.3;
193   - }
  209 +// 20% {
  210 +// opacity: 0.3;
  211 +// }
194 212
195   - 50% {
196   - opacity: 0.4;
197   - }
  213 +// 50% {
  214 +// opacity: 0.4;
  215 +// }
198 216
199   - 70% {
200   - opacity: 0.6;
201   - }
  217 +// 70% {
  218 +// opacity: 0.6;
  219 +// }
202 220
203   - 100% {
204   - opacity: 0.8;
205   - }
206   -}
  221 +// 100% {
  222 +// opacity: 0.8;
  223 +// }
  224 +// }
207 225
208   -@keyframes title-btn {
209   - 0% {
210   - opacity: 0;
211   - }
  226 +// @keyframes title-btn {
  227 +// 0% {
  228 +// opacity: 0;
  229 +// }
212 230
213   - 20% {
214   - opacity: 0.3;
215   - }
  231 +// 20% {
  232 +// opacity: 0.3;
  233 +// }
216 234
217   - 50% {
218   - opacity: 0.4;
219   - }
  235 +// 50% {
  236 +// opacity: 0.4;
  237 +// }
220 238
221   - 70% {
222   - opacity: 0.6;
223   - }
  239 +// 70% {
  240 +// opacity: 0.6;
  241 +// }
224 242
225   - 100% {
226   - opacity: 0.8;
227   - }
228   -}
  243 +// 100% {
  244 +// opacity: 0.8;
  245 +// }
  246 +// }
229 247
230 248 .ant-tree-node-content-wrapper :hover .title-btn-del {
231 249 display: block;
232   - animation-name: title-btn-del;
233   - animation-duration: 2s;
234   - animation-iteration-count: 1;
  250 + // animation-name: title-btn-del;
  251 + // animation-duration: 2s;
  252 + // animation-iteration-count: 1;
235 253 }
236 254
237 255 .ant-tree-node-content-wrapper :hover .title-btn {
238 256 display: block;
239   - animation-name: title-btn-del;
240   - animation-duration: 2s;
241   - animation-iteration-count: 1;
  257 + // animation-name: title-btn-del;
  258 + // animation-duration: 2s;
  259 + // animation-iteration-count: 1;
242 260 }
243 261
244 262 .btn-high-del {
... ...