仿钉钉流程图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>审批设置</title>
<link rel="stylesheet" href="../view/public/element/index.css">
<link rel="stylesheet" href="../view/admin/css/base.css">
<script src="../view/public/vue/vue.min.js"></script>
<script src="../view/public/vue/axios.min.js"></script>
<script src="../view/public/element/index.js"></script>
<script src="../view/admin/js/base.js"></script>
</head>
<style>
#app{background-color: #ffffff;}
body,body * {-webkit-box-sizing: border-box;box-sizing: border-box;}
.color_blue {color: #0089ff;}
.color_9d9 {color: #9d9d9d;}
.fq_node .node_title {background-color: #576a95;}
.sp_node .node_title {background-color: #3296fa;}
.cs_node .node_title {background-color: #E6A23C;}
.color_sp {color: #3296fa;}
.color_tj {color: #576a95;}
.node{margin: 24px;}
#tree,.flow_box {display: inline-flex;flex-direction: column;align-items: center;}
#tree {justify-content: center;min-width: 100%;}
.flow_end_box {width: 100%;}
.flow_end_box .el-button{width: 200px;}
.node_container {position: relative;width: 200px;min-height: 70px;border-radius: 8px;box-shadow: 0 1px 4px 0 rgb(10, 30, 65, .16);display: flex;flex-direction: column;cursor: pointer;background-color: #ffffff;}
.node_title {padding: 10px;position: relative;display: flex; align-items: center;font-size: 14px;color: #ffffff;text-align: left;border-radius: 4px 4px 0 0;cursor: pointer;}
.node_content {align-items: center;display: flex;justify-content: space-between;line-height: 32px;min-height: 32px;color: #111f2c;border-radius: 4px;padding: 16px 10px;}
.node_title_text { margin-left: 6px;font-weight: 600;}
.node_content_text {line-height: 24px;margin-right: 4px;}
.node_content_text,.node_title_text{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
.node_handler_box {position: relative;display: flex;height: 90px;align-items: center;user-select: none;justify-content: center;flex-shrink: 0; flex-grow: 1;padding-bottom: 5px;}
.node_handler_box:before,
.canvas_branch_item:before {height: 100%; bottom: 0;content: ""; position: absolute;top: 0;left: 0; right: 0;bottom: 0;z-index: 0;margin: auto;width: 2px;height:100%;background-color: #dedede;}
.node_handler { position: relative; display: flex; width: 28px;height: 28px;color: #fff; outline: none;background: #0089ff;border-radius: 50%;border: none;cursor: pointer;justify-content: center;align-items: center;}
.canvas_branch_wrapper {width: 100%; display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-inline-flexbox; display: inline-flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical; -webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;margin-top: 16px;}
.canvas_branch_container { position: relative;display: inline-flex;}
.canvas_branch_container:before {position: absolute;height: 100%;width: 5px;background-color: #ffffff;content: "";left: 50%;transform: translate(-50%);}
.node_branch_adder {position: absolute;top: -16px;left: 50%;z-index: 10;cursor: pointer;transform: translateX(-50%);transform-origin: center center;}
.canvas_branch_item {position: relative;display: -webkit-inline-box;display: -webkit-inline-flex; display: -ms-inline-flexbox;display: inline-flex; flex-direction: column;align-items: center;padding: 50px 40px 0;background: transparent;border-top: 2px solid #dedede;border-bottom: 2px solid #dedede;min-width: 280px;}
.m_t_6 { margin-top: 6px;}
.m_t_8 { margin-top: 8px;}
.m_t { margin-top: 12px;}
.m_r_4 { margin-right: 4px;}
.m_l_4 {margin-left: 4px;}
.m_l_6 {margin-left: 6px;}
.m_l_8 {margin-left: 8px;}
.node_wrapper_btn { padding: 10px 6px;border-radius: 4px; display: flex;align-items: center;cursor: pointer;}
.el-popover {padding: 8px;}
.branch_title{justify-content: space-between;}
.branch_top_left,.branch_top_right,.branch_bottom_left,.branch_bottom_right { position: absolute;height: 7px;width: 50%;background-color: #ffffff;content: ""; }
.branch_top_left {top: -5px;left: -1px;}
.branch_bottom_left {bottom: -5px;left: -1px;}
.branch_top_right { top: -5px;right: -1px;}
.branch_bottom_right{right: -1px;bottom: -5px;}
.pop_edit_title{cursor: pointer;display: flex;align-items: center;}
.sp_check .el-tag {height: 36px;line-height: 34px;margin: 0 8px 6px 0;}
.pop_bottom{position: absolute;display: flex;align-items: center;bottom: 0;left: 0;right: 0;background: #fff;padding: 14px;border-top: 1px solid #eee;}
.pop_bottom .el-button{width: 100%;}
.empty_word{height: 15px;}
.node_container:hover .node_toolbar{opacity: 1;}
.node_toolbar{position: absolute;top: -24px;right: 12px;z-index: 2;cursor: pointer;opacity: 0;-webkit-transition: opacity .3s cubic-bezier(.645,.045,.355,1);transition: opacity .3s cubic-bezier(.645,.045,.355,1);}
.node_toolbar_del{margin-left: 2px;padding: 2px 4px;color: #fff;border-radius: 4px;background-color: #3296fa;}
.tj_pop_tip{margin-left: 20px;}
.edit_tj_item{border: 1px solid #eeeeee;border-radius: 2px;margin: 10px 0;}
.edit_tj_item .edit_content{background: #eeeeee;padding: 12px;}
.edit_tj_item .el-form-item {margin-bottom: 10px;}
.edit_tj_item .tj_form{padding: 12px 6px;}
.flex_anto{flex: 1;}
.tj_pop .el-drawer.rtl{overflow: hidden;}
.tj_pop .el-drawer__body{overflow: auto;margin-bottom: 80px;}
.level_select{width: 120px;margin: 0 8px;}
.tj_select_pop .el-dialog__body {padding: 12px 20px;}
.tj_select_pop .el-dialog__header{border-bottom: 1px solid #EEEEEF;}
.tj_select_pop .el-checkbox{margin-bottom: 6px;}
.cavas_node_box,.cavas_box {display: flex;flex-direction: column;align-items: center;}
</style>
<body>
<div id="app">
<!-- 节点渲染 -->
<div class="node">
<!-- 节点列表 -->
<item v-bind:tree='treeData' id='tree'></item>
<!-- 结束节点 -->
<div class="flow_box flow_end_box">
<el-button block>流程结束</el-button>
</div>
</div>
<!-- 发起人 - 弹出层 -->
<el-drawer :visible.sync="start_pop" direction="rtl" size="60%">
<!-- 编辑标题 -->
<template slot="title">
<div class="pop_edit_title">
<i class="el-icon-user-solid color_sp f24"></i>
<p class="m_l_6 f_18" v-if="is_edit == false" @click="edit_pop_title">
<span>{{start_form.title}}</span>
<i class="el-icon-edit"></i>
</p>
<el-input class="m_l_4"
v-model="start_form.title" clearable placeholder="请输入标题"
v-if="is_edit == true" ref="strat_input"
@blur='edit_input_blur' >
</el-input>
</div>
</template>
<!-- 编辑节点 -->
<div class="main">
<el-form ref="start_form" :model="start_form" label-width="80px">
<el-form-item label="发起人：">
<el-select v-model="start_form.fq_user" placeholder="请选择发起人">
<el-option
v-for="item in fq_user_list" :key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirm_start_pop">保存</el-button>
<el-button @click="cancel_start_pop">取消</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
<!-- 审批人、抄送人 - 弹出层 -->
<el-drawer :visible.sync="sp_pop" direction="rtl" size="60%">
<template slot="title">
<!-- 编辑标题 -->
<div class="pop_edit_title">
<i class="el-icon-user-solid color_sp f24"></i>
<p class="m_l_6 f_18" v-if="is_edit == false" @click="edit_pop_title">
<span>{{sp_form.title}}</span>
<i class="el-icon-edit"></i>
</p>
<el-input class="m_l_4" v-if="is_edit == true" ref="sp_input" @blur='edit_input_blur' placeholder="请输入标题" v-model="sp_form.title" clearable></el-input>
</div>
</template>
<!-- 编辑节点 -->
<div class="main">
<el-form ref="sp_form" :model="sp_form" label-width="100px">
<el-form-item >
<template slot="label">
<span v-if="pop_type == 0">审批人设置：</span>
<span v-if="pop_type == 1">抄送人设置：</span>
</template>
<el-checkbox-group v-model="sp_checkList" @change="sp_check_change">
<el-checkbox v-for="item in sp_list" :label="item"></el-checkbox>
</el-checkbox-group>
<p v-if="sp_show" class="sp_check m_t_8">
<el-button class="m_r_4" icon="el-icon-plus" size="medium"></el-button>
<el-tag v-for="item in sp_user" :key="item.id" effect="plain">
{{ item.name }}
</el-tag>
</p>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirm_sp_pop">保存</el-button>
<el-button @click="cancel_sp_pop">取消</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
<!-- 条件分支 - 弹出层 -->
<el-drawer :visible.sync="tj_pop" direction="rtl" size="60%" class="tj_pop">
<!-- 编辑标题 -->
<template slot="title">
<div class="pop_edit_title">
<i class="el-icon-user-solid color_sp f24"></i>
<p class="m_l_6 f_18" v-if="is_edit == false" @click="edit_pop_title">
<span>{{tj_form_title}}</span>
<i class="el-icon-edit"></i>
</p>
<el-input class="m_l_4" v-if="is_edit == true" ref="tj_input" @blur='edit_input_blur' placeholder="请输入标题" v-model="tj_form_title" clearable></el-input>
</div>
<el-select class="level_select" v-model="tj_form_level" placeholder="请选择">
<el-option
v-for="item in level_list"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<!-- 编辑节点 -->
<div class="main">
<div class="pop_content">
<el-row type="flex" align="middle">
<el-button type="primary" icon="el-icon-plus" @click="add_tj_group">添加条件组</el-button>
<el-tooltip class="item" effect="dark" content="发起文字说明" placement="bottom">
<span class="tj_pop_tip color_dark_gray"> <i class="el-icon-question"></i> 谁可以发起</span>
</el-tooltip>
</el-row>
<div class="m_t_8">
<div class="edit_tj_item" v-for="(item,index) in tj_condition">
<el-row type="flex" align="middle" justify="space-between" class="edit_content">
<p>条件组</p>
<el-link :underline="false" type="danger" @click="del_tj_group(item,index,tj_condition)">删除</el-link>
</el-row>
<div class="tj_form">
<el-form label-width="120px">
<el-form-item label="所属分类">
<el-select v-model="item.select" placeholder="请选择所属分类">
<el-option v-for="item in select_list" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-checkbox v-model="item.select_children">含子分类</el-checkbox>
</el-form-item>
<el-form-item label="发起人">
<el-input v-model="item.user" placeholder="请选择发起人"></el-input>
</el-form-item>
<el-form-item label="每月发起次数">
<el-row type='flex'>
<el-input class="flex_anto" v-model.number="item.times" placeholder="请输入每月发起次数"></el-input>
<span class="m_l_6 color_gray">0表示不限发起次数</span>
</el-row>
</el-form-item>
<el-form-item :label="v.name" v-for="(v,j) in item.rules">
<tempalte v-if="v.name == '申领类型'">
<el-select v-model="v.value" placeholder="请选择所属分类">
<el-option v-for="(s,r) in rules_select_list" :key="s.value" :label="s.label" :value="s.value">
</el-option>
</el-select>
</tempalte>
<tempalte v-else-if="v.name == '申领总价'">
<el-input v-model="v.value" type='number'></el-input>
</tempalte>
<el-input v-else v-model="v.value"></el-input>
<p class="color_gray f12 m_t_6" v-if="j < item.rules.length - 1">且</p>
</el-form-item>
</el-form>
<el-button class="m_t_8" icon="el-icon-plus" size="small" @click="add_tj_select(item.rules,index)">添加条件</el-button>
</div>
</div>
</div>
</div>
<div class="pop_bottom">
<el-button type="primary" @click="confirm_tj_pop">保存</el-button>
<el-button @click="cancel_tj_pop">取消</el-button>
</div>
</div>
</el-drawer>
<!-- 条件分支 - 弹出层 - 选择条件 -->
<el-dialog title="选择条件" :visible.sync="tj_select_pop" width="50%" class="tj_select_pop">
<div>
<p>请选择用来区分审批流程的条件字段，已选 <span class="color_blue">{{checkedCount || '0'}}</span> 个 </p>
<el-checkbox-group class="m_t" v-model="tj_checked" @change="tj_checked_change">
<template v-for="item in tj_flow_list" :key="item.id">
<el-checkbox :label="item.name" ></el-checkbox>
</template>
</el-checkbox-group>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel_tj_select">取 消</el-button>
<el-button type="primary" @click="confirm_tj_select">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- 节点组件 -->
<template id='treeTemplate'>
<div>
<div v-for="(item,index) in tree">
<!-- 主节点 - 审批、抄送 -->
<div v-if="item.type !== 3 && item.type !== 4" class="cavas_box">
<!-- 节点内容 -->
<div :data-id="index" @click="get_item_data(item)" class="node_container"
:class="[item.type==0 ? 'fq_node' : '',item.type==1 ? 'sp_node':'',item.type==2 ? 'cs_node' : '']">
<div class="node_title">
<i class="fa fa-user-circle f16"></i>
<p class="f14 node_title_text">{{item.title}}</p>
</div>
<div class="node_content">
<div class="node_content_text f14">一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字
</div>
<i class="fa fa-angle-right color_9d9"></i>
</div>
<!-- 节点删除按钮 -->
<div class="node_toolbar" v-if="item.type !== 0">
<span class="node_toolbar_del" @click.stop="del_wrap_node(index,tree)"><i class="el-icon-delete f12"></i></span>
</div>
</div>
<!-- 添加节点按钮 -->
<div class="node_handler_box">
<el-popover placement="right" width="200" trigger="click">
<div slot="reference" class="node_handler"><i class="el-icon-plus f16"></i></div>
<p class="node_wrapper_btn" @click="add_wrap_node(item,index,'sp')">
<i class="el-icon-user-solid color_sp f18"></i>
<span class="m_l_8">审批人</span>
</p>
<p class="node_wrapper_btn" @click="add_wrap_node(item,index,'cs')">
<i class="el-icon-user-solid color_cs f18"></i>
<span class="m_l_8">抄送人</span>
</p>
<p class="node_wrapper_btn" @click="add_branch_node(item,index,tree)">
<i class="el-icon-share color_tj f18"></i>
<span class="m_l_8">条件分支</span>
</p>
</el-popover>
</div>
</div>
<!-- 条件分支节点 -->
<div class="canvas_branch_wrapper" v-if="item.type == 3 && item.condition.length !== 0">
<div class="canvas_branch_container">
<el-button round class="node_branch_adder" @click="add_condition(item)">添加条件</el-button>
<!-- 循环条件分支下的小分支节点 -->
<div class="canvas_branch_item" v-for="(v, j) in item.condition" :key="j">
<!-- 条件分支 - 线条样式判断 -->
<div class="branch_top_left" v-if="j === 0"></div>
<div class="branch_top_right" v-if="j === item.condition.length - 1"></div>
<div class="branch_bottom_left" v-if="j === 0"></div>
<div class="branch_bottom_right" v-if="j === item.condition.length - 1"></div>
<!-- 条件分支 - 分支点 -->
<div class="cavas_node_box t_center">
<!-- 节点内容 -->
<div class="node_container" @click="get_item_data(v)">
<div class="node_title f14 branch_title">
<p class="color_green f_bold">{{v.title}}</p>
<p class="color_gray">优先级{{v.flow.level}}</p>
</div>
<div class="node_content">
<div class="node_content_text f14">
一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字一些文字</div>
<i class="fa fa-angle-right color_9d9"></i>
</div>
<!-- 节点删除按钮 -->
<div class="node_toolbar" >
<span class="node_toolbar_del" @click.stop="del_branch_node(item,j)"><i class="el-icon-delete f12"></i></span>
</div>
</div>
<!-- 添加节点按钮 -->
<div class="node_handler_box">
<el-popover placement="right" width="200" trigger="click">
<div slot="reference" class="node_handler"><i class="el-icon-plus f16"></i>
</div>
<p class="node_wrapper_btn" @click="add_wrap_node(v,j,'sp')">
<i class="el-icon-user-solid color_sp f18"></i>
<span class="m_l_8">审批人</span>
</p>
<p class="node_wrapper_btn" @click="add_wrap_node(v,j,'cs')">
<i class="el-icon-user-solid color_cs f18"></i>
<span class="m_l_8">抄送人</span>
</p>
<p class="node_wrapper_btn" @click="add_branch_node(v,j,item.condition)">
<i class="el-icon-share color_tj f18"></i>
<span class="m_l_8">条件分支</span>
</p>
</el-popover>
</div>
<!-- 条件分支 - 分支下的child -->
<item v-bind:tree='v.child'></item>
</div>
</div>
</div>
<!-- 添加节点按钮 -->
<div class="node_handler_box">
<el-popover placement="right" width="200" trigger="click">
<div slot="reference" class="node_handler"><i class="el-icon-plus f16"></i></div>
<p class="node_wrapper_btn" @click="add_wrap_node(item,index,'sp')">
<i class="el-icon-user-solid color_sp f18"></i>
<span class="m_l_8">审批人</span>
</p>
<p class="node_wrapper_btn" @click="add_wrap_node(item,index,'cs')">
<i class="el-icon-user-solid color_cs f18"></i>
<span class="m_l_8">抄送人</span>
</p>
<p class="node_wrapper_btn" @click="add_branch_node(item,index,tree)">
<i class="el-icon-share color_tj f18"></i>
<span class="m_l_8">条件分支</span>
</p>
</el-popover>
</div>
</div>
<!-- 主节点下的child -->
<item v-bind:tree='item.child'></item>
</div>
</div>
</template>
</body>
<script>
// type 0:发起 1:审批 2:抄送 3:条件分支 4:条件分支小节点
// flow 当前节点配置，里面的数据将赋值给当前节点的编辑弹出层，只有发起（0）、审批（1）、抄送（2）、分支小节点（4）有
// condition 条件分支特有，包含小分支节点
// level 优先级，只有分支小节点（4）有
// 节点分为主节点（审批节点、抄送节点）、分支节点
var treeData = [
{
type: 0,
title: "发起人",
flow: {
title:"发起人",
apple_user:[
{value: 0,label: '用户1'},
]
},
child: []
},
{
type: 1,
title: "审批人",
flow: {
title:"审批人",
sp_type:"",
sp_user:[]
},
child: []
},
{
type: 2,
title: "抄送人",
flow: {
title:"抄送人",
sp_type:"",
sp_user:[]
},
child: []
},
{
type: 3,
child: [],
condition: [
{
title: "分支1",
type: 4,
flow: {
title: "分支1",
level:0,
},
child: [
{
type: 1,
title: "分支1 - 审批人",
flow: {
title: "分支1 - 审批人",
},
child: [],
},
{
type: 3,
child: [],
condition: [
{ title: "分支1-1", type: 4, flow: {title: "分支1-1",level:0,},child: []},
{title: "分支1-2", type: 4,flow: {title: "分支1-2",level:1,},child: []},
]
},
{
type: 1,
title: "分支2 - 审批人",
flow: {title: "分支2 - 审批人",},
child: [],
}
],
},
{
title: "分支1",
type: 4,
flow: {title: "分支2",level:0,},
child: [],
}
]
},
];
// 配置tree组件
Vue.component('item', {
template: '#treeTemplate',
props: ['tree'],
data() {
return {}
},
mounted() {},
methods: {
// 获取当前节点的值
get_item_data(item) {
if(item.type== 0){
// 编辑发起人
vm.start_pop = true;
vm.start_form =JSON.parse(JSON.stringify(item.flow));
}else if(item.type== 1 || item.type== 2){
// 编辑审批人、抄送人
vm.sp_pop = true;
if(item.type== 1){
vm.pop_type = 0;
}else{
vm.pop_type = 1;
}
vm.sp_form =JSON.parse(JSON.stringify(item.flow));
}else if(item.type== 4){
// 编辑条件分支
vm.tj_pop = true;
vm.tj_form_title =item.title;
vm.tj_form_level =item.flow.level;
}
},
// 添加条件分支
add_condition(item){
item.condition.push( { title: '条件', type: 4,flow:{title: '条件',level:0,}, child: [] })
},
// 新增主节点 - 审批、抄送
add_wrap_node(item,index,type){
let temp = {};
if(type == 'sp'){
temp = { type: 1, title: "新审批人", flow: {title: "新审批人",level:0,}, child: [], }
}else if(type == 'cs'){
temp = { type: 2, title: "新抄送人", flow: {title: "新抄送人",level:1,}, child: [], }
}
item.child.unshift(temp)
},
// 新增分支节点
add_branch_node(item,index,arr){
let temp = {};
let _index = index + 1;
temp = {
type:3,
title:"新分支",
child:[],
condition:[
{type:4,title:'条件1',flow: {title: "条件1",},child:[],},
{type:4,title:'其他情况',flow: {title: "其他情况",},child:[],},
]
}
if(item.type == 4){// 在分支节点下新增分支节点
arr[index].child.unshift(temp)
}else{// 在主节点下新增分支节点
arr.splice(_index,0,temp)
}
},
// 删除主节点
del_wrap_node(index,arr){
arr.splice(index,1)
},
// 删除分支节点
del_branch_node(item,index){
if (item.condition.length > 2) {
item.condition.splice(index, 1)
} else {
item.condition = []
}
},
},
});
var vm = new Vue({
el: '#app',
data() {
return{
// 流程数据
treeData: treeData,
// 弹出层 标题编辑
is_edit:false,
//发起人弹出层
start_pop: false,
start_form: { //发起人弹出层 - 表单
title:'',
apple_user: []
},
fq_user_list: [ // 发起人弹出层 - 发起人数据
{value: 0,label: '公司1'},
{value: 1,label: '公司2'},
{value: 2,label: '公司3'},
],
//审批、抄送弹出层
sp_pop: false,
pop_type:0,//弹出层类型 - 审批（0）/抄送（1）
sp_form: {//弹出层 - 表单数据
title:'',
sp_type:'',
sp_user:[] },
sp_checkList:[],// 数据
sp_list:['部门负责人','直属上级','上级分管领导','仓库管理人','指定人员',],
sp_show:false,//弹出层 - 指定人员展示已选人员
sp_user:[//弹出层 - 指定人员数据
{id:0,name:'小张小张小张'},
{id:1,name:'小张'},
{id:2,name:'小张'},
{id:3,name:'小张'},
{id:4,name:'srtudgyhjdrtujdtyghjftyjdtyjkiujrty'},
{id:5,name:'srtudgyhjdrtujdtyghjftyjdtyjkiujrty'},
{id:6,name:'srtudgyhjdrtujdtyghjftyjdtyjkiujrty'},
{id:7,name:'srtudgyhjdrtujdtyghjftyjdtyjkiujrty'},
{id:8,name:'srtudgyhjdrtujdtyghjftyjdtyjkiujrty'},
],
//条件分支弹出层
tj_pop: false,
tj_form_title:"",//条件分支弹出层标题
tj_form_level:'',//条件分支弹出层优先级
level_list:[//条件分支弹出层 - 优先级选择
{value: 0,label: '优先级1'},
{value: 1,label: '优先级2'},
{value: 2,label: '优先级3'},
],
tj_condition:[//条件分支弹出层条件组
{
select:'',
select_children:false,
user:'',
times:"",
rules:[
{id:1,name:"所属仓库id",value:""},
{id:2,name:"所属公司id",value:""},
{id:3,name:"所属部门id",value:""},
{id:4,name:"所属顶级分类id",value:""},
{id:5,name:"所属分类id",value:""},
{id:6,name:"申领类型",value:""},
{id:7,name:"申领总价",value:""},
{id:8,name:"本月申领次数",value:""},
],
}
],
select_list:[//条件分支弹出层条件组 - 所属分类
{value: 0,label: '所属分类1'},
{value: 1,label: '所属分类2'},
{value: 2,label: '所属分类3'},
],
rules_select_list:[//条件分支弹出层条件组 - 所属分类
{value: 0,label: '申领'},
{value: 1,label: '借用'},
],
tj_select_pop:false,
tj_checked: [],
selectionArr: [], // 选中要传给后台的数据 对象
checkedCount:0,//条件分支弹出层条件组 - 选中的条件数
tj_editIndex:"",
tj_flow_list:[
{id:1,name:"所属仓库id",value:""},
{id:2,name:"所属公司id",value:""},
{id:3,name:"所属部门id",value:""},
{id:4,name:"所属顶级分类id",value:""},
{id:5,name:"所属分类id",value:""},
{id:6,name:"申领类型",value:""},
{id:7,name:"申领总价",value:""},
{id:8,name:"本月申领次数",value:""},
],
}
},
methods: {
},
created: function () {},
mounted() {
// 加载流程数据
this.get_node(this.treeData);
},
methods: {
// 获取流程子节点
get_node(arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].child.length > 0) {
// 子节点下的child继续调用
this.get_node(arr[i].child);
}
}
},
// 所有弹出层 - 标题编辑
edit_pop_title(value){
this.is_edit = true;
// 根据不同弹出层判断输入框自动focus
if(this.start_pop == true){
this.$nextTick(() => {
this.$refs.strat_input.focus()
})
}else if(this.sp_pop == true){
this.$nextTick(() => {
this.$refs.sp_input.focus()
})
}else if(this.tj_pop == true){
this.$nextTick(() => {
this.$refs.tj_input.focus()
})
}else if(this.cs_pop == true){
this.$nextTick(() => {
this.$refs.cs_input.focus()
})
}
},
// 所有弹出层 - 标题失焦
edit_input_blur(){
this.is_edit = false;
},
// 发起人编辑弹出层 - 保存
confirm_start_pop() {
this.cancel_start_pop()
},
// 发起人编辑弹出层 - 取消、重置
cancel_start_pop() {
this.start_form = { title:'', apply_user: [] }
this.start_pop = false
},
// 审批人弹出层 - 保存
confirm_sp_pop() {
this.cancel_sp_pop()
},
// 审批人弹出层 - 取消、重置
cancel_sp_pop() {
this.sp_form = {
title:'',
sp_type:"",
sp_user:[]
}
this.sp_checkList = []
this.sp_show = false,
this.sp_pop = false
},
// 审批人弹出层 - 选中审批人设置
sp_check_change(value) {
if(this.sp_checkList.length > 1){
let _one = this.sp_checkList.splice(1)
this.sp_checkList = _one
}
// 点击'指定人员'时展示
if(this.sp_checkList[0] == '指定人员'){
this.sp_show = true;
}else{
this.sp_show = false;
}
},
// 抄送人弹出层 - 选中抄送人设置
cs_check_change(value) {
if(this.cs_checkList.length > 1){
let _one = this.cs_checkList.splice(1)
this.cs_checkList = _one
}
// 点击'指定人员'时展示
if(this.cs_checkList[0] == '指定人员'){
this.sp_show = true;
}else{
this.sp_show = false;
}
},
// 条件分支弹出层 - 保存
confirm_tj_pop() {
this.cancel_tj_pop()
},
// 条件分支弹出层 - 取消、重置
cancel_tj_pop() {
this.tj_pop = false
},
// 条件分支弹出层 - 添加条件组
add_tj_group(){
let tj_list = {
select:'',
select_children:false,
user:'',
times:"",
}
this.tj_condition.unshift(tj_list)
},
// 条件分支弹出层 - 条件组删除
del_tj_group(item,index,arr){
if (arr.length === 1){
this.$message.error('最后一个条件不能删除！');
return false;
}
arr.splice(index, 1);
},
// 条件分支弹出层 - 获取选中的对象
getChecked(selectionArr) {
this.selectionArr = [];
for (var i = 0; i < this.tj_flow_list.length; i++) {
for (var j = 0; j < selectionArr.length; j++) {
if (selectionArr[j] === this.tj_flow_list[i].name) {
this.selectionArr.push(this.tj_flow_list[i])
}
}
}
},
// 条件分支弹出层 - 选择条件
tj_checked_change(value) {
this.checkedCount = value.length;
this.getChecked(value);
},
// 条件分支弹出层 - 添加条件
add_tj_select(item,index){
this.tj_select_pop = true;
this.checkedCount = item.length;
this.tj_editIndex = index;
this.tj_checked = []
// 当前选择条件回显
item.forEach(i => {
this.tj_checked.push(i.name)
});
},
// 条件分支弹出层 - 选择条件弹出层 - 确定
confirm_tj_select(){
this.tj_condition[this.tj_editIndex].rules = []
this.selectionArr.forEach(i => {
this.tj_condition[this.tj_editIndex].rules.push(i)
});
this.cancel_tj_select()
},
// 条件分支弹出层 - 选择条件弹出层 - 取消
cancel_tj_select(){
this.checkedCount = 0;
this.tj_checked = [];
this.tj_select_pop = false;
},
}
});
</script>
</html>
！！
浙公网安备 33010602011771号