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

@@ -1,31 +1,145 @@
<template>
  <!--流程模板定义-->
  <basic-container>
    <div>
  <basic-container style="height: calc(100vh - 123px)">
    <div style="margin-bottom: 10px;">
      流程分类：
      <el-select v-model="tempType" :clearable="true" placeholder="请选择" size="small"
                 style="width: 300px;margin-right: 20px;"
                 @change="tempTypeChange">
        <el-option
          v-for="item in tempTypeData"
          :key="item.oid"
          :label="item.text"
          :value="item.attributes.name">
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      流程模板名称：
      <el-input size="small" v-model="tempName" style="width: 300px;margin-right: 10px;"></el-input>
      <el-button icon="el-icon-search" plain size="small" style="margin-right: 40px;" type="primary"
                 @click="searchValue">
                 @click="searchData">
        查询
      </el-button>
    </div>
    <el-container style="height: calc(100% - 100px)">
      <el-aside style="width: 40%;min-width: 500px;margin-right: 5px;">
        <avue-crud
          ref="crud"
          :data="tableData"
          :option="option"
          :table-loading="tableLoading"
          @on-load="getTableList"
          @refresh-change="getTableList"
          @selection-change="selectionChange"
          @row-click="rowClickHandler"
        >
          <template slot="menuLeft" slot-scope="scope">
            <el-button v-if="permissionList.addBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="handlerAdd">
              <icon-show :name="permissionList.addBtn.source"></icon-show>
              增加
            </el-button>
            <el-button v-if="permissionList.downloadImportTemplateBtn" class="button-custom-icon" plain size="small"
                       type="primary" @click="downloadTemplateHandler">
              <icon-show :name="permissionList.downloadImportTemplateBtn.source"></icon-show>
              下载导入模板
            </el-button>
            <el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="uploadHandler">
              <icon-show :name="permissionList.importBtn.source"></icon-show>
              导入
            </el-button>
            <el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
                       @click="downloadHandler">
              <icon-show :name="permissionList.exportBtn.source"></icon-show>
              导出
            </el-button>
          </template>

          <template slot="menu" slot-scope="scope">
            <el-button v-if="permissionList.editBtn" size="small" type="text"
                       @click="handleEdit(scope.row)">
              <icon-show :name="permissionList.editBtn.source"></icon-show>
              编辑
            </el-button>
            <el-button v-if="permissionList.delBtn" size="small" type="text"
                       @click="handleDel(scope.row)">
              <icon-show :name="permissionList.delBtn.source"></icon-show>
              删除
            </el-button>
            <el-button size="small" type="text" @click.stop="stopHandler(scope.row)">
                <span v-if="scope.row.status === 0 && permissionList.stopBtn" style="color: #fa3434;display: flex">
                  <icon-show :name="permissionList.stopBtn.source"></icon-show>
                  停用
                </span>
              <span v-if="scope.row.status === 1 && permissionList.actionBtn" style="color: #55b61d;display: flex">
                  <icon-show :name="permissionList.actionBtn.source"></icon-show>
                  启用
                </span>
            </el-button>
          </template>
        </avue-crud>
        <!-- 创建编辑自定义对话框    -->
        <el-dialog
          v-dialogDrag
          v-loading="dialogLoading"
          title="流程自定义"
          :visible.sync="dialogVisible"
          append-to-body="true"
          class="avue-dialog"
          :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 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>
        <!-- 导入   -->
        <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入流程模板"
                     @updata="getTableList"></upload-file>

      </el-aside>

      <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 - 195px)"></flow-design>
          <div style="position: absolute;top:0;left: 0;height: 100%;width: 100%"></div>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import basicOption from "@/util/basic-option";
import {getTypeList} from "@/api/processTemplate/type";
import {getProcessTempList,detail,saveProcessTemp,updateProcessTemp,deleteProcessTemp,downloadTemplate,download,stopProcessTemp} from "@/api/processTemplate/define";
import func from "@/util/func";

export default {
  name: "index",
@@ -39,6 +153,26 @@
      tableData: [],
      currentRow:null,
      selectionList: [],
      upFileType: ['xls', 'xlsx'],
      fileUrl: 'api/userQueryController/importUser',
      tipList:[],
      dialogLoading:false,
      dialogVisible:false,
      dialogType:'add',
      processDefinitionId: '',
      flowBox: false,
      nutflowOption: {
        process: {},
        step: 1,
        step1: {
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo',/*'download-xml',*/ 'import', 'preview'],
        },
        step2: {
          mode: 'view',
          simulation: true,
          minimap: true,
        }
      }
    }
  },
  computed: {
@@ -55,6 +189,11 @@
        addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
        delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
        editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
        exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
        importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
        downloadImportTemplateBtn: this.vaildData(this.permission[this.$route.query.id].DOWNLOADFILE, false),
        stopBtn: this.vaildData(this.permission[this.$route.query.id].FREEZE, false),
        actionBtn: this.vaildData(this.permission[this.$route.query.id].UNFREZE, false),
      };
    },
    option(){
@@ -63,10 +202,13 @@
        addBtn:false,
        editBtn:false,
        delBtn:false,
        calcHeight: -60,
        columnBtn:false,
        gridBtn:false,
        width:500,
        calcHeight: -50,
        align:'left',
        headerAlign:'center',
        menuWidth:160,
        menuWidth:190,
        dialogMenuPosition: 'right',
        dialogWidth:600,
        column: [
@@ -75,25 +217,224 @@
            prop: 'name'
          },{
            label: '版本',
            prop: 'desc'
            prop: 'desc',
            width:50
          },{
            label: '状态',
            prop: 'status'
            prop: 'status',
            width:65
          }]
      }
    }
  },
  created() {
    getTypeList().then(res => {
      this.tempTypeData = res.data.data;
    })
  },
  methods:{
    getTableList(){

      this.tableLoading = true;
      getProcessTempList({tempType:this.tempType,tempName:this.tempName}).then(res => {
        this.tableData = res.data.data;
        this.tableLoading = false;
      })
    },
    //流程分类选择
    tempTypeChange(val){
      this.getTableList();
    }
    },
    searchData(){
      this.getTableList();
    },

    handlerAdd(){
      this.form={};
      this.dialogVisible=true;
      this.dialogType='add'
    },
    handleEdit(row,index) {
      //detail({id: row.id}).then(res => {
        const data = {businessObject:{}}//res.data.data
        const {modelEditorXml} = data
      data.id='leave';
        this.$set(this.nutflowOption.step1, 'xml', modelEditorXml)
        this.$set(this.nutflowOption, 'process', data)
        this.dialogVisible = true;
        this.dialogType = 'edit'
      //})
    },
    //保存流程配置
    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(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
            this.handleNutflowClose()
          }
        });
      }else{
        updateProcessTemp(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
            this.handleNutflowClose()
          }
        })
      }
    },
    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) {
      let params = {
        ids: row.id
      }

      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProcessTemp(params).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.obj);
            this.getTableList();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //选择的行
    selectionChange(list) {
      this.selectionList = list;
    },

    // 行单选
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectionList = [row];
        }
      );
      //显示流程图
      this.processDefinitionId = row.id;
      this.flowBox = true;
    },

    // 导出
    downloadHandler() {
      if (this.selectionList.length <= 0) {
        this.$message.warning('请至少选择一条数据进行导出');
        return;
      }

      download({enumNames: this.ids}).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
      }).catch(err => {
      })
    },

    // 下载导入模板
    downloadTemplateHandler() {
      downloadTemplate().then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('下载成功');
      }).catch(err => {
      })
    },

    //导入
    uploadHandler() {
      this.$refs.upload.visible = true;
    },
    // 停用启用
    stopHandler(row) {
      let params = {};
      params = {
        ids: row.oid,
        flag: row.status === 0 ? true : false
      }
      stopProcessTemp(params).then(res => {
        this.$message.success(res.data.obj);
        this.getTableList();
      });
    },
  }
}
</script>

<style scoped>

<style lang="scss" scoped>
::v-deep {
  .avue-dialog .el-dialog__body{
    margin-bottom: 0 !important;
  }
}
</style>
<style>
  /**隐层设计器中右下角图标**/
  a.bjs-powered-by{
    display: none;
  }
</style>