wangxiang
2 years ago
6 changed files with 401 additions and 55 deletions
@ -0,0 +1,73 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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