# Share 共享组件

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/share/freepass)
- 平台：PC
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Share]

## 代码演示

### 基础用法

直接引入组件进行使用（由于涉及权限数据，分享列表的接口需要模块自定义，使用前，需要初始化接口，详情见 demo）

```jsx
import { Component } from 'react';
import { constants, Share, AnyObj } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const store = new Store();
const shareListStore = store.shareList

const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}
class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      // mock 接口
      fetchGetData: this.fetchGetData
    })
  }
  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType } = shareListStore;
    const { current, pageSize } = options.data;
    const total = 50;
    const len = current * pageSize < total ? pageSize : total - ((current - 1) * pageSize);
    let data: any[] = ('0,'.repeat(len - 1).split(',')).map((v, i) => {
      const id = current > 1 ? (current - 1) * pageSize + i + 1 : i + 1;
      return ({
        "id": `id_${id}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${id}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + (id),
          "总部"
        ]
      })
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType,
            pageSize: pageSize,
            current: current,
            total: total,
          }
        })
      }, 1000);
    })
  }
  onClose = (visible: boolean) => {
    console.log('onClose', visible)
    this.setState({ visible })
  };
  showAuth = () => this.setState({ visible: true });
  render() {
    const { visible } = this.state;
    return (
      <div className={prefixCls}>
        <Share
         
          visible={visible}
          onClose={this.onClose}
          module={'performance'}
          permissionId={'doc_s01'}
          permissionType={1}
          id={'122'}
          sourceType={1}
          store={shareListStore}
          cacheAuthCondition={false}
        >
          <div className={`${prefixCls}-title`} onClick={this.showAuth}>查看详情</div>
        </Share>
      </div>
    );
  }
}

export default ShareDemo;
```

### 直接使用列表

使用分享列表（由于涉及权限数据，分享列表的接口需要模块自定义，使用前，需要初始化接口，详情见 demo）

```jsx
import { Component } from 'react';
import {
  constants, Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType, ShareOperatesType
} from '@weapp/ui';
import { request, RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // getFetchPrams = (type: string, params: AnyObj) => {
  //   console.log(type, params)
  //   return { ...params, test: 'test' };
  // }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    // 排序接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      columns: res.data.columns as any,
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      editConfig,
      sortable: false,
      topVisible: true,
      // mock 接口
      fetchGetData: this.fetchGetData,
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType } = shareListStore;
    const { current, pageSize } = options.data;
    const total = 50;
    const len = current * pageSize < total ? pageSize : total - ((current - 1) * pageSize);
    let data: any[] = ('0,'.repeat(len - 1).split(',')).map((v, i) => {
      const id = current > 1 ? (current - 1) * pageSize + i + 1 : i + 1;
      return ({
        "id": `id_${id}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${id}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + (id),
          "总部"
        ]
      })
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType,
            pageSize: pageSize,
            current: current,
            total: total,
          }
        })
      }, 1000);
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }
  onOperateClick = (item: ShareOperatesType, data: object, pos: any) => {
    console.log('operate click', item, data, pos)

  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'basicserver'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
          onOperateClick={this.onOperateClick}

        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 不走接口

共享支持前端不走接口，可以通过 fetchGetData 处理列表请求，其他新增等功能也支持通过对应 api 进行复写

```jsx
import { Component } from 'react';
import {
  constants, Button, Share, Radio, RadioValueType, RadioOptionType, FormInitAllDatas
} from '@weapp/ui';
import { RequestOptionConfig, RequestResult, getLabel, classUseMemo } from '@weapp/utils';
import Store from './store';
import res from './res.json';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, any> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
      selectedData: []
    }
  }
  componentDidMount() {
    this.initListView()
  }

  bodyRender = (data: any) => {
    const level = data?.seclevel ? data.seclevel.min + '-' + data.seclevel.max : '';
    return <div>{level}</div>
  }

  /** 复写列表请求 */
  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType } = shareListStore;
    const { current, pageSize } = options.data;
    const total = 50;
    const len = current * pageSize < total ? pageSize : total - ((current - 1) * pageSize);
    let data: any[] = ('0,'.repeat(len - 1).split(',')).map((v, i) => {
      const id = current > 1 ? (current - 1) * pageSize + i + 1 : i + 1;
      return ({
        "id": `id_${id}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${id}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + (id),
          "总部"
        ]
      })
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType,
            pageSize: pageSize,
            current: current,
            total: total,
          }
        })
      }, 1000);
    })
  }

  /** 复写添加接口 */
  fetchAddData = (options: RequestOptionConfig, condition?: FormInitAllDatas): RequestResult => {
    const formDatas = options.data;
    const OBJ_ID_KEY = 'obj_id' + (formDatas.objType === "resource" ? '' : `_${formDatas.objType}`)
    let datas = formDatas[OBJ_ID_KEY]?.map((item: any) => {
      let shareKey = formDatas.objType + '_' + item.id;
      let objTypeSpan = condition?.items?.objType?.options?.find((item: any) => item?.id === formDatas?.objType)?.content;
      let objIdSpan = item.content;
      return {
        ...formDatas,
        shareKey,
        objTypeSpan,
        objIdSpan
      }
    })

    const { selectedData } = this.state;
    const newSelectedData = selectedData?.concat(datas);
    this.setState({ selectedData: newSelectedData });
    return {
      status: true,
      data: [],
      code: 200,
      msg: 'success'
    }
  }

  /** 复写删除接口 */
  fetchDeleteData: (options: RequestOptionConfig) => RequestResult = (options) => {
    const deleteIds = options.data?.datas?.map((item: any) => item?.shareKey) || [];
    const { selectedData } = this.state;
    const newSelectedData = selectedData?.filter((data: any) => deleteIds?.indexOf(data.shareKey) === -1);
    this.setState({ selectedData: newSelectedData });
    return {
      status: true,
      data: [],
      code: 200,
      msg: 'success'
    }
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore;
    init({
      rowKey: 'shareKey',
      fetchGetData: this.fetchGetData,
      fetchAddData: this.fetchAddData,
      fetchDeleteData: this.fetchDeleteData,
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  onPageChange = (value: number, pageSize: number) => {
    console.log('onPageChange', value, pageSize);
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          onPageChange={this.onPageChange}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 自定义操作按钮配置

自定义操作按钮配置

```jsx
import { Component } from 'react';
import {
  constants, Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType, ShareOperatesType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // getFetchPrams = (type: string, params: AnyObj) => {
  //   console.log(type, params)
  //   return { ...params, test: 'test' };
  // }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    // 排序接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      columns: res.data.columns as any,
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      editConfig,
      sortable: false,
      topVisible: true,
      // 自定义配置 operates
      operates: [
        {
          text: 'ces1',
          index: 1,
          key: 'ces1',
          visible: true,
          outer: false,
        },
        {
          text: 'ces2',
          index: 2,
          key: 'ces2',
          visible: true,
          outer: false,
          bgColor: '#ddd'
        }
      ],
      // 行操作按钮显示配置
      operatesPermission: [
        [{ visible: false }, { visible: false }],
        [{ visible: true }, { visible: false }],
        [{ visible: false }, { visible: true }],
      ],
      // mock 接口
      fetchGetData: this.fetchGetData
    })
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType } = shareListStore;
    const { current, pageSize } = options.data;
    const total = 50;
    const len = current * pageSize < total ? pageSize : total - ((current - 1) * pageSize);
    let data: any[] = ('0,'.repeat(len - 1).split(',')).map((v, i) => {
      const id = current > 1 ? (current - 1) * pageSize + i + 1 : i + 1;
      return ({
        "id": `id_${id}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${id}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + (id),
          "总部"
        ]
      })
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType,
            pageSize: pageSize,
            current: current,
            total: total,
          }
        })
      }, 1000);
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }
  onOperateClick = (item: ShareOperatesType, data: object, pos: any) => {
    console.log('operate click', item, data, pos)

  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
       <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
          onOperateClick={this.onOperateClick}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 控制顶部按钮显示隐藏

控制顶部按钮显示隐藏

```jsx
import { Component } from 'react';
import {
  constants,
  Share, Radio, Button, RadioValueType, RadioOptionType, ShareBtnOptionsType, ITableProps
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      addVisible: false,
      deleteVisible: true
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType } = shareListStore;
    setState({
      data: res.data.data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: res.data.total
    })
  }
  getTableProps = (tableProps: ITableProps) => {
    console.error('tableProps', tableProps)
    return tableProps;
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          getTableProps={this.getTableProps}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 自定义顶部按钮配置

自定义顶部按钮配置

```jsx
import { Component } from 'react';
import {
  constants,
  Share, Radio, Button, RadioValueType, RadioOptionType, ShareBtnOptionsType, ITableProps
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

const btnOptions: ShareBtnOptionsType[] = [
  {
    id: 'add',
    icon: 'Icon-add-to03',
    title: '添加',
    disabled: false,
  },
  {
    id: 'custom',
    icon: 'Icon-iframe',
    title: '自定义',
    disabled: false,
    onClick: () => {
      alert('自定义按钮')
    }
  }]

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    init({
      listConfig,
      deleteConfig,
      addConfig
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType } = shareListStore;
    setState({
      data: res.data.data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: res.data.total
    })
  }
  getTableProps = (tableProps: ITableProps) => {
    console.error('tableProps', tableProps)
    return tableProps;
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          btnOptions={btnOptions}
          getTableProps={this.getTableProps}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 自定义 columns

自定义 columns

```jsx
import { Component } from 'react';
import {
  constants,
  Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    init({
      listConfig,
      deleteConfig,
      addConfig
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType } = shareListStore;
    setState({
      data: res.data.data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: res.data.total
    })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log(columns)
    return columns;
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          getColumns={this.getColumns}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 启用编辑

由于编辑功能依赖接口，目前需要模块主动开启（配置详情接口与编辑接口，后端接口与`孙肖峰`对接）

```jsx
import { Component } from 'react';
import {
  constants,
  Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }

    /** 对以下两个接口进行配置以开启编辑功能 */
    // 详情接口
    const detailConfig: RequestOptionConfig = {
      url: "/api/app/custom/detail",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType } = shareListStore;
    let data = ('0,'.repeat(3).split(',')).map((v, i) => ({
      "id": `id_${i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理",
        "总部"
      ]
    }));
    setState({
      data: data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: 4 || res.data.total,
      // sortable: true,
      paginationType: 'more'
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 启用排序

由于排序功能依赖接口，目前需要模块主动开启（配置 sortable 与排序接口，后端接口与`孙肖峰`对接）

```jsx
import { Component } from 'react';
import {
  constants, AnyObj,
  Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
  data: AnyObj[]
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
      data: [],
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }

    /** 对以下两个接口进行配置以开启编辑功能 */
    // 详情接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }

    init({
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      sortable: true,  // 启用拖拽排序
      topVisible: true,  // 启用置顶排序
      // demo 没有配置 sort 接口，这里 mock 一下接口
      fetchSortData: this.fetchSortData,
      fetchGetData: this.fetchGetData,
    })
  }

  fetchSortData = (options: RequestOptionConfig, newDatas?: any[], selectedRows?: any[]): any => {
    return {
      status: true,
      code: 200,
      // msg
    }
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType, current, pageSize } = shareListStore;
    let data: any[] = []
    if (current !== options.data.current) {
      data = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
        "id": `id_${current * pageSize + i + 10}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${current * pageSize + i}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + current * pageSize + i,
          "总部"
        ]
      }));
    } else {
      data = this.state.data;
    }
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType === 'NONE' ? res.data.tableType : tableType,
            pageSize: res.data.pageSize,
            current: options.data.current,
            total: current * pageSize || res.data.total,
            // sortable: true,
            paginationType: 'more',
          }
        })
      }, 1000);
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType, pageSize } = shareListStore;
    let data = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
      "id": `id_${i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理" + i,
        "总部"
      ]
    }));
    setState({
      data: data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: 10 || res.data.total,
      // sortable: true,
      paginationType: 'more',
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
    this.setState({ data })
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 启用搜索

设置 showSearch 为 ture 开启搜索功能，搜索依赖后端 jar 包功能（具体版本可以咨询`孙肖峰`）

```jsx
import { Component } from 'react';
import {
  constants, AnyObj,
  Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
  data: AnyObj[]
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
      data: [],
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }

    /** 对以下两个接口进行配置以开启编辑功能 */
    // 详情接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }

    init({
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      showSearch: true,  // 启用搜索功能
      sortable: true,  // 启用拖拽排序
      topVisible: true,  // 启用置顶排序
      // demo 没有配置 sort 接口，这里 mock 一下接口
      fetchSortData: this.fetchSortData,
      fetchGetData: this.fetchGetData,
    })
  }

  fetchSortData = (options: RequestOptionConfig, newDatas?: any[], selectedRows?: any[]): any => {
    return {
      status: true,
      code: 200,
      // msg
    }
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType, current, pageSize } = shareListStore;
    let data: any[] = []
    if (current !== options.data.current) {
      data = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
        "id": `id_${current * pageSize + i + 10}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${current * pageSize + i}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + current * pageSize + i,
          "总部"
        ]
      }));
    } else {
      data = this.state.data;
    }
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType === 'NONE' ? res.data.tableType : tableType,
            pageSize: res.data.pageSize,
            current: options.data.current,
            total: current * pageSize || res.data.total,
            // sortable: true,
            paginationType: 'more',
          }
        })
      }, 1000);
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType, pageSize } = shareListStore;
    let data = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
      "id": `id_${i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理" + i,
        "总部"
      ]
    }));
    setState({
      data: data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: 10 || res.data.total,
      // sortable: true,
      paginationType: 'more',
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
    this.setState({ data })
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 禁用数据check

配合多选使用，禁用某些数据 check（demo 中禁止了第一条数据）

```jsx
import { Component } from 'react';
import {
  constants,
  Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    // 排序接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      columns: res.data.columns as any,
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      editConfig,
      // mock 接口
      fetchGetData: this.fetchGetData
    })
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType, current, pageSize } = shareListStore;
    let data: any[] = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
      "id": `id_${current * pageSize + i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${current * pageSize + i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理" + current * pageSize + i,
        "总部"
      ]
    }));
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType === 'NONE' ? res.data.tableType : tableType,
            pageSize: res.data.pageSize,
            current: options.data.current,
            total: current * pageSize || res.data.total,
            // sortable: true,
            paginationType: 'more',
            checkBoxPermission: [{ visible: false, disabled: true }, { visible: true }, { visible: true }, { visible: true }],
          }
        })
      }, 1000);
    })
  }
  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  btnClick = () => {
    const { setState, tableType, pageSize } = shareListStore;
    let data = ('0,'.repeat(pageSize - 1).split(',')).map((v, i) => ({
      "id": `id_${i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理" + i,
        "总部"
      ]
    }));
    setState({
      data: data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: 10 || res.data.total,
      // sortable: true,
      paginationType: 'more',
    })
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }

  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 控制按钮显隐方式

btnVisibleType 用于控制按钮显隐方式（hidden：隐藏，disabled：禁用）

```jsx
import { Component } from 'react';
import {
  constants, Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType, ShareOperatesType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
  btnVisibleType: string
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

const btnVisibleTypeRadioData = [
  { id: 'disabled', content: 'disabled' },
  { id: 'hidden', content: 'hidden' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
      btnVisibleType: 'disabled' || 'hidden'
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // getFetchPrams = (type: string, params: AnyObj) => {
  //   console.log(type, params)
  //   return { ...params, test: 'test' };
  // }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    // 排序接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      columns: res.data.columns as any,
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      editConfig,
      sortable: false,
      topVisible: true,
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  radioChange2 = (value: RadioValueType, option: RadioOptionType) => {
    this.setState({ btnVisibleType: value.toString(), }, () => {
      console.log('value', this.state.btnVisibleType);
      shareListStore.setState({
        btnVisibleType: value,
      })
    })
  }

  btnClick = () => {
    const { setState, tableType } = shareListStore;
    let data = ('0,'.repeat(3).split(',')).map((v, i) => ({
      "id": `id_${i + 10}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "查看",
      "download": "可下载",
      "obj_id": `用户_${i}`,
      "level": "1-100",
      "targetId": "1554612592646902621",
      "targetType": "hrm",
      "objIdList": [
        "总经理",
        "总部"
      ],
    }));
    setState({
      data: data,
      columns: res.data.columns,
      tableType: tableType === 'NONE' ? res.data.tableType : tableType,
      pageSize: res.data.pageSize,
      current: res.data.current,
      total: 4 || res.data.total,
      // sortable: true,
      paginationType: 'more',
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }
  onOperateClick = (item: ShareOperatesType, data: object, pos: any) => {
    console.log('operate click', item, data, pos)

  }

  render() {
    return (
      <div className={prefixCls}>
        <h3>设置列表单选多选</h3>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <h3>调整 btnVisibleType（默认为 disabled） </h3>
        <h5>1. 当按钮不可用且 btnVisibleType 为 disabled 时，按钮样式为禁用样式</h5>
        <h5>2. 当按钮不可用且 btnVisibleType 为 hidden 时，按钮样式为隐藏</h5>
        <Radio data={btnVisibleTypeRadioData}
          value={this.state.btnVisibleType}
          onChange={this.radioChange2}
        />
        <Button onClick={this.btnClick} >mock 数据</Button>
        <h3>btnVisibleType = disabled</h3>
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
          onOperateClick={this.onOperateClick}
        />
      </div>
    );
  }
}

export default ShareDemo;
```

### 表单确定拦截事件

共享表单点击保存后，触发拦截事件

```jsx
import { Component } from 'react';
import {
  constants, Share, Radio, Button, RadioValueType, RadioOptionType, ITableColumn, PaginationProps, ITablePaginationType, ShareOperatesType, Dialog
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import res from './res.json';
import Store from './store';

const { ShareList } = Share;
const prefixCls = `${constants.uiPcClsPrefix}-demo-share`;

const store = new Store();
const shareListStore = store.shareList

interface ShareDemoProps {

}

interface ShareDemoState {
  visible: boolean,
}

const data = [
  { id: '1', content: '单选' },
  { id: '2', content: '多选' }
]

class ShareDemo extends Component<ShareDemoProps, ShareDemoState> {
  constructor(props: ShareDemoProps) {
    super(props);
    this.state = {
      visible: false,
    }
  }
  componentDidMount() {
    this.initListView()
  }

  // getFetchPrams = (type: string, params: AnyObj) => {
  //   console.log(type, params)
  //   return { ...params, test: 'test' };
  // }

  // 初始化接口配置
  initListView = () => {
    const { init } = shareListStore
    // 列表数据接口
    const listConfig: RequestOptionConfig = {
      url: "/api/app/custom/list",
      method: 'POST',
      params: {
        current: 1,
        pageSize: 10,
        userid: '5111597426042878265',
        tenantkey: 'TSHY6DTU0Z'
      }
    }
    // 删除接口
    const deleteConfig: RequestOptionConfig = {
      url: "/api/app/custom/delete",
      method: "POST",
    }
    // 添加接口
    const addConfig: RequestOptionConfig = {
      url: "/api/app/custom/add",
      method: "POST",
    }
    // 排序接口
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/custom/sort",
      method: "POST",
    }
    // 编辑接口
    const editConfig: RequestOptionConfig = {
      url: "/api/app/custom/edit",
      method: "POST",
    }

    init({
      columns: res.data.columns as any,
      listConfig,
      deleteConfig,
      addConfig,
      sortConfig,
      editConfig,
      sortable: false,
      topVisible: true,
      // mock 接口
      fetchGetData: this.fetchGetData
    })
  }

  radioChange = (value: RadioValueType, option: RadioOptionType) => {

    const { setState, checkedKeys } = shareListStore;

    if (value && value === '1') {  // 单选
      let _checkedKeys = checkedKeys.length > 1 ? [] : checkedKeys;
      setState({
        tableType: "RADIO",
        checkedKeys: _checkedKeys
      })
    } else if (value && value === '2') {  // 多选
      setState({
        tableType: "CHECKBOX"
      })

    } else {  // 无法选择
      setState({
        tableType: "CHECKBOX",
        checkedKeys: []
      })
    }
  }

  fetchGetData = (options: RequestOptionConfig): any => {
    const { tableType } = shareListStore;
    const { current, pageSize } = options.data;
    const total = 50;
    const len = current * pageSize < total ? pageSize : total - ((current - 1) * pageSize);
    let data: any[] = ('0,'.repeat(len - 1).split(',')).map((v, i) => {
      const id = current > 1 ? (current - 1) * pageSize + i + 1 : i + 1;
      return ({
        "id": `id_${id}`,
        "type": "ces",
        "objType": "部门",
        "seclevel": "查看",
        "download": "可下载",
        "obj_id": `用户_${id}`,
        "level": "1-100",
        "targetId": "1554612592646902621",
        "targetType": "hrm",
        "objIdList": [
          "总经理" + (id),
          "总部"
        ]
      })
    });
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          status: true,
          code: 200,
          data: {
            data: data,
            columns: res.data.columns,
            tableType: tableType,
            pageSize: pageSize,
            current: current,
            total: total,
          }
        })
      }, 1000);
    })
  }

  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    console.log('onSort', columns, sortColumn)
  }
  onDrag = (data: any[], evt: any, pageInfo?: PaginationProps & { paginationType?: ITablePaginationType, paginationNoLocal?: boolean }, nestedInfo?: object) => {
    console.log('onDrag', data, evt, pageInfo)
  }
  onOperateClick = (item: ShareOperatesType, data: object, pos: any) => {
    console.log('operate click', item, data, pos)

  }
  onBeforeSure = (params: {
    formDatas: any;
    authType: string;
    onClose: () => void;
  }) => {
    return new Promise<boolean>((resolve, reject) => {
      console.error(params.formDatas, params.authType)
      Dialog.confirm({
        content: '当前考勤规则未启用【按人员排班】，按指定人员范围排班的维护者将不生效，确定要启用【按人员排班】并添加吗？',
        onOk: () => {
          resolve(true);
        },
        onCancel: () => {
          // 如果需要关闭表单，就调用 onClose
          // params.onClose();
          resolve(false);
        }
      })
    })
  }
  render() {
    return (
      <div className={prefixCls}>
        <Radio data={data}
          onChange={this.radioChange}
        />
        <ShareList
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}
          store={shareListStore}
          permissionType={1}
          sourceType={1}
          // onSort={this.onSort}
          onDrag={this.onDrag}
          onOperateClick={this.onOperateClick}
          onBeforeSure={this.onBeforeSure}

        />
      </div>
    );
  }
}

export default ShareDemo;
```

## 使用须知

共享组件是业务组件，后端严重依赖 ``、`` 提供的接口数据，模块对接共享组件，后端需要和他们对接。

共享组件除了 authUrl 外，没有公共接口，所有接口都需要模块传递。

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| store | 列表实例 | ShareListStore | T | - |
| id | 当前权限数据对应文件 id | string | T | - |
| sourceType | 资源文件类型 | number | F | 1 |
| permissionId | 当前权限数据对应后端模块标识 | string | T | - |
| permissionType | 权限类型(比如，文档的，可读，可写，流程的删除，干预) | string | F | - |
| dialogProps | share Dialog 组件 API 配置集合 | FormRenderProps | F | - |
| authDialogProps | auth Dialog 组件 API 配置集合 | FormRenderProps | F | - |
| onSelect | 行选中事件 | (selectedkeys: string[], selectedRows: any[], changeRow: any) => any | F | - |
| getSelection | 自定义选择框/单选框 属性配置 | (selection: ITableSelection) => ITableSelection | F | - |
| getSortable | 自定义拖拽配置（参考 table 的拖拽配置） | (selection: any) => any | F | - |
| getPageInfo | 自定义分页配置 | (pageInfo: PaginationProps & { paginationType?: ITablePaginationType }) => PaginationProps & { paginationType?: ITablePaginationType } | F | - |
| getTableProps | 自定义表格配置 | (tableProps: ITableProps) => ITableProps | F | - |
| getColumns | 自定义 columns（适用于模块自己复写了 list 接口的情况，复写 list 接口可能导致组件内封装人力卡片失效，此时需要模块通过 getColumns 自己复写 columns 来使用人力卡片功能 | (columns: ITableColumn[]) => ITableColumn[] | F | - |
| onOperateClick | 数据 operates 点击回调 | (item: OperatesType, data: object, pos: ITableCellPos) => void | F | - |
| onPageChange | 页码变化回调 | (value: number, pageSize: number) => void; | F | - |
| authFormProps | 自定义 authForm props | AuthFormType | F | - |
| onBeforeSure | 表单确定拦截事件 | (params: { formDatas: any, authType: string, onClose: () => void }) => Promise \| boolean | F | - |
| cacheAuthCondition | 缓存 auth 接口返回的数据，仅触发一次 auth 请求 | boolean | F | true |
| btnOptions | 自定义顶部操作按钮 | ShareBtnOptionsType | F | - |
### store 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| rowKey | 每一行的 key | string | F | - |
| tableType | 单选、多选配置 | `NONE`: 不可选择,`CHECKBOX`: 多选,`RADIO`: 单选 | F | `CHECKBOX` |
| checkBoxPermission | 数据 check 禁用控制（用于控制某一行数据不可选中，使用方法同 listView） | PermissionType[] | F | [] |
| sortable | 是否启用拖拽 | boolean | F | false |
| sortableType | 拖拽类型 | 'row' \| 'icon' | F |  |
| setState | 更新设置列表内数据（外部更新 store 内数据请使用此方法，不建议直接赋值操作） | (params?: any) => void | F |  |
| getData | 请求列表数据 | (options: RequestOptionConfig) => void | F |  |
| operates | 通用操作列配置（key 优先于 id） | OperatesType | F | （默认配置删除与编辑（需要配置相关接口起用），详细格式可参考下面的数据格式 |
| showOperates | 是否显示操作列 | boolean | F | false |
| operatesPermission | 数据 operates 操作权限控制 （用于控制某一行数据 operatos，使用方法同 listView） | PermissionType | F | [] |
| checkedKeys | 已选内容 | string[] | F | [] |
| paginationType | 分页模式 `part` \| `more` \| `scroll` | `part` \| `more` \| `scroll`[] | F | `part` |
| pageSize | 每页展示数量 | number | F | 0 |
| current | 当前页码 | number | F | 1 |
| total | 总数 | number | F | 0 |
| addVisible | 添加按钮显隐控制（list 接口返回） | boolean | F | true |
| deleteVisible | 删除按钮显隐控制(list 接口返回) | boolean | F | true |
| topVisible | 置顶按钮显隐控制(list 接口返回) | boolean | F | true |
| btnVisibleType | 控制按钮显隐方式（hidden：隐藏，disabled：禁用） | string | F | disabled |
| addVisibleType | 控制新增按钮显隐方式，会覆盖 btnVisibleType（hidden：隐藏，disabled：禁用） | string | F | '' |
| deleteVisibleType | 控制删除按钮显隐方式，会覆盖 btnVisibleType（hidden：隐藏，disabled：禁用） | string | F | '' |
| topVisibleType | 控制置顶按钮显隐方式，会覆盖 btnVisibleType（hidden：隐藏，disabled：禁用） | string | F | hidden |
| condition | auth form 配置（推荐走接口 authConfig 进行配置） | FormInitAllDatas | F | - |
| listConfig | 列表数据接口配置 | RequestOptionConfig | F | - |
| deleteConfig | 删除接口配置 | RequestOptionConfig | F | - |
| addConfig | 添加接口配置 （添加相关） | RequestOptionConfig | F | - |
| authConfig | 权限接口配置（添加相关） | RequestOptionConfig | F | - |
| sortConfig | 排序接口配置 | RequestOptionConfig | F | - |
| detailConfig | 详情接口配置（编辑相关） | RequestOptionConfig | F | - |
| editConfig | 编辑接口配置（编辑相关） | RequestOptionConfig | F | - |
| getFetchPrams | 复写保存/编辑接口参数（请求前触发，接收 params，返回 params） | (type: string, params: AnyObj) => AnyObj | F | - |
| afterAddAuth | 添加保存后回调 | (response: any) => void | F | - |
| afterEditAuth | 编辑保存后回调 | (response: any) => void | F | - |
| afterDeleteAuth | 删除保存后回调 | (response: any) => void | F | - |
### 接口配置

共享后端接口相关配置请和 ``、`` 对接。

```js
// 获取 auth form 接口配置
@observable authConfig: RequestOptionConfig = {
  url: "/api/app/module/component/data/permission/form/query",
  method: "POST",
  params: {
  }
}
```

您可以通过 setState 或者 init 方法，进行接口配置。
需要注意的是，由于权限问题，列表相关的接口：获取数据，添加数据，删除数据，这三个接口，不能使用默认接口，需要模块自定义！！！

## permissionId 参数

```
 String WFC_MONITOR_PERMISSION_ID = "wfc_monitor"; // 流程监控
 String WFC_SHARE_PERMISSION_ID = "wfc_share"; // 流程共享
 String DOC_SHARE_PERMISSION_ID = "doc_s01"; // 文档共享
 String MEETING_MONITOR_PERMISSION_ID = "monitor_detail"; // 会议监控
 String CONWORK_ITEM_PERMISSION_ID = "cowork_item"; // 协作共享
 String CONWORK_SECTION_PERMISSION_ID = "cowork_section"; // 协作共享
 String SHARE_DETAIL_PERMISSION_ID = "share_detail"; // 会议共享
```

## 自定义按钮配置格式

默认会展示到 title 上，如果想要放入更多操作菜单中，设置 isMenu 为 true，如果是批量操作的按钮，需要配置 isBatchOperator 为 true。（批量操作必须放入更多操作菜单中）

```
// 默认按钮配置
[
      {
        id: 'delete',
        icon: 'Icon-Batch-delete',
        title: getLabel('19635', '批量删除'),
        disabled: false,
        isMenu: true,
        isBatchOperator: true,
      }, {
        id: 'top',
        icon: 'Icon-Back-to-top',
        title: getLabel('223156', '批量移至最前'),
        disabled: false,
        isMenu: true,
        isBatchOperator: true,
      },
      {
        id: 'add',
        icon: 'Icon-add-to03',
        title: getLabel('59674', '添加'),
        disabled: false,
      }
]
```

## 数据格式

```
{
  status: true,
  code: 200,
  msg: 'success',
  data: {
    // 数据展示（参考 table）
    columns: [
      {
        "hide": false,  // 是否隐藏
        "dataIndex": "type",  // 列数据在数据项中对应的 key
        "width": "10%",  // 列宽度
        "title": "共享类型"  // 列头显示文字
      },
      {
        "dataIndex": "shareName",
        "width": "20%",
        "title": "对象类型",
        "hide": false,
      },
      {
        "dataIndex": "shareRealName",
        "hide": false,
        "width": "25%",
        "title": "对象"
      },
      {
        "dataIndex": "shareRealLevel",
        "hide": false,
        "width": "20%",
        "title": "安全级别"
      },
      {
        "dataIndex": "shareRealType",
        "hide": false,
        "width": "15%",
        "title": "权限"
      },
      {
        "dataIndex": "downloadlevelName",
        "hide": false,
        "width": "15%",
        "title": "下载权限"
      },
      {
        "dataIndex": "chk",
        "title": "chk",
        "hide": true,
      },
      {
        "dataIndex": "randomFieldId",
        "title": "randomFieldId",
        "hide": true,
      }
    ],
    data: [{  // 对应的数据
      "shareRealLevel": "",
      "downloadlevelName": "",
      "chk": "",
      "shareName": "创建人本人",
      "type": "默认共享",
      "shareRealName": `<a  onclick="window.openHrmCard(event, '1361968083713620683', 'inside', 'bs/hrm')">系统管理员</a>&nbsp;`,
      "randomFieldId": "10",
      "shareRealType": "完全控制"
    },],
    // 操作列
    operates: [{
      text: getLabel('31479', '编辑'),
      index: 1,
      id: 'edit',
      key: 'edit',
      visible: true,
      outer: false
    }, {
      text: getLabel('21778', '删除'),
      index: 2,
      id: 'delete',
      key: 'delete',
      visible: true,
      outer: false
    }],
    // 分页配置
    count: 500,  // 数据总数
    current: 1,  // 当前页码
    pageSize: 10,  // 每页展示数量
    paginationType: 'page',  // 分页方式 'part': 分页器分页，'more': 点击更多加载, 'scroll': 滚动分页
    // 选择配置
    tableType: 'NONE',  // check 类型 'NONE': 不可选择，'RADIO': 单选, 'CHECKBOX': 多选
  }
```
