田强 / qx-common · Files

---

nav: path: /component title: 组件 order: 1 group: path: /common title: 选择字段

order: 0

QxField 选择字段

选择字段

import React from 'react';
import { QxFieldItem } from '@qx/common';

export default () => {
  return <QxFieldItem name={'标题'} widget={'qxInput'} />;
};

选择器

import React from 'react';
import { QxFieldSelect } from './index';

const schema ={
    "title": "查询字段",
    "type": "string",
    "placeholder": "请选择字段",
    "widget": "fieldsSelect",
    "props": {
        "data": [
            {
                "name": "记录ID",
                "code": "id",
                "extract": {
                    "fieldType": "REL",
                    "fieldKey": "id",
                    "widget": "relSelector",
                    "relId": "WgZMQfitq8TikF03r0C",
                    "allowSelect": true,
                    "$base": true
                }
            },
            {
                "name": "标题",
                "code": "title",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "title",
                    "widget": "qxInput",
                    "required": true,
                    "readOnly": false,
                    "hidden": false
                }
            },
            {
                "name": "文本",
                "code": "input_tcjjnb",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "input_tcjjnb",
                    "widget": "qxInput",
                    "required": false,
                    "readOnly": true,
                    "hidden": false
                }
            },
            {
                "name": "手机",
                "code": "mobile_sulvyl",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "mobile_sulvyl",
                    "widget": "qxMobile",
                    "required": false,
                    "readOnly": false,
                    "hidden": false
                }
            },
            {
                "name": "邮箱",
                "code": "email_kdgfdi",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "email_kdgfdi",
                    "widget": "qxEmail",
                    "required": false,
                    "readOnly": false,
                    "hidden": false
                }
            },
            {
                "name": "流水号",
                "code": "no_bdxdbw",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "no_bdxdbw",
                    "widget": "qxBizNo",
                    "required": false,
                    "readOnly": true,
                    "hidden": false
                }
            },
            {
                "name": "数据标题",
                "code": "data_title",
                "extract": {
                    "fieldType": "STRING",
                    "fieldKey": "data_title",
                    "widget": "qxInput",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "$base": true,
                    "$default": true
                }
            },
            {
                "name": "拥有人",
                "code": "owner_id",
                "extract": {
                    "fieldType": "USER",
                    "fieldKey": "owner_id",
                    "widget": "userSelector",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "relId": "user",
                    "$base": true,
                    "$default": true
                }
            },
            {
                "name": "创建人",
                "code": "created_by",
                "extract": {
                    "fieldType": "USER",
                    "fieldKey": "created_by",
                    "widget": "userSelector",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "relId": "user",
                    "$base": true,
                    "$default": true
                }
            },
            {
                "name": "更新人",
                "code": "updated_by",
                "extract": {
                    "fieldType": "USER",
                    "fieldKey": "updated_by",
                    "widget": "userSelector",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "relId": "user",
                    "$base": true,
                    "$default": true
                }
            },
            {
                "name": "创建时间",
                "code": "created_at",
                "extract": {
                    "fieldType": "YEAR_SEC",
                    "fieldKey": "created_at",
                    "widget": "qxDatetime",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "$base": true,
                    "$default": true
                }
            },
            {
                "name": "更新时间",
                "code": "updated_at",
                "extract": {
                    "fieldType": "YEAR_SEC",
                    "fieldKey": "updated_at",
                    "widget": "qxDatetime",
                    "required": false,
                    "readOnly": false,
                    "hidden": false,
                    "$base": true,
                    "$default": true
                }
            }
        ],
        "exclude": [
            "input_tcjjnb",
            "mobile_sulvyl",
            "email_kdgfdi",
            "no_bdxdbw"
        ],
        "params": {
            "appCode": "8yo7v",
            "funCode": "2eg66",
            "useKey": true
        }
    },
    "disabled": true,
    "className": "fr-my-field",
    "$id": "key"
}

export default () => {
  return <QxFieldSelect schema={schema} onChange={(val)=> {
      console.log(val,'kkkkkklllll')
  }}/>;
};

单个 选择弹框

import React from 'react';
import { QxFieldPopover, QxBaseIcon } from '@qx/common';
import {optionsList, treeList} from './mock';
import {
  Button,
  Col,
  Dropdown,
  Input,
  Menu,
  message,
  Row,
  Space,
  Tooltip,
  TreeSelect,
  Typography,
} from 'antd';

export default () => {
  return <QxFieldPopover onChange={(val) => {

  }} data={optionsList} trigger={'click'}>
    <Button
      size="small"
      type={'link'}
    >
      <QxBaseIcon style={{fontSize: 16}} type={'qx-icon-plus'} />
      添加字段
    </Button>
  </QxFieldPopover>;
};

多个选择弹框

import React, {useState} from 'react';
import { QxFieldPopover, QxBaseIcon, QxCheckboxFieldPopover } from '@qx/common';
import {optionsList, treeList} from './mock';
import {
  Button,
  Col,
  Dropdown,
  Input,
  Menu,
  message,
  Row,
  Space,
  Tooltip,
  TreeSelect,
  Typography,
} from 'antd';

export default () => {
  const [selectedFieldsKey, setSelectedFieldsKey] = useState<string[]>([]);


  return <QxCheckboxFieldPopover onChange={(val) => {
    setSelectedFieldsKey(val)
  }} data={optionsList} values={selectedFieldsKey} trigger={'click'}>
    <Button
      size="small"
      type={'link'}
    >
      <QxBaseIcon style={{fontSize: 16}} type={'qx-icon-plus'} />
      添加字段
    </Button>
  </QxCheckboxFieldPopover>;
};