Source/plt-web/plt-web-ui/src/views/processTemplate/customDefine/index.vue

@@ -1,7 +1,7 @@
<template>
  <!--流程模板定义-->
  <basic-container style="height: calc(100vh - 123px)">
    <div style="margin-bottom: 5px;">
    <div style="margin-bottom: 10px;">
      流程分类：
      <el-select v-model="tempType" :clearable="true" placeholder="请选择" size="small"
                 style="width: 300px;margin-right: 20px;"
@@ -77,22 +77,45 @@
                </span>
            </el-button>
          </template>

        </avue-crud>
        <!-- 创建编辑自定义对话框    -->
        <el-dialog
          v-dialogDrag
          v-loading="dialogLoading"
          :title="dialogType === 'add' ? ' 创建' : '编辑'"
          title="流程自定义"
          :visible.sync="dialogVisible"
          append-to-body="true"
          class="avue-dialog"
          width="1000px"
          @close="dialogClose"
          :close-on-press-escape="false"
          :fullscreen="true"
          :before-close="handleNutflowClose"
          custom-class="wf-dialog"
        >
          <wf-design-base v-if="nutflowOption.step === 1"
                          class="animated fadeIn"
                          style="height: calc(100vh - 178px);"
                          ref="wf-design"
                          :options="nutflowOption.step1"></wf-design-base>
          <wf-design-base v-if="nutflowOption.step === 2"
                          class="animated fadeIn"
                          style="height: calc(100vh - 178px);"
                          ref="wf-design-view"
                          :options="nutflowOption.step2"></wf-design-base>
            <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="saveHandler">确 定</el-button>
              <el-button size="small" @click="dialogClose">取 消</el-button>
              <el-button v-if="nutflowOption.step === 1"
                         size="small"
                         type="success"
                         @click="handleStep(1)">下 一 步</el-button>
              <el-button v-if="nutflowOption.step === 2"
                         size="small"
                         type="success"
                         @click="handleStep(-1)">上 一 步</el-button>
              <el-button v-if="nutflowOption.step === 2"
                         size="small"
                         type="primary"
                         @click="handleSubmitModel">确 定</el-button>
              <el-button size="small"
                         @click="handleNutflowClose(() => {}, true)">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 导入   -->
@@ -103,7 +126,7 @@

      <el-main width="60%">
        <div style="height: 100%;position: relative;">
          <flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 190px)"></flow-design>
          <flow-design style="padding-top: 5px" :is-display.sync="flowBox" :process-definition-id="processDefinitionId" height="calc(100vh - 195px)"></flow-design>
          <div style="position: absolute;top:0;left: 0;height: 100%;width: 100%"></div>
        </div>
      </el-main>
@@ -138,6 +161,18 @@
      dialogType:'add',
      processDefinitionId: '',
      flowBox: false,
      nutflowOption: {
        process: {},
        step: 1,
        step1: {
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
        },
        step2: {
          mode: 'view',
          simulation: true,
          minimap: true,
        }
      }
    }
  },
  computed: {
@@ -225,29 +260,75 @@
      this.dialogVisible = true;
      this.dialogType = 'edit'
    },
    // 编辑保存
    saveHandler() {
    //保存流程配置
    handleSubmitModel() {
      const registry = this.$refs['wf-design-view'].getElementRegistry().getAll()
      const {businessObject} = registry[0]
      const {id, name, documentation} = businessObject
      const description = (documentation && documentation.length > 0) ? documentation[0].text : null
      const params = {
        ...this.nutflowOption.process,
        modelKey: id,
        name,
        description,
        modelEditorXml: this.nutflowOption.process.xml
      }
      if(this.dialogType=='add'){
        saveProcessTemp(this.form).then(res => {
        saveProcessTemp(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
            this.handleNutflowClose()
          }
        });
      }else{
        updateProcessTemp(this.form).then(res => {
        updateProcessTemp(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
            this.handleNutflowClose()
          }
        })
      }

    },
    dialogClose(){
      this.form={};
      this.dialogLoading=false;
      this.dialogVisible=false;
    handleStep(step) {
      if (step === 1) { // 下一步
        this.$refs['wf-design'].getData('xml').then(data => {
          this.$set(this.nutflowOption.step1, 'xml', data)
          this.$set(this.nutflowOption.step2, 'xml', data)
          this.$set(this.nutflowOption.process, 'xml', data)
          this.$set(this.nutflowOption, 'step', 2)
        })
      } else {
        this.$set(this.nutflowOption, 'step', 1)
      }
    },
    handleNutflowClose(done, flag) {
      const initOption = {
        process: {},
        step: 1,
        step1: {
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
        },
        step2: {
          mode: 'view',
          simulation: true,
          minimap: true,
        }
      }
      if (done || flag) {
        this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失。', '警告', {
          type: 'warning'
        }).then(() => {
          this.$set(this, 'nutflowOption', initOption)
          if (typeof done == 'function') done()
          this.dialogVisible = false
        }).catch(() => {
        })
      } else {
        this.$set(this, 'nutflowOption', initOption)
        this.dialogVisible = false
      }
    },
    // 删除
    handleDel(row,index) {
@@ -340,6 +421,10 @@
}
</script>

<style scoped>

<style lang="scss" scoped>
::v-deep {
  .avue-dialog .el-dialog__body{
    margin-bottom: 0 !important;
  }
}
</style>