端到端功能入口组件
This commit is contained in:
ouyang
parent
17666c2653
commit
6373d8b703
309
com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue
Normal file
309
com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue
Normal file
@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
title="生成端到端流程图"
|
||||
height="350px"
|
||||
width="800px"
|
||||
:visible.sync="dialogVisible"
|
||||
:border="false">
|
||||
<div class="sub-process-dialog-content" style="margin: 25px 25px;">
|
||||
<el-form label-width="95px" label-position="left">
|
||||
<el-form-item label="位置" required>
|
||||
<el-input disabled v-model="subProcessForm.position.label" size="small">
|
||||
<template slot="append">
|
||||
<el-popover ref="positionPopover" placement="bottom" trigger="click" width="600" @show="positionPopoverShowEvent">
|
||||
<div style="height: 200px; overflow: auto;">
|
||||
<el-tree
|
||||
v-if="subProcessForm.position.showTree"
|
||||
@node-collapse="closePositionNode"
|
||||
@node-click="positionTreeNodeClickEvent"
|
||||
ref="positionTree"
|
||||
node-key="id"
|
||||
lazy
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
:load="loadPositionTreeNode"
|
||||
:props="treeProps">
|
||||
<span slot-scope="{node, data}">
|
||||
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': node.data.icon.color}" v-html="node.data.icon.icon"></i>
|
||||
<span :style="{'font-weight': data.id.length < 36 ? '600' : ''}">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<span slot="reference" style="cursor: pointer;"><i class="awsui-iconfont"></i></span>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="子流程选择" required>
|
||||
<el-popover ref="subProcessPopover" placement="bottom" trigger="click" width="600">
|
||||
<div class="sub-process-tree-box" style="height: 300px; overflow: auto;">
|
||||
<el-tree
|
||||
ref="subProcessModelTree"
|
||||
@node-collapse="closeSubProcessNode"
|
||||
node-key="id"
|
||||
lazy
|
||||
show-checkbox
|
||||
:load="loadModelTreeNode"
|
||||
@check="modeTreeNodeCheck"
|
||||
:props="treeProps">
|
||||
<span slot-scope="{node, data}">
|
||||
<i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': node.data.icon.color}" v-html="node.data.icon.icon"></i>
|
||||
<span :style="{'font-weight': data.id.length < 36 ? '600' : ''}">{{node.label}}</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
<div slot="reference" style="width: 100%;height: 65px;border: 1px solid #dcdfe6;cursor: pointer;display: inline-flex;align-items: center;flex-wrap: wrap;overflow: auto;">
|
||||
<div>
|
||||
<el-tag style="margin: 5px;" v-for="tag in subProcessForm.processTags" :key="tag.value">{{ tag.label }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="排布方式" required>
|
||||
<el-radio-group v-model="subProcessForm.direction">
|
||||
<el-radio v-for="item in subProcessForm.directionOpts" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型名称" required>
|
||||
<el-input v-model="subProcessForm.modelName" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<awsui-button type="primary" @click="generateSubProcessModel">确定</awsui-button>
|
||||
<awsui-button @click="close">取 消</awsui-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import awsuiAxios from "../../awsuiAxios";
|
||||
|
||||
export default {
|
||||
name: "SubProcess",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
dialogVisible: false,
|
||||
subProcessForm: {
|
||||
position: {
|
||||
path: '',
|
||||
label: '',
|
||||
showTree: false,
|
||||
},
|
||||
processList: [],
|
||||
direction: 'vertically',
|
||||
directionOpts: [{value: 'vertically', label: '纵向排布'},{value: 'horizontal', label: '横向排布'}],
|
||||
modelName: '',
|
||||
processTags: [],
|
||||
popoverVisible: false
|
||||
},
|
||||
treeProps: {
|
||||
label: 'name',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initData(){
|
||||
// 获取位置根目录
|
||||
const param = {
|
||||
url: 'jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.method.process.subprocess.init_data',
|
||||
}
|
||||
}
|
||||
awsuiAxios.post(param)
|
||||
.then(ro => {
|
||||
if (ro.result === 'ok') {
|
||||
// console.log('initData', ro);
|
||||
this.subProcessForm.position.label = ro.data.dirRootName;
|
||||
this.subProcessForm.position.path = ro.data.dirRootPath;
|
||||
}else if (ro.result === 'error') {
|
||||
this.$message({type: 'error', message: ro.msg});
|
||||
this.$emit('getResult');
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
close(){
|
||||
this.$emit('getResult');
|
||||
this.clearData();
|
||||
// 子流程树节点所选清空
|
||||
this.$refs.subProcessModelTree.setCheckedKeys([]);
|
||||
},
|
||||
closeAdapter(done) {
|
||||
this.close();
|
||||
done();
|
||||
},
|
||||
clearData(){
|
||||
this.dialogVisible = false;
|
||||
this.subProcessForm.processTags = [];
|
||||
this.subProcessForm.processList = [];
|
||||
this.subProcessForm.modelName = '';
|
||||
this.subProcessForm.popoverVisible = false;
|
||||
this.subProcessForm.position.label = '';
|
||||
this.subProcessForm.position.showTree = false;
|
||||
},
|
||||
// 生成端到端总图
|
||||
generateSubProcessModel(){
|
||||
console.log('执行参数',this.subProcessForm);
|
||||
},
|
||||
// 加载子流程节点树
|
||||
loadModelTreeNode(node, resolve){
|
||||
const that = this;
|
||||
const param = {
|
||||
url: 'jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.method.process.subprocess.find_tree_node',
|
||||
wsId: that.$store.getters.getWsIdFn,
|
||||
teamId: that.$store.getters.getTeamIdFn,
|
||||
createUsers: JSON.stringify(that.$store.getters.getCreateUsers),
|
||||
orgIds: JSON.stringify(that.$store.getters.getOrgIds),
|
||||
methodIds: JSON.stringify(that.$store.getters.getMethodIds),
|
||||
pid: ''
|
||||
}
|
||||
};
|
||||
if (node.level !== 0){
|
||||
param.data.pid = node.data.id;
|
||||
}
|
||||
awsuiAxios.post(param)
|
||||
.then(ro => {
|
||||
if (ro.result === 'ok') {
|
||||
resolve(ro.data);
|
||||
const tree = that.$refs.subProcessModelTree;
|
||||
if (ro.data.length){
|
||||
tree.getNode(ro.data[0].id).expand();
|
||||
setTimeout(() => {
|
||||
let childNode = tree.getNode(ro.data[0].id).childNodes[0];
|
||||
if (childNode != null) {
|
||||
childNode.expand();
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
modeTreeNodeCheck(data, obj){
|
||||
const that = this;
|
||||
if (!obj.checkedKeys.length) {
|
||||
// 当前树没有选中的节点 对应的tag数组清空
|
||||
that.subProcessForm.processTags = [];
|
||||
return;
|
||||
}
|
||||
// 调接口查询当前选中节点的所有子节点
|
||||
const param = {
|
||||
url: 'jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.method.process.subprocess.find_tree_child_node_all',
|
||||
nodeKeyJsonArr: JSON.stringify(obj.checkedKeys)
|
||||
}
|
||||
};
|
||||
awsuiAxios.post(param)
|
||||
.then(ro => {
|
||||
if (ro.result === 'ok') {
|
||||
// console.log('节点选中接口',ro.data);
|
||||
that.subProcessForm.processTags = ro.data;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
that.$message({type: 'error', message: err.msg});
|
||||
});
|
||||
},
|
||||
// 关闭时清空，下次展开重新请求动态加载
|
||||
closeSubProcessNode(obj, node, tree) {
|
||||
node.childNodes = [];
|
||||
node.loaded = false;
|
||||
},
|
||||
// 加载指定位置节点树
|
||||
loadPositionTreeNode(node, resolve){
|
||||
const that = this;
|
||||
const param = {
|
||||
url: 'jd',
|
||||
data: {
|
||||
cmd: 'com.actionsoft.apps.coe.method.process.subprocess.construct_position_tree',
|
||||
wsId: that.$store.getters.getWsIdFn,
|
||||
teamId: that.$store.getters.getTeamIdFn,
|
||||
pid: '',
|
||||
}
|
||||
};
|
||||
if (node.level !== 0){
|
||||
param.data.pid = node.data.id;
|
||||
}
|
||||
awsuiAxios.post(param)
|
||||
.then(ro => {
|
||||
if (ro.result === 'ok') {
|
||||
resolve(ro.data);
|
||||
const tree = that.$refs.positionTree;
|
||||
if (ro.data.length){
|
||||
tree.getNode(ro.data[0].id).expand();
|
||||
setTimeout(() => {
|
||||
let childNode = tree.getNode(ro.data[0].id).childNodes[0];
|
||||
if (childNode != null) {
|
||||
childNode.expand();
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
closePositionNode(obj, node, tree){
|
||||
node.childNodes = [];
|
||||
node.loaded = false;
|
||||
},
|
||||
positionTreeNodeClickEvent(data, node, obj){
|
||||
if (node.data.id === this.subProcessForm.position.path.split("/")[0]){
|
||||
return;
|
||||
}
|
||||
let tempNode = null;
|
||||
let pathIds = [];
|
||||
let pathNames = [];
|
||||
for (let i = 0; i < node.level; i++) {
|
||||
if (tempNode == null){
|
||||
pathIds.push(node.data.id);
|
||||
pathNames.push(node.data.name);
|
||||
tempNode = node;
|
||||
}else {
|
||||
tempNode = tempNode.parent;
|
||||
pathIds.push(tempNode.data.id);
|
||||
pathNames.push(tempNode.data.name);
|
||||
}
|
||||
}
|
||||
this.subProcessForm.position.label = pathNames.reverse().join("/");
|
||||
this.subProcessForm.position.path = pathIds.reverse().join("/");
|
||||
|
||||
this.$refs.positionPopover.doClose();
|
||||
},
|
||||
positionPopoverShowEvent(){
|
||||
this.subProcessForm.position.showTree = true;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.dialogVisible = val;
|
||||
if (val) {
|
||||
this.initData();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user