主题样式使用

正常情况下组件类名

| 组件 | 类名 | | -------------- | ------------------------------------------------------ | | 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';