整合仿钉钉流程设计器 https://github.com/StavinLi/Workflow-Vue3
This commit is contained in:
jason
parent
d16194b794
commit
07dc725857
237
src/components/SimpleProcessDesigner/src/addNode.vue
Normal file
237
src/components/SimpleProcessDesigner/src/addNode.vue
Normal file
@ -0,0 +1,237 @@
|
||||
/* stylelint-disable order/properties-order */
|
||||
<template>
|
||||
<div class="add-node-btn-box">
|
||||
<div class="add-node-btn">
|
||||
<el-popover placement="right-start" v-model="visible" width="auto">
|
||||
<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>
|
||||
<template #reference>
|
||||
<button class="btn" type="button">
|
||||
<span class="iconfont"></span>
|
||||
</button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
let props = defineProps({
|
||||
childNodeP: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
let emits = defineEmits(['update:childNodeP'])
|
||||
let visible = ref(false)
|
||||
const addType = (type) => {
|
||||
visible.value = 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: props.childNodeP,
|
||||
nodeUserList: []
|
||||
}
|
||||
} else if (type == 2) {
|
||||
data = {
|
||||
nodeName: '抄送人',
|
||||
type: 2,
|
||||
ccSelfSelectFlag: 1,
|
||||
childNode: props.childNodeP,
|
||||
nodeUserList: []
|
||||
}
|
||||
}
|
||||
emits('update:childNodeP', data)
|
||||
} else {
|
||||
emits('update:childNodeP', {
|
||||
nodeName: '路由',
|
||||
type: 4,
|
||||
childNode: null,
|
||||
conditionNodes: [
|
||||
{
|
||||
nodeName: '条件1',
|
||||
error: true,
|
||||
type: 3,
|
||||
priorityLevel: 1,
|
||||
conditionList: [],
|
||||
nodeUserList: [],
|
||||
childNode: props.childNodeP
|
||||
},
|
||||
{
|
||||
nodeName: '条件2',
|
||||
type: 3,
|
||||
priorityLevel: 2,
|
||||
conditionList: [],
|
||||
nodeUserList: [],
|
||||
childNode: null
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.add-node-btn-box {
|
||||
width: 240px;
|
||||
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;
|
||||
z-index: -1;
|
||||
margin: auto;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: #cacaca;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
:append-to-body="true"
|
||||
title="审批人设置"
|
||||
v-model="visible"
|
||||
class="set_promoter"
|
||||
:show-close="false"
|
||||
:size="550"
|
||||
: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 v-for="{ value, label } in setTypes" :key="value" :label="value">{{
|
||||
label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button type="primary" @click="addApprover" v-if="approverConfig.settype == 1"
|
||||
>添加/修改成员</el-button
|
||||
>
|
||||
<p class="selected_list" v-if="approverConfig.settype == 1">
|
||||
<span v-for="(item, index) in approverConfig.nodeUserList" :key="index"
|
||||
>{{ item.name }}
|
||||
<img
|
||||
src="@/assets/images/add-close1.png"
|
||||
@click="removeEle(approverConfig.nodeUserList, item, 'targetId')"
|
||||
/>
|
||||
</span>
|
||||
<a
|
||||
v-if="approverConfig.nodeUserList.length != 0"
|
||||
@click="approverConfig.nodeUserList = []"
|
||||
>清除</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="approver_manager" v-if="approverConfig.settype == 2">
|
||||
<p>
|
||||
<span>发起人的：</span>
|
||||
<select v-model="approverConfig.directorLevel">
|
||||
<option v-for="item in directorMaxLevel" :value="item" :key="item"
|
||||
>{{ item == 1 ? '直接' : '第' + item + '级' }}主管</option
|
||||
>
|
||||
</select>
|
||||
</p>
|
||||
<p class="tip">找不到主管时，由上级主管代审批</p>
|
||||
</div>
|
||||
<div class="approver_self" v-if="approverConfig.settype == 5">
|
||||
<p>该审批节点设置“发起人自己”后，审批人默认为发起人</p>
|
||||
</div>
|
||||
<div class="approver_self_select" v-show="approverConfig.settype == 4">
|
||||
<el-radio-group v-model="approverConfig.selectMode" style="width: 100%">
|
||||
<el-radio v-for="{ value, label } in selectModes" :label="value" :key="value">{{
|
||||
label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<h3>选择范围</h3>
|
||||
<el-radio-group
|
||||
v-model="approverConfig.selectRange"
|
||||
style="width: 100%"
|
||||
@change="changeRange"
|
||||
>
|
||||
<el-radio v-for="{ value, label } in selectRanges" :label="value" :key="value">{{
|
||||
label
|
||||
}}</el-radio>
|
||||
</el-radio-group>
|
||||
<template v-if="approverConfig.selectRange == 2 || approverConfig.selectRange == 3">
|
||||
<el-button type="primary" @click="addApprover" v-if="approverConfig.selectRange == 2"
|
||||
>添加/修改成员</el-button
|
||||
>
|
||||
<el-button type="primary" @click="addRoleApprover" v-else>添加/修改角色</el-button>
|
||||
<p class="selected_list">
|
||||
<span v-for="(item, index) in approverConfig.nodeUserList" :key="index"
|
||||
>{{ item.name }}
|
||||
<img
|
||||
src="@/assets/images/add-close1.png"
|
||||
@click="removeEle(approverConfig.nodeUserList, item, 'targetId')"
|
||||
/>
|
||||
</span>
|
||||
<a
|
||||
v-if="approverConfig.nodeUserList.length != 0 && approverConfig.selectRange != 1"
|
||||
@click="approverConfig.nodeUserList = []"
|
||||
>清除</a
|
||||
>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<div class="approver_manager" v-if="approverConfig.settype == 7">
|
||||
<p>审批终点</p>
|
||||
<p style="padding-bottom: 20px">
|
||||
<span>发起人的：</span>
|
||||
<select v-model="approverConfig.examineEndDirectorLevel">
|
||||
<option v-for="item in directorMaxLevel" :value="item" :key="item"
|
||||
>{{ item == 1 ? '最高' : '第' + item }}层级主管</option
|
||||
>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="approver_some"
|
||||
v-if="
|
||||
(approverConfig.settype == 1 && approverConfig.nodeUserList.length > 1) ||
|
||||
approverConfig.settype == 2 ||
|
||||
(approverConfig.settype == 4 && approverConfig.selectMode == 2)
|
||||
"
|
||||
>
|
||||
<p>多人审批时采用的审批方式</p>
|
||||
<el-radio-group v-model="approverConfig.examineMode" class="clear">
|
||||
<el-radio :label="1">依次审批</el-radio>
|
||||
<br />
|
||||
<el-radio :label="2" v-if="approverConfig.settype != 2"
|
||||
>会签(须所有审批人同意)</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div
|
||||
class="approver_some"
|
||||
v-if="approverConfig.settype == 2 || approverConfig.settype == 7"
|
||||
>
|
||||
<p>审批人为空时</p>
|
||||
<el-radio-group v-model="approverConfig.noHanderAction" class="clear">
|
||||
<el-radio :label="1">自动审批通过/不允许发起</el-radio>
|
||||
<br />
|
||||
<el-radio :label="2">转交给审核管理员</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-drawer__footer clear">
|
||||
<el-button type="primary" @click="saveApprover">确 定</el-button>
|
||||
<el-button @click="closeDrawer">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
|
||||
import { setTypes, selectModes, selectRanges } from '../util'
|
||||
import { removeEle, setApproverStr } from '../util'
|
||||
let props = defineProps({
|
||||
directorMaxLevel: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
let approverConfig = ref({})
|
||||
let approverVisible = ref(false)
|
||||
let approverRoleVisible = ref(false)
|
||||
let checkedRoleList = ref([])
|
||||
let checkedList = ref([])
|
||||
let store = useWorkFlowStoreWithOut()
|
||||
let { setApproverConfig, setApprover } = store
|
||||
let approverConfig1 = computed(() => store.approverConfig1)
|
||||
let approverDrawer = computed(() => store.approverDrawer)
|
||||
let visible = computed({
|
||||
get() {
|
||||
return approverDrawer.value
|
||||
},
|
||||
set() {
|
||||
closeDrawer()
|
||||
}
|
||||
})
|
||||
watch(approverConfig1, (val: any) => {
|
||||
approverConfig.value = val.value
|
||||
})
|
||||
let changeRange = () => {
|
||||
approverConfig.value.nodeUserList = []
|
||||
}
|
||||
const changeType = (val) => {
|
||||
approverConfig.value.nodeUserList = []
|
||||
approverConfig.value.examineMode = 1
|
||||
approverConfig.value.noHanderAction = 2
|
||||
if (val == 2) {
|
||||
approverConfig.value.directorLevel = 1
|
||||
} else if (val == 4) {
|
||||
approverConfig.value.selectMode = 1
|
||||
approverConfig.value.selectRange = 1
|
||||
} else if (val == 7) {
|
||||
approverConfig.value.examineEndDirectorLevel = 1
|
||||
}
|
||||
}
|
||||
const addApprover = () => {
|
||||
approverVisible.value = true
|
||||
checkedList.value = approverConfig.value.nodeUserList
|
||||
}
|
||||
const addRoleApprover = () => {
|
||||
approverRoleVisible.value = true
|
||||
checkedRoleList.value = approverConfig.value.nodeUserList
|
||||
}
|
||||
const sureApprover = (data) => {
|
||||
approverConfig.value.nodeUserList = data
|
||||
approverVisible.value = false
|
||||
}
|
||||
const sureRoleApprover = (data) => {
|
||||
approverConfig.value.nodeUserList = data
|
||||
approverRoleVisible.value = false
|
||||
}
|
||||
const saveApprover = () => {
|
||||
approverConfig.value.error = !setApproverStr(approverConfig.value)
|
||||
setApproverConfig({
|
||||
value: approverConfig.value,
|
||||
flag: true,
|
||||
id: approverConfig1.value.id
|
||||
})
|
||||
closeDrawer()
|
||||
}
|
||||
const closeDrawer = () => {
|
||||
setApprover(false)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.set_promoter {
|
||||
.approver_content {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.approver_self_select,
|
||||
.approver_content {
|
||||
.el-button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.approver_content,
|
||||
.approver_some,
|
||||
.approver_self_select {
|
||||
.el-radio-group {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
width: 27%;
|
||||
margin-bottom: 20px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.approver_manager p {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.approver_manager select {
|
||||
width: 420px;
|
||||
height: 32px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(217, 217, 217, 1);
|
||||
}
|
||||
|
||||
.approver_manager p.tip {
|
||||
margin: 10px 0 22px 0;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #f8642d;
|
||||
}
|
||||
|
||||
.approver_self {
|
||||
padding: 28px 20px;
|
||||
}
|
||||
|
||||
.approver_self_select,
|
||||
.approver_manager,
|
||||
.approver_content,
|
||||
.approver_some {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.approver_manager p:first-of-type,
|
||||
.approver_some p {
|
||||
line-height: 19px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.approver_self_select h3 {
|
||||
margin: 5px 0 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
src/components/SimpleProcessDesigner/src/nodeWrap.vue
Normal file
298
src/components/SimpleProcessDesigner/src/nodeWrap.vue
Normal file
@ -0,0 +1,298 @@
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<!--
|
||||
* @Date: 2022-09-21 14:41:53
|
||||
* @LastEditors: StavinLi 495727881@qq.com
|
||||
* @LastEditTime: 2023-05-24 15:20:24
|
||||
* @FilePath: /Workflow-Vue3/src/components/nodeWrap.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="node-wrap" v-if="nodeConfig.type < 3">
|
||||
<div class="node-wrap-box" :class="(nodeConfig.type == 0 ? 'start-node ' : '') +(isTried && nodeConfig.error ? 'active error' : '')">
|
||||
<div class="title" :style="`background: rgb(${bgColors[nodeConfig.type]});`">
|
||||
<span v-if="nodeConfig.type == 0">{{ nodeConfig.nodeName }}</span>
|
||||
<template v-else>
|
||||
<span class="iconfont">{{nodeConfig.type == 1?'':''}}</span>
|
||||
<input
|
||||
v-if="isInput"
|
||||
type="text"
|
||||
class="ant-input editable-title-input"
|
||||
@blur="blurEvent()"
|
||||
@focus="$event.currentTarget.select()"
|
||||
v-focus
|
||||
v-model="nodeConfig.nodeName"
|
||||
:placeholder="defaultText"
|
||||
/>
|
||||
<span v-else class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
|
||||
<i class="anticon anticon-close close" @click="delNode"></i>
|
||||
</template>
|
||||
</div>
|
||||
<div class="content" @click="setPerson">
|
||||
<div class="text">
|
||||
<span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
|
||||
{{showText}}
|
||||
</div>
|
||||
<i class="anticon anticon-right arrow"></i>
|
||||
</div>
|
||||
<div class="error_tip" v-if="isTried && nodeConfig.error">
|
||||
<i class="anticon anticon-exclamation-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
<addNode v-model:childNodeP="nodeConfig.childNode" />
|
||||
</div>
|
||||
<div class="branch-wrap" v-if="nodeConfig.type == 4">
|
||||
<div class="branch-box-wrap">
|
||||
<div class="branch-box">
|
||||
<button class="add-branch" @click="addTerm">添加条件</button>
|
||||
<div class="col-box" v-for="(item, index) in nodeConfig.conditionNodes" :key="index">
|
||||
<div class="condition-node">
|
||||
<div class="condition-node-box">
|
||||
<div class="auto-judge" :class="isTried && item.error ? 'error active' : ''">
|
||||
<div class="sort-left" v-if="index != 0" @click="arrTransfer(index, -1)"><</div>
|
||||
<div class="title-wrapper">
|
||||
<input
|
||||
v-if="isInputList[index]"
|
||||
type="text"
|
||||
class="ant-input editable-title-input"
|
||||
@blur="blurEvent(index)"
|
||||
@focus="$event.currentTarget.select()"
|
||||
v-focus
|
||||
v-model="item.nodeName"
|
||||
/>
|
||||
<span v-else class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
|
||||
<span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
|
||||
<i class="anticon anticon-close close" @click="delTerm(index)"></i>
|
||||
</div>
|
||||
<div class="sort-right" v-if="index != nodeConfig.conditionNodes.length - 1" @click="arrTransfer(index)">></div>
|
||||
<div class="content" @click="setPerson(item.priorityLevel)">{{ conditionStr(nodeConfig, index) }}</div>
|
||||
<div class="error_tip" v-if="isTried && item.error">
|
||||
<i class="anticon anticon-exclamation-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
<addNode v-model:childNodeP="item.childNode" />
|
||||
</div>
|
||||
</div>
|
||||
<nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
|
||||
<template v-if="index == 0">
|
||||
<div class="top-left-cover-line"></div>
|
||||
<div class="bottom-left-cover-line"></div>
|
||||
</template>
|
||||
<template v-if="index == nodeConfig.conditionNodes.length - 1">
|
||||
<div class="top-right-cover-line"></div>
|
||||
<div class="bottom-right-cover-line"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<addNode v-model:childNodeP="nodeConfig.childNode" />
|
||||
</div>
|
||||
</div>
|
||||
<nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
|
||||
</template>
|
||||
<script setup>
|
||||
import addNode from './addNode.vue'
|
||||
import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue'
|
||||
import {
|
||||
arrToStr,
|
||||
conditionStr,
|
||||
setApproverStr,
|
||||
copyerStr,
|
||||
bgColors,
|
||||
placeholderList
|
||||
} from './util'
|
||||
import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
|
||||
let _uid = getCurrentInstance().uid
|
||||
|
||||
let props = defineProps({
|
||||
nodeConfig: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
flowPermission: {
|
||||
type: Object,
|
||||
// eslint-disable-next-line vue/require-valid-default-prop
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
let defaultText = computed(() => {
|
||||
return placeholderList[props.nodeConfig.type]
|
||||
})
|
||||
let showText = computed(() => {
|
||||
if (props.nodeConfig.type == 0) return arrToStr(props.flowPermission) || '所有人'
|
||||
if (props.nodeConfig.type == 1) return setApproverStr(props.nodeConfig)
|
||||
return copyerStr(props.nodeConfig)
|
||||
})
|
||||
|
||||
let isInputList = ref([])
|
||||
let isInput = ref(false)
|
||||
const resetConditionNodesErr = () => {
|
||||
for (var i = 0; i < props.nodeConfig.conditionNodes.length; i++) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes[i].error =
|
||||
conditionStr(props.nodeConfig, i) == '请设置条件' &&
|
||||
i != props.nodeConfig.conditionNodes.length - 1
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.nodeConfig.type == 1) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.error = !setApproverStr(props.nodeConfig)
|
||||
} else if (props.nodeConfig.type == 2) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.error = !copyerStr(props.nodeConfig)
|
||||
} else if (props.nodeConfig.type == 4) {
|
||||
resetConditionNodesErr()
|
||||
}
|
||||
})
|
||||
let emits = defineEmits(['update:flowPermission', 'update:nodeConfig'])
|
||||
let store = useWorkFlowStoreWithOut()
|
||||
let {
|
||||
setPromoter,
|
||||
setApprover,
|
||||
setCopyer,
|
||||
setCondition,
|
||||
setFlowPermission,
|
||||
setApproverConfig,
|
||||
setCopyerConfig,
|
||||
setConditionsConfig
|
||||
} = store
|
||||
let isTried = computed(() => store.isTried)
|
||||
let flowPermission1 = computed(() => store.flowPermission1)
|
||||
let approverConfig1 = computed(() => store.approverConfig1)
|
||||
let copyerConfig1 = computed(() => store.copyerConfig1)
|
||||
let conditionsConfig1 = computed(() => store.conditionsConfig1)
|
||||
watch(flowPermission1, (flow) => {
|
||||
if (flow.flag && flow.id === _uid) {
|
||||
emits('update:flowPermission', flow.value)
|
||||
}
|
||||
})
|
||||
watch(approverConfig1, (approver) => {
|
||||
if (approver.flag && approver.id === _uid) {
|
||||
emits('update:nodeConfig', approver.value)
|
||||
}
|
||||
})
|
||||
watch(copyerConfig1, (copyer) => {
|
||||
if (copyer.flag && copyer.id === _uid) {
|
||||
emits('update:nodeConfig', copyer.value)
|
||||
}
|
||||
})
|
||||
watch(conditionsConfig1, (condition) => {
|
||||
if (condition.flag && condition.id === _uid) {
|
||||
emits('update:nodeConfig', condition.value)
|
||||
}
|
||||
})
|
||||
|
||||
const clickEvent = (index) => {
|
||||
if (index || index === 0) {
|
||||
isInputList.value[index] = true
|
||||
} else {
|
||||
isInput.value = true
|
||||
}
|
||||
}
|
||||
const blurEvent = (index) => {
|
||||
if (index || index === 0) {
|
||||
isInputList.value[index] = false
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes[index].nodeName =
|
||||
props.nodeConfig.conditionNodes[index].nodeName || '条件'
|
||||
} else {
|
||||
isInput.value = false
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.nodeName = props.nodeConfig.nodeName || defaultText
|
||||
}
|
||||
}
|
||||
const delNode = () => {
|
||||
emits('update:nodeConfig', props.nodeConfig.childNode)
|
||||
}
|
||||
const addTerm = () => {
|
||||
let len = props.nodeConfig.conditionNodes.length + 1
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes.push({
|
||||
nodeName: '条件' + len,
|
||||
type: 3,
|
||||
priorityLevel: len,
|
||||
conditionList: [],
|
||||
nodeUserList: [],
|
||||
childNode: null
|
||||
})
|
||||
resetConditionNodesErr()
|
||||
emits('update:nodeConfig', props.nodeConfig)
|
||||
}
|
||||
const delTerm = (index) => {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes.splice(index, 1)
|
||||
props.nodeConfig.conditionNodes.map((item, index) => {
|
||||
item.priorityLevel = index + 1
|
||||
item.nodeName = `条件${index + 1}`
|
||||
})
|
||||
resetConditionNodesErr()
|
||||
emits('update:nodeConfig', props.nodeConfig)
|
||||
if (props.nodeConfig.conditionNodes.length == 1) {
|
||||
if (props.nodeConfig.childNode) {
|
||||
if (props.nodeConfig.conditionNodes[0].childNode) {
|
||||
reData(props.nodeConfig.conditionNodes[0].childNode, props.nodeConfig.childNode)
|
||||
} else {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes[0].childNode = props.nodeConfig.childNode
|
||||
}
|
||||
}
|
||||
emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode)
|
||||
}
|
||||
}
|
||||
const reData = (data, addData) => {
|
||||
if (!data.childNode) {
|
||||
data.childNode = addData
|
||||
} else {
|
||||
reData(data.childNode, addData)
|
||||
}
|
||||
}
|
||||
const setPerson = (priorityLevel) => {
|
||||
var { type } = props.nodeConfig
|
||||
if (type == 0) {
|
||||
setPromoter(true)
|
||||
setFlowPermission({
|
||||
value: props.flowPermission,
|
||||
flag: false,
|
||||
id: _uid
|
||||
})
|
||||
} else if (type == 1) {
|
||||
setApprover(true)
|
||||
setApproverConfig({
|
||||
value: {
|
||||
...JSON.parse(JSON.stringify(props.nodeConfig)),
|
||||
...{ settype: props.nodeConfig.settype ? props.nodeConfig.settype : 1 }
|
||||
},
|
||||
flag: false,
|
||||
id: _uid
|
||||
})
|
||||
} else if (type == 2) {
|
||||
setCopyer(true)
|
||||
setCopyerConfig({
|
||||
value: JSON.parse(JSON.stringify(props.nodeConfig)),
|
||||
flag: false,
|
||||
id: _uid
|
||||
})
|
||||
} else {
|
||||
setCondition(true)
|
||||
setConditionsConfig({
|
||||
value: JSON.parse(JSON.stringify(props.nodeConfig)),
|
||||
priorityLevel,
|
||||
flag: false,
|
||||
id: _uid
|
||||
})
|
||||
}
|
||||
}
|
||||
const arrTransfer = (index, type = 1) => {
|
||||
//向左-1,向右1
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.nodeConfig.conditionNodes[index] = props.nodeConfig.conditionNodes.splice(
|
||||
index + type,
|
||||
1,
|
||||
props.nodeConfig.conditionNodes[index]
|
||||
)[0]
|
||||
props.nodeConfig.conditionNodes.map((item, index) => {
|
||||
item.priorityLevel = index + 1
|
||||
})
|
||||
resetConditionNodesErr()
|
||||
emits('update:nodeConfig', props.nodeConfig)
|
||||
}
|
||||
</script>
|
||||
165
src/components/SimpleProcessDesigner/src/util.ts
Normal file
165
src/components/SimpleProcessDesigner/src/util.ts
Normal file
@ -0,0 +1,165 @@
|
||||
/**
|
||||
* todo
|
||||
*/
|
||||
export const arrToStr = (arr?: [{ name: string }]) => {
|
||||
if (arr) {
|
||||
return arr
|
||||
.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
.toString()
|
||||
}
|
||||
}
|
||||
|
||||
export const setApproverStr = (nodeConfig: any) => {
|
||||
if (nodeConfig.settype == 1) {
|
||||
if (nodeConfig.nodeUserList.length == 1) {
|
||||
return nodeConfig.nodeUserList[0].name
|
||||
} else if (nodeConfig.nodeUserList.length > 1) {
|
||||
if (nodeConfig.examineMode == 1) {
|
||||
return arrToStr(nodeConfig.nodeUserList)
|
||||
} else if (nodeConfig.examineMode == 2) {
|
||||
return nodeConfig.nodeUserList.length + '人会签'
|
||||
}
|
||||
}
|
||||
} else if (nodeConfig.settype == 2) {
|
||||
const level =
|
||||
nodeConfig.directorLevel == 1 ? '直接主管' : '第' + nodeConfig.directorLevel + '级主管'
|
||||
if (nodeConfig.examineMode == 1) {
|
||||
return level
|
||||
} else if (nodeConfig.examineMode == 2) {
|
||||
return level + '会签'
|
||||
}
|
||||
} else if (nodeConfig.settype == 4) {
|
||||
if (nodeConfig.selectRange == 1) {
|
||||
return '发起人自选'
|
||||
} else {
|
||||
if (nodeConfig.nodeUserList.length > 0) {
|
||||
if (nodeConfig.selectRange == 2) {
|
||||
return '发起人自选'
|
||||
} else {
|
||||
return '发起人从' + nodeConfig.nodeUserList[0].name + '中自选'
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
} else if (nodeConfig.settype == 5) {
|
||||
return '发起人自己'
|
||||
} else if (nodeConfig.settype == 7) {
|
||||
return '从直接主管到通讯录中级别最高的第' + nodeConfig.examineEndDirectorLevel + '个层级主管'
|
||||
}
|
||||
}
|
||||
|
||||
export const copyerStr = (nodeConfig: any) => {
|
||||
if (nodeConfig.nodeUserList.length != 0) {
|
||||
return arrToStr(nodeConfig.nodeUserList)
|
||||
} else {
|
||||
if (nodeConfig.ccSelfSelectFlag == 1) {
|
||||
return '发起人自选'
|
||||
}
|
||||
}
|
||||
}
|
||||
export const conditionStr = (nodeConfig, index) => {
|
||||
const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
|
||||
if (conditionList.length == 0) {
|
||||
return index == nodeConfig.conditionNodes.length - 1 &&
|
||||
nodeConfig.conditionNodes[0].conditionList.length != 0
|
||||
? '其他条件进入此流程'
|
||||
: '请设置条件'
|
||||
} else {
|
||||
let str = ''
|
||||
for (let i = 0; i < conditionList.length; i++) {
|
||||
const {
|
||||
columnId,
|
||||
columnType,
|
||||
showType,
|
||||
showName,
|
||||
optType,
|
||||
zdy1,
|
||||
opt1,
|
||||
zdy2,
|
||||
opt2,
|
||||
fixedDownBoxValue
|
||||
} = conditionList[i]
|
||||
if (columnId == 0) {
|
||||
if (nodeUserList.length != 0) {
|
||||
str += '发起人属于：'
|
||||
str +=
|
||||
nodeUserList
|
||||
.map((item) => {
|
||||
return item.name
|
||||
})
|
||||
.join('或') + ' 并且 '
|
||||
}
|
||||
}
|
||||
if (columnType == 'String' && showType == '3') {
|
||||
if (zdy1) {
|
||||
str += showName + '属于：' + dealStr(zdy1, JSON.parse(fixedDownBoxValue)) + ' 并且 '
|
||||
}
|
||||
}
|
||||
if (columnType == 'Double') {
|
||||
if (optType != 6 && zdy1) {
|
||||
const optTypeStr = ['', '<', '>', '≤', '=', '≥'][optType]
|
||||
str += `${showName} ${optTypeStr} ${zdy1} 并且 `
|
||||
} else if (optType == 6 && zdy1 && zdy2) {
|
||||
str += `${zdy1} ${opt1} ${showName} ${opt2} ${zdy2} 并且 `
|
||||
}
|
||||
}
|
||||
}
|
||||
return str ? str.substring(0, str.length - 4) : '请设置条件'
|
||||
}
|
||||
}
|
||||
|
||||
export const dealStr = (str: string, obj) => {
|
||||
const arr = []
|
||||
const list = str.split(',')
|
||||
for (const elem in obj) {
|
||||
list.map((item) => {
|
||||
if (item == elem) {
|
||||
arr.push(obj[elem].value)
|
||||
}
|
||||
})
|
||||
}
|
||||
return arr.join('或')
|
||||
}
|
||||
|
||||
export const removeEle = (arr, elem, key = 'id') => {
|
||||
let includesIndex
|
||||
arr.map((item, index) => {
|
||||
if (item[key] == elem[key]) {
|
||||
includesIndex = index
|
||||
}
|
||||
})
|
||||
arr.splice(includesIndex, 1)
|
||||
}
|
||||
|
||||
export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250']
|
||||
export const placeholderList = ['发起人', '审核人', '抄送人']
|
||||
export const setTypes = [
|
||||
{ value: 1, label: '指定成员' },
|
||||
{ value: 2, label: '主管' },
|
||||
{ value: 4, label: '发起人自选' },
|
||||
{ value: 5, label: '发起人自己' },
|
||||
{ value: 7, label: '连续多级主管' }
|
||||
]
|
||||
|
||||
export const selectModes = [
|
||||
{ value: 1, label: '选一个人' },
|
||||
{ value: 2, label: '选多个人' }
|
||||
]
|
||||
|
||||
export const selectRanges = [
|
||||
{ value: 1, label: '全公司' },
|
||||
{ value: 2, label: '指定成员' },
|
||||
{ value: 3, label: '指定角色' }
|
||||
]
|
||||
|
||||
export const optTypes = [
|
||||
{ value: '1', label: '小于' },
|
||||
{ value: '2', label: '大于' },
|
||||
{ value: '3', label: '小于等于' },
|
||||
{ value: '4', label: '等于' },
|
||||
{ value: '5', label: '大于等于' },
|
||||
{ value: '6', label: '介于两个数之间' }
|
||||
]
|
||||
1292
src/components/SimpleProcessDesigner/theme/workflow.css
Normal file
1292
src/components/SimpleProcessDesigner/theme/workflow.css
Normal file
File diff suppressed because it is too large
Load Diff
55
src/store/modules/simpleWorkflow.ts
Normal file
55
src/store/modules/simpleWorkflow.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { store } from '../index'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useWorkFlowStore = defineStore('simpleWorkflow', {
|
||||
state: () => ({
|
||||
tableId: '',
|
||||
isTried: false,
|
||||
promoterDrawer: false,
|
||||
flowPermission1: {},
|
||||
approverDrawer: false,
|
||||
approverConfig1: {},
|
||||
copyerDrawer: false,
|
||||
copyerConfig1: {},
|
||||
conditionDrawer: false,
|
||||
conditionsConfig1: {
|
||||
conditionNodes: []
|
||||
}
|
||||
}),
|
||||
actions: {
|
||||
setTableId(payload) {
|
||||
this.tableId = payload
|
||||
},
|
||||
setIsTried(payload) {
|
||||
this.isTried = payload
|
||||
},
|
||||
setPromoter(payload) {
|
||||
this.promoterDrawer = payload
|
||||
},
|
||||
setFlowPermission(payload) {
|
||||
this.flowPermission1 = payload
|
||||
},
|
||||
setApprover(payload) {
|
||||
this.approverDrawer = payload
|
||||
},
|
||||
setApproverConfig(payload) {
|
||||
this.approverConfig1 = payload
|
||||
},
|
||||
setCopyer(payload) {
|
||||
this.copyerDrawer = payload
|
||||
},
|
||||
setCopyerConfig(payload) {
|
||||
this.copyerConfig1 = payload
|
||||
},
|
||||
setCondition(payload) {
|
||||
this.conditionDrawer = payload
|
||||
},
|
||||
setConditionsConfig(payload) {
|
||||
this.conditionsConfig1 = payload
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const useWorkFlowStoreWithOut = () => {
|
||||
return useWorkFlowStore(store)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user