ui-process-h5

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

安装

vue2.7 以上版本安装指令

npm i ui-process-h5 -D

vue2.7 以下版本安装指令

npm i @vue/composition-api -D
npm i ui-process-h5 -D

使用

在需要使用的组件内引入

import {
    TopProcess,
    attchViews,
    TopSumbitPopup,
    ViewAttchList,
} from "ui-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 "ui-process-h5/style.css";
    import {
        TopProcess,
        attchViews,
        TopSumbitPopup,
        ViewAttchList,
    } from "ui-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	流程查询字段