|
|
@@ -0,0 +1,897 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="containers">
|
|
|
+ <div class="canvas" ref="canvas"></div>
|
|
|
+ <ul class="buttons">
|
|
|
+ <li>
|
|
|
+ <a href="javascript:" class="active" ref="saveXML" title="保存为bpmn"
|
|
|
+ >保存为bpmn</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="javascript:" class="active" ref="saveSvg" title="保存为svg"
|
|
|
+ >保存为svg</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ href="javascript:"
|
|
|
+ class="active"
|
|
|
+ @click="handlerUndo"
|
|
|
+ title="撤销操作"
|
|
|
+ >撤销</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ href="javascript:"
|
|
|
+ class="active"
|
|
|
+ @click="handlerRedo"
|
|
|
+ title="恢复操作"
|
|
|
+ >恢复</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ href="javascript:"
|
|
|
+ class="active"
|
|
|
+ @click="handlerZoom(0.1)"
|
|
|
+ title="放大"
|
|
|
+ >放大</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ href="javascript:"
|
|
|
+ class="active"
|
|
|
+ @click="handlerZoom(-0.1)"
|
|
|
+ title="缩小"
|
|
|
+ >缩小</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a
|
|
|
+ href="javascript:"
|
|
|
+ class="active"
|
|
|
+ @click="handlerZoom(0)"
|
|
|
+ title="还原"
|
|
|
+ >还原</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <el-button type="primary" @click="submitBpmn" v-if="!loading" title="提交流程图">提 交</el-button>
|
|
|
+ <el-button :loading="loading" type="primary" @click="submitBpnm" v-else>提交中...</el-button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 添加或修改节点参数配置对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="serviceTask" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false" :show-close="showClo">
|
|
|
+ <el-form ref="form" :model="formData" :rules="rules" label-width="120px" >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" >
|
|
|
+ <el-form-item label="节点名称" prop="name" >
|
|
|
+ <el-input v-model.trim="formData.name" placeholder="请输入节点名称" @input="onInput" maxlength="30" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="执行" prop="nodeId">
|
|
|
+ <treeselect v-model="formData.nodeId" :options="dataOptions" :show-count="true" placeholder="请选择执行场景" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" v-if="status">
|
|
|
+ <el-form-item :label="formData.param.describe" prop="describe" >
|
|
|
+ <el-input v-model.trim="formData.param.value" :placeholder="'请输入' + formData.param.describe" @input="onInput" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
|
|
|
+ <el-button :loading="loading" type="primary" @click="submitForm" v-else>提交中...</el-button>
|
|
|
+ <el-button @click="cancel" plain>取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 流程图提交对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="openBpmn" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false" :show-close="showClo">
|
|
|
+ <el-form ref="form2" :model="bpmnForm" :rules="rules2" label-width="100px" >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" >
|
|
|
+ <el-form-item label="流程图名称" prop="name" >
|
|
|
+ <el-input v-model.trim="bpmnForm.name" placeholder="请输入流程图名称" @input="onInput" maxlength="30" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" >
|
|
|
+ <el-form-item label="流程图描述" prop="procdefDescribe" >
|
|
|
+ <el-input type="textarea" v-model.trim="bpmnForm.procdefDescribe" placeholder="请输入流程图描述" @input="onInput" maxlength="60" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" >
|
|
|
+ <!-- <el-form-item label="执行时间" prop="bpmnForm.runCron" >
|
|
|
+ <el-popover v-model="runCronClose">
|
|
|
+ <cron @change="changeCron" @close="runCronClose=false" i18n="cn"/>
|
|
|
+ <el-input slot="reference" v-model="bpmnForm.runCron" placeholder="定时策略" @click="runCronClose=true"/>
|
|
|
+ </el-popover>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item style="margin-top: -10px;">
|
|
|
+ <cron v-if="showCronBox" v-model="bpmnForm.runCron" ></cron>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="执行时间" prop="runCron">
|
|
|
+ <el-input v-model="bpmnForm.runCron" auto-complete="off" placeholder="请输入执行时间" readonly>
|
|
|
+ <el-button slot="append" v-if="!showCronBox" icon="el-icon-arrow-up" @click="showCronBox = true" title="打开图形配置"></el-button>
|
|
|
+ <el-button slot="append" v-else icon="el-icon-arrow-down" @click="showCronBox = false" title="关闭图形配置"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="运行状态" prop="runStatus">
|
|
|
+ <el-switch
|
|
|
+ v-model="bpmnForm.runStatus"
|
|
|
+ @change="handleStatusChange">
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitBpnmForm" v-if="!loading">确 定</el-button>
|
|
|
+ <el-button :loading="loading" type="primary" @click="submitBpnmForm" v-else>提交中...</el-button>
|
|
|
+ <el-button @click="cancelBpnm">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// 引入相关的依赖
|
|
|
+// import {cron} from 'vue-cron'
|
|
|
+import cron from '@/components/cron'
|
|
|
+import { xmlStr } from "@/mock/xmlStrPreview2";
|
|
|
+import { CustomModeler } from "@/components/customBpmn";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+import { getBpmnZkNodeList, getBpmnZkNodeTreeList, addBpmnZkNode, updataBpmnZkNode,
|
|
|
+getBpmnZkReNodeProcdefTreeList, getBpmnZkReNodeProcdefCheckedTreeList,
|
|
|
+getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef, getBpmnZkReNodeProcdefListByPorcedfId} from "@/api/business/Middleware/bpmn";
|
|
|
+import store from "../../../../store";
|
|
|
+// import { unset } from '../../../../../public/bpmnjs';
|
|
|
+export default {
|
|
|
+ name: "",
|
|
|
+ components: { Treeselect, cron },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ describe:undefined,
|
|
|
+ //cron
|
|
|
+ showCronBox: false,
|
|
|
+ // form: {
|
|
|
+ // cronExpression: ''
|
|
|
+ // },
|
|
|
+ showClo:false,
|
|
|
+ bpmnModeler: null,
|
|
|
+ container: null,
|
|
|
+ canvas: null,
|
|
|
+ scale: 1,
|
|
|
+ userTask: false,
|
|
|
+ serviceTask: false,
|
|
|
+ scriptTask: false,
|
|
|
+ sequenceFlow: "",
|
|
|
+ formData: {
|
|
|
+ name: "",
|
|
|
+ nodeId:undefined,
|
|
|
+ param:{
|
|
|
+ name:undefined,
|
|
|
+ describe:undefined,
|
|
|
+ value:undefined
|
|
|
+ },
|
|
|
+ xlStatus:undefined,
|
|
|
+ },
|
|
|
+ //节点树选项
|
|
|
+ dataOptions: [],
|
|
|
+
|
|
|
+ data:undefined,
|
|
|
+ openBpmn:false,
|
|
|
+ // 节点表单校验
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "节点名称不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ nodeId: [
|
|
|
+ { required: true, message: "场景不能为空", trigger: ["blur",'change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ bpmnForm: {//流程图弹框提交信息
|
|
|
+ name: undefined,
|
|
|
+ procdefDescribe:undefined,
|
|
|
+ runCron:'',
|
|
|
+ runStatus:false
|
|
|
+ },
|
|
|
+ runCronClose:false,
|
|
|
+ // 流程图表单校验
|
|
|
+ rules2: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "流程描述名称不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ procdefDescribe: [
|
|
|
+ { required: true, message: "流程图描述不能为空", trigger: ["blur",'change'] }
|
|
|
+ ],
|
|
|
+ runCron: [
|
|
|
+ { required: true, message: "执行时间不能为空", trigger: ["blur",'change'] }
|
|
|
+ ],
|
|
|
+ // runStatus: [
|
|
|
+ // { required: true, message: "运行状态不能为空", trigger: ["blur",'change'] }
|
|
|
+ // ],
|
|
|
+
|
|
|
+ },
|
|
|
+ loading:false,
|
|
|
+ bpmnData:[], //待提交数据，
|
|
|
+ bpmnDataNumber:0,
|
|
|
+ bpmnTitle:undefined,//待提交流程图名称
|
|
|
+ bpmnNodeId:undefined,// 弹框打开时节点Id
|
|
|
+ xml:undefined,
|
|
|
+ serviceTaskStatus:false,
|
|
|
+ checkedKeys:[],//流程图返回节点
|
|
|
+ bpmnDataFH:[],//流程图返回一级信息
|
|
|
+
|
|
|
+ status:false,
|
|
|
+ msg:[],
|
|
|
+ tree:[],//下拉数据集
|
|
|
+ waitSubmitList:{
|
|
|
+ wrap:undefined,
|
|
|
+ },//待提交所有节点组成参数
|
|
|
+ nowDate:new Date().getTime(),
|
|
|
+ value:undefined,//节点value有值时缓存节点参数
|
|
|
+ nodeFail:true, //节点信息提交被rule条件阻断时，用作确定按钮阻断input出现
|
|
|
+ execTime:'',
|
|
|
+ cronPopover:false,
|
|
|
+ nodeKey:undefined,
|
|
|
+ nodeStorage:undefined, //由于判断节点下拉显示
|
|
|
+ title:undefined
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getNodeTree()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //修改数据获取
|
|
|
+ if(this.$route.query.name){
|
|
|
+ //流程图信息查询
|
|
|
+ this.title = "修改"
|
|
|
+ getBpmnZkReProcdefList({name:this.$route.query.name,current: 1,size: 20}).then(res=>{
|
|
|
+ this.bpmnDataFH = res.data.records[0]
|
|
|
+ console.log(this.bpmnDataFH)
|
|
|
+ this.init()
|
|
|
+ })
|
|
|
+ //流程图关联节点信息查询
|
|
|
+ getBpmnZkReNodeProcdefListByPorcedfId({procdefId:this.$route.query.id}).then(res=>{
|
|
|
+ this.bpmnData = res.data
|
|
|
+ let arr = []
|
|
|
+ let data = res.data
|
|
|
+ for(let i = 0;i<data.length;i++){
|
|
|
+ arr[i] = {
|
|
|
+ param:{
|
|
|
+ value:undefined,
|
|
|
+ name:undefined
|
|
|
+ },
|
|
|
+ name:undefined,
|
|
|
+ xlStatus:false,
|
|
|
+ nodeId:undefined,
|
|
|
+ procedefKey:undefined
|
|
|
+ }
|
|
|
+ arr[i].param = JSON.parse(data[i].params)[0]
|
|
|
+ arr[i].nodeId = data[i].id
|
|
|
+ arr[i].name = data[i].runName
|
|
|
+ arr[i].procedefKey = data[i].procedefKey
|
|
|
+ arr[i].params = JSON.parse(data[i].params)[0]
|
|
|
+ if(data[i].runParam){
|
|
|
+ if(JSON.parse(data[i].runParam) !='{}'){
|
|
|
+ let name = arr[i].param.name
|
|
|
+ let value = JSON.parse(data[i].runParam)[name]
|
|
|
+ arr[i].param.value = value
|
|
|
+ if(data[i].params){
|
|
|
+ if(!JSON.parse(data[i].params)[0].value && arr[i].param.value){
|
|
|
+ arr[i].xlStatus= true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ arr.param = JSON.parse(data[i].params)[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.bpmnData = arr
|
|
|
+ console.log(this.bpmnData)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.title = "新增"
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ handleStatusChange(){
|
|
|
+ console.log(this.bpmnForm.runStatus)
|
|
|
+ },
|
|
|
+ //表达式
|
|
|
+ changeCron(val){
|
|
|
+ this.bpmnForm.runCron = val
|
|
|
+ },
|
|
|
+ //强制el-input刷新
|
|
|
+ onInput(){
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ //渲染流程图
|
|
|
+ init() {
|
|
|
+ // 获取到属性ref为“canvas”的dom节点
|
|
|
+ const canvas = this.$refs.canvas;
|
|
|
+ // 建模
|
|
|
+ this.bpmnModeler = new CustomModeler({
|
|
|
+ container: canvas,
|
|
|
+ additionalModules: [
|
|
|
+ {
|
|
|
+ // 禁止编辑label
|
|
|
+ labelEditingProvider: ["value", ""]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ this.createNewDiagram();
|
|
|
+
|
|
|
+ },
|
|
|
+ //渲染执行
|
|
|
+ async createNewDiagram() {
|
|
|
+ let that = this
|
|
|
+ try {
|
|
|
+ //编辑或默认视图
|
|
|
+ if(that.bpmnDataFH.resourceName){
|
|
|
+ var result = await this.bpmnModeler.importXML(that.bpmnDataFH.resourceName);
|
|
|
+ }else{
|
|
|
+ var result = await this.bpmnModeler.importXML(xmlStr);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传
|
|
|
+ const { warnings } = result;
|
|
|
+ this.data = result.warnings
|
|
|
+
|
|
|
+ this.success();
|
|
|
+ } catch (err) {
|
|
|
+ // console.log(err.message, err.warnings);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ success() {
|
|
|
+ this.addBpmnListener();
|
|
|
+ this.addModelerListener();
|
|
|
+ this.addEventBusListener();
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 渲染组件
|
|
|
+ addModelerListener() {
|
|
|
+ const bpmnjs = this.bpmnModeler;
|
|
|
+ const that = this;
|
|
|
+ // 这里我是用了一个forEach给modeler上添加要绑定的事件
|
|
|
+ const events = [
|
|
|
+ "shape.added",
|
|
|
+ "shape.move.end",
|
|
|
+ "shape.removed",
|
|
|
+ "connect.end",
|
|
|
+ "connect.move"
|
|
|
+ ];
|
|
|
+ events.forEach(function(event) {
|
|
|
+ that.bpmnModeler.on(event, e => {
|
|
|
+ //console.log(1,event, e,that.data );
|
|
|
+ var elementRegistry = bpmnjs.get("elementRegistry");
|
|
|
+ var shape = e.element ? elementRegistry.get(e.element.id) : e.shape;
|
|
|
+ if(event == "shape.added"){
|
|
|
+ let data = {
|
|
|
+ name: "",
|
|
|
+ nodeId:undefined,
|
|
|
+ param:{
|
|
|
+ name:undefined,
|
|
|
+ describe:undefined,
|
|
|
+ value:undefined,
|
|
|
+ },
|
|
|
+ xlStatus:false,
|
|
|
+ procedefKey:undefined
|
|
|
+ }
|
|
|
+ data.procedefKey = shape.id
|
|
|
+ that.bpmnData.push(data)
|
|
|
+ //console.log('新创建节点:',shape.id,"bpmnData数组:",that.bpmnData);
|
|
|
+ }
|
|
|
+ if(event == "shape.removed"){
|
|
|
+ for(let i =0;i<that.bpmnData.length;i++){
|
|
|
+ if(shape.id == that.bpmnData[i].procedefKey){
|
|
|
+ that.bpmnData.splice(i,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(that.bpmnData)
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下载
|
|
|
+ async addBpmnListener() {
|
|
|
+ const that = this;
|
|
|
+ const downloadLink = this.$refs.saveXML;
|
|
|
+ const downloadSvgLink = this.$refs.saveSvg;
|
|
|
+
|
|
|
+ async function opscoffee() {
|
|
|
+ try {
|
|
|
+ const result = await that.saveSVG();
|
|
|
+ const { svg } = result;
|
|
|
+
|
|
|
+ that.setEncoded(downloadSvgLink, "ops-coffee.svg", svg);
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const result = await that.saveXML();
|
|
|
+ const { xml } = result;
|
|
|
+
|
|
|
+ that.setEncoded(downloadLink, "ops-coffee.bpmn", xml);
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ opscoffee();
|
|
|
+ this.bpmnModeler.on("commandStack.changed", opscoffee);
|
|
|
+ },
|
|
|
+ async saveSVG(done) {
|
|
|
+ try {
|
|
|
+ const result = await this.bpmnModeler.saveSVG(done);
|
|
|
+ return result;
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async saveXML(done) {
|
|
|
+ try {
|
|
|
+ const result = await this.bpmnModeler.saveXML({ format: true }, done);
|
|
|
+ this.xml = result
|
|
|
+ // console.log(this.xml)
|
|
|
+ return result;
|
|
|
+ } catch (err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setEncoded(link, name, data) {
|
|
|
+ const encodedData = encodeURIComponent(data);
|
|
|
+
|
|
|
+ if (data) {
|
|
|
+ link.href = "data:application/bpmn20-xml;charset=UTF-8," + encodedData;
|
|
|
+ link.download = name;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlerRedo() {
|
|
|
+ this.bpmnModeler.get("commandStack").redo();
|
|
|
+ },
|
|
|
+ handlerUndo() {
|
|
|
+ this.bpmnModeler.get("commandStack").undo();
|
|
|
+ },
|
|
|
+ handlerZoom(radio) {
|
|
|
+ const newScale = !radio ? 1.0 : this.scale + radio;
|
|
|
+ this.bpmnModeler.get("canvas").zoom(newScale);
|
|
|
+
|
|
|
+ this.scale = newScale;
|
|
|
+ },
|
|
|
+ addEventBusListener() {
|
|
|
+ const that = this;
|
|
|
+ const eventBus = this.bpmnModeler.get("eventBus");
|
|
|
+ const modeling = this.bpmnModeler.get("modeling");
|
|
|
+ const elementRegistry = this.bpmnModeler.get("elementRegistry");
|
|
|
+
|
|
|
+ eventBus.on("element.click", function(e) {
|
|
|
+ // console.log(
|
|
|
+ // "点击了element",
|
|
|
+ // e.element.businessObject.id,
|
|
|
+ // e.element.businessObject.$type,
|
|
|
+ // e.element.businessObject.name,that.data
|
|
|
+ // );
|
|
|
+ e.element.businessObject.nodeId = that.formData.nodeId
|
|
|
+ // e.element.businessObject.order = that.formData.order
|
|
|
+ // console.log(
|
|
|
+ // "点击了element",
|
|
|
+ // e,e.element.businessObject.name,
|
|
|
+ // e.element.businessObject.nodeId
|
|
|
+ // );
|
|
|
+
|
|
|
+ if (e.element.businessObject.$type == "bpmn:SequenceFlow") {
|
|
|
+ const sourceRef = e.element.businessObject.sourceRef;
|
|
|
+
|
|
|
+ if (sourceRef.$type == "bpmn:ExclusiveGateway") {
|
|
|
+ var targetElement = elementRegistry.get(sourceRef.id);
|
|
|
+
|
|
|
+ modeling.updateProperties(targetElement, {
|
|
|
+ default: e.element.businessObject
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 节点取消按钮
|
|
|
+ cancel() {
|
|
|
+ store.commit("STATUSCHANGE")
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.serviceTask = false
|
|
|
+ })
|
|
|
+
|
|
|
+ // this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ // reset() {
|
|
|
+ // this.resetForm("form");
|
|
|
+ // },
|
|
|
+ /** 节点提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ const that = this
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.msgSuccess("节点属性保存成功");
|
|
|
+ this.loading = false
|
|
|
+ //处理弹框无法关闭
|
|
|
+ setTimeout(()=>{
|
|
|
+ that.cancel()
|
|
|
+ },1)
|
|
|
+ this.formData.procedefKey = this.$store.state.bpmn.nodeInfo.businessObject.id
|
|
|
+ let arr = this.bpmnData
|
|
|
+ if(arr.length>0){
|
|
|
+ let num = 0
|
|
|
+ for(let i =0;i<arr.length;i++){
|
|
|
+ if(this.formData.procedefKey == arr[i].procedefKey){
|
|
|
+ arr[i] = JSON.parse(JSON.stringify(this.formData))
|
|
|
+ //return
|
|
|
+ num++
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(num = 0){
|
|
|
+ console.log("bpmnData长度",this.bpmnData.length,"不同procedefKey")
|
|
|
+ num +=1
|
|
|
+ this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)))
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(!this.formData.param.value && this.nodeStorage.value != this.formData.param.value){
|
|
|
+ this.formData.xlStatus = true
|
|
|
+ }
|
|
|
+ this.bpmnData.push(JSON.parse(JSON.stringify(this.formData)))
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.nodeFail = false
|
|
|
+ }
|
|
|
+ console.log("节点提交",this.bpmnData)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 流程图节点提交按钮(弹框展示) */
|
|
|
+ submitBpmn(){
|
|
|
+ if(this.bpmnDataFH.name){
|
|
|
+ this.bpmnForm.procdefDescribe = this.bpmnDataFH.procdefDescribe
|
|
|
+ this.bpmnForm.name = this.bpmnDataFH.name
|
|
|
+ this.bpmnForm.runCron = this.bpmnDataFH.runCron
|
|
|
+ this.bpmnForm.runStatus = this.bpmnDataFH.runStatus
|
|
|
+ }
|
|
|
+ this.openBpmn = true
|
|
|
+ },
|
|
|
+ /** 流程图提交数据 */
|
|
|
+ submitBpnmForm(){
|
|
|
+ this.$refs["form2"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.bpmnData.length < 1 ){
|
|
|
+ this.msgError("流程图节点数据个数小于1");
|
|
|
+ }else{
|
|
|
+ let params = {}
|
|
|
+ params.runStatus = this.bpmnForm.runStatus
|
|
|
+ params.name = this.bpmnForm.name
|
|
|
+ params.procdefDescribe = this.bpmnForm.procdefDescribe
|
|
|
+ params.procedefKey = this.bpmnForm.procedefKey
|
|
|
+ params.resourceName = this.xml.xml;
|
|
|
+ params.nodes = []
|
|
|
+ params.runCron =undefined
|
|
|
+ params.id = undefined
|
|
|
+ // if(!this.bpmnForm.runCron){
|
|
|
+ // params.runStatus = false
|
|
|
+ // }else{
|
|
|
+ // params.runStatus = true
|
|
|
+ // params.runCron = this.bpmnForm.runCron
|
|
|
+ // }
|
|
|
+ params.runCron = this.bpmnForm.runCron
|
|
|
+ for(let i = 0; i<this.bpmnData.length;i++){
|
|
|
+ params.nodes[i] = {}
|
|
|
+ params.nodes[i].param = JSON.stringify(this.bpmnData[i].param)
|
|
|
+ params.nodes[i].procedefKey = this.bpmnData[i].procedefKey
|
|
|
+ params.nodes[i].nodeId = this.bpmnData[i].nodeId
|
|
|
+ params.nodes[i].name = this.bpmnData[i].name
|
|
|
+ }
|
|
|
+ if(this.bpmnDataFH.id){
|
|
|
+ params.id = this.bpmnDataFH.id
|
|
|
+ updataBpmnZkReProcdef(params).then(res=>{
|
|
|
+ this.msgSuccess("流程图修改成功");
|
|
|
+ this.loading = false
|
|
|
+ this.openBpmn = false
|
|
|
+ this.$router.push('/Middleware/bpmn')
|
|
|
+ })
|
|
|
+ }else{ //新增
|
|
|
+ for(let i=0;i<this.bpmnData.length;i++){
|
|
|
+ params.nodes[i] = {}
|
|
|
+ params.nodes[i].name = this.bpmnData[i].name
|
|
|
+ params.nodes[i].nodeId = this.bpmnData[i].nodeId
|
|
|
+ params.nodes[i].procedefKey = this.bpmnData[i].procedefKey
|
|
|
+ var nodesWrap = {}
|
|
|
+ nodesWrap.id = null
|
|
|
+ nodesWrap.deptIds = null
|
|
|
+ nodesWrap.createTime = null
|
|
|
+ let data = this.bpmnData[i].param
|
|
|
+ params.nodes[i].param = {}
|
|
|
+ if(data.name){
|
|
|
+ params.nodes[i].param[data.name] = data.value
|
|
|
+ }
|
|
|
+ params.nodes[i].param = JSON.stringify(params.nodes[i].param)
|
|
|
+ }
|
|
|
+ console.log(params)
|
|
|
+ addBpmnZkReProcdef(params).then(res=>{
|
|
|
+ this.msgSuccess("流程图保存成功");
|
|
|
+ this.loading = false
|
|
|
+ this.openBpmn = false
|
|
|
+ this.$router.push('/Middleware/bpmn')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 流程图取消按钮 */
|
|
|
+ cancelBpnm(){
|
|
|
+ this.openBpmn = false
|
|
|
+ },
|
|
|
+ /** 获取下拉数据 */
|
|
|
+ getNodeTree(){
|
|
|
+ getBpmnZkNodeTreeList().then(res =>{
|
|
|
+ if(res.data){
|
|
|
+ this.tree = res.data
|
|
|
+ this.dataOptions = this.getTreeData(res.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 遍历数据 */
|
|
|
+ getTreeData(data) {
|
|
|
+ // 循环遍历json数据
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ data[i]["label"] = data[i].name
|
|
|
+ if(data[i].children){
|
|
|
+ if (data[i].children.length < 1) {
|
|
|
+ // children若为空数组，则不作操作
|
|
|
+ } else {
|
|
|
+ // children若不为空数组，则继续 递归调用 本方法
|
|
|
+ this.getTreeData(data[i].children);
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ data[i].children = []
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ //遍历给下拉输入框赋值
|
|
|
+ getInput(val,data,bpmnData,nodeKey){
|
|
|
+ console.log("节点id：",val,bpmnData)
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ if(val == data[i].id){
|
|
|
+ this.nodeStorage = JSON.parse(data[i].params)[0]
|
|
|
+ if(bpmnData.length>0){
|
|
|
+ for(let a=0;a<bpmnData.length;a++){
|
|
|
+ if(nodeKey == bpmnData[a].procedefKey){
|
|
|
+ console.log("修改节点入循环：")
|
|
|
+ console.log(this.formData.param,bpmnData[a].param)
|
|
|
+ this.formData.xlStatus = bpmnData[a].xlStatus
|
|
|
+ if(this.formData.param != bpmnData[a].param){
|
|
|
+ this.formData.param = JSON.parse(data[i].params)[0]
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.formData.xlStatus){
|
|
|
+ this.status = true
|
|
|
+ }else{
|
|
|
+ this.status = false
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ console.log("bpmnData大于1修新节点")
|
|
|
+ this.formData.xlStatus = bpmnData[a].xlStatus
|
|
|
+ this.formData.param = JSON.parse(data[i].params)[0]
|
|
|
+ if(!this.formData.param.value){
|
|
|
+ this.status = true
|
|
|
+ }else{
|
|
|
+ this.status = false
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ console.log("修新节点：下拉展示")
|
|
|
+ this.formData.xlStatus = false
|
|
|
+ this.formData.param = JSON.parse(data[i].params)[0]
|
|
|
+ if(!this.formData.param.value){
|
|
|
+ this.status = true
|
|
|
+ }else{
|
|
|
+ this.status = false
|
|
|
+ }
|
|
|
+ console.log(this.formData)
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if (this.tree[i].children) {
|
|
|
+ this.getInput(val,data[i].children,this.bpmnData,this.nodeKey);
|
|
|
+ // children若为空数组，则不作操作
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //鼠标点击事件响应监听
|
|
|
+ currDeptChange(val) {
|
|
|
+ if(val){
|
|
|
+ this.formData.nodeId = val
|
|
|
+ this.getInput(val,this.tree,this.bpmnData,this.nodeKey)
|
|
|
+ }else{
|
|
|
+ this.status = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 计算属性
|
|
|
+ computed: {
|
|
|
+ task: {
|
|
|
+ get: function() {
|
|
|
+ const that = this;
|
|
|
+ const element = this.$store.state.bpmn.nodeInfo;
|
|
|
+ if (element.businessObject) {
|
|
|
+ if (element.businessObject.$type === "bpmn:ServiceTask") {
|
|
|
+ that.serviceTask = this.$store.state.bpmn.nodeVisible;
|
|
|
+ console.log("watch:",that.bpmnData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ set: function(val) {
|
|
|
+ this.$store.state.bpmn.nodeVisible = val;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'formData.nodeId': 'currDeptChange',
|
|
|
+ task(val) {},
|
|
|
+ userTask(val) {
|
|
|
+ this.$store.state.bpmn.nodeVisible = val;
|
|
|
+ console.log(1)
|
|
|
+ },
|
|
|
+ serviceTask(val) {
|
|
|
+ this.$store.state.bpmn.nodeVisible = val;
|
|
|
+ const status = this.$store.state.bpmn.status
|
|
|
+ const that = this;
|
|
|
+ const element = this.$store.state.bpmn.nodeInfo;
|
|
|
+ that.nodeKey = element.id
|
|
|
+ console.log(element)
|
|
|
+ if(status == false){
|
|
|
+ console.log("弹框关闭")
|
|
|
+ }else{
|
|
|
+ console.log("弹框开启")
|
|
|
+ if (element.businessObject) {
|
|
|
+ let status = this.$store.state.bpmn.status
|
|
|
+ //console.log(element.businessObject)
|
|
|
+ if (element.businessObject.$type === "bpmn:ServiceTask") {
|
|
|
+ //新增修改数据赋值
|
|
|
+ let data = that.bpmnData
|
|
|
+ //console.log("computed监听编辑框id",element.businessObject.id,"computed监听编辑框id时bpmnData数据",data)
|
|
|
+ if(data.length>0){
|
|
|
+ for(let i = 0; i<data.length;i++){
|
|
|
+ if(element.businessObject.id == data[i].procedefKey){
|
|
|
+ if(data[i].nodeId){
|
|
|
+ that.formData.nodeId = data[i].nodeId
|
|
|
+ }
|
|
|
+ that.formData.name = data[i].name
|
|
|
+ that.formData.param = data[i].param
|
|
|
+ that.formData.nodeId = data[i].nodeId
|
|
|
+ that.formData.procedefKey = data[i].procedefKey
|
|
|
+ console.log(that.formData.param)
|
|
|
+ //修改存在记录
|
|
|
+ if(data[i].xlStatus){
|
|
|
+ that.status = true
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ that.formData.name = undefined
|
|
|
+ that.formData.nodeId = undefined
|
|
|
+ that.status = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ that.formData.name = undefined
|
|
|
+ that.formData.nodeId = undefined
|
|
|
+ that.status = false
|
|
|
+ }
|
|
|
+ that.serviceTask = this.$store.state.bpmn.nodeVisible;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scriptTask(val) {
|
|
|
+ this.$store.state.bpmn.nodeVisible = val;
|
|
|
+ console.log(3)
|
|
|
+ },
|
|
|
+ sequenceFlow(val) {
|
|
|
+ const element = this.$store.state.bpmn.nodeInfo;
|
|
|
+ const modeling = this.bpmnModeler.get("modeling");
|
|
|
+ modeling.updateLabel(element, val);
|
|
|
+ console.log(4)
|
|
|
+ },
|
|
|
+ "formData.name": {
|
|
|
+ handler(val, old) {
|
|
|
+ const element = this.$store.state.bpmn.nodeInfo;
|
|
|
+ const modeling = this.bpmnModeler.get("modeling");
|
|
|
+ modeling.updateLabel(element, val);
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.containers {
|
|
|
+ background: white;
|
|
|
+ overflow: auto;
|
|
|
+ background-image: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ rgba(220, 220, 220, 0.5) 6%,
|
|
|
+ transparent 0
|
|
|
+ ),
|
|
|
+ linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
|
|
|
+ background-size: 12px 12px;
|
|
|
+ width: 100%;
|
|
|
+ height: 85vh;
|
|
|
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
|
+}
|
|
|
+.canvas {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.panel {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+.buttons {
|
|
|
+ position: absolute;
|
|
|
+ left: 80px;
|
|
|
+ bottom: 20px;
|
|
|
+}
|
|
|
+.buttons li {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 5px;
|
|
|
+}
|
|
|
+.buttons li a {
|
|
|
+ color: #999;
|
|
|
+ background: #eee;
|
|
|
+ cursor: not-allowed;
|
|
|
+ padding: 8px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.buttons li a.active {
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.demo-drawer-footer {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border-top: 1px solid #e8e8e8;
|
|
|
+ padding: 10px 16px;
|
|
|
+ text-align: right;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.djs-palette{
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
wangtao