Commit 07e3d34c66c05d19273a943d4814c4ddde0e05a3

Authored by 李婷
1 parent e46c4331

feat(选择表单): 样式调整

@@ -3,5 +3,9 @@ export * from './qx-parameter-setting'; @@ -3,5 +3,9 @@ export * from './qx-parameter-setting';
3 export * from './qx-sort-condition'; 3 export * from './qx-sort-condition';
4 export * from './qx-base-icon'; 4 export * from './qx-base-icon';
5 export * from './qx-tags-input'; 5 export * from './qx-tags-input';
  6 +export * from './qx-user-selector';
  7 +export * from './qx-form-select';
  8 +export * from './qx-app-selector';
  9 +
6 // export * from './qx-btn'; 10 // export * from './qx-btn';
7 // export { default as FieldSetter } from './qx-field-setter'; 11 // export { default as FieldSetter } from './qx-field-setter';
@@ -23,6 +23,7 @@ import type { ModalProps } from 'antd'; @@ -23,6 +23,7 @@ import type { ModalProps } from 'antd';
23 import {QxBaseIcon} from '@qx/common'; 23 import {QxBaseIcon} from '@qx/common';
24 24
25 import './styles.less'; 25 import './styles.less';
  26 +import '../style/reset.less'
26 27
27 const { Title, Text } = Typography; 28 const { Title, Text } = Typography;
28 /** 29 /**
@@ -99,11 +100,11 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -99,11 +100,11 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
99 return; 100 return;
100 } 101 }
101 if (props?.haveChildren) { 102 if (props?.haveChildren) {
102 - getFunList(request, targetItem.code, { hasChild: true }).then((re) => { 103 + getFunList(request, targetItem.code, { hasChild: true }).then((re: any) => {
103 setFormList(re); 104 setFormList(re);
104 }); 105 });
105 } else { 106 } else {
106 - getFunList(request, targetItem.code).then((re) => { 107 + getFunList(request, targetItem.code).then((re: any) => {
107 setFormList(re); 108 setFormList(re);
108 }); 109 });
109 } 110 }
@@ -318,7 +319,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -318,7 +319,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
318 getPopupContainer={(triggerNode) => triggerNode} 319 getPopupContainer={(triggerNode) => triggerNode}
319 > 320 >
320 <div 321 <div
321 - className={`ant-input qx-fr-input--fake select-source`} 322 + className={`ant-input qx-fr-input--fake select-source css-dev-only-do-not-override-nnuwmp`}
322 style={{ 323 style={{
323 height: '36px', 324 height: '36px',
324 }} 325 }}
@@ -332,6 +333,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -332,6 +333,7 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
332 </div> 333 </div>
333 <DownOutlined /> 334 <DownOutlined />
334 </div> 335 </div>
  336 + {/*<Input/>*/}
335 </Popover> 337 </Popover>
336 </div> 338 </div>
337 </> 339 </>
@@ -406,6 +408,13 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({ @@ -406,6 +408,13 @@ export const QxAppSelector: React.FC<QxAppSelectProps> = ({
406 <Modal 408 <Modal
407 bodyStyle={{ padding: 0 }} 409 bodyStyle={{ padding: 0 }}
408 className={'qx-query-designer'} 410 className={'qx-query-designer'}
  411 + wrapClassName={'qx-common__modal qx-app-selector__modal'}
  412 + closeIcon={
  413 + <QxBaseIcon
  414 + className={'qx-common__modal--close'}
  415 + type={'icon-close'}
  416 + />
  417 + }
409 keyboard={false} 418 keyboard={false}
410 maskClosable={false} 419 maskClosable={false}
411 {...props.modalProps} 420 {...props.modalProps}
1 @import '~@qx/ui/src/style/variable.less'; 1 @import '~@qx/ui/src/style/variable.less';
2 2
3 -.ant-input.select-source {  
4 - display: flex;  
5 - flex-direction: row;  
6 - align-items: center;  
7 - justify-content: space-between;  
8 - min-height: 32px;  
9 - padding-top: 2px;  
10 - padding-bottom: 2px; 3 +.qx-app-selector__modal {
11 4
12 - .ant-tag {  
13 - margin: 1px; 5 + .ant-popover-inner-content {
  6 + max-height: 280px;
  7 + overflow-y: auto;
  8 + overflow-x: hidden;
  9 + padding: 0;
14 } 10 }
  11 + .qx-fg-select-overlay .ant-popover-arrow {
  12 + display: none;
  13 + }
  14 +
  15 + .ant-input.select-source {
  16 + display: flex;
  17 + flex-direction: row;
  18 + align-items: center;
  19 + justify-content: space-between;
  20 + min-height: 32px;
  21 + position: unset;
  22 + transition: all .3s;
15 23
16 - > .anticon {  
17 - padding: 0 6px;  
18 - color: @N5;  
19 - font-size: 12px; 24 + .ant-tag {
  25 + margin: 1px;
  26 + }
  27 +
  28 + > .anticon {
  29 + padding: 0 6px;
  30 + color: @N5;
  31 + font-size: 12px;
  32 + }
20 } 33 }
21 } 34 }
  35 +
@@ -9,7 +9,7 @@ import { QxInputSelect } from '../qx-input-select'; @@ -9,7 +9,7 @@ import { QxInputSelect } from '../qx-input-select';
9 9
10 import './styles.less'; 10 import './styles.less';
11 11
12 -const prefix = 'qx-datasource-select'; 12 +const prefix = 'qx-form-select';
13 13
14 /** 14 /**
15 * 选择数据源 15 * 选择数据源
1 @import '~@qx/ui/src/style/variable.less'; 1 @import '~@qx/ui/src/style/variable.less';
2 2
3 -@prefix: ~'qx-datasource-select'; 3 +@prefix: ~'qx-form-select';
4 4
5 .@{prefix} { 5 .@{prefix} {
6 width: 100%; 6 width: 100%;
@@ -12,4 +12,7 @@ @@ -12,4 +12,7 @@
12 background-color: #fff !important; 12 background-color: #fff !important;
13 border-top: 1px solid @N4 !important; 13 border-top: 1px solid @N4 !important;
14 } 14 }
  15 + .qx-input-select-dropdown {
  16 + height: 200px;
  17 + }
15 } 18 }