田强 / qx-common · Commits

Commit df2d395199e39a392faa614fdee71dfc7e1e1eff

Authored by 陈洋
1 parent 901e1655

表单选择 优化；参数设计器 人员以及部门固定传参

Inline Side-by-side
Showing 11 changed files with 240 additions and 350 deletions
1 1 {
2 2 "name": "@qx/common",
3   - "version": "3.0.0-alpha.18",
  3 + "version": "3.0.0-alpha.19",
4 4 "description": "A react library developed with dumi",
5 5 "license": "MIT",
6 6 "module": "dist/index.js",
... ... @@ -51,7 +51,8 @@
51 51 "dayjs": "^1.11.9",
52 52 "lodash-es": "^4.17.21",
53 53 "rc-virtual-list": "^3.4.13",
54   - "react-codemirror2": "^7.2.1"
  54 + "react-codemirror2": "^7.2.1",
  55 + "@qx/utils": "0.0.58"
55 56 },
56 57 "devDependencies": {
57 58 "@commitlint/cli": "^17.1.2",
... ...
... ... @@ -63,64 +63,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
63 63 }
64 64 }, [riProps]);
65 65
66   - // 另一种写法搜索，暂存，不要删除
67   - // const filter = (word: string) => {
68   - // if (list) {
69   - // const _data = cloneDeep(list);
70   - // _data.forEach((it: Item) => {
71   - // it.deleted = !(it.name.indexOf(word) > -1);
72   - // });
73   - //
74   - // setList(_data);
75   - // }
76   - // };
77   -
78   - // const handleChange = (_keyword: string) => {
79   - // filter(_keyword.trim());
80   - // };
81   -
82   - // const handleVisibleChange = (_visible: boolean) => {
83   - // setVisible(_visible);
84   - // };
85   -
86   - // const menus = () => {
87   - // return (
88   - // <div className={'qx-search-menus__wrap'}>
89   - // <Input
90   - // className={'qx-selector-sub-search'}
91   - // placeholder={'输入名称，回车搜索'}
92   - // allowClear
93   - // prefix={<QxBaseIcon type={'icon-app-search-line'} />}
94   - // onChange={(e) => {
95   - // handleChange(e.target.value);
96   - // }}
97   - // />
98   - // <div>
99   - // <Menu mode={'inline'} selectedKeys={riProps?.item?.code}>
100   - // {list && list.length > 0 ? (
101   - // <>
102   - // {list.map((it: any) => {
103   - // return !it.deleted ? (
104   - // <Menu.Item
105   - // style={{ width: '100%' }}
106   - // onClick={() => {
107   - // riProps.onChange(it);
108   - // setVisible(false);
109   - // }}
110   - // key={it.code}
111   - // >
112   - // {it.name}
113   - // </Menu.Item>
114   - // ) : null;
115   - // })}
116   - // </>
117   - // ) : null}
118   - // </Menu>
119   - // </div>
120   - // </div>
121   - // );
122   - // };
123   -
124 66 //搜索
125 67 const filterOption = (input: string, option: any) =>
126 68 (option?.name ?? '').toLowerCase().includes(input.toLowerCase());
... ... @@ -137,22 +79,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
137 79 placeholder={riProps.placeholder || '请选择数据源'}
138 80 options={list}
139 81 value={item?.code}
140   - // 另一种样式
141   - // options={list.filter((el: any)=> !el.deleted )}
142   - // dropdownRender={(menu) =>(
143   - // <>
144   - // <Input
145   - // className={'qx-selector-sub-search'}
146   - // placeholder={'输入名称，回车搜索'}
147   - // allowClear
148   - // prefix={<QxBaseIcon type={'icon-app-search-line'} />}
149   - // onChange={(e) => {
150   - // handleChange(e.target.value);
151   - // }}
152   - // />
153   - // {menu}
154   - // </>
155   - // )}
156 82 onChange={(val) => {
157 83 const _list = list.filter((el: any) => el.code === val);
158 84 if (_list?.length) {
... ... @@ -167,28 +93,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
167 93 value: 'code',
168 94 }}
169 95 />
170   - {/*<Popover*/}
171   - {/* content={menus}*/}
172   - {/* open={visible}*/}
173   - {/* trigger={'click'}*/}
174   - {/* onOpenChange={handleVisibleChange}*/}
175   - {/* placement="bottomLeft"*/}
176   - {/* overlayClassName={'qx-fg-select-overlay'}*/}
177   - {/* getPopupContainer={(triggerNode) => triggerNode}*/}
178   - {/*>*/}
179   - {/* <div*/}
180   - {/* className={`ant-input qx-fr-input--fake select-source`}*/}
181   - {/* >*/}
182   - {/* <div>*/}
183   - {/* {item?.name ? (*/}
184   - {/* item.name*/}
185   - {/* ) : (*/}
186   - {/* <Text type="secondary">{riProps.placeholder}</Text>*/}
187   - {/* )}*/}
188   - {/* </div>*/}
189   - {/* <DownOutlined />*/}
190   - {/* </div>*/}
191   - {/*</Popover>*/}
192 96 </div>
193 97 </>
194 98 );
... ... @@ -289,7 +193,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
289 193 }
290 194 // eslint-disable-next-line array-callback-return
291 195 res.map((item: any) => {
292   - if (item.code === _item['currentId']) {
  196 + if (item.code === _item.currentId) {
293 197 item.name = item.name + '（本应用）';
294 198 }
295 199 if (item.code === _item['appId']) {
... ... @@ -581,9 +485,3 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
581 485 </>
582 486 );
583 487 };
584   -
585   -// type Item = {
586   -// name: string;
587   -// code?: string;
588   -// deleted?: boolean;
589   -// };
... ...
... ... @@ -173,9 +173,14 @@
173 173 .qx-tags-input,
174 174 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
175 175 .ant-input-number-disabled,
176   - .ant-input-disabled {
  176 + .ant-input-disabled,
  177 + .qx-field-setter__fields-btn {
177 178 background-color: @N2;
178 179 }
  180 +
  181 + .qx-field-setter__fields-btn:hover {
  182 + background-color: @N3;
  183 + }
179 184 }
180 185
181 186 .qx-field-setter--range {
... ...
... ... @@ -7,15 +7,20 @@ import { request, QxFormSelect } from '@qx/common';
7 7 import React, { useState } from 'react';
8 8
9 9 export default () => {
10   - const [value, setValue] = useState({});
  10 + const [value, setValue] = useState({
  11 + formId: 'PbOC6xBYOvZ1IB2mwUc',
  12 + appId: 'eSnLZ42R2TA5Z18dNsJ'
  13 + });
11 14 return (
12 15 <QxFormSelect
13 16 value={value}
14 17 onChange={(datasource) => {
  18 + console.log('datasource ===', datasource);
15 19 setValue(datasource);
16 20 }}
17 21 request={request}
18   - appId={'5ak3C213YQWEO6IYnIs'}
  22 + appId={'C9QUrtTmcmDkvHMoOKI'}
  23 + disabled
19 24 />
20 25 );
21 26 };
... ...
1 1 import React, {useCallback, useEffect, useRef, useState} from 'react';
2   -import { BlockOutlined } from '@ant-design/icons';
3 2 import { useSetState } from 'ahooks';
4 3 import { Button } from 'antd';
5 4 import cls from 'classnames';
... ... @@ -7,7 +6,7 @@ import type { InputSelectProps } from '../qx-input-select';
7 6 import { QxInputSelect } from '../qx-input-select';
8 7 import {QxBaseIcon, QxAppSelector} from '@qx/common';
9 8
10   -import {getAppFromList} from "./service";
  9 +import {getAppFromList, getFunInfo} from './service';
11 10
12 11 import './styles.less';
13 12
... ... @@ -31,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
31 30 visible: false,
32 31 modalVisible: false,
33 32 });
34   -
35 33 const inputSelectRef = useRef<any>();
  34 + const [item, setItem] = useState<any>({});
  35 +
36 36
37 37 const handleChange = (val: any) => {
38 38 if (!val?.code) return;
39 39 function onOk() {
40 40 if (val?.code) {
41   - onChange?.(val);
  41 + onChange?.({
  42 + appId: val?.appId || appId,
  43 + formId: val.code,
  44 + isTree: val.extract?.isTree,
  45 + });
42 46 setState({
43 47 visible: false,
44 48 });
... ... @@ -54,54 +58,91 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
54 58 });
55 59 }, []);
56 60
  61 + useEffect(() => {
  62 + if (!value || !Object.keys(value || {})?.length || !value?.formId) {
  63 + return;
  64 + }
  65 +
  66 + let _item: any = {};
  67 + options.map((it: any) => {
  68 + if (it.code === value?.formId) {
  69 + _item = {
  70 + flag: 'SINGLE',
  71 + appId: appId,
  72 + code: it.code,
  73 + name: it.name,
  74 + };
  75 + }
  76 + });
  77 +
  78 + setItem(_item);
  79 + if (!_item?.code) {
  80 + getFunInfo(value?.formId).then((res: any) => {
  81 + if (!res) {
  82 + return;
  83 + }
  84 + setItem({
  85 + flag: 'SINGLE',
  86 + code: res.code,
  87 + appId: res?.extract?.appId,
  88 + name: res.name,
  89 + });
  90 + });
  91 + }
  92 + }, [JSON.stringify(value), JSON.stringify(options)]);
  93 +
  94 +
57 95 return (
58 96 <div className={cls(prefix, className)}>
59   - <QxInputSelect
60   - ref={inputSelectRef}
61   - value={value?.name}
62   - defaultValue={value?.name}
63   - placeholder={placeholder || '请选择数据源'}
64   - prefix={<QxBaseIcon className={`${prefix}__input-prefix`} type={'icon-field-rel'} />}
65   - options={options}
66   - onChange={handleChange}
67   - dropdownProps={{
68   - showSearch: true,
69   - loading,
70   - renderBottom: (
71   - <Button
72   - className={`${prefix}__dropdown-bottom`}
73   - type="link"
74   - onClick={onOpenOther}
75   - >
76   - 其他应用
77   - </Button>
78   - ),
79   - }}
80   - disabled={disabled}
81   - popupOnBody={props?.popupOnBody}
82   - />
83   -
84   - {state.modalVisible ? (
85   - <QxAppSelector
86   - title={title || placeholder || '选择数据源'}
87   - item={{
88   - flag: 'SINGLE',
89   - ...value,
90   - appId: value?.appId || appId,
91   - }}
  97 + {props?.preview ? <>
  98 + {item?.name}
  99 + </> : <>
  100 + <QxInputSelect
  101 + ref={inputSelectRef}
  102 + value={item?.name}
  103 + defaultValue={item?.name}
  104 + placeholder={placeholder || '请选择数据源'}
  105 + prefix={<QxBaseIcon className={`${prefix}__input-prefix`} type={'icon-field-rel'} />}
  106 + options={options}
92 107 onChange={handleChange}
93   - flag="join"
94   - showTableTypeTab={false}
95   - modalProps={{
96   - width: 480,
97   - destroyOnClose: true,
98   - open: state.modalVisible,
99   - onOk: () => setState({ modalVisible: false }),
100   - onCancel: () => setState({ modalVisible: false }),
  108 + dropdownProps={{
  109 + showSearch: true,
  110 + loading,
  111 + renderBottom: (
  112 + <Button
  113 + className={`${prefix}__dropdown-bottom`}
  114 + type="link"
  115 + onClick={onOpenOther}
  116 + >
  117 + 其他应用
  118 + </Button>
  119 + ),
101 120 }}
102   - request={request}
  121 + disabled={disabled}
  122 + popupOnBody={props?.popupOnBody}
103 123 />
104   - ) : null}
  124 +
  125 + {state.modalVisible ? (
  126 + <QxAppSelector
  127 + title={title || placeholder || '选择数据源'}
  128 + item={{
  129 + ...item,
  130 + currentId: appId,
  131 + }}
  132 + onChange={handleChange}
  133 + flag="join"
  134 + showTableTypeTab={false}
  135 + modalProps={{
  136 + width: 480,
  137 + destroyOnClose: true,
  138 + open: state.modalVisible,
  139 + onOk: () => setState({ modalVisible: false }),
  140 + onCancel: () => setState({ modalVisible: false }),
  141 + }}
  142 + request={request}
  143 + />
  144 + ) : null}
  145 + </>}
105 146 </div>
106 147 );
107 148 }
... ... @@ -111,7 +152,12 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
111 152 * TODO 当前只支持表单选择 聚合表选择待开发
112 153 */
113 154 export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
114   - const { options= [] as any , appId } = props;
  155 + const {
  156 + options = [] as any,
  157 + appId,
  158 + value,
  159 + } = props;
  160 +
115 161 const [selectOptions, setSelectOptions] = useState([])
116 162
117 163 useEffect(() => {
... ... @@ -130,6 +176,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
130 176 }
131 177 }, [JSON.stringify(options), appId]);
132 178
  179 +
133 180 return <FormSelectMain {...props} options={selectOptions}/>
134 181 };
135 182
... ... @@ -140,6 +187,7 @@ interface FormSelectProps extends InputSelectProps {
140 187 request?: any;
141 188 disabled?: boolean;
142 189 popupOnBody?: boolean;
  190 + preview?: boolean;
143 191 }
144 192 interface FormSelectState {
145 193 visible: boolean;
... ...
... ... @@ -6,3 +6,10 @@ import { request } from '@qx/common';
6 6 export function getAppFromList(appId: string) {
7 7 return request.get(`/qx-apaas-lowcode/app/${appId}/option`);
8 8 }
  9 +
  10 +/**
  11 + * 根据表单ID获取详细信息
  12 + */
  13 +export function getFunInfo(funId: string) {
  14 + return request.get(`/qx-apaas-lowcode/app/form/${funId}`);
  15 +}
... ...
... ... @@ -49,7 +49,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
49 49
50 50 const computedOptions = useMemo(
51 51 () =>
52   - options?.map((opt) => ({
  52 + options?.map((opt: any) => ({
53 53 label: opt[fieldLabel],
54 54 key: opt[fieldValue],
55 55 ...(opt['extract']? {extract: opt['extract']}: {})
... ... @@ -161,8 +161,11 @@ interface FieldNames {
161 161 }
162 162
163 163 export interface DropdownContentOptions {
164   - name: string | React.ReactNode;
165   - code: string | number;
  164 + name?: string | React.ReactNode;
  165 + code?: string | number;
  166 + appId?: string;
  167 + formId?: string | number;
  168 + isTree?: boolean;
166 169 }
167 170
168 171 export interface DropdownContentProps {
... ...
... ... @@ -250,32 +250,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
250 250 key: 'mappingValues',
251 251 render: (text) =>
252 252 text || [].map((item) => {
253   - // if (item.indexOf('-') > -1) {
254   - // if (text == item.key) {
255 253 return <span key={item}>{item.indexOf('-') > -1 ? item : ''}</span>;
256   - // }
257 254 }),
258   - // }
259   -
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   - // ),
279 255 },
280 256 {
281 257 title: '参数说明',
... ... @@ -284,14 +260,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
284 260 key: 'description',
285 261 render: (text, record) => (
286 262 <span key={record.id}>{text}</span>
287   - // <span key={record.id}>{text?.remark}</span>
288   -
289   - // // <Form.Item
290   - // // name={'remark' + record.id}
291   - // // initialValue={text?.remark}
292   - // // >
293   - // // <Input disabled={record.disabled} onBlur={(e) => props.handleChange(e, record, 'qxProps-remark')} />
294   - // // </Form.Item>
295 263 ),
296 264 },
297 265 {
... ... @@ -342,29 +310,44 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
342 310 editable: true,
343 311 key: 'qxProps',
344 312 render: (text: any, record: any) => {
345   - return (
346   - <>
347   - {record.type === 'FORM' ? <>
348   - <div key={record.id}>
349   - <span>
350   - {text?.name}
351   - </span>
  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 + />
352 332 </div>
353   - </> : <>
354   - <div key={record.id}>
  333 + );
  334 + default:
  335 + return (
  336 + <>
  337 + <div key={record.id}>
355 338 <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format(
356 339 formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min}
357 340 </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}
  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}
363 346 </span>
364   - </div>
365   - </>}
366   - </>
367   - )
  347 + </div>
  348 + </>
  349 + )
  350 + }
368 351 },
369 352 };
370 353
... ... @@ -454,12 +437,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
454 437 // }
455 438 };
456 439
457   - const toggleEdit1 = (e) => {
  440 + const toggleEdit1 = (e: any) => {
458 441 const values = form.getFieldsValue();
459 442 e.persist();
460 443 if (e.target.tagName == 'DIV') {
461 444 setCurrentNode(e.target)
462   - // console.log('values', values)
463 445 setEditing(!editing);
464 446 if (currentNode) {
465 447 props.handleChange(values?.newQxProps, record, 'qxProps')
... ... @@ -491,6 +473,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
491 473 // message: `不能为空!`,
492 474 // },] : []
493 475
  476 + // 高级设置 取值范围
494 477 const qxPropsRange = useCallback(() => {
495 478 switch (record.type) {
496 479 case 'STRING':
... ... @@ -665,7 +648,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
665 648 </div>
666 649 );
667 650 case 'FORM':
668   - console.log('FORM ====', '数据变化');
  651 + case 'USER':
  652 + case 'ORG':
669 653 return (
670 654 <div
671 655 key={record.id}
... ... @@ -678,13 +662,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
678 662 >
679 663 <QxFormSelect
680 664 value={qxProps}
681   - request={props?.request}
682 665 appId={props?.appId}
683 666 placeholder={'选择表单'}
684 667 popupOnBody={true}
685 668 onChange={(val: any) => {
686 669 props.handleChange(val, record, 'qxProps');
687 670 }}
  671 + disabled={['USER', 'ORG'].includes(record.type)}
  672 + request={props?.request}
688 673 />
689 674 </div>
690 675 );
... ...
... ... @@ -52,6 +52,28 @@ const valueOptions = [
52 52 { key: 'ORG', label: '部门' },
53 53 ];
54 54
  55 +const getDefaultQxProps = (type: string) => {
  56 + let _qxProps: any;
  57 + switch (type) {
  58 + case 'USER':
  59 + _qxProps = {
  60 + formId: 'PbOC6xBYOvZ1IB2mwUc',
  61 + appId: 'eSnLZ42R2TA5Z18dNsJ',
  62 + };
  63 + break;
  64 + case 'ORG':
  65 + _qxProps = {
  66 + formId: 'UsoOGnrJLPziSQwGDwj',
  67 + appId: 'eSnLZ42R2TA5Z18dNsJ',
  68 + };
  69 + break;
  70 + default:
  71 + _qxProps = {};
  72 + break;
  73 + }
  74 + return _qxProps;
  75 +}
  76 +
55 77 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
56 78 let parentKey: React.Key;
57 79 for (let i = 0; i < tree.length; i++) {
... ... @@ -243,15 +265,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
243 265 if (treeList[i].id == data.id) {
244 266 if (isProps > -1) {
245 267 if (code == 'qxProps') {
246   - _qxProps = value
  268 + _qxProps = value;
247 269 } else {
248   - _qxProps = { ...data.qxProps };
  270 + _qxProps = {...data.qxProps};
249 271 _qxProps[_newCode] = value;
250 272 }
251   - treeList[i].qxProps = _qxProps;
  273 + treeList[i].qxProps = {
  274 + ..._qxProps
  275 + };
252 276 } else {
253 277 if (code == 'type') {
254   - treeList[i].qxProps = {};
  278 + treeList[i].qxProps = getDefaultQxProps(value);
255 279 }
256 280 treeList[i][code] = value;
257 281 }
... ... @@ -262,6 +286,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
262 286 }
263 287 };
264 288 loopChangeTree(_newData);
  289 + console.log('_newData ===', _newData);
265 290 setTreeData(_newData);
266 291 if (oldValue) {
267 292 setInputKey(inputKey + 1);
... ... @@ -427,6 +452,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
427 452 const _treeData = [...treeData];
428 453 const id = uidGen();
429 454 const code = uidGen(undefined, 6);
  455 +
430 456 // @ts-ignore
431 457 const loopAddTree = (treeList: any[]) => {
432 458 for (let i = 0; i < treeList.length; i++) {
... ... @@ -437,6 +463,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
437 463 type: _type,
438 464 pid: _pid,
439 465 title: code,
  466 + qxProps: getDefaultQxProps(_type)
440 467 });
441 468 return;
442 469 } else if (treeList[i].child) {
... ... @@ -446,7 +473,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
446 473 };
447 474
448 475 if (!_pid) {
449   - _treeData.push({ id, code, type: _type, title: code });
  476 + _treeData.push({ id, code, type: _type, title: code, qxProps: getDefaultQxProps(_type) });
450 477 } else {
451 478 loopAddTree(_treeData);
452 479 }
... ... @@ -531,7 +558,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
531 558 };
532 559
533 560 const changeField = (val: any, data: any) => {
534   - console.log('changeField', val)
535 561 if (!val || isEmpty(val)) {
536 562 return;
537 563 }
... ... @@ -599,7 +625,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
599 625 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
600 626 <div
601 627 style={{
602   - padding: '2px',
  628 + // padding: '2px',
603 629 justifyContent: 'flex-end',
604 630 display: 'flex',
605 631 width: '100%',
... ... @@ -751,8 +777,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
751 777 ? treeData?.length > 0 &&
752 778 defaultExpandedKeys && (
753 779 <Tree
754   - // className={'tree-list'}
755   - // rootClassName={'tree-list'}
  780 + rootClassName={'qx-parameter-tree-list'}
756 781 treeData={treeData || []}
757 782 fieldNames={{
758 783 title: 'label',
... ...
... ... @@ -15,50 +15,20 @@
15 15 align-items: center;
16 16
17 17 .header-title {
18   - overflow:hidden;
  18 + overflow: hidden;
19 19 white-space: nowrap;
20 20 text-overflow: ellipsis;
21   - -o-text-overflow:ellipsis;
  21 + -o-text-overflow: ellipsis;
22 22 }
23 23 }
24 24
25   -// .tree-list {
26   -// // padding-top: 6px;
27   -// // display: inline-block;
28   -// opacity: 0.5 ;
29   -// }
30   -
31 25 .ant-tree-treenode-draggable .ant-tree-draggable-icon {
32 26 padding-top: 6px;
33   - // display: none;
34 27 opacity: 1 !important;
35 28 }
36 29
37 30 .tree-wrapper {
38 31 margin-top: 20px;
39   -
40   - .ant-tree-treenode {
41   - padding-top: 4px !important;
42   - border-radius: 4px;
43   -
44   - &:hover {
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   - }
52   - }
53   - }
54   -
55   - .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
56   - background-color: transparent;
57   - }
58   -
59   - .ant-tree .ant-tree-node-content-wrapper:hover {
60   - background-color: transparent;
61   - }
62 32 }
63 33
64 34 .border-none
... ... @@ -140,16 +110,13 @@
140 110
141 111 .opt-left {
142 112 display: flex;
143   - // transition: all 0.5s ease-in-out;
144 113 align-items: center;
145   - // -webkit-transition: width .4s;
146   - // transition: width .4s;
147 114 width: 100%;
148 115 margin-top: 2px;
149   - // min-width: 100px;
150 116 margin-bottom: 2px;
151 117 overflow: hidden;
152 118 text-overflow: ellipsis;
  119 + transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s;
153 120
154 121 .ant-input-affix-wrapper {
155 122 border-color: @N4;
... ... @@ -158,12 +125,8 @@
158 125
159 126 .opt-left-down {
160 127 display: flex;
161   - // transition: all 0.5s ease-in-out;
162   - // -webkit-transition: width .4s;
163   - // transition: width .4s;
164 128 align-items: center;
165 129 width: 100%;
166   - // min-width: 100px;
167 130 margin-top: 2px;
168 131 margin-bottom: 2px;
169 132 overflow: hidden;
... ... @@ -172,93 +135,6 @@
172 135 border-radius: 4px;
173 136 }
174 137
175   -// .ant-tree-node-content-wrapper :hover .select-tree {
176   -// // display: none;
177   -// // padding: 2px;
178   -// // fle
179   -// height: 90%;
180   -// border-radius: 3px;
181   -// background-color: #fff;
182   -// }
183   -
184   -.ant-tree-node-content-wrapper :hover .opt-left {
185   - width: 65%;
186   - // height: 100%;
187   - // transform: scale(0.5) translate(-25%, -25%)
188   -}
189   -
190   -// .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected .opt-left {
191   -// // height: 100%;
192   -// width: 65%;
193   -// // transform: scale(0.5) translate(-25%, -25%)
194   -// }
195   -
196   -// .ant-tree-node-content-wrapper :hover .opt-left-down {
197   -// width: 85%;
198   -// }
199   -
200   -// .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected .opt-left-down {
201   -// width: 85%;
202   -// }
203   -
204   -// @keyframes title-btn-del {
205   -// 0% {
206   -// opacity: 0;
207   -// }
208   -
209   -// 20% {
210   -// opacity: 0.3;
211   -// }
212   -
213   -// 50% {
214   -// opacity: 0.4;
215   -// }
216   -
217   -// 70% {
218   -// opacity: 0.6;
219   -// }
220   -
221   -// 100% {
222   -// opacity: 0.8;
223   -// }
224   -// }
225   -
226   -// @keyframes title-btn {
227   -// 0% {
228   -// opacity: 0;
229   -// }
230   -
231   -// 20% {
232   -// opacity: 0.3;
233   -// }
234   -
235   -// 50% {
236   -// opacity: 0.4;
237   -// }
238   -
239   -// 70% {
240   -// opacity: 0.6;
241   -// }
242   -
243   -// 100% {
244   -// opacity: 0.8;
245   -// }
246   -// }
247   -
248   -.ant-tree-node-content-wrapper :hover .title-btn-del {
249   - display: block;
250   - // animation-name: title-btn-del;
251   - // animation-duration: 2s;
252   - // animation-iteration-count: 1;
253   -}
254   -
255   -.ant-tree-node-content-wrapper :hover .title-btn {
256   - display: block;
257   - // animation-name: title-btn-del;
258   - // animation-duration: 2s;
259   - // animation-iteration-count: 1;
260   -}
261   -
262 138 .btn-high-del {
263 139 &:hover {
264 140 color: @E3 !important;
... ... @@ -361,3 +237,40 @@
361 237 color: @N6;
362 238 }
363 239 }
  240 +
  241 +.qx-parameter-tree-list .ant-tree-list {
  242 + .ant-tree-treenode {
  243 + background-color: transparent !important;
  244 + padding-top: 4px !important;
  245 + border-radius: 4px;
  246 + transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  247 + background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  248 + padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  249 +
  250 + &:hover {
  251 + background-color: @N3 !important;
  252 +
  253 + .title-btn-del,
  254 + .title-btn {
  255 + display: block;
  256 + }
  257 +
  258 + .opt-left {
  259 + width: 65%;
  260 + }
  261 +
  262 + .ant-tree-treenode-draggable .ant-tree-draggable-icon {
  263 + padding-top: 6px;
  264 + opacity: 1 !important;
  265 + }
  266 + }
  267 + }
  268 +
  269 + .ant-tree-node-content-wrapper.ant-tree-node-selected {
  270 + background-color: transparent;
  271 + }
  272 +
  273 + .ant-tree-node-content-wrapper:hover {
  274 + background-color: transparent;
  275 + }
  276 +}
... ...
... ... @@ -77,7 +77,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
77 77 if (!columns || columns.length === 0) {
78 78 return {};
79 79 }
80   - const index = findIndex(columns, (o: SortItemProps) => {
  80 + const index = findIndex(columns, (o: OptionItemProps) => {
81 81 return o.code === code;
82 82 });
83 83 return columns[index];
... ...