70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<div :class="$style.container">
|
|
<ProcessEditBar :is-edit="isEdit" @on-back="goback" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
|
|
<ProcessChart v-if="!isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
|
|
<ProcessTable v-else :process-flow-id="processFlowId" @on-detail="handleDetail" @on-save-success="handleSuccess" />
|
|
<el-drawer
|
|
title="节点详情"
|
|
size="20%"
|
|
:append-to-body="true"
|
|
:before-close="()=>innerDrawer=false"
|
|
:visible.sync="innerDrawer"
|
|
>
|
|
<ProcessNodePanel />
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProcessChart from '@/views/art/process/process-chart'
|
|
import ProcessTable from '@/views/art/process/process-table'
|
|
import ProcessNodePanel from '@/views/art/process/process-node-panel'
|
|
import ProcessEditBar from '@/views/art/process/process-edit-bar'
|
|
export default {
|
|
name: 'ProcessDrawer',
|
|
components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
|
|
props: {
|
|
},
|
|
data() {
|
|
return {
|
|
innerDrawer: false,
|
|
isEdit: false,
|
|
processFlowId: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.processFlowId = this.$route.query.id
|
|
},
|
|
methods: {
|
|
handleDetail() {
|
|
this.innerDrawer = true
|
|
},
|
|
handleSubmit() {
|
|
console.log('保存成功')
|
|
this.isEdit = false
|
|
},
|
|
handleSuccess() {
|
|
this.isEdit = false
|
|
},
|
|
goback() {
|
|
this.$router.go(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" module>
|
|
.container {
|
|
.input {
|
|
display: flex;
|
|
margin: 8px 16px 8px 4px;
|
|
align-items: center;
|
|
.select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|