update 流程详情-流程图

2023-10-11 12:00:08 +08:00
parent 03088b4729
commit 6148febfff
5 changed files with 414 additions and 272 deletions
@@ -0,0 +1,63 @@
+<template>
+  <j-modal
+    :title="$t('workCenter.processDetail.flowChart')"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    :footer="null"
+    @cancel="close">
+    <a-spin :spinning="confirmLoading">
+      <flow-chart dom-id="flowChart" :chart-data="chartData" is-view-only />
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import FlowChart from './FlowChart.vue'
+import { getFlowNodeList } from '../api/workCenter.js'
+
+export default {
+  name: 'FlowChartModal',
+  components: { FlowChart },
+  data () {
+    return {
+      width: 1000,
+      visible: false,
+      confirmLoading: false,
+      chartData: {},
+      processId: null // 流程id
+    }
+  },
+  methods: {
+    open () {
+      this.visible = true
+      this.initChartData()
+    },
+    close () {
+      this.visible = false
+    },
+    initChartData () {
+      this.confirmLoading = true
+      getFlowNodeList({ modelId: this.processId }).then(res => {
+        if (res.success) {
+          this.chartData = Object.assign({}, res.result || {})
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#flowChart {
+  width: 100%;
+  height: calc(100vh - 200px - 55px - 48px);
+}
+</style>