田强 / qx-common · Commits

Commit 45b8a69f49e432c521e61a69e1ef79de51064c37

Authored by 邱嘉伟
1 parent f474161a

fix: 参数设计器 样式修改，部分逻辑优化

Inline Side-by-side
Showing 3 changed files with 83 additions and 67 deletions
... ... @@ -40,7 +40,7 @@ import { cloneDeep, debounce, isEmpty } from 'lodash-es';
40 40 import moment from 'dayjs';
41 41 import { QxBaseIcon } from '@qx/common';
42 42 import Icon from '@ant-design/icons';
43   -import {SubNodeIcon} from './sub-node-icon';
  43 +import { SubNodeIcon } from './sub-node-icon';
44 44
45 45 const valueOptions = [
46 46 { key: 'STRING', title: '文本' },
... ... @@ -124,7 +124,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
124 124 nodeType,
125 125 } = props;
126 126 // const [form] = Form.useForm()
127   -
128 127 //判断数组是否只有一个子节点
129 128 const checkShowAdd = (_data: any) => {
130 129 const _newTreeData = cloneDeep(treeData);
... ... @@ -238,6 +237,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
238 237 // </Select>
239 238 // </Form.Item>
240 239 },
  240 + nodeType !== 'END' &&
241 241 {
242 242 title: '取值范围',
243 243 dataIndex: 'qxProps',
... ... @@ -269,6 +269,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
269 269 )
270 270 },
271 271 },
  272 + nodeType !== 'END' &&
272 273 {
273 274 title: '必填',
274 275 dataIndex: 'required',
... ... @@ -702,10 +703,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
702 703 /> */}
703 704 <QxFieldSetter
704 705 value={record.valuesObj || []}
705   - // value={[{
706   - // type: typeTranslateItemtype(record.type) || '',
707   - // value: record?.qxProps?.default
708   - // }]}
709 706 params={{ appCode: 'appCode', useId: true }}
710 707 valueOptions={getValueOptions(record)}
711 708 field={record.type}
... ... @@ -714,6 +711,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
714 711 fieldGroupType={typeTranslateGrouptype(record.type)}
715 712 isMixValue={typeTranslateFieIdtype(record.type) == 'STRING' ? true : false}
716 713 isMultiple={false}
  714 + colsTree={props.nodeItem}
  715 + showFieldOpt={nodeType == 'START' ? false : true}
717 716 onChange={debounce((val) => handleField(val), 700)}
718 717 />
719 718 </div>
... ... @@ -1093,7 +1092,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
1093 1092 childrenColumnName: 'child'
1094 1093 }}
1095 1094 onRow={() => onRow()}
1096   - scroll={{ x: 1600 }}
  1095 + scroll={{ x: 960 }}
1097 1096 rowClassName={() => 'editable-row'}
1098 1097 bordered
1099 1098 pagination={false}
... ...
... ... @@ -31,7 +31,7 @@ import { QxFieldSetter, QxBaseIcon } from '@qx/common';
31 31
32 32 import './style.less';
33 33
34   -import {SubNodeIcon} from './sub-node-icon';
  34 +import { SubNodeIcon } from './sub-node-icon';
35 35
36 36 const valueOptions = [
37 37 { key: 'STRING', label: '文本' },
... ... @@ -238,7 +238,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
238 238 if (treeList[i].id == data.id) {
239 239 if (isProps > -1) {
240 240 if (code == 'qxProps') {
241   - _qxProps = { ...data.qxProps, ...value }
  241 + _qxProps = value
242 242 } else {
243 243 _qxProps = { ...data.qxProps };
244 244 _qxProps[_newCode] = value;
... ... @@ -526,11 +526,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
526 526 };
527 527
528 528 const changeField = (val: any, data: any) => {
529   - if (!val || _.isEmpty(val)) {
  529 + if (!val || isEmpty(val)) {
530 530 return;
531 531 }
532 532 const _newData = cloneDeep(treeData);
533   - const _qxProps = {};
  533 + // const _qxProps = {};
534 534
535 535 const loopChangeTree = (treeList: ParamDesignModel[]) => {
536 536 for (let i = 0; i < treeList.length; i++) {
... ... @@ -540,14 +540,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
540 540 item?.extVal ? item?.extVal : item?.value,
541 541 );
542 542 treeList[i].valuesObj = val;
543   - if (!treeList[i].qxProps) {
544   - treeList[i].qxProps = _qxProps;
545   - }
546   - if (data.type == 'TIME') {
547   - treeList[i].qxProps.default = val[0]?.extVal || undefined;
548   - } else {
549   - treeList[i].qxProps.default = val[0].value || undefined;
550   - }
  543 + // if (!treeList[i].qxProps) {
  544 + // treeList[i].qxProps = _qxProps;
  545 + // }
  546 + // if (data.type == 'TIME') {
  547 + // treeList[i].qxProps.default = val[0]?.extVal || undefined;
  548 + // } else {
  549 + // treeList[i].qxProps.default = val[0].value || undefined;
  550 + // }
551 551 return;
552 552 } else if (!!treeList[i]?.child?.length) {
553 553 loopChangeTree(treeList[i].child || []);
... ... @@ -639,6 +639,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
639 639 </div>
640 640 <div className="opt-left">
641 641 <Input
  642 + draggable={true}
  643 + onDragStart={(event) => {
  644 + event.stopPropagation();
  645 + event.preventDefault();
  646 + }}
642 647 // ref={inputRef}
643 648 key={inputKey}
644 649 style={{ width: '100%' }}
... ... @@ -658,12 +663,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
658 663 <QxFieldSetter
659 664 disabled={disabled}
660 665 value={nodeData.valuesObj || []}
661   - // value={[
662   - // {
663   - // type: typeTranslateItemtype(nodeData.type),
664   - // value: nodeData?.qxProps?.default || '',
665   - // },
666   - // ]}
667 666 params={{ appCode: 'appCode', useId: true }}
668 667 valueOptions={getValueOptions(nodeData)}
669 668 field={nodeData.code}
... ... @@ -708,7 +707,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
708 707 padding: '0 0 0 8px',
709 708 }}
710 709 >
711   - <QxBaseIcon style={{fontSize: '16px'}} type={'qx-icon-plus'} />
  710 + <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
712 711 添加参数
713 712 </Button>
714 713 </Dropdown>
... ... @@ -722,7 +721,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
722 721 openModal();
723 722 }}
724 723 >
725   - <QxBaseIcon style={{fontSize: '16px'}} type={'icon-app-terminal-box-line'} />
  724 + <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} />
726 725 高级设置
727 726 </Button>
728 727 </div>
... ...
... ... @@ -22,6 +22,18 @@
22 22 }
23 23 }
24 24
  25 +// .tree-list {
  26 +// // padding-top: 6px;
  27 +// // display: inline-block;
  28 +// opacity: 0.5 ;
  29 +// }
  30 +
  31 +.ant-tree-treenode-draggable .ant-tree-draggable-icon {
  32 + padding-top: 6px;
  33 + // display: none;
  34 + opacity: 1 !important;
  35 +}
  36 +
25 37 .tree-wrapper {
26 38 margin-top: 20px;
27 39
... ... @@ -31,6 +43,12 @@
31 43
32 44 &:hover {
33 45 background-color: @N3;
  46 +
  47 + .ant-tree-treenode-draggable .ant-tree-draggable-icon {
  48 + padding-top: 6px;
  49 + // display: none;
  50 + opacity: 1 !important;
  51 + }
34 52 }
35 53 }
36 54
... ... @@ -183,62 +201,62 @@
183 201 // width: 85%;
184 202 // }
185 203
186   -@keyframes title-btn-del {
187   - 0% {
188   - opacity: 0;
189   - }
  204 +// @keyframes title-btn-del {
  205 +// 0% {
  206 +// opacity: 0;
  207 +// }
190 208
191   - 20% {
192   - opacity: 0.3;
193   - }
  209 +// 20% {
  210 +// opacity: 0.3;
  211 +// }
194 212
195   - 50% {
196   - opacity: 0.4;
197   - }
  213 +// 50% {
  214 +// opacity: 0.4;
  215 +// }
198 216
199   - 70% {
200   - opacity: 0.6;
201   - }
  217 +// 70% {
  218 +// opacity: 0.6;
  219 +// }
202 220
203   - 100% {
204   - opacity: 0.8;
205   - }
206   -}
  221 +// 100% {
  222 +// opacity: 0.8;
  223 +// }
  224 +// }
207 225
208   -@keyframes title-btn {
209   - 0% {
210   - opacity: 0;
211   - }
  226 +// @keyframes title-btn {
  227 +// 0% {
  228 +// opacity: 0;
  229 +// }
212 230
213   - 20% {
214   - opacity: 0.3;
215   - }
  231 +// 20% {
  232 +// opacity: 0.3;
  233 +// }
216 234
217   - 50% {
218   - opacity: 0.4;
219   - }
  235 +// 50% {
  236 +// opacity: 0.4;
  237 +// }
220 238
221   - 70% {
222   - opacity: 0.6;
223   - }
  239 +// 70% {
  240 +// opacity: 0.6;
  241 +// }
224 242
225   - 100% {
226   - opacity: 0.8;
227   - }
228   -}
  243 +// 100% {
  244 +// opacity: 0.8;
  245 +// }
  246 +// }
229 247
230 248 .ant-tree-node-content-wrapper :hover .title-btn-del {
231 249 display: block;
232   - animation-name: title-btn-del;
233   - animation-duration: 2s;
234   - animation-iteration-count: 1;
  250 + // animation-name: title-btn-del;
  251 + // animation-duration: 2s;
  252 + // animation-iteration-count: 1;
235 253 }
236 254
237 255 .ant-tree-node-content-wrapper :hover .title-btn {
238 256 display: block;
239   - animation-name: title-btn-del;
240   - animation-duration: 2s;
241   - animation-iteration-count: 1;
  257 + // animation-name: title-btn-del;
  258 + // animation-duration: 2s;
  259 + // animation-iteration-count: 1;
242 260 }
243 261
244 262 .btn-high-del {
... ...