田强 / 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 "name": "@qx/common", 2 "name": "@qx/common",
3 - "version": "3.0.0-alpha.18", 3 + "version": "3.0.0-alpha.19",
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 {
@@ -7,15 +7,20 @@ import { request, QxFormSelect } from '@qx/common'; @@ -7,15 +7,20 @@ import { request, QxFormSelect } from '@qx/common';
7 import React, { useState } from 'react'; 7 import React, { useState } from 'react';
8 8
9 export default () => { 9 export default () => {
10 - const [value, setValue] = useState({}); 10 + const [value, setValue] = useState({
  11 + formId: 'PbOC6xBYOvZ1IB2mwUc',
  12 + appId: 'eSnLZ42R2TA5Z18dNsJ'
  13 + });
11 return ( 14 return (
12 <QxFormSelect 15 <QxFormSelect
13 value={value} 16 value={value}
14 onChange={(datasource) => { 17 onChange={(datasource) => {
  18 + console.log('datasource ===', datasource);
15 setValue(datasource); 19 setValue(datasource);
16 }} 20 }}
17 request={request} 21 request={request}
18 - appId={'5ak3C213YQWEO6IYnIs'} 22 + appId={'C9QUrtTmcmDkvHMoOKI'}
  23 + disabled
19 /> 24 />
20 ); 25 );
21 }; 26 };
1 import React, {useCallback, useEffect, useRef, useState} from 'react'; 1 import React, {useCallback, useEffect, useRef, useState} from 'react';
2 -import { BlockOutlined } from '@ant-design/icons';  
3 import { useSetState } from 'ahooks'; 2 import { useSetState } from 'ahooks';
4 import { Button } from 'antd'; 3 import { Button } from 'antd';
5 import cls from 'classnames'; 4 import cls from 'classnames';
@@ -7,7 +6,7 @@ import type { InputSelectProps } from '../qx-input-select'; @@ -7,7 +6,7 @@ import type { InputSelectProps } from '../qx-input-select';
7 import { QxInputSelect } from '../qx-input-select'; 6 import { QxInputSelect } from '../qx-input-select';
8 import {QxBaseIcon, QxAppSelector} from '@qx/common'; 7 import {QxBaseIcon, QxAppSelector} from '@qx/common';
9 8
10 -import {getAppFromList} from "./service"; 9 +import {getAppFromList, getFunInfo} from './service';
11 10
12 import './styles.less'; 11 import './styles.less';
13 12
@@ -31,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -31,14 +30,19 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
31 visible: false, 30 visible: false,
32 modalVisible: false, 31 modalVisible: false,
33 }); 32 });
34 -  
35 const inputSelectRef = useRef<any>(); 33 const inputSelectRef = useRef<any>();
  34 + const [item, setItem] = useState<any>({});
  35 +
36 36
37 const handleChange = (val: any) => { 37 const handleChange = (val: any) => {
38 if (!val?.code) return; 38 if (!val?.code) return;
39 function onOk() { 39 function onOk() {
40 if (val?.code) { 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 setState({ 46 setState({
43 visible: false, 47 visible: false,
44 }); 48 });
@@ -54,54 +58,91 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -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 return ( 95 return (
58 <div className={cls(prefix, className)}> 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 onChange={handleChange} 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 </div> 146 </div>
106 ); 147 );
107 } 148 }
@@ -111,7 +152,12 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -111,7 +152,12 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
111 * TODO 当前只支持表单选择 聚合表选择待开发 152 * TODO 当前只支持表单选择 聚合表选择待开发
112 */ 153 */
113 export const QxFormSelect: React.FC<FormSelectProps> = (props) => { 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 const [selectOptions, setSelectOptions] = useState([]) 161 const [selectOptions, setSelectOptions] = useState([])
116 162
117 useEffect(() => { 163 useEffect(() => {
@@ -130,6 +176,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => { @@ -130,6 +176,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
130 } 176 }
131 }, [JSON.stringify(options), appId]); 177 }, [JSON.stringify(options), appId]);
132 178
  179 +
133 return <FormSelectMain {...props} options={selectOptions}/> 180 return <FormSelectMain {...props} options={selectOptions}/>
134 }; 181 };
135 182
@@ -140,6 +187,7 @@ interface FormSelectProps extends InputSelectProps { @@ -140,6 +187,7 @@ interface FormSelectProps extends InputSelectProps {
140 request?: any; 187 request?: any;
141 disabled?: boolean; 188 disabled?: boolean;
142 popupOnBody?: boolean; 189 popupOnBody?: boolean;
  190 + preview?: boolean;
143 } 191 }
144 interface FormSelectState { 192 interface FormSelectState {
145 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 +}
@@ -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']}: {})
@@ -161,8 +161,11 @@ interface FieldNames { @@ -161,8 +161,11 @@ interface FieldNames {
161 } 161 }
162 162
163 export interface DropdownContentOptions { 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 export interface DropdownContentProps { 171 export interface DropdownContentProps {
@@ -250,32 +250,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -250,32 +250,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
250 key: 'mappingValues', 250 key: 'mappingValues',
251 render: (text) => 251 render: (text) =>
252 text || [].map((item) => { 252 text || [].map((item) => {
253 - // if (item.indexOf('-') > -1) {  
254 - // if (text == item.key) {  
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 appId={props?.appId} 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 );
@@ -52,6 +52,28 @@ const valueOptions = [ @@ -52,6 +52,28 @@ const valueOptions = [
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++) {
@@ -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 }
@@ -599,7 +625,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -599,7 +625,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
599 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}> 625 <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
600 <div 626 <div
601 style={{ 627 style={{
602 - padding: '2px', 628 + // padding: '2px',
603 justifyContent: 'flex-end', 629 justifyContent: 'flex-end',
604 display: 'flex', 630 display: 'flex',
605 width: '100%', 631 width: '100%',
@@ -751,8 +777,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -751,8 +777,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
751 ? treeData?.length > 0 && 777 ? treeData?.length > 0 &&
752 defaultExpandedKeys && ( 778 defaultExpandedKeys && (
753 <Tree 779 <Tree
754 - // className={'tree-list'}  
755 - // rootClassName={'tree-list'} 780 + rootClassName={'qx-parameter-tree-list'}
756 treeData={treeData || []} 781 treeData={treeData || []}
757 fieldNames={{ 782 fieldNames={{
758 title: 'label', 783 title: 'label',
@@ -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];