init

src/views/workflow/common/InstanceDetails.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-drawer
+      title="审批详情"
+      size="500px"
+      v-model="approveOpen"
+      direction="rtl">
+    <div v-loading="loadingDetails">
+      <div v-if="!loadingDetails">
+        <div class="top">
+          <div class="top_left">
+            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
+            <span
+                style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
+          </div>
+          <div class="top_right" v-if="!loadingDetails">
+            <div style="margin-bottom: 12px">
+              <span style="font-size: 15px;margin-right: 15px;">{{ instance.deploymentName }}</span>
+              <tag dict-type="process_state" :value="instance.state"/>
+              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
+                <el-icon style="float: right;font-size: 20px;cursor: pointer"
+                         @click.native="processDiagramViewer = true">
+                  <View/>
+                </el-icon>
+              </el-tooltip>
+            </div>
+            <div>
+              <span style="color: rgb(108, 108, 108);">编号: {{ instance.processInstanceId }}</span>
+            </div>
+          </div>
+        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <form-render ref="taskViewForm" :form-items="processInstanceData.formItems"
+                     v-model:value="processInstanceData.formData"/>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <operation-render :operation-list="processInstanceData.operationList"
+                          :state="instance.state"/>
+      </div>
+    </div>
+  </el-drawer>
+  <el-dialog title="流程详情" v-model="processDiagramViewer" :close-on-click-modal="true">
+    <process-diagram-viewer v-if="processDiagramViewer"/>
+    <div style="height: 70px;"></div>
+  </el-dialog>
+</template>
+
+<script setup>
+import Tag from '@/components/Tag.vue'
+import FormRender from '@/views/workflow/form/FormRender.vue'
+import OperationRender from '@/views/workflow/common/OperationRender.vue'
+import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
+import {getInitiatedInstanceInfo} from "@/api/workflow/process-instance.js";
+import {defineProps, defineExpose} from 'vue'
+import {useCacheStore} from '@/stores/cache.js'
+
+useCacheStore().setCacheKey(['process_state'])
+import {useProcessStore} from '@/stores/processStore.js'
+
+const processStore = useProcessStore()
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default: {}
+  }
+})
+
+const approveOpen = ref()
+const loadingDetails = ref(true)
+const processDiagramViewer = ref(false)
+const processInstanceData = ref()
+
+
+const loadProcessInstance = async (processInstanceId) => {
+  getInitiatedInstanceInfo(processInstanceId).then(res => {
+    let data = res.data
+    processInstanceData.value = data
+    processStore.setDesign(data)
+    processStore.runningList.value = data.runningList;
+    processStore.endList.value = data.endList;
+    processStore.noTakeList.value = data.noTakeList;
+    processStore.refuseList.value = data.refuseList;
+    processStore.passList.value = data.passList;
+    nextTick(() => {
+      loadingDetails.value = false;
+    })
+  })
+}
+const init = () => {
+  approveOpen.value = true
+  loadingDetails.value = true
+  loadProcessInstance(props.instance.processInstanceId)
+}
+
+defineExpose({
+  init
+})
+
+</script>