6 changed files with 3 additions and 727 deletions
@ -1,237 +0,0 @@ |
|||
<template> |
|||
<div class="add-node-btn-box"> |
|||
<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> |
|||
<!-- <button class="btn" type="button" slot="reference"> |
|||
<span class="iconfont"></span> |
|||
</button> --> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: ["childNodeP"], |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
addType(type) { |
|||
this.visible = false; |
|||
if (type != 4) { |
|||
var data; |
|||
if (type == 1) { |
|||
data = { |
|||
nodeName: "审核人", |
|||
error: true, |
|||
type: 1, |
|||
settype: 1, |
|||
selectMode: 0, |
|||
selectRange: 0, |
|||
directorLevel: 1, |
|||
examineMode: 1, |
|||
noHanderAction: 1, |
|||
examineEndDirectorLevel: 0, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} else if (type == 2) { |
|||
data = { |
|||
nodeName: "抄送人", |
|||
type: 2, |
|||
ccSelfSelectFlag: 1, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} |
|||
this.$emit("update:childNodeP", data); |
|||
} else { |
|||
this.$emit("update:childNodeP", { |
|||
nodeName: "路由", |
|||
type: 4, |
|||
childNode: null, |
|||
conditionNodes: [ |
|||
{ |
|||
nodeName: "条件1", |
|||
error: true, |
|||
type: 3, |
|||
priorityLevel: 1, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: this.childNodeP, |
|||
}, |
|||
{ |
|||
nodeName: "条件2", |
|||
type: 3, |
|||
priorityLevel: 2, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: null, |
|||
}, |
|||
], |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.add-node-btn-box { |
|||
width: 240px; |
|||
display: -webkit-inline-box; |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
-ms-flex-positive: 1; |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 1px; |
|||
height: 100%; |
|||
background-color: #2f87ff; |
|||
} |
|||
|
|||
.add-node-btn { |
|||
user-select: none; |
|||
width: 240px; |
|||
padding: 20px 0 32px; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
flex-grow: 1; |
|||
|
|||
.btn { |
|||
outline: none; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
width: 30px; |
|||
height: 30px; |
|||
background: #3296fa; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
border: none; |
|||
line-height: 30px; |
|||
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: scale(1.3); |
|||
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
&:active { |
|||
transform: none; |
|||
background: #1e83e9; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.add-node-popover-body { |
|||
display: flex; |
|||
|
|||
.add-node-popover-item { |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
flex: 1; |
|||
color: #191f25 !important; |
|||
|
|||
.item-wrapper { |
|||
user-select: none; |
|||
display: inline-block; |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 5px; |
|||
background: #fff; |
|||
border: 1px solid #e2e2e2; |
|||
border-radius: 50%; |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
font-size: 35px; |
|||
line-height: 80px; |
|||
} |
|||
} |
|||
|
|||
&.approver { |
|||
.item-wrapper { |
|||
color: #ff943e; |
|||
} |
|||
} |
|||
|
|||
&.notifier { |
|||
.item-wrapper { |
|||
color: #3296fa; |
|||
} |
|||
} |
|||
|
|||
&.condition { |
|||
.item-wrapper { |
|||
color: #15bc83; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
.item-wrapper { |
|||
background: #3296fa; |
|||
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4); |
|||
} |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&:active { |
|||
.item-wrapper { |
|||
box-shadow: none; |
|||
background: #eaeaea; |
|||
} |
|||
|
|||
.iconfont { |
|||
color: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,237 +0,0 @@ |
|||
<template> |
|||
<div class="add-node-btn-box"> |
|||
<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> |
|||
<!-- <button class="btn" type="button" slot="reference"> |
|||
<span class="iconfont"></span> |
|||
</button> --> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: ["childNodeP"], |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
addType(type) { |
|||
this.visible = false; |
|||
if (type != 4) { |
|||
var data; |
|||
if (type == 1) { |
|||
data = { |
|||
nodeName: "审核人", |
|||
error: true, |
|||
type: 1, |
|||
settype: 1, |
|||
selectMode: 0, |
|||
selectRange: 0, |
|||
directorLevel: 1, |
|||
examineMode: 1, |
|||
noHanderAction: 1, |
|||
examineEndDirectorLevel: 0, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} else if (type == 2) { |
|||
data = { |
|||
nodeName: "抄送人", |
|||
type: 2, |
|||
ccSelfSelectFlag: 1, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} |
|||
this.$emit("update:childNodeP", data); |
|||
} else { |
|||
this.$emit("update:childNodeP", { |
|||
nodeName: "路由", |
|||
type: 4, |
|||
childNode: null, |
|||
conditionNodes: [ |
|||
{ |
|||
nodeName: "条件1", |
|||
error: true, |
|||
type: 3, |
|||
priorityLevel: 1, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: this.childNodeP, |
|||
}, |
|||
{ |
|||
nodeName: "条件2", |
|||
type: 3, |
|||
priorityLevel: 2, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: null, |
|||
}, |
|||
], |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.add-node-btn-box { |
|||
width: 240px; |
|||
display: -webkit-inline-box; |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
-ms-flex-positive: 1; |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 1px; |
|||
height: 100%; |
|||
background-color: #2f87ff; |
|||
} |
|||
|
|||
.add-node-btn { |
|||
user-select: none; |
|||
width: 240px; |
|||
padding: 20px 0 32px; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
flex-grow: 1; |
|||
|
|||
.btn { |
|||
outline: none; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
width: 30px; |
|||
height: 30px; |
|||
background: #3296fa; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
border: none; |
|||
line-height: 30px; |
|||
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: scale(1.3); |
|||
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
&:active { |
|||
transform: none; |
|||
background: #1e83e9; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.add-node-popover-body { |
|||
display: flex; |
|||
|
|||
.add-node-popover-item { |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
flex: 1; |
|||
color: #191f25 !important; |
|||
|
|||
.item-wrapper { |
|||
user-select: none; |
|||
display: inline-block; |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 5px; |
|||
background: #fff; |
|||
border: 1px solid #e2e2e2; |
|||
border-radius: 50%; |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
font-size: 35px; |
|||
line-height: 80px; |
|||
} |
|||
} |
|||
|
|||
&.approver { |
|||
.item-wrapper { |
|||
color: #ff943e; |
|||
} |
|||
} |
|||
|
|||
&.notifier { |
|||
.item-wrapper { |
|||
color: #3296fa; |
|||
} |
|||
} |
|||
|
|||
&.condition { |
|||
.item-wrapper { |
|||
color: #15bc83; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
.item-wrapper { |
|||
background: #3296fa; |
|||
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4); |
|||
} |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&:active { |
|||
.item-wrapper { |
|||
box-shadow: none; |
|||
background: #eaeaea; |
|||
} |
|||
|
|||
.iconfont { |
|||
color: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,237 +0,0 @@ |
|||
<template> |
|||
<div class="add-node-btn-box"> |
|||
<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> |
|||
<!-- <button class="btn" type="button" slot="reference"> |
|||
<span class="iconfont"></span> |
|||
</button> --> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: ["childNodeP"], |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
}; |
|||
}, |
|||
methods: { |
|||
addType(type) { |
|||
this.visible = false; |
|||
if (type != 4) { |
|||
var data; |
|||
if (type == 1) { |
|||
data = { |
|||
nodeName: "审核人", |
|||
error: true, |
|||
type: 1, |
|||
settype: 1, |
|||
selectMode: 0, |
|||
selectRange: 0, |
|||
directorLevel: 1, |
|||
examineMode: 1, |
|||
noHanderAction: 1, |
|||
examineEndDirectorLevel: 0, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} else if (type == 2) { |
|||
data = { |
|||
nodeName: "抄送人", |
|||
type: 2, |
|||
ccSelfSelectFlag: 1, |
|||
childNode: this.childNodeP, |
|||
nodeUserList: [], |
|||
}; |
|||
} |
|||
this.$emit("update:childNodeP", data); |
|||
} else { |
|||
this.$emit("update:childNodeP", { |
|||
nodeName: "路由", |
|||
type: 4, |
|||
childNode: null, |
|||
conditionNodes: [ |
|||
{ |
|||
nodeName: "条件1", |
|||
error: true, |
|||
type: 3, |
|||
priorityLevel: 1, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: this.childNodeP, |
|||
}, |
|||
{ |
|||
nodeName: "条件2", |
|||
type: 3, |
|||
priorityLevel: 2, |
|||
conditionList: [], |
|||
nodeUserList: [], |
|||
childNode: null, |
|||
}, |
|||
], |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.add-node-btn-box { |
|||
width: 240px; |
|||
display: -webkit-inline-box; |
|||
display: -ms-inline-flexbox; |
|||
display: inline-flex; |
|||
-ms-flex-negative: 0; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
-ms-flex-positive: 1; |
|||
position: relative; |
|||
|
|||
&:before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 1px; |
|||
height: 100%; |
|||
background-color: #2f87ff; |
|||
} |
|||
|
|||
.add-node-btn { |
|||
user-select: none; |
|||
width: 240px; |
|||
padding: 20px 0 32px; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
-webkit-box-flex: 1; |
|||
flex-grow: 1; |
|||
|
|||
.btn { |
|||
outline: none; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
width: 30px; |
|||
height: 30px; |
|||
background: #3296fa; |
|||
border-radius: 50%; |
|||
position: relative; |
|||
border: none; |
|||
line-height: 30px; |
|||
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
&:hover { |
|||
transform: scale(1.3); |
|||
box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
&:active { |
|||
transform: none; |
|||
background: #1e83e9; |
|||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.add-node-popover-body { |
|||
display: flex; |
|||
|
|||
.add-node-popover-item { |
|||
margin-right: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
flex: 1; |
|||
color: #191f25 !important; |
|||
|
|||
.item-wrapper { |
|||
user-select: none; |
|||
display: inline-block; |
|||
width: 80px; |
|||
height: 80px; |
|||
margin-bottom: 5px; |
|||
background: #fff; |
|||
border: 1px solid #e2e2e2; |
|||
border-radius: 50%; |
|||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|||
|
|||
.iconfont { |
|||
font-size: 35px; |
|||
line-height: 80px; |
|||
} |
|||
} |
|||
|
|||
&.approver { |
|||
.item-wrapper { |
|||
color: #ff943e; |
|||
} |
|||
} |
|||
|
|||
&.notifier { |
|||
.item-wrapper { |
|||
color: #3296fa; |
|||
} |
|||
} |
|||
|
|||
&.condition { |
|||
.item-wrapper { |
|||
color: #15bc83; |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
.item-wrapper { |
|||
background: #3296fa; |
|||
box-shadow: 0 10px 20px 0 rgba(50, 150, 250, 0.4); |
|||
} |
|||
|
|||
.iconfont { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&:active { |
|||
.item-wrapper { |
|||
box-shadow: none; |
|||
background: #eaeaea; |
|||
} |
|||
|
|||
.iconfont { |
|||
color: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue