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 | } | ... | ... |