wangxiang
2 years ago
6 changed files with 401 additions and 55 deletions
@ -0,0 +1,73 @@ |
|||||||
|
<template> |
||||||
|
<div id="workflowChart" v-loading="state.loading"/> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
import { reactive, onDeactivated } from 'vue'; |
||||||
|
import { loadMicroApp, MicroApp } from 'qiankun'; |
||||||
|
import { getSubDefineProps } from '/@/qiankun/state'; |
||||||
|
import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum'; |
||||||
|
import { useMicroAppStore } from '/@/store/modules/microApp'; |
||||||
|
import { apps } from '/@/qiankun/apps'; |
||||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||||
|
import { getFlowChart as getProcessDefFlowChart } from '/@/api/platform/workflow/controller/process'; |
||||||
|
import { getFlowChart as getProcessInsFlowChart } from '/@/api/platform/workflow/controller/task'; |
||||||
|
|
||||||
|
interface WindowState { |
||||||
|
workflowDesignApp: MicroApp; |
||||||
|
loading: boolean; |
||||||
|
bpmnData: Recordable; |
||||||
|
} |
||||||
|
|
||||||
|
const state = reactive<WindowState>({ |
||||||
|
workflowDesignApp: undefined!, |
||||||
|
loading: false, |
||||||
|
bpmnData: {} |
||||||
|
}); |
||||||
|
const workflowDesignProps = { |
||||||
|
style: { 'min-height': '100vh' }, |
||||||
|
}; |
||||||
|
const microAppStore = useMicroAppStore(); |
||||||
|
const { createMessage } = useMessage(); |
||||||
|
|
||||||
|
async function init(processInsId: string, processDefId: string) { |
||||||
|
if (processInsId || processDefId) { |
||||||
|
state.loading = true; |
||||||
|
// 处理流程图xml数据 |
||||||
|
try { |
||||||
|
if (this.processInsId) { |
||||||
|
state.bpmnData = await getProcessInsFlowChart(processInsId); |
||||||
|
} else { |
||||||
|
const bpmnXml = await getProcessDefFlowChart(processDefId); |
||||||
|
state.bpmnData = { bpmnXml }; |
||||||
|
} |
||||||
|
state.workflowDesignApp?.unmount(); |
||||||
|
state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), { |
||||||
|
container: '#workflowChart', |
||||||
|
props: { |
||||||
|
...getSubDefineProps(), |
||||||
|
mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART, |
||||||
|
[GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps |
||||||
|
} |
||||||
|
}), { sandbox: { experimentalStyleIsolation: true }}); |
||||||
|
state.workflowDesignApp.mountPromise.then(() => { |
||||||
|
const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART), |
||||||
|
workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart']; |
||||||
|
workflowRef.setHighlightImportDiagram(state.bpmnData); |
||||||
|
state.loading = false; |
||||||
|
}); |
||||||
|
} catch(e: any) { |
||||||
|
createMessage.error(e); |
||||||
|
state.loading = false; |
||||||
|
} |
||||||
|
} else createMessage.error('无法打开流程图,没有关联流程图ID!'); |
||||||
|
} |
||||||
|
|
||||||
|
onDeactivated(() => { |
||||||
|
state.workflowDesignApp?.unmount(); |
||||||
|
}); |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
init |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
@ -0,0 +1,130 @@ |
|||||||
|
<template> |
||||||
|
<a-card :class="prefixCls" title="流程信息" :bordered="false"> |
||||||
|
<a-timeline> |
||||||
|
<a-timeline-item color="#3f9eff"> |
||||||
|
<div class="workflow"> |
||||||
|
<div class="timestamp">{{formatToDateTime()}}</div> |
||||||
|
<a-card> |
||||||
|
<h4>{{'管理员审批'}}</h4> |
||||||
|
<a-row :gutter="25"> |
||||||
|
<a-col class="tip" style="margin-left:10px" :span="11"> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">审批人 : </span> |
||||||
|
<span class="value">{{'虚拟内容'}}</span> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">办理状态 : </span> |
||||||
|
<span class="value"> |
||||||
|
<!-- <a-tag :type="historyFlowChange.activityCommentInfo.mesLevel" |
||||||
|
effect="dark" |
||||||
|
size="small" |
||||||
|
>{{'虚拟内容}}</a-tag>--> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">审批意见 : </span> |
||||||
|
<!-- <a-tooltip effect="dark" |
||||||
|
:content="historyFlowChange.activityCommentInfo.message" |
||||||
|
placement="top-start" |
||||||
|
> |
||||||
|
<span class="value">{{'虚拟内容'}}</span> |
||||||
|
</a-tooltip>--> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">开始时间 : </span> |
||||||
|
<span class="value">{{'虚拟内容'}}</span> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">结束时间 : </span> |
||||||
|
<span class="value">{{'虚拟内容'}}</span> |
||||||
|
</div> |
||||||
|
<div class="item"> |
||||||
|
<span class="label">用时 : </span> |
||||||
|
<span class="value">{{'虚拟内容'}}</span> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-card> |
||||||
|
</div> |
||||||
|
</a-timeline-item> |
||||||
|
</a-timeline> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup> |
||||||
|
/** |
||||||
|
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
||||||
|
* 采用vben-动态表格表单封装组件编写,采用 setup 写法 |
||||||
|
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
||||||
|
* author wangxiang4 |
||||||
|
*/ |
||||||
|
import { PropType } from 'vue'; |
||||||
|
import { Workflow } from '/@/api/platform/workflow/entity/workflow'; |
||||||
|
import { Timeline } from 'ant-design-vue'; |
||||||
|
import { formatToDateTime } from '/@/utils/dateUtil'; |
||||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||||
|
|
||||||
|
const ATimeline = Timeline; |
||||||
|
const ATimelineItem = Timeline.Item; |
||||||
|
const { prefixCls } = useDesign('workflow-time-line'); |
||||||
|
const props = defineProps({ |
||||||
|
historyFlowChangeList: { |
||||||
|
type: Array as PropType<Workflow[]>, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
@prefix-cls: ~'@{namespace}-workflow-time-line'; |
||||||
|
|
||||||
|
.@{prefix-cls} { |
||||||
|
.workflow{ |
||||||
|
.timestamp { |
||||||
|
color: #909399; |
||||||
|
padding-bottom: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
margin-bottom: 8px; |
||||||
|
|
||||||
|
.label { |
||||||
|
display: inline-block; |
||||||
|
height: 100%; |
||||||
|
width: 70px; |
||||||
|
font-size: 14px; |
||||||
|
color: #5e6d82; |
||||||
|
text-align: end; |
||||||
|
vertical-align: top; |
||||||
|
|
||||||
|
&::after { |
||||||
|
display: inline-block; |
||||||
|
width: 100%; |
||||||
|
content: ''; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.value { |
||||||
|
padding-left: 10px; |
||||||
|
font-size: 14px; |
||||||
|
max-width: calc(100% - 90px); |
||||||
|
color: #5e6d82; |
||||||
|
display: inline-block; |
||||||
|
overflow:hidden; |
||||||
|
white-space:nowrap; |
||||||
|
text-overflow: ellipsis |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tip { |
||||||
|
padding: 8px 16px; |
||||||
|
background-color: #ecf8ff; |
||||||
|
border-radius: 4px; |
||||||
|
border-left: 5px solid #50bfff; |
||||||
|
margin: 20px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
<template> |
||||||
|
<a-card :class="prefixCls" title="流转记录" :bordered="false"> |
||||||
|
<a-steps :current="current" size="small"> |
||||||
|
<a-step> |
||||||
|
<template #title>开始</template> |
||||||
|
<template #description> |
||||||
|
<span>admin,2023-10-07 14:40:17</span> |
||||||
|
</template> |
||||||
|
</a-step> |
||||||
|
<a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/> |
||||||
|
<a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/> |
||||||
|
<a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/> |
||||||
|
<a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/> |
||||||
|
<a-step title="小猫审批" description="小猫,2023-10-07 14:40:17"/> |
||||||
|
</a-steps> |
||||||
|
<BasicTable @register="registerTable"/> |
||||||
|
</a-card> |
||||||
|
</template> |
||||||
|
<script lang="ts" setup name="WorkflowStep"> |
||||||
|
/** |
||||||
|
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
||||||
|
* 采用vben-动态表格表单封装组件编写,采用 setup 写法 |
||||||
|
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
||||||
|
* author wangxiang4 |
||||||
|
*/ |
||||||
|
import { PropType, ref } from 'vue'; |
||||||
|
import { Workflow } from '/@/api/platform/workflow/entity/workflow'; |
||||||
|
import { Steps } from 'ant-design-vue'; |
||||||
|
import { formatToDateTime } from '/@/utils/dateUtil'; |
||||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||||
|
import { BasicTable, useTable } from '/@/components/Table'; |
||||||
|
import { columns } from './workflowStep.data'; |
||||||
|
|
||||||
|
const ASteps = Steps; |
||||||
|
const AStep = Steps.Step; |
||||||
|
const { prefixCls } = useDesign('workflow-step'); |
||||||
|
const current = ref<number>(0); |
||||||
|
const props = defineProps({ |
||||||
|
historyFlowChangeList: { |
||||||
|
type: Array as PropType<Workflow[]>, |
||||||
|
default: () => [] |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const [registerTable, { reload }] = useTable({ |
||||||
|
title: '流程进度列表', |
||||||
|
//api: listProcessDef, |
||||||
|
rowKey: 'id', |
||||||
|
columns, |
||||||
|
useSearchForm: false, |
||||||
|
showTableSetting: true, |
||||||
|
showIndexColumn: false, |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
</script> |
||||||
|
<style lang="less" scoped> |
||||||
|
@prefix-cls: ~'@{namespace}-workflow-step'; |
||||||
|
|
||||||
|
.@{prefix-cls} { |
||||||
|
:deep(.ant-steps) { |
||||||
|
&-item-content { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&-item-title { |
||||||
|
min-width: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
&-item-description { |
||||||
|
min-width: 200px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import { BasicColumn } from '/@/components/Table'; |
||||||
|
import { h } from 'vue'; |
||||||
|
import { Tag } from 'ant-design-vue'; |
||||||
|
|
||||||
|
export const columns: BasicColumn[] = [ |
||||||
|
{ |
||||||
|
title: '执行环节', |
||||||
|
dataIndex: ['historicActivityInstance', 'activityName'], |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '执行人', |
||||||
|
dataIndex: 'assigneeName', |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '开始时间', |
||||||
|
dataIndex: ['historicActivityInstance', 'startTime'], |
||||||
|
width: 150 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '结束时间', |
||||||
|
dataIndex: ['historicActivityInstance', 'endTime'], |
||||||
|
width: 150, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '办理状态', |
||||||
|
dataIndex: ['activityCommentInfo', 'mesName'], |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '审批意见', |
||||||
|
dataIndex: ['activityCommentInfo', 'message'], |
||||||
|
width: 200, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '任务历时', |
||||||
|
dataIndex: 'durationTime', |
||||||
|
width: 200, |
||||||
|
customRender: ({ record }) => { |
||||||
|
const durationTime = record.durationTime; |
||||||
|
return h(Tag, { color: 'processing' }, () => durationTime || '0秒'); |
||||||
|
} |
||||||
|
} |
||||||
|
]; |
||||||
Loading…
Reference in new issue