70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<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: {},
|
|
processKey: null // 流程key
|
|
}
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
this.initChartData()
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
},
|
|
initChartData () {
|
|
this.confirmLoading = true
|
|
getFlowNodeList({ key: this.processKey }).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);
|
|
}
|
|
|
|
.fullscreen {
|
|
/deep/ #flowChart {
|
|
height: calc(100vh - 55px - 48px);
|
|
}
|
|
}
|
|
</style>
|