田强 / qx-common · Commits

Commit b31e36b3234c51ff214638f404d46b2b41bd6c6e

Authored by qiang.tian
2 parents c2e1c572 430eebf8

Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common… 

… into feature/dataflow
Inline Side-by-side
Showing 13 changed files with 693 additions and 439 deletions
1 1 {
2 2 "name": "@qx/common",
3   - "version": "3.0.0-alpha.35",
  3 + "version": "3.0.0-alpha.36",
4 4 "description": "A react library developed with dumi",
5 5 "license": "MIT",
6 6 "module": "dist/index.js",
... ...
... ... @@ -2,6 +2,10 @@
2 2
3 3 .qx-app-selector__modal {
4 4
  5 + .ant-typography {
  6 + font-size: 14px;
  7 + }
  8 +
5 9 .ant-popover-inner-content {
6 10 max-height: 280px;
7 11 overflow-y: auto;
... ...
... ... @@ -59,7 +59,7 @@ const FieldsCheckboxGroup: FC<FieldsCheckboxGroupProps> = (props) => {
59 59 <Divider style={{ margin: 0 }} />
60 60 <ul
61 61 className={'qx-setting-fields'}
62   - style={{ maxHeight: '200px', overflow: 'auto' }}
  62 + style={{ maxHeight: '290px', overflow: 'auto' }}
63 63 >
64 64 {fields.map((item) => {
65 65 return (
... ...
... ... @@ -96,6 +96,13 @@
96 96 border: 1px solid #d9d9d9;
97 97 border-radius: 4px;
98 98 transition: all 0.3s;
  99 + pointer-events: auto;
  100 + cursor: pointer;
  101 +
  102 + &.disabled {
  103 + pointer-events: none;
  104 + cursor: not-allowed;
  105 + }
99 106
100 107 &:hover {
101 108 border-color: @B8;
... ...
... ... @@ -18,59 +18,195 @@ import { QxFlowNodeFieldSelector } from '@qx/common';
18 18 import { Form } from 'antd';
19 19
20 20 const node = {
21   - id: 'dfc29d5b64fa42489a65b3cfaeb999da',
22   - type: 'default_DF_CONDITION',
23   - name: '条件',
24   - iconColor: '#F77234',
25   - data: {},
26   - children: [],
27   - previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
  21 + "id": "cc98b10fd69f446ba32c7c76fd2c5dde",
  22 + "icon": "http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/public/icons/logo.svg",
  23 + "type": "default_DF_DO_U",
  24 + "name": "更新记录",
  25 + "url": "http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/index.js",
  26 + "data": {
  27 + "nodeVersion": "1.0.0-dev34"
  28 + },
  29 + "previousId": "40e5975ebf6b4afb9a9fe162d7f7227f",
  30 + "path": [
  31 + "1"
  32 + ],
  33 + "configuring": true
28 34 };
29 35
30 36 const nodes = [
31 37 {
32   - id: '4c4fc5213db149808c57d093b15e6295',
33   - name: '开始',
34   - type: 'default_DF_START',
35   - data: {
36   - nodeVersion: '3.0.0',
37   - data: {
38   - enablePropagation: false,
39   - propagation: 'REQUIRED',
40   - isolation: 'REPEATABLE_READ',
  38 + "id": "40e5975ebf6b4afb9a9fe162d7f7227f",
  39 + "name": "开始",
  40 + "type": "default_DF_START",
  41 + "data": {
  42 + "nodeVersion": "3.0.0",
  43 + "data": {
  44 + "enablePropagation": true,
  45 + "params": [
  46 + {
  47 + "id": "e039b23ff8294b158ac6b8ddc2ece8aa",
  48 + "code": "5ybpag",
  49 + "type": "STRING",
  50 + "title": "文本字段",
  51 + "qxProps": {
  52 + "min": "-1",
  53 + "max": "20"
  54 + },
  55 + "valueMapping": {
  56 + "mappingValues": [
  57 + "1111111111111"
  58 + ]
  59 + },
  60 + "valuesObj": [
  61 + {
  62 + "type": "MANUAL",
  63 + "value": "1111111111111"
  64 + }
  65 + ]
  66 + },
  67 + {
  68 + "id": "b0f72671bc474d0cb9ecb2609973f35d",
  69 + "code": "z0zbwx",
  70 + "type": "FORM",
  71 + "title": "表单参数",
  72 + "qxProps": {
  73 + "appId": "C9QUrtTmcmDkvHMoOKI",
  74 + "formId": "hhgYI0rGV78NEPbgIms",
  75 + "isTree": false
  76 + },
  77 + "description": "",
  78 + "valueMapping": {
  79 + "mappingValues": []
  80 + },
  81 + "valuesObj": []
  82 + },
  83 + {
  84 + "id": "82ab09325d3e4c328adfe33e17898b22",
  85 + "code": "p62xqq",
  86 + "type": "USER",
  87 + "title": "人员11",
  88 + "qxProps": {
  89 + "formId": "PbOC6xBYOvZ1IB2mwUc",
  90 + "appId": "eSnLZ42R2TA5Z18dNsJ",
  91 + "isTree": false
  92 + }
  93 + },
  94 + {
  95 + "id": "09a6780520964f5fa237ca0dbdb11b94",
  96 + "code": "ksq7se",
  97 + "type": "ORG",
  98 + "title": "部门11",
  99 + "qxProps": {
  100 + "formId": "UsoOGnrJLPziSQwGDwj",
  101 + "appId": "eSnLZ42R2TA5Z18dNsJ",
  102 + "isTree": true
  103 + }
  104 + },
  105 + {
  106 + "id": "098d551fbe1d40858c590edc78c543eb",
  107 + "code": "0nmura",
  108 + "type": "OBJECT",
  109 + "title": "对象一级",
  110 + "qxProps": {},
  111 + "pid": "",
  112 + "description": "",
  113 + "valueMapping": {
  114 + "mappingValues": []
  115 + },
  116 + "valuesObj": [],
  117 + "child": [
  118 + {
  119 + "id": "1bb1b69f3e3249048c77509eb8dc2d53",
  120 + "type": "ARRAY",
  121 + "pid": "098d551fbe1d40858c590edc78c543eb",
  122 + "code": "rypxuo",
  123 + "title": "数组二级",
  124 + "qxProps": {},
  125 + "description": "",
  126 + "valueMapping": {
  127 + "mappingValues": []
  128 + },
  129 + "valuesObj": [],
  130 + "child": [
  131 + {
  132 + "id": "87d01cd61fe24519b2865438c2bf60ed",
  133 + "type": "FORM",
  134 + "pid": "1bb1b69f3e3249048c77509eb8dc2d53",
  135 + "code": "gnmz55",
  136 + "title": "表单三级啦啦啦啦啦绿绿绿",
  137 + "qxProps": {
  138 + "appId": "C9QUrtTmcmDkvHMoOKI",
  139 + "formId": "2uJbERNkkDhRqLDjHeY",
  140 + "isTree": true
  141 + },
  142 + "description": "",
  143 + "valueMapping": {
  144 + "mappingValues": []
  145 + },
  146 + "valuesObj": []
  147 + }
  148 + ]
  149 + },
  150 + {
  151 + "id": "54b1d7156a1a4e62a4efe463c0ceebd3",
  152 + "type": "FORM",
  153 + "pid": "098d551fbe1d40858c590edc78c543eb",
  154 + "code": "uozzv4",
  155 + "title": "表单啦",
  156 + "qxProps": {
  157 + "appId": "C9QUrtTmcmDkvHMoOKI",
  158 + "formId": "wKYeK6md1mOuZm2ORxe",
  159 + "isTree": false
  160 + },
  161 + "description": "",
  162 + "valueMapping": {
  163 + "mappingValues": []
  164 + },
  165 + "valuesObj": []
  166 + }
  167 + ]
  168 + }
  169 + ],
  170 + "propagation": "REQUIRED",
  171 + "isolation": "REPEATABLE_READ"
41 172 },
42   - result: [
  173 + "result": [
43 174 {
44   - id: '9911c21704ba4d8da8651185f441f9d3',
45   - code: '5sfuiz',
46   - type: 'OBJECT',
47   - title: '5sfuiz',
48   - qxProps: {},
49   - pid: '',
50   - description: '',
51   - valueMapping: { mappingValues: [] },
52   - valuesObj: [],
53   - child: [
  175 + "id": "e039b23ff8294b158ac6b8ddc2ece8aa",
  176 + "code": "5ybpag",
  177 + "type": "STRING",
  178 + "title": "文本字段",
  179 + "qxProps": {
  180 + "min": "-1",
  181 + "max": "20"
  182 + },
  183 + "valueMapping": {
  184 + "mappingValues": [
  185 + "1111111111111"
  186 + ]
  187 + },
  188 + "valuesObj": [
54 189 {
55   - id: '022c007b4c304c58850ed592ef5c1774',
56   - type: 'STRING',
57   - pid: '9911c21704ba4d8da8651185f441f9d3',
58   - code: 'gcc8qd',
59   - title: 'gcc8qd',
60   - },
61   - ],
  190 + "type": "MANUAL",
  191 + "value": "1111111111111"
  192 + }
  193 + ]
62 194 },
63 195 {
64   - id: '6289083b52474567aba6d3f5fe9eda90',
65   - code: '3coizb',
66   - type: 'FORM',
67   - title: '3coizb',
68   - qxProps: {
69   - appId: 'HQIXKC0dxbuYENalZzP',
70   - formId: 'VX1TdanWSgYrKYn3vT8',
71   - isTree: false,
  196 + "id": "b0f72671bc474d0cb9ecb2609973f35d",
  197 + "code": "z0zbwx",
  198 + "type": "FORM",
  199 + "title": "表单参数",
  200 + "qxProps": {
  201 + "appId": "C9QUrtTmcmDkvHMoOKI",
  202 + "formId": "hhgYI0rGV78NEPbgIms",
  203 + "isTree": false
72 204 },
73   - pid: '',
  205 + "description": "",
  206 + "valueMapping": {
  207 + "mappingValues": []
  208 + },
  209 + "valuesObj": []
74 210 },
75 211
76 212 {
... ... @@ -112,49 +248,162 @@ const nodes = [
112 248 },
113 249 ],
114 250 },
115   - ],
  251 + {
  252 + "id": "82ab09325d3e4c328adfe33e17898b22",
  253 + "code": "p62xqq",
  254 + "type": "USER",
  255 + "title": "人员11",
  256 + "qxProps": {
  257 + "formId": "PbOC6xBYOvZ1IB2mwUc",
  258 + "appId": "eSnLZ42R2TA5Z18dNsJ",
  259 + "isTree": false
  260 + }
  261 + },
  262 + {
  263 + "id": "09a6780520964f5fa237ca0dbdb11b94",
  264 + "code": "ksq7se",
  265 + "type": "ORG",
  266 + "title": "部门11",
  267 + "qxProps": {
  268 + "formId": "UsoOGnrJLPziSQwGDwj",
  269 + "appId": "eSnLZ42R2TA5Z18dNsJ",
  270 + "isTree": true
  271 + }
  272 + },
  273 + {
  274 + "id": "098d551fbe1d40858c590edc78c543eb",
  275 + "code": "0nmura",
  276 + "type": "OBJECT",
  277 + "title": "对象一级",
  278 + "qxProps": {},
  279 + "pid": "",
  280 + "description": "",
  281 + "valueMapping": {
  282 + "mappingValues": []
  283 + },
  284 + "valuesObj": [],
  285 + "child": [
  286 + {
  287 + "id": "1bb1b69f3e3249048c77509eb8dc2d53",
  288 + "type": "ARRAY",
  289 + "pid": "098d551fbe1d40858c590edc78c543eb",
  290 + "code": "rypxuo",
  291 + "title": "数组二级",
  292 + "qxProps": {},
  293 + "description": "",
  294 + "valueMapping": {
  295 + "mappingValues": []
  296 + },
  297 + "valuesObj": [],
  298 + "child": [
  299 + {
  300 + "id": "87d01cd61fe24519b2865438c2bf60ed",
  301 + "type": "FORM",
  302 + "pid": "1bb1b69f3e3249048c77509eb8dc2d53",
  303 + "code": "gnmz55",
  304 + "title": "表单三级啦啦啦啦啦绿绿绿",
  305 + "qxProps": {
  306 + "appId": "C9QUrtTmcmDkvHMoOKI",
  307 + "formId": "2uJbERNkkDhRqLDjHeY",
  308 + "isTree": true
  309 + },
  310 + "description": "",
  311 + "valueMapping": {
  312 + "mappingValues": []
  313 + },
  314 + "valuesObj": []
  315 + }
  316 + ]
  317 + },
  318 + {
  319 + "id": "54b1d7156a1a4e62a4efe463c0ceebd3",
  320 + "type": "FORM",
  321 + "pid": "098d551fbe1d40858c590edc78c543eb",
  322 + "code": "uozzv4",
  323 + "title": "表单啦",
  324 + "qxProps": {
  325 + "appId": "C9QUrtTmcmDkvHMoOKI",
  326 + "formId": "wKYeK6md1mOuZm2ORxe",
  327 + "isTree": false
  328 + },
  329 + "description": "",
  330 + "valueMapping": {
  331 + "mappingValues": []
  332 + },
  333 + "valuesObj": []
  334 + }
  335 + ]
  336 + }
  337 + ]
116 338 },
117   - children: [],
118   - },
119   - {
120   - id: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
121   - name: '分支',
122   - type: 'default_DF_BRANCH',
123   - previousId: '4c4fc5213db149808c57d093b15e6295',
124   - children: [
125   - {
126   - id: 'dfc29d5b64fa42489a65b3cfaeb999da',
127   - type: 'default_DF_CONDITION',
128   - previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
129   - name: '条件',
130   - data: {},
131   - children: [],
  339 + "icon": {
  340 + "type": {
  341 + "displayName": "Iconfont"
132 342 },
133   - {
134   - id: '003ca991f70548a3ba8c4f9b8d0daad2',
135   - name: '条件',
136   - type: 'default_DF_CONDITION',
137   - previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
138   - children: [],
  343 + "key": null,
  344 + "ref": null,
  345 + "props": {
  346 + "type": "qx-icon-flow-start"
139 347 },
  348 + "_owner": null,
  349 + "_store": {}
  350 + },
  351 + "path": [
  352 + "0"
140 353 ],
  354 + "validateStatusError": false,
  355 + "configuring": false,
  356 + "children": []
141 357 },
142 358 {
143   - id: '576f817ce67846318d1132f231128f05',
144   - name: '结束',
145   - previousId: 'b0a2c7925a7b45e884fe8f82a0f39e9b',
146   - type: 'default_DF_END',
147   - data: { nodeVersion: '3.0.0' },
148   - children: [],
  359 + "id": "cc98b10fd69f446ba32c7c76fd2c5dde",
  360 + "icon": "http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/public/icons/logo.svg",
  361 + "type": "default_DF_DO_U",
  362 + "name": "更新记录",
  363 + "url": "http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/index.js",
  364 + "data": {
  365 + "nodeVersion": "1.0.0-dev34"
  366 + },
  367 + "previousId": "40e5975ebf6b4afb9a9fe162d7f7227f",
  368 + "path": [
  369 + "1"
  370 + ],
  371 + "configuring": true
149 372 },
  373 + {
  374 + "id": "0e8ddac188f44acbac675ae8fd517287",
  375 + "name": "结束",
  376 + "type": "default_DF_END",
  377 + "data": {
  378 + "nodeVersion": "3.0.0"
  379 + },
  380 + "icon": {
  381 + "type": {
  382 + "displayName": "Iconfont"
  383 + },
  384 + "key": null,
  385 + "ref": null,
  386 + "props": {
  387 + "type": "qx-icon-flow-end"
  388 + },
  389 + "_owner": null,
  390 + "_store": {}
  391 + },
  392 + "iconColor": "#7C7E86",
  393 + "previousId": "cc98b10fd69f446ba32c7c76fd2c5dde",
  394 + "path": [
  395 + "2"
  396 + ],
  397 + "validateStatusError": false,
  398 + "children": []
  399 + }
150 400 ];
151 401
152 402 export default () => {
153 403 return (
154 404 <Form
155 405 initialValues={{
156   - field:
157   - '${4c4fc5213db149808c57d093b15e6295|be3d37ae184144dc88c0d39a644fe2c1}',
  406 + field: ''
158 407 }}
159 408 >
160 409 <Form.Item name="field">
... ...
... ... @@ -616,12 +616,13 @@ export const QxFlowNodeFieldSelector = React.forwardRef<
616 616 setVisible(open);
617 617 }
618 618 }}
  619 + disabled={props?.disabled}
619 620 >
620 621 {props.children ? (
621 622 props.children
622 623 ) : (
623 624 <div
624   - className={cls('qx-node-select-input')}
  625 + className={cls(`qx-node-select-input ${props?.disabled ? 'disabled' : null}`)}
625 626 onClick={() => setVisible(!visible)}
626 627 >
627 628 {/* {inputDisplay} */}
... ... @@ -648,6 +649,7 @@ export interface NodeFieldSelectProps {
648 649 mode?: 'select' | 'variable';
649 650 open?: boolean;
650 651 subset?: boolean;
  652 + disabled?: boolean;
651 653 }
652 654
653 655 export interface FiledType {
... ...
... ... @@ -19,4 +19,9 @@
19 19 color: @B8;
20 20 font-size: 16px;
21 21 }
  22 + .qx-input-select-dropdown {
  23 + .ant-input-affix-wrapper-sm {
  24 + border-radius: 0;
  25 + }
  26 + }
22 27 }
... ...
1 1 /* eslint-disable array-callback-return */
2 2 /* eslint-disable eqeqeq */
3   -import {
4   - SnippetsOutlined,
5   -} from '@ant-design/icons';
  3 +import { SnippetsOutlined } from '@ant-design/icons';
  4 +import { QxFieldSetter, QxFormSelect } from '@qx/common';
6 5 import {
7 6 Button,
8 7 Col,
9 8 DatePicker,
  9 + Divider,
10 10 Form,
11 11 Input,
12 12 InputNumber,
... ... @@ -15,31 +15,23 @@ import {
15 15 Select,
16 16 Space,
17 17 Table,
18   - Divider,
19 18 message,
20 19 } from 'antd';
21   -import React, {
22   - useCallback,
23   - useEffect,
24   - useState,
25   -} from 'react';
  20 +import React, { useCallback, useEffect, useState } from 'react';
26 21 import JSONEditor from './codeMirror';
27   -import './style.less';
28   -import { QxFieldSetter, QxFormSelect } from '@qx/common';
29   -import { formatEnum } from './constant';
30 22 import {
  23 + formatEnum,
31 24 typeTranslateFieIdtype,
32   - typeTranslateWidget,
33 25 typeTranslateGrouptype,
34   - // typeTranslateItemtype,
  26 + typeTranslateWidget,
35 27 } from './constant';
  28 +import './style.less';
36 29 // import { Controlled as CodeMirror } from 'react-codemirror2'
37   -import { cloneDeep } from 'lodash-es';
38   -import moment from 'dayjs';
39   -import { QxBaseIcon } from '@qx/common';
40 30 import Icon from '@ant-design/icons';
41   -import { SubNodeIcon } from './sub-node-icon';
42   -import { SubDropIcon } from './sub-node-icon';
  31 +import { QxBaseIcon } from '@qx/common';
  32 +import moment from 'dayjs';
  33 +import { cloneDeep } from 'lodash-es';
  34 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
43 35
44 36 import '../style/reset.less';
45 37
... ... @@ -90,9 +82,6 @@ interface ParameterSettingProps {
90 82 appId?: string; // 当前应用ID
91 83 }
92 84
93   -
94   -
95   -
96 85 const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
97 86 const {
98 87 visible,
... ... @@ -163,11 +152,15 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
163 152 const columns = [
164 153 {
165 154 title: (
166   - <div style={{
167   - display: 'flex', flexDirection: 'row'
168   - , alignContent: 'center', flexWrap: 'wrap'
169   - }}>
170   - <span className='parameter-setting-table-title'>参数编码</span>
  155 + <div
  156 + style={{
  157 + display: 'flex',
  158 + flexDirection: 'row',
  159 + alignContent: 'center',
  160 + flexWrap: 'wrap',
  161 + }}
  162 + >
  163 + <span className="parameter-setting-table-title">参数编码</span>
171 164 <span style={{ color: 'red' }}>*</span>
172 165 </div>
173 166 ),
... ... @@ -179,10 +172,10 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
179 172 const strTitle = (text as string) || '';
180 173 const index = strTitle.indexOf(searchValue);
181 174 return (
182   - < Form.Item
  175 + <Form.Item
183 176 name={'code' + record.id}
184 177 style={{ margin: 0 }}
185   - // initialValue={record.code}
  178 + // initialValue={record.code}
186 179 >
187 180 <Input
188 181 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
... ... @@ -193,15 +186,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
193 186 }}
194 187 defaultValue={record.code}
195 188 bordered={false}
196   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'code')} />
197   - </Form.Item >
198   - )
  189 + disabled={record.disabled || typeDis}
  190 + onBlur={(e) => handleChange(e, record, 'code')}
  191 + />
  192 + </Form.Item>
  193 + );
199 194 },
200 195 },
201 196 {
202 197 title: (
203 198 <div style={{ display: 'flex', flexDirection: 'row' }}>
204   - <span className='parameter-setting-table-title'>参数名</span>
  199 + <span className="parameter-setting-table-title">参数名</span>
205 200 <span style={{ color: 'red' }}>*</span>
206 201 </div>
207 202 ),
... ... @@ -216,7 +211,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
216 211 <Form.Item
217 212 name={'title' + record.id}
218 213 style={{ margin: 0 }}
219   - // initialValue={record.title}
  214 + // initialValue={record.title}
220 215 >
221 216 <Input
222 217 style={{ color: index > -1 && searchValue ? '#1890ff' : '' }}
... ... @@ -227,15 +222,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
227 222 }}
228 223 defaultValue={record.title}
229 224 bordered={false}
230   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'title')} />
  225 + disabled={record.disabled || typeDis}
  226 + onBlur={(e) => handleChange(e, record, 'title')}
  227 + />
231 228 </Form.Item>
232   - )
  229 + );
233 230 },
234 231 },
235 232 {
236 233 title: (
237 234 <div style={{ display: 'flex', flexDirection: 'row' }}>
238   - <span className='parameter-setting-table-title'>参数类型</span>
  235 + <span className="parameter-setting-table-title">参数类型</span>
239 236 <span style={{ color: 'red' }}>*</span>
240 237 </div>
241 238 ),
... ... @@ -243,36 +240,40 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
243 240 className: 'ps-table-cell',
244 241 width: '102px',
245 242 key: 'type',
246   - render: (text, record) =>
  243 + render: (text, record) => (
247 244 <Form.Item
248 245 style={{ margin: 0 }}
249 246 name={'type' + record.id}
250   - // initialValue={record.type}
  247 + // initialValue={record.type}
251 248 >
252 249 <Select
253 250 bordered={false}
254 251 disabled={record.disabled || typeDis}
255 252 defaultValue={record.type}
256   - onSelect={(e) => handleChange(e, record, 'type')} >
257   - {
258   - valueOptions.map((item) => {
259   - return <Select.Option key={item.key} value={item.key}>{item.title}</Select.Option>;
260   - })
261   - }
  253 + onSelect={(e) => handleChange(e, record, 'type')}
  254 + >
  255 + {valueOptions.map((item) => {
  256 + return (
  257 + <Select.Option key={item.key} value={item.key}>
  258 + {item.title}
  259 + </Select.Option>
  260 + );
  261 + })}
262 262 </Select>
263 263 </Form.Item>
  264 + ),
264 265 },
265 266 {
266 267 title: (
267 268 <div style={{ display: 'flex', flexDirection: 'row' }}>
268   - <span className='parameter-setting-table-title'>默认值</span>
  269 + <span className="parameter-setting-table-title">默认值</span>
269 270 </div>
270 271 ),
271 272 dataIndex: 'valueMapping',
272 273 className: 'ps-table-cell',
273 274 width: '116px',
274 275 key: 'valueMapping',
275   - render: (text, record) =>
  276 + render: (text, record) => (
276 277 <div className="editable-cell ">
277 278 <QxFieldSetter
278 279 disabled={record.disabled || typeDis}
... ... @@ -292,14 +293,14 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
292 293 inputDis={true}
293 294 />
294 295 </div>
  296 + ),
295 297 },
296 298 {
297   - title:
298   - (
299   - <div style={{ display: 'flex', flexDirection: 'row' }}>
300   - <span className='parameter-setting-table-title'>参数说明</span>
301   - </div>
302   - ),
  299 + title: (
  300 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  301 + <span className="parameter-setting-table-title">参数说明</span>
  302 + </div>
  303 + ),
303 304 dataIndex: 'description',
304 305 className: 'ps-table-cell',
305 306 key: 'description',
... ... @@ -308,7 +309,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
308 309 <Form.Item
309 310 name={'description' + record.id}
310 311 style={{ margin: 0 }}
311   - // initialValue={text}
  312 + // initialValue={text}
312 313 >
313 314 <Input
314 315 draggable={true}
... ... @@ -319,23 +320,24 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
319 320 key={inputKey}
320 321 defaultValue={text}
321 322 bordered={false}
322   - disabled={record.disabled || typeDis} onBlur={(e) => handleChange(e, record, 'description')} />
  323 + disabled={record.disabled || typeDis}
  324 + onBlur={(e) => handleChange(e, record, 'description')}
  325 + />
323 326 </Form.Item>
324 327 ),
325 328 },
326 329 {
327   - title:
328   - (
329   - <div style={{ display: 'flex', flexDirection: 'row' }}>
330   - <span className='parameter-setting-table-title'>操作</span>
331   - </div>
332   - ),
  330 + title: (
  331 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  332 + <span className="parameter-setting-table-title">操作</span>
  333 + </div>
  334 + ),
333 335 key: 'action',
334 336 className: 'ps-table-cell',
335 337 width: '96px',
336 338 render: (text, record) => {
337   - const isShowAdd = (record && checkShowAdd(record));
338   - const isShowTree = (record && checkShowTree(record));
  339 + const isShowAdd = record && checkShowAdd(record);
  340 + const isShowTree = record && checkShowTree(record);
339 341 return (
340 342 <Space size="small">
341 343 {isShowAdd && (
... ... @@ -343,7 +345,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
343 345 size={'small'}
344 346 type="link"
345 347 disabled={record.disabled || typeDis}
346   - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />}
  348 + icon={
  349 + <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
  350 + }
347 351 onClick={() => handleAdd(record.pid)}
348 352 />
349 353 )}
... ... @@ -353,7 +357,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
353 357 size={'small'}
354 358 type="link"
355 359 disabled={record.disabled || typeDis}
356   - icon={<Icon style={{ fontSize: 16 }} component={SubNodeIcon} />}
  360 + icon={
  361 + <Icon style={{ fontSize: 16 }} component={SubNodeIcon} />
  362 + }
357 363 onClick={() => handleAddTree(record.id)}
358 364 />
359 365 )}
... ... @@ -362,7 +368,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
362 368 type="link"
363 369 className="btn-high-del"
364 370 disabled={record.disabled || typeDis}
365   - icon={<QxBaseIcon style={{ fontSize: 16 }} className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
  371 + icon={
  372 + <QxBaseIcon
  373 + style={{ fontSize: 16 }}
  374 + className={'title-btn-del-btn'}
  375 + type={'qx-icon-delete'}
  376 + />
  377 + }
366 378 onClick={() => handleDelete(record)}
367 379 />
368 380 </Space>
... ... @@ -372,12 +384,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
372 384 ];
373 385
374 386 const range = {
375   - title:
376   - (
377   - <div style={{ display: 'flex', flexDirection: 'row' }}>
378   - <span className='parameter-setting-table-title'>取值范围</span>
379   - </div>
380   - ),
  387 + title: (
  388 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  389 + <span className="parameter-setting-table-title">取值范围</span>
  390 + </div>
  391 + ),
381 392 dataIndex: 'qxProps',
382 393 className: 'ps-table-cell',
383 394 width: '314px',
... ... @@ -386,10 +397,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
386 397 switch (record.type) {
387 398 case 'STRING':
388 399 return (
389   - <div
390   - key={record.id}
391   - className="editable-cell"
392   - >
  400 + <div key={record.id} className="editable-cell">
393 401 <InputNumber
394 402 draggable={true}
395 403 disabled={record.disabled || typeDis}
... ... @@ -404,7 +412,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
404 412 defaultValue={qxProps?.min || undefined}
405 413 placeholder="最小长度"
406 414 />
407   - <div className='range-cell'>-</div>
  415 + <div className="range-cell">-</div>
408 416 <InputNumber
409 417 draggable={true}
410 418 disabled={record.disabled || typeDis}
... ... @@ -423,11 +431,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
423 431 );
424 432 case 'NUMBER':
425 433 return (
426   - <div
427   - key={record.id}
428   - className="editable-cell"
429   - >
430   - <div className='range-cell'>
  434 + <div key={record.id} className="editable-cell">
  435 + <div className="range-cell">
431 436 <InputNumber
432 437 disabled={record.disabled || typeDis}
433 438 draggable={true}
... ... @@ -437,7 +442,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
437 442 }}
438 443 precision={qxProps.precision || 0}
439 444 bordered={false}
440   - size='small'
  445 + size="small"
441 446 defaultValue={qxProps?.min || undefined}
442 447 onBlur={(e) => handleChange(e, record, 'qxProps-min')}
443 448 // style={{ width: '110px' }}
... ... @@ -452,7 +457,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
452 457 event.preventDefault();
453 458 }}
454 459 bordered={false}
455   - size='small'
  460 + size="small"
456 461 precision={qxProps.precision || 0}
457 462 defaultValue={qxProps.max || undefined}
458 463 onBlur={(e) => handleChange(e, record, 'qxProps-max')}
... ... @@ -461,8 +466,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
461 466 />
462 467 <Divider type="vertical" style={{ height: '16px' }} />
463 468 </div>
464   - <div className='range-cell'>
465   -
  469 + <div className="range-cell">
466 470 <InputNumber
467 471 disabled={record.disabled || typeDis}
468 472 draggable={true}
... ... @@ -471,7 +475,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
471 475 event.preventDefault();
472 476 }}
473 477 bordered={false}
474   - size='small'
  478 + size="small"
475 479 precision={0}
476 480 min={0}
477 481 max={8}
... ... @@ -484,20 +488,13 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
484 488 );
485 489 case 'TIME':
486 490 return (
487   - <div
488   - key={record.id}
489   - className="editable-cell"
490   - >
491   - <div className='range-cell'>
  491 + <div key={record.id} className="editable-cell">
  492 + <div className="range-cell">
492 493 <DatePicker
493 494 bordered={false}
494 495 disabled={record.disabled || typeDis}
495   - size='small'
496   - defaultValue={
497   - qxProps?.min
498   - ? moment(qxProps.min)
499   - : undefined
500   - }
  496 + size="small"
  497 + defaultValue={qxProps?.min ? moment(qxProps.min) : undefined}
501 498 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
502 499 // style={{ width: '110px' }}
503 500 showTime
... ... @@ -507,13 +504,9 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
507 504 -
508 505 <DatePicker
509 506 disabled={record.disabled || typeDis}
510   - size='small'
  507 + size="small"
511 508 bordered={false}
512   - defaultValue={
513   - qxProps?.max
514   - ? moment(qxProps.max)
515   - : undefined
516   - }
  509 + defaultValue={qxProps?.max ? moment(qxProps.max) : undefined}
517 510 format={formatEnum[qxProps?.format] || 'YYYY-MM-DD'}
518 511 // style={{ width: '110px' }}
519 512 showTime
... ... @@ -522,18 +515,16 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
522 515 />
523 516 <Divider type="vertical" style={{ height: '16px' }} />
524 517 </div>
525   - <div className='range-cell'>
  518 + <div className="range-cell">
526 519 <Select
527 520 disabled={record.disabled || typeDis}
528   - size='small'
  521 + size="small"
529 522 // style={{ width: '90px' }}
530 523 bordered={false}
531 524 placeholder="格式"
532 525 popupMatchSelectWidth={false}
533 526 defaultValue={qxProps?.format || 'YEAR_DATE'}
534   - onSelect={(e) =>
535   - handleChange(e, record, 'qxProps-format')
536   - }
  527 + onSelect={(e) => handleChange(e, record, 'qxProps-format')}
537 528 >
538 529 {timeFormat.map((item) => {
539 530 return (
... ... @@ -554,10 +545,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
554 545 case 'USER':
555 546 case 'ORG':
556 547 return (
557   - <div
558   - className='editable-cell'
559   - key={record.id}
560   - >
  548 + <div className="editable-cell" key={record.id}>
561 549 <QxFormSelect
562 550 value={qxProps}
563 551 appId={props?.appId}
... ... @@ -566,7 +554,11 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
566 554 onChange={(val: any) => {
567 555 handleChange(val, record, 'qxProps');
568 556 }}
569   - disabled={['USER', 'ORG'].includes(record.type) || record.disabled || typeDis}
  557 + disabled={
  558 + ['USER', 'ORG'].includes(record.type) ||
  559 + record.disabled ||
  560 + typeDis
  561 + }
570 562 request={props?.request}
571 563 />
572 564 </div>
... ... @@ -577,21 +569,17 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
577 569 };
578 570
579 571 const require = {
580   - title:
581   - (
582   - <div style={{ display: 'flex', flexDirection: 'row' }}>
583   - <span className='parameter-setting-table-title'>必填</span>
584   - </div>
585   - ),
  572 + title: (
  573 + <div style={{ display: 'flex', flexDirection: 'row' }}>
  574 + <span className="parameter-setting-table-title">必填</span>
  575 + </div>
  576 + ),
586 577 dataIndex: 'required',
587 578 className: 'ps-table-cell',
588 579 key: 'required',
589 580 width: '86px',
590 581 render: (text, record) => (
591   - <Form.Item
592   - name={'required' + record.id}
593   - style={{ margin: 0 }}
594   - >
  582 + <Form.Item name={'required' + record.id} style={{ margin: 0 }}>
595 583 <Select
596 584 defaultValue={text || false}
597 585 bordered={false}
... ... @@ -601,12 +589,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
601 589 <Select.Option value={true}>是</Select.Option>
602 590 <Select.Option value={false}>否</Select.Option>
603 591 </Select>
604   - </Form.Item >
  592 + </Form.Item>
605 593 ),
606 594 };
607 595
608 596 if (nodeType !== 'END') {
609   - columns.splice(3, 0, range, require)
  597 + columns.splice(3, 0, range, require);
610 598 }
611 599
612 600 // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
... ... @@ -618,7 +606,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
618 606 handleAdd('');
619 607 }
620 608 }
621   -
622 609 }, [visible]);
623 610
624 611 //展开 所有子节点
... ... @@ -648,7 +635,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
648 635 style: { cursor: 'move' },
649 636 onDragStart: (ev: any) => {
650 637 ev.persist();
651   - console.log('onDragStart', ev.target)
  638 + console.log('onDragStart', ev.target);
652 639 ev.dataTransfer.effectAllowed = 'move';
653 640 ev.dataTransfer.setData('text', ev.target.getAttribute('data-row-key'));
654 641 },
... ... @@ -797,8 +784,8 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
797 784 />
798 785 }
799 786 >
800   - {!type && (
801   - isShowJson ? (
  787 + {!type &&
  788 + (isShowJson ? (
802 789 <Row>
803 790 <Col span={12}>
804 791 <Button
... ... @@ -816,7 +803,12 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
816 803 <Button
817 804 size={'small'}
818 805 type="link"
819   - icon={<QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-flow-code'} />}
  806 + icon={
  807 + <QxBaseIcon
  808 + style={{ fontSize: 16 }}
  809 + type={'qx-icon-flow-code'}
  810 + />
  811 + }
820 812 style={{
821 813 padding: 0,
822 814 height: '32px',
... ... @@ -846,69 +838,68 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
846 838 />
847 839 </Col>
848 840 </Row>
849   - )
850   - )
851   - }
852   - {
853   - isShowJson ? (
854   - <>
855   - <JSONEditor value={midData} onChange={onJsonChange} />
856   - <Col
857   - className="border-none"
858   - span={24}
859   - style={{
860   - display: 'flex',
861   - flexDirection: 'row-reverse',
862   - marginBottom: '10px',
863   - textAlign: 'center',
864   - }}
865   - >
866   - <Space>
867   - <Button onClick={() => onCancel()}>{'取消'}</Button>
868   - <Button type="primary" onClick={() => submit()}>
869   - {'确定'}
870   - </Button>
871   - </Space>
872   - </Col>
873   - </>
874   - ) : (
875   - <Table
876   - expandable={{
877   - defaultExpandAllRows: true,
878   - childrenColumnName: 'child',
879   - expandIcon: ({ expanded, onExpand, record }) =>
880   - record.child && record.child.length > 0 && expanded ? (
881   - <>
882   - <Icon component={SubDropIcon}
883   - className='drop-icon' />
884   - <QxBaseIcon className={'table-expanded'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
885   - </>
886   -
887   - ) : record.child && record.child.length > 0 && !expanded ?
888   - (
889   - <>
890   - <Icon component={SubDropIcon}
891   - className='drop-icon' />
892   - <QxBaseIcon className={'table-expanded-change'} type={'qx-caret-down'} onClick={e => onExpand(record, e)} />
893   - </>
894   - )
895   - :
896   - <Icon component={SubDropIcon}
897   - className='drop-icon' />
  841 + ))}
  842 + {isShowJson ? (
  843 + <>
  844 + <JSONEditor value={midData} onChange={onJsonChange} />
  845 + <Col
  846 + className="border-none"
  847 + span={24}
  848 + style={{
  849 + display: 'flex',
  850 + flexDirection: 'row-reverse',
  851 + marginBottom: '10px',
  852 + textAlign: 'center',
898 853 }}
899   - className='parameter-setting-table'
900   - onRow={() => onRow()}
901   - scroll={{ x: 1000, y: 432 }}
902   - bordered
903   - pagination={false}
904   - size={'small'}
905   - // @ts-ignore
906   - columns={columns}
907   - dataSource={data}
908   - rowKey={'id'}
909   - />
910   - )
911   - }
  854 + >
  855 + <Space>
  856 + <Button onClick={() => onCancel()}>{'取消'}</Button>
  857 + <Button type="primary" onClick={() => submit()}>
  858 + {'确定'}
  859 + </Button>
  860 + </Space>
  861 + </Col>
  862 + </>
  863 + ) : (
  864 + <Table
  865 + expandable={{
  866 + defaultExpandAllRows: true,
  867 + childrenColumnName: 'child',
  868 + expandIcon: ({ expanded, onExpand, record }) =>
  869 + record.child && record.child.length > 0 && expanded ? (
  870 + <>
  871 + <Icon component={SubDropIcon} className="drop-icon" />
  872 + <QxBaseIcon
  873 + className={'table-expanded'}
  874 + type={'qx-caret-down'}
  875 + onClick={(e) => onExpand(record, e)}
  876 + />
  877 + </>
  878 + ) : record.child && record.child.length > 0 && !expanded ? (
  879 + <>
  880 + <Icon component={SubDropIcon} className="drop-icon" />
  881 + <QxBaseIcon
  882 + className={'table-expanded-change'}
  883 + type={'qx-caret-down'}
  884 + onClick={(e) => onExpand(record, e)}
  885 + />
  886 + </>
  887 + ) : (
  888 + <Icon component={SubDropIcon} className="drop-icon" />
  889 + ),
  890 + }}
  891 + className="parameter-setting-table"
  892 + onRow={onRow}
  893 + scroll={{ x: 1000, y: 432 }}
  894 + bordered
  895 + pagination={false}
  896 + size={'small'}
  897 + // @ts-ignore
  898 + columns={columns}
  899 + dataSource={data}
  900 + rowKey={'id'}
  901 + />
  902 + )}
912 903 </Modal>
913 904 </>
914 905 );
... ...
1 1 ---
2   -# nav:
3   -# path: /component
4   -# title: 组件
5   -# order: 1
6   -# group:
7   -# path: /common
8   -# title: 公共组件方法
9   -# order: 0
  2 +nav:
  3 + path: /component
  4 + title: 组件
  5 + order: 1
  6 +group:
  7 + path: /parameterSetting
  8 + title: 参数设计器
  9 + order: 0
10 10 ---
11 11
12   -## parameterSetting 参数设计器
13   -
14 12 Demo:
15 13
16 14 ```tsx
... ...
1 1 /* eslint-disable eqeqeq */
2 2 /* eslint-disable array-callback-return */
3   -import React, { useCallback, useEffect, useState } from 'react';
  3 +import Icon from '@ant-design/icons';
4 4 import {
5 5 Button,
6 6 Dropdown,
... ... @@ -11,23 +11,22 @@ import {
11 11 Tree,
12 12 message,
13 13 } from 'antd';
14   -import Icon from '@ant-design/icons';
15 14 import type { TreeProps } from 'antd/lib/tree';
  15 +import React, { useCallback, useEffect, useState } from 'react';
16 16 import ParameterModal from './ParameterModal';
17 17 import { formatEnum } from './constant';
18 18 // import type { InputRef } from 'antd';
19 19 import {
20 20 typeTranslateFieIdtype,
21   - typeTranslateWidget,
22 21 typeTranslateGrouptype,
23   - // typeTranslateItemtype,
  22 + typeTranslateWidget,
24 23 } from './constant';
25 24
26   -import { cloneDeep, isEmpty } from 'lodash-es';
  25 +import { QxBaseIcon, QxFieldSetter } from '@qx/common';
27 26 import moment from 'dayjs';
  27 +import { cloneDeep, isEmpty } from 'lodash-es';
28 28 import type { ParamDesignModel } from './constant';
29 29 import { uidGen } from './stringUtil';
30   -import { QxFieldSetter, QxBaseIcon } from '@qx/common';
31 30
32 31 import './style.less';
33 32
... ... @@ -36,8 +35,7 @@ type ValueOptionProps = {
36 35 value: string;
37 36 };
38 37
39   -import { SubNodeIcon } from './sub-node-icon';
40   -import { SubDropIcon } from './sub-node-icon';
  38 +import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
41 39
42 40 const valueOptions = [
43 41 { key: 'STRING', label: '文本' },
... ... @@ -75,7 +73,7 @@ const getDefaultQxProps = (type: string) => {
75 73 break;
76 74 }
77 75 return _qxProps;
78   -}
  76 +};
79 77
80 78 const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
81 79 let parentKey: React.Key;
... ... @@ -103,8 +101,8 @@ interface ParameterSettingProps {
103 101 // componentItem?: any;
104 102 // comHandleChange?: (val: any) => void;
105 103 appId?: string; // 当前应用ID
106   - request?: any,
107   - type?: string,
  104 + request?: any;
  105 + type?: string;
108 106 nodeType?: string | 'START' | 'END';
109 107 }
110 108
... ... @@ -236,15 +234,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
236 234 ) {
237 235 const { qxProps } = data;
238 236 value = moment(value).format(formatEnum[qxProps?.format] || 'YYYY-MM-DD');
239   - }
240   - else if (code == 'qxProps-min' || code == 'qxProps-max') {
  237 + } else if (code == 'qxProps-min' || code == 'qxProps-max') {
241 238 if (value) {
242   - value = Number(value)
  239 + value = Number(value);
243 240 if (isNaN(value)) {
244   - value = null
  241 + value = null;
245 242 }
246 243 } else {
247   - value = null
  244 + value = null;
248 245 }
249 246 console.log('value', value);
250 247 }
... ... @@ -285,7 +282,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
285 282 _qxProps[_newCode] = value;
286 283 }
287 284 treeList[i].qxProps = {
288   - ..._qxProps
  285 + ..._qxProps,
289 286 };
290 287 } else {
291 288 treeList[i][code] = value;
... ... @@ -484,7 +481,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
484 481 type: _type,
485 482 pid: _pid,
486 483 title: code,
487   - qxProps: getDefaultQxProps(_type)
  484 + qxProps: getDefaultQxProps(_type),
488 485 });
489 486 return;
490 487 } else if (treeList[i].child) {
... ... @@ -494,7 +491,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
494 491 };
495 492
496 493 if (!_pid) {
497   - _treeData.push({ id, code, type: _type, title: code, qxProps: getDefaultQxProps(_type), pid: '' });
  494 + _treeData.push({
  495 + id,
  496 + code,
  497 + type: _type,
  498 + title: code,
  499 + qxProps: getDefaultQxProps(_type),
  500 + pid: '',
  501 + });
498 502 } else {
499 503 loopAddTree(_treeData);
500 504 }
... ... @@ -546,7 +550,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
546 550 e.persist();
547 551 const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
548 552 if (!!parentNode) {
549   - parentNode.style.backgroundColor = '#bae7ff';
  553 + // parentNode.style.backgroundColor = '#bae7ff';
550 554 }
551 555 };
552 556
... ... @@ -592,8 +596,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
592 596 );
593 597 treeList[i].valueMapping = {
594 598 ...data.valueMapping,
595   - mappingValues: newMappingValues
596   - }
  599 + mappingValues: newMappingValues,
  600 + };
597 601 treeList[i].valuesObj = val;
598 602 return;
599 603 } else if (!!treeList[i]?.child?.length) {
... ... @@ -606,24 +610,6 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
606 610 props?.onChange(_newData);
607 611 };
608 612
609   - // const callback = (val: any, index: number) => {
610   -
611   - // const newValue = [...value];
612   - // newValue[index].mappingValues = val.map((item: any) =>
613   - // item?.extVal ? item?.extVal : item?.value,
614   - // );
615   - // newValue[index].valuesObj = val;
616   -
617   - // // if (newValue[index].fieldType == 'REL') {
618   - // // relIdList.map((_value) => {
619   - // // if (_value.key == newValue[index].mappingValues[0]) {
620   - // // newValue[index].relId = _value?.extract?.relId;
621   - // // }
622   - // // });
623   - // // }
624   -
625   - // };
626   -
627 613 // 渲染节点
628 614 const renderTitle = (nodeData: any) => {
629 615 const strTitle = (nodeData.title as string) || '';
... ... @@ -632,10 +618,8 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
632 618 const disabled = !!props.type ? true : nodeData.disabled;
633 619 return (
634 620 <div>
635   - <Icon component={SubDropIcon}
636   - className='drop-icon'/>
637   - <div
638   - onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
  621 + <Icon component={SubDropIcon} className="drop-icon" />
  622 + <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
639 623 <div
640 624 style={{
641 625 // padding: '2px',
... ... @@ -676,7 +660,12 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
676 660 )}
677 661 <Button
678 662 className="title-btn-del"
679   - icon={<QxBaseIcon className={'title-btn-del-btn'} type={'qx-icon-delete'} />}
  663 + icon={
  664 + <QxBaseIcon
  665 + className={'title-btn-del-btn'}
  666 + type={'qx-icon-delete'}
  667 + />
  668 + }
680 669 disabled={disabled}
681 670 type="link"
682 671 onClick={() => deleteParameter(nodeData)}
... ... @@ -713,7 +702,11 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
713 702 widget={typeTranslateWidget(nodeData.type)}
714 703 fieldType={typeTranslateFieIdtype(nodeData.type)}
715 704 fieldGroupType={typeTranslateGrouptype(nodeData.type)}
716   - isMixValue={typeTranslateFieIdtype(nodeData.type) == 'STRING' ? true : false}
  705 + isMixValue={
  706 + typeTranslateFieIdtype(nodeData.type) == 'STRING'
  707 + ? true
  708 + : false
  709 + }
717 710 colsTree={props.nodeItem}
718 711 isMultiple={false}
719 712 onChange={(val) => changeField(val, nodeData)}
... ... @@ -735,8 +728,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
735 728 <div>
736 729 <div className={'qx-parameter-setting-content'}>
737 730 <div style={{ display: 'flex', flexDirection: 'row' }}>
738   - {
739   - !props.type &&
  731 + {!props.type && (
740 732 <Dropdown
741 733 trigger={['click']}
742 734 className={'hidden-select'}
... ... @@ -755,11 +747,14 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
755 747 padding: '0 0 0 8px',
756 748 }}
757 749 >
758   - <QxBaseIcon style={{ fontSize: '16px' }} type={'qx-icon-plus'} />
  750 + <QxBaseIcon
  751 + style={{ fontSize: '16px' }}
  752 + type={'qx-icon-plus'}
  753 + />
759 754 添加参数
760 755 </Button>
761 756 </Dropdown>
762   - }
  757 + )}
763 758 <Button
764 759 size={'small'}
765 760 type={'link'}
... ... @@ -770,7 +765,10 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
770 765 openModal();
771 766 }}
772 767 >
773   - <QxBaseIcon style={{ fontSize: '16px' }} type={'icon-app-terminal-box-line'} />
  768 + <QxBaseIcon
  769 + style={{ fontSize: '16px' }}
  770 + type={'icon-app-terminal-box-line'}
  771 + />
774 772 高级设置
775 773 </Button>
776 774 </div>
... ... @@ -783,34 +781,32 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
783 781 />
784 782 )}
785 783 {props.isHideSearch && !!props.title && (
786   - <div className={'header-title'}>
787   - {props.title}
788   - </div>
  784 + <div className={'header-title'}>{props.title}</div>
789 785 )}
790 786 </div>
791 787 <div className="tree-wrapper">
792 788 {props?.value?.length > 0
793 789 ? treeData?.length > 0 &&
794   - defaultExpandedKeys && (
795   - <Tree
796   - rootClassName={'qx-parameter-tree-list'}
797   - treeData={treeData || []}
798   - fieldNames={{
799   - title: 'label',
800   - key: 'id',
801   - children: 'child',
802   - }}
803   - titleRender={(nodeData) => renderTitle(nodeData)}
804   - style={{ height: '100%' }}
805   - onDrop={onDrop}
806   - draggable={{ icon: false }}
807   - // draggable={!props.type}
808   - blockNode
809   - expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
810   - autoExpandParent={autoExpandParent}
811   - onExpand={onExpand}
812   - />
813   - )
  790 + defaultExpandedKeys && (
  791 + <Tree
  792 + rootClassName={'qx-parameter-tree-list'}
  793 + treeData={treeData || []}
  794 + fieldNames={{
  795 + title: 'label',
  796 + key: 'id',
  797 + children: 'child',
  798 + }}
  799 + titleRender={(nodeData) => renderTitle(nodeData)}
  800 + style={{ height: '100%' }}
  801 + onDrop={onDrop}
  802 + draggable={{ icon: false }}
  803 + // draggable={!props.type}
  804 + blockNode
  805 + expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
  806 + autoExpandParent={autoExpandParent}
  807 + onExpand={onExpand}
  808 + />
  809 + )
814 810 : null}
815 811 </div>
816 812 <ParameterModal
... ...
  1 +/* stylelint-disable no-duplicate-selectors */
1 2 /* stylelint-disable selector-class-pattern */
2 3 @import '~@qx/ui/src/style/variable.less';
3 4
... ... @@ -19,7 +20,7 @@
19 20 overflow: hidden;
20 21 white-space: nowrap;
21 22 text-overflow: ellipsis;
22   - -o-text-overflow: ellipsis;
  23 + text-overflow: ellipsis;
23 24 }
24 25 }
25 26
... ... @@ -32,20 +33,20 @@
32 33 margin-top: 20px;
33 34
34 35 .ant-tree .ant-tree-switcher {
35   - // margin-top: 6.5px;
36   - width:44px;
37   - margin-top: 11.5px;
38   - margin-right: 7px;
39   - display: flex;
40   - justify-content: flex-end;
  36 + // margin-top: 6.5px;
  37 + width: 34px;
  38 + margin-top: 11.5px;
  39 + margin-right: 10px;
  40 + display: flex;
  41 + justify-content: flex-end;
41 42 }
42 43 }
43 44
44 45 .border-none
45   -.ant-select-focused:not(.ant-select-disabled).ant-select:not(
  46 + .ant-select-focused:not(.ant-select-disabled).ant-select:not(
46 47 .ant-select-customize-input
47 48 )
48   -.ant-select-selector {
  49 + .ant-select-selector {
49 50 border: none;
50 51 box-shadow: none;
51 52 }
... ... @@ -67,7 +68,6 @@
67 68 align-items: center;
68 69 margin-left: 10px;
69 70
70   - .ant-btn.ant-btn-icon-only,
71 71 .ant-btn.ant-btn-icon-only {
72 72 font-size: 16px;
73 73 color: @N7;
... ... @@ -104,11 +104,11 @@
104 104 }
105 105
106 106 .title-btn-del {
107   - display: none;
  107 + opacity: 0.01;
108 108 }
109 109
110 110 .title-btn {
111   - display: none;
  111 + opacity: 0.01;
112 112 }
113 113
114 114 .select-tree {
... ... @@ -126,7 +126,7 @@
126 126 margin-bottom: 2px;
127 127 overflow: hidden;
128 128 text-overflow: ellipsis;
129   - transition: width .3s cubic-bezier(.2, 0, 0, 1) 0s;
  129 + transition: width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
130 130
131 131 .ant-input-affix-wrapper {
132 132 border-color: @N4;
... ... @@ -143,6 +143,18 @@
143 143 text-overflow: ellipsis;
144 144 background-color: #fff;
145 145 border-radius: 4px;
  146 +
  147 + .qx-field-setter {
  148 + border-width: 1px;
  149 + border-style: solid;
  150 + border-color: #d9d9d9;
  151 + border-radius: 6px;
  152 + // height: 32px;
  153 +
  154 + .qx-formula-cm {
  155 + padding-left: 10px !important;
  156 + }
  157 + }
146 158 }
147 159
148 160 .btn-high-del {
... ... @@ -163,7 +175,7 @@
163 175 justify-content: flex-start;
164 176 flex-wrap: nowrap;
165 177
166   - .range-cell{
  178 + .range-cell {
167 179 display: flex;
168 180 align-content: center;
169 181 flex-wrap: nowrap;
... ... @@ -172,14 +184,12 @@
172 184 }
173 185
174 186 .ant-input-affix-wrapper,
175   - .qx-field-setter {
  187 + .qx-field-setter {
176 188 border-width: 0;
177 189 }
178   -
179   -
180 190 }
181 191
182   -.search-selected{
  192 +.search-selected {
183 193 .ant-input {
184 194 color: #1890ff;
185 195 }
... ... @@ -227,7 +237,6 @@
227 237 text-align: center !important;
228 238 }
229 239
230   -
231 240 .json-editor {
232 241 width: 90%;
233 242 margin-bottom: 20px;
... ... @@ -265,15 +274,15 @@
265 274 padding-top: 4px !important;
266 275 border-radius: 4px;
267 276 transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
268   - background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
269   - padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
270   -
271   - .drop-icon{
272   - // opacity: 0.1;
273   - display: none;
274   - // position: absolute;
275   - // top: 10px;
276   - // left: -49px;
  277 + background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
  278 + padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  279 +
  280 + .drop-icon {
  281 + position: absolute;
  282 + top: 10px;
  283 + left: -46px;
  284 + opacity: 1;
  285 + display: block;
277 286 }
278 287
279 288 &:hover {
... ... @@ -281,24 +290,7 @@
281 290
282 291 .title-btn-del,
283 292 .title-btn {
284   - display: block;
285   - }
286   -
287   - .drop-icon{
288   - position: absolute;
289   - top: 10px;
290   - left: -39px;
291 293 opacity: 1;
292   - display: block;
293   - }
294   -
295   - .opt-left {
296   - width: 65%;
297   - }
298   -
299   - .ant-tree-treenode-draggable .ant-tree-draggable-icon {
300   - padding-top: 6px;
301   - opacity: 1 !important;
302 294 }
303 295 }
304 296 }
... ... @@ -312,46 +304,46 @@
312 304 }
313 305 }
314 306
315   - .parameter-setting-table-title{
316   - font-weight: 500;
317   - font-size: 14px;
318   - line-height: 22px;
319   - color: #7C7E86;
320   - padding-left: 10px;
321   - }
  307 +.parameter-setting-table-title {
  308 + font-weight: 500;
  309 + font-size: 14px;
  310 + line-height: 22px;
  311 + color: #7c7e86;
  312 + padding-left: 10px;
  313 +}
322 314
323   - .parameter-setting-table{
324   - .code-header{
325   - display: flex;
326   - }
  315 +.parameter-setting-table {
  316 + .code-header {
  317 + display: flex;
  318 + }
327 319
328   - .ant-table-tbody .ant-table-row{
329   - .drop-icon{
330   - opacity: 0.01;
331   - }
  320 + .ant-table-tbody .ant-table-row {
  321 + // .drop-icon{
  322 + // opacity: 0.01;
  323 + // }
332 324
333   - &:hover {
334   - .drop-icon{
335   - opacity: 1;
336   - }
337   - }
338   - }
339   -
340   - .table-expanded{
341   - color: #7C7E86;
342   - margin-left: 8px;
343   - transition: transform 0.3s;
344   - }
  325 + // &:hover {
  326 + // .drop-icon{
  327 + // opacity: 1;
  328 + // }
  329 + // }
  330 + }
345 331
346   - .table-expanded-change{
347   - transform: rotate(-90deg);
348   - color: #7C7E86;
349   - margin-left: 8px;
350   - transition: transform 0.3s;
351   - }
  332 + .table-expanded {
  333 + color: #7c7e86;
  334 + margin-left: 8px;
  335 + transition: transform 0.3s;
352 336 }
353 337
354   - .parameter-setting-table .ant-table-cell{
355   - height: 40px;
356   - padding: 4px 16px 0 4px !important;
  338 + .table-expanded-change {
  339 + transform: rotate(-90deg);
  340 + color: #7c7e86;
  341 + margin-left: 8px;
  342 + transition: transform 0.3s;
357 343 }
  344 +}
  345 +
  346 +.parameter-setting-table .ant-table-cell {
  347 + height: 40px;
  348 + padding: 4px 16px 0 4px !important;
  349 +}
... ...
1 1 ---
2   -title: 组件
  2 +nav:
  3 + path: /component
  4 + title: 组件
  5 + order: 1
  6 +group:
  7 + path: /sort
  8 + title: 排序
  9 + order: 0
3 10 ---
4 11
5 12 ### 排序规则
... ...
... ... @@ -18,7 +18,7 @@ interface OptionItemProps {
18 18 code: string | number;
19 19 extract?: {
20 20 widget?: string;
21   - }
  21 + };
22 22 }
23 23
24 24 interface SortItemProps {
... ... @@ -44,6 +44,7 @@ interface QxSortConditionProps {
44 44 optionList: OptionItemProps[];
45 45 sortList?: SortItemProps[];
46 46 extraClassName?: string; // 定义额外 标签类名 覆盖排序原有样式
  47 + disabled?: boolean; // 是否整体禁用
47 48 }
48 49
49 50 const defaultSortList = [
... ... @@ -176,6 +177,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
176 177 >
177 178 {columns && (
178 179 <Select
  180 + disabled={props?.disabled}
179 181 defaultValue={v.key}
180 182 getPopupContainer={(triggerNode) => triggerNode}
181 183 value={v.key}
... ... @@ -209,6 +211,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
209 211 </Select>
210 212 )}
211 213 <Select
  214 + disabled={props?.disabled}
212 215 defaultValue={String(v.asc)}
213 216 getPopupContainer={(triggerNode) => triggerNode}
214 217 value={String(v.asc)}
... ... @@ -238,7 +241,7 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
238 241 className={'operate-button'}
239 242 size="small"
240 243 icon={<QxBaseIcon type={'qx-icon-minus'} />}
241   - disabled={sorts.length <= 1}
  244 + disabled={props?.disabled || sorts.length <= 1}
242 245 onClick={() => removeSort(k)}
243 246 />
244 247 <Button
... ... @@ -246,8 +249,8 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
246 249 size="small"
247 250 icon={<QxBaseIcon type={'qx-icon-plus'} />}
248 251 disabled={
249   - sorts.length >=
250   - ((columns || []).length > 3 ? 3 : (columns || []).length)
  252 + props?.disabled || (sorts.length >=
  253 + ((columns || []).length > 3 ? 3 : (columns || []).length))
251 254 }
252 255 onClick={addSort}
253 256 />
... ...