田强 / qx-common · Commits

Commit 1c551ae750f7c7142979ff22c2d992ed5f784d0c

Authored by 陈洋
1 parent 99e552c4

pref: 选择数据源 组件优化

Inline Side-by-side
Showing 8 changed files with 63 additions and 88 deletions
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 + return (
  12 + <QxFormSelect
  13 + value={value}
  14 + onChange={(datasource) => {
  15 + setValue(datasource);
  16 + }}
  17 + request={request}
  18 + appId={'5ak3C213YQWEO6IYnIs'}
  19 + />
  20 + );
  21 +};
  22 +```
  23 +
3 ### 外部传入options 24 ### 外部传入options
4 ```tsx 25 ```tsx
5 import { request, QxFormSelect } from '@qx/common'; 26 import { request, QxFormSelect } from '@qx/common';
@@ -244,26 +265,4 @@ export default () => { @@ -244,26 +265,4 @@ export default () => {
244 }; 265 };
245 ``` 266 ```
246 267
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> 268 <API></API>
  1 +import React, {useCallback, useEffect, useRef, useState} from 'react';
1 import { BlockOutlined } from '@ant-design/icons'; 2 import { BlockOutlined } from '@ant-design/icons';
2 import { useSetState } from 'ahooks'; 3 import { useSetState } from 'ahooks';
3 import { Button } from 'antd'; 4 import { Button } from 'antd';
4 import cls from 'classnames'; 5 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'; 6 import type { InputSelectProps } from '../qx-input-select';
8 import { QxInputSelect } from '../qx-input-select'; 7 import { QxInputSelect } from '../qx-input-select';
  8 +import {QxBaseIcon, QxAppSelector} from '@qx/common';
9 9
10 -import './styles.less';  
11 import {getAppFromList} from "./service"; 10 import {getAppFromList} from "./service";
12 11
  12 +import './styles.less';
  13 +
13 const prefix = 'qx-form-select'; 14 const prefix = 'qx-form-select';
14 15
15 const FormSelectMain: React.FC<FormSelectProps>= (props)=> { 16 const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
@@ -60,7 +61,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -60,7 +61,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
60 value={value?.name} 61 value={value?.name}
61 defaultValue={value?.name} 62 defaultValue={value?.name}
62 placeholder={placeholder || '请选择数据源'} 63 placeholder={placeholder || '请选择数据源'}
63 - prefix={<BlockOutlined style={{ color: '#52c41a' }} />} 64 + prefix={<QxBaseIcon className={`${prefix}__input-prefix`} type={'icon-field-rel'} />}
64 options={options} 65 options={options}
65 onChange={handleChange} 66 onChange={handleChange}
66 dropdownProps={{ 67 dropdownProps={{
@@ -85,14 +86,14 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -85,14 +86,14 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
85 title={title || placeholder || '选择数据源'} 86 title={title || placeholder || '选择数据源'}
86 item={{ 87 item={{
87 flag: 'SINGLE', 88 flag: 'SINGLE',
88 - currentId: '',  
89 - appId: appId, 89 + ...value,
  90 + appId: value?.appId || appId,
90 }} 91 }}
91 onChange={handleChange} 92 onChange={handleChange}
92 flag="join" 93 flag="join"
93 showTableTypeTab={false} 94 showTableTypeTab={false}
94 modalProps={{ 95 modalProps={{
95 - width: 550, 96 + width: 480,
96 destroyOnClose: true, 97 destroyOnClose: true,
97 open: state.modalVisible, 98 open: state.modalVisible,
98 onOk: () => setState({ modalVisible: false }), 99 onOk: () => setState({ modalVisible: false }),
@@ -107,15 +108,15 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -107,15 +108,15 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
107 108
108 /** 109 /**
109 * 选择数据源 110 * 选择数据源
  111 + * TODO 当前只支持表单选择 聚合表选择待开发
110 */ 112 */
111 export const QxFormSelect: React.FC<FormSelectProps> = (props) => { 113 export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
112 - const { options= [] as any , optionId } = props; 114 + const { options= [] as any , appId } = props;
113 const [selectOptions, setSelectOptions] = useState([]) 115 const [selectOptions, setSelectOptions] = useState([])
114 116
115 useEffect(() => { 117 useEffect(() => {
116 - console.log(optionId,'llllloptions',options)  
117 - if(optionId && !options?.length) {  
118 - getAppFromList(optionId).then((res: any)=> { 118 + if(appId && !options?.length) {
  119 + getAppFromList(appId).then((res: any)=> {
119 if(res?.length){ 120 if(res?.length){
120 setSelectOptions(res) 121 setSelectOptions(res)
121 } else { 122 } else {
@@ -127,7 +128,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => { @@ -127,7 +128,7 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
127 } else { 128 } else {
128 setSelectOptions(options) 129 setSelectOptions(options)
129 } 130 }
130 - }, [JSON.stringify(options), optionId]); 131 + }, [JSON.stringify(options), appId]);
131 132
132 return <FormSelectMain {...props} options={selectOptions}/> 133 return <FormSelectMain {...props} options={selectOptions}/>
133 }; 134 };
@@ -135,11 +136,10 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => { @@ -135,11 +136,10 @@ export const QxFormSelect: React.FC<FormSelectProps> = (props) => {
135 interface FormSelectProps extends InputSelectProps { 136 interface FormSelectProps extends InputSelectProps {
136 value?: any; 137 value?: any;
137 loading?: boolean; 138 loading?: boolean;
138 - appId?: string; 139 + appId?: string; // 当前应用ID
139 request?: any; 140 request?: any;
140 disabled?: boolean; 141 disabled?: boolean;
141 popupOnBody?: boolean; 142 popupOnBody?: boolean;
142 - optionId?: string; // 获取options传入表单的appId  
143 } 143 }
144 interface FormSelectState { 144 interface FormSelectState {
145 visible: boolean; 145 visible: boolean;
@@ -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;
  16 + }
  17 +
  18 + &__input-prefix {
  19 + color: @N6;
  20 + font-size: 16px;
13 } 21 }
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 - // }  
30 - //}  
31 } 22 }
@@ -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
@@ -6,7 +6,8 @@ @@ -6,7 +6,8 @@
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%),
@@ -51,37 +52,20 @@ @@ -51,37 +52,20 @@
51 } 52 }
52 53
53 &__input { 54 &__input {
54 - :global {  
55 - .anticon {  
56 - padding: 0 5px;  
57 - color: silver;  
58 - }  
59 - }  
60 -  
61 - padding-bottom: 5px !important;  
62 - padding-left: 0 !important;  
63 - border: none !important; 55 + height: 32px;
64 border-bottom: 1px solid @N4 !important; 56 border-bottom: 1px solid @N4 !important;
65 - outline: none !important;  
66 - box-shadow: none !important;  
67 57
68 - &:hover,  
69 - &:focus,  
70 - &:active {  
71 - border-color: @B8;  
72 - }  
73 - }  
74 - }  
75 -  
76 - &__input {  
77 - :global {  
78 - input {  
79 - cursor: default; 58 + .anticon {
  59 + margin-right: 4px;
  60 + font-size: 16px;
  61 + color: @N6;
80 } 62 }
81 } 63 }
82 } 64 }
  65 +}
83 66
84 - &__input-suffix {  
85 - color: silver; 67 +.qx-input-select__input {
  68 + .qx-input-select__input-suffix {
  69 + color: @N6;
86 } 70 }
87 } 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
@@ -679,7 +679,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => { @@ -679,7 +679,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
679 <QxFormSelect 679 <QxFormSelect
680 value={qxProps} 680 value={qxProps}
681 request={props?.request} 681 request={props?.request}
682 - options={props?.appFormList} 682 + appId={props?.appId}
683 placeholder={'选择表单'} 683 placeholder={'选择表单'}
684 popupOnBody={true} 684 popupOnBody={true}
685 onChange={(val: any) => { 685 onChange={(val: any) => {
@@ -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 );
@@ -77,7 +77,7 @@ interface ParameterSettingProps { @@ -77,7 +77,7 @@ interface ParameterSettingProps {
77 // component?: any; 77 // component?: any;
78 // componentItem?: any; 78 // componentItem?: any;
79 // comHandleChange?: (val: any) => void; 79 // comHandleChange?: (val: any) => void;
80 - appFormList?: any[]; // 当前应用表单list 80 + appId?: string; // 当前应用ID
81 request?: any, 81 request?: any,
82 nodeType?: string | 'START' | 'END'; 82 nodeType?: string | 'START' | 'END';
83 } 83 }
@@ -785,7 +785,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => { @@ -785,7 +785,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
785 handleAddTree={onAddTree} 785 handleAddTree={onAddTree}
786 visible={visible} 786 visible={visible}
787 request={props?.request} 787 request={props?.request}
788 - appFormList={props?.appFormList} 788 + appId={props?.appId}
789 nodeType={props?.nodeType} 789 nodeType={props?.nodeType}
790 /> 790 />
791 </div> 791 </div>