@x-edu/platform-resource-selector

使用

import React, { useState } from 'react'
import { Button, Table } from 'fish'
import { PlatformResourceSelector } from '@x-edu/platform-resource-selector'
import { uc } from '@/util/auth/func'
import authConfig from '@/config/env'

const config = {
  uc, //uc实例
  sdpAppId: authConfig.app.appid, //sdp-app-id
  env: authConfig.env, // 环境变量
  preview: true,
  width: 800,
  height: 900,
  limit: 1
}

export default function Demo() {
  const [selection, setSelection] = useState([])
  const [visible, setVisible] = useState(false)

  const handleClick = () => {
    setVisible(true)
  }

  const handleComplete = (_selection) => {
    console.info('[DEV]选中的资源为', _selection)
    setSelection(_selection)
    setVisible(false)
  }

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

  const handleDelete = (item) => {
    alert(`delete ${item.name}`)
  }

  return (
    <div>
      <Button
        type="primary"
        // eslint-disable-next-line
        style={{ marginRight: 8 }}
        onClick={handleClick}
      >
        从共享资源库选择
      </Button>
      <span>
        允许添加
        {config.limit}
        {' '}
        个资源
      </span>
      {
        selection.length > 0 && (
          <Table
            indexKey="id"
            style={{
              marginTop: 8
            }}
            minHeight={140}
            columns={[{
              title: '资源名称',
              dataIndex: 'title',
              key: 'title',
              width: 120
            }, {
              title: '资源类型',
              dataIndex: 'content_type',
              key: 'content_type',
              width: 120
            }, {
              title: '资源来源',
              dataIndex: 'source_type',
              key: 'source_type',
              width: 120
            }, {
              title: '操作',
              width: 120,
              key: 'action',
              render: (row) => (
                <>
                  <Button type="text">预览</Button>
                  <Button type="text" onClick={() => handleDelete(row)}>删除</Button>
                </>
              )
            }]}
            dataSource={selection}
            showIndex
            pagination={false}
          />
        )
      }
      <PlatformResourceSelector
        config={config}
        visible={visible}
        onComplete={handleComplete}
        onCancel={handleCancel}
      />
    </div>
  )
}

API

属性	说明	类型	默认值
config	配置	configVo	-
visible	是否显示	Boolean	-
onComplete	确认选择	()=> selectionInfo[]	-
onCancel	取消	Function	-
selection	选中的资源	selectionInfo[]	-

onComplete(selectionInfo[])

https://zxxedu.yuque.com/xv0o5a/dxkbyq/pbbrpga7mvnmx9ng?singleDoc# 《区域后台资源选择器》 密码：eg5s

configVo

{
  uc, //uc实例
  sdpAppId: authConfig.app.appid, //sdp-app-id
  sdpOrgId:'',
  env: authConfig.env, // 环境变量
  preview: true,
  width: 800,
  height: 900,
  limit: 1
}

selectionInfo

const selectionInfo = {
    editInfo: {
      name: string,
      id: string,
      libraryId: string,
      platform: string,
      contentType: string,
      cover: string
    },
    selectInfo: {
      name: string,
      id: string,
      libraryId: string,
      platformHost: string,
      platformZoneCode: string,
      contentType: string,
      cover: string,
      platformId: string // 区域平台id
    }
  }

开发

安装依赖

npm install @x-edu/platform-resource-selector -S

开发调试

npm run dev:doc

本地构建

npm run build