# MShare 共享组件

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData, MRadio, MCheckbox } from '@weapp/ui';
import { request, RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
  isReadOnly?: boolean;
  isEmpty?: boolean;
}
class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  state = {
    isReadOnly: false,
    isEmpty: false
  }
  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,  // 拖拽排序功能
      sortableType: 'icon',
      fetchGetData: this.fetchGetData,
      fetchSortData: this.fetchSortData,
      tableType: 'CHECKBOX'
    })
  }
  

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

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data: any = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "permissionType": 1,
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetId": "0",
      "level": "0 - 255",
      "_entityType": "all",
      "icon": "Icon-all02",
      "hq": false,
      "targetType": 11,
      "type": false,
      "download": true,
      "obj_id_span": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetSubBordinateInclude": false,
      "extra": false,
      "objIdList": [
        `用户_${(options.data?.current - 1) * 10 + i + 1}`,
        `含下级`,
        `含兼职人员`,
      ],
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "objTypeSpan": "人员",
      "objType": "source",
      "seclevel": {
        "min": 0,
        "max": 255
      }
    }));

    let template: any = {
      "col1_row2": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
          ],
          "key": "col1"
        }
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    if (this.state.isEmpty) {
      datas.data = []
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
    console.log('visible', visible)
  }
  getTemplate = (template: any) => {
    return {
      "col1_row3": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
            {
              "configs": [
                {
                  "key": "download",
                  render: (data: any) => {
                    if (data.download) {
                      return '可下载';
                    } else {
                      return '不可下载'
                    }
                  }
                }
              ],
              "key": "col1_row3"
            },
          ],
          "key": "col1"
        }
      ]
    }
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  onCheckboxChange = (value: any) => {
    this.setState({ isReadOnly: value })
  }

  onChangeEmpty = (value: any) => {
    this.setState({ isEmpty: value });
  }
  dialogProps = {
    title: '共享'
  }
  render() {
    const { isReadOnly } = this.state;
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <div>
          <MCheckbox value={isReadOnly} onChange={this.onCheckboxChange}>只读</MCheckbox>
          <MCheckbox onChange={this.onChangeEmpty}>空数据</MCheckbox>
        </div>
        <MShare
          onClose={this.onClose}
          permissionId={'doc_s01'}
          permissionType={123}
          id={'122'}
          sourceType={1}
          module={'basicserver'}

          store={mshareListStore}
          getTemplate={this.getTemplate}
          {...dialogProps}

          dialogProps={this.dialogProps}
          readOnly={isReadOnly}
        // cacheAuthCondition={false}
        >
          <MButton className={`${prefixCls}-title`} onClick={this.showAuth} type="primary">查看详情</MButton>
        </MShare>
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 手势菜单设置

调整单条数据手势菜单配置(data.swipeActionProps 可用于设置单条数据的手势菜单，也可以通过 listProps 中的 getSwipeActionProps 进行复写)

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData, MShareOperatesType } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
}
class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,
      fetchGetData: this.fetchGetData,
      // 自定义配置 operates
      operates: [
        {
          text: 'ces1',
          index: 1,
          key: 'ces1',
          visible: true,
          outer: false,  // outer = true 为左，否则为右
        },
        {
          text: 'ces2',
          index: 2,
          key: 'ces2',
          visible: true,
          outer: true,  // outer = true 为左，否则为右
          bgColor: '#ddd'
        }
      ],
      // 配置单行 operates 操作
      operatesPermission: [
        [{ 'visible': true }, { 'visible': false }],
        [{ 'visible': false }, { 'visible': true }],
        [{ 'visible': true }, { 'visible': true }],
        [{ 'visible': false }, { 'visible': false }],
      ],
    })
  }

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "默认共享",
      "download": "可下载",
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}/含下级/含兼职人员`,
      "level": "1-100",
      // swipeActionProps: {
      //   right: [{
      //     key: 'ces',
      //     text: 'ces',
      //     style: { backgroundColor: '#108ee9', color: 'white', minWidth: '80px' }
      //   }]
      // }
    }));
    let template: any = {
      default: {
        theme: 'col1_row3',
        dataKeys: ['type', 'objType', 'obj_id', 'seclevel', 'download'],
      },
    }
    template = {
      'col1_row4': [
        {
          key: 'col1',
          configs: [
            {
              key: 'col1_row1',
              configs: [
                { key: 'obj_id' },
              ],
            },
            {
              key: 'col1_row2',
              configs: [
                { key: 'level' },
              ],
            },
            {
              key: 'col1_row3',
              configs: [
                { key: 'download' },
              ],
            },
            {
              key: 'col1_row4',
              configs: [
                { key: 'seclevel' },
              ],
            },
          ],
        },
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  /** 复写单条数据左右滑动手势菜单配置 */
  getSwipeActionProps = (rowData: MListData, rowIndex: number, swipeProps?: object) => {
    if (rowData.id === "id_1") {
      return {
        withSwipeAction: false
      };
    } else if (rowData.id === `id_5`) {
      const newOptions: AnyObj = swipeProps || {};
      newOptions.right = [...newOptions?.right,
      {
        key: 'ces3',
        text: 'ces3',
        visible: true,
        outer: false,  // outer = true 为左，否则为右
        style: { backgroundColor: '#ff4d4f', color: '#fff', minWidth: '80px' }
      }]
      return {
        options: newOptions
      }
    }
    return {
      options: swipeProps
    }
    // return { withSwipeAction: false };
  }

  onOperateClick = (item: MShareOperatesType, data: MListData) => {
    console.error('operateClick', item, data)
  }

  render() {
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <MShare
          onClose={this.onClose}
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}

          onOperateClick={this.onOperateClick}

          store={mshareListStore}

          {...dialogProps}
          listProps={{
            getSwipeActionProps: this.getSwipeActionProps
          }}
        >
          <MButton className={`${prefixCls}-title`} onClick={this.showAuth} type="primary">查看详情</MButton>
        </MShare>
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 配置单行数据是否可选

配置单行数据是否可选

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData, MShareOperatesType } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
}
class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,
      fetchGetData: this.fetchGetData,
      // 配置单行是否可选中
      checkBoxPermission: [
        { visible: false },
        { visible: false },
        { visible: false },
        { visible: true },
        { visible: true },
      ]
    })
  }

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "默认共享",
      "download": "可下载",
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}/含下级/含兼职人员`,
      "level": "1-100",
      // swipeActionProps: {
      //   right: [{
      //     key: 'ces',
      //     text: 'ces',
      //     style: { backgroundColor: '#108ee9', color: 'white', minWidth: '80px' }
      //   }]
      // }
    }));
    let template: any = {
      default: {
        theme: 'col1_row3',
        dataKeys: ['type', 'objType', 'obj_id', 'seclevel', 'download'],
      },
    }
    template = {
      'col1_row4': [
        {
          key: 'col1',
          configs: [
            {
              key: 'col1_row1',
              configs: [
                { key: 'obj_id' },
              ],
            },
            {
              key: 'col1_row2',
              configs: [
                { key: 'level' },
              ],
            },
            {
              key: 'col1_row3',
              configs: [
                { key: 'download' },
              ],
            },
            {
              key: 'col1_row4',
              configs: [
                { key: 'seclevel' },
              ],
            },
          ],
        },
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  /** 复写单条数据左右滑动手势菜单配置 */
  getSwipeActionProps = (rowData: MListData, rowIndex: number, swipeProps?: object) => {
    if (rowData.id === "id_1") {
      return {
        withSwipeAction: false
      };
    } else if (rowData.id === `id_5`) {
      const newOptions: AnyObj = swipeProps || {};
      newOptions.right = [...newOptions?.right,
      {
        key: 'ces3',
        text: 'ces3',
        visible: true,
        outer: false,  // outer = true 为左，否则为右
        style: { backgroundColor: '#ff4d4f', color: '#fff', minWidth: '80px' }
      }]
      return {
        options: newOptions
      }
    }
    return {
      options: swipeProps
    }
    // return { withSwipeAction: false };
  }

  onOperateClick = (item: MShareOperatesType, data: MListData) => {
    console.log('operateClick', item, data)
  }

  render() {
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <MShare
          onClose={this.onClose}
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}

          onOperateClick={this.onOperateClick}

          store={mshareListStore}

          {...dialogProps}
          listProps={{
            getSwipeActionProps: this.getSwipeActionProps
          }}
        >
          <MButton className={`${prefixCls}-title`} onClick={this.showAuth} type="primary">查看详情</MButton>
        </MShare>
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 直接使用 list

直接使用 list

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

const { MShareList } = MShare;

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
}

class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,
      fetchGetData: this.fetchGetData,
    })
  }

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "type": "ces",
      "objType": "部门",
      "seclevel": "默认共享",
      "download": "可下载",
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}/含下级/含兼职人员`,
      "level": "1-100",
    }));
    let template: any = {
      default: {
        theme: 'col1_row3',
        dataKeys: ['type', 'objType', 'obj_id', 'seclevel', 'download'],
      },
    }
    template = {
      'col1_row4': [
        {
          key: 'col1',
          configs: [
            {
              key: 'col1_row1',
              configs: [
                { key: 'obj_id' },
              ],
            },
            {
              key: 'col1_row2',
              configs: [
                { key: 'level' },
              ],
            },
            {
              key: 'col1_row3',
              configs: [
                { key: 'download' },
              ],
            },
            {
              key: 'col1_row4',
              configs: [
                { key: 'seclevel' },
              ],
            },
          ],
        },
      ]
    }
    // const template = {
    //   default: [
    //     {
    //       key: 'col1',
    //       configs: [
    //         {
    //           key: 'col1_row1',
    //           render: (data: any) => {
    //             if (data) {
    //               const {
    //                 content, name, title, customFields
    //               } = data;
    //               let context: ReactNode = `${ content || name || title || '' } `;
    //               const fields = customFields || [];
    //               context = fields.reduce((pContext: any, item: any) => `${ pContext }${ getText(item) } `, context) || context;
    //               return <span dangerouslySetInnerHTML={{ __html: context as string }} />;
    //             }
    //             return '';
    //           }
    //         }
    //       ]
    //     }
    //   ]
    // };

    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
    console.log('visible', visible)
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  render() {
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <MShareList
          onClose={this.onClose}
          permissionId={'doc_s01'}
          id={'122'}
          module={'performance'}

          store={mshareListStore}

        // {...dialogProps}
        />
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 启用搜索

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

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData, MRadio, MCheckbox } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
  isReadOnly?: boolean;
  isEmpty?: boolean;
}
class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  state = {
    isReadOnly: false,
    isEmpty: false
  }
  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      showSearch: true, // 启用搜索功能
      sortable: true,  // 拖拽排序功能
      sortableType: 'icon',
      fetchGetData: this.fetchGetData,
      fetchSortData: this.fetchSortData,
      tableType: 'CHECKBOX',
      // showSearch: true,
    })
  }

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

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data: any = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "permissionType": 1,
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetId": "0",
      "level": "0 - 255",
      "_entityType": "all",
      "icon": "Icon-all02",
      "hq": false,
      "targetType": 11,
      "type": false,
      "download": true,
      "obj_id_span": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetSubBordinateInclude": false,
      "extra": false,
      "objIdList": [
        `用户_${(options.data?.current - 1) * 10 + i + 1}`,
        `含下级`,
        `含兼职人员`,
      ],
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "objTypeSpan": "人员",
      "objType": "source",
      "seclevel": {
        "min": 0,
        "max": 255
      }
    }));

    let template: any = {
      "col1_row2": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
          ],
          "key": "col1"
        }
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    if (this.state.isEmpty) {
      datas.data = []
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
    console.log('visible', visible)
  }
  getTemplate = (template: any) => {
    return {
      "col1_row3": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
            {
              "configs": [
                {
                  "key": "download",
                  render: (data: any) => {
                    if (data.download) {
                      return '可下载';
                    } else {
                      return '不可下载'
                    }
                  }
                }
              ],
              "key": "col1_row3"
            },
          ],
          "key": "col1"
        }
      ]
    }
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  onCheckboxChange = (value: any) => {
    this.setState({ isReadOnly: value })
  }

  onChangeEmpty = (value: any) => {
    this.setState({ isEmpty: value });
  }

  render() {
    const { isReadOnly } = this.state;
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <div>
          <MCheckbox value={isReadOnly} onChange={this.onCheckboxChange}>只读</MCheckbox>
          <MCheckbox  onChange={this.onChangeEmpty}>空数据</MCheckbox>
        </div>
        <MShare
          onClose={this.onClose}
          permissionId={'doc_s01'}
          permissionType={123}
          id={'122'}
          sourceType={1}
          module={'performance'}

          store={mshareListStore}
          getTemplate={this.getTemplate}
          {...dialogProps}

          readOnly={isReadOnly}
          // cacheAuthCondition={false}
        >
          <MButton className={`${prefixCls}-title`} onClick={this.showAuth} type="primary">查看详情</MButton>
        </MShare>
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 表单确定拦截事件

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

```jsx
import { Component, ReactNode } from 'react';
import { constants, MShare, MButton, utils, AnyObj, MListData, MRadio, MCheckbox, MDialog } from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
  isReadOnly?: boolean;
  isEmpty?: boolean;
}
class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  state = {
    isReadOnly: false,
    isEmpty: false
  }
  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {
      }
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {
      }
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {
      }
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,  // 拖拽排序功能
      sortableType: 'icon',
      fetchGetData: this.fetchGetData,
      fetchSortData: this.fetchSortData,
      tableType: 'CHECKBOX'
    })
  }

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

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data: any = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "permissionType": 1,
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetId": "0",
      "level": "0 - 255",
      "_entityType": "all",
      "icon": "Icon-all02",
      "hq": false,
      "targetType": 11,
      "type": false,
      "download": true,
      "obj_id_span": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetSubBordinateInclude": false,
      "extra": false,
      "objIdList": [
        `用户_${(options.data?.current - 1) * 10 + i + 1}`,
        `含下级`,
        `含兼职人员`,
      ],
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "objTypeSpan": "人员",
      "objType": "source",
      "seclevel": {
        "min": 0,
        "max": 255
      }
    }));

    let template: any = {
      "col1_row2": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
          ],
          "key": "col1"
        }
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    if (this.state.isEmpty) {
      datas.data = []
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
    console.log('visible', visible)
  }
  getTemplate = (template: any) => {
    return {
      "col1_row3": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
            {
              "configs": [
                {
                  "key": "download",
                  render: (data: any) => {
                    if (data.download) {
                      return '可下载';
                    } else {
                      return '不可下载'
                    }
                  }
                }
              ],
              "key": "col1_row3"
            },
          ],
          "key": "col1"
        }
      ]
    }
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  onCheckboxChange = (value: any) => {
    this.setState({ isReadOnly: value })
  }

  onChangeEmpty = (value: any) => {
    this.setState({ isEmpty: value });
  }

  onBeforeSure = (params: {
    formDatas: any;
    authType: string;
    onClose: () => void;
  }) => {
    return new Promise<boolean>((resolve, reject) => {
      console.error(params.formDatas, params.authType)
      MDialog.prompt({
        title: '信息确认',
        message: '当前考勤规则未启用【按人员排班】，按指定人员范围排班的维护者将不生效，确定要启用【按人员排班】并添加吗？',
        prompt: false,
        onOk: () => {
          resolve(true);
        },
        onClose: () => {
          // 如果需要关闭表单，就调用 onClose
          params.onClose();
          resolve(false);
        }
      })
    })
  }

  render() {
    const { isReadOnly } = this.state;
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <div>
          <MCheckbox value={isReadOnly} onChange={this.onCheckboxChange}>只读</MCheckbox>
          <MCheckbox onChange={this.onChangeEmpty}>空数据</MCheckbox>
        </div>
        <MShare
          onClose={this.onClose}
          permissionId={'doc_s01'}
          permissionType={123}
          id={'122'}
          sourceType={1}
          module={'performance'}

          store={mshareListStore}
          getTemplate={this.getTemplate}
          {...dialogProps}

          readOnly={isReadOnly}
          onBeforeSure={this.onBeforeSure}
        >
          <MButton className={`${prefixCls}-title`} onClick={this.showAuth} type="primary">查看详情</MButton>
        </MShare>
      </div >
    );
  }
}

export default withRouter(MShareDemo);
```

### 自定义批量操作

```jsx
import { Component, ReactNode } from 'react';
import {
  constants,
  MShare,
  MButton,
  utils,
  AnyObj,
  MListData,
  MRadio,
  MCheckbox,
  ShareBtnOptionsType
} from '@weapp/ui';
import { RequestOptionConfig } from '@weapp/utils';
import MStore from './store';
import { RouteComponentProps, withRouter } from 'react-router-dom';

const mstore = new MStore();
const mshareListStore = mstore.mshareList
const { formatParentPath } = utils;

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

interface MShareDemoProps extends RouteComponentProps {

}

interface MShareDemoState {
  isReadOnly?: boolean;
  isEmpty?: boolean;
}

class MShareDemo extends Component<MShareDemoProps, MShareDemoState> {

  state = {
    isReadOnly: false,
    isEmpty: false
  }

  componentDidMount() {
    this.initListView();
  }

  // 初始化接口配置
  initListView = () => {
    const { init } = mshareListStore
    // 列表数据接口
    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/{module}/component/data/permission/form/detail",
      method: "POST",
      params: {}
    }
    // 编辑接口（用于保存编辑后数据）
    const editConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/edit",
      method: "POST",
      params: {}
    }
    // 排序接口（用于保存排序后数据）
    const sortConfig: RequestOptionConfig = {
      url: "/api/app/{module}/component/data/permission/form/sort",
      method: "POST",
      params: {}
    }
    init({
      listConfig,
      deleteConfig,
      addConfig,
      detailConfig,
      editConfig,
      sortConfig,
      sortable: true,  // 拖拽排序功能
      sortableType: 'icon',
      fetchGetData: this.fetchGetData,
      fetchSortData: this.fetchSortData,
      tableType: 'CHECKBOX',
      // showSearch: true,
    })
  }

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

  fetchGetData = (options: RequestOptionConfig, params?: AnyObj): any => {
    console.log('options', options)
    let data: any = ('0,'.repeat(9).split(',')).map((v, i) => ({
      avatar: "{\"name\":\"A吕益\",\"url\":null}",
      "permissionType": 1,
      "obj_id": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetId": "0",
      "level": "0 - 255",
      "_entityType": "all",
      "icon": "Icon-all02",
      "hq": false,
      "targetType": 11,
      "type": false,
      "download": true,
      "obj_id_span": `用户_${(options.data?.current - 1) * 10 + i + 1}`,
      "targetSubBordinateInclude": false,
      "extra": false,
      "objIdList": [
        `用户_${(options.data?.current - 1) * 10 + i + 1}`,
        `含下级`,
        `含兼职人员`,
      ],
      "id": `id_${(options.data?.current - 1) * 10 + i + 1}`,
      "objTypeSpan": "人员",
      "objType": "source",
      "seclevel": {
        "min": 0,
        "max": 255
      }
    }));

    let template: any = {
      "col1_row2": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
          ],
          "key": "col1"
        }
      ]
    }
    let datas = {
      data,
      template,

      current: options.data.current,
      pageSize: 10,
      total: 50
    }
    if (this.state.isEmpty) {
      datas.data = []
    }
    return {
      status: true,
      data: datas,
      code: 200,
      // msg: 'success'
    }
  }

  onClose = (visible: boolean) => {
    console.log('visible', visible)
  }
  getTemplate = (template: any) => {
    return {
      "col1_row3": [
        {
          "configs": [
            {
              "configs": [
                {
                  "key": "obj_id"
                }
              ],
              "key": "col1_row1"
            },
            {
              "configs": [
                {
                  "key": "level"
                }
              ],
              "key": "col1_row2"
            },
            {
              "configs": [
                {
                  "key": "download",
                  render: (data: any) => {
                    if (data.download) {
                      return '可下载';
                    } else {
                      return '不可下载'
                    }
                  }
                }
              ],
              "key": "col1_row3"
            },
          ],
          "key": "col1"
        }
      ]
    }
  }
  showAuth = () => {
    const parentPath = formatParentPath(this.props as any);
    this.props.history.push(`${parentPath}/route`);
  }

  onCheckboxChange = (value: any) => {
    this.setState({ isReadOnly: value })
  }

  onChangeEmpty = (value: any) => {
    this.setState({ isEmpty: value });
  }
  dialogProps = {
    title: '共享'
  }

  batchOperators: ShareBtnOptionsType[] = [{
    id: 'custom',
    title: '自定义批量操作',
    icon: 'pass',
    isBatchOperator: true,
    onClick: (option, callback) => {
      console.error('custom', option)

      callback?.();
    }
  }]

  render() {
    const { isReadOnly } = this.state;
    const parentPath = formatParentPath(this.props as any);
    const dialogProps = {
      path: `${parentPath}/route`,
    }
    return (
      <div className={prefixCls}>
        <div>
          <MCheckbox
           
            value={isReadOnly}
            onChange={this.onCheckboxChange}
          >
            只读
          </MCheckbox>
          <MCheckbox onChange={this.onChangeEmpty}>空数据</MCheckbox>
        </div>
        <MShare
         
          onClose={this.onClose}
          permissionId={'doc_s01'}
          permissionType={123}
          id={'122'}
          sourceType={1}
          module={'performance'}

          store={mshareListStore}
          getTemplate={this.getTemplate}
          {...dialogProps}

          dialogProps={this.dialogProps}
          readOnly={isReadOnly}
          btnOptions={this.batchOperators}
          // cacheAuthCondition={false}
        >
          <MButton
           
            className={`${prefixCls}-title`}
            onClick={this.showAuth}
            type="primary"
          >
            查看详情
          </MButton>
        </MShare>
      </div>
    );
  }
}

export default withRouter(MShareDemo);
```

## 使用须知

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

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

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| store | 列表实例 | ShareListStore | F | - |
| id | 当前权限数据对应文件 id | string | T | - |
| sourceType | 资源文件类型 | number | F | 1 |
| permissionId | 当前权限数据对应后端模块标识 | string | T | - |
| permissionType | 权限类型(比如，文档的，可读，可写，流程的删除，干预) | string | F | - |
| dialogProps | share Dialog 组件 API 配置集合 | FormRenderProps | F | - |
| listProps | 已选数据 list 配置 | MListProps | F | - |
| authDialogProps | auth Dialog 组件 API 配置集合 | FormRenderProps | F | - |
| onSelect | 行选中事件 | (selectedkeys: string[], selectedRows: any[], changeRow: any) => any | 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 | `id` |
| init | 初始化 store 配置 | (allDatas: Partial) => void | T |  |
| setState | 更新设置列表内数据（外部更新 store 内数据请使用此方法，不建议直接赋值操作） | (params?: any) => void | F |  |
| condition | auth form 配置（推荐使用 authConfig 接口返回配置信息） | FormInitAllDatas | F | - |
| listConfig | 列表数据接口配置 | RequestOptionConfig | F | - |
| deleteConfig | 删除接口配置 | RequestOptionConfig | F | - |
| addConfig | 添加接口配置 （添加相关） | RequestOptionConfig | F | - |
| authConfig | 权限接口配置（添加相关） | RequestOptionConfig | F | - |
| editConfig | 编辑接口配置 （编辑相关） | RequestOptionConfig | F | - |
| detailConfig | 详情接口配置（编辑相关） | RequestOptionConfig | F | - |
| sortConfig | 排序接口配置（排序相关） | RequestOptionConfig | F | - |
| sortable | 是否开启拖拽排序 | boolean | F | false |
| sortableType | 拖拽类型 | 'row' \| 'icon' | F | `icon` |
| addVisible | 是否显示添加按钮 | boolean | F | true |
| deleteVisible | 是否显示批量删除按钮 | boolean | F | true |
| topVisible | 是否显示批量置顶按钮 | boolean | F | true |
| template | 已选列表显示配置 | any | F | - |
| operates | swipe 配置 （兼容 pc 配置，outer = true 为左，否则为右） | OperatesType[] | F | 参考下面的数据格式中的内容（默认配置了 编辑和删除） |
| showOperates | 是否显示操作列 | boolean | F | true |
| tableType | 单选、多选配置 | `NONE`: 不可选择,`CHECKBOX`: 多选,`RADIO`: 单选 | F | `NONE` |
## module 参数

```
 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"; // 会议共享
```

## 数据格式

```
{
  status: true,
  code: 200,
  msg: 'success',
  data: {
    // list 模版
    template: {
      default: {
        theme: 'col1_row3',
        dataKeys: ['type', 'objType', 'obj_id', 'seclevel', 'download'],
      },
    },
    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,
      style: { backgroundColor: '#108ee9', color: 'white', minWidth: '80px' }
    }, {
      text: getLabel('21778', '删除'),
      index: 2,
      id: 'delete',
      key: 'delete',
      visible: true,
      outer: false,
      style: { backgroundColor: '#F4333C', color: 'white', minWidth: '80px' }
    }],
    // 分页配置
    count: 500,  // 数据总数
    current: 1,  // 当前页码
    pageSize: 10,  // 每页展示数量
    // 选择配置
    tableType: 'NONE',  // check 类型 'NONE': 不可选择，'RADIO': 单选, 'CHECKBOX': 多选
  }
```

## swipeAction 设置说明

### 关于默认值

组件内部内置 编辑 与 删除 操作：

```
operates: [{
      text: getLabel('31479', '编辑'),
      index: 1,
      id: 'edit',
      key: 'edit',
      visible: true,
      outer: false,
      style: { backgroundColor: '#108ee9', color: 'white', minWidth: '80px' }
    }, {
      text: getLabel('21778', '删除'),
      index: 2,
      id: 'delete',
      key: 'delete',
      visible: true,
      outer: false,
      style: { backgroundColor: '#F4333C', color: 'white', minWidth: '80px' }
    }],
```

### 关于优先级

`` 优先级最高，其次是通过 ``，最后是设置的 ``。

### 关于行操作配置

1. 可以直接在数据中设置：`data.swipeActionProps`。
2. 可以通过 `listProps.getSwipeActionProps` 设置每一行显示内容（详情见 demo：手势菜单设置）。
3. 可以通过 `operatesPermission` 与 `operates` 配合使用来达到限制单行操作菜单的目的（`operates` 用于设置整体操作菜单配置，`operatesPermission` 用于设置每行操作显示控制）。
