Skip to content

phsl / admin

Go to a project
Commit 4f839136 by jason
Options

仿钉钉设计流程：增加发起人、条件分支节点

parent 253d7071
Showing with 179 additions and 119 deletions
src/components/SimpleProcessDesigner/src/addNode.vue
...@@ -24,6 +24,12 @@ ...@@ -24,6 +24,12 @@
<p>条件分支</p> <p>条件分支</p>
</a> </a>
--> -->
<a class="add-node-popover-item condition" @click="addType(4)">
<div class="item-wrapper">
<span class="iconfont"></span>
</div>
<p>条件分支</p>
</a>
</div> </div>
<template #reference> <template #reference>
<button class="btn" type="button"> <button class="btn" type="button">
...@@ -36,6 +42,7 @@ ...@@ -36,6 +42,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import { generateUUID } from '@/utils'
let props = defineProps({ let props = defineProps({
childNodeP: { childNodeP: {
type: Object, type: Object,
...@@ -89,7 +96,8 @@ const addType = (type) => { ...@@ -89,7 +96,8 @@ const addType = (type) => {
emits('update:childNodeP', { emits('update:childNodeP', {
name: '路由', name: '路由',
type: 4, type: 4,
childNode: null, id : 'GateWay_'+ generateUUID(),
childNode: props.childNodeP,
conditionNodes: [ conditionNodes: [
{ {
name: '条件1', name: '条件1',
...@@ -97,15 +105,13 @@ const addType = (type) => { ...@@ -97,15 +105,13 @@ const addType = (type) => {
type: 3, type: 3,
priorityLevel: 1, priorityLevel: 1,
conditionList: [], conditionList: [],
nodeUserList: [], childNode: null
// childNode: props.childNodeP
}, },
{ {
name: '条件2', name: '其它情况',
type: 3, type: 3,
priorityLevel: 2, priorityLevel: 2,
conditionList: [], conditionList: [],
nodeUserList: [],
childNode: null childNode: null
} }
] ]
...@@ -115,55 +121,52 @@ const addType = (type) => { ...@@ -115,55 +121,52 @@ const addType = (type) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.add-node-btn-box { .add-node-btn-box {
width: 240px; position: relative;
display: inline-flex; display: inline-flex;
width: 240px;
-ms-flex-negative: 0; -ms-flex-negative: 0;
flex-shrink: 0; flex-shrink: 0;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-ms-flex-positive: 1; -ms-flex-positive: 1;
position: relative;
&:before { &::before {
content: '';
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1; z-index: -1;
margin: auto;
width: 2px; width: 2px;
height: 100%; height: 100%;
margin: auto;
background-color: #cacaca; background-color: #cacaca;
content: '';
} }
.add-node-btn { .add-node-btn {
user-select: none; display: flex;
width: 240px; width: 240px;
padding: 20px 0 32px; padding: 20px 0 32px;
display: flex;
-webkit-box-pack: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-box-pack: center;
user-select: none;
flex-grow: 1; flex-grow: 1;
.btn { .btn {
outline: none; position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
width: 30px; width: 30px;
height: 30px; height: 30px;
line-height: 30px;
background: #3296fa; background: #3296fa;
border-radius: 50%;
position: relative;
border: none; border: none;
line-height: 30px; border-radius: 50%;
outline: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); -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); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.iconfont { .iconfont {
color: #fff;
font-size: 16px; font-size: 16px;
color: #fff;
} }
&:hover { &:hover {
...@@ -172,8 +175,8 @@ const addType = (type) => { ...@@ -172,8 +175,8 @@ const addType = (type) => {
} }
&:active { &:active {
transform: none;
background: #1e83e9; background: #1e83e9;
transform: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
} }
} }
...@@ -191,7 +194,6 @@ const addType = (type) => { ...@@ -191,7 +194,6 @@ const addType = (type) => {
color: #191f25 !important; color: #191f25 !important;
.item-wrapper { .item-wrapper {
user-select: none;
display: inline-block; display: inline-block;
width: 80px; width: 80px;
height: 80px; height: 80px;
...@@ -200,6 +202,7 @@ const addType = (type) => { ...@@ -200,6 +202,7 @@ const addType = (type) => {
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
border-radius: 50%; border-radius: 50%;
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);
user-select: none;
.iconfont { .iconfont {
font-size: 35px; font-size: 35px;
...@@ -238,8 +241,8 @@ const addType = (type) => { ...@@ -238,8 +241,8 @@ const addType = (type) => {
&:active { &:active {
.item-wrapper { .item-wrapper {
box-shadow: none;
background: #eaeaea; background: #eaeaea;
box-shadow: none;
} }
.iconfont { .iconfont {
......
src/components/SimpleProcessDesigner/src/consts.ts
export enum NodeType { export enum NodeType {
//// 0 发起人 1审批 2抄送 3条件 4路由 //// -1 根节点流程开始节点 0 发起人 1审批 2抄送 3条件 4路由
ROOT_NODE = -1,
/** /**
* 发起人节点 * 发起人节点
*/ */
...@@ -37,11 +38,10 @@ NODE_TITLE.set(NodeType.CC_USER_NODE, '抄送人') ...@@ -37,11 +38,10 @@ NODE_TITLE.set(NodeType.CC_USER_NODE, '抄送人')
export type WorkFlowNode = { export type WorkFlowNode = {
id: string, id: string,
parentId: string,
type: NodeType, type: NodeType,
name: string, name: string,
attributes: Map<string,any>, attributes: Object | undefined,
// 操作人 // 操作人
childNode: WorkFlowNode, childNode?: WorkFlowNode | undefined,
conditionNodes: WorkFlowNode[] conditionNodes: WorkFlowNode[] | undefined
} }
\ No newline at end of file
src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed, toRaw } from 'vue' import { ref, watch, computed, toRaw } from 'vue'
import { approveMethods, setApproverStr } from '../util' import { approveMethods } from '../util'
import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow' import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
...@@ -165,7 +165,7 @@ import * as DeptApi from '@/api/system/dept' ...@@ -165,7 +165,7 @@ import * as DeptApi from '@/api/system/dept'
import * as PostApi from '@/api/system/post' import * as PostApi from '@/api/system/post'
import * as UserApi from '@/api/system/user' import * as UserApi from '@/api/system/user'
import * as UserGroupApi from '@/api/bpm/userGroup' import * as UserGroupApi from '@/api/bpm/userGroup'
let props = defineProps({ defineProps({
directorMaxLevel: { directorMaxLevel: {
type: Number, type: Number,
default: 0 default: 0
...@@ -182,12 +182,8 @@ const candidateConfig = ref({ ...@@ -182,12 +182,8 @@ const candidateConfig = ref({
approveMethod: undefined approveMethod: undefined
}) })
let approverConfig = ref({}) let approverConfig = ref({})
let approverVisible = ref(false)
let approverRoleVisible = ref(false)
let checkedRoleList = ref([])
let checkedList = ref([])
let store = useWorkFlowStoreWithOut() let store = useWorkFlowStoreWithOut()
let { setApproverConfig, setApprover, setUserTaskConfig } = store let { setApprover, setUserTaskConfig } = store
let approverConfig1 = computed(() => store.approverConfig1) let approverConfig1 = computed(() => store.approverConfig1)
let approverDrawer = computed(() => store.approverDrawer) let approverDrawer = computed(() => store.approverDrawer)
const userTaskConfig = computed(() => store.userTaskConfig) const userTaskConfig = computed(() => store.userTaskConfig)
...@@ -220,47 +216,7 @@ watch(userTaskConfig, (val) => { ...@@ -220,47 +216,7 @@ watch(userTaskConfig, (val) => {
watch(approverConfig1, (val) => { watch(approverConfig1, (val) => {
approverConfig.value = val.value 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 saveConfig = () => { const saveConfig = () => {
const rawConfig = toRaw(userTaskConfig.value) const rawConfig = toRaw(userTaskConfig.value)
const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value); const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
......
src/components/SimpleProcessDesigner/src/util.ts
...@@ -92,10 +92,22 @@ export const copyerStr = (nodeConfig: any) => { ...@@ -92,10 +92,22 @@ export const copyerStr = (nodeConfig: any) => {
export const conditionStr = (nodeConfig, index) => { export const conditionStr = (nodeConfig, index) => {
const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index] const { conditionList, nodeUserList } = nodeConfig.conditionNodes[index]
if (conditionList.length == 0) { if (conditionList.length == 0) {
return index == nodeConfig.conditionNodes.length - 1 && // return index == nodeConfig.conditionNodes.length - 1 &&
nodeConfig.conditionNodes[0].conditionList.length != 0 // nodeConfig.conditionNodes[0].conditionList.length != 0
? '其他条件进入此流程' // ? '其他条件进入此流程'
: '请设置条件' // : '请设置条件'
// return index == nodeConfig.conditionNodes.length - 1 &&
// nodeConfig.conditionNodes[0].conditionList.length != 0
// ? '其他条件进入此流程'
// : '请设置条件'
console.log('index===>', index);
console.log('nodeConfig.conditionNodes.length===>', nodeConfig.conditionNodes.length);
if( index === nodeConfig.conditionNodes.length - 1) {
return '其它情况将进入该分支'
} else {
return '请设置条件'
}
} else { } else {
let str = '' let str = ''
for (let i = 0; i < conditionList.length; i++) { for (let i = 0; i < conditionList.length; i++) {
...@@ -163,7 +175,7 @@ export const removeEle = (arr, elem, key = 'id') => { ...@@ -163,7 +175,7 @@ export const removeEle = (arr, elem, key = 'id') => {
arr.splice(includesIndex, 1) arr.splice(includesIndex, 1)
} }
export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250'] export const bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250','50, 150, 250','248, 107, 248']
export const placeholderList = ['发起人', '审核人', '抄送人'] export const placeholderList = ['发起人', '审核人', '抄送人']
export const setTypes = [ export const setTypes = [
{ value: 1, label: '指定成员' }, { value: 1, label: '指定成员' },
......
src/components/SimpleProcessDesigner/theme/workflow.css
...@@ -1174,15 +1174,47 @@ html { ...@@ -1174,15 +1174,47 @@ html {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1)
} }
.dingflow-design .auto-judge .title-wrapper { /* .dingflow-design .auto-judge .title-wrapper {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
color: #15bc83; color: #15bc83;
text-align: left; text-align: left;
line-height: 16px height: 24px;
line-height: 24px;
width: 258px;
} */
.dingflow-design .title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
font-size: 12px;
border-radius: 4px 4px 0 0;
text-align: left;
height: 24px;
line-height: 24px;
width: 220px;
color: #fff;
}
.dingflow-design .title-wrapper .editable-title {
max-width: 120px;
padding-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.dingflow-design .title-wrapper .close {
padding-right: 10px;
} }
.dingflow-design .auto-judge .title-wrapper .editable-title { /* .dingflow-design .title-wrapper .priority-title {
display: inline-block;
float: right;
margin-right: 10px;
color: rgba(25, 31, 37, .56)
} */
/* .dingflow-design .auto-judge .title-wrapper .editable-title {
display: inline-block; display: inline-block;
max-width: 120px; max-width: 120px;
overflow: hidden; overflow: hidden;
...@@ -1195,7 +1227,7 @@ html { ...@@ -1195,7 +1227,7 @@ html {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
color: rgba(25, 31, 37, .56) color: rgba(25, 31, 37, .56)
} } */
.dingflow-design .auto-judge .placeholder { .dingflow-design .auto-judge .placeholder {
color: #bfbfbf color: #bfbfbf
......
src/views/bpm/simpleWorkflow/index.vue
...@@ -8,31 +8,17 @@ ...@@ -8,31 +8,17 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="box-scale"> <div class="box-scale">
<!-- <div class="start-event-node"> <div class="start-event-node">
<div class="start-event-node-text">流程开始</div> <div class="start-event-node-circle">开始</div>
<div class="start-event-node-circle"></div> </div>
<div class="start-event-node-flow"> <div class="start-event-node-line"></div>
<el-popover placement="right-start" 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>
</div>
<template #reference>
<button class="btn" type="button">
<span class="iconfont"></span>
</button>
</template>
</el-popover>
</div>
</div> -->
<nodeWrap v-model:nodeConfig="nodeConfig" /> <nodeWrap v-model:nodeConfig="nodeConfig" />
<div class="end-node"> <!-- <div class="end-node">
<div class="end-node-circle"></div> <div class="end-node-circle"></div>
<div class="end-node-text">流程结束</div> <div class="end-node-text">流程结束</div>
</div> -->
<div class="end-event">
<div class="end-event-circle">结束</div>
</div> </div>
</div> </div>
</section> </section>
...@@ -41,8 +27,8 @@ ...@@ -41,8 +27,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue' import nodeWrap from '@/components/SimpleProcessDesigner/src/nodeWrap.vue'
import addNode from '@/components/SimpleProcessDesigner/src/addNode.vue'
import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue' import approverDrawer from '@/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue'
import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
import { ref } from 'vue' import { ref } from 'vue'
import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple' import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
defineOptions({ name: 'SimpleWorkflowDesignEditor' }) defineOptions({ name: 'SimpleWorkflowDesignEditor' })
...@@ -51,23 +37,34 @@ const router = useRouter() // 路由 ...@@ -51,23 +37,34 @@ const router = useRouter() // 路由
const { query } = useRoute() // 路由的查询 const { query } = useRoute() // 路由的查询
const modelId = query.modelId const modelId = query.modelId
const message = useMessage() // 国际化 const message = useMessage() // 国际化
const nodeConfig = ref({ const nodeConfig = ref<WorkFlowNode>({
name: '流程开始', name: '发起人',
type: -1, type: 0,
id: 'StartEvent_' + uid, id: 'StartEvent_' + uid,
childNode: undefined childNode: undefined,
}) attributes: undefined,
conditionNodes: undefined
}
)
const test = async () => { const test = async () => {
if (!modelId) { if (!modelId) {
message.error('缺少模型 modelId 编号') message.error('缺少模型 modelId 编号')
return return
} }
const test = nodeConfig.value;
console.log('test is ', test)
console.log('nodeConfig.value ', nodeConfig.value)
const data = { const data = {
modelId: modelId, modelId: modelId,
simpleModelBody: toRaw(nodeConfig.value) simpleModelBody: toRaw(nodeConfig.value)
} }
const data1 = {
modelId: modelId,
simpleModelBody: nodeConfig.value
}
console.log('request json data is ', data) console.log('request json data is ', data)
const result = await saveBpmSimpleModel(data) console.log('request json data1 is ', data1)
const result = await saveBpmSimpleModel(data1)
console.log('save the result is ', result) console.log('save the result is ', result)
if (result) { if (result) {
message.success('修改成功') message.success('修改成功')
...@@ -91,4 +88,63 @@ onMounted(async () => { ...@@ -91,4 +88,63 @@ onMounted(async () => {
</script> </script>
<style> <style>
@import url('@/components/SimpleProcessDesigner/theme/workflow.css'); @import url('@/components/SimpleProcessDesigner/theme/workflow.css');
.end-event {
display: flex;
direction: columns;
justify-content: center;
align-items: center;
}
.end-event-circle {
display: flex;
width: 40px;
height: 40px;
font-size: 14px;
color: #f8f8fa;
background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
border-radius: 50%;
justify-content: center;
align-items: center;
}
/* .start-event-node {
color: #191f2566;
text-align: left;
border-radius: 50%;
} */
.start-event-node {
display: flex;
direction: columns;
justify-content: center;
align-items: center;
}
.start-event-node-circle {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
font-size: 14px;
color: #f8f8fa;
background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
border-radius: 50%;
}
.start-event-node-line::before {
position: absolute;
inset: 0;
z-index: -1;
width: 2px;
height: 100%;
margin: auto;
background-color: #cacaca;
content: "";
}
.start-event-node-line {
position: relative;
padding: 20px 0 32px;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment