workflow釘釘審批流程設置
workflow釘釘審批流程設置,基於vue開發
- 線上開源地址 https://github.com/StavinLi/Workflow github點個星吧!
- 預覽地址 http://stavinli.gitee.io/workflow/#/approval/setting
項目介紹
- 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.錯誤校驗
if (this.nodeConfig.type == 1) {
this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
} else if (this.nodeConfig.type == 2) {
this.nodeConfig.error = !this.copyerStr(this.nodeConfig)
} else if (this.nodeConfig.type == 4) {
for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "請設置條件" && i != this.nodeConfig.conditionNodes.length - 1
}
}
6.模糊搜索匹配人員、職位、角色
<input type="text" placeholder="搜索成員" v-model="copyerSearchName" @input="getDebounceData($event,activeName)">
<input type="text" placeholder="搜索角色" v-model="approverRoleSearchName" @input="getDebounceData($event,2)">
<input type="text" placeholder="請選擇具體人員/角色/部門" v-if="conditionConfig.nodeUserList.length == 0" @click="addConditionRole">
項目安裝
git clone https://github.com/StavinLi/Workflow.git 點個贊吧!
項目運行
1.環境依賴
npm i
2.本地運行npm run serve
3.打包運行npm run build
歷史記錄
- 6.10 新增碼雲預覽地址