metro-os-tools

主题样式使用

正常情况下组件类名

组件	类名
el-button	class="os-button"
el-checkbox	class="os-checkbox"
el-select	class="os-select" popper-class="os-select--popper"
el-time-picker	class="os-date-picker" popper-class="os-time--popper"
el-date-picker	class="os-date-picker" popper-class="os-date--popper"
el-dialog	class="os-dialog"
el-form	class="os-form"
el-input	class="os-input"
el-list	class="os-list"
el-pagination	class="os-pagination os-pagination--primary"
el-radio	class="os-radio os-radio--primary"
el-switch	class="os-switch"
el-table	class="os-table os-table--primary"
el-tabs	class="os-tabs"
el-tag	class="os-tag"
el-tree	class="os-tree"

弹窗情况（dialog）组件类名

组件	类名
el-input	class="os-input os-input--info"
el-pagination	class="os-pagination os-pagination--info"
el-radio	class="os-radio os-radio--info"
el-radio	class="os-radio os-radio--info"
el-select	class="os-select os-select--info" popper-class="os-select--popper"
el-table	class="os-table os-table--info"

项目中接口请求使用

引入metro-os-tools的createAxios方法

• createAxios方法只是对请求头添加了一个token参数，并没有进行其他操作，在创建完createAxios后生成{_axios, signals}两个对象，其中_axios可用来再次封装，包括请求头、响应体的封装，signals是来做请求拦截的，需要配合工具包提供removeAbortSignals方法

项目中使用metro-os-tools的createAxios方法 实例

// axios.ts 文件
'use strict';
import {
  MError, createAxios, removeAbortSignals, clearLocalStorage,
  clearSessionStorage,
} from 'metro-os-tools';

export default function (
  baseURL: string,
  abort: boolean = false,
  obj?: any,
) {

  const { signals, _axios } = createAxios(baseURL, abort, obj);

  _axios.interceptors.response.use(
    function (response) {
      if (response && response.config) {
        abort && removeAbortSignals(response.config, signals);
      }
      if (response.data?.result?.resultCode === '0') {
        return Promise.resolve(response.data);
      } else if (response.data?.result?.resultCode === '3') {
        MError({
          message:
            response.data.result.resultError || 'Token失效，请重新登录！',
        });
        clearSessionStorage('windowStoreTask');
        clearLocalStorage('token');
        return Promise.reject(response.data);
      } else if (response.status === 200) {
        return Promise.resolve(response.data);
      }
      return Promise.reject(response.data);
    },
    function (error) {
      if (error) {
        return Promise.reject('request canceled!');
      }
      const status = error.response?.status;
      if (status) {
        return Promise.reject(error);
      } else {
        return Promise.reject({
          result: { resultCode: '-1', resultError: '请求异常' },
        });
      }
    },
  );
  return { signals, _axios };
};



// api.ts 文件  =========================
import { IResponse } from '@/types/lineType';
import createAxios from '@/utils/axios';

const { _axios } = createAxios('/mos/mos-bizcenter-server/');

// 查看所有文件目录
export const getFolderListApi = async () => {
  return await _axios.get('/folder/list');
};

// 新建文件目录
export const createFolderApi = async (data: createFolderParams) => {
  return await _axios.post('/folder/create', data);
};

// 删除文件夹
export const removeFolderApi = async (folderId: string) => {
  return await _axios.delete(`/folder/${folderId}`);
};

// 获取PA数据
export function vehiclePadataQuery() {
  return _axios({
    method: 'POST',
    url: Url.vehiclePadataQuery,
    data: {}
  })
}

工具包的本地存储方法

工具包封装了localStorage和sessionStorage两种本地数据存储方法，对这两种本地数据做了数据隔离功能，根据存储传入的不同应用code进行隔离

import {
  setLocalStorage,
  getLocalStorage,
  clearLocalStorage,
  setSessionStorage,
  getSessionStorage,
  clearSessionStorage,
} from 'metro-os-tools';