部门选择

@aligov/components-department-select

部门选择

API

参数名 说明 必填 类型 默认值 备注
value 部门 oid string
onChange 部门选择变更触发函数 (oid: strihg, devCoding: string, name: string) => void
latestValue 最近使用的部门 IPartOrgData[]
onRemoveLatestItem 移除一个最近使用的部门 (item: IPartOrgData) => void
onClearLatest 清除最近使用的部门 Function
queryService 查询组织树的服务 any => Promise<any> Call(/operation/org/getOrgTreeByOid)
orgKey queryService 查询时的组织 id 的参数名 string Oid
style 样式 {}
selectProps select组件的props {} {}

当默认的查询服务不符合使用需要时，可替换 queryService 和 orgKey。

只有提供里 latestValue、onRemoveLatestItem 以及 onClear 属性才会启用最近使用的部门功能

IPartOrgData

org，至少包括以下属性

DEMO 列表

最近使用的部门

mockQueryOrg 只是这里 demo mock 使用，实际使用不需要

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DepartmentSelect from '@aligov/components-department-select';
import { Button } from '@alifd/next';
import { mockQueryOrg, MockRemember } from './mock/index';

class App extends Component {
  fakeMemory = new MockRemember();

  state = {
    oid: undefined,
    devCoding: undefined,
    orgName: undefined,
    latestLoginDepartments: this.fakeMemory.getValue()
  };

  handleChange = (oid, devCoding, orgName) => {
    console.log(oid, devCoding, orgName);

    this.setState({
      oid,
      devCoding,
      orgName
    });
  };

  // 记住当前使用的部门信息
  rememberLatestDepartment = () => {
    const { oid, devCoding, orgName } = this.state;
    if (oid !== undefined) {
        this.fakeMemory.add(oid, devCoding, orgName);
        this.setState({
            latestLoginDepartments: this.fakeMemory.getValue()
        });
    }
  };

  rmLatestDepartment = item => {
    const res = this.fakeMemory.removeItem(item);
    this.setState({
      latestLoginDepartments: this.fakeMemory.getValue(),
    });
    return res;
  };

  clearLatestLoginDepartments = () => {
    const res = this.fakeMemory.clear();
    this.setState({
      latestLoginDepartments: this.fakeMemory.getValue(),
    });
  };

  render() {
    const { value, latestLoginDepartments } = this.state;

    return (
      <div>
        <Button type="primary" onClick={this.rememberLatestDepartment}>记住当前部门</Button>
        <DepartmentSelect
          queryService={mockQueryOrg}
          value={value}
          latestValue={latestLoginDepartments}
          onRemoveLatestItem={this.rmLatestDepartment}
          onClearLatest={this.clearLatestLoginDepartments}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

简单实用

mockQueryOrg 只是这里 demo mock 使用，实际使用不需要

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DepartmentSelect from '@aligov/components-department-select';
import { mockQueryOrg } from './mock/index';

class App extends Component {
  state = {
    value: undefined
  };

  handleChange = (id, code, name) => {
    console.log(id, code, name);

    this.setState({
      value: id
    });
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <DepartmentSelect value={value} onChange={this.handleChange} queryService={mockQueryOrg} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);