田强 / qx-common · Files

---

nav: path: /component title: 组件 order: 1 group: path: /parameterSetting title: 参数设计器

order: 0

Demo:

import { QxParameterSetting, request } from '@qx/common';
import { Input } from 'antd';
import React, { useState } from 'react';
import { node, nodes } from './mock-node';
export default () => {
  const [value, setValue] = useState([
    {
      id: '6370b8fd52484b83abd702379870b05f',
      pid: '',
      code: 'ufsqtk',
      showCode: true,
      title: '爱的人翁热',
      required: true,
      qxProps: {},
      disabled: true,
      type: 'FORM',
    },
    {
      id: '6370b8fd52484b83ab2222270b05f',
      pid: '',
      code: 'kwkwkw',
      showCode: true,
      title: '维苏威',
      required: true,
      qxProps: {},
      disabled: false,
      type: 'STRING',
    },
  ]);
  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 [nodes, setNodes] = useState([
  //   {
  //     id: '165294ea951f44cfa6661a6e325a4002',
  //     type: 'default_DF_END',
  //     name: '结束',
  //     data: {
  //       nodeVersion: '3.0.0',
  //       data: {
  //         result: [
  //           {
  //             id: '4a2b6bbc9dca44fc97301a8440f8f63d',
  //             code: 'nerwie',
  //             type: 'STRING',
  //             title: 'nerwie',
  //             qxProps: {},
  //             pid: '',
  //           },
  //           {
  //             id: '457a1b4dd83744afa5501f07be321f6e',
  //             code: 'cpbo5k',
  //             type: 'NUMBER',
  //             title: 'cpbo5k',
  //             qxProps: {},
  //             pid: '',
  //           },
  //         ],
  //       },
  //       result: [
  //         {
  //           id: '4a2b6bbc9dca44fc97301a8440f8f63d',
  //           code: 'nerwie',
  //           type: 'STRING',
  //           title: 'nerwie',
  //           qxProps: {},
  //           pid: '',
  //         },
  //         {
  //           i: '457a1b4dd83744afa5501f07be321f6e',
  //           code: 'cpbo5k',
  //           type: 'NUMBER',
  //           title: 'cpbo5k',
  //           qxProps: {},
  //           pid: '',
  //         },
  //       ],
  //     },
  //     icon: {
  //       type: {
  //         displayName: 'Iconfont',
  //       },
  //       key: null,
  //       ref: null,
  //       props: {
  //         type: 'qx-icon-flow-end',
  //       },
  //       _owner: null,
  //       _store: {},
  //     },
  //     iconColor: '#7C7E86',
  //     previousId: '618be50359bf41c9b08ce4ce05600581',
  //     path: ['2'],
  //     configuring: false,
  //     validateStatusError: false,
  //     children: [],
  //   },
  // ]);

  // const node = {
  //   id: '165294ea951f44cfa6661a6e325a4002',
  //   icon: 'http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/public/icons/logo.svg',
  //   type: 'default_DF_END',
  //   name: '更新记录',
  //   url: 'http://io.qgutech.com/qx-apaaspublic/data/qixiao/fs/upload/default/2023/09-20/compressed/6657769957328896/DF_DO_U/index.js',
  //   data: {
  //     nodeVersion: '1.0.0-dev34',
  //   },
  //   // previousId: 'd17f4b3e8f904a81aaa261b8e08101fb',
  //   path: ['1'],
  //   configuring: true,
  // };

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

  const isHide = true;

  const componentItem = {
    value: comValue,
    onChange: comHandleChange,
  };
  const titleDom = (
    <div
      style={{
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-start',
        flexDirection: 'column',
      }}
    >
      <span
        style={{
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
        }}
      >
        标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示
      </span>
      <span
        style={{
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
        }}
      >
        标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示标题展示
      </span>
    </div>
  );

  return (
    <div style={{ width: '400px' }}>
      <QxParameterSetting
        value={value}
        // nodeItem={nodeItem}
        // componentItem={componentItem}
        onChange={handleChange}
        isHideSearch={isHide}
        isShowField={true}
        // node={node}
        // nodes={nodes}
        title={titleDom}
        // type={'preview'}
        // component={QxTagsInput}
        request={request}
        appId={'5ak3C213YQWEO6IYnIs'}
      />
    </div>
  );
};

入参数据格式

参数	说明	类型	默认值
isHideSearch	是否隐藏搜索框	bool	-
nodeItem	节点信息，默认值右侧选择节点使用	[]	-
value		[]	-
title	左侧标题	React.ReactNode	-
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