@antu-toolkit/netoffice

v0.0.2

Published

2 months ago

工作流组件库

Downloads

0High
0Medium
0Low

chenyuanyu

workflow netoffice vue2 element-ui

@antu-toolkit/netoffice

工作流组件库，基于 Vue 2.7 + Element UI 开发，提供完整的业务办理流程弹窗功能。

功能特性

📋 表单资源管理 - 支持制式表单、自定义组件、外部链接
📎 附件管理 - 支持附件上传、下载、预览、删除
🔄 流程办理 - 支持提交、回退、流转记录查看
👥 用户选择 - 支持单流向/多流向提交，岗位内提交
🔐 权限控制 - 细粒度的操作权限控制

安装

NPM 安装

npm install @antu-toolkit/netoffice
# 或
yarn add @antu-toolkit/netoffice
# 或
pnpm add @antu-toolkit/netoffice

依赖要求

引用 netovue.css、netovue.umd.js
引用 jQuery
依赖

{
    "vue": "^2.7.16",
    "element-ui": "^2.15.14"
}

使用方式

方式一：完整引入（推荐）

import Vue from 'vue'
import ElementUI from 'element-ui'
import NetOffice from '@antu-toolkit/netoffice'
import '@antu-toolkit/netoffice/lib/netoffice.css'

Vue.use(ElementUI)
Vue.use(NetOffice)

方式二：按需引入

import {WorkflowDialog} from '@antu-toolkit/netoffice'
import '@antu-toolkit/netoffice/lib/netoffice.css'

export default {
    components: {
        WorkflowDialog
    }
}

方式三：浏览器直接引入

<!DOCTYPE html>
<html>
<head>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 netovue.css -->
    <link rel="stylesheet" href="./netoffice/netovue.css">
    <!-- 引入组件库样式 -->
    <link rel="stylesheet" href="./lib/netoffice.css">
</head>
<body>
    <div id="app">
        <workflow-dialog
                :visible.sync="visible"
                :iid="iid"
                :wid="wid"
                :wiid="wiid"
        />
    </div>

    <!-- 引入 Vue -->
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <!-- 引入 Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://unpkg.com/jquery/dist/jquery.js"></script>
    <!-- 引入 netovue.umd.js -->
    <script src="./netoffice/netovue.umd.js"></script>
    <!-- 引入组件库 -->
    <script src="./lib/netoffice.umd.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                visible: true,
                iid: 'your-iid',
                wid: 'your-wid',
                wiid: 'your-wiid'
            }
        })
    </script>
</body>
</html>

组件 API

WorkflowDialog 工作流弹窗

工作流办理的核心组件，集成表单资源、附件管理、流程办理等功能。

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | |------------|---------|---------|-----|--------|----| | visible | 是否显示弹窗 | Boolean | — | false | 是 | | title | 弹窗标题 | String | — | "业务办理" | 否 | | iid | 流程实例ID | String | — | — | 是 | | wid | 工作流定义ID | String | — | — | 是 | | wiid | 工作项实例ID | String | — | '' | 否 | | stepCtrlId | 步骤控制ID | String | — | '' | 否 |

Events

| 事件名 | 说明 | 回调参数 | |---------------|---------------|----------------------------------------| | before-submit | 提交前触发，可用于表单校验 | (iid, wiid, params, {resolve, reject}) | | after-submit | 提交后触发 | (iid, wiid, params) | | close | 弹窗关闭时触发 | — |

方法

通过 ref 可以调用组件内部方法：


<template>
    <workflow-dialog ref="workflowRef" .../>
</template>

<script>
    export default {
        methods: {
            // 保存当前打开的资源
            handleSave() {
                this.$refs.workflowRef.saveOpenedResourceData()
            }
        }
    }
</script>

使用示例

基础用法


<template>
    <div>
        <el-button @click="openDialog">打开工作流</el-button>

        <workflow-dialog
            :visible.sync="dialogVisible"
            :iid="instanceId"
            :wid="workflowId"
            :wiid="workItemId"
            title="业务办理"
            @before-submit="handleBeforeSubmit"
            @after-submit="handleAfterSubmit"
            @close="handleClose"
        />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                instanceId: 'xxx',
                workflowId: 'xxx',
                workItemId: 'xxx'
            }
        },
        methods: {
            openDialog() {
                this.dialogVisible = true
            },
            handleBeforeSubmit(iid, wiid, params, {resolve, reject}) {
                // 执行表单校验
                const valid = this.validateForm()
                if (valid) {
                    resolve() // 继续提交
                } else {
                    reject() // 阻止提交
                }
            },
            handleAfterSubmit(iid, wiid, params) {
                // 提交成功后的回调
                this.$message.success('提交成功')
            },
            handleClose() {
                console.log('弹窗已关闭')
            },
            validateForm() {
                // 自定义校验逻辑
                return true
            }
        }
    }
</script>

环境变量配置

组件库依赖以下环境变量：

| 变量名 | 说明 | 示例 | |----------------------------------|-----------------|----------------------------| | VUE_APP_BASE_API | 接口基础路径 | ./ | | VUE_APP_FILE_GATEWAY_KEY | 文件网关业务类型 | default | | VUE_APP_FILE_GATEWAY_ZONE_CODE | 文件网关区域代码 | zone | | VUE_APP_FastDFS | FastDFS 文件服务器地址 | http://file.example.com/ |

注意事项

必须引入 Element UI：组件库基于 Element UI 开发，使用前需确保已正确引入
Cookie 依赖：组件内部通过 token 和 userId Cookie 进行身份认证
样式覆盖：组件使用 /deep/ 深度选择器，如需自定义样式请注意优先级
表单组件约定：
- 制式表单组件需实现 submitData(callback, isSave) 方法
- 自定义组件需实现 saveData(callback) 方法
- Iframe 页面通过 postMessage 接收 saveData 命令

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@antu-toolkit/netoffice

功能特性

安装

NPM 安装

依赖要求

使用方式

方式一：完整引入（推荐）

方式二：按需引入

方式三：浏览器直接引入

组件 API

WorkflowDialog 工作流弹窗

Attributes

Events

方法

使用示例

基础用法

环境变量配置

注意事项

更新日志

0.0.1

License