api.js

import { request } from '@fesjs/fes';
import { ref, isRef } from 'vue';
import { FMessage } from '@fesjs/fes-design';const postApiWithBizUrl = {// 查询产品productQuery: '/product/query',// 添加/修改产品productOperate: '/product/operate',// 查询审批链approvalQuery: '/approval/query',// 查询文章articleQuery: '/article/query',// 删除文章articleDelete: '/article/delete',// 撤回文章withdraw: '/article/withdraw',// 添加/修改文章articleOperate: '/article/operate',// 查询权限umQuery: '/um/query',// 发布publish: '/publish',// 提交审批approvalCommit: '/approval/commit',// 下架offshelve: '/offshelve',// 添加标签tagInsert: '/tag/insert',// 取消发布unpublish: '/unpublish',// 查询单组标签tagQuery: '/tag/query',// 配置临期提醒articleConfigremind: '/article/configremind',// 删除临期提醒articleDeleteremind: '/article/deleteremind',
};const getApiMap = {// 下载文件fileDownload: '/file/download',// 下载产品信息管理模板jrxxProductInfoTmplDownload: '/article/query/jrxx_pi/productinfo/download',
};const postApiMap = {// 查询产品信息queryJrxxProductInfo: '/article/query/jrxx_pi/productinfo',// 查询复核记录 核查页面补上/check前缀  /check/querycheckQuery: '/query',// 导航菜单查询单独使用查询待核查数据checkQueryVerified: '/check/query',// 查询变更记录-产品信息配置queryJrxxProductInfoHistory: '/article/operate/jrxx_pi/productinfo/history',// 更新产品信息配置operateJrxxProductInfo: '/article/operate/jrxx_pi/productinfo',// 核查操作 核查页面补上/check前缀  /check/operatecheckOperate: '/operate',
};const BASE_URL = process.env.FES_APP_BASE_URL;
console.log('process.env', process.env);
console.log('BASE_URL', BASE_URL);
let getUrlPrefix = () => '';
const middleWare = (apiMap, method = 'post', withBizUrl) => {const API = {};Object.entries(apiMap).forEach(([fnName, url]) => {API[fnName] = (params, { bizUrl, urlPrefix, ...options } = {}) => {urlPrefix = urlPrefix || getUrlPrefix() || '';const fullUrl = urlPrefix + url;return request(withBizUrl && bizUrl ? `${fullUrl}/${isRef(bizUrl) ? bizUrl.value : bizUrl}` : fullUrl, params, {mergeRequest: true,method,...options,}).catch((err) => {if (err?.data?.msg) FMessage.error(err?.data?.msg);return Promise.reject(err);});};});return API;
};
export const setUrlPrefix = (prefix) => {getUrlPrefix = () => prefix;
};export const API = { ...middleWare(postApiMap), ...middleWare(postApiWithBizUrl, 'post', true), ...middleWare(getApiMap, 'get') };const hooksMiddlerWare = (apiObj, settings) => {let outBizUrl;let urlPrefix = '';if (typeof settings === 'string') {outBizUrl = settings;} else {outBizUrl = settings?.bizUrl;urlPrefix = settings?.urlPrefix ?? urlPrefix;}const hooks = {};Object.entries(apiObj).forEach(([hookName, apiFn]) => {hooks[hookName] = (bizUrl = outBizUrl) => {const loading = ref(false);const requestFn = (params, options) => {loading.value = true;return apiFn(params, { bizUrl, ...options, urlPrefix }).then((res) => {loading.value = false;return Promise.resolve(res);}).catch((err) => {loading.value = false;return Promise.reject(err);});};return [loading, requestFn];};});return hooks;
};export const ApiHooks = hooksMiddlerWare(API);
export const useApiHooks = (bizUrl) => hooksMiddlerWare(API, bizUrl);

页面使用

<script setup>
import { useApiHooks } from '@/services/api';const ApiHooks = useApiHooks({ bizUrl, urlPrefix: route?.query?.mode === 'verify' ? '/check' : '' });
const [articleQueryLoading, articleQuery] = ApiHooks.articleQuery();
// 控制页面loadingconst loading = computed(() =>[articleQueryLoading,publishLoading,approvalCommitLoading,deleteLoading,withdrawLoading,offshelveLoading,fileDownloadLoading,unpublishLoading,].some((i) => Boolean(i?.value)),);
</script>