ui-process-h5 2.0.7-beta → 2.1.0-beta

package/src/packages/process/operation/treePerson.vue

@@ -0,0 +1,304 @@
+<template>
+    <div class="test">
+        <div v-if="nodeItems && nodeItems.length">
+            <div class="treeperson" v-for="value in nodeItems">
+                <template v-if="value.childNode && value.childNode.length">
+                    <div class="treeperson-title">
+                        下一步审批节点 
+                        <span class="treeperson-title--re">*</span>
+                    </div>
+                    <template v-if="nodeType == 'outing'">
+                        <div class="treeperson-firstnode" v-if="!(value.type == 'ExclusiveGatewayModel' && value.childNode.length == 1)">
+                            <div
+                                class="treeperson-radio"
+                                v-for="item in value.childNode"
+                                :class="
+                                    firstCheck == item.id
+                                        ? 'treeperson-radio-active'
+                                        : ''
+                                "
+                                @click="handleFirstNodeClick(item)"
+                            >
+                                <span></span>
+                                {{ item.nodeName || item.name }}
+                            </div>
+                        </div>
+
+                        <TreeNode
+                            :items="childrenItems"
+                            :endNode="childrenEndItems"
+                            :nodeType="nodeType"
+                            :param="param"
+                            :checkType="firstType"
+                            @onMultiNode="onMultiNode"
+                            @onVars="onVars"
+                        />
+                    </template>
+                </template>
+                <template v-else>
+                    <div class="treeperson-title">
+                        下一步审批节点
+                        <span class="treeperson-title--re">*</span>
+                    </div>
+                    <template v-if="nodeType == 'nexting'">
+                        <TreeNode
+                            :items="[value]"
+                            :endNode="childrenEndItems"
+                            :nodeType="nodeType"
+                            :param="param"
+                            :checkType="firstType"
+                            @onMultiNode="onMultiNode"
+                            @onVars="onVars"
+                        />
+                    </template>
+                    <template v-else>
+                        <TreeNode
+                            :items="[value]"
+                            :endNode="true"
+                            nodeType="nexting"
+                            :param="param"
+                            :checkType="firstType"
+                            @onMultiNode="onMultiNode"
+                            @onVars="onVars"
+                        />
+                    </template>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import TreeNode from "./treeNode.vue";
+
+export default {
+    name: "treeperson",
+    components: {
+        TreeNode,
+    },
+    props: {
+        // 传入节点数据
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        nodeType: {
+            type: String,
+            default: "outing",
+        },
+        // 通用参数
+        param: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data() {
+        return {
+            // 传入节点
+            nodeItems: [],
+            // 选人弹窗
+            visible: false,
+            // 当前勾选Id
+            partObjId: "",
+            // 存储选中人
+            partNode: [],
+
+            // 首节点单选
+            firstCheck: "",
+            firstType: "",
+
+            // 子集数组
+            childrenItems: [],
+            childrenEndItems: false,
+
+            // 父级vars
+            gateVars: {},
+
+            // 选人id
+            multiNode: [],
+            // vars
+            getVars: {},
+        };
+    },
+    watch: {
+        items: {
+            handler(val, vals) {
+                if (val && val.length) {
+                    if (this.nodeType == "nexting") {
+                        this.nodeItems = [];
+                        this.childrenEndItems = true;
+                        val.forEach((v) => {
+                            v = {
+                                ...v,
+                                ...v.userTaskModelDTO,
+                            };
+                            v.humanPerformerName = v.humanPerformer.name;
+                            // console.log("打印当前处理后数据", v);
+                            this.nodeItems.push(v);
+                        });
+                        // console.log("树结构获取当前节点:", this.nodeItems);
+                    } else if (this.nodeType == "outing") {
+                        this.nodeItems = val;
+                        console.log("nodeItems", this.nodeItems);
+                    }
+                    if(this.nodeItems.length == 1 && this.nodeItems[0]['type'] == 'ExclusiveGatewayModel'){
+                        if(this.nodeItems[0]['childNode'] && this.nodeItems[0]['childNode'].length == 1){
+                            this.handleFirstNodeClick(this.nodeItems[0])
+                        }
+                    }
+                    // console.log('nodeItems ===',this.nodeItems);
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    methods: {
+        onMultiNode(val) {
+            this.multiNode = val;
+            this.$emit("onMultiNode", this.multiNode);
+            // console.log("onMultiNode:::", this.multiNode);
+        },
+        onVars(val) {
+            if (val) {
+                this.getVars = {
+                    ...this.gateVars,
+                    ...val,
+                };
+            } else {
+                this.getVars = {
+                    ...this.gateVars,
+                };
+            }
+
+            this.$emit("onVars", this.getVars);
+            // console.log("onVars:::", this.getVars);
+        },
+        isOption(humanPerformer) {
+            return (
+                humanPerformer == "任意指定" ||
+                humanPerformer == "固定部门" ||
+                humanPerformer == "固定单位" ||
+                humanPerformer == "与流程申请人所在组织结构的位置相关" ||
+                humanPerformer == "固定群组"
+            );
+        },
+
+        handleFirstNodeClick(val) {
+            console.log('=====one',val);
+            if (val) {
+                this.firstCheck = val.id;
+                this.firstType = val.type;
+                let arr = [val];
+                if (val.childNode && val.childNode.length) {
+                    this.childrenItems = val.childNode;
+                    this.childrenEndItems = false;
+                } else {
+                    this.childrenItems = [val];
+                    this.childrenEndItems = true;
+                }
+
+                if (this.nodeType == "outing") {
+                    this.gateVars = {};
+                    arr.forEach((v) => {
+                        this.gateVars[v.incomingConditionItemList[0].itemName] =
+                            v.incomingConditionItemList[0].compareValue;
+                    });
+                }
+            }
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.treeperson {
+    &-title {
+        font-weight: 400;
+        font-size: 12px;
+        color: #565959;
+        padding: 8px 0;
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            background-color: #dcdcdc;
+            bottom: 0;
+            left: 0;
+        }
+
+        &--re {
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 16px;
+            color: #f14a4b;
+        }
+    }
+
+    &-items {
+    }
+
+    &-radio,
+    &-checkbox {
+        display: inline-flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #333;
+    }
+
+    &-radio {
+        span {
+            display: inline-block;
+            border: 1px solid #d1d1d1;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            box-sizing: border-box;
+            background-color: #fff;
+            margin-right: 5px;
+            position: relative;
+        }
+
+        &-active {
+            span {
+                border-color: rgb(0, 122, 255);
+                &::after {
+                    content: "";
+                    background-color: rgb(0, 122, 255);
+                    border-color: rgb(0, 122, 255);
+                    width: 12px;
+                    height: 12px;
+                    position: absolute;
+                    border-radius: 50%;
+                    left: 1px;
+                    top: 1px;
+                }
+            }
+        }
+    }
+    &-checkbox {
+        span {
+            display: inline-block;
+            border: 1px solid #d1d1d1;
+            border-radius: 3px;
+            width: 16px;
+            height: 16px;
+            box-sizing: border-box;
+            background-color: #fff;
+            margin-left: 5px;
+        }
+    }
+
+    &-firstnode {
+        padding: 11px 0;
+        .treeperson-radio {
+            margin-right: 20px;
+        }
+        .treeperson-radio:last-child {
+            margin-right: 0;
+        }
+    }
+}
+</style>