web端插件

资料收集web端插件是鳄梨科技提供的【资料收集题目+资料收集结果展示】的服务，此插件需搭配【小程序插件】来使用。

:sparkles: 特性

• 简单易用
• 包含的组件有资料收集题目、资料收集结果展示
• 使用 TypeScript 构建，提供完整的类型定义文件

:package: 安装

// npm
npm i eli-material-collection --save

// yarn
yarn add eli-material-collection

🔨 配置

import { avocadoMaterialCollection } from 'eli-material-collection';

const App: React.FC = () => {
  useEffect(() => {
    avocadoMaterialCollection.init({
      server_url: '', // 接口域名地址
      authorization: '', // 认证token
    });
  }, []);
}

资料收集题目

资料收集题目支持8种题型【图片上传、问答类、单项选择、多项选择、时间类、高校类、填空题、NPS题】。

Example

import { MaterialCollection, useMaterialCollection } from 'eli-material-collection';

const EliMaterialCollection: React.FC = () => {
  const { handleValues, ...params } = useMaterialCollection({
    token: '',
    expireConfig: { // 设置有效期
      switch: 1,
      expireHour: 0,
    },
  });

  const handleOk = () => {
    const { formParams, expireConfig: expireConfigParams } = await handleValues();
    // formParams: 资料收集题目参数
    // expireConfigParams: 有效期参数
  }

  return (
    <MaterialCollection {...params} />
  )
}

export default EliMaterialCollection;

API

| 参数 | 说明 | 类型 | 必传 | 默认值 | | :--- | :--- | :--- | :--- | :--- | | token | - | string | 是 | - | | expireConfig | 有效期设置 | ExpireConfig | 否 | [] |

AiQuestionInstance

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | handleValues | 获取资料收集题目所有字段值 | () => Promise<MaterialCollectionValues> |

ExpireConfig

| 参数 | 说明 | 类型 | | :--- | :--- | :--- | | switch | 有效期开关 | 1 | 2 | | expireHour | 有效期时长 | number |

MaterialCollectionValues

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | formParams | 题目信息 | FormParams | | expireConfig | 有效期参数 | ExpireConfig |

FormParams

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | formUsageToken | - | string | | isRandomOrder | 是否开启题目乱序 | boolean | | hasVideoMonitor | 是否开启视频监控 | boolean | | formItems | 题目信息 | QuestionList[] |

QuestionList

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | formItemToken | - | string | | formTypeId | 题目类型 | number | | formTypeKey | 题目名称 | string | | formOrder | 题目排序 | number | | isNecessary | 是否必填 | boolean | | isScoreOpen | 是否开启评分 | 0 | 1 | | isRelationOpen | 是否开启题目关联 | 0 | 1 | | isRandomOrder | 是否开启选项乱序 | boolean | | isHiddenForCandidate | 题目对候选人是否可见 | boolean | | total | 题目总分数 | number | | relations | 题目关联数据 | Array<{ optionKey: string; children: string[]; }> | | formItemOption | 题目选项配置信息 | FormItemOption | | media | 题目的图片或视频 | QuestionMedia[] |

FormItemOption

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | score | 分值 | string | | maximumNum | 最大上传数量 | number | | allowMultiple | 是否支持多选 | boolean | | alternatives | 单/多选的选项配置 | Array<{ key: string; score: string; value: string; operator: string; }> | | from | NPS题目配置 | { remark: string; score: number; } | | to | NPS题目配置 | { remark: string; score: number; } |

QuestionMedia

| 名称 | 说明 | 类型 | | :--- | :--- | :--- | | type | 媒体类型 | 'image' | 'video' | | url | 图片或视频地址 | string | | coverUrl | 视频预览图 | string |

资料收集结果展示

资料收集结果展示组件可根据面试者的答题情况，展示每道题的答题信息，可修改答案及分数。

Example

import { MaterialResult } from 'eli-material-collection';

const EliMaterialResult: React.FC = () => {
  return (
    <MaterialResult token={''} />
  );
};

export default EliMaterialResult;