<!--
|
* @Descripttion: 仿钉钉流程设计器
|
* @version: 1.3
|
* @Author: sakuya
|
* @Date: 2021年9月14日08:38:35
|
* @LastEditors: sakuya
|
* @LastEditTime: 2022年5月14日19:43:46
|
-->
|
|
<template>
|
<div class="sc-workflow-design">
|
<div class="box-scale">
|
<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
|
<div class="end-node">
|
<div class="end-node-circle"></div>
|
<div class="end-node-text">流程结束</div>
|
</div>
|
</div>
|
<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
|
</div>
|
</template>
|
|
<script>
|
import nodeWrap from './nodeWrap'
|
import useSelect from './select'
|
|
export default {
|
provide(){
|
return {
|
select: this.selectHandle
|
}
|
},
|
props: {
|
modelValue: { type: Object, default: () => {} }
|
},
|
components: {
|
nodeWrap,
|
useSelect
|
},
|
data() {
|
return {
|
nodeConfig: this.modelValue,
|
selectVisible: false
|
}
|
},
|
watch:{
|
modelValue(val){
|
this.nodeConfig = val
|
},
|
nodeConfig(val){
|
this.$emit("update:modelValue", val)
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
selectHandle(type, data){
|
this.selectVisible = true
|
this.$nextTick(() => {
|
this.$refs.useselect.open(type, data)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.sc-workflow-design {width: 100%;}
|
.sc-workflow-design .box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
|
|
.sc-workflow-design {
|
.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
|
.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
|
.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
|
.node-wrap-box.start-node:before {content: none}
|
.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;display: flex;align-items: center;}
|
.node-wrap-box .title .icon {margin-right: 5px;}
|
.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
|
.node-wrap-box .content {position: relative;padding: 15px;}
|
.node-wrap-box .content .placeholder {color: #999;}
|
.node-wrap-box:hover .close {display: block;}
|
.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
|
.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
|
.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
|
.add-node-btn span {}
|
.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
|
.branch-wrap {display: inline-flex;width: 100%;}
|
.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
|
.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
|
.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
|
.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
|
.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
|
.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
|
.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
|
.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
|
.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
|
.auto-judge .title {line-height: 16px;}
|
.auto-judge .title .node-title {color: #15BC83;}
|
.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
|
.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
|
.auto-judge .content {position: relative;padding-top: 15px;}
|
.auto-judge .content .placeholder {color: #999;}
|
.auto-judge:hover {
|
.close {display: block;}
|
.priority-title {display: none;}
|
}
|
.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
|
.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
|
.top-left-cover-line {left: -1px;}
|
.top-right-cover-line {right: -1px;}
|
.bottom-left-cover-line {left: -1px;}
|
.bottom-right-cover-line {right: -1px;}
|
.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
|
.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
|
.end-node-text {margin-top: 5px;text-align: center;}
|
.auto-judge:hover {
|
.sort-left {display: flex;}
|
.sort-right {display: flex;}
|
}
|
.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
|
.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
|
.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
|
.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
|
.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
|
.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
|
.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
|
}
|
|
.tags-list {margin-top: 15px;width: 100%;}
|
.add-node-popover-body {}
|
.add-node-popover-body li {display: inline-block;width: 80px;text-align: center;padding:10px 0;}
|
.add-node-popover-body li i {border: 1px solid var(--el-border-color-light);width:40px;height:40px;border-radius: 50%;text-align: center;line-height: 38px;font-size: 18px;cursor: pointer;}
|
.add-node-popover-body li i:hover {border: 1px solid #3296fa;background: #3296fa;color: #fff!important;}
|
.add-node-popover-body li p {font-size: 12px;margin-top: 5px;}
|
.node-wrap-drawer__title {padding-right:40px;}
|
.node-wrap-drawer__title label {cursor: pointer;}
|
.node-wrap-drawer__title label:hover {border-bottom: 1px dashed #409eff;}
|
.node-wrap-drawer__title .node-wrap-drawer__title-edit {color: #409eff;margin-left: 10px;vertical-align: middle;}
|
|
.dark .sc-workflow-design {
|
.node-wrap-box,.auto-judge {background: #2b2b2b;}
|
.col-box {background: var(--el-bg-color);}
|
.top-left-cover-line,
|
.top-right-cover-line,
|
.bottom-left-cover-line,
|
.bottom-right-cover-line {background-color: var(--el-bg-color);}
|
.node-wrap-box::before,.auto-judge::before {background-color: var(--el-bg-color);}
|
.branch-box .add-branch {background: var(--el-bg-color);}
|
.end-node .end-node-text {color: #d0d0d0;}
|
.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: var(--el-bg-color);}
|
}
|
|
</style>
|
