<!-- filename: index.vue author: liubin date: 2023-10-18 12:25:46 description: --> <template> <div class="app-container process-flow-view"> <ProcessInfo /> <ProcessDetail style="margin-top: 16px" @det-selected="handleDetSelected" /> <ProcessBomList style="margin-top: 16px" :current-det="currentDet" /> </div> </template> <script> import ProcessInfo from './components/ProcessInfo.vue'; import ProcessBomList from './components/ProcessBomList.vue'; import ProcessDetail from './components/ProcessDetail.vue'; export default { name: 'ProcessFlowView', components: { ProcessInfo, ProcessDetail, ProcessBomList }, props: {}, data() { return { flowId: null, currentDet: null }; }, provide() { const that = this; return { getFlowId() { return that.flowId; }, }; }, mounted() { console.log('activated...', this.$route.params); this.flowId = this.$route.params.id; }, computed: {}, methods: { handleDetSelected(det) { if (det != null) { this.currentDet = { ...det } } else this.currentDet = null; } }, }; </script> <style scoped lang="scss"> .process-flow-view { padding: 8px; flex: 1; background: #f2f4f9; display: flex; flex-direction: column; } </style>