1.0.1-rc.3.503 • Published yesterday

ddy-process-h5

Licence

ISC

Version

1.0.1-rc.3.503

Deps

Size

5.0 MB

Vulns

Weekly

Install scriptsThis package runs scripts during installation (preinstall/install/postinstall)

Summary Dependency Versions

ddy-process-h5

App 端流程、附件上传、附件列表、送审插件

bladex 新流程用法

第1步：安装新流程插件：npm install ddy-process-h5 -D

第2步：修改接口请求的文件，比如request.js，获取bladex的token

// 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步：引入组件，对于发起和审批流程，应该也和以前一致，只需要替换包名即可

<template>
    <TopProcess
        :processInstId="formData.processInstId"
        :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"
    >
        <!-- :isDocument="true" -->
        <!-- :isAdditional="true" -->
        <!-- :getVars="getVars" -->
        <template #default>
            <div>
                <!-- 操作按钮 -->
                <button @click="onSubmit" class="btns-common cmf-btn">提交</button>
                <TopSumbitPopup :visible.sync="actionVisible" ref="actionPop" :request="request" :businessSubjectId="formData.subjectId" :businessDeptId="formData.deptId"
                appId="com.awspaas.user.apps.leave" :id="processBusinessKey" :businessType="businessType" :isSelectFirst="false"
                :todoParameter="todoParameter" :title="title" :resubmit="resubmit" :extraParams="{...formData, ...vars, businessDeptId: formData.deptId}"
                :beforeFunction="saveFn" :manual="true" @successFn="back"></TopSumbitPopup>
            </div>
        </template>
        <template #attch>attch</template>
        <template #fsList>fsList</template>
        <template #documentPage>documentPage</template>
        <!-- <template #completeSlot>completeSlot</template> -->
        <template v-slot:btn="data">
            <div>123{{ data.data.status }}</div>
        </template>
    </TopProcess>
</template>
<script>
import { TopProcess, TopSumbitPopup } from "@/packages/index.js";
import request from "@/assets/js/request";
import { defineComponent } from "vue-demi";
import { setToken, setSubject, setProject } from "@/assets/js/auth";
// import departPerson from "@/packages/checked-pick-app";
// import { TopProcess } from "ddy-process-h5";
export default {
    data() {
        return {
            // http://localhost:1027/#/pages/apply/ask-for-leave/process?token=536d5915-762c-4689-81b6-78c6291799b3&subjectId=9f13a9c9c400fa6e6228848ce1f131ee&bizId=70364f045d17457f8145841da5d4a63c
            actionVisible: false,
            businessType: '9',
            processBusinessKey: '',
            todoParameter: {},
            title: '请假申请',
            // 是否重新提交
            resubmit: false,
            vars: {
                title: '陈松松' + '发起了日常请假，请你审批',
                name: '请假申请',
                businessType: '9',
                deptId: '',
            },
            formData: {
                deptId: '',
                businessKey: "74efb9a48dc176806e1185b8ce9845e8",
                processInstId: "bladex-ad12dd3e-7757-11f0-97a7-000c291b8d5e",
                processDefId: "obj_5402fe691cad48b3ae39da0699d53be1",
                title: "测试",
                subjectId: "3a4ef115e32c85a78239e3f5f76b9637",
                tel: "15107910151",
                userId: "8c7d012761a680dff78b19e10e794c99",
                userName: "刘博文",
                uid: "3712fea770669effdf95ac56c6f1f846",
            },
            appId: "com.awspaas.user.apps.recevie.document",
            isView: false,
            info: {},
            bizId: "",
            style: {
                color: "#333",
                disableColor: "#F7F6F6",
            },
            param: {
                realStartTime: "",
                realEndTime: "",
                estimateHours: 0,
                estimateMinutes: 0,
            },
            realDays: "",
            timeLoading: false,
            processIDS: "",
            request: request,
            // 选人组件
            visible: false,
            entity: {
                source: "0",
                type: "5",
                request: this.request, //'http://59.53.91.231:2100' 0002
                businessId: "0003",
                codeType: [1, 2, 3], // 可选类型 1-主体 2-部门 3-人员
                multiple: true, // 是否多选
            },
            tapList: [
                {
                    label: "附件",
                    key: "attch",
                    type: "slot",
                    sort: 2,
                    slot: "attch",
                },
                {
                    label: "分送记录",
                    key: "fsList",
                    type: "slot",
                    slot: "fsList",
                },
                {
                    label: "正文",
                    key: "documentPage",
                    type: "slot",
                    sort: 3,
                    slot: "documentPage",
                },
            ],
            restartData: {
                businessType: "4",
                title: "测试送审",
                showType: "all",
                processName: "",
            },
            selfBtn: [
                {
                    name: "测试",
                    type: "danger",
                    click: () => {
                    },
                },
                {
                    name: "测试2",
                    type: "default",
                    click: () => {
                    },
                },
            ],
            userData: false,
        };
    },
    components: {
        TopSumbitPopup,
        /* topProcess, */
        TopProcess,
        // departPerson,
    },
    onLoad(e) {
        this.bizId = e.bizId;
        this.getInfo();

        this.processIDS = e.processId;
    },
    mounted() {
        setToken("37538643-c934-4563-946f-d6dbc7f13388");
        // 7369abf4-e2b4-44d0-87b2-7c46a444d3b5
        // da6bab4f-fa42-4730-b0fe-c5e022123c0c
        setSubject("9f13a9c9c400fa6e6228848ce1f131ee");
        /*  setProject("4b23dd7dcb9cf7cb548fbd087ce9d748"); */

        console.log(this.request, 'res')
        this.entity.request = this.request

    },
    methods: {
        // 回调
        handleCallback(data) {
            console.log(data, 'data')
        },
        // 发起流程
        onSubmit() {
            this.actionVisible = true
        },
        // 保存
        saveFn() {
            // this.processBusinessKey = data.businessKey
            // this.title = data.title
            // this.businessType = data.businessType
            this.$nextTick(() => {
                this.$refs.actionPop.handleSongshen()
            })
        },

    // 流程完成后 回调
    back() {
        console.log('back')
    },
        // 发起流程
        getVars() {
            return true;
        },
        endFunction(val) {
            /*  location.reload(); */
        },
        async beforeFunction() {
            let res = await this.request.get("/auth/user/current/info");
            if (res.code === 200) {
                return true
            } else {
                return false
            }

            // return false
        },
    },
};
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100vw;
    height: 100vh;
}
.info-box {
    background-color: #fff;
    padding: 10px;
    .info {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        margin-bottom: 10px;
        b {
            font-weight: 400;
            color: #959595;
        }
    }
    .time-info {
        background-color: #f6f6f6;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
        div {
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            i {
                color: #000;
                font-style: normal;
                font-weight: bold;
            }
            em {
                font-style: normal;
                font-size: 12px;
                color: #4e87d4;
            }
        }
    }
}
::v-deep .uni-date-x--border {
    border: none;
}
em {
    font-style: normal;
    font-size: 12px;
    color: #4e87d4;
}
.ren-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 18px;
}
</style>

安装

vue2.7 以上版本安装指令
npm i ddy-process-h5 -D

vue2.7 以下版本安装指令
npm i @vue/composition-api -D
npm i ddy-process-h5 -D

使用

在需要使用的组件内引入

import {
    TopProcess,
    attchViews,
    TopSumbitPopup,
    ViewAttchList,
} from "ddy-process-h5";
export default {
    components: { TopProcess, attchViews, TopSumbitPopup, ViewAttchList },
};

<template>
    <TopProcess
        :processInstId="processInstId"
        :processDefId="processDefId"
        :formData="formData"
        :isView="isView"
        :userId="userId"
        :request="request"
        :tapList="tapList"
        :selfTapList="selfTapList"
        :endFunction="endFunction"
        :isDocument="isDocument"
    >
        <slot></slot>
    </TopProcess>
    <attchViews
        v-if="labels == '1'"
        :limit="limit ? limit : -1"
        :requires="requires"
        :request="param.request"
        :linkUrl="param.linkUrl"
        @getValue="getValues"
    />
    <ViewAttchList :inList="inList"></ViewAttchList>
    <TopSumbitPopup
        :visible="visible"
        :request="request"
        :appId="appId"
        :resubmit="resubmit"
        :id="businessKey"
        :businessType="businessType"
        :todoParameter="todoParameter"
        :title="title"
        @successFn="successFn"
        :beforeFunction="beforeFunction"
    ></TopSumbitPopup>
</template>
<script>
    import "ddy-process-h5/style.css";
    import {
        TopProcess,
        attchViews,
        TopSumbitPopup,
        ViewAttchList,
    } from "ddy-process-h5";
    export default {
        components: { TopProcess, attchViews, TopSumbitPopup, ViewAttchList },
        data() {
            return {
                formData: {
                    businessKey: businessKey,
                    processInstId: processInstId,
                    processDefId: processDefId,
                    title: title,
                    subjectId: subjectId,
                    userId: userId,
                    userName: userName,
                    reason: reason,
                    meetingTheme: meetingTheme,
                },
                selfBtn: [
                    {
                        name: "测试",
                        type: "danger",
                        click: () => {
                            console.log("当前::");
                        },
                    },
                    {
                        name: "测试2",
                        type: "default",
                        click: () => {
                            console.log("当前::");
                        },
                    },
                ],
            };
        },
        methods: {
            endFunction() {
                console.log("endFunction");
            },
            beforeFunction() {
                console.log("beforeFunction");
            },
        },
    };
</script>

属性-Attributes (TopProcess)

参数	类型	默认值	说明
tapList	Array	[]	tab 节点插入、自定义附件等信息
selfTapList	Array	[]	自定义 tab 节点,传入后覆盖原本参数
request	Object	null	axios 接口请求方法 [需要包含 get post 请求方式]
processInstId	String	''	流程实例 ID [必填]
formData	Object	{}	集合数据内部存储流程相关信息 businessKey[必填]
isAdditional	boolean	false	自定义按钮开关开启后可使用按钮插槽
getVars	Function	null	业务方法
endFunction	Function	null	弹窗结束后执行方法
beforeFunction	Function	null	弹窗开启前执行方法
restartData	Object	null	重新提交参数
isDocument	Boolean	false	公文独立配置
selfList	Array	{id,name}	自定义流程列表
selfBtn	Array	{name,type,click}	自定义流程按钮(查看案例 data)
uid	String	""	炎黄 uid 若业务流程不需要催办,撤回,可以不使用该参数
isCheckType	String	"0"	选人类型传入后默认所有选人都为该类型
isMsg	Boolean	false	意见是否展示

属性-Attributes (attchViews)

参数	类型	默认值	说明
request	Object	null	axios 接口请求方法 [需要包含 get post 请求方式]
limit	[String, Number]	4	最大上传数
getValue	Function	null	返回上传数据 url
requires	Boolean	false	必填
inComing	Array	Array	回显已上传列表
deletFn	Function	null	组件本身提供静态删除功能,动态删除需传入相应方法

属性-Attributes (ViewAttchList)

参数	类型	默认值	说明
inList	Array	[]	附件列表展示

属性-Attributes (TopSumbitPopup)

参数	类型	默认值	说明
visible	Boolean	false	展示参数
title	String	""	送审提交标题参数
todoParameter	Object	{}	发起流程时的其他参数
businessType	[String, Number]	null	业务类型
id	String	""	业务 Id
resubmit	Boolean	false	是否为重新提交
request	Object	null	axios 接口请求方法 [需要包含 get post 请求方式]
appId	String	''	appId
beforeFunction	Function	null	提交前执行事件
successFn	Function	null	成功后回调
manual	Boolean	false	手动执行启动(ref 绑定后执行 handleSongshen())
selfList	Array	{id,name}	自定义流程列表
isCheckType	String	"0"	选人类型 uid

tapList-对象说明

属性名	类型	说明
label	String	选项卡 title
key	String	选项卡 ID 请勿重复 defaultTabList 内已拥有的默认 key(a、b、c 为默认节点 key)
type	String	插槽类型默认 default 插槽 slot
slot	String	插槽名
sort	Number	排序参数,无参数默认插入末尾

selfTapList-对象说明同上

formData-对象说明

属性名	类型	说明
businessKey	String	业务 ID [必填]
title reason meetingTheme	String	标题
uid	String	角色 id

附件相关列表,参考 getValue 回调参数

restartData-对象说明

属性名	类型	说明
businessType	String	业务类型
showType	String	流程类型(all,pc,app)
processName	String	流程查询字段