Skip to content

phsl / admin

Go to a project
Commit c9b12c8b by jason
Options

【功能优化】仿钉钉流程设计优化

parent a43bca57
Showing with 1317 additions and 717 deletions
src/assets/svgs/bpm/simple-process-bg.svg 0 → 100644
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
\ No newline at end of file
src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
...@@ -47,7 +47,10 @@ ...@@ -47,7 +47,10 @@
/> />
<!-- 结束节点 --> <!-- 结束节点 -->
<EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" :flow-node="currentNode" /> <EndEventNode
v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
:flow-node="currentNode"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import StartUserNode from './nodes/StartUserNode.vue' import StartUserNode from './nodes/StartUserNode.vue'
......
src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
<template> <template>
<div class="simple-flow-canvas" v-loading="loading"> <div v-loading="loading">
<div class="simple-flow-container"> <SimpleProcessModel
<div class="top-area-container"> v-if="processNodeTree"
<div class="top-actions"> :flow-node="processNodeTree"
<div class="canvas-control"> :readonly="false"
<span class="control-scale-group"> @save="saveSimpleFlowModel"
<span class="control-scale-button"> <Icon icon="ep:plus" @click="zoomOut()" /></span> />
<span class="control-scale-label">{{ scaleValue }}%</span>
<span class="control-scale-button"><Icon icon="ep:minus" @click="zoomIn()" /></span>
</span>
</div>
<el-button type="primary" @click="saveSimpleFlowModel">保存</el-button>
<!-- <el-button type="primary">全局设置</el-button> -->
</div>
</div>
<div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
<ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
</div>
</div>
<Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false"> <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
<div class="mb-2">以下节点内容不完善，请修改后保存</div> <div class="mb-2">以下节点内容不完善，请修改后保存</div>
<div <div
...@@ -35,7 +23,7 @@ ...@@ -35,7 +23,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import ProcessNodeTree from './ProcessNodeTree.vue' import SimpleProcessModel from './SimpleProcessModel.vue'
import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple' import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts' import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
import { getModel } from '@/api/bpm/model' import { getModel } from '@/api/bpm/model'
...@@ -50,13 +38,15 @@ import * as UserGroupApi from '@/api/bpm/userGroup' ...@@ -50,13 +38,15 @@ import * as UserGroupApi from '@/api/bpm/userGroup'
defineOptions({ defineOptions({
name: 'SimpleProcessDesigner' name: 'SimpleProcessDesigner'
}) })
const router = useRouter() // 路由 const emits = defineEmits(['success']) // 保存成功事件
const props = defineProps({ const props = defineProps({
modelId: { modelId: {
type: String, type: String,
required: true required: true
} }
}) })
const loading = ref(false) const loading = ref(false)
const formFields = ref<string[]>([]) const formFields = ref<string[]>([])
const formType = ref(20) const formType = ref(20)
...@@ -66,7 +56,6 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表 ...@@ -66,7 +56,6 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
const deptTreeOptions = ref() const deptTreeOptions = ref()
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
provide('readonly', false)
provide('formFields', formFields) provide('formFields', formFields)
provide('formType', formType) provide('formType', formType)
provide('roleList', roleOptions) provide('roleList', roleOptions)
...@@ -80,28 +69,26 @@ const message = useMessage() // 国际化 ...@@ -80,28 +69,26 @@ const message = useMessage() // 国际化
const processNodeTree = ref<SimpleFlowNode | undefined>() const processNodeTree = ref<SimpleFlowNode | undefined>()
const errorDialogVisible = ref(false) const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = [] let errorNodes: SimpleFlowNode[] = []
const saveSimpleFlowModel = async () => { const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
if (!props.modelId) { if (!simpleModelNode) {
message.error('缺少模型 modelId 编号') message.error('模型数据为空')
return return
} }
errorNodes = [] try {
validateNode(processNodeTree.value, errorNodes) loading.value = true
if (errorNodes.length > 0) { const data = {
errorDialogVisible.value = true id: props.modelId,
return simpleModel: simpleModelNode
} }
const data = { const result = await updateBpmSimpleModel(data)
id: props.modelId, if (result) {
simpleModel: processNodeTree.value message.success('修改成功')
} emits('success')
} else {
const result = await updateBpmSimpleModel(data) message.alert('修改失败')
if (result) { }
message.success('修改成功') } finally {
close() loading.value = false
} else {
message.alert('修改失败')
} }
} }
// 校验节点设置。 暂时以 showText 为空 未节点错误配置 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
...@@ -126,12 +113,13 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo ...@@ -126,12 +113,13 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
} }
validateNode(node.childNode, errorNodes) validateNode(node.childNode, errorNodes)
} }
if ( if (
type == NodeType.CONDITION_BRANCH_NODE || type == NodeType.CONDITION_BRANCH_NODE ||
type == NodeType.PARALLEL_BRANCH_NODE || type == NodeType.PARALLEL_BRANCH_NODE ||
type == NodeType.INCLUSIVE_BRANCH_NODE type == NodeType.INCLUSIVE_BRANCH_NODE
) { // 分支节点 ) {
// 分支节点
// 1. 先校验各个分支 // 1. 先校验各个分支
conditionNodes?.forEach((item) => { conditionNodes?.forEach((item) => {
validateNode(item, errorNodes) validateNode(item, errorNodes)
...@@ -142,27 +130,6 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo ...@@ -142,27 +130,6 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
} }
} }
const close = () => {
router.push({ path: '/bpm/manager/model' })
}
let scaleValue = ref(100)
const MAX_SCALE_VALUE = 200
const MIN_SCALE_VALUE = 50
// 放大
const zoomOut = () => {
if (scaleValue.value == MAX_SCALE_VALUE) {
return
}
scaleValue.value += 10
}
// 缩小
const zoomIn = () => {
if (scaleValue.value == MIN_SCALE_VALUE) {
return
}
scaleValue.value -= 10
}
onMounted(async () => { onMounted(async () => {
try { try {
loading.value = true loading.value = true
...@@ -188,7 +155,7 @@ onMounted(async () => { ...@@ -188,7 +155,7 @@ onMounted(async () => {
// 获取用户组列表 // 获取用户组列表
userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList() userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
// 获取 SIMPLE 设计器模型 //获取 SIMPLE 设计器模型
const result = await getBpmSimpleModel(props.modelId) const result = await getBpmSimpleModel(props.modelId)
if (result) { if (result) {
processNodeTree.value = result processNodeTree.value = result
......
src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue 0 → 100644
<template>
<div
class="simple-process-model-container position-relative"
:style="`transform: scale(${scaleValue / 100});`"
>
<div class="position-absolute top-0px right-0px bg-#fff">
<el-row type="flex" justify="end">
<el-button-group key="scale-control" size="default">
<el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
<el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
<el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
<el-button size="default" :plain="true" :icon="ZoomIn" @click="zoomIn()" />
</el-button-group>
<el-button
v-if="!readonly"
size="default"
class="ml-4px"
type="primary"
:icon="Select"
@click="saveSimpleFlowModel"
>保存模型</el-button
>
</el-row>
</div>
<ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
</div>
<Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
<div class="mb-2">以下节点内容不完善，请修改后保存</div>
<div
class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
v-for="(item, index) in errorNodes"
:key="index"
>
{{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
</div>
<template #footer>
<el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import ProcessNodeTree from './ProcessNodeTree.vue'
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
import { useWatchNode } from './node'
import { Select, ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
defineOptions({
name: 'SimpleProcessModel'
})
const props = defineProps({
flowNode: {
type: Object as () => SimpleFlowNode,
required: true
},
readonly: {
type: Boolean,
required: false,
default: true
}
})
const emits = defineEmits<{
'save': [node: SimpleFlowNode | undefined]
}>()
const processNodeTree = useWatchNode(props)
provide('readonly', props.readonly)
let scaleValue = ref(100)
const MAX_SCALE_VALUE = 200
const MIN_SCALE_VALUE = 50
// 放大
const zoomIn = () => {
if (scaleValue.value == MAX_SCALE_VALUE) {
return
}
scaleValue.value += 10
}
// 缩小
const zoomOut = () => {
if (scaleValue.value == MIN_SCALE_VALUE) {
return
}
scaleValue.value -= 10
}
const processReZoom = () => {
scaleValue.value = 100
}
const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = []
const saveSimpleFlowModel = async () => {
errorNodes = []
validateNode(processNodeTree.value, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return
}
emits('save', processNodeTree.value)
}
// 校验节点设置。 暂时以 showText 为空 未节点错误配置
const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
if (node) {
const { type, showText, conditionNodes } = node
if (type == NodeType.END_EVENT_NODE) {
return
}
if (type == NodeType.START_USER_NODE) {
// 发起人节点暂时不用校验，直接校验孩子节点
validateNode(node.childNode, errorNodes)
}
if (
type === NodeType.USER_TASK_NODE ||
type === NodeType.COPY_TASK_NODE ||
type === NodeType.CONDITION_NODE
) {
if (!showText) {
errorNodes.push(node)
}
validateNode(node.childNode, errorNodes)
}
if (
type == NodeType.CONDITION_BRANCH_NODE ||
type == NodeType.PARALLEL_BRANCH_NODE ||
type == NodeType.INCLUSIVE_BRANCH_NODE
) {
// 分支节点
// 1. 先校验各个分支
conditionNodes?.forEach((item) => {
validateNode(item, errorNodes)
})
// 2. 校验孩子节点
validateNode(node.childNode, errorNodes)
}
}
}
</script>
<style lang="scss" scoped></style>
src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
<template> <template>
<div class="simple-flow-canvas" v-loading="loading"> <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
<div class="simple-flow-container">
<div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
<ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree"/>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import ProcessNodeTree from './ProcessNodeTree.vue' import { useWatchNode } from './node'
import { SimpleFlowNode } from './consts' import { SimpleFlowNode } from './consts'
defineOptions({ defineOptions({
name: 'SimpleProcessRender' name: 'SimpleProcessViewer'
}) })
const props = defineProps({ const props = defineProps({
flowNode: { flowNode: {
type: Object as () => SimpleFlowNode, type: Object as () => SimpleFlowNode,
required: true required: true
},
// 流程任务
tasks : {
type : Array,
default: () => [] as any[]
} }
}) })
const loading = ref(false) const simpleModel = useWatchNode(props)
watch(
() => props.flowNode,
(newValue) => {
processNodeTree.value = newValue
}
)
const processNodeTree = ref<SimpleFlowNode | undefined>(props.flowNode)
provide('readonly', true)
let scaleValue = ref(100)
const MAX_SCALE_VALUE = 200
const MIN_SCALE_VALUE = 50
// 放大
const zoomOut = () => {
if (scaleValue.value == MAX_SCALE_VALUE) {
return
}
scaleValue.value += 10
}
// 缩小
const zoomIn = () => {
if (scaleValue.value == MIN_SCALE_VALUE) {
return
}
scaleValue.value -= 10
}
// onMounted(async () => {
// try {
// loading.value = true
// if (props.view) {
// processNodeTree.value = props.view.simpleModel
// }
// } finally {
// loading.value = false
// }
// })
</script> </script>
src/components/SimpleProcessDesignerV2/src/index.ts
...@@ -2,4 +2,4 @@ import SimpleProcessDesigner from './SimpleProcessDesigner.vue' ...@@ -2,4 +2,4 @@ import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
import SimpleProcessViewer from './SimpleProcessViewer.vue' import SimpleProcessViewer from './SimpleProcessViewer.vue'
import '../theme/simple-process-designer.scss' import '../theme/simple-process-designer.scss'
export { SimpleProcessDesigner, SimpleProcessViewer } export { SimpleProcessDesigner, SimpleProcessViewer}
src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
.simple-flow-canvas { // .simple-flow-canvas {
z-index: 1; // z-index: 1;
overflow: auto; // overflow: auto;
background-color: #fafafa; // background-color: #fafafa;
// user-select: none; // // user-select: none;
.simple-flow-container { // .simple-flow-container {
position: relative; // position: relative;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
.top-area-container { // .top-area-container {
position: sticky; // position: sticky;
inset: 0; // inset: 0;
display: flex; // display: flex;
width: 100%; // width: 100%;
height: 42px; // height: 42px;
z-index: 1; // z-index: 1;
// padding: 4px 0; // // padding: 4px 0;
background-color: #fff; // background-color: #fff;
justify-content: flex-end; // justify-content: flex-end;
align-items: center; // align-items: center;
.top-actions { // .top-actions {
display: flex; // display: flex;
margin: 4px; // margin: 4px;
margin-right: 8px; // margin-right: 8px;
align-items: center; // align-items: center;
.canvas-control { // .canvas-control {
font-size: 16px; // font-size: 16px;
.control-scale-group { // .control-scale-group {
display: inline-flex; // display: inline-flex;
align-items: center; // align-items: center;
margin-right: 8px; // margin-right: 8px;
.control-scale-button { // .control-scale-button {
display: inline-flex; // display: inline-flex;
width: 28px; // width: 28px;
height: 28px; // height: 28px;
padding: 2px; // padding: 2px;
text-align: center; // text-align: center;
cursor: pointer; // cursor: pointer;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
} // }
.control-scale-label { // .control-scale-label {
margin: 0 4px; // margin: 0 4px;
font-size: 14px; // font-size: 14px;
} // }
} // }
} // }
} // }
} // }
.scale-container { // .scale-container {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
margin-top: 16px; // margin-top: 16px;
background-color: #fafafa; // background-color: #fafafa;
transform-origin: 50% 0 0; // transform-origin: 50% 0 0;
transform: scale(1); // transform: scale(1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
// 节点容器 定义节点宽度 // // 节点容器 定义节点宽度
.node-container { // .node-container {
width: 200px; // width: 200px;
} // }
// 节点 // // 节点
.node-box { // .node-box {
position: relative; // position: relative;
display: flex; // display: flex;
min-height: 70px; // min-height: 70px;
padding: 5px 10px 8px; // padding: 5px 10px 8px;
cursor: pointer; // cursor: pointer;
background-color: #fff; // background-color: #fff;
flex-direction: column; // flex-direction: column;
border: 2px solid transparent; // border: 2px solid transparent;
border-radius: 8px; // border-radius: 8px;
box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16); // box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); // transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
&.status-pass { // &.status-pass {
border-color: #67c23a; // border-color: #67c23a;
background-color: #a9da90; // background-color: #a9da90;
} // }
&.status-pass:hover { // &.status-pass:hover {
border-color: #67c23a; // border-color: #67c23a;
} // }
&.status-running { // &.status-running {
border-color: #5a9cf8; // border-color: #5a9cf8;
background-color: #e7f0fe; // background-color: #e7f0fe;
} // }
&.status-running:hover { // &.status-running:hover {
border-color: #5a9cf8; // border-color: #5a9cf8;
} // }
&.status-reject { // &.status-reject {
border-color: #e47470; // border-color: #e47470;
background-color: #f6e5e5; // background-color: #f6e5e5;
} // }
&.status-reject:hover { // &.status-reject:hover {
border-color: #e47470; // border-color: #e47470;
} // }
&:hover { // &:hover {
border-color: #0089ff; // border-color: #0089ff;
.node-toolbar { // .node-toolbar {
opacity: 1; // opacity: 1;
} // }
.branch-node-move { // .branch-node-move {
display: flex; // display: flex;
} // }
} // }
// 普通节点标题 // // 普通节点标题
.node-title-container { // .node-title-container {
display: flex; // display: flex;
padding: 4px; // padding: 4px;
cursor: pointer; // cursor: pointer;
border-radius: 4px 4px 0 0; // border-radius: 4px 4px 0 0;
align-items: center; // align-items: center;
.node-title-icon { // .node-title-icon {
display: flex; // display: flex;
align-items: center; // align-items: center;
&.user-task { // &.user-task {
color: #ff943e; // color: #ff943e;
} // }
&.copy-task { // &.copy-task {
color: #3296fa; // color: #3296fa;
} // }
&.start-user { // &.start-user {
color: #676565; // color: #676565;
} // }
} // }
.node-title { // .node-title {
margin-left: 4px; // margin-left: 4px;
font-size: 14px; // font-size: 14px;
font-weight: 600; // font-weight: 600;
white-space: nowrap; // white-space: nowrap;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
color: #1f1f1f; // color: #1f1f1f;
line-height: 18px; // line-height: 18px;
&:hover { // &:hover {
border-bottom: 1px dashed #f60; // border-bottom: 1px dashed #f60;
} // }
} // }
} // }
// 条件节点标题 // // 条件节点标题
.branch-node-title-container { // .branch-node-title-container {
display: flex; // display: flex;
padding: 4px 0; // padding: 4px 0;
cursor: pointer; // cursor: pointer;
border-radius: 4px 4px 0 0; // border-radius: 4px 4px 0 0;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
.input-max-width { // .input-max-width {
max-width: 115px !important; // max-width: 115px !important;
} // }
.branch-title { // .branch-title {
font-size: 13px; // font-size: 13px;
font-weight: 600; // font-weight: 600;
white-space: nowrap; // white-space: nowrap;
overflow: hidden; // overflow: hidden;
text-overflow: ellipsis; // text-overflow: ellipsis;
color: #f60; // color: #f60;
&:hover { // &:hover {
border-bottom: 1px dashed #000; // border-bottom: 1px dashed #000;
} // }
} // }
.branch-priority { // .branch-priority {
min-width: 50px; // min-width: 50px;
font-size: 12px; // font-size: 12px;
} // }
} // }
.node-content { // .node-content {
display: flex; // display: flex;
min-height: 32px; // min-height: 32px;
padding: 4px 8px; // padding: 4px 8px;
margin-top: 4px; // margin-top: 4px;
line-height: 32px; // line-height: 32px;
justify-content: space-between; // justify-content: space-between;
align-items: center; // align-items: center;
color: #111f2c; // color: #111f2c;
background: rgba(0, 0, 0, 0.03); // background: rgba(0, 0, 0, 0.03);
border-radius: 4px; // border-radius: 4px;
.node-text { // .node-text {
display: -webkit-box; // display: -webkit-box;
overflow: hidden; // overflow: hidden;
font-size: 14px; // font-size: 14px;
line-height: 24px; // line-height: 24px;
text-overflow: ellipsis; // text-overflow: ellipsis;
word-break: break-all; // word-break: break-all;
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */ // -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-webkit-box-orient: vertical; // -webkit-box-orient: vertical;
} // }
} // }
//条件节点内容 // //条件节点内容
.branch-node-content { // .branch-node-content {
display: flex; // display: flex;
min-height: 32px; // min-height: 32px;
padding: 4px 0; // padding: 4px 0;
margin-top: 4px; // margin-top: 4px;
line-height: 32px; // line-height: 32px;
align-items: center; // align-items: center;
color: #111f2c; // color: #111f2c;
border-radius: 4px; // border-radius: 4px;
.branch-node-text { // .branch-node-text {
overflow: hidden; // overflow: hidden;
font-size: 12px; // font-size: 12px;
line-height: 24px; // line-height: 24px;
text-overflow: ellipsis; // text-overflow: ellipsis;
word-break: break-all; // word-break: break-all;
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */ // -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-webkit-box-orient: vertical; // -webkit-box-orient: vertical;
} // }
} // }
// 节点操作 ：删除 // // 节点操作 ：删除
.node-toolbar { // .node-toolbar {
opacity: 0; // opacity: 0;
position: absolute; // position: absolute;
top: -20px; // top: -20px;
right: 0px; // right: 0px;
display: flex; // display: flex;
.toolbar-icon { // .toolbar-icon {
text-align: center; // text-align: center;
vertical-align: middle; // vertical-align: middle;
} // }
} // }
// 条件节点左右移动 // // 条件节点左右移动
.branch-node-move { // .branch-node-move {
position: absolute; // position: absolute;
width: 10px; // width: 10px;
cursor: pointer; // cursor: pointer;
display: none; // display: none;
align-items: center; // align-items: center;
height: 100%; // height: 100%;
justify-content: center; // justify-content: center;
} // }
.move-node-left { // .move-node-left {
left: -2px; // left: -2px;
top: 0px; // top: 0px;
background: rgba(126, 134, 142, 0.08); // background: rgba(126, 134, 142, 0.08);
border-top-left-radius: 8px; // border-top-left-radius: 8px;
border-bottom-left-radius: 8px; // border-bottom-left-radius: 8px;
} // }
.move-node-right { // .move-node-right {
right: -2px; // right: -2px;
top: 0px; // top: 0px;
background: rgba(126, 134, 142, 0.08); // background: rgba(126, 134, 142, 0.08);
border-top-right-radius: 6px; // border-top-right-radius: 6px;
border-bottom-right-radius: 6px; // border-bottom-right-radius: 6px;
} // }
} // }
.node-config-error { // .node-config-error {
border-color: #ff5219 !important; // border-color: #ff5219 !important;
} // }
// 普通节点包装 // // 普通节点包装
.node-wrapper { // .node-wrapper {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
} // }
// 节点连线处理 // // 节点连线处理
.node-handler-wrapper { // .node-handler-wrapper {
position: relative; // position: relative;
display: flex; // display: flex;
height: 70px; // height: 70px;
align-items: center; // align-items: center;
user-select: none; // user-select: none;
justify-content: center; // justify-content: center;
flex-direction: column; // flex-direction: column;
&::before { // &::before {
position: absolute; // position: absolute;
top:0; // top: 0;
z-index: 0; // z-index: 0;
width: 2px; // width: 2px;
height: 100%; // height: 100%;
margin: auto; // margin: auto;
background-color: #dedede; // background-color: #dedede;
content: ''; // content: '';
} // }
.node-handler { // .node-handler {
.add-icon { // .add-icon {
position: relative; // position: relative;
top: -5px; // top: -5px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
cursor: pointer; // cursor: pointer;
width: 25px; // width: 25px;
height: 25px; // height: 25px;
color: #fff; // color: #fff;
background-color: #0089ff; // background-color: #0089ff;
border-radius: 50%; // border-radius: 50%;
&:hover { // &:hover {
transform: scale(1.1); // transform: scale(1.1);
} // }
} // }
} // }
.node-handler-arrow { // .node-handler-arrow {
position: absolute; // position: absolute;
bottom: 0; // bottom: 0;
left: 50%; // left: 50%;
display: flex; // display: flex;
transform: translateX(-50%); // transform: translateX(-50%);
} // }
} // }
// 条件节点包装 // // 条件节点包装
.branch-node-wrapper { // .branch-node-wrapper {
position: relative; // position: relative;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
margin-top: 16px; // margin-top: 16px;
.branch-node-container { // .branch-node-container {
position: relative; // position: relative;
display: flex; // display: flex;
&::before { // &::before {
position: absolute; // position: absolute;
height: 100%; // height: 100%;
width: 4px; // width: 4px;
background-color: #fafafa; // background-color: #fafafa;
content: ''; // content: '';
left: 50%; // left: 50%;
transform: translate(-50%); // transform: translate(-50%);
} // }
.branch-node-add { // .branch-node-add {
position: absolute; // position: absolute;
top: -18px; // top: -18px;
left: 50%; // left: 50%;
z-index: 1; // z-index: 1;
height: 36px; // height: 36px;
padding: 0 10px; // padding: 0 10px;
font-size: 12px; // font-size: 12px;
line-height: 36px; // line-height: 36px;
border: 2px solid #dedede; // border: 2px solid #dedede;
border-radius: 18px; // border-radius: 18px;
transform: translateX(-50%); // transform: translateX(-50%);
transform-origin: center center; // transform-origin: center center;
} // }
.branch-node-readonly { // .branch-node-readonly {
position: absolute; // position: absolute;
top: -18px; // top: -18px;
left: 50%; // left: 50%;
z-index: 1; // z-index: 1;
width: 36px; // width: 36px;
height: 36px; // height: 36px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
border: 2px solid #dedede; // border: 2px solid #dedede;
background-color: #fff; // background-color: #fff;
border-radius: 50%; // border-radius: 50%;
transform: translateX(-50%); // transform: translateX(-50%);
transform-origin: center center; // transform-origin: center center;
&.status-pass { // &.status-pass {
border-color: #6bb63c; // border-color: #6bb63c;
background-color: #e9f4e2; // background-color: #e9f4e2;
} // }
&.status-pass:hover { // &.status-pass:hover {
border-color: #6bb63c; // border-color: #6bb63c;
} // }
.icon-size { // .icon-size {
font-size: 22px; // font-size: 22px;
color: #67c23a; // color: #67c23a;
} // }
} // }
.branch-node-item { // .branch-node-item {
position: relative; // position: relative;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
min-width: 280px; // min-width: 280px;
padding: 40px 40px 0; // padding: 40px 40px 0;
background: transparent; // background: transparent;
border-top: 2px solid #dedede; // border-top: 2px solid #dedede;
border-bottom: 2px solid #dedede; // border-bottom: 2px solid #dedede;
&::before { // &::before {
position: absolute; // position: absolute;
width: 2px; // width: 2px;
height: 100%; // height: 100%;
margin: auto; // margin: auto;
inset: 0; // inset: 0;
background-color: #dedede; // background-color: #dedede;
content: ''; // content: '';
} // }
} // }
// 覆盖条件节点第一个节点左上角的线 // // 覆盖条件节点第一个节点左上角的线
.branch-line-first-top { // .branch-line-first-top {
position: absolute; // position: absolute;
top: -5px; // top: -5px;
left: -1px; // left: -1px;
width: 50%; // width: 50%;
height: 7px; // height: 7px;
background-color: #fafafa; // background-color: #fafafa;
content: ''; // content: '';
} // }
// 覆盖条件节点第一个节点左下角的线 // // 覆盖条件节点第一个节点左下角的线
.branch-line-first-bottom { // .branch-line-first-bottom {
position: absolute; // position: absolute;
bottom: -5px; // bottom: -5px;
left: -1px; // left: -1px;
width: 50%; // width: 50%;
height: 7px; // height: 7px;
background-color: #fafafa; // background-color: #fafafa;
content: ''; // content: '';
} // }
// 覆盖条件节点最后一个节点右上角的线 // // 覆盖条件节点最后一个节点右上角的线
.branch-line-last-top { // .branch-line-last-top {
position: absolute; // position: absolute;
top: -5px; // top: -5px;
right: -1px; // right: -1px;
width: 50%; // width: 50%;
height: 7px; // height: 7px;
background-color: #fafafa; // background-color: #fafafa;
content: ''; // content: '';
} // }
// 覆盖条件节点最后一个节点右下角的线 // // 覆盖条件节点最后一个节点右下角的线
.branch-line-last-bottom { // .branch-line-last-bottom {
position: absolute; // position: absolute;
right: -1px; // right: -1px;
bottom: -5px; // bottom: -5px;
width: 50%; // width: 50%;
height: 7px; // height: 7px;
background-color: #fafafa; // background-color: #fafafa;
content: ''; // content: '';
} // }
} // }
} // }
.node-fixed-name { // .node-fixed-name {
display: inline-block; // display: inline-block;
width: auto; // width: auto;
padding: 0 4px; // padding: 0 4px;
overflow: hidden; // overflow: hidden;
text-align: center; // text-align: center;
text-overflow: ellipsis; // text-overflow: ellipsis;
white-space: nowrap; // white-space: nowrap;
} // }
// 开始节点包装 // // 开始节点包装
.start-node-wrapper { // .start-node-wrapper {
position: relative; // position: relative;
margin-top: 16px; // margin-top: 16px;
.start-node-container { // .start-node-container {
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
.start-node-box { // .start-node-box {
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
width: 90px; // width: 90px;
height: 36px; // height: 36px;
padding: 3px 4px; // padding: 3px 4px;
color: #212121; // color: #212121;
cursor: pointer; // cursor: pointer;
background: #fafafa; // background: #fafafa;
border-radius: 30px; // border-radius: 30px;
box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08); // box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
box-sizing: border-box; // box-sizing: border-box;
} // }
} // }
} // }
// 结束节点包装 // // 结束节点包装
.end-node-wrapper { // .end-node-wrapper {
margin-bottom: 16px; // margin-bottom: 16px;
.end-node-box { // .end-node-box {
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
width: 80px; // width: 80px;
height: 36px; // height: 36px;
border: 2px solid #fafafa; // border: 2px solid #fafafa;
color: #212121; // color: #212121;
border-radius: 30px; // border-radius: 30px;
box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08); // box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
box-sizing: border-box; // box-sizing: border-box;
&.status-pass { // &.status-pass {
border-color: #6bb63c; // border-color: #6bb63c;
background-color: #a9da90; // background-color: #a9da90;
} // }
&.status-pass:hover { // &.status-pass:hover {
border-color: #6bb63c; // border-color: #6bb63c;
} // }
&.status-reject { // &.status-reject {
border-color: #e47470; // border-color: #e47470;
background-color: #f6e5e5; // background-color: #f6e5e5;
} // }
&.status-reject:hover { // &.status-reject:hover {
border-color: #e47470; // border-color: #e47470;
} // }
&.status-cancel { // &.status-cancel {
border-color: #919398; // border-color: #919398;
background-color: #eaeaeb // background-color: #eaeaeb;
} // }
&.status-cancel:hover { // &.status-cancel:hover {
border-color: #919398; // border-color: #919398;
} // }
} // }
} // }
// 可编辑的 title 输入框 // // 可编辑的 title 输入框
.editable-title-input { // .editable-title-input {
height: 20px; // height: 20px;
max-width: 145px; // max-width: 145px;
line-height: 20px; // line-height: 20px;
font-size: 12px; // font-size: 12px;
margin-left: 4px; // margin-left: 4px;
border: 1px solid #d9d9d9; // border: 1px solid #d9d9d9;
border-radius: 4px; // border-radius: 4px;
transition: all 0.3s; // transition: all 0.3s;
&:focus { // &:focus {
border-color: #40a9ff; // border-color: #40a9ff;
outline: 0; // outline: 0;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); // box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} // }
} // }
} // }
} // }
} // }
// 配置节点头部 // 配置节点头部
.config-header { .config-header {
...@@ -740,6 +740,531 @@ ...@@ -740,6 +740,531 @@
} }
} }
.simple-process-model-container {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 16px;
background-color: #fafafa;
transform-origin: 50% 0 0;
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
// 节点容器 定义节点宽度
.node-container {
width: 200px;
}
// 节点
.node-box {
position: relative;
display: flex;
min-height: 70px;
padding: 5px 10px 8px;
cursor: pointer;
background-color: #fff;
flex-direction: column;
border: 2px solid transparent;
border-radius: 8px;
box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
&.status-pass {
background-color: #a9da90;
border-color: #67c23a;
}
&.status-pass:hover {
border-color: #67c23a;
}
&.status-running {
background-color: #e7f0fe;
border-color: #5a9cf8;
}
&.status-running:hover {
border-color: #5a9cf8;
}
&.status-reject {
background-color: #f6e5e5;
border-color: #e47470;
}
&.status-reject:hover {
border-color: #e47470;
}
&:hover {
border-color: #0089ff;
.node-toolbar {
opacity: 1;
}
.branch-node-move {
display: flex;
}
}
// 普通节点标题
.node-title-container {
display: flex;
padding: 4px;
cursor: pointer;
border-radius: 4px 4px 0 0;
align-items: center;
.node-title-icon {
display: flex;
align-items: center;
&.user-task {
color: #ff943e;
}
&.copy-task {
color: #3296fa;
}
&.start-user {
color: #676565;
}
}
.node-title {
margin-left: 4px;
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 18px;
color: #1f1f1f;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
border-bottom: 1px dashed #f60;
}
}
}
// 条件节点标题
.branch-node-title-container {
display: flex;
padding: 4px 0;
cursor: pointer;
border-radius: 4px 4px 0 0;
align-items: center;
justify-content: space-between;
.input-max-width {
max-width: 115px !important;
}
.branch-title {
overflow: hidden;
font-size: 13px;
font-weight: 600;
color: #f60;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
border-bottom: 1px dashed #000;
}
}
.branch-priority {
min-width: 50px;
font-size: 12px;
}
}
.node-content {
display: flex;
min-height: 32px;
padding: 4px 8px;
margin-top: 4px;
line-height: 32px;
justify-content: space-between;
align-items: center;
color: #111f2c;
background: rgb(0 0 0 / 3%);
border-radius: 4px;
.node-text {
display: -webkit-box;
overflow: hidden;
font-size: 14px;
line-height: 24px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-webkit-box-orient: vertical;
}
}
//条件节点内容
.branch-node-content {
display: flex;
min-height: 32px;
padding: 4px 0;
margin-top: 4px;
line-height: 32px;
align-items: center;
color: #111f2c;
border-radius: 4px;
.branch-node-text {
overflow: hidden;
font-size: 12px;
line-height: 24px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-webkit-box-orient: vertical;
}
}
// 节点操作 ：删除
.node-toolbar {
position: absolute;
top: -20px;
right: 0;
display: flex;
opacity: 0;
.toolbar-icon {
text-align: center;
vertical-align: middle;
}
}
// 条件节点左右移动
.branch-node-move {
position: absolute;
display: none;
width: 10px;
height: 100%;
cursor: pointer;
align-items: center;
justify-content: center;
}
.move-node-left {
top: 0;
left: -2px;
background: rgb(126 134 142 / 8%);
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
}
.move-node-right {
top: 0;
right: -2px;
background: rgb(126 134 142 / 8%);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
.node-config-error {
border-color: #ff5219 !important;
}
// 普通节点包装
.node-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
// 节点连线处理
.node-handler-wrapper {
position: relative;
display: flex;
height: 70px;
align-items: center;
user-select: none;
justify-content: center;
flex-direction: column;
&::before {
position: absolute;
top: 0;
z-index: 0;
width: 2px;
height: 100%;
margin: auto;
background-color: #dedede;
content: '';
}
.node-handler {
.add-icon {
position: relative;
top: -5px;
display: flex;
width: 25px;
height: 25px;
color: #fff;
cursor: pointer;
background-color: #0089ff;
border-radius: 50%;
align-items: center;
justify-content: center;
&:hover {
transform: scale(1.1);
}
}
}
.node-handler-arrow {
position: absolute;
bottom: 0;
left: 50%;
display: flex;
transform: translateX(-50%);
}
}
// 条件节点包装
.branch-node-wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 16px;
.branch-node-container {
position: relative;
display: flex;
&::before {
position: absolute;
left: 50%;
width: 4px;
height: 100%;
background-color: #fafafa;
content: '';
transform: translate(-50%);
}
.branch-node-add {
position: absolute;
top: -18px;
left: 50%;
z-index: 1;
height: 36px;
padding: 0 10px;
font-size: 12px;
line-height: 36px;
border: 2px solid #dedede;
border-radius: 18px;
transform: translateX(-50%);
transform-origin: center center;
}
.branch-node-readonly {
position: absolute;
top: -18px;
left: 50%;
z-index: 1;
display: flex;
width: 36px;
height: 36px;
background-color: #fff;
border: 2px solid #dedede;
border-radius: 50%;
transform: translateX(-50%);
align-items: center;
justify-content: center;
transform-origin: center center;
&.status-pass {
background-color: #e9f4e2;
border-color: #6bb63c;
}
&.status-pass:hover {
border-color: #6bb63c;
}
.icon-size {
font-size: 22px;
color: #67c23a;
}
}
.branch-node-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-width: 280px;
padding: 40px 40px 0;
background: transparent;
border-top: 2px solid #dedede;
border-bottom: 2px solid #dedede;
&::before {
position: absolute;
width: 2px;
height: 100%;
margin: auto;
inset: 0;
background-color: #dedede;
content: '';
}
}
// 覆盖条件节点第一个节点左上角的线
.branch-line-first-top {
position: absolute;
top: -5px;
left: -1px;
width: 50%;
height: 7px;
background-color: #fafafa;
content: '';
}
// 覆盖条件节点第一个节点左下角的线
.branch-line-first-bottom {
position: absolute;
bottom: -5px;
left: -1px;
width: 50%;
height: 7px;
background-color: #fafafa;
content: '';
}
// 覆盖条件节点最后一个节点右上角的线
.branch-line-last-top {
position: absolute;
top: -5px;
right: -1px;
width: 50%;
height: 7px;
background-color: #fafafa;
content: '';
}
// 覆盖条件节点最后一个节点右下角的线
.branch-line-last-bottom {
position: absolute;
right: -1px;
bottom: -5px;
width: 50%;
height: 7px;
background-color: #fafafa;
content: '';
}
}
}
.node-fixed-name {
display: inline-block;
width: auto;
padding: 0 4px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
// 开始节点包装
.start-node-wrapper {
position: relative;
margin-top: 16px;
.start-node-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.start-node-box {
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 36px;
padding: 3px 4px;
color: #212121;
cursor: pointer;
background: #fafafa;
border-radius: 30px;
box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
box-sizing: border-box;
}
}
}
// 结束节点包装
.end-node-wrapper {
margin-bottom: 16px;
.end-node-box {
display: flex;
width: 80px;
height: 36px;
color: #212121;
border: 2px solid #fafafa;
border-radius: 30px;
box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
box-sizing: border-box;
justify-content: center;
align-items: center;
&.status-pass {
background-color: #a9da90;
border-color: #6bb63c;
}
&.status-pass:hover {
border-color: #6bb63c;
}
&.status-reject {
background-color: #f6e5e5;
border-color: #e47470;
}
&.status-reject:hover {
border-color: #e47470;
}
&.status-cancel {
background-color: #eaeaeb;
border-color: #919398;
}
&.status-cancel:hover {
border-color: #919398;
}
}
}
// 可编辑的 title 输入框
.editable-title-input {
height: 20px;
max-width: 145px;
margin-left: 4px;
font-size: 12px;
line-height: 20px;
border: 1px solid #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
&:focus {
border-color: #40a9ff;
outline: 0;
box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
}
}
}
// iconfont 样式 // iconfont 样式
@font-face { @font-face {
font-family: 'iconfont'; /* Project id 4495938 */ font-family: 'iconfont'; /* Project id 4495938 */
......
src/router/modules/remaining.ts
...@@ -267,9 +267,9 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -267,9 +267,9 @@ const remainingRouter: AppRouteRecordRaw[] = [
} }
}, },
{ {
path: 'manager/simple/workflow/model/edit', path: 'manager/simple/model',
component: () => import('@/views/bpm/simpleWorkflow/index.vue'), component: () => import('@/views/bpm/simple/SimpleModelDesign.vue'),
name: 'SimpleWorkflowDesignEditor', name: 'SimpleModelDesign',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
......
src/views/bpm/model/CategoryDraggableModel.vue
...@@ -342,7 +342,7 @@ const handleDesign = (row: any) => { ...@@ -342,7 +342,7 @@ const handleDesign = (row: any) => {
}) })
} else { } else {
push({ push({
name: 'SimpleWorkflowDesignEditor', name: 'SimpleModelDesign',
query: { query: {
modelId: row.id modelId: row.id
} }
...@@ -492,9 +492,11 @@ watch( ...@@ -492,9 +492,11 @@ watch(
<style lang="scss"> <style lang="scss">
.rename-dialog.el-dialog { .rename-dialog.el-dialog {
padding: 0 !important; padding: 0 !important;
.el-dialog__header { .el-dialog__header {
border-bottom: none; border-bottom: none;
} }
.el-dialog__footer { .el-dialog__footer {
border-top: none !important; border-top: none !important;
} }
...@@ -503,8 +505,8 @@ watch( ...@@ -503,8 +505,8 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
:deep() { :deep() {
.el-table__cell { .el-table__cell {
border-bottom: none !important;
overflow: hidden; overflow: hidden;
border-bottom: none !important;
} }
} }
</style> </style>
src/views/bpm/model/index_old.vue
...@@ -338,7 +338,7 @@ const handleDesign = (row: any) => { ...@@ -338,7 +338,7 @@ const handleDesign = (row: any) => {
}) })
} else { } else {
push({ push({
name: 'SimpleWorkflowDesignEditor', name: 'SimpleModelDesign',
query: { query: {
modelId: row.id modelId: row.id
} }
......
src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
<template> <template>
<el-card v-loading="loading" class="box-card"> <div v-loading="loading" class="mb-20px">
<SimpleProcessViewer :flow-node="simpleModel" /> <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
</el-card> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { TaskStatusEnum } from '@/api/bpm/task' import { TaskStatusEnum } from '@/api/bpm/task'
import { BpmProcessInstanceStatus } from '@/utils/constants'
import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts' import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/' import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
...@@ -18,10 +17,7 @@ const props = defineProps({ ...@@ -18,10 +17,7 @@ const props = defineProps({
id: propTypes.string // 流程实例的编号 id: propTypes.string // 流程实例的编号
}) })
// const view = ref({ const tasks = ref([])
// simpleModel: undefined
// }) // simple 模型数据
const simpleModel = ref() const simpleModel = ref()
/** 只有 loading 完成时，才去加载流程列表 */ /** 只有 loading 完成时，才去加载流程列表 */
...@@ -31,6 +27,7 @@ watch( ...@@ -31,6 +27,7 @@ watch(
if (value && props.id) { if (value && props.id) {
const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id) const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
if (modelView) { if (modelView) {
tasks.value = modelView.tasks;
// 已经拒绝的活动节点编号集合，只包括 UserTask // 已经拒绝的活动节点编号集合，只包括 UserTask
const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
// 进行中的活动节点编号集合， 只包括 UserTask // 进行中的活动节点编号集合， 只包括 UserTask
...@@ -47,7 +44,7 @@ watch( ...@@ -47,7 +44,7 @@ watch(
finishedActivityIds, finishedActivityIds,
finishedSequenceFlowActivityIds finishedSequenceFlowActivityIds
) )
console.log("modelView.simpleModel==>", modelView.simpleModel) console.log('modelView.simpleModel==>', modelView.simpleModel)
simpleModel.value = modelView.simpleModel simpleModel.value = modelView.simpleModel
} }
} }
...@@ -60,8 +57,7 @@ const setSimpleModelNodeTaskStatus = ( ...@@ -60,8 +57,7 @@ const setSimpleModelNodeTaskStatus = (
rejectedTaskActivityIds: string[], rejectedTaskActivityIds: string[],
unfinishedTaskActivityIds: string[], unfinishedTaskActivityIds: string[],
finishedActivityIds: string[], finishedActivityIds: string[],
finishedSequenceFlowActivityIds: string[], finishedSequenceFlowActivityIds: string[]
) => { ) => {
if (!simpleModel) { if (!simpleModel) {
return return
...@@ -75,7 +71,7 @@ const setSimpleModelNodeTaskStatus = ( ...@@ -75,7 +71,7 @@ const setSimpleModelNodeTaskStatus = (
} }
return return
} }
// 审批节点 // 审批节点
if ( if (
simpleModel.type === NodeType.START_USER_NODE || simpleModel.type === NodeType.START_USER_NODE ||
...@@ -84,7 +80,7 @@ const setSimpleModelNodeTaskStatus = ( ...@@ -84,7 +80,7 @@ const setSimpleModelNodeTaskStatus = (
simpleModel.activityStatus = TaskStatusEnum.NOT_START simpleModel.activityStatus = TaskStatusEnum.NOT_START
if (rejectedTaskActivityIds.includes(simpleModel.id)) { if (rejectedTaskActivityIds.includes(simpleModel.id)) {
simpleModel.activityStatus = TaskStatusEnum.REJECT simpleModel.activityStatus = TaskStatusEnum.REJECT
} else if(unfinishedTaskActivityIds.includes(simpleModel.id)) { } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
simpleModel.activityStatus = TaskStatusEnum.RUNNING simpleModel.activityStatus = TaskStatusEnum.RUNNING
} else if (finishedActivityIds.includes(simpleModel.id)) { } else if (finishedActivityIds.includes(simpleModel.id)) {
simpleModel.activityStatus = TaskStatusEnum.APPROVE simpleModel.activityStatus = TaskStatusEnum.APPROVE
...@@ -152,9 +148,3 @@ const setSimpleModelNodeTaskStatus = ( ...@@ -152,9 +148,3 @@ const setSimpleModelNodeTaskStatus = (
// } // }
// ) // )
</script> </script>
<style>
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>
src/views/bpm/processInstance/detail/index.vue
...@@ -75,11 +75,14 @@ ...@@ -75,11 +75,14 @@
<!-- 流程图 --> <!-- 流程图 -->
<el-tab-pane label="流程图" name="diagram"> <el-tab-pane label="流程图" name="diagram">
<div class="form-scroll-area"> <div class="form-scroll-area">
<ProcessInstanceBpmnViewer <ProcessInstanceSimpleViewer
v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE"
:id="`${id}`" :id="`${id}`"
:loading="processInstanceLoading" :loading="processInstanceLoading"
:show-header="false"
/> />
<ProcessInstanceBpmnViewer
v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN"
:id="`${id}`" :loading="processInstanceLoading" />
</div> </div>
</el-tab-pane> </el-tab-pane>
...@@ -122,11 +125,13 @@ ...@@ -122,11 +125,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { BpmModelType } from '@/utils/constants'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as TaskApi from '@/api/bpm/task' import * as TaskApi from '@/api/bpm/task'
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue' import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue' import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue' import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue' import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
......
src/views/bpm/simpleWorkflow/index.vue → src/views/bpm/simple/SimpleModelDesign.vue
<template> <template>
<ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative"> <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
<SimpleProcessDesigner :model-id="modelId" /> <SimpleProcessDesigner :model-id="modelId" @success="close" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/' import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
defineOptions({ defineOptions({
name: 'SimpleWorkflowDesignEditor' name: 'SimpleModelDesign'
}) })
const router = useRouter() // 路由
const { query } = useRoute() // 路由的查询 const { query } = useRoute() // 路由的查询
const modelId = query.modelId as string const modelId = query.modelId as string
const close = () => {
router.push({ path: '/bpm/manager/model' })
}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></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