Commit bfdaf9b5d8112b30c6cd72bff8d714371953252d

Authored by 邱嘉伟
1 parent d0ed0f0c

fix : 默认值 组件更换 部分样式待更改

... ... @@ -763,10 +763,10 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
763 763 useEffect(() => {
764 764 if (fieldSelectorRef.current && !isMount.current) {
765 765 setTimeout(() => {
766   - console.log('getName-2', fieldSelectorRef.current.getInputDisplay?.());
767   - const display = fieldSelectorRef.current.getInputDisplay?.();
  766 + // console.log('getName-2', fieldSelectorRef.current.getInputDisplay?.());
  767 + const display = fieldSelectorRef?.current?.getInputDisplay?.();
768 768 isMount.current = !!display;
769   - setInputDisplay(fieldSelectorRef.current.getInputDisplay?.());
  769 + setInputDisplay(fieldSelectorRef?.current?.getInputDisplay?.());
770 770 }, 10);
771 771 }
772 772 });
... ...
1 1 /* eslint-disable array-callback-return */
2 2 /* eslint-disable eqeqeq */
3 3 import { SnippetsOutlined } from '@ant-design/icons';
4   -import { QxFieldSetter, QxFormSelect } from '@qx/common';
  4 +import { QxBaseCondition, QxFormSelect } from '@qx/common';
5 5 import {
6 6 Button,
7 7 Col,
... ... @@ -35,11 +35,6 @@ import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
35 35
36 36 import '../style/reset.less';
37 37
38   -type ValueOptionProps = {
39   - key: number | string;
40   - value: string;
41   -};
42   -
43 38 const valueOptions = [
44 39 { key: 'STRING', title: '文本' },
45 40 { key: 'NUMBER', title: '数字' },
... ... @@ -125,22 +120,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
125 120 setSearchValue(value);
126 121 };
127 122
128   - const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
129   - const widget = typeTranslateWidget(item.type);
130   - if (widget === 'userSelector') {
131   - return [];
132   - // return [{key: 'MYSELF', value: "当前用户"}]
133   - }
134   - if (widget === 'orgSelector') {
135   - // return [{key: 'MY_ORG', value: "当前人所在部门"}]
136   - return [];
137   - }
138   - if (widget === 'qxDatetime') {
139   - return [{ key: 'NOW', value: '当前时间' }];
140   - }
141   - return undefined;
142   - };
143   -
144 123 const checkShowTree = (_data: any) => {
145 124 if (_data.type == 'ARRAY') {
146 125 if (_data.child && _data.child.length > 0) {
... ... @@ -202,7 +181,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
202 181 </div>
203 182 ),
204 183 dataIndex: 'title',
205   - width: '112px',
  184 + width: '120px',
206 185 className: 'ps-table-cell',
207 186 key: 'title',
208 187 render: (text, record) => {
... ... @@ -275,8 +254,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
275 254 width: '116px',
276 255 key: 'valueMapping',
277 256 render: (text, record) => (
278   - <div className="editable-cell ">
279   - <QxFieldSetter
  257 + <div className="editable-cell-default ">
  258 + <QxBaseCondition
  259 + value={[
  260 + {
  261 + mappingValues: text?.mappingValues || [],
  262 + // disabled: disabled,
  263 + valuesObj: record.valuesObj || [],
  264 + params: { appCode: 'appCode', useId: true },
  265 + // valueOptions: getValueOptions(nodeData),
  266 + field: record.code,
  267 + widget: typeTranslateWidget(record.type),
  268 + fieldType: typeTranslateFieIdtype(record.type),
  269 + type: typeTranslateFieIdtype(record.type),
  270 + fieldGroupType: typeTranslateGrouptype(record.type),
  271 + isMixValue: false, //暂时只支持单选
  272 + // typeTranslateFieIdtype(record.type) == 'STRING'
  273 + // ? true
  274 + // : false,
  275 + // colsTree: props.nodeItem,
  276 + isMultiple: false,
  277 + // popupOnBody: true,
  278 + // inputDis: true,
  279 + showHeader: false,
  280 + },
  281 + ]}
  282 + onChange={(val) => handleChangeField(val, record)}
  283 + showIdx={false}
  284 + node={props.nodeItem}
  285 + mode="variable"
  286 + />
  287 + {/* <QxFieldSetter
280 288 disabled={record.disabled || typeDis}
281 289 value={record.valuesObj || []}
282 290 params={{ appCode: 'appCode', useId: true }}
... ... @@ -292,7 +300,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
292 300 onChange={(val) => handleChangeField(val, record)}
293 301 popupOnBody={true}
294 302 inputDis={true}
295   - />
  303 + /> */}
296 304 </div>
297 305 ),
298 306 },
... ... @@ -305,7 +313,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
305 313 dataIndex: 'description',
306 314 className: 'ps-table-cell',
307 315 key: 'description',
308   - width: '102px',
  316 + width: '120px',
309 317 render: (text, record) => (
310 318 <Form.Item
311 319 name={'description' + record.id}
... ... @@ -392,7 +400,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
392 400 ),
393 401 dataIndex: 'qxProps',
394 402 className: 'ps-table-cell',
395   - width: '314px',
  403 + width: '350px',
396 404 key: 'qxProps',
397 405 render: (qxProps: any, record: any) => {
398 406 switch (record.type) {
... ...
... ... @@ -122,9 +122,9 @@ export default () => {
122 122 nodeItem={nodeItem}
123 123 // componentItem={componentItem}
124 124 onChange={handleChange}
125   - isHideSearch={isHide}
  125 + // isHideSearch={isHide}
126 126 isShowField={true}
127   - title={titleDom}
  127 + // title={titleDom}
128 128 // type={'preview'}
129 129 // component={QxTagsInput}
130 130 request={request}
... ...
... ... @@ -22,7 +22,7 @@ import {
22 22 typeTranslateWidget,
23 23 } from './constant';
24 24
25   -import { QxBaseIcon, QxFieldSetter } from '@qx/common';
  25 +import { QxBaseCondition, QxBaseIcon } from '@qx/common';
26 26 import moment from 'dayjs';
27 27 import { cloneDeep, isEmpty } from 'lodash-es';
28 28 import type { ParamDesignModel } from './constant';
... ... @@ -30,11 +30,6 @@ import { uidGen } from './stringUtil';
30 30
31 31 import './style.less';
32 32
33   -type ValueOptionProps = {
34   - key: number | string;
35   - value: string;
36   -};
37   -
38 33 import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
39 34
40 35 const valueOptions = [
... ... @@ -332,7 +327,13 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
332 327 };
333 328
334 329 // 删除树
335   - const deleteParameter = (data: ParamDesignModel) => {
  330 + const deleteParameter = (e: any, data: ParamDesignModel) => {
  331 + e.persist();
  332 + let item = e.currentTarget;
  333 + e.currentTarget.disabled = true;
  334 + setTimeout(() => {
  335 + item.disabled = false;
  336 + }, 500);
336 337 Modal.confirm({
337 338 title: '删除',
338 339 content: `确定要删除此参数吗?`,
... ... @@ -568,39 +569,28 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
568 569 // }
569 570 };
570 571
571   - const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
572   - const widget = typeTranslateWidget(item.type);
573   - if (widget === 'userSelector') {
574   - return [];
575   - // return [{key: 'MYSELF', value: "当前用户"}]
576   - }
577   - if (widget === 'orgSelector') {
578   - // return [{key: 'MY_ORG', value: "当前人所在部门"}]
579   - return [];
580   - }
581   - if (widget === 'qxDatetime') {
582   - return [{ key: 'NOW', value: '当前时间' }];
583   - }
584   - return undefined;
585   - };
586   -
587 572 const changeField = (val: any, data: any) => {
588 573 if (!val || isEmpty(val)) {
589 574 return;
590 575 }
  576 + console.log('changeField', val);
591 577 const _newData = cloneDeep(treeData);
592 578 const loopChangeTree = (treeList: ParamDesignModel[]) => {
593   - let newMappingValues = [];
  579 + let newMappingValues = [],
  580 + newValuesObj = [];
594 581 for (let i = 0; i < treeList.length; i++) {
595 582 if (treeList[i].id == data.id) {
596 583 newMappingValues = val.map((item: any) =>
597   - item?.extVal ? item?.extVal : item?.value,
  584 + item?.mappingValues ? item?.mappingValues[0] : '',
  585 + );
  586 + newValuesObj = val.map((item: any) =>
  587 + item?.valuesObj ? item?.valuesObj[0] : {},
598 588 );
599 589 treeList[i].valueMapping = {
600 590 ...data.valueMapping,
601 591 mappingValues: newMappingValues,
602 592 };
603   - treeList[i].valuesObj = val;
  593 + treeList[i].valuesObj = newValuesObj;
604 594 return;
605 595 } else if (!!treeList[i]?.child?.length) {
606 596 loopChangeTree(treeList[i].child || []);
... ... @@ -617,7 +607,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
617 607 let level = [];
618 608 const treeList = generateList(treeData);
619 609 const loop = (list: any[]) => {
620   - if (!!list.pid) {
  610 + if (!!list?.pid) {
621 611 const index = treeList.findIndex((o: any) => o.id === list.pid);
622 612 level.push(treeList[index]);
623 613 loop(treeList[index]);
... ... @@ -626,6 +616,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
626 616 }
627 617 };
628 618 loop(nodeData);
  619 +
  620 + // const test = document.getElementByClassName('ant-tree-node-content-wrapper')
  621 + // console.log('test', test)
629 622 const treeLevel2 = !!nodeData.pid ? level.length : 0;
630 623 const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0;
631 624 const leftD = 22 + treeLevel * 22 + treeLevel2 * 24;
... ... @@ -691,23 +684,21 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
691 684 }
692 685 disabled={disabled}
693 686 type="link"
694   - onClick={() => deleteParameter(nodeData)}
  687 + onClick={(e) => deleteParameter(e, nodeData)}
695 688 />
696 689 </div>
697 690 <div className="opt-left">
698 691 <Input
699 692 status={!nodeData.title ? 'error' : ''}
700 693 placeholder={!nodeData.title ? '请输入参数名' : ''}
701   - className={
702   - index > -1 && searchValue ? 'search-selected' : 'sp-input'
703   - }
  694 + className={index > -1 && searchValue ? 'search-selected' : ''}
704 695 draggable={true}
705 696 onDragStart={(event) => {
706 697 event.stopPropagation();
707 698 event.preventDefault();
708 699 }}
709 700 key={inputKey}
710   - style={{ width: '100%' }}
  701 + style={{ width: '100%', borderRadius: '4px' }}
711 702 maxLength={50}
712 703 disabled={disabled}
713 704 bordered={true}
... ... @@ -720,25 +711,34 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
720 711 </div>
721 712 {props?.isShowField && (
722 713 <div className="opt-left-down">
723   - <QxFieldSetter
724   - disabled={disabled}
725   - value={nodeData.valuesObj || []}
726   - params={{ appCode: 'appCode', useId: true }}
727   - valueOptions={getValueOptions(nodeData)}
728   - field={nodeData.code}
729   - widget={typeTranslateWidget(nodeData.type)}
730   - fieldType={typeTranslateFieIdtype(nodeData.type)}
731   - fieldGroupType={typeTranslateGrouptype(nodeData.type)}
732   - isMixValue={
733   - typeTranslateFieIdtype(nodeData.type) == 'STRING'
734   - ? true
735   - : false
736   - }
737   - colsTree={props.nodeItem}
738   - isMultiple={false}
  714 + <QxBaseCondition
  715 + value={[
  716 + {
  717 + mappingValues: nodeData?.valueMapping?.mappingValues || [],
  718 + // disabled: disabled,
  719 + valuesObj: nodeData.valuesObj || [],
  720 + params: { appCode: 'appCode', useId: true },
  721 + // valueOptions: getValueOptions(nodeData),
  722 + field: nodeData.code,
  723 + widget: typeTranslateWidget(nodeData.type),
  724 + fieldType: typeTranslateFieIdtype(nodeData.type),
  725 + type: typeTranslateFieIdtype(nodeData.type),
  726 + fieldGroupType: typeTranslateGrouptype(nodeData.type),
  727 + isMixValue: false,
  728 + // typeTranslateFieIdtype(nodeData.type) == 'STRING'
  729 + // ? true
  730 + // : false,
  731 + // colsTree: props.nodeItem,
  732 + isMultiple: false,
  733 + // popupOnBody: true,
  734 + // inputDis: true,
  735 + showHeader: false,
  736 + },
  737 + ]}
739 738 onChange={(val) => changeField(val, nodeData)}
740   - popupOnBody={true}
741   - inputDis={true}
  739 + showIdx={false}
  740 + node={props.nodeItem}
  741 + mode="variable"
742 742 />
743 743 </div>
744 744 )}
... ... @@ -819,7 +819,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
819 819 rootClassName={'qx-parameter-tree-list'}
820 820 treeData={treeData || []}
821 821 fieldNames={{
822   - title: 'label',
  822 + title: null,
823 823 key: 'id',
824 824 children: 'child',
825 825 }}
... ...
... ... @@ -162,34 +162,25 @@
162 162 .ant-input-affix-wrapper {
163 163 border-color: @N4;
164 164 }
165   -
166   - .sp-input {
167   - &::placeholder {
168   - color: red !important;
169   - }
170   - }
171 165 }
172 166
173 167 .opt-left-down {
174   - display: flex;
175   - align-items: center;
176   - width: 100%;
  168 + // display: flex;
  169 + // align-items: center;
  170 + // width: 80%;
177 171 margin-top: 2px;
178 172 margin-bottom: 2px;
179   - overflow: hidden;
180   - text-overflow: ellipsis;
181   - background-color: #fff;
182   - border-radius: 4px;
183   -
184   - .qx-field-setter {
185   - border-width: 1px;
186   - border-style: solid;
187   - border-color: #d9d9d9;
188   - border-radius: 6px;
189   - // height: 32px;
190   -
191   - .qx-formula-cm {
192   - padding-left: 10px !important;
  173 + // overflow: hidden;
  174 + // text-overflow: ellipsis;
  175 + // background-color: #fff;
  176 + // border-radius: 4px;
  177 + .qx-base-condition-item {
  178 + margin: 0;
  179 +
  180 + .qx-field-setter {
  181 + .qx-tags-input {
  182 + background-color: #fff;
  183 + }
193 184 }
194 185 }
195 186 }
... ... @@ -223,13 +214,27 @@
223 214 .ant-input-affix-wrapper,
224 215 .qx-field-setter {
225 216 border-width: 0;
  217 +
  218 + .qx-tags-input {
  219 + background-color: transparent;
  220 + }
  221 + }
  222 +}
  223 +
  224 +.editable-cell-default {
  225 + .qx-base-condition-item {
  226 + margin: 0;
  227 + }
  228 +
  229 + .qx-field-setter {
  230 + border-width: 0;
226 231 }
227 232 }
228 233
229 234 .search-selected {
230   - .ant-input {
231   - color: #1890ff;
232   - }
  235 + // .ant-input {
  236 + color: #1890ff;
  237 + // }
233 238 }
234 239
235 240 .editable-cell-value-wrap {
... ... @@ -340,6 +345,12 @@
340 345 }
341 346 }
342 347
  348 + .opt-btn {
  349 + .ant-select-selection-item {
  350 + color: #242835;
  351 + }
  352 + }
  353 +
343 354 .ant-tree-node-content-wrapper.ant-tree-node-selected {
344 355 background-color: transparent;
345 356 }
... ...