|
|
@@ -59,15 +59,14 @@
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <a href="javascript:" class="active" title="提交流程图"
|
|
|
- >提交</a
|
|
|
- >
|
|
|
+ <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="修改" :visible.sync="open" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
|
|
|
+ <!-- 添加或修改节点参数配置对话框 -->
|
|
|
+ <el-dialog title="修改" :visible.sync="serviceTask" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
|
|
|
<el-form ref="form" :model="formData" :rules="rules" label-width="120px" >
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24" >
|
|
|
@@ -81,8 +80,8 @@
|
|
|
</el-form-item>
|
|
|
</el-col> -->
|
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="执行场景" prop="scence">
|
|
|
- <treeselect v-model="formData.scence" :options="dataOptions" :show-count="true" placeholder="请选择执行场景" />
|
|
|
+ <el-form-item label="执行场景" prop="nodeId">
|
|
|
+ <treeselect v-model="formData.nodeId" :options="dataOptions" :show-count="true" placeholder="请选择执行场景" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -93,6 +92,29 @@
|
|
|
<el-button @click="cancel">取 消</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加或修改流程图参数配置对话框 -->
|
|
|
+ <el-dialog title="修改" :visible.sync="openBpmn" width="600px" append-to-body :before-close="cancel" :close-on-click-modal="false">
|
|
|
+ <el-form ref="form2" :model="formData2" :rules="rules2" label-width="120px" >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="24" >
|
|
|
+ <el-form-item label="流程图名称" prop="name" >
|
|
|
+ <el-input v-model.trim="formData2.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="formData2.procdefDescribe" placeholder="请输入流程图描述" @input="onInput" maxlength="60" show-word-limit />
|
|
|
+ </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>
|
|
|
|
|
|
@@ -104,15 +126,10 @@ 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} from "@/api/business/Middleware/bpmn";
|
|
|
+getBpmnZkReProcdefList, addBpmnZkReProcdef, updataBpmnZkReProcdef, delBpmnZkReProcdef, getBpmnZkReNodeProcdefListByPorcedfId} from "@/api/business/Middleware/bpmn";
|
|
|
export default {
|
|
|
name: "",
|
|
|
components: { Treeselect },
|
|
|
- created() {},
|
|
|
- mounted() {
|
|
|
- this.getNodeTree()
|
|
|
- this.init();
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
bpmnModeler: null,
|
|
|
@@ -126,7 +143,7 @@ export default {
|
|
|
formData: {
|
|
|
name: "",
|
|
|
type: "",
|
|
|
- scence:undefined,
|
|
|
+ nodeId:undefined,
|
|
|
// order:undefined
|
|
|
|
|
|
},
|
|
|
@@ -134,8 +151,8 @@ export default {
|
|
|
dataOptions: [],
|
|
|
|
|
|
data:undefined,
|
|
|
- open:false,
|
|
|
- // 表单校验
|
|
|
+ openBpmn:false,
|
|
|
+ // 节点表单校验
|
|
|
rules: {
|
|
|
name: [
|
|
|
{ required: true, message: "节点名称不能为空", trigger: "blur" }
|
|
|
@@ -143,16 +160,53 @@ export default {
|
|
|
// order: [
|
|
|
// { required: true, message: "执行顺序不能为空", trigger: "blur" }
|
|
|
// ],
|
|
|
- scence: [
|
|
|
+ nodeId: [
|
|
|
{ required: true, message: "场景不能为空", trigger: ["blur",'change'] }
|
|
|
],
|
|
|
},
|
|
|
+ formData2: {
|
|
|
+ name: undefined,
|
|
|
+ procdefDescribe:undefined,
|
|
|
+ },
|
|
|
+ // 流程图表单校验
|
|
|
+ rules2: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: "流程描述名称不能为空", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ procdefDescribe: [
|
|
|
+ { required: true, message: "流程图描述不能为空", trigger: ["blur",'change'] }
|
|
|
+ ],
|
|
|
+ },
|
|
|
loading:false,
|
|
|
bpmnData:[], //待提交数据，
|
|
|
bpmnTitle:undefined,//待提交流程图名称
|
|
|
- bpmnSencen:undefined,// 弹框打开时节点Id
|
|
|
+ bpmnNodeId:undefined,// 弹框打开时节点Id
|
|
|
+ xml:undefined,
|
|
|
+ serviceTaskStatus:false,
|
|
|
+ checkedKeys:[],//流程图返回节点
|
|
|
+ bpmnDataFH:[],//流程图返回信息
|
|
|
};
|
|
|
},
|
|
|
+ created(){
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getNodeTree()
|
|
|
+
|
|
|
+ if(this.$route.query.name){
|
|
|
+ getBpmnZkReProcdefList({name:this.$route.query.name,current: 1,size: 20}).then(res=>{
|
|
|
+ this.bpmnDataFH = res.data.records[0]
|
|
|
+ this.init()
|
|
|
+ })
|
|
|
+ getBpmnZkReNodeProcdefListByPorcedfId({procdefId:this.$route.query.id}).then(res=>{
|
|
|
+ this.checkedKeys = res.data
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
//强制el-input刷新
|
|
|
@@ -173,10 +227,18 @@ export default {
|
|
|
]
|
|
|
});
|
|
|
this.createNewDiagram();
|
|
|
+
|
|
|
},
|
|
|
async createNewDiagram() {
|
|
|
+ let that = this
|
|
|
try {
|
|
|
- const result = await this.bpmnModeler.importXML(xmlStr);
|
|
|
+ //编辑或默认视图
|
|
|
+ if(that.bpmnDataFH.resourceName){
|
|
|
+ var result = await this.bpmnModeler.importXML(that.bpmnDataFH.resourceName);
|
|
|
+ }else{
|
|
|
+ var result = await this.bpmnModeler.importXML(xmlStr);
|
|
|
+ }
|
|
|
+
|
|
|
// 上传
|
|
|
console.log(result)
|
|
|
const { warnings } = result;
|
|
|
@@ -215,6 +277,7 @@ export default {
|
|
|
},
|
|
|
// 下载
|
|
|
async addBpmnListener() {
|
|
|
+ console.log(11111)
|
|
|
const that = this;
|
|
|
const downloadLink = this.$refs.saveXML;
|
|
|
console.log(downloadLink)
|
|
|
@@ -254,7 +317,8 @@ export default {
|
|
|
async saveXML(done) {
|
|
|
try {
|
|
|
const result = await this.bpmnModeler.saveXML({ format: true }, done);
|
|
|
- console.log(result)
|
|
|
+ this.xml = result
|
|
|
+ // console.log(this.xml)
|
|
|
return result;
|
|
|
} catch (err) {
|
|
|
console.log(err);
|
|
|
@@ -293,12 +357,12 @@ export default {
|
|
|
// e.element.businessObject.$type,
|
|
|
// e.element.businessObject.name,that.data
|
|
|
// );
|
|
|
- e.element.businessObject.scence = that.formData.scence
|
|
|
- e.element.businessObject.order = that.formData.order
|
|
|
+ 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.scence
|
|
|
+ e.element.businessObject.nodeId
|
|
|
);
|
|
|
|
|
|
if (e.element.businessObject.$type == "bpmn:SequenceFlow") {
|
|
|
@@ -314,10 +378,9 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- // 取消按钮
|
|
|
+ // 节点取消按钮
|
|
|
cancel() {
|
|
|
- this.serviceTask = this.$store.state.bpmn.nodeVisible
|
|
|
- this.open = false
|
|
|
+ this.serviceTask = false
|
|
|
// this.reset();
|
|
|
},
|
|
|
// 表单重置
|
|
|
@@ -330,31 +393,29 @@ export default {
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
- /** 提交按钮 */
|
|
|
+ /** 节点提交按钮 */
|
|
|
submitForm(row) {
|
|
|
+ let that = this
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
if (valid) {
|
|
|
this.msgSuccess("节点属性保存成功");
|
|
|
- this.loading = false,
|
|
|
- this.open = false
|
|
|
- this.serviceTask = this.$store.state.bpmn.nodeVisible;
|
|
|
+ this.loading = false
|
|
|
let data = this.dataOptions
|
|
|
- console.log(data)
|
|
|
for(let a = 0; a<Object.keys(data).length; a++){
|
|
|
- if(data[a].id == this.formData.scence){
|
|
|
- this.formData.params = data[a].params
|
|
|
+ if(data[a].id == this.formData.nodeId){
|
|
|
+ this.formData.param = data[a].params
|
|
|
}
|
|
|
if(data[a].children){
|
|
|
if(Object.keys(data[a].children).length>0){
|
|
|
for(let b = 0; b<Object.keys(data[a].children).length; b++){
|
|
|
- if(data[a].children[b].id == this.formData.scence){
|
|
|
- this.formData.params = data[a].children[b].params
|
|
|
+ if(data[a].children[b].id == this.formData.nodeId){
|
|
|
+ this.formData.param = data[a].children[b].params
|
|
|
}
|
|
|
if(data[a].children[b].children){
|
|
|
if(Object.keys(data[a].children[b].children).length>0){
|
|
|
for(let c = 0; c<Object.keys(data[a].children[b].children).length; c++){
|
|
|
- if(data[a].children[b].children[c].id == this.formData.scence){
|
|
|
- this.formData.params = data[a].children[b].children[c].params
|
|
|
+ if(data[a].children[b].children[c].id == this.formData.nodeId){
|
|
|
+ this.formData.param = data[a].children[b].children[c].params
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -363,10 +424,103 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- console.log(this.formData)
|
|
|
+ this.formData.procedefKey = this.$store.state.bpmn.nodeInfo.businessObject.id
|
|
|
+ delete this.formData.type
|
|
|
+ let arr = JSON.parse(JSON.stringify(this.bpmnData))
|
|
|
+ if(arr.length>0){
|
|
|
+ let num = 0
|
|
|
+ for(let i =0;i<arr.length;i++){
|
|
|
+ if(this.$store.state.bpmn.nodeInfo.businessObject.id == arr[i].procedefKey){
|
|
|
+ arr[i] = this.formData
|
|
|
+ }else{
|
|
|
+ num +=1
|
|
|
+ if(num == arr.length){
|
|
|
+ this.bpmnData.push(this.formData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.bpmnData.push(this.formData)
|
|
|
+ }
|
|
|
+ //异步避免需要二次关闭
|
|
|
+ setTimeout(()=>{
|
|
|
+ that.serviceTask = false
|
|
|
+ },1)
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ /** 流程图提交按钮 */
|
|
|
+ submitBpmn(){
|
|
|
+ if(this.bpmnDataFH.name){
|
|
|
+ this.formData2.procdefDescribe = this.bpmnDataFH.procdefDescribe
|
|
|
+ this.formData2.name = this.bpmnDataFH.name
|
|
|
+ }
|
|
|
+ this.openBpmn = true
|
|
|
+ },
|
|
|
+ /** 流程图提交数据 */
|
|
|
+ submitBpnmForm(){
|
|
|
+ this.$refs["form2"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if(this.bpmnData.length<2 && this.checkedKeys.length<2){
|
|
|
+ this.msgError("流程图节点数据个数小于2");
|
|
|
+ }else{
|
|
|
+
|
|
|
+ if(this.checkedKeys.length>1){
|
|
|
+ let arr = {}
|
|
|
+ arr.name = this.formData2.name
|
|
|
+ arr.procdefDescribe = this.formData2.procdefDescribe
|
|
|
+ arr.procedefKey = this.formData2.procedefKey
|
|
|
+ arr.nodes = []
|
|
|
+ for(let i = 0; i<this.checkedKeys.length;i++){
|
|
|
+ arr.nodes[i] = {}
|
|
|
+ arr.nodes[i].param = this.checkedKeys[i].param
|
|
|
+ arr.nodes[i].procedefKey = this.checkedKeys[i].procedefKey
|
|
|
+ arr.nodes[i].nodeId = this.checkedKeys[i].id
|
|
|
+ if(this.bpmnData.length>0){
|
|
|
+ for(let n=0;n<this.bpmnData.length;n++){
|
|
|
+ if(this.bpmnData[n].procedefKey){
|
|
|
+ if(this.bpmnData[n].procedefKey == arr.nodes[i].procedefKey){
|
|
|
+ arr.nodes[i].param = this.bpmnData[n].param
|
|
|
+ arr.nodes[i].nodeId = this.bpmnData[n].nodeId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ arr.resourceName = this.xml.xml;
|
|
|
+ arr.id = this.bpmnDataFH.id
|
|
|
+ console.log(arr)
|
|
|
+ updataBpmnZkReProcdef(arr).then(res=>{
|
|
|
+ this.msgSuccess("流程图修改成功");
|
|
|
+ this.loading = false
|
|
|
+ this.openBpmn = false
|
|
|
+ this.$router.push('/business/Middleware/bpmn/index')
|
|
|
+ })
|
|
|
+ }else if(this.bpmnData.length>1){
|
|
|
+ let arr = {}
|
|
|
+ arr.name = this.formData2.name
|
|
|
+ arr.procdefDescribe = this.formData2.procdefDescribe
|
|
|
+ arr.procedefKey = this.formData2.procedefKey
|
|
|
+ arr.nodes = this.bpmnData
|
|
|
+ arr.resourceName = this.xml.xml;
|
|
|
+ console.log(arr)
|
|
|
+ addBpmnZkReProcdef(arr).then(res=>{
|
|
|
+ this.msgSuccess("流程图保存成功");
|
|
|
+ this.loading = false
|
|
|
+ this.openBpmn = false
|
|
|
+ this.$router.push('/business/Middleware/bpmn/index')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 流程图取消按钮 */
|
|
|
+ cancelBpnm(){
|
|
|
+ this.openBpmn = false
|
|
|
+ },
|
|
|
getNodeTree(){
|
|
|
getBpmnZkNodeTreeList().then(res =>{
|
|
|
if(res.data){
|
|
|
@@ -399,7 +553,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- console.log(this.dataOptions)
|
|
|
+ // console.log(this.dataOptions)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -414,11 +568,11 @@ export default {
|
|
|
const that = this;
|
|
|
const element = this.$store.state.bpmn.nodeInfo;
|
|
|
if (element.businessObject) {
|
|
|
- console.log(
|
|
|
- element.businessObject.id,
|
|
|
- element.businessObject.name,
|
|
|
- element.businessObject.$type
|
|
|
- );
|
|
|
+ // console.log(
|
|
|
+ // element.businessObject.id,
|
|
|
+ // element.businessObject.name,
|
|
|
+ // element.businessObject.$type
|
|
|
+ // );
|
|
|
|
|
|
// if (element.businessObject.$type === "bpmn:UserTask") {
|
|
|
// that.formData.type = "用户任务1";
|
|
|
@@ -427,10 +581,36 @@ export default {
|
|
|
// }
|
|
|
|
|
|
if (element.businessObject.$type === "bpmn:ServiceTask") {
|
|
|
- that.formData.type = "服务任务1";
|
|
|
+ that.formData = {
|
|
|
+ name: "",
|
|
|
+ type: "",
|
|
|
+ nodeId:undefined,
|
|
|
+
|
|
|
+ }
|
|
|
that.formData.name = element.businessObject.name;
|
|
|
- that.open = true
|
|
|
+ let data = that.bpmnData
|
|
|
+
|
|
|
+ if(that.checkedKeys.length>0){
|
|
|
+ for(let i = 0; i<that.checkedKeys.length;i++){
|
|
|
+ if(element.businessObject.id == that.checkedKeys[i].procedefKey){
|
|
|
+ this.formData.nodeId = that.checkedKeys[i].id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(data.length>0){
|
|
|
+ for(let i = 0; i<data.length;i++){
|
|
|
+ if(element.businessObject.id == data[i].procedefKey){
|
|
|
+ this.formData.nodeId = data[i].nodeId
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if(that.serviceTaskStatus == false){
|
|
|
+ // that.serviceTask = true
|
|
|
+ // }else{
|
|
|
+ // that.serviceTask = false
|
|
|
+ // }
|
|
|
that.serviceTask = this.$store.state.bpmn.nodeVisible;
|
|
|
+ console.log(data,this.formData)
|
|
|
}
|
|
|
|
|
|
// if (element.businessObject.$type === "bpmn:ScriptTask") {
|
|
|
@@ -453,7 +633,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- 'formData.scence': 'currDeptChange',
|
|
|
+ 'formData.nodeId': 'currDeptChange',
|
|
|
task(val) {},
|
|
|
userTask(val) {
|
|
|
this.$store.state.bpmn.nodeVisible = val;
|
|
|
@@ -476,7 +656,7 @@ export default {
|
|
|
modeling.updateLabel(element, val);
|
|
|
},
|
|
|
deep: true
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
};
|
|
|
</script>
|
王涛