提交 2d318c87 authored 作者: kxjia's avatar kxjia

问题

上级 4853e08f
<template> <template>
<div class="flowchart-container"> <div class="flowchart-container">
<div v-if="loading" class="loading-state"> <div v-show="loading" class="loading-state">
<a-spin tip="加载流程图中..." size="large" /> <a-spin tip="加载流程图中..." size="large" />
</div> </div>
<div v-else class="bpmn-wrapper"> <div v-show="!loading" class="bpmn-wrapper">
<div class="bpmn-content"> <div class="bpmn-content">
<bpmn-viewer <bpmn-viewer :flow-data="flowData" :procInsId="procInsId" />
:flowData="flowData"
:procInsId="procInsId"
@loaded="handleLoaded"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -23,24 +19,21 @@ ...@@ -23,24 +19,21 @@
import { flowXmlAndNode } from '/@/components/Process/api/definition'; import { flowXmlAndNode } from '/@/components/Process/api/definition';
import BpmnViewer from '/@/components/Process/viewer/index.vue'; import BpmnViewer from '/@/components/Process/viewer/index.vue';
// Props
const props = defineProps<{
procInsId: string;
}>();
// Emits // Emits
const emit = defineEmits(['loaded']); const emit = defineEmits(['loaded']);
// 响应式数据 // 响应式数据
const loading = ref(false); const loading = ref(false);
const flowData = ref<any>({}); const flowData = ref<any>({});
const procInsId = ref('');
const loadData = async () => { const loadData = async (data) => {
if (!props.procInsId) return; procInsId.value = data.procInsId || '';
const deployId = data.deployId || '';
try { try {
loading.value = true; loading.value = true;
const res = await flowXmlAndNode({ procInsId: props.procInsId }); const res = await flowXmlAndNode({ procInsId: procInsId.value,deployId: deployId });
loading.value = false;
flowData.value = res; flowData.value = res;
} catch (error) { } catch (error) {
console.error('加载流程图失败:', error); console.error('加载流程图失败:', error);
...@@ -51,23 +44,11 @@ ...@@ -51,23 +44,11 @@
} }
}; };
const handleLoaded = () => {
emit('loaded');
};
// 重置数据 // 重置数据
const resetData = () => { const resetData = () => {
flowData.value = {}; flowData.value = {};
}; };
// 监听 procInsId 变化,重新加载数据
watch(() => props.procInsId, (newVal) => {
if (newVal) {
loadData();
} else {
resetData();
}
});
// 暴露方法给父组件 // 暴露方法给父组件
defineExpose({ defineExpose({
...@@ -103,6 +84,7 @@ ...@@ -103,6 +84,7 @@
align-items: center; align-items: center;
height: 100%; height: 100%;
min-height: 300px; min-height: 300px;
margin-top: 20px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
......
...@@ -3,19 +3,23 @@ ...@@ -3,19 +3,23 @@
@register="registerBasicDrawer" @register="registerBasicDrawer"
:header-style="{ backgroundColor: '#018ffb', borderBottom: '1px solid #e8eef2' }"> :header-style="{ backgroundColor: '#018ffb', borderBottom: '1px solid #e8eef2' }">
<div class="drawer-content"> <div class="drawer-content">
<FlowHistoryChart :procInsId="procInsId" /> <FlowHistoryChart ref="refFlowHistoryChart" />
<FlowHistoryRecord :procInsId="procInsId" /> <FlowHistoryRecord :procInsId="procInsId" />
</div> </div>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { defineComponent,ref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import FlowHistoryChart from './FlowHistoryChart.vue'; import FlowHistoryChart from './FlowHistoryChart.vue';
import FlowHistoryRecord from './FlowHistoryRecord.vue'; import FlowHistoryRecord from './FlowHistoryRecord.vue';
const callback = (data) => { const procInsId = ref('');
alert(JSON.stringify(data)) const dataId = ref('');
const deployId = ref('');
const refFlowHistoryChart = ref();
const callback = (data) => {
refFlowHistoryChart.value.loadData(data);
} }
const [registerBasicDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(callback); const [registerBasicDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(callback);
......
...@@ -110,9 +110,7 @@ ...@@ -110,9 +110,7 @@
return finishTime ? 'success' : 'processing'; return finishTime ? 'success' : 'processing';
}; };
const loadData = async () => { const loadData = async (data) => {
if (!props.procInsId) return;
try { try {
loading.value = true; loading.value = true;
const res = await flowRecord({ procInsId: props.procInsId }); const res = await flowRecord({ procInsId: props.procInsId });
...@@ -131,15 +129,6 @@ ...@@ -131,15 +129,6 @@
flowRecordList.value = []; flowRecordList.value = [];
}; };
// 监听 procInsId 变化,重新加载数据
watch(() => props.procInsId, (newVal) => {
if (newVal) {
loadData();
} else {
resetData();
}
});
// 暴露方法给父组件 // 暴露方法给父组件
defineExpose({ defineExpose({
loadData, loadData,
......
...@@ -84,6 +84,7 @@ interface WorkflowNode { ...@@ -84,6 +84,7 @@ interface WorkflowNode {
formUrl?: string formUrl?: string
formListUrl?: string formListUrl?: string
procDefId?: string procDefId?: string
procInsId?: string
dataId?: string dataId?: string
processTime?: string processTime?: string
processor?: string processor?: string
...@@ -134,6 +135,12 @@ const props = defineProps({ ...@@ -134,6 +135,12 @@ const props = defineProps({
type: String, type: String,
default: '' default: ''
}, },
procInsId: {
type: String,
default: ''
},
dataId: { dataId: {
type: String, type: String,
default: '' default: ''
...@@ -326,8 +333,9 @@ function resetFormData() { ...@@ -326,8 +333,9 @@ function resetFormData() {
const openHistoryDrawer = () => { const openHistoryDrawer = () => {
openDrawer(true,{ openDrawer(true,{
procInsId: props.deployId, procInsId: props.procInsId,
dataId: props.dataId, dataId: props.dataId,
deployId: props.deployId,
} ); } );
}; };
......
...@@ -206,7 +206,7 @@ if (key === '3') { ...@@ -206,7 +206,7 @@ if (key === '3') {
deployId: taskForm.deployId, deployId: taskForm.deployId,
}).then((res) => { }).then((res) => {
flowData.value = res flowData.value = res
console.log("xml",JSON.stringify(res)) console.log("xml88888888888888888",JSON.stringify(res))
}) })
} }
} }
......
...@@ -92,6 +92,7 @@ const handleClick = (key: string) => { ...@@ -92,6 +92,7 @@ const handleClick = (key: string) => {
flowXmlAndNode({ deployId: deployId.value }).then(res => { flowXmlAndNode({ deployId: deployId.value }).then(res => {
flowData.value = res flowData.value = res
}) })
} }
} }
......
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
class="custom-class" class="custom-class"
root-class-name="root-class-name" root-class-name="root-class-name"
:root-style="{ color: 'blue' }" :root-style="{ color: 'blue' }"
title="流程详情111" title="流程详情"
placement="right" placement="right"
width="90%" width="90%"
style="margin: 0px; padding: 0px" style="margin: 0px; padding: 0px"
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
import { list,problemArchive} from './StProblemCheck.api'; import { list,problemArchive} from './StProblemCheck.api';
import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue'; import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue';
const emit = defineEmits(['callback']) const emit = defineEmits(['callback','openMultiForm'])
const props = defineProps({ const props = defineProps({
beforeFlowNode: { beforeFlowNode: {
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
} }
}) })
const emit = defineEmits(['callback','startWorkFlow','sendWorkFlow']) const emit = defineEmits(['callback','startWorkFlow','sendWorkFlow','openMultiForm'])
//注册model //注册model
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
...@@ -182,9 +182,21 @@ ...@@ -182,9 +182,21 @@
}) })
} }
async function handleStartUpdate(flowData) {
let record = {
procInsId: flowData.procInsId,
id:flowData.dataId
}
await saveOrUpdate(record,true).then(res => {
handleSuccess(null);
})
}
defineExpose({ defineExpose({
handleUpdate, handleUpdate,
handleStartUpdate
}) })
</script> </script>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
import { list, saveOrUpdate } from './StProblemCheck.api'; import { list, saveOrUpdate } from './StProblemCheck.api';
import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue'; import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue';
const emit = defineEmits(['callback','sendWorkFlow']) const emit = defineEmits(['callback','sendWorkFlow','openMultiForm'])
const props = defineProps({ const props = defineProps({
beforeFlowNode: { beforeFlowNode: {
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
function handleExecuteApproval(record: Recordable) { function handleExecuteApproval(record: Recordable) {
emit("callback",record) emit("openMultiForm",record)
} }
function handleSuccess() { function handleSuccess() {
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
import { list, saveOrUpdate } from './StProblemCheck.api'; import { list, saveOrUpdate } from './StProblemCheck.api';
import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue'; import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue';
const emit = defineEmits(['callback','sendWorkFlow']) const emit = defineEmits(['callback','sendWorkFlow','openMultiForm'])
const props = defineProps({ const props = defineProps({
beforeFlowNode: { beforeFlowNode: {
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
function handleExecute(record: Recordable) { function handleExecute(record: Recordable) {
emit("callback",record) emit("openMultiForm",record)
} }
function handleSuccess() { function handleSuccess() {
......
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
:currentFlowNode="node" :currentFlowNode="node"
:nextFlowNode="workflowNodes[index+1]" :nextFlowNode="workflowNodes[index+1]"
@open-multi-form="handleOpenMultiForm" @open-multi-form="handleOpenMultiForm"
@callback="handleCallback"
/> />
</div> </div>
<div v-else class="no-form"> <div v-else class="no-form">
...@@ -26,6 +25,7 @@ ...@@ -26,6 +25,7 @@
:workflow-nodes="workflowNodes" :workflow-nodes="workflowNodes"
:external-form-data="externalFormData" :external-form-data="externalFormData"
:proc-def-id="currentProcDefId" :proc-def-id="currentProcDefId"
:proc-ins-id="procInsId"
:show-history-form-data="true" :show-history-form-data="true"
:data-id="dataId" :data-id="dataId"
:deploy-id="deployId" :deploy-id="deployId"
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
import { definitionStart, definitionStartByDeployId,addMyTaskFlow } from "/@/components/Process/api/definition"; import { definitionStart, definitionStartByDeployId,addMyTaskFlow } from "/@/components/Process/api/definition";
import WorkFlowFormDrawer from '/@/views/common/WorkFlowFormDrawer.vue'; import WorkFlowFormDrawer from '/@/views/common/WorkFlowFormDrawer.vue';
import TaskAssigneeDrawer from '/@/views/common/TaskAssigneeDrawer.vue' import TaskAssigneeDrawer from '/@/views/common/TaskAssigneeDrawer.vue'
import { CONNREFUSED } from 'dns';
const formTableName = "st_problem_check"; const formTableName = "st_problem_check";
const workflowNodes = ref<any[]>([]); const workflowNodes = ref<any[]>([]);
...@@ -65,6 +66,7 @@ ...@@ -65,6 +66,7 @@
const currentNode = ref<any>({}); const currentNode = ref<any>({});
const isShowApprovalPanel = ref(true); const isShowApprovalPanel = ref(true);
const deployId = ref(''); const deployId = ref('');
const procInsId = ref('');
// 改为动态 ref 对象,存储每个节点的组件实例 // 改为动态 ref 对象,存储每个节点的组件实例
const formComponentRefs = ref<Map<number, any>>(new Map()); const formComponentRefs = ref<Map<number, any>>(new Map());
...@@ -147,17 +149,18 @@ ...@@ -147,17 +149,18 @@
} }
const handleDefinitionStart = async (data) => { const handleDefinitionStart = async (data) => {
alert(111)
const formData = { dataId:data.id, dataName: 'id' }; const formData = { dataId:data.id, dataName: 'id' };
const deployId = currentNode.value.deployId || ''; const deployId = currentNode.value.deployId || '';
const startResRaw = await definitionStartByDeployId(deployId, formData); const startResRaw = await definitionStartByDeployId(deployId, formData);
let myTaskFlow = {} let myTaskFlow = {}
if (startResRaw?.procInsId) { if (startResRaw?.procInsId) {
procInsId.value = startResRaw.procInsId;
myTaskFlow["taskId"] = startResRaw.taskId; myTaskFlow["taskId"] = startResRaw.taskId;
myTaskFlow["deployId"] = startResRaw.deployId; myTaskFlow["deployId"] = startResRaw.deployId;
myTaskFlow["procInsId"] = startResRaw.instanceId; myTaskFlow["procInsId"] = startResRaw.procInsId;
myTaskFlow["executionId"] = startResRaw.executionId; myTaskFlow["executionId"] = startResRaw.executionId;
myTaskFlow["procDefId"] = startResRaw.procInsId; myTaskFlow["procDefId"] = startResRaw.instanceId ;
myTaskFlow["targetId"] = data.id; myTaskFlow["targetId"] = data.id;
myTaskFlow["taskDefinitionKey"] = currentNode.value.id; myTaskFlow["taskDefinitionKey"] = currentNode.value.id;
myTaskFlow["formTableName"] = formTableName; myTaskFlow["formTableName"] = formTableName;
...@@ -172,13 +175,25 @@ ...@@ -172,13 +175,25 @@
} }
} }
await addMyTaskFlow(myTaskFlow); await addMyTaskFlow(myTaskFlow);
} const currentFormComponent = getCurrentFormComponent();
if (currentFormComponent && typeof currentFormComponent.handleUpdate === 'function') {
currentFormComponent.handleStartUpdate({
dataId:data.id,
procInsId: startResRaw.procInsId,
});
} else {
console.warn('当前组件实例不存在或没有 handleUpdate 方法');
}
}
} }
const handleDefinitionSend = async (data) => { const handleDefinitionSend = async (data) => {
drawerTaskVisible.value = true; drawerTaskVisible.value = true;
dataId.value = data.id; dataId.value = data.id;
deployId.value = currentNode.value.deployId || ''; deployId.value = currentNode.value.deployId || '';
await setNextNodeUser(); await setNextNodeUser();
} }
...@@ -200,36 +215,37 @@ ...@@ -200,36 +215,37 @@
} }
const handleOpenMultiForm = (params: { // const handleOpenMultiForm = (params: {
nodeIndex?: number; // nodeIndex?: number;
title?: string; // title?: string;
procDefId?: string; // procDefId?: string;
formData?: Record<string, any>; // formData?: Record<string, any>;
}) => { // }) => {
if (params.nodeIndex !== undefined) { // if (params.nodeIndex !== undefined) {
currentMultiFormIndex.value = params.nodeIndex; // currentMultiFormIndex.value = params.nodeIndex;
} else { // } else {
currentMultiFormIndex.value = activeTab.value - 1; // currentMultiFormIndex.value = activeTab.value - 1;
} // }
if (params.title) { // if (params.title) {
drawerTitle.value = params.title; // drawerTitle.value = params.title;
} else { // } else {
const currentNode = workflowNodes.value[currentMultiFormIndex.value]; // const currentNode = workflowNodes.value[currentMultiFormIndex.value];
drawerTitle.value = currentNode ? `${currentNode.name} - 历史表单查看` : '表单处理'; // drawerTitle.value = currentNode ? `${currentNode.name} - 历史表单查看` : '表单处理';
} // }
if (params.procDefId) { // if (params.procDefId) {
currentProcDefId.value = params.procDefId; // currentProcDefId.value = params.procDefId;
} else if (workflowNodes.value[currentMultiFormIndex.value]) { // } else if (workflowNodes.value[currentMultiFormIndex.value]) {
currentProcDefId.value = workflowNodes.value[currentMultiFormIndex.value].procDefId || ''; // currentProcDefId.value = workflowNodes.value[currentMultiFormIndex.value].procDefId || '';
} // }
if (params.formData) { // if (params.formData) {
externalFormData.value = params.formData; // externalFormData.value = params.formData;
} else { // } else {
externalFormData.value = {}; // externalFormData.value = {};
} // }
drawerVisible.value = true; // drawerVisible.value = true;
}; // };
const handleMultiFormSubmit = async (submitData: { const handleMultiFormSubmit = async (submitData: {
nodeId: string;nodeName: string;formData: any;procDefId: string; nodeId: string;nodeName: string;formData: any;procDefId: string;
}) => { }) => {
...@@ -258,7 +274,6 @@ ...@@ -258,7 +274,6 @@
function handlSendSuccess(dataId: any) { function handlSendSuccess(dataId: any) {
const currentFormComponent = getCurrentFormComponent(); const currentFormComponent = getCurrentFormComponent();
if (currentFormComponent && typeof currentFormComponent.handleUpdate === 'function') { if (currentFormComponent && typeof currentFormComponent.handleUpdate === 'function') {
currentFormComponent.handleUpdate(dataId); currentFormComponent.handleUpdate(dataId);
...@@ -272,8 +287,10 @@ ...@@ -272,8 +287,10 @@
} }
async function handleCallback(data: any) { async function handleOpenMultiForm(data: any) {
deployId.value = currentNode.value.deployId || ''; deployId.value = currentNode.value.deployId || '';
procInsId.value = data.procInsId || '';
drawerVisible.value = true; drawerVisible.value = true;
dataId.value = data.id || ''; dataId.value = data.id || '';
currentNode.value = workflowNodes.value[currentMultiFormIndex.value]; currentNode.value = workflowNodes.value[currentMultiFormIndex.value];
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
} }
}) })
const emit = defineEmits(['callback','sendWorkFlow']) const emit = defineEmits(['callback','sendWorkFlow','openMultiForm'])
//注册model //注册model
const [registerExecuteModal, { openModal: openExecuteModal }] = useModal(); const [registerExecuteModal, { openModal: openExecuteModal }] = useModal();
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
function handlePlanApproval(record: Recordable) { function handlePlanApproval(record: Recordable) {
emit("callback",record) emit("openMultiForm",record)
} }
function handleSuccess() { function handleSuccess() {
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
import { list,saveOrUpdate} from './StProblemCheck.api'; import { list,saveOrUpdate} from './StProblemCheck.api';
import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue'; import StProblemCheckExecuteModal from './components/StProblemCheckExecuteModal.vue';
const emit = defineEmits(['callback','sendWorkFlow']) const emit = defineEmits(['callback','sendWorkFlow','openMultiForm'])
const props = defineProps({ const props = defineProps({
beforeFlowNode: { beforeFlowNode: {
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
function handlePlan(record: Recordable) { function handlePlan(record: Recordable) {
emit("callback",record) emit("openMultiForm",record)
} }
async function handleSendNext(record: Recordable) { async function handleSendNext(record: Recordable) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论