> app端 流程插件
npm install ddy-process-h5npm install ddy-process-h5 -D
js
// request.js
import axios from 'axios';
import errorCode from './errorCode';
import { tansParams } from './top';
import JSONbig from "json-bigint";
import { checkIsAppleDevice ,checkIsHarmonyOS } from './common.js'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
const opts = {
baseURL: '/' + process.env.VUE_APP_BASE_API,
timeout: 999999999,
errorTip: true,
transformResponse: [function (data) {
if (typeof data === 'string') {
try {
data = JSONbig.parse(data);
} catch (e) { console.log(e) }
}
return data;
}]
};
opts.headers = {
'X-Tag': process.env.VUE_APP_TAG
};
const service = axios.create(opts);
// 🆘获取bladex token
const loginByToken = (grant_type = 'top_token', Authorization = 'Basic c2FiZXIzOnNhYmVyM19zZWNyZXQ=') => {
return service({
url: '/bladex/blade-auth/oauth/token',
method: 'post',
headers: {
// 'blade-auth': '',
'Authorization': Authorization,
},
params: {
grant_type: grant_type,
top_token: uni.getStorageSync('token'),
},
});
}
service.interceptors.request.use(
async (config) => {
// const isToken = (config.headers || {}).isToken === false;
// if (getToken() && !isToken) {
// config.headers['Authorization'] = 'Bearer ' + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
// }
let advice = ''
if (checkIsAppleDevice()) {
advice = 3;
} else if (checkIsHarmonyOS()) {
advice = 4;
} else {
advice = 2;
}
/ 请求之前拦截器。可以使用async await 做异步操作 /
let token = uni.getStorageSync('token');
console.log('token',token)
// 🆘bladex token接口，做一下拦截
if (config.url.includes('/blade-auth/oauth/token')) {
return config
}
if (config.url === '/auth/login') {
return config;
}
// 🆘非bladex接口，做一下拦截
// console.log(config.url, 'config', config.url.includes('/bladex/'))
if (!config.url.includes('/bladex/')) {
config.headers['advice'] = advice;
config.headers['Authorization'] = 'Bearer ' + token; // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['subjectId'] = uni.getStorageSync('subjectId')
config.errorTip = config.params?.errorTip != undefined || !config.data?.errorTip ? config.params?.errorTip || config.data?.errorTip : true
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config;
}
// 🆘新流程bladex的接口
const tokenv2 = localStorage.getItem('tokenv2');
// console.log(config.url, tokenv2, 'tokenv2')
config.headers['blade-requested-with'] = 'BladeHttpRequest'
config.headers['Authorization'] = 'Basic c2FiZXIzOnNhYmVyM19zZWNyZXQ='
if (false && tokenv2) {
config.headers['blade-auth'] = 'bearer ' + tokenv2;
} else {
const myToken = await loginByToken();
// console.log(myToken.access_token, 'my')
localStorage.setItem('tokenv2', (myToken || {}).access_token);
config.headers['blade-auth'] = 'bearer ' + myToken.access_token;
}
return config;
},
(error) => {
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
if (Object.prototype.toString.call(response.data) === '[object Blob]') {
return response;
}
const { data, config } = response;
let code;
let success
// 🆘兼容bladex的返回结果，top-ui和bladex项目的返回结构不一致，需要处理
if (response.data.code) {
code = data.code
success = data.success
} else {
code = response.status
success = code == 200 ? true : false
}
const message = response.data.msg || errorCode[code] || errorCode['default'];
// 增加失败判断
data.fail = code !== 200 && success !== true;
if (code === 401) {
uni.showToast({
icon: 'none',
title: '请退出后重新打开'
});
return data;
} else if (code !== 200 && code !== '0' && config.errorTip) {
uni.showToast({
icon: 'none',
title: message
});
return data;
}
return data;
},
(error) => {
let { message, response } = error;
// 🆘bladex错误拦截处理，top-ui和bladex项目的返回结构不一致，需要处理
if (response && response.data && (response.data.message || response.data.msg)) {
message = response.data.message || response.data.msg
} else if (message === 'Network Error') {
message = '后端接口连接异常';
} else if (message.includes('timeout')) {
message = '系统接口请求超时';
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常';
}
uni.showToast({
icon: 'none',
title: message
});
// if (config.errorTip) {
// Message({
// message: message,
// type: 'error',
// duration: 5 * 1000
// });
// }
return Promise.reject(error);
}
);
export default service;
`
第3步：引入组件，对于发起和审批流程，应该也和以前一致，只需要替换包名即可
`vue
:processDefId="formData.processDefId"
:formData="formData"
:appId="appId"
:uid="formData.uid"
:request="request"
:tapList="tapList"
:endFunction="endFunction"
:beforeFunction="beforeFunction"
:restartData="restartData"
:selfBtn="selfBtn"
:isQuickReply="true"
:isMsg="true"
:isView="false"
:isRequire="true"
>
:todoParameter="todoParameter" :title="title" :resubmit="resubmit" :extraParams="{...formData, ...vars, businessDeptId: formData.deptId}"
:beforeFunction="saveFn" :manual="true" @successFn="back">
attch
fsList
documentPage
123{{ data.data.status }}
`
安装
> vue2.7 以上版本安装指令
>
> > `bash
> > npm i ddy-process-h5 -D
> > `
> vue2.7 以下版本安装指令
>
> > `bash
> > npm i @vue/composition-api -D
> > npm i ddy-process-h5 -D
> > `
使用
在需要使用的组件内引入
`js
import {
TopProcess,
attchViews,
TopSumbitPopup,
ViewAttchList,
} from "ddy-process-h5";
export default {
components: { TopProcess, attchViews, TopSumbitPopup, ViewAttchList },
};
`
`html
:processDefId="processDefId"
:formData="formData"
:isView="isView"
:userId="userId"
:request="request"
:tapList="tapList"
:selfTapList="selfTapList"
:endFunction="endFunction"
:isDocument="isDocument"
>
:limit="limit ? limit : -1"
:requires="requires"
:request="param.request"
:linkUrl="param.linkUrl"
@getValue="getValues"
/>
:request="request"
:appId="appId"
:resubmit="resubmit"
:id="businessKey"
:businessType="businessType"
:todoParameter="todoParameter"
:title="title"
@successFn="successFn"
:beforeFunction="beforeFunction"
>
``