---

nav:

path: /component

title: 组件

order: 1

group:

path: /common

title: 公共组件方法

order: 0

---

parameterSetting 参数设计器

Demo:

import { QxParameterSetting } from '@qx/common';
import { Input } from 'antd';
import React, { useState } from 'react';

export default () => {
  const [value, setValue] = useState([
    {
      code: '29gnd',
      id: 'f7724ff3557041588fcdcf69d31bec1d',
      pid: '',
      showCode: true,
      qxProps: {
        appId: 'HBZy3te6d9SxSMO3lLr',
        formId: 'j9s5sUXvLiT2a1PJOsh',
        formName: '合同管理',
      },
      required: false,
      title: '流程类萨',
      type: 'OBJECT',
      disabled: true,
      child: [
        {
          id: '519338cceed64b08aeadcc7f5b4c9d94',
          pid: 'f7724ff3557041588fcdcf69d31bec1d',
          code: '60edb3',
          showCode: true,
          title: '问问',
          required: true,
          qxProps: {
            min: '2023-08-18',
            max: '2023-08-08',
            options: ['1231231231321'],
            default: '2023-08-02',
            format: 'YEAR_DATE',
          },
          disabled: false,
          type: 'TIME',
        },
      ],
    },
    {
      id: '6370b8fd52484b83abd702379870b05f',
      pid: '',
      code: 'ufsqtk',
      showCode: true,
      title: '爱的人翁热',
      required: true,
      qxProps: {
        min: 1,
        max: 10,
        options: ['232312312323423'],
        default: 112,
        precision: 2,
      },
      disabled: false,
      type: 'NUMBER',
    },
    {
      id: '2df392beea224ad5af58ac96dad04e7b',
      pid: '',
      code: 'ci4ihw',
      showCode: true,
      title: '来来来',
      required: false,
      child: [
        {
          id: 'db1cd3c513534a82ae85f63e82cf0951',
          pid: '2df392beea224ad5af58ac96dad04e7b',
          code: 'b3cbef',
          title: '啊实打实',
          required: false,
          qxProps: {
            min: '2023-08-16',
            max: '2023-08-01',
            options: ["asdaa'd "],
            default: '2023-08-03',
            format: 'YEAR_DATE',
          },
          disabled: false,
          type: 'TIME',
        },
      ],
      disabled: false,
      type: 'ARRAY',
    },
  ]);
  const handleChange = (newValue) => {
    setValue(newValue);
  };

  const DefaultComponent: React.FC = () => {
    return <Input style={{ width: '100%' }}></Input>;
  };

  const [comValue, setComValue] = useState([
    'jsadlfjlf',
    'djslfjaljdlsf123',
    'jsadlfjlfjalsf123',
    '3dsfjlsjflsdsjf24',
    'vdsnflsjfsjfskljfvvv',
  ]);

  const [nodeItem, setNodeItem] = useState([
    {
      iconName: 'icon-flow-start',
      key: '5dec2f28-8dd1-48be-a14d-e7c4e3cdb89d',
      nodeType: 'WF_START',
      selectable: false,
      title: '开始',
      titleStr: '开始',
    },
    {
      iconName: 'icon-flow-end',
      key: '5dec2f28-8888-48be-a14d-e7c4e3cdb89d',
      nodeType: 'WF_END',
      selectable: true,
      title: 'jieshu',
      titleStr: '结束',
    },
  ]);

  const comHandleChange = (newValue) => {
    setComValue(newValue);
  };

  const isHide = true;
  const isShow = true;

  const componentItem = {
    value: comValue,
    onChange: comHandleChange,
  };
  return (
    <QxParameterSetting
      value={value}
      nodeItem={nodeItem}
      // componentItem={componentItem}
      onChange={handleChange}
      isHideSearch={isHide}
      isShowTitle={isShow}
      isShowField={true}
      title={'sadaasdasdasdwwwwwwwasdasdasdsdsd'}
      // component={QxTagsInput}
    />
  );
};

入参数据格式

参数	说明	类型	默认值
isHideSearch	是否隐藏搜索框	bool	-
nodeItem	节点信息，默认值右侧选择节点使用	[]	-
value		[]	-
isShowTitle	是否显示左侧标题	bool	-
title	左侧标题	string	-
isShowField	是否显示下部默认值 item	bool	-
onChange			-

出参数据格式

参数	说明	类型	默认值
code	参数编码	string	-
id	id	string	-
pid	上级 id	string	-
title	参数名	string	-
required	是否必填	bool	-
disabled	是否禁用	bool	-
type	类型	string[]
child	子节点	string[]
qxProps	高级参数器数据	object{}
qxProps-min	取值范围最小	string[] \	string
qxProps-max	取值范围最大	string[] \	string
qxProps-options	可选值	string[] \	string
qxProps-default	默认值	string[] \	string

More skills for writing demo: https://d.umijs.org/guide/basic#write-component-demo