Git Product home page Git Product logo

workflow-vue3's Introduction

workflow钉钉审批流程设置-vue3版本

workflow钉钉审批流程设置,基于vue开发。QQ交流群①:639251756 QQ交流群②:790780565 在这里插入图片描述


项目介绍

  • UI钉钉风格
  • 技术点
  1. 组件自调用+递归处理,按树状结局处理审批流程问题
  • 主要功能点
  1. 界面缩放 在这里插入图片描述
<div class="zoom">
	<div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
    <span>{{nowVal}}%</span>
    <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
</div>
  1. 节点设置(包括审批人、发起人、抄送人、条件设置) 在这里插入图片描述
<el-drawer title="审批人设置" :visible.sync="approverDrawer" class="set_promoter" :show-close="false" :size="550" :before-close="saveApprover"> 
    <div class="demo-drawer__content">
        <div class="drawer_content">
            <div class="approver_content">
                <el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
                    <el-radio v-for="({value, label}) in setTypes" :key="value" :label="value">{{label}}</el-radio>
                </el-radio-group>
                ...
  1. 节点新增 在这里插入图片描述
<div class="add-node-btn">
    <el-popover placement="right-start" v-model="visible">
          <div class="add-node-popover-body">
              <a class="add-node-popover-item approver" @click="addType(1)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>审批人</p>
              </a>
              <a class="add-node-popover-item notifier" @click="addType(2)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>抄送人</p>
              </a>
              <a class="add-node-popover-item condition" @click="addType(4)">
                  <div class="item-wrapper">
                      <span class="iconfont"></span>
                  </div>
                  <p>条件分支</p>
              </a>
          </div>
          ...

5.错误校验 在这里插入图片描述

let {type,error,nodeName,conditionNodes} = childNode
if (type == 1 || type == 2) {
    if (error) {
        this.tipList.push({ name: nodeName, type: ["","审核人","抄送人"][type] })
    }
    this.reErr(childNode)
} else if (type == 3) {
    this.reErr(childNode)
} else if (type == 4) {
    this.reErr(childNode)
    for (var i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
            this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" })
        }
        this.reErr(conditionNodes[i])
    }
}

6.模糊搜索匹配人员、职位、角色

<input type="text" placeholder="搜索成员" v-model="searchVal" @input="getDebounceData($event,activeName)">
<input type="text" placeholder="搜索角色" v-model="searchVal" @input="getDebounceData($event,2)">
<input type="text" placeholder="请选择具体人员/角色/部门" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole">

项目安装

git clone https://github.com/StavinLi/Workflow-Vue3.git 点个赞吧!

项目运行 node14.20.1

1.环境依赖 npm i

2.本地运行 npm run dev

3.打包运行 npm run build

workflow-vue3's People

Contributors

flytkgl avatar stavinli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

workflow-vue3's Issues

几点建议

我有一个工作流后端,目前前端是基于https://github.com/SNFocus/approvalFlow 这个魔改的,看到了您的项目,非常激动.非常契合我最初的设想.

我的设想是把自己做的工作流引擎开源(在activiti的基础上改造,流程支持或签,会签,加签,去重,回退,打回重新提交等功能),目前基于approval flow体验不太好的地方:希望贵框架能考虑
1.vue 版和element剥离,便于和其它框架集成(比如antdesign).我的目标是做一个基础的开源版,用户可以基于此做oa,wms等需要审批流的系统(这样只能适用于新的公司,或者老公司项目重写).另一个目标是可以根据企业现有的oa,wms系统进行定制,将审批流嵌入到企业已有的oa系统里,帮助企业实现信息化,这部分二开是盈利点,因此,要适配企业现有的前端框架.
2.像上面的approvalflow,集成表单组件.实践中,除了部分流程有着非常复杂的流转业务和表单外,很大一部分流程只使用到了简单的表单,有了自定义表单以后简单的流程就不需要开发了,让运营人员自己配置即可,节省中小企业成本.同时简化操作,让一些业务不是很复杂的,没有开发人员的小公司也可以使用.自定义拖拽表单当然最好也是能不和特定框架绑定.我在github发现了这一个https://github.com/xaboy/form-create
望能在有精力的情况下考虑以上实现.自定义表单也可以做为您在贵司提升自己目标的一个点

关于vue3+ant开源共建

我正在使用这个项目,用于业务开发,并改为 ant Design Vue 组件库,如果您需要,我可以提供代码

只改变了 ui库,逻辑保持一致

或者您同意的话我将发布到自己的仓库,并标明来源

提几点建议

hello,大概过了下代码,这边提出下建议:
1.整个树节点不是平铺树,是带嵌套形式(是否能支持普通tree实现)
2.整体的ts类型稍微欠缺些。
3.部分vue文件功能太集中(如:渲染wrapper,如果节点类型太多会不会不易于理解,是否可以使用动态组件+hooks进行分离。)

另外发现了个小bug: 分支节点的名称会随着删除项更新(不知道算bug不)。
最后个人仿了个类钉钉的,
微信截图_20230328112334

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.