田强 / qx-common · Commits

Commit 56fa82803db44119209077ca8ba0d569d28a74a3

Authored by qiang.tian
2 parents 77a37283 a7baffc1

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

… into feature/dataflow
Inline Side-by-side
Showing 15 changed files with 320 additions and 442 deletions
1 { 1 {
2 "name": "@qx/common", 2 "name": "@qx/common",
3 - "version": "3.0.0-alpha.17", 3 + "version": "3.0.0-alpha.20",
4 "description": "A react library developed with dumi", 4 "description": "A react library developed with dumi",
5 "license": "MIT", 5 "license": "MIT",
6 "module": "dist/index.js", 6 "module": "dist/index.js",
@@ -51,7 +51,8 @@ @@ -51,7 +51,8 @@
51 "dayjs": "^1.11.9", 51 "dayjs": "^1.11.9",
52 "lodash-es": "^4.17.21", 52 "lodash-es": "^4.17.21",
53 "rc-virtual-list": "^3.4.13", 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 "devDependencies": { 57 "devDependencies": {
57 "@commitlint/cli": "^17.1.2", 58 "@commitlint/cli": "^17.1.2",
@@ -63,64 +63,6 @@ const RelItemOption: React.FC<any> = (riProps) => { @@ -63,64 +63,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
63 } 63 }
64 }, [riProps]); 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 const filterOption = (input: string, option: any) => 67 const filterOption = (input: string, option: any) =>
126 (option?.name ?? '').toLowerCase().includes(input.toLowerCase()); 68 (option?.name ?? '').toLowerCase().includes(input.toLowerCase());
@@ -137,22 +79,6 @@ const RelItemOption: React.FC<any> = (riProps) => { @@ -137,22 +79,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
137 placeholder={riProps.placeholder || '请选择数据源'} 79 placeholder={riProps.placeholder || '请选择数据源'}
138 options={list} 80 options={list}
139 value={item?.code} 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 onChange={(val) => { 82 onChange={(val) => {
157 const _list = list.filter((el: any) => el.code === val); 83 const _list = list.filter((el: any) => el.code === val);
158 if (_list?.length) { 84 if (_list?.length) {
@@ -167,28 +93,6 @@ const RelItemOption: React.FC<any> = (riProps) => { @@ -167,28 +93,6 @@ const RelItemOption: React.FC<any> = (riProps) => {
167 value: 'code', 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 </div> 96 </div>
193 </> 97 </>
194 ); 98 );
@@ -289,7 +193,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -289,7 +193,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
289 } 193 }
290 // eslint-disable-next-line array-callback-return 194 // eslint-disable-next-line array-callback-return
291 res.map((item: any) => { 195 res.map((item: any) => {
292 - if (item.code === _item['currentId']) { 196 + if (item.code === _item.currentId) {
293 item.name = item.name + '（本应用）'; 197 item.name = item.name + '（本应用）';
294 } 198 }
295 if (item.code === _item['appId']) { 199 if (item.code === _item['appId']) {
@@ -581,9 +485,3 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -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,9 +173,14 @@
173 .qx-tags-input, 173 .qx-tags-input,
174 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector, 174 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
175 .ant-input-number-disabled, 175 .ant-input-number-disabled,
176 - .ant-input-disabled { 176 + .ant-input-disabled,
  177 + .qx-field-setter__fields-btn {
177 background-color: @N2; 178 background-color: @N2;
178 } 179 }
  180 +
  181 + .qx-field-setter__fields-btn:hover {
  182 + background-color: @N3;
  183 + }
179 } 184 }
180 185
181 .qx-field-setter--range { 186 .qx-field-setter--range {
@@ -59,6 +59,9 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => { @@ -59,6 +59,9 @@ const QxFieldPopover: React.FC<QxFieldPopoverProp> = (props) => {
59 setFields(_fields); 59 setFields(_fields);
60 setFilterFields(_fields); 60 setFilterFields(_fields);
61 // setFieldFlatten(flatFields(_fields)) 61 // setFieldFlatten(flatFields(_fields))
  62 + } else {
  63 + setFields([])
  64 + setFilterFields([])
62 } 65 }
63 }, [props.data]); 66 }, [props.data]);
64 67
1 ### 选择表单 1 ### 选择表单
2 2
  3 +### 使用外部appId获取options
  4 +
  5 +```tsx
  6 +import { request, QxFormSelect } from '@qx/common';
  7 +import React, { useState } from 'react';
  8 +
  9 +export default () => {
  10 + const [value, setValue] = useState({
  11 + formId: 'PbOC6xBYOvZ1IB2mwUc',
  12 + appId: 'eSnLZ42R2TA5Z18dNsJ'
  13 + });
  14 + return (
  15 + <QxFormSelect
  16 + value={value}
  17 + onChange={(datasource) => {
  18 + console.log('datasource ===', datasource);
  19 + setValue(datasource);
  20 + }}
  21 + request={request}
  22 + appId={'C9QUrtTmcmDkvHMoOKI'}
  23 + disabled
  24 + />
  25 + );
  26 +};
  27 +```
  28 +
3 ### 外部传入options 29 ### 外部传入options
4 ```tsx 30 ```tsx
5 import { request, QxFormSelect } from '@qx/common'; 31 import { request, QxFormSelect } from '@qx/common';
@@ -244,26 +270,4 @@ export default () => { @@ -244,26 +270,4 @@ export default () => {
244 }; 270 };
245 ``` 271 ```
246 272
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 -  
269 <API></API> 273 <API></API>
1 -import { BlockOutlined } from '@ant-design/icons'; 1 +import React, {useCallback, useEffect, useRef, useState} from 'react';
2 import { useSetState } from 'ahooks'; 2 import { useSetState } from 'ahooks';
3 import { Button } from 'antd'; 3 import { Button } from 'antd';
4 import cls from 'classnames'; 4 import cls from 'classnames';
5 -import React, {useCallback, useEffect, useRef, useState} from 'react';  
6 -import { QxAppSelector } from '../qx-app-selector';  
7 import type { InputSelectProps } from '../qx-input-select'; 5 import type { InputSelectProps } from '../qx-input-select';
8 import { QxInputSelect } from '../qx-input-select'; 6 import { QxInputSelect } from '../qx-input-select';
  7 +import {QxBaseIcon, QxAppSelector} from '@qx/common';
  8 +
  9 +import {getAppFromList, getFunInfo} from './service';
9 10
10 import './styles.less'; 11 import './styles.less';
11 -import {getAppFromList} from "./service";  
12 12
13 const prefix = 'qx-form-select'; 13 const prefix = 'qx-form-select';
14 14
@@ -30,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -30,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
30 visible: false, 30 visible: false,
31 modalVisible: false, 31 modalVisible: false,
32 }); 32 });
33 -  
34 const inputSelectRef = useRef<any>(); 33 const inputSelectRef = useRef<any>();
  34 + const [item, setItem] = useState<any>({});
  35 +
35 36
36 const handleChange = (val: any) => { 37 const handleChange = (val: any) => {
37 if (!val?.code) return; 38 if (!val?.code) return;
38 function onOk() { 39 function onOk() {
39 if (val?.code) { 40 if (val?.code) {
40 - onChange?.(val); 41 + onChange?.({
  42 + appId: val?.appId || appId,
  43 + formId: val.code,
  44 + isTree: val.extract?.isTree,
  45 + });
41 setState({ 46 setState({
42 visible: false, 47 visible: false,
43 }); 48 });
@@ -53,70 +58,111 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -53,70 +58,111 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
53 }); 58 });
54 }, []); 59 }, []);
55 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 +
56 return ( 95 return (
57 <div className={cls(prefix, className)}> 96 <div className={cls(prefix, className)}>
58 - <QxInputSelect  
59 - ref={inputSelectRef}  
60 - value={value?.name}  
61 - defaultValue={value?.name}  
62 - placeholder={placeholder || '请选择数据源'}  
63 - prefix={<BlockOutlined style={{ color: '#52c41a' }} />}  
64 - options={options}  
65 - onChange={handleChange}  
66 - dropdownProps={{  
67 - showSearch: true,  
68 - loading,  
69 - listHeight: 160,  
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 - currentId: '',  
90 - 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 onChange={handleChange} 107 onChange={handleChange}
93 - flag="join"  
94 - showTableTypeTab={false}  
95 - modalProps={{  
96 - width: 550,  
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 </div> 146 </div>
106 ); 147 );
107 } 148 }
108 149
109 /** 150 /**
110 * 选择数据源 151 * 选择数据源
  152 + * TODO 当前只支持表单选择 聚合表选择待开发
111 */ 153 */
112 export const QxFormSelect: React.FC<FormSelectProps> = (props) => { 154 export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
113 - const { options= [] as any , optionId } = props; 155 + const {
  156 + options = [] as any,
  157 + appId,
  158 + value,
  159 + } = props;
  160 +
114 const [selectOptions, setSelectOptions] = useState([]) 161 const [selectOptions, setSelectOptions] = useState([])
115 162
116 useEffect(() => { 163 useEffect(() => {
117 - console.log(optionId,'llllloptions')  
118 - if(optionId && !options?.length) {  
119 - getAppFromList(optionId).then((res: any)=> { 164 + if(appId && !options?.length) {
  165 + getAppFromList(appId).then((res: any)=> {
120 if(res?.length){ 166 if(res?.length){
121 setSelectOptions(res) 167 setSelectOptions(res)
122 } else { 168 } else {
@@ -128,7 +174,8 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => { @@ -128,7 +174,8 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
128 } else { 174 } else {
129 setSelectOptions(options) 175 setSelectOptions(options)
130 } 176 }
131 - }, []); 177 + }, [JSON.stringify(options), appId]);
  178 +
132 179
133 return <FormSelectMain {...props} options={selectOptions}/> 180 return <FormSelectMain {...props} options={selectOptions}/>
134 }; 181 };
@@ -136,11 +183,11 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => { @@ -136,11 +183,11 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
136 interface FormSelectProps extends InputSelectProps { 183 interface FormSelectProps extends InputSelectProps {
137 value?: any; 184 value?: any;
138 loading?: boolean; 185 loading?: boolean;
139 - appId?: string; 186 + appId?: string; // 当前应用ID
140 request?: any; 187 request?: any;
141 disabled?: boolean; 188 disabled?: boolean;
142 popupOnBody?: boolean; 189 popupOnBody?: boolean;
143 - optionId?: string; // 获取options传入表单的appId 190 + preview?: boolean;
144 } 191 }
145 interface FormSelectState { 192 interface FormSelectState {
146 visible: boolean; 193 visible: boolean;
@@ -6,3 +6,10 @@ import { request } from '@qx/common'; @@ -6,3 +6,10 @@ import { request } from '@qx/common';
6 export function getAppFromList(appId: string) { 6 export function getAppFromList(appId: string) {
7 return request.get(`/qx-apaas-lowcode/app/${appId}/option`); 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 +}
@@ -5,27 +5,18 @@ @@ -5,27 +5,18 @@
5 border-radius: 4px; 5 border-radius: 4px;
6 6
7 &__dropdown-bottom { 7 &__dropdown-bottom {
8 - width: calc(100% - 20px) !important;  
9 - height: 50px !important; 8 + width: 100%;
  9 + height: 48px !important;
10 text-align: left !important; 10 text-align: left !important;
11 background-color: #fff !important; 11 background-color: #fff !important;
  12 + border: none;
12 border-top: 1px solid @N4 !important; 13 border-top: 1px solid @N4 !important;
  14 + border-radius: 0;
  15 + box-sizing: border-box;
13 } 16 }
14 - .qx-input-select-dropdown__list {  
15 - max-height: 160px;  
16 - min-height: unset;  
17 - height: unset !important;  
18 - .ant-dropdown-menu {  
19 - box-shadow: none;  
20 - }  
21 - .qx-input-select-dropdown__list-empty {  
22 - display: flex;  
23 - align-items: center;  
24 - justify-content: center;  
25 - flex-direction: column;  
26 - overflow: hidden;  
27 - height: 100px;  
28 - margin: 0;  
29 - } 17 +
  18 + &__input-prefix {
  19 + color: @N6;
  20 + font-size: 16px;
30 } 21 }
31 } 22 }
@@ -36,7 +36,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>( @@ -36,7 +36,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
36 showSearch = false, 36 showSearch = false,
37 onSearch: parentSearch, 37 onSearch: parentSearch,
38 placeholder, 38 placeholder,
39 - listHeight = 260, 39 + listHeight = 192,
40 loading, 40 loading,
41 } = props; 41 } = props;
42 42
@@ -49,7 +49,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>( @@ -49,7 +49,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
49 49
50 const computedOptions = useMemo( 50 const computedOptions = useMemo(
51 () => 51 () =>
52 - options?.map((opt) => ({ 52 + options?.map((opt: any) => ({
53 label: opt[fieldLabel], 53 label: opt[fieldLabel],
54 key: opt[fieldValue], 54 key: opt[fieldValue],
55 ...(opt['extract']? {extract: opt['extract']}: {}) 55 ...(opt['extract']? {extract: opt['extract']}: {})
@@ -119,6 +119,8 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>( @@ -119,6 +119,8 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
119 prefix={<QxBaseIcon type={'icon-app-search-line'} />} 119 prefix={<QxBaseIcon type={'icon-app-search-line'} />}
120 className={`${prefix}__input`} 120 className={`${prefix}__input`}
121 onChange={onSearch} 121 onChange={onSearch}
  122 + bordered={false}
  123 + size={'small'}
122 /> 124 />
123 ) : null} 125 ) : null}
124 126
@@ -128,7 +130,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>( @@ -128,7 +130,7 @@ const DropdownContent = React.forwardRef<any, DropdownContentProps>(
128 <div 130 <div
129 ref={ref} 131 ref={ref}
130 className={`${prefix}__list`} 132 className={`${prefix}__list`}
131 - style={{ height: listHeight }} 133 + style={{ maxHeight: listHeight }}
132 > 134 >
133 {isEmpty ? ( 135 {isEmpty ? (
134 <Empty 136 <Empty
@@ -159,8 +161,11 @@ interface FieldNames { @@ -159,8 +161,11 @@ interface FieldNames {
159 } 161 }
160 162
161 export interface DropdownContentOptions { 163 export interface DropdownContentOptions {
162 - name: string | React.ReactNode;  
163 - code: string | number; 164 + name?: string | React.ReactNode;
  165 + code?: string | number;
  166 + appId?: string;
  167 + formId?: string | number;
  168 + isTree?: boolean;
164 } 169 }
165 170
166 export interface DropdownContentProps { 171 export interface DropdownContentProps {
@@ -6,21 +6,29 @@ @@ -6,21 +6,29 @@
6 &-dropdown { 6 &-dropdown {
7 position: relative; 7 position: relative;
8 width: 100%; 8 width: 100%;
9 - padding: 10px 10px 50px; 9 + padding: 0 0 48px 0;
  10 + border-radius: 4px;
10 overflow: hidden; 11 overflow: hidden;
11 background-color: #fff; 12 background-color: #fff;
12 box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%), 13 box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 12%),
13 0 6px 16px 0 rgba(0, 0, 0, 8%), 0 9px 28px 8px rgba(0, 0, 0, 5%); 14 0 6px 16px 0 rgba(0, 0, 0, 8%), 0 9px 28px 8px rgba(0, 0, 0, 5%);
14 15
15 &__list { 16 &__list {
16 - min-height: 150px;  
17 - max-height: 260px; 17 + max-height: 192px;
18 margin-top: 5px; 18 margin-top: 5px;
19 overflow-y: auto; 19 overflow-y: auto;
  20 + .ant-dropdown-menu {
  21 + box-shadow: none;
  22 + }
20 } 23 }
21 24
22 &__list-empty { 25 &__list-empty {
23 - margin-top: 15%; 26 + display: flex;
  27 + align-items: center;
  28 + justify-content: center;
  29 + flex-direction: column;
  30 + overflow: hidden;
  31 + height: 100px;
24 } 32 }
25 33
26 &__list-content { 34 &__list-content {
@@ -44,37 +52,20 @@ @@ -44,37 +52,20 @@
44 } 52 }
45 53
46 &__input { 54 &__input {
47 - :global {  
48 - .anticon {  
49 - padding: 0 5px;  
50 - color: silver;  
51 - }  
52 - }  
53 -  
54 - padding-bottom: 5px !important;  
55 - padding-left: 0 !important;  
56 - border: none !important; 55 + height: 32px;
57 border-bottom: 1px solid @N4 !important; 56 border-bottom: 1px solid @N4 !important;
58 - outline: none !important;  
59 - box-shadow: none !important;  
60 57
61 - &:hover,  
62 - &:focus,  
63 - &:active {  
64 - border-color: @B8;  
65 - }  
66 - }  
67 - }  
68 -  
69 - &__input {  
70 - :global {  
71 - input {  
72 - cursor: default; 58 + .anticon {
  59 + margin-right: 4px;
  60 + font-size: 16px;
  61 + color: @N6;
73 } 62 }
74 } 63 }
75 } 64 }
  65 +}
76 66
77 - &__input-suffix {  
78 - color: silver; 67 +.qx-input-select__input {
  68 + .qx-input-select__input-suffix {
  69 + color: @N6;
79 } 70 }
80 } 71 }
@@ -83,9 +83,9 @@ interface ParameterSettingProps { @@ -83,9 +83,9 @@ interface ParameterSettingProps {
83 handleAddTree: (val: any) => void; 83 handleAddTree: (val: any) => void;
84 handleAdd: (val: any) => void; 84 handleAdd: (val: any) => void;
85 handleDelete: (val: any) => void; 85 handleDelete: (val: any) => void;
86 - appFormList?: any[]; // 当前应用表单list  
87 request?: any; 86 request?: any;
88 nodeType?: string | 'START' | 'END'; 87 nodeType?: string | 'START' | 'END';
  88 + appId?: string; // 当前应用ID
89 } 89 }
90 const EditableContext = React.createContext<FormInstance<any> | null>(null); 90 const EditableContext = React.createContext<FormInstance<any> | null>(null);
91 91
@@ -244,38 +244,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -244,38 +244,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
244 }, 244 },
245 { 245 {
246 title: '默认值', 246 title: '默认值',
247 - dataIndex: 'mappingValues', 247 + dataIndex: 'valueMapping',
248 width: '15%', 248 width: '15%',
249 editable: true, 249 editable: true,
250 - key: 'mappingValues', 250 + key: 'valueMapping',
251 render: (text) => 251 render: (text) =>
252 - text || [].map((item) => {  
253 - // if (item.indexOf('-') > -1) {  
254 - // if (text == item.key) { 252 + text?.mappingValues || [].map((item) => {
255 return <span key={item}>{item.indexOf('-') > -1 ? item : ''}</span>; 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 title: '参数说明', 257 title: '参数说明',
@@ -284,14 +260,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -284,14 +260,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
284 key: 'description', 260 key: 'description',
285 render: (text, record) => ( 261 render: (text, record) => (
286 <span key={record.id}>{text}</span> 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,29 +310,44 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
342 editable: true, 310 editable: true,
343 key: 'qxProps', 311 key: 'qxProps',
344 render: (text: any, record: any) => { 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 </div> 332 </div>
353 - </> : <>  
354 - <div key={record.id}> 333 + );
  334 + default:
  335 + return (
  336 + <>
  337 + <div key={record.id}>
355 <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format( 338 <span>{record.type == 'TIME' ? text?.min ? moment(text.min).format(
356 formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min} 339 formatEnum[text?.format] || 'YYYY-MM-DD') : undefined : text?.min}
357 </span> 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 </span> 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,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 const values = form.getFieldsValue(); 441 const values = form.getFieldsValue();
459 e.persist(); 442 e.persist();
460 if (e.target.tagName == 'DIV') { 443 if (e.target.tagName == 'DIV') {
461 setCurrentNode(e.target) 444 setCurrentNode(e.target)
462 - // console.log('values', values)  
463 setEditing(!editing); 445 setEditing(!editing);
464 if (currentNode) { 446 if (currentNode) {
465 props.handleChange(values?.newQxProps, record, 'qxProps') 447 props.handleChange(values?.newQxProps, record, 'qxProps')
@@ -491,6 +473,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -491,6 +473,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
491 // message: `不能为空!`, 473 // message: `不能为空!`,
492 // },] : [] 474 // },] : []
493 475
  476 + // 高级设置 取值范围
494 const qxPropsRange = useCallback(() => { 477 const qxPropsRange = useCallback(() => {
495 switch (record.type) { 478 switch (record.type) {
496 case 'STRING': 479 case 'STRING':
@@ -665,7 +648,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -665,7 +648,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
665 </div> 648 </div>
666 ); 649 );
667 case 'FORM': 650 case 'FORM':
668 - console.log('FORM ====', '数据变化'); 651 + case 'USER':
  652 + case 'ORG':
669 return ( 653 return (
670 <div 654 <div
671 key={record.id} 655 key={record.id}
@@ -678,13 +662,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -678,13 +662,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
678 > 662 >
679 <QxFormSelect 663 <QxFormSelect
680 value={qxProps} 664 value={qxProps}
681 - request={props?.request}  
682 - options={props?.appFormList} 665 + appId={props?.appId}
683 placeholder={'选择表单'} 666 placeholder={'选择表单'}
684 popupOnBody={true} 667 popupOnBody={true}
685 onChange={(val: any) => { 668 onChange={(val: any) => {
686 props.handleChange(val, record, 'qxProps'); 669 props.handleChange(val, record, 'qxProps');
687 }} 670 }}
  671 + disabled={['USER', 'ORG'].includes(record.type)}
  672 + request={props?.request}
688 /> 673 />
689 </div> 674 </div>
690 ); 675 );
@@ -803,7 +788,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -803,7 +788,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
803 ) : ( 788 ) : (
804 qxPropsRemark() 789 qxPropsRemark()
805 ) 790 )
806 - ) : dataIndex == 'mappingValues' ? 791 + ) : dataIndex == 'valueMapping' ?
807 qxPropsDefault() : 792 qxPropsDefault() :
808 ( 793 (
809 // @ts-ignore 794 // @ts-ignore
@@ -119,8 +119,7 @@ export default () => { @@ -119,8 +119,7 @@ export default () => {
119 title={titleDom} 119 title={titleDom}
120 // component={QxTagsInput} 120 // component={QxTagsInput}
121 request={request} 121 request={request}
122 - appFormList={appFormList}  
123 - nodeType={'END'} 122 + appId={'5ak3C213YQWEO6IYnIs'}
124 /> 123 />
125 </div> 124 </div>
126 ); 125 );
@@ -45,13 +45,35 @@ const valueOptions = [ @@ -45,13 +45,35 @@ const valueOptions = [
45 { key: 'BOOL', label: '布尔' }, 45 { key: 'BOOL', label: '布尔' },
46 { key: 'OBJECT', label: '对象' }, 46 { key: 'OBJECT', label: '对象' },
47 { key: 'ARRAY', label: '数组' }, 47 { key: 'ARRAY', label: '数组' },
48 -/* { key: 'ANNEX', label: '附件' },  
49 - { key: 'PIC', label: '图片' },*/ 48 + /* { key: 'ANNEX', label: '附件' },
  49 + { key: 'PIC', label: '图片' },*/
50 { key: 'FORM', label: '表单' }, 50 { key: 'FORM', label: '表单' },
51 { key: 'USER', label: '人员' }, 51 { key: 'USER', label: '人员' },
52 { key: 'ORG', label: '部门' }, 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 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => { 77 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
56 let parentKey: React.Key; 78 let parentKey: React.Key;
57 for (let i = 0; i < tree.length; i++) { 79 for (let i = 0; i < tree.length; i++) {
@@ -77,7 +99,7 @@ interface ParameterSettingProps { @@ -77,7 +99,7 @@ interface ParameterSettingProps {
77 // component?: any; 99 // component?: any;
78 // componentItem?: any; 100 // componentItem?: any;
79 // comHandleChange?: (val: any) => void; 101 // comHandleChange?: (val: any) => void;
80 - appFormList?: any[]; // 当前应用表单list 102 + appId?: string; // 当前应用ID
81 request?: any, 103 request?: any,
82 nodeType?: string | 'START' | 'END'; 104 nodeType?: string | 'START' | 'END';
83 } 105 }
@@ -243,15 +265,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -243,15 +265,17 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
243 if (treeList[i].id == data.id) { 265 if (treeList[i].id == data.id) {
244 if (isProps > -1) { 266 if (isProps > -1) {
245 if (code == 'qxProps') { 267 if (code == 'qxProps') {
246 - _qxProps = value 268 + _qxProps = value;
247 } else { 269 } else {
248 _qxProps = { ...data.qxProps }; 270 _qxProps = { ...data.qxProps };
249 _qxProps[_newCode] = value; 271 _qxProps[_newCode] = value;
250 } 272 }
251 - treeList[i].qxProps = _qxProps; 273 + treeList[i].qxProps = {
  274 + ..._qxProps
  275 + };
252 } else { 276 } else {
253 if (code == 'type') { 277 if (code == 'type') {
254 - treeList[i].qxProps = {}; 278 + treeList[i].qxProps = getDefaultQxProps(value);
255 } 279 }
256 treeList[i][code] = value; 280 treeList[i][code] = value;
257 } 281 }
@@ -262,6 +286,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -262,6 +286,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
262 } 286 }
263 }; 287 };
264 loopChangeTree(_newData); 288 loopChangeTree(_newData);
  289 + console.log('_newData ===', _newData);
265 setTreeData(_newData); 290 setTreeData(_newData);
266 if (oldValue) { 291 if (oldValue) {
267 setInputKey(inputKey + 1); 292 setInputKey(inputKey + 1);
@@ -427,6 +452,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -427,6 +452,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
427 const _treeData = [...treeData]; 452 const _treeData = [...treeData];
428 const id = uidGen(); 453 const id = uidGen();
429 const code = uidGen(undefined, 6); 454 const code = uidGen(undefined, 6);
  455 +
430 // @ts-ignore 456 // @ts-ignore
431 const loopAddTree = (treeList: any[]) => { 457 const loopAddTree = (treeList: any[]) => {
432 for (let i = 0; i < treeList.length; i++) { 458 for (let i = 0; i < treeList.length; i++) {
@@ -437,6 +463,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -437,6 +463,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
437 type: _type, 463 type: _type,
438 pid: _pid, 464 pid: _pid,
439 title: code, 465 title: code,
  466 + qxProps: getDefaultQxProps(_type)
440 }); 467 });
441 return; 468 return;
442 } else if (treeList[i].child) { 469 } else if (treeList[i].child) {
@@ -446,7 +473,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -446,7 +473,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
446 }; 473 };
447 474
448 if (!_pid) { 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 } else { 477 } else {
451 loopAddTree(_treeData); 478 loopAddTree(_treeData);
452 } 479 }
@@ -531,7 +558,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -531,7 +558,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
531 }; 558 };
532 559
533 const changeField = (val: any, data: any) => { 560 const changeField = (val: any, data: any) => {
534 - console.log('changeField', val)  
535 if (!val || isEmpty(val)) { 561 if (!val || isEmpty(val)) {
536 return; 562 return;
537 } 563 }
@@ -539,12 +565,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -539,12 +565,16 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
539 // const _qxProps = {}; 565 // const _qxProps = {};
540 566
541 const loopChangeTree = (treeList: ParamDesignModel[]) => { 567 const loopChangeTree = (treeList: ParamDesignModel[]) => {
  568 + let newMappingValues = [];
542 for (let i = 0; i < treeList.length; i++) { 569 for (let i = 0; i < treeList.length; i++) {
543 if (treeList[i].id == data.id) { 570 if (treeList[i].id == data.id) {
544 -  
545 - treeList[i].mappingValues = val.map((item: any) => 571 + newMappingValues = val.map((item: any) =>
546 item?.extVal ? item?.extVal : item?.value, 572 item?.extVal ? item?.extVal : item?.value,
547 ); 573 );
  574 + treeList[i].valueMapping = {
  575 + ...data.valueMapping,
  576 + mappingValues: newMappingValues
  577 + }
548 treeList[i].valuesObj = val; 578 treeList[i].valuesObj = val;
549 // if (!treeList[i].qxProps) { 579 // if (!treeList[i].qxProps) {
550 // treeList[i].qxProps = _qxProps; 580 // treeList[i].qxProps = _qxProps;
@@ -599,7 +629,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -599,7 +629,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
599 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}> 629 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
600 <div 630 <div
601 style={{ 631 style={{
602 - padding: '2px', 632 + // padding: '2px',
603 justifyContent: 'flex-end', 633 justifyContent: 'flex-end',
604 display: 'flex', 634 display: 'flex',
605 width: '100%', 635 width: '100%',
@@ -751,8 +781,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -751,8 +781,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
751 ? treeData?.length > 0 && 781 ? treeData?.length > 0 &&
752 defaultExpandedKeys && ( 782 defaultExpandedKeys && (
753 <Tree 783 <Tree
754 - // className={'tree-list'}  
755 - // rootClassName={'tree-list'} 784 + rootClassName={'qx-parameter-tree-list'}
756 treeData={treeData || []} 785 treeData={treeData || []}
757 fieldNames={{ 786 fieldNames={{
758 title: 'label', 787 title: 'label',
@@ -785,7 +814,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -785,7 +814,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
785 handleAddTree={onAddTree} 814 handleAddTree={onAddTree}
786 visible={visible} 815 visible={visible}
787 request={props?.request} 816 request={props?.request}
788 - appFormList={props?.appFormList} 817 + appId={props?.appId}
789 nodeType={props?.nodeType} 818 nodeType={props?.nodeType}
790 /> 819 />
791 </div> 820 </div>
@@ -15,50 +15,20 @@ @@ -15,50 +15,20 @@
15 align-items: center; 15 align-items: center;
16 16
17 .header-title { 17 .header-title {
18 - overflow:hidden; 18 + overflow: hidden;
19 white-space: nowrap; 19 white-space: nowrap;
20 text-overflow: ellipsis; 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 .ant-tree-treenode-draggable .ant-tree-draggable-icon { 25 .ant-tree-treenode-draggable .ant-tree-draggable-icon {
32 padding-top: 6px; 26 padding-top: 6px;
33 - // display: none;  
34 opacity: 1 !important; 27 opacity: 1 !important;
35 } 28 }
36 29
37 .tree-wrapper { 30 .tree-wrapper {
38 margin-top: 20px; 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 .border-none 34 .border-none
@@ -140,16 +110,13 @@ @@ -140,16 +110,13 @@
140 110
141 .opt-left { 111 .opt-left {
142 display: flex; 112 display: flex;
143 - // transition: all 0.5s ease-in-out;  
144 align-items: center; 113 align-items: center;
145 - // -webkit-transition: width .4s;  
146 - // transition: width .4s;  
147 width: 100%; 114 width: 100%;
148 margin-top: 2px; 115 margin-top: 2px;
149 - // min-width: 100px;  
150 margin-bottom: 2px; 116 margin-bottom: 2px;
151 overflow: hidden; 117 overflow: hidden;
152 text-overflow: ellipsis; 118 text-overflow: ellipsis;
  119 + transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s;
153 120
154 .ant-input-affix-wrapper { 121 .ant-input-affix-wrapper {
155 border-color: @N4; 122 border-color: @N4;
@@ -158,12 +125,8 @@ @@ -158,12 +125,8 @@
158 125
159 .opt-left-down { 126 .opt-left-down {
160 display: flex; 127 display: flex;
161 - // transition: all 0.5s ease-in-out;  
162 - // -webkit-transition: width .4s;  
163 - // transition: width .4s;  
164 align-items: center; 128 align-items: center;
165 width: 100%; 129 width: 100%;
166 - // min-width: 100px;  
167 margin-top: 2px; 130 margin-top: 2px;
168 margin-bottom: 2px; 131 margin-bottom: 2px;
169 overflow: hidden; 132 overflow: hidden;
@@ -172,93 +135,6 @@ @@ -172,93 +135,6 @@
172 border-radius: 4px; 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 .btn-high-del { 138 .btn-high-del {
263 &:hover { 139 &:hover {
264 color: @E3 !important; 140 color: @E3 !important;
@@ -361,3 +237,40 @@ @@ -361,3 +237,40 @@
361 color: @N6; 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,7 +77,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
77 if (!columns || columns.length === 0) { 77 if (!columns || columns.length === 0) {
78 return {}; 78 return {};
79 } 79 }
80 - const index = findIndex(columns, (o: SortItemProps) => { 80 + const index = findIndex(columns, (o: OptionItemProps) => {
81 return o.code === code; 81 return o.code === code;
82 }); 82 });
83 return columns[index]; 83 return columns[index];