倚天 SDK

安装

npm i -S @baturu/yitian-sdk

接入方法（Vue 2）

import YiTianSDK from '@baturu/yitian-sdk/vue2'
import Vue from 'vue'

Vue.use(YiTianSDK)

<template>
  <yitian-sdk
    :query-type="QueryType.VIN"
    :vin-code="vinCode"
    :login-name="loginName"
    :parts-code="partsCode"
    :added-parts="addedParts"
    :request-token="requestToken"
    :target-url="targetUrl"
    :theme="Theme.RED"
    auto-set-query
    show-header
    show-sidebar
    forbid-history-change
    :view-permissions="{
      [ViewPermissions.NAV]: false,
      [ViewPermissions.NAV_THEME]: true,
      [ViewPermissions.NAV_LOGO]: true,
      [ViewPermissions.NAV_VIN]: true,
      [ViewPermissions.NAV_BRAND]: true,
      [ViewPermissions.NAV_PARTS]: true,
      [ViewPermissions.NAV_DECODE]: true,
      [ViewPermissions.SIDEBAR]: false,
      [ViewPermissions.GROUP_VIN_SEARCHER]: true,
      [ViewPermissions.GROUP_CURRENT_BRAND]: true,
      [ViewPermissions.GROUP_REMAIN_COUNT]: true,
      [ViewPermissions.GROUP_SEARCH_HISTORY]: true,
      [ViewPermissions.DECODE_CAR_TYPE_PICTURE]: true,
      [ViewPermissions.PART_APPLY_VEHICLE_OPERATION]: true,
    }"
    :title-html="titleHtml"
    enter-decode-if-vin-query-failed
    :parts-list-operation="[
      {
        name: '按钮1',
        onClick: onButton1Click,
      },
      {
        name: '按钮2',
        onClick: onButton2Click,
      },
      {
        name: '按钮3',
        onClick: onButton3Click,
      },
    ]"
    @addParts="onAddParts"
    @delParts="onDelParts"
    @outOfLimit="outOfLimit" />
</template>
<script>
import { QueryType, Theme, ViewPermissions } from '@baturu/yitian-sdk';

export default {
  data() {
    return {
      QueryType,
      Theme,
      ViewPermissions,
      vinCode: '',
      loginName: '',
      partsCode: '',
      addedParts: [{ // 示例数据
        vinCode: "DEMO_VIN",
        partsCodes: ["DEMO_OE"]
      }],
      targetUrl: 'https://yitian.qipeipu.com/',
      titleHtml: '<h1 style="margin-bottom: 100px"><span style="color: var(--primary-color)">倚天</span>汽配宝典</h1>',
    };
  },
  methods: {
    async requestToken() {
      // 在这里写请求 token 的逻辑
      await new Promise(resolve => setTimeout(resolve, 3e3));
      return '[返回从接入方后端获取的 token]';
    },
    onAddParts(data) {
      // 用户点击了添加按钮
      console.log(data);
    },
    onDelParts(data) {
      // 用户点击了取消添加按钮
      console.log(data);
    },
    onButton1Click(abc) {
      console.log('按钮1', abc);
    },
    onButton2Click(abc) {
      console.log('按钮2', abc);
    },
    onButton3Click(abc) {
      console.log('按钮3', abc);
    },
    outOfLimit() {
      console.log('次数超过限制');
    },
  }
}
</script>

接入方法（Vue 3）

注：该方案为纯 JS 接入方案，所以也同样适用于 React、Angular 等框架

<template>
  <div class="container">
    <!-- 这里必须要提供一个 iframe 元素，不能是其他元素 -->
    <iframe
      id="ytPlaceholder"
      class="ifr" />
    <button
      class="btn btn-primary btn-lg btn-block"
      @click="changeQuery(QueryType.VIN)">车架号查询</button>
    <button
      class="btn btn-primary btn-lg btn-block"
      @click="changeQuery(QueryType.BRAND)">车型查询</button>
    <button
      class="btn btn-primary btn-lg btn-block"
      @click="changeQuery(QueryType.PARTS)">零件号查询</button>
  </div>
</template>
<style>
.ifr {
  width: 100%;
  height: 600px;
}
</style>
<script lang="ts">
import { defineComponent } from 'vue';
import { createYitian, destroyYitian, Theme, QueryType, yitianStore, DefaultPermissionMap } from '@baturu/yitian-sdk';

export default defineComponent({
  name: 'Yitian',
  mounted() {
    createYitian({
      mountEl: document.querySelector('#ytPlaceholder')!,
      async requestToken() {
        // 在这里写请求 token 的逻辑
        await new Promise(resolve => setTimeout(resolve, 3e3));
        return '[返回从接入方后端获取的 token]';
      },
      queryType: QueryType.VIN,
      theme: Theme.RED,
      loginName: 'loginName',
      vinCode: 'example vincode',
      partsCode: 'example partscode',
      // targetUrl: '',
      addedParts: [{
        vinCode: 'example vincode',
        partsCodes: ['example partscode'],
      }],
      onAddParts(data) {
        console.log('onAddParts', data);
      },
      onDelParts(data) {
        console.log('onDelParts', data);
      },
      onSetQuery(query) {
        console.log('onSetQuery', query);
      },
      onOutOfLimit() {
        console.log('onOutOfLimit');
      },
      forbidHistoryChange: true,
      viewPermissions: DefaultPermissionMap,
      titleHtml: '<h1 style="margin-bottom: 100px"><span style="color: var(--primary-color)">倚天</span>汽配宝典</h1>',
      enterDecodeIfVinQueryFailed: true,
      partsListOperation: [
        {
          name: '按钮1',
          onClick: this.onButton1Click,
        },
        {
          name: '按钮2',
          onClick: this.onButton2Click,
        },
        {
          name: '按钮3',
          onClick: this.onButton3Click,
        },
      ],
      onRestoreRouterHistory() {
        console.log('onRestoreRouterHistory');
      },
    });
  },
  beforeUnmount() {
    // 上面创建了倚天实例之后，这里一定要记得 destroy，避免内存泄漏
    destroyYitian();
  },
  data() {
    return {
      QueryType,
    }
  },
  methods: {
    changeQuery(type: QueryType) {
      yitianStore.queryType = type;
    },
    onButton1Click(abc) {
      console.log('按钮1', abc);
    },
    onButton2Click(abc) {
      console.log('按钮2', abc);
    },
    onButton3Click(abc) {
      console.log('按钮3', abc);
    },
  }
})
</script>

传参

| 名称 | 含义 | 是否必填 | 默认值 | 备注 | |-----------------------------|--------------------------|------|--------------------------|------------------------------------------------------------------------------------------------------------------------------| | queryType | 默认打开的页面 | 否 | QueryType.VIN | QueryType.VIN 车架号查询、QueryType.BRAND 车型查询、QueryType.PARTS 零件号查询、译码师（QueryType.DECODE），更多请见QueryType常量的定义 | | vinCode | 需要查询的vin码 | 否 | '' | 进入倚天时直接查询的VIN码 | | loginName | 登录名 | 否 | '' | 内部保留字段，暂时可不传 | | partsCode | 需要查询的零件号（配件编码） | 否 | '' | 进入倚天时直接查询的零件号 | | addedParts | 已添加的配件列表 | 否 | [] | 系统会判断配件是否已经在列表中，如果已经在列表中，添加按钮的文案将会变成“已添加” | | requestToken | 请求token的函数 | 是 | | 用户请求token的函数，可以返回异步的 Promise，最终结果应是 token 字符串 | | targetUrl | 强制锁定 iframe 访问地址 | 否 | 倚天的线上地址 | 内部保留字段，一般情况下不需考虑 | | autoSetQuery | 是否自动更新上层应用的url | 否 | false | 用于刷新页面时保留之前的查询条件，如VIN码（仅 vue 组件可用） | | forbidHistoryChange | 是否禁止跳页面时新增浏览器历史记录 | 否 | false | 默认倚天内部跳页面时会新增浏览器历史记录，使用此项可以避免浏览器历史记录长度增加 | | theme | 主题颜色 | 否 | Theme.RED | 设置倚天系统的主题颜色，目前有红色和蓝色两种（Theme.BLUE、Theme.RED） | | viewPermissions | 展示权限列表 | 否 | DefaultPermissionMap 枚举值 | 设置有权限展示的视图，详见 DefaultPermissionMap 枚举值的定义，如果对应的权限没有传，将按照 DefaultPermissionMap 中的定义使用默认值 | | titleHtml | 车架号查询/零件号查询系统标题文案 | 否 | undefined | 设置车架号查询/零件号查询页面系统展示的标题文案，支持 html | | enterDecodeIfVinQueryFailed | 倚天 VIN 码查询失败时，是否进入批量译码流程 | 否 | false | 设置倚天查询不到车架号时，是否提醒用户进入批量译码 | | partsListOperation | 自定义配件列表操作栏 | 否 | [] | 设置子组配件列表页面的操作按钮项，需要传入一个对象数组，对象的格式为：{ name: '按钮名称', onClick: (data: PartTableItem) => { /* 回调函数 */ } }，PartTableItem 的数据见下方示例 | | hookUrl | 自定义组件的地址 | 否 | '' | 设置注入自定义组件的地址，如：https://example.com/lib.js |

vue 组件的事件

| 事件名称 | 参数 | 说明 | |------------|------------------------|----------------------------------------------------------------------------------------------------| | addParts | (msg: MessageAddParts) | 在倚天子组配件列表页面点击添加按钮后的回调函数，数据示例见下方的 MessageAddParts | | delParts | (msg: MessageAddParts) | 在倚天子组配件列表页面点击取消添加按钮后的回调函数，数据示例见下方的 MessageAddParts，如果不绑定该事件，那么倚天系统内会显示"已添加"，如果绑定该事件，倚天的系统会显示"取消添加" | | outOfLimit | 无 | 在倚天查询剩余次数为0之后，再查询时触发的回调事件，可以用于自定义超限提示 |

非 vue 组件的事件

| 事件名称 | 参数 | 说明 | |------------------------|------------------------------|-----| | onAddParts | (msg: MessageAddParts) | 在倚天子组配件列表页面点击添加按钮后的回调函数，数据示例见下方的 MessageAddParts | | onDelParts | (msg: MessageAddParts) | 在倚天子组配件列表页面点击取消添加按钮后的回调函数，数据示例见下方的 MessageAddParts，如果不绑定该事件，那么倚天系统内会显示"已添加"，如果绑定该事件，倚天的系统会显示"取消添加" | | onSetQuery | (query: Record<string, any>) | 在倚天内部url查询参数改变时的回调函数，可用于上层应用存储查询参数 | | onRestoreRouterHistory | 无 | 当倚天内部发生路由跳转时的回调函数，可用于上层应用恢复 url | | onOutOfLimit | 无 | 在倚天查询剩余次数为0之后，再查询时触发的回调事件，可以用于自定义超限提示 |

数据示例

PartTableItem:

{
  "btrPartsNames": "标准名称",
  "date": "时间", 
  "partsCode": "配件编码",
  "partsName": "原厂配件名",
  "price": "价格",
  "quantity": "数量",
  "remark": "备注",
  "showPosition": "位置",
  "vinCode": "车架号"
}

MessageAddParts：

{
  "carData": {
    "carTypeIds": [0],
    "carTypeId": "0",
    "showCarType": "DEMO_VIN",
    "vinCode": "DEMO_VIN"
  },
  "partData": {
    "btrPartsName": "前保险杠皮",
    "partsCode": "1234567890"
  }
}