Lov弹出选择输入框

表单控件。

何时使用

代码演示

数据源

绑定数据源。

import { DataSet, Lov, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      {
        name: 'code',
        textField: 'code',
        type: 'object',
        lovCode: 'LOV_CODE',
        lovPara: { code: '111' },
        required: true,
      },
      {
        name: 'code_string',
        type: 'string',
        lovCode: 'LOV_CODE',
        required: true,
        defaultValue: 'SYS.TIME_ZONE',
      },
      { name: 'code_code', type: 'string', bind: 'code.code' },
      { name: 'code_description', type: 'string', bind: 'code.description' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <Lov dataSet={this.ds} name="code" noCache />
        </Col>
        <Col span={12}>
          <Lov dataSet={this.ds} name="code_string" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

LOV级联

LOV 级联。

import { DataSet, Lov, Select, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    '[record.toJSONData()]',
    record.toJSONData(),
  );
}
class App extends React.Component {
  ds = new DataSet({
    fields: [
      {
        name: 'mySex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
      },
      {
        name: 'code',
        type: 'object',
        label: 'LOV',
        lovCode: 'LOV_CODE',
        cascadeMap: { sex: 'mySex' },
      },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <Select dataSet={this.ds} name="mySex" />
        </Col>
        <Col span={12}>
          <Lov dataSet={this.ds} name="code" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

多值

通过属性multiple设置为多值。

import { DataSet, Lov } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'code', type: 'object', lovCode: 'LOV_CODE', multiple: true, required: true, defaultValue: [{}] },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return <Lov dataSet={this.ds} name="code" placeholder="复选LOV" />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

按钮

按钮。

import { DataSet, Lov, Output, Row, Col } from 'choerodon-ui/pro';
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      {
        name: 'code',
        type: 'object',
        lovCode: 'LOV_CODE',
        lovPara: { code: '111' },
        required: true,
      },
      {
        name: 'code_string',
        type: 'string',
        lovCode: 'LOV_CODE',
        required: true,
        defaultValue: 'SYS.TIME_ZONE',
      },
      { name: 'code_code', type: 'string', bind: 'code.code' },
      { name: 'code_description', type: 'string', bind: 'code.description' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    const { ds } = this;
    return (
      <Row gutter={10}>
        <Col span={6}>
          <Lov dataSet={ds} name="code" mode="button" clearButton={false} icon="check">
            请选择
          </Lov>
        </Col>
        <Col span={6}>
          <Output dataSet={ds} name="code_code" />
        </Col>
        <Col span={6}>
          <Output dataSet={ds} name="code_description" />
        </Col>
        <Col span={6}>
          <Lov dataSet={ds} name="code_string" mode="button" placeholder="请选择" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

Lov

弹出选择输入框

更多属性请参考 TextField, Button。