Commit fb9ccb11d652635e2be9d868581c23c346da79fb

Authored by 李婷
1 parent 14d0aea0

feat: 选择表单 回显优化

@@ -70,6 +70,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -70,6 +70,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
70 appId: appId, 70 appId: appId,
71 code: it.code, 71 code: it.code,
72 name: it.name, 72 name: it.name,
  73 + appName: it.extract?.appName
73 }; 74 };
74 } 75 }
75 }); 76 });
@@ -85,6 +86,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -85,6 +86,7 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
85 code: res.code, 86 code: res.code,
86 appId: res?.extract?.appId, 87 appId: res?.extract?.appId,
87 name: res.name, 88 name: res.name,
  89 + appName: res.extract?.appName
88 }); 90 });
89 }); 91 });
90 } 92 }
@@ -119,6 +121,8 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> { @@ -119,6 +121,8 @@ const FormSelectMain: React.FC<FormSelectProps>= (props)=> {
119 }} 121 }}
120 disabled={disabled} 122 disabled={disabled}
121 popupOnBody={props?.popupOnBody} 123 popupOnBody={props?.popupOnBody}
  124 + from={'FORM'}
  125 + appName={item.appName}
122 /> 126 />
123 127
124 {state.modalVisible ? ( 128 {state.modalVisible ? (
@@ -11,6 +11,7 @@ import type { @@ -11,6 +11,7 @@ import type {
11 import DropdownContent from './dropdown-content'; 11 import DropdownContent from './dropdown-content';
12 12
13 import './styles.less'; 13 import './styles.less';
  14 +import {QxBaseIcon} from "@qx/common";
14 15
15 const prefix = 'qx-input-select'; 16 const prefix = 'qx-input-select';
16 17
@@ -25,6 +26,7 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>( @@ -25,6 +26,7 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
25 dropdownProps, 26 dropdownProps,
26 onChange, 27 onChange,
27 disabled, 28 disabled,
  29 + from,
28 ...rest 30 ...rest
29 } = props; 31 } = props;
30 32
@@ -83,14 +85,38 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>( @@ -83,14 +85,38 @@ export const QxInputSelect = React.forwardRef<any, InputSelectProps>(
83 onOpenChange={onVisibleChange} 85 onOpenChange={onVisibleChange}
84 disabled={disabled} 86 disabled={disabled}
85 > 87 >
86 - <Input  
87 - placeholder="请选择"  
88 - readOnly  
89 - suffix={inputSuffix}  
90 - onClick={() => setState({ visible: !state.visible })}  
91 - {...rest}  
92 - className={`${prefix}__input`}  
93 - /> 88 + <>
  89 + {
  90 + from === 'FORM'?
  91 + <div
  92 + className={'qx-input-select__div'}
  93 + tabIndex={1}
  94 + onClick={() => setState({ visible: !state.visible })}
  95 + >
  96 + {props?.prefix}
  97 + { !props?.value ?
  98 + <span className={'qx-input-select__div-main qx-input-select__div-placeholder'}>{props?.placeholder}</span>:
  99 + <span className={'qx-input-select__div-main'}>
  100 + <span>{props?.appName}</span>
  101 + <QxBaseIcon
  102 + type="qx-icon-left"
  103 + className={'qx-input-select__div-svg'}
  104 + />
  105 + <span>{props?.value}</span>
  106 + </span>
  107 + }
  108 + {inputSuffix}
  109 + </div>:
  110 + <Input
  111 + placeholder="请选择"
  112 + readOnly
  113 + suffix={inputSuffix}
  114 + onClick={() => setState({ visible: !state.visible })}
  115 + {...rest}
  116 + className={`${prefix}__input`}
  117 + />
  118 + }
  119 + </>
94 </Dropdown> 120 </Dropdown>
95 </div> 121 </div>
96 ); 122 );
@@ -103,6 +129,8 @@ export interface InputSelectProps extends Omit<InputProps, 'onChange'> { @@ -103,6 +129,8 @@ export interface InputSelectProps extends Omit<InputProps, 'onChange'> {
103 dropdownProps?: DropdownContentProps; 129 dropdownProps?: DropdownContentProps;
104 disabled?: boolean; 130 disabled?: boolean;
105 popupOnBody?: boolean; 131 popupOnBody?: boolean;
  132 + from?: string;
  133 + appName?: string;
106 } 134 }
107 export interface InputSelectState { 135 export interface InputSelectState {
108 visible: boolean; 136 visible: boolean;
@@ -69,3 +69,54 @@ @@ -69,3 +69,54 @@
69 color: @N6; 69 color: @N6;
70 } 70 }
71 } 71 }
  72 +
  73 +.qx-input-select__div {
  74 + height: 32px;
  75 + border: 1px solid #d9d9d9;
  76 + border-radius: 4px;
  77 + padding: 4px 11px;
  78 + display: flex;
  79 + align-items: center;
  80 + font-size: 14px;
  81 + cursor: text;
  82 + transition: all .3s;
  83 +
  84 + &:hover {
  85 + border-color: @B8;
  86 + }
  87 +
  88 + &:focus {
  89 + box-shadow: 0 0 0 2px @B3;
  90 + outline: none;
  91 + }
  92 +
  93 + &-main {
  94 + height: 22px;
  95 + line-height: 22px;
  96 + margin: 0 4px;
  97 + flex: 1;
  98 + color: @N9;
  99 + display: flex;
  100 + align-items: center;
  101 + overflow: hidden;
  102 + text-overflow: ellipsis;
  103 + white-space: nowrap;
  104 +
  105 + .qx-input-select__div-svg {
  106 + color: @N7;
  107 + transform: rotate(180deg);
  108 + font-size: 16px;
  109 + margin: 0 4px;
  110 + }
  111 +
  112 + }
  113 + &-placeholder {
  114 + color: @N6;
  115 + }
  116 + .qx-input-select__input-suffix {
  117 + color: @N6;
  118 + }
  119 + .qx-form-select__input-prefix {
  120 + color: @B8;
  121 + }
  122 +}