kd-aiot-frontend/src/views/flowable/model/edit.vue

<template>
  <div v-if="show">
    <vue-bpmn
      @save="btnSave"
      :modelData="modelData"
      :isView="isView"
      :key="$route.query.id"
    />
  </div>
</template>
<script>
  import { getAction, putAction } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  // import VueBpmn from "@/components/VueBpmn"; // 原生面板
  // import VueBpmn from "@/components/VueElementuiBpmn"; // elementui面板
  import VueBpmn from '@/components/VueBpmn';

  export default {
    name: 'FlowableModelEdit',
    components: { VueBpmn },
    data() {
      return {
        id: undefined,
        isView: false,
        modelData: {
          id: undefined,
          editor: undefined
        },
        show: false
      };
    },
    mounted() {
      // this.getModelData();
    },
    watch: {
      $route: {
        handler(route) {
          if (route.query && route.query.id) {
            this.id = route.query.id;
            this.getModelData();
          }
          if (route.query && route.query.isView) {
            this.isView = route.query.isView === 'false' ? false : true;
          }
        },
        immediate: true
      }
    },

    methods: {
      getModelData() {
        if (!this.id) {
          Message.error('id is null');
          return;
        }
        getAction('/flowable/model/queryById', {
          id: this.id
        }).then(({ data }) => {
          this.modelData.id = data.data.id;
          this.modelData.editor = data.data.editor;
          this.modelData.key = data.data.key;
          this.modelData.name = data.data.name;
          this.modelData.category = data.data.category;
          this.modelData.description = data.data.description;
          this.show = true;
          console.log(this.modelData, this.id);
        });
      },
      btnSave(modelData) {
        putAction('/flowable/model/saveModelEditor', modelData).then((res) => {
          Message.success('保存' + res.data.message);
          this.$router.push('/flowable/model');
        });
      }
    }
  };
</script>