# staff-react

**Repository Path**: qinz/staff-react

## Basic Information

- **Project Name**: staff-react
- **Description**: React中使用WebComponent
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-08
- **Last Updated**: 2023-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bgy-staff-pick for React Demo

[在线文档](https://npm.countrygarden.com.cn/-/web/detail/bgy-staff-pick)

### 安装
> @lit-labs/react 库用于将 WebComponent 适配为 React 组件

```bash
npm install bgy-staff-pick @lit-labs/react -S
```

### 使用

`src/wc/lit.js`
```javascript
import React from "react";
import { BgySelection, BgyOrgCard, BgyStaffCard } from "bgy-staff-pick";
import { createComponent } from "@lit-labs/react";

// 高阶组件进行一层转化下
export const BgySelectionComponent =
  createComponent(
    React,
    "bgy-selection",
    BgySelection,
    {
      // confirm 事件转化为onConfirm事件
      onConfirm: 'confirm',
      onCancel: 'cancel'
    }
  );

export const BgyOrgCardComponent =
createComponent(
  React,
  "bgy-org-card",
  BgyOrgCard,
  {
    onRemove: 'remove',
  }
);

export const BgyStaffCardComponent =
createComponent(
  React,
  "bgy-staff-card",
  BgyStaffCard,
  {
    onRemove: 'remove',
  }
);

```

`App.js`
```jsx
import './App.css';
import { useState, createContext, useEffect } from 'react'
import { BgySelectionComponent, BgyOrgCardComponent, BgyStaffCardComponent } from './wc/lit';

const state = {
  // 是否允许多选
  allowMulti: true,
  // 是否可选离职人员
  allowSelectLeaveUser: true,
  // 是否允许全局选人
  allowAll: true,
  // 应用编码
  appCode: "app001",
  // 访问令牌
  token: "b9b9781e0dc2a5cb0148f215da25d2ae",
  // 体系分类
  sysType: ["01", "02", "03", "04"],
  // 使用用户
  currentUser: "lijunjie10",
  // 组件功能
  compFun: ["01", "02"],
  // 候选人列表
  waitUserList: [
    { bip: "zhongzhangpeng" },
    { bip: "zhaozhiyan01" },
    { bip: "1000122825" },
  ],
  // 回填
  checkedObjectList: [],
  // 排除
  exceptObjectList: [],
}

export const MyContext = createContext({})

function App() {
  const [visible, setVisible] = useState(false)
  const [property, setProperty] = useState(state)
  const [selectedOrg, setSelectedOrg] = useState([])
  const [selectedStaff, setSelectedStaff] = useState([])
  
  const handlePicker = () => {
    setVisible(true)
  }

  const handleCancel = () => {
    setVisible(false)
  }

  const handleConfirm = ({ detail }) => {
    if (Array.isArray(detail.org)) {
      setSelectedOrg(detail.org)
    }
    if (Array.isArray(detail.staff)) {
      setSelectedStaff(detail.staff)
    }
    setVisible(false)
  }

  const handleRemove = ({ detail }) => {
    if (detail.otype === "user") {
      const index = selectedStaff.findIndex(e => e.bip === detail.bip)
      if (index > -1) {
        selectedStaff.splice(index, 1)
        setSelectedStaff(selectedStaff.slice())
      }
    } else if (detail.otype === "org") {
      const index = selectedOrg.findIndex(e => e.orgNo === detail.orgNo)
      if (index > -1) {
        selectedOrg.splice(index, 1)
        setSelectedOrg(selectedOrg.slice())
      }
    }
  }

  useEffect(() => {
    setProperty(p => ({
      ...p,
      checkedObjectList: selectedOrg.concat(selectedStaff)
    }))
  }, [selectedOrg, selectedStaff])
  
  return (
    <div className="app">
      <BgySelectionComponent
        visible={visible}
        {...property}
        onCancel={handleCancel}
        onConfirm={handleConfirm}
      ></BgySelectionComponent>

      <div className="center">
        <button onClick={handlePicker}>选人控件</button>
      </div>

      <p>已选组织</p>
      <div className="viewer">
        {
          selectedOrg.map(item =>
            <BgyOrgCardComponent
              key={item.orgNo}
              data={item}
              removeable
              onRemove={handleRemove}
            ></BgyOrgCardComponent>
          )
        }
      </div>

      <p>已选人员</p>
      <div className="viewer">
        {
          selectedStaff.map(item =>
            <BgyStaffCardComponent
              key={item.bip}
              data={item}
              removeable
              onRemove={handleRemove}
            ></BgyStaffCardComponent>
          )
        }
      </div>

      <p>传给组件的属性</p>
      <pre>{ JSON.stringify(property, null, 2) }</pre>
    </div>
  );
}

export default App;
```