563 lines
33 KiB
Plaintext
563 lines
33 KiB
Plaintext
@{
|
|
ViewBag.Title = "审批流程";
|
|
Layout = "~/Views/Shared/_MainLayout.cshtml";
|
|
}
|
|
|
|
@section CSS{
|
|
<link href="~/Statics/libs/selectize/css/selectize.custom.css" rel="stylesheet" />
|
|
<link href="~/Statics/libs/selectize/css/accountOpeningProcess.css" rel="stylesheet" />
|
|
<style>
|
|
.no-skin {
|
|
position: initial !important;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
@section JS{
|
|
<script src="~/Statics/libs/selectize/js/selectize.min.js?v=@(HtmlUtil.JsVersion)"></script>
|
|
<script type="text/javascript">
|
|
var selectItems = @Json.Serialize(System.Web.Mvc.Html.EnumHelper.GetSelectList(typeof (RuleEnum)));
|
|
</script>
|
|
<script src="~/Scripts/app/system/Approvalprocess.js"></script>
|
|
}
|
|
|
|
<div id="app" class="yc-panel">
|
|
|
|
<div>
|
|
流程类型:
|
|
<select v-model="selected" v-on:change="changeType">
|
|
<option v-for="option in options" v-bind:value="option.value">
|
|
{{ option.text }}
|
|
</option>
|
|
</select>
|
|
@if (CurUser.系统管理.审批流程)
|
|
{
|
|
@*<button class="btn btn-primary" id="add" v-on:click="addProcess">新增步骤</button>
|
|
<button class="btn btn-primary" id="delete" v-on:click="delProcess">删除步骤</button>*@
|
|
<button class="btn btn-primary" id="ok" v-on:click="ok" style="margin-left:10px;">确定</button>
|
|
}
|
|
</div>
|
|
<div v-show="isOpen">
|
|
<div style="margin: 10px auto">客户开户流程</div>
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="end-node">
|
|
<div class="end-node-text">
|
|
申请人
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-model="openItems">
|
|
<template v-for="(item,index) in openItems">
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-show="item.node==0&&item.parentNode==0">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<!--第一个节点为分支 分支开始-->
|
|
<div v-show="item.node==1&&item.approvalCondition!=0">
|
|
<div class="branch-wrap">
|
|
<div class="branch-box-wrap">
|
|
<div class="branch-box">
|
|
<span class="add-branch" title="添加条件">添加条件</span>
|
|
<div class="col-box" v-for="child in openFilterBranch">
|
|
<div class="condition-node">
|
|
<div class="condition-node-box">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width: 282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">分支{{child.node}}条件</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>申请人</span>
|
|
<select v-model="child.approvalCondition" style="width:75px;height:20px;">
|
|
<option value="1">属于</option>
|
|
<option value="2">不属于</option>
|
|
</select>
|
|
<select v-model="child.approvalGroupId" style="width:143px;height:20px;">
|
|
<option v-for="option in grouplist" v-bind:value="option.id">
|
|
{{option.groupName}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-for="childSecond in openFilterChild(child.node)">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<div class="top-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="bottom-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="top-right-cover-line" v-if="child.node!=1"></div>
|
|
<div class="bottom-right-cover-line" v-if="child.node!=1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点为分支 分支结束-->
|
|
</template>
|
|
</template>
|
|
<!-- 流程结束 -->
|
|
<div class="end-node">
|
|
<div class="end-node-circle"></div>
|
|
<div class="end-node-text">
|
|
结束流程
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="isClient">
|
|
<div style="margin: 10px auto">客户信息修改流程</div>
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="end-node">
|
|
<div class="end-node-text">
|
|
申请人
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-model="clientItems">
|
|
<template v-for="(item,index) in clientItems">
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-show="item.node==0&&item.parentNode==0">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<!--第一个节点为分支 分支开始-->
|
|
<div v-show="item.node==1&&item.approvalCondition!=0">
|
|
<div class="branch-wrap">
|
|
<div class="branch-box-wrap">
|
|
<div class="branch-box">
|
|
<span class="add-branch" title="添加条件">添加条件</span>
|
|
<div class="col-box" v-for="child in clientFilterBranch">
|
|
<div class="condition-node">
|
|
<div class="condition-node-box">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width: 282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">分支{{child.node}}条件</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>申请人</span>
|
|
<select v-model="child.approvalCondition" style="width:75px;height:20px;">
|
|
<option value="1">属于</option>
|
|
<option value="2">不属于</option>
|
|
</select>
|
|
<select v-model="child.approvalGroupId" style="width:143px;height:20px;">
|
|
<option v-for="option in grouplist" v-bind:value="option.id">
|
|
{{option.groupName}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-for="childSecond in clientFilterChild(child.node)">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<div class="top-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="bottom-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="top-right-cover-line" v-if="child.node!=1"></div>
|
|
<div class="bottom-right-cover-line" v-if="child.node!=1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点为分支 分支结束-->
|
|
</template>
|
|
</template>
|
|
<!-- 流程结束 -->
|
|
<div class="end-node">
|
|
<div class="end-node-circle"></div>
|
|
<div class="end-node-text">
|
|
结束流程
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-show="isTrade">
|
|
<div style="margin: 10px auto">交易流程</div>
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="end-node">
|
|
<div class="end-node-text">
|
|
申请人
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-model="tradeItems">
|
|
<template v-for="(item,index) in tradeItems">
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-show="item.node==0&&item.parentNode==0">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<span>审批规则</span>
|
|
<input :id="'ruleType'+item.Index+item.node" v-model="item.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<!--第一个节点为分支 分支开始-->
|
|
<div v-show="item.node==1&&item.approvalCondition!=0">
|
|
<div class="branch-wrap">
|
|
<div class="branch-box-wrap">
|
|
<div class="branch-box">
|
|
<span class="add-branch" title="添加条件">添加条件</span>
|
|
<div class="col-box" v-for="child in filterBranch">
|
|
<div class="condition-node">
|
|
<div class="condition-node-box">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width: 282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">分支{{child.node}}条件</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>申请人</span>
|
|
<select v-model="child.approvalCondition" style="width:75px;height:20px;">
|
|
<option value="1">属于</option>
|
|
<option value="2">不属于</option>
|
|
</select>
|
|
<select v-model="child.approvalGroupId" style="width:143px;height:20px;">
|
|
<option v-for="option in grouplist" v-bind:value="option.id">
|
|
{{option.groupName}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(item.Index,true,child.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 开始-->
|
|
<div v-for="childSecond in filterChild(child.node)">
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node " style="width:282px;">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(childSecond)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="childSecond.SelectValue" style="width:200px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<span>审批规则</span>
|
|
<input :id="'ruleType'+childSecond.Index+childSecond.node" v-model="childSecond.ApprovalRules" type="text" name="selectRule" data-placeholder="" style="width: 200px; height: 20px" multiple="" />
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="addProcess(childSecond.Index,true,childSecond.node,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点非分支 结束-->
|
|
<div class="top-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="bottom-left-cover-line" v-if="child.node==1"></div>
|
|
<div class="top-right-cover-line" v-if="child.node!=1"></div>
|
|
<div class="bottom-right-cover-line" v-if="child.node!=1"></div>
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--第一个节点为分支 分支结束-->
|
|
</template>
|
|
</template>
|
|
<!-- 流程结束 -->
|
|
<div class="end-node">
|
|
<div class="end-node-circle"></div>
|
|
<div class="end-node-text">
|
|
结束流程
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="isCredit">
|
|
<div style="margin: 10px auto">资信与授信流程</div>
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="end-node">
|
|
<div class="end-node-text">
|
|
申请人
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-model="creditItems">
|
|
<template v-for="(item,index) in creditItems">
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node ">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:143px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 朝下剪头 -->
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<!-- 流程结束 -->
|
|
<div class="end-node">
|
|
<div class="end-node-circle"></div>
|
|
<div class="end-node-text">
|
|
结束流程
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="isOutCash">
|
|
<div style="margin: 10px auto">出金</div>
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="end-node">
|
|
<div class="end-node-text">
|
|
申请人
|
|
</div>
|
|
</div>
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(0,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-model="outCashItems">
|
|
<template v-for="(item,index) in outCashItems">
|
|
<div>
|
|
<div class="node-wrap">
|
|
<div class="node-wrap-box start-node ">
|
|
<div class="title" style="background: rgb(255, 148, 62);">
|
|
<span class="userEdit">审核节点</span>
|
|
<i class="glyphicon glyphicon-remove btnRemove" v-on:click="delProcess(item)"></i>
|
|
</div>
|
|
<div>
|
|
<span>审核角色</span>
|
|
<select v-model="item.SelectValue" v-on:change="selectChangeType(item.Index-1,item.SelectValue)" style="width:143px;height:20px;">
|
|
<option v-for="option in roleOptions" v-bind:value="option.Value">
|
|
{{option.Text}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 朝下剪头 -->
|
|
<div class="node-add-btn-box">
|
|
<div class="add-node-btn">
|
|
<button class="addNodeClick" v-on:click="showProcess(item.Index,false,$event)">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<!-- 流程结束 -->
|
|
<div class="end-node">
|
|
<div class="end-node-circle"></div>
|
|
<div class="end-node-text">
|
|
结束流程
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="addtooltip-warpper">
|
|
<div id="addtooltip-box">
|
|
<div v-on:click="tradeAddProcess(1)">
|
|
<div class="item-wrapper">
|
|
<span class="glyphicon glyphicon-user"></span>
|
|
</div>
|
|
<p class="item-user">审批节点</p>
|
|
</div>
|
|
<div v-on:click="tradeAddProcess(2)">
|
|
<div class="item-wrapper">
|
|
<span class="glyphicon glyphicon-transfer"></span>
|
|
</div>
|
|
<p class="item-user">审批分支</p>
|
|
</div>
|
|
</div>
|
|
<!-- 三角指针 -->
|
|
<div id="addtooltip-pointer">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|