From 6373d8b70392c7114dfe7c3f9e92dc188df55eb3 Mon Sep 17 00:00:00 2001
From: ouyang <qinoy8521@163.com>
Date: Wed, 10 May 2023 18:35:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AB=AF=E5=88=B0=E7=AB=AF=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/subprocess/SubProcess.vue       | 309 ++++++++++++++++++
 1 file changed, 309 insertions(+)
 create mode 100644 com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue

diff --git a/com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue b/com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue
new file mode 100644
index 0000000..4daa170
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/src/views/subprocess/SubProcess.vue
@@ -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">&#xe632;</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>
\ No newline at end of file