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 | 流程查询字段 |