Showing
5 changed files
with
129 additions
and
110 deletions
... | ... | @@ -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 | } | ... | ... |