It is recommended to adopt a nail like approval process setting – workflow for this issue

Install and run

Installation

gitClone https://github.com/StavinLi/Workflow.git 

Run

1Environment dependenciesnpmi
2, run"hljs-but_in">npmrun server locally
3Package and runnpmrun build

Project Introduction

• UI DingTalk Style
• Technical point: Component self calling+recursive processing, handling approval process issues according to tree like endings
• Interface scaling

< div class="zoom">
<< span class="hljs-name">div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></ span></< span class="hljs-name">div></ span>
<< span class="hljs-name">span></ span>{{nowVal}}%</< span class="hljs-name">span></ span>
<< span class="hljs-name">div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></ span></< span class="hljs-name">div></ span>
</< span class="hljs-name">div></ span>

• Node settings (including approver, initiator, cc, condition settings)

<< Span class="hljs name">el drawertitle="Approver Settings": visible. sync="ApproverDrawer"direction="rtl"class</span an>="set_demotor"size="550px": before close"saveApprover">
<< span class="hljs-name">div class="demo-drawer__content"></ span>
<< span class="hljs-name">div class="drawer_content"></ span>
<< span class="hljs-name">div class="approver_content"></ span>
<< span class="hljs-name">el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType"></ span>
<< span class="hljs-name">el-radio :label="1"></ Span>Specify Member</< span class="hljs-name">el-radio></ span>
<< span class="hljs-name">el-radio :label="2"></ Supervisor</< span class="hljs-name">el-radio></ span>
<< span class="hljs-name">el-radio :label="4"></ Span>Initiator's Choice</< span class="hljs-name">el-radio></ span>
<< span class="hljs-name">el-radio :label="5"></ The initiator himself/herself</< span class="hljs-name">el-radio></ span>
<< span class="hljs-name">el-radio :label="7"></ Span>Continuous multi-level supervisor</< span class="hljs-name">el-radio></ span>
</< span class="hljs-name">el-radio-group></ span>
...

• Node addition

< div class="add-node-btn">
<< span class="hljs-name">el-popover placement="right-start" v-model="visible"></ span>
<< span class="hljs-name">div class="add-node-popover-body"></ span>
<< span class="hljs-name">a class="add-node-popover-item approver" @click="addType(1)"></ span>
<< span class="hljs-name">div class="item-wrapper"></ span>
<< span class="hljs-name">span class="iconfont"></ span></< span class="hljs-name">span></ span>
</< span class="hljs-name">div></ span>
<< span class="hljs-name">p></ Span>Approver</< span class="hljs-name">p></ span>
</< span class="hljs-name">a></ span>
<< span class="hljs-name">a class="add-node-popover-item notifier" @click="addType(2)"></ span>
<< span class="hljs-name">div class="item-wrapper"></ span>
<< span class="hljs-name">span class="iconfont"></ span></< span class="hljs-name">span></ span>
</< span class="hljs-name">div></ span>
<< span class="hljs-name">p></ CC recipient/< span class="hljs-name">p></ span>
</< span class="hljs-name">a></ span>
<< span class="hljs-name">a class="add-node-popover-item condition" @click="addType(4)"></ span>
<< span class="hljs-name">div class="item-wrapper"></ span>
<< span class="hljs-name">span class="iconfont"></ span></< span class="hljs-name">span></ span>
</< span class="hljs-name">div></ span>
<< span class="hljs-name">p></ Span>Conditional Branch</< span class="hljs-name">p></ span>
</< span class="hljs-name">a></ span>
</< span class="hljs-name">div></ span>
...

• Error verification

let {type,error,nodeName,conditionNodes} = childNode
if (type == 1 || type == 2) {
if (error) {
this. tipList. push ({name: nodeName,type: ["","Reviewer","CC recipient"[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]. odeName,type:"condition"})
}
this.reErr(conditionNodes[i])
}
}

• Fuzzy search matches personnel, positions, roles

<< Span class="hljs-built_in">inputtype="text"placeholder="search member"v-model="searchVal"@input="getDebounceData ($event, activeName)">>;
<< Span class="hljs-built_in">inputtype="text"placeholder="search role"v-model="searchVal"@input="getDebounceData ($event, 2)";
<< Span class="hljs-built_in">inputtype="text"placeholder="Please select specific personnel/roles/departments"v -if="conditionConfig. nodeUserList. length==0"@ click="addCondition Role">

—END—

Open source license: MIT