Skip to content

phsl / admin

Go to a project
Commit c9b12c8b by jason
Options

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

parent a43bca57
Showing with 990 additions and 390 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,29 +69,27 @@ const message = useMessage() // 国际化 ...@@ -80,29 +69,27 @@ 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
}
errorNodes = []
validateNode(processNodeTree.value, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return return
} }
try {
loading.value = true
const data = { const data = {
id: props.modelId, id: props.modelId,
simpleModel: processNodeTree.value simpleModel: simpleModelNode
} }
const result = await updateBpmSimpleModel(data) const result = await updateBpmSimpleModel(data)
if (result) { if (result) {
message.success('修改成功') message.success('修改成功')
close() emits('success')
} else { } else {
message.alert('修改失败') message.alert('修改失败')
} }
} finally {
loading.value = false
}
} }
// 校验节点设置。 暂时以 showText 为空 未节点错误配置 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => { const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
...@@ -131,7 +118,8 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo ...@@ -131,7 +118,8 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
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 {
// position: relative;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// .top-area-container {
// position: sticky;
// inset: 0;
// display: flex;
// width: 100%;
// height: 42px;
// z-index: 1;
// // padding: 4px 0;
// background-color: #fff;
// justify-content: flex-end;
// align-items: center;
// .top-actions {
// display: flex;
// margin: 4px;
// margin-right: 8px;
// align-items: center;
// .canvas-control {
// font-size: 16px;
// .control-scale-group {
// display: inline-flex;
// align-items: center;
// margin-right: 8px;
// .control-scale-button {
// display: inline-flex;
// width: 28px;
// height: 28px;
// padding: 2px;
// text-align: center;
// cursor: pointer;
// justify-content: center;
// align-items: center;
// }
// .control-scale-label {
// margin: 0 4px;
// font-size: 14px;
// }
// }
// }
// }
// }
// .scale-container {
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// margin-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);
// // 节点容器 定义节点宽度
// .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 rgba(10, 30, 65, 0.16);
// transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
// &.status-pass {
// border-color: #67c23a;
// background-color: #a9da90;
// }
// &.status-pass:hover {
// border-color: #67c23a;
// }
// &.status-running {
// border-color: #5a9cf8;
// background-color: #e7f0fe;
// }
// &.status-running:hover {
// border-color: #5a9cf8;
// }
// &.status-reject {
// border-color: #e47470;
// background-color: #f6e5e5;
// }
// &.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;
// font-size: 14px;
// font-weight: 600;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// color: #1f1f1f;
// line-height: 18px;
// &: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 {
// font-size: 13px;
// font-weight: 600;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// color: #f60;
// &: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: rgba(0, 0, 0, 0.03);
// 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 {
// opacity: 0;
// position: absolute;
// top: -20px;
// right: 0px;
// display: flex;
// .toolbar-icon {
// text-align: center;
// vertical-align: middle;
// }
// }
// // 条件节点左右移动
// .branch-node-move {
// position: absolute;
// width: 10px;
// cursor: pointer;
// display: none;
// align-items: center;
// height: 100%;
// justify-content: center;
// }
// .move-node-left {
// left: -2px;
// top: 0px;
// background: rgba(126, 134, 142, 0.08);
// border-top-left-radius: 8px;
// border-bottom-left-radius: 8px;
// }
// .move-node-right {
// right: -2px;
// top: 0px;
// background: rgba(126, 134, 142, 0.08);
// 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;
// align-items: center;
// justify-content: center;
// cursor: pointer;
// width: 25px;
// height: 25px;
// color: #fff;
// background-color: #0089ff;
// border-radius: 50%;
// &: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;
// height: 100%;
// width: 4px;
// background-color: #fafafa;
// content: '';
// left: 50%;
// 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;
// width: 36px;
// height: 36px;
// display: flex;
// align-items: center;
// justify-content: center;
// border: 2px solid #dedede;
// background-color: #fff;
// border-radius: 50%;
// transform: translateX(-50%);
// transform-origin: center center;
// &.status-pass {
// border-color: #6bb63c;
// background-color: #e9f4e2;
// }
// &.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 rgba(10, 30, 65, 0.08);
// box-sizing: border-box;
// }
// }
// }
// // 结束节点包装
// .end-node-wrapper {
// margin-bottom: 16px;
// .end-node-box {
// display: flex;
// justify-content: center;
// align-items: center;
// width: 80px;
// height: 36px;
// border: 2px solid #fafafa;
// color: #212121;
// border-radius: 30px;
// box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
// box-sizing: border-box;
// &.status-pass {
// border-color: #6bb63c;
// background-color: #a9da90;
// }
// &.status-pass:hover {
// border-color: #6bb63c;
// }
// &.status-reject {
// border-color: #e47470;
// background-color: #f6e5e5;
// }
// &.status-reject:hover {
// border-color: #e47470;
// }
// &.status-cancel {
// border-color: #919398;
// background-color: #eaeaeb;
// }
// &.status-cancel:hover {
// border-color: #919398;
// }
// }
// }
// // 可编辑的 title 输入框
// .editable-title-input {
// height: 20px;
// max-width: 145px;
// line-height: 20px;
// font-size: 12px;
// margin-left: 4px;
// border: 1px solid #d9d9d9;
// border-radius: 4px;
// transition: all 0.3s;
// &:focus {
// border-color: #40a9ff;
// outline: 0;
// box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
// }
// }
// }
// }
// }
.simple-flow-container { // 配置节点头部
position: relative; .config-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center;
.top-area-container { .node-name {
position: sticky;
inset: 0;
display: flex; display: flex;
width: 100%; height: 24px;
height: 42px; line-height: 24px;
z-index: 1; font-size: 16px;
// padding: 4px 0; cursor: pointer;
background-color: #fff;
justify-content: flex-end;
align-items: center; align-items: center;
}
.divide-line {
width: 100%;
height: 1px;
margin-top: 16px;
background: #eee;
}
.config-editable-input {
height: 24px;
max-width: 510px;
font-size: 16px;
line-height: 24px;
border: 1px solid #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
&:focus {
border-color: #40a9ff;
outline: 0;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
}
.top-actions { // 表单字段权限
.field-setting-pane {
display: flex; display: flex;
margin: 4px; flex-direction: column;
margin-right: 8px; font-size: 14px;
align-items: center;
.canvas-control { .field-setting-desc {
padding-right: 8px;
margin-bottom: 16px;
font-size: 16px; font-size: 16px;
font-weight: 700;
}
.control-scale-group { .field-permit-title {
display: inline-flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-right: 8px; height: 45px;
padding-left: 12px;
line-height: 45px;
background-color: #f8fafc0a;
border: 1px solid #1f38581a;
.first-title {
text-align: left !important;
}
.other-titles {
display: flex;
justify-content: space-between;
}
.control-scale-button { .setting-title-label {
display: inline-flex; display: inline-block;
width: 28px; width: 110px;
height: 28px; padding: 5px 0;
padding: 2px; font-size: 13px;
font-weight: 700;
color: #000;
text-align: center; text-align: center;
}
}
.field-setting-item {
align-items: center;
display: flex;
justify-content: space-between;
height: 38px;
padding-left: 12px;
border: 1px solid #1f38581a;
border-top: 0;
.field-setting-item-label {
display: inline-block;
width: 110px;
min-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
.field-setting-item-group {
display: flex;
justify-content: space-between;
.item-radio-wrap {
display: inline-block;
width: 110px;
text-align: center;
}
}
}
}
// 节点连线气泡卡片样式
.handler-item-wrapper {
display: flex;
cursor: pointer; cursor: pointer;
justify-content: center;
.handler-item {
display: flex;
flex-direction: column;
align-items: center; align-items: center;
} }
.control-scale-label { .handler-item-icon {
margin: 0 4px; width: 60px;
font-size: 14px; height: 60px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 50%;
user-select: none;
text-align: center;
&:hover {
background: #e2e2e2;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.icon-size {
font-size: 25px;
line-height: 60px;
} }
} }
.approve {
color: #ff943e;
}
.copy {
color: #3296fa;
}
.condition {
color: #67c23a;
} }
.parallel {
color: #626aef;
} }
.inclusive {
color: #345da2;
} }
.scale-container { .handler-item-text {
margin-top: 4px;
width: 80px;
text-align: center;
font-size: 13px;
}
}
.simple-process-model-container {
height: 100%;
overflow: auto;
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; padding-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);
background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat;
// 节点容器 定义节点宽度 // 节点容器 定义节点宽度
.node-container { .node-container {
width: 200px; width: 200px;
...@@ -83,33 +768,39 @@ ...@@ -83,33 +768,39 @@
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 rgb(10 30 65 / 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;
background-color: #a9da90; background-color: #a9da90;
border-color: #67c23a;
} }
&.status-pass:hover { &.status-pass:hover {
border-color: #67c23a; border-color: #67c23a;
} }
&.status-running { &.status-running {
border-color: #5a9cf8;
background-color: #e7f0fe; background-color: #e7f0fe;
border-color: #5a9cf8;
} }
&.status-running:hover { &.status-running:hover {
border-color: #5a9cf8; border-color: #5a9cf8;
} }
&.status-reject { &.status-reject {
border-color: #e47470;
background-color: #f6e5e5; background-color: #f6e5e5;
border-color: #e47470;
} }
&.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;
} }
...@@ -134,9 +825,11 @@ ...@@ -134,9 +825,11 @@
&.user-task { &.user-task {
color: #ff943e; color: #ff943e;
} }
&.copy-task { &.copy-task {
color: #3296fa; color: #3296fa;
} }
&.start-user { &.start-user {
color: #676565; color: #676565;
} }
...@@ -144,13 +837,14 @@ ...@@ -144,13 +837,14 @@
.node-title { .node-title {
margin-left: 4px; margin-left: 4px;
overflow: hidden;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #1f1f1f;
line-height: 18px; line-height: 18px;
color: #1f1f1f;
text-overflow: ellipsis;
white-space: nowrap;
&:hover { &:hover {
border-bottom: 1px dashed #f60; border-bottom: 1px dashed #f60;
} }
...@@ -171,12 +865,13 @@ ...@@ -171,12 +865,13 @@
} }
.branch-title { .branch-title {
overflow: hidden;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #f60; color: #f60;
text-overflow: ellipsis;
white-space: nowrap;
&:hover { &:hover {
border-bottom: 1px dashed #000; border-bottom: 1px dashed #000;
} }
...@@ -197,7 +892,7 @@ ...@@ -197,7 +892,7 @@
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: rgb(0 0 0 / 3%);
border-radius: 4px; border-radius: 4px;
.node-text { .node-text {
...@@ -236,11 +931,11 @@ ...@@ -236,11 +931,11 @@
// 节点操作 ：删除 // 节点操作 ：删除
.node-toolbar { .node-toolbar {
opacity: 0;
position: absolute; position: absolute;
top: -20px; top: -20px;
right: 0px; right: 0;
display: flex; display: flex;
opacity: 0;
.toolbar-icon { .toolbar-icon {
text-align: center; text-align: center;
...@@ -251,26 +946,26 @@ ...@@ -251,26 +946,26 @@
// 条件节点左右移动 // 条件节点左右移动
.branch-node-move { .branch-node-move {
position: absolute; position: absolute;
display: none;
width: 10px; width: 10px;
height: 100%;
cursor: pointer; cursor: pointer;
display: none;
align-items: center; align-items: center;
height: 100%;
justify-content: center; justify-content: center;
} }
.move-node-left { .move-node-left {
top: 0;
left: -2px; left: -2px;
top: 0px; background: rgb(126 134 142 / 8%);
background: rgba(126, 134, 142, 0.08);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
} }
.move-node-right { .move-node-right {
top: 0;
right: -2px; right: -2px;
top: 0px; background: rgb(126 134 142 / 8%);
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;
} }
...@@ -298,7 +993,7 @@ ...@@ -298,7 +993,7 @@
&::before { &::before {
position: absolute; position: absolute;
top:0; top: 0;
z-index: 0; z-index: 0;
width: 2px; width: 2px;
height: 100%; height: 100%;
...@@ -312,14 +1007,14 @@ ...@@ -312,14 +1007,14 @@
position: relative; position: relative;
top: -5px; top: -5px;
display: flex; display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 25px; width: 25px;
height: 25px; height: 25px;
color: #fff; color: #fff;
cursor: pointer;
background-color: #0089ff; background-color: #0089ff;
border-radius: 50%; border-radius: 50%;
align-items: center;
justify-content: center;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
...@@ -351,11 +1046,11 @@ ...@@ -351,11 +1046,11 @@
&::before { &::before {
position: absolute; position: absolute;
height: 100%; left: 50%;
width: 4px; width: 4px;
height: 100%;
background-color: #fafafa; background-color: #fafafa;
content: ''; content: '';
left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
...@@ -379,21 +1074,22 @@ ...@@ -379,21 +1074,22 @@
top: -18px; top: -18px;
left: 50%; left: 50%;
z-index: 1; z-index: 1;
display: flex;
width: 36px; width: 36px;
height: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #dedede;
background-color: #fff; background-color: #fff;
border: 2px solid #dedede;
border-radius: 50%; border-radius: 50%;
transform: translateX(-50%); transform: translateX(-50%);
align-items: center;
justify-content: center;
transform-origin: center center; transform-origin: center center;
&.status-pass { &.status-pass {
border-color: #6bb63c;
background-color: #e9f4e2; background-color: #e9f4e2;
border-color: #6bb63c;
} }
&.status-pass:hover { &.status-pass:hover {
border-color: #6bb63c; border-color: #6bb63c;
} }
...@@ -499,7 +1195,7 @@ ...@@ -499,7 +1195,7 @@
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 rgb(10 30 65 / 8%);
box-sizing: border-box; box-sizing: border-box;
} }
} }
...@@ -511,19 +1207,19 @@ ...@@ -511,19 +1207,19 @@
.end-node-box { .end-node-box {
display: flex; display: flex;
justify-content: center;
align-items: center;
width: 80px; width: 80px;
height: 36px; height: 36px;
border: 2px solid #fafafa;
color: #212121; color: #212121;
border: 2px solid #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 rgb(10 30 65 / 8%);
box-sizing: border-box; box-sizing: border-box;
justify-content: center;
align-items: center;
&.status-pass { &.status-pass {
border-color: #6bb63c;
background-color: #a9da90; background-color: #a9da90;
border-color: #6bb63c;
} }
&.status-pass:hover { &.status-pass:hover {
...@@ -531,17 +1227,19 @@ ...@@ -531,17 +1227,19 @@
} }
&.status-reject { &.status-reject {
border-color: #e47470;
background-color: #f6e5e5; background-color: #f6e5e5;
border-color: #e47470;
} }
&.status-reject:hover { &.status-reject:hover {
border-color: #e47470; border-color: #e47470;
} }
&.status-cancel { &.status-cancel {
background-color: #eaeaeb;
border-color: #919398; border-color: #919398;
background-color: #eaeaeb
} }
&.status-cancel:hover { &.status-cancel:hover {
border-color: #919398; border-color: #919398;
} }
...@@ -552,9 +1250,9 @@ ...@@ -552,9 +1250,9 @@
.editable-title-input { .editable-title-input {
height: 20px; height: 20px;
max-width: 145px; max-width: 145px;
line-height: 20px;
font-size: 12px;
margin-left: 4px; margin-left: 4px;
font-size: 12px;
line-height: 20px;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-radius: 4px; border-radius: 4px;
transition: all 0.3s; transition: all 0.3s;
...@@ -562,181 +1260,8 @@ ...@@ -562,181 +1260,8 @@
&: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 rgb(24 144 255 / 20%);
}
}
}
}
}
// 配置节点头部
.config-header {
display: flex;
flex-direction: column;
.node-name {
display: flex;
height: 24px;
line-height: 24px;
font-size: 16px;
cursor: pointer;
align-items: center;
}
.divide-line {
width: 100%;
height: 1px;
margin-top: 16px;
background: #eee;
}
.config-editable-input {
height: 24px;
max-width: 510px;
font-size: 16px;
line-height: 24px;
border: 1px solid #d9d9d9;
border-radius: 4px;
transition: all 0.3s;
&:focus {
border-color: #40a9ff;
outline: 0;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
}
// 表单字段权限
.field-setting-pane {
display: flex;
flex-direction: column;
font-size: 14px;
.field-setting-desc {
padding-right: 8px;
margin-bottom: 16px;
font-size: 16px;
font-weight: 700;
}
.field-permit-title {
display: flex;
justify-content: space-between;
align-items: center;
height: 45px;
padding-left: 12px;
line-height: 45px;
background-color: #f8fafc0a;
border: 1px solid #1f38581a;
.first-title {
text-align: left !important;
} }
.other-titles {
display: flex;
justify-content: space-between;
}
.setting-title-label {
display: inline-block;
width: 110px;
padding: 5px 0;
font-size: 13px;
font-weight: 700;
color: #000;
text-align: center;
}
}
.field-setting-item {
align-items: center;
display: flex;
justify-content: space-between;
height: 38px;
padding-left: 12px;
border: 1px solid #1f38581a;
border-top: 0;
.field-setting-item-label {
display: inline-block;
width: 110px;
min-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
}
.field-setting-item-group {
display: flex;
justify-content: space-between;
.item-radio-wrap {
display: inline-block;
width: 110px;
text-align: center;
}
}
}
}
// 节点连线气泡卡片样式
.handler-item-wrapper {
display: flex;
cursor: pointer;
.handler-item {
display: flex;
flex-direction: column;
align-items: center;
}
.handler-item-icon {
width: 60px;
height: 60px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 50%;
user-select: none;
text-align: center;
&:hover {
background: #e2e2e2;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.icon-size {
font-size: 25px;
line-height: 60px;
}
}
.approve {
color: #ff943e;
}
.copy {
color: #3296fa;
}
.condition {
color: #67c23a;
}
.parallel {
color: #626aef;
}
.inclusive {
color: #345da2;
}
.handler-item-text {
margin-top: 4px;
width: 80px;
text-align: center;
font-size: 13px;
} }
} }
......
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
...@@ -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