init

src/views/art/process/list.vue

@@ -0,0 +1,69 @@
+<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>