关于vue.js:Vue仿钉钉审批流程

workflow 钉钉审批流程设置，基于 vue 开发。QQ 交换群：639251756

线上开源地址 https://github.com/StavinLi/Workflow github 点个星吧！
预览地址 https://stavinli.github.io/Workflow/dist/index.html#/

UI 钉钉格调
技术点
组件自调用 + 递归解决，按树状终局解决审批流程问题
次要性能点

界面缩放

<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>

节点设置（包含审批人、发起人、抄送人、条件设置）

<el-drawer title="审批人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px" :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 :label="1"> 指定成员 </el-radio>
                  <el-radio :label="2"> 主管 </el-radio>
                  <el-radio :label="4"> 发起人自选 </el-radio>
                  <el-radio :label="5"> 发起人本人 </el-radio>
                  <el-radio :label="7"> 间断多级主管 </el-radio>
              </el-radio-group>
              ...

节点新增

<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/W… 点个赞吧！

1. 环境依赖 npm i

2. 本地运行 npm run serve

3. 打包运行 npm run build

关于vue.js:Vue仿钉钉审批流程

workflow 钉钉审批流程设置

预览地址 https://stavinli.github.io/Workflow/dist/index.html#/

我的项目介绍

我的项目装置

我的项目运行