mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-07-18 04:45:07 +08:00
【功能优化】仿钉钉流程设计优化
This commit is contained in:
@ -342,7 +342,7 @@ const handleDesign = (row: any) => {
|
||||
})
|
||||
} else {
|
||||
push({
|
||||
name: 'SimpleWorkflowDesignEditor',
|
||||
name: 'SimpleModelDesign',
|
||||
query: {
|
||||
modelId: row.id
|
||||
}
|
||||
@ -492,9 +492,11 @@ watch(
|
||||
<style lang="scss">
|
||||
.rename-dialog.el-dialog {
|
||||
padding: 0 !important;
|
||||
|
||||
.el-dialog__header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
border-top: none !important;
|
||||
}
|
||||
@ -503,8 +505,8 @@ watch(
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.el-table__cell {
|
||||
border-bottom: none !important;
|
||||
overflow: hidden;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -338,7 +338,7 @@ const handleDesign = (row: any) => {
|
||||
})
|
||||
} else {
|
||||
push({
|
||||
name: 'SimpleWorkflowDesignEditor',
|
||||
name: 'SimpleModelDesign',
|
||||
query: {
|
||||
modelId: row.id
|
||||
}
|
||||
|
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<el-card v-loading="loading" class="box-card">
|
||||
<SimpleProcessViewer :flow-node="simpleModel" />
|
||||
</el-card>
|
||||
<div v-loading="loading" class="mb-20px">
|
||||
<SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { TaskStatusEnum } from '@/api/bpm/task'
|
||||
import { BpmProcessInstanceStatus } from '@/utils/constants'
|
||||
import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
|
||||
import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
|
||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||||
@ -18,10 +17,7 @@ const props = defineProps({
|
||||
id: propTypes.string // 流程实例的编号
|
||||
})
|
||||
|
||||
// const view = ref({
|
||||
// simpleModel: undefined
|
||||
// }) // simple 模型数据
|
||||
|
||||
const tasks = ref([])
|
||||
const simpleModel = ref()
|
||||
|
||||
/** 只有 loading 完成时,才去加载流程列表 */
|
||||
@ -31,6 +27,7 @@ watch(
|
||||
if (value && props.id) {
|
||||
const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
|
||||
if (modelView) {
|
||||
tasks.value = modelView.tasks;
|
||||
// 已经拒绝的活动节点编号集合,只包括 UserTask
|
||||
const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
|
||||
// 进行中的活动节点编号集合, 只包括 UserTask
|
||||
@ -47,7 +44,7 @@ watch(
|
||||
finishedActivityIds,
|
||||
finishedSequenceFlowActivityIds
|
||||
)
|
||||
console.log("modelView.simpleModel==>", modelView.simpleModel)
|
||||
console.log('modelView.simpleModel==>', modelView.simpleModel)
|
||||
simpleModel.value = modelView.simpleModel
|
||||
}
|
||||
}
|
||||
@ -60,8 +57,7 @@ const setSimpleModelNodeTaskStatus = (
|
||||
rejectedTaskActivityIds: string[],
|
||||
unfinishedTaskActivityIds: string[],
|
||||
finishedActivityIds: string[],
|
||||
finishedSequenceFlowActivityIds: string[],
|
||||
|
||||
finishedSequenceFlowActivityIds: string[]
|
||||
) => {
|
||||
if (!simpleModel) {
|
||||
return
|
||||
@ -75,7 +71,7 @@ const setSimpleModelNodeTaskStatus = (
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
// 审批节点
|
||||
if (
|
||||
simpleModel.type === NodeType.START_USER_NODE ||
|
||||
@ -84,7 +80,7 @@ const setSimpleModelNodeTaskStatus = (
|
||||
simpleModel.activityStatus = TaskStatusEnum.NOT_START
|
||||
if (rejectedTaskActivityIds.includes(simpleModel.id)) {
|
||||
simpleModel.activityStatus = TaskStatusEnum.REJECT
|
||||
} else if(unfinishedTaskActivityIds.includes(simpleModel.id)) {
|
||||
} else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
|
||||
simpleModel.activityStatus = TaskStatusEnum.RUNNING
|
||||
} else if (finishedActivityIds.includes(simpleModel.id)) {
|
||||
simpleModel.activityStatus = TaskStatusEnum.APPROVE
|
||||
@ -152,9 +148,3 @@ const setSimpleModelNodeTaskStatus = (
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style>
|
||||
.box-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
@ -75,11 +75,14 @@
|
||||
<!-- 流程图 -->
|
||||
<el-tab-pane label="流程图" name="diagram">
|
||||
<div class="form-scroll-area">
|
||||
<ProcessInstanceBpmnViewer
|
||||
<ProcessInstanceSimpleViewer
|
||||
v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE"
|
||||
:id="`${id}`"
|
||||
:loading="processInstanceLoading"
|
||||
:show-header="false"
|
||||
/>
|
||||
<ProcessInstanceBpmnViewer
|
||||
v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN"
|
||||
:id="`${id}`" :loading="processInstanceLoading" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
@ -122,11 +125,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { BpmModelType } from '@/utils/constants'
|
||||
import { setConfAndFields2 } from '@/utils/formCreate'
|
||||
import type { ApiAttrs } from '@form-create/element-ui/types/config'
|
||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||||
import * as TaskApi from '@/api/bpm/task'
|
||||
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
|
||||
import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
|
||||
import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
|
||||
import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
|
||||
import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
|
||||
|
@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative">
|
||||
<SimpleProcessDesigner :model-id="modelId" />
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap :bodyStyle="{ padding: '20px 16px' }">
|
||||
<SimpleProcessDesigner :model-id="modelId" @success="close" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
|
||||
|
||||
defineOptions({
|
||||
name: 'SimpleWorkflowDesignEditor'
|
||||
name: 'SimpleModelDesign'
|
||||
})
|
||||
const router = useRouter() // 路由
|
||||
const { query } = useRoute() // 路由的查询
|
||||
const modelId = query.modelId as string
|
||||
const close = () => {
|
||||
router.push({ path: '/bpm/manager/model' })
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
Reference in New Issue
Block a user