75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<template>
|
|
<el-drawer
|
|
title="工艺流程图"
|
|
size="85%"
|
|
:append-to-body="true"
|
|
:visible.sync="visible"
|
|
:wrapper-closable="false"
|
|
:before-close="() => $emit('on-close')"
|
|
>
|
|
<ProcessEditBar :is-edit="isEdit" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
|
|
<ProcessChart v-show="!isEdit" @on-detail="handleDetail" />
|
|
<ProcessTable v-if="isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
|
|
<el-drawer
|
|
title="节点详情"
|
|
size="20%"
|
|
:append-to-body="true"
|
|
:before-close="()=>innerDrawer=false"
|
|
:visible.sync="innerDrawer"
|
|
>
|
|
<ProcessNodePanel />
|
|
</el-drawer>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import ProcessChart from '@/views/art/components/process-chart'
|
|
import ProcessTable from '@/views/art/components/process-table'
|
|
import ProcessNodePanel from '@/views/art/components/process-node-panel'
|
|
import ProcessEditBar from '@/views/art/components/process-edit-bar'
|
|
export default {
|
|
name: 'ProcessDrawer',
|
|
components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
processFlowId: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
innerDrawer: false,
|
|
isEdit: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleDetail() {
|
|
this.innerDrawer = true
|
|
},
|
|
handleSubmit() {
|
|
console.log('保存成功')
|
|
this.isEdit = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" module>
|
|
.dialog {
|
|
.input {
|
|
display: flex;
|
|
margin: 8px 16px 8px 4px;
|
|
align-items: center;
|
|
.select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|